@charset "utf-8";
/* CSS responsive caue du Loiret*/
body {
  max-width: 1050px;   /* largeur max souhaitée */
  margin: 0 auto;       /* centre horizontalement */
  padding: 0 10px;      /* optionnel : marge intérieure pour petits écrans */
  box-sizing: border-box;
}
/* wrapper garde le ratio original du plan*/
.image-wrapper { /*cadre general */
  position: relative;
  width: 90vw;
  max-width: 1000px;     /* largeur max pour ne pas dépasser l'écran */
  margin: 0 0;       /* centrer */
  padding-bottom: 78.7%; /* ratio portrait (hauteur / largeur * 100%) */
}

.image-wrapper img { /* gestrion du plan*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover selon besoin */
}
.cercle{/*boutons de selection*/
	position: absolute; width: 2.8%; height: 2.8%; border-radius: 50%;
  cursor: pointer; display: inline-block; background:rgba(245,245,245,0.5);
}

.BInfo{z-index:100; display:none; position:relative; top:-200px; width: 350px; padding:0;}
.BInfo.droite{ left:-20px;} .BInfo.gauche{left:-220px;} .BInfo.haut{top:-280px;} .BInfo.bas{top:-100px;} 
.numFiche{z-index:101; border-radius:50%; background:rgba(245,245,245,0.9); max-width: 25px; max-height: 25px;}
.infos_aff{ position: relative; top:8px; left:8px; padding:10px; background-color: rgba(0,0,0,0.8); text-align: left; color:rgb(220,220,220);}
.infos_aff img{position:relative; display: block; width: 100%; height: auto; margin-top: 10px;}

.infos_aff p{position:relative;display:block; font:400 1em verdana;} 
.infos_aff a{color:rgb(180,210,100);} .infos_aff a:hover{text-decoration: none;color:rgb(250,250,250);}

#b1_1{top:68%; left:39%;}		#b1_2{top:57%; left:50%;}		#b1_3{top:69%; left:55%;}
#b2_1{top:50%; left:21%;}		#b2_2{top:56%; left:24%;}		#b2_3{top:54%; left:46.5%;}
#b3_1{top:40%; left:26%;}		#b3_2{top:25%; left:68%;}		#b3_3{top:43%; left:86%;}
#b4_1{top:76%; left:71%;}		#b4_2{top:23%; left:79%;}
#b5_1{top:49%; left:53%;}		#b5_2{top:63%; left:79%;}
#b6_1{top:67%; left:26%;}		#b6_2{top:21%; left:52%;}
/** Tablette **/
@media (max-width: 800px) and (min-width:550px){
.numFiche{max-width: 20px; max-height: 20px;}
.infos_aff{top:5px; left:5px; padding:6px;}
.infos_aff p{font:200 0.8em verdana;}
.BInfo{max-width: 220px;}
.BInfo.droite{ left:-10px;} .BInfo.gauche{left:-100px;}
}
/** Mobile **/
@media (max-width : 720px){
.numFiche{max-width: 16px; max-height: 16px;}
.infos_aff{top:4px; left:4px; padding:4px;}
.infos_aff p{font:100 0.7em verdana;}
.BInfo{max-width: 200px;}
.BInfo.droite{ left:11px;} .BInfo.gauche{left:-100px;}
}
@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial a  1.0 */
}