* {
    margin: 0;
    padding: 0;
}

.lieu{
    background-color: #e6ded8 ; /*  gris-rose */
    padding: 40px 10% 20px 10%;
    border-top: 3px solid #ccc1ba; /* gris */
    border-bottom: 3px solid #ccc1ba;  /*gris */
}

.boite-chambre, .boite-classe, .boite-cuisine, .boite-exterieur, .boite-habitat, .boite-salle-de-bains, .boite-voies-de-circulation {
    max-width: 900px;
    width: 100%;
}

.drag-drop {/*conteneur objet + son nom dans la zone d'origine*/
  display: inline-block;
  margin: 10px;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.dropzone .inner{width: 100%;}/*zone de dépôt*/

.end-drop .nom-objet {visibility: visible;}

.drag-drop.can-drop .nom-objet {visibility: hidden;}

.end-drop:hover div.info-bulle{
    visibility: hidden;
	opacity: 1;
	top: -150px;
	transition: all 800ms ease-out;
	-webkit-transition: all 800ms ease-out;
	-moz-transition: all 800ms ease-out;
	-ms-transition: all 800ms ease-out;
	-o-transition: all 800ms ease-out;
}

.end-drop.can-drop:hover div.info-bulle{
 	visibility: visible;
	opacity: 1;
	top: -150px;
	transition: all 800ms ease-out;
	-webkit-transition: all 800ms ease-out;
	-moz-transition: all 800ms ease-out;
	-ms-transition: all 800ms ease-out;
	-o-transition: all 800ms ease-out;
}

/*Infobulle*/
.main {/*conteneur objet + son nom dans la zone d'origine*/
	width: 100%;
	margin: 10% auto;
	padding: 0;
}

.main a {/*objet dans la zone d'origine*/
	text-decoration: none;
	outline: none !important;
}

/*---- Bouton ----*/

a.bouton {/*image de l'objet*/
	border: 1px dashed transparent/*1a3d75*/!important;/*bien laisser cette ligne pr éviter le jeu du survol*/
	position: relative !important;
	display: block !important;
	text-align: center;/*centre l'img horizontalement dans le conteneur*/
	margin: 0 auto;/*centre l'img horizontalement dans le conteneur*/
	transition: all 300ms ease-out;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
}

a.bouton:hover {
    border: 1px dashed #ababab/*gris*/;
	transition: all 300ms ease-out;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
}

/*---- Bouton > info-bulle ----*/
a.bouton div.info-bulle {
	visibility: hidden;
	opacity: 0;
	position: absolute !important;
	top: -100px;/*fait disparaître l'infobulle quand on lâche l'objet*/
	left:-10% /*0*/;
	transition: all 300ms ease-out;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
}

div.info-bulle {
	width: 120%;/*100%*/
	padding: 0px;
	margin: 0 auto;
	background-color:#f0f3e1;/*vert pâle - couleur de fond de l'infobulle*/
	border: 1px solid #CCC;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

div.info-bulle::before {/*flèche de l'infobulle*/
	content: '';
	position: absolute;
	bottom: -5px;
	left: 45%;
	width: 0;
	height: 0;
	border-top: 5px solid #f5f5f5;/*gris*/
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

div.info-bulle p {
	color: #444;/*gris*/
	padding: 6px;
	margin: 0;
	text-align:left /*center*/;
	font-size:0.9em;
}

.nom-objet{
    text-align: center;
    margin-bottom: 12px;
	font-weight:bold;
}


/*Media queries*/
@media all and (max-width: 717px){
    .bouton img {max-width: 70%; }
}

/****** Pour l'impression *******/
@media print{
	.lieu, 
	.boite-chambre, 
	.boite-classe, 
	.boite-cuisine, 
	.boite-exterieur, 
	.boite-habitat, 
	.boite-salle-de-bains, 
	.boite-voies-de-circulation,
	.drag-drop,
	.main,
	a.bouton{display:none;}