@charset "utf-8";
/* CSS Document */	
body {
	width:1000px ;
	margin:auto ;
	background:#F3F3F3 ;
    font-family: 'Trebuchet MS', Arial, sans-serif;
	font-size: 0.9em;
    color: #181818;
}
#galerie {
	display:inline-block ;
	vertical-align:top ;
	position:relative ;
	width:668px ;
	height:710px ;
	background-color:white ;
	box-shadow: 1px 1px 20px #d2d2d2 ;
	padding:10px ;
	margin-top:20px ;
}
#annonce_info {
	display:inline-block ;
	vertical-align:top ;
	width:668px ;
	background-color:white ;
	box-shadow: 1px 1px 20px #d2d2d2 ;
	padding:10px ;
	padding-bottom:50px ;
	margin-top:20px ;
}
.rune {
	display: inline-block;
	width:20px ;
	margin-right:7px ;
	margin-left: 20px ;
	position:relative ;
	top:3px ;
}
a {
	text-decoration:none ;
}
h1 {
	margin-top:25px ;
	margin-bottom:0px ;
	font-size:21px ;
	font-weight:300 ;
}
#pub2 {
	margin-left:5px ;
	margin-top:5px ;
}
#pub3 {
	margin-left:5px ;
	margin-top:5px ;
}
aside {
	display:inline-block ;
	vertical-align:top ;
}
#retour_liste {
	display:inline-block ;
	vertical-align:top ;
	height:40px ;
	line-height:40px ;
	text-align:center ;
	font-weight:bold ;
	width:296px ;
	font-size:16px ;
	letter-spacing:2px ;
	border:solid rgb(11, 0, 0) 0px ;
	margin-left:5px ;
	margin-top:20px ;
	background-color:#ff5100 ;
	color:white ;	
}
#retour_liste:hover,#retour_liste2:hover {
	background-color:#007EBB ;
	cursor:pointer ;
}
a #retour_liste,a #retour_liste2 {
	color:white ;
}

#retour_liste2 {
	height:40px ;
	line-height:40px ;
	text-align:center ;
	font-weight:bold ;
	width:693px ;
	font-size:16px ;
	letter-spacing:2px ;
	border:solid rgb(27, 26, 26) 0px ;
	margin-bottom:20px ;
	margin-top:20px ;
	background-color:#ff5100 ;
	color:white ;	
}
/************************************************************************************/
/* On peut controler ici l'affichage des listes d'images.
Il faut mettre overflow: visible dans slider et sliderGrand.
display: block dans sliderGrand
*/
#slider {
	position:relative ;
	left:8px ;
	top:-40px ;
	width: 640px;
	height: 480px;
	overflow:hidden ;
	background-color:white ;
}
.slideshow {
   position:relative ;
   right:642px ;
}
.slideshow li {
    float: left ;
}
.slideshow ul{
    /* 10 images donc 10 x 100% mais il faut rajouter 2 blocs pour le stockage des images */
   width: 1200%;
   padding:0; margin:0;
   list-style: none;
   cursor:pointer ;
}   

#conteneur_grandeGalerie {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:200 ;
}
#sliderGrand {
	display:none ;
	width: 1200px ;
	height: auto ;
	overflow:hidden ;
	border:solid rgb(35, 35, 35) 30px ;
	border-left:solid rgb(35, 35, 35) 50px ;
	border-right:solid rgb(35, 35, 35) 50px ;
	border-radius:5px ;
	background-color:rgb(35, 35, 35) ;
	max-width: 80vw;
	max-height: 45vw;
}
  
ul.decalage_grand {
	position:relative ;
	right:560px ;
}
.conteneur_image {
	display: flex ;
	align-items:baseline;
	justify-content:center ;
	background-color:rgb(35, 35, 35) ;  
}

#grand1,#grand2,#grand3,#grand4,#grand5,#grand6,#grand7,#grand8,#grand9,#grand10 {
	z-index:200 ;
	max-width: 80vw;

}
#grand0 {
	max-width: 80vw;
}

img.grande_image {
	display: block;
    width: 100% ;
	max-height: 800px;
	pointer-events: none; /* Empêche l'icone visual recherche d'apparaitre */
}
#next_grand {
	display:none ;
	position:absolute ;
	left: 96.4%;  
	top: 50%;
	width:40px ;
	height:40px ;
	background-color:white ;
	border:solid black 1px ;
	cursor:pointer ;
	opacity:0.9 ;
	z-index:10000;
	background:white ;
	border-radius:5px ;
	overflow:visible ;
}
#prev_grand {
	display:none ;
	 position:absolute ;
	 left:5px ;
	 top:350px ;
	 width:40px ;
	 height:40px ;
	background-color:white ;
	border:solid black 1px ;
	opacity:0.9 ;
	cursor:pointer ;
	z-index:10000 ;
	background:white ;
	border-radius:5px ;
	 overflow:visible ;
}

.slideshowx {
   position:relative ;
   right:642px ;
}

#next {
	z-index:3 ;
	width:24px ;
	position:relative ;	
	left:610px ;
	top:254px ;
	background-color:white ;
	border:solid #DADADA 1px ;
	border-radius:2px ;
	opacity:0.5 ;
	padding:6px ;
	cursor:pointer ;
}
#prev {
	z-index:3 ;
	width:24px ;
	position:relative ;
	left:10px ;
	top:220px ;
	background-color:white ;
	border:solid #DADADA 1px ;
	border-radius:2px ;
	opacity:0.5 ;
	padding:6px ;
	cursor:pointer ;
}

#next:hover {
	background-color:white ;
	opacity:1 ;
}
#prev:hover {
	background-color:white ;
	opacity:1 ;
}
.flechedroit {
	width:0px;
	border:12px solid transparent;
	border-left:12px solid #0080C0;
	position:relative ;
	left:8px ;	
}
.flechegauche {
	width:0px;
	border:12px solid transparent;
	border-right:12px solid #0080C0;
	position:relative ;
	right:8px ;
}


.flechedroit_grand {
	width:0px;
	border:15px solid transparent;
	border-left:15px solid #00557D;
	position:relative ;
	left:15px ;	
	top:5px ;
}
.flechegauche_grand {
	width:0px;
	border:15px solid transparent;
	border-right:15px solid #00557D;
	position:relative ;
	left:-5px ;	
	top:5px ;
}

.croix {
	display:inline-block ;
	vertical-align:middle ;
	position:absolute ;
	left:87% ;
	top:5px ;
	height:30px ;
	width:30px ;
	background-color:transparent ;
	border:solid rgb(238, 237, 237) 1px ;
	box-shadow: 1px 1px 5px black ;	 
	cursor:pointer ;
}
.croix1 {
	display:inline-block ;
	vertical-align:middle ;
	position:absolute ;
	left:14px ;
	top:3px ;
	height:22px ;
	border-left:solid #df0202 2px ;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);

}
 .croix2 {
	display:inline-block ;
	vertical-align:middle ;
	position:absolute ;
	left:15px ;	  
	top:3px ;
	height:22px ;
	border-left:solid #df0202 2px ;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.croix10 {
	 display:none ;
	 position:absolute ;
	 left:96.7% ;
	 top:-1.5% ;
	 height:30px ;
	 width:30px ;
	 background-color:white ;
	 border:solid black 1px ;
	cursor:pointer ;
	border-radius:50% ;
	z-index:1100;
 }

#next_vide {
	width:24px ;
	height:36px ;
	position:relative ;	
	left:560px ;
	top:244px ;
}
#prev_vide {
	width:24px ;
	height:36px ;
	position:relative ;
	left:0px ;
	top:210px ;
}

#next:hover {
	background-color:white ;
	opacity:0.8 ;
}
#prev:hover {
	background-color:white ;
	opacity:0.8 ;
}
.miniature {
	cursor:pointer ;
}
#tab_miniature {
	position:relative ;
	margin-left:8px ;
	margin-top:-30px ;
}

#multicouche2 {
	display:inline-block ;
	position:relative ;
  margin-bottom:auto ;  
  margin-right:auto ;
  margin-left:auto ;
  margin-right:auto ;
}

#multicouche2 img {
  position:absolute ;
  top:0px ;
  left:0px ;/*l'élément est positionné mais il se place tout seul.Important une position absolute dans une position relative permet de faire se chevaucher les images.*/
  z-index:12 ;
  cursor:pointer ;

}

.flanc_gauche {
	display:inline-block ;
	vertical-align:top ;
	width:120px ;
	background-color:white ;
	z-index:200 ;
	border:solid red 0px ;
}
.flanc_droit {
	display:inline-block ;
	vertical-align:top ;
	width:120px ;
	background-color:white ;
	z-index:200 ;
	border:solid red 0px ;
}

#shadow {
    background-color:black ;
	opacity:0.8 ;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:10;
}
h2 {
	display:inline-block ;
	vertical-align:middle ;
	font-size:16px ;
	margin:0 ;
	padding:0 ;
}
h3 {
	display:inline-block ;
	vertical-align:baseline ;
	font-style:italic ;
}
#titre_description {
	margin-top:15px ;
}
#circle {
	display:inline-block ;
	vertical-align:middle ;
 width: 10px;
 height: 10px;
 background: red;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
#square {
	display:inline-block ;
	vertical-align:middle ;
	margin-right:10px ;
 width: 10px;
 height: 10px;
 background:#005F8C;
 }
#ensemble_prix {
	float:right ;
}
.prix {
	display:inline-block ;
	vertical-align:baseline ;
	font-size:26px ;
	font-weight:500 ;

}
.bouquet {
	display:inline-block ;
	vertical-align:baseline ;
	text-align:right ;
	margin-right:5px ;
	font-size:18px ;

}
.prixm2 {
	text-align:right ;
	font-size:12px ;
	font-weight:bold ;
	color:#D90000 ;
}
.charges {
	text-align:right ;
	font-size:12px ;
	font-weight:bold ;
	color:black ;
}
#description {
	padding:20px ;
	padding-top:27px ;
}
.test {
	display:block ;
	border:solid red 1px ;
	margin-left:auto ;
	margin-right:auto ;
}
.caracteristiques {
	display:inline-block ;
	padding:10px ;
	background-color:#EFEFEF ;
	color:black ;
	font-weight:bold ;
	font-size:14px ;
	margin-top:2px ;
}
.caracteristiques img {
	margin-left:5px ;
	margin-right:3px ;
	position:relative ;
	top:2px ;
}
.caracteristiques_vide {
	display:inline-block ;
	padding:10px ;
}

table.cara {
	width:630px ;
	margin:auto ;
	border:solid #999 1px ;
	margin-top:50px ;
	font-size:14px ;
	border-collapse:collapse ;
	border:solid white 1px ;


}
table.cara td {
	border:solid #D8D8D8 1px ;
	padding:10px ;	
	
}
td {
	text-align: center;
}


.check {
	display:inline-block ;
	position:relative ;
	top:3px ;	
	left:5px ;
	height:16px ;
	width:16px ;
	background-image:url(../images/check3.png) ;
}
.uncheck {
	display:inline-block ;
	border:solid black 1px ;
	width:10px ;
	position:relative ;
	top:-3px ;
}

/*******************************************************/
#bloc_dpe {
	display:flex ;
	float:left ;
	width:650px ;
	height:70px ;
	margin:auto;
	margin-top:30px ;
	background:white ;
	margin-bottom:0px ;
	align-items:center ;
}
.img_dpe {
	display:inline-block;
	width:200px ;
	margin-left:20px ;
}
.img_ges {
	display:inline-block ;
	width:200px ;
	margin-left:230px ;
}
#EmplacementDeMaCarte {
	margin-top:20px ;
	border:solid black 1px ;
	height: 500px ;
}
#map {
	margin-top:5px ;
	box-shadow: 1px 1px 20px #d2d2d2 ;
	height: 500px ;
	width:690px ;
}
#ligne_localisation {
	width:690px ;
	margin-top:30px ;
	font-size:14px ;
	font-weight:bold ;
}
.adresse_droite {
	font-weight:500 ;
	float:right ;
	text-align:right ;
}
.dpe {
	cursor:pointer ;
	text-decoration:underline ;
	color:#750000 ;
}
.ges {
	cursor:pointer ;
	text-decoration:underline ;
	color:#750000 ;
}
#cadre_dpe {
	display:none ;
	position: fixed;
	overflow:auto ;
	top: 50%;
	left: 50%;
	width:400px ;
	height:400px ;
	line-height:400px ;
	text-align:center ;
	max-height: 80vh;
	max-width: 80vw;
	transform: translate(-50%, -50%);
	padding:50px ;
	padding-right:20px ;
	border:solid black 2px ;
	box-shadow: 5px 5px 12px black ;
	background-color:white ;
	color:black ;
	font-weight:bold ;
}
#cadre_ges {
	display:none ;
	position: fixed;
	overflow:auto ;
	top: 50%;
	left: 50%;
	width:400px ;
	height:400px ;
	line-height:400px ;
	text-align:center ;
	max-height: 80vh;
	max-width: 80vw;
	transform: translate(-50%, -50%);
	padding:50px ;
	padding-right:20px ;
	border:solid black 2px ;
	box-shadow: 5px 5px 12px black ;
	background-color:white ;
	color:black ;
	font-weight:bold ;
}
.croix1_dpe {
	 float:right ;
	 position:relative ;
	 top:-20px ;
	 right:10px ;
	 height:30px ;
	 width:30px ;
	 background-color:white ;
	 border:solid black 1px ;
	box-shadow: 1px 1px 5px black ;	 
	cursor:pointer ;
 }
 .croix2_dpe {
	 display:inline-block ;
	 vertical-align:middle ;
	 position:absolute ;
	 left:14px ;
	 top:3px ;
	 height:20px ;
	  border-left:solid #EC0000 2px ; 
	 -moz-transform: rotate(45deg);
	 -webkit-transform: rotate(45deg);
	 -ms-transform: rotate(45deg);
	 -o-transform: rotate(45deg);

 }
  .croix3_dpe {
	 display:inline-block ;
	 vertical-align:middle ;
	 position:absolute ;
	 left:15px ;	  
	 top:3px ;
	 height:20px ;
	 border-left:solid #EC0000 2px ; 
	 -moz-transform: rotate(-45deg);
	 -webkit-transform: rotate(-45deg);
	 -ms-transform: rotate(-45deg);
	 -o-transform: rotate(-45deg);
 }
#echelle_dpe {
	background-image:url(../images/echelle_dpe.jpg) ;
	background-repeat:no-repeat ;
	width:263px ;
	height:269px ;
	vertical-align:middle ;
	display:inline-block ;
	text-align:left ;
	line-height:normal ;

}
.mesure_dpe_ges {
	background-image:url(../images/fleche_dpe.jpg) ;
	width:48px ;
	height:25px ;
	color:white ;
	text-align:center ;
	line-height:22px ;
}
#echelle_ges {
	background-image:url(../images/echelle_ges.jpg) ;
	background-repeat:no-repeat ;
	width:263px ;
	height:241px ;
	vertical-align:middle ;
	display:inline-block ;
	text-align:left ;
	line-height:normal ;
}
.revenir_compte {
	width:400px ;

	border:solid black 1px ;
	text-align:center ;
	margin-top:20px ;
	height:40px ;
	background-color:#EC7600  ;
}
.revenir_compte a {
	display:block ;
	line-height:40px ;
	color:black ;
	font-size:16px ;
	text-decoration:none ;
}
.revenir_compte a:hover {
	background-color:#00DF00 ;
}

/* ************************************************************* */
	

 .croix11 {
	 display:inline-block ;
	 vertical-align:middle ;
	 position:absolute ;
	 left:14px ;
	 top:5px ;
	 height:22px ;
	 border-left:solid black 2px ;
	 -moz-transform: rotate(45deg);
	 -webkit-transform: rotate(45deg);
	 -ms-transform: rotate(45deg);
	 -o-transform: rotate(45deg);

 }
  .croix12 {
	 display:inline-block ;
	 vertical-align:middle ;
	 position:absolute ;
	 left:15px ;	  
	 top:5px ;
	 height:22px ;
	 border-left:solid black  2px ;
	 -moz-transform: rotate(-45deg);
	 -webkit-transform: rotate(-45deg);
	 -ms-transform: rotate(-45deg);
	 -o-transform: rotate(-45deg);
 }
 /* ************************************************************* */
 #info_general {
	position:relative ;
	display:inline-block ;
	vertical-align:top ;
	margin-top:20px ;
	margin-left: 5px;
	padding-left:5px ;
	border:solid black 1px ;
	height:475px ;
	width:294px ;
	background-color:#3F5F6B; 
	color:white ;
	overflow:hidden ;
 }

 .voile {
	position:absolute ;
	left:0px ;
	height:475px ;
	width:300px ;
	background-color:black ;
	opacity:0.1 ;
 }
 #info_coordonnees {
	 display:inline-block ;
	 margin-top:80px ;
 }
 #info_ville {
	 margin:15px ;
 }
 .ligne_info {
	margin:10px ;
}
.info_haut {
	position:absolute ;
	margin-top:10px ;
	margin-bottom:20px ;
	background-color:transparent ;
	z-index:9 ;
}
.contact_haut {
	display:inline-block ;
	vertical-align:top ;
}
.tel_haut {
	margin-left:5px ;
	font-size:15px ;
	font-style:italic ;
}
.telx {
	display:inline-block ;
	vertical-align:middle ;
	cursor:pointer ;
	color:rgb(255, 255, 255) ;
	font-size:16px ;
}
 .entoure_logo {
	 position:absolute ;
	 width:80px ;
	 height:80px ;
	 box-shadow:5px 5px 5px black ;
	 z-index:8 ;
 }
.calque {
	position:absolute ;
	left:1px ;
	width:298px ;
	height:475px ;
	/* background-color:#253F41; */
	background-color:#333;
	z-index:2 ;
}
 .calque_ville {
	 position:absolute ;
	 top:275px ;
	 left:0px ;
	 font-style:italic ;
	 opacity:0.7 ;
	 border:solid red 0px ;
	 width:300px ;
	 text-align:center ;
 }
 .calque_info {
	position:absolute ;
	top:153px ;
	left:0px ;
	font-style:italic ;
	opacity:0.7 ;
	border:solid red 0px ;
	width:300px ;
	text-align:center ;
}
  .entoure_image {
	 width:200px ;
	 margin:auto ;
	 margin-top:150px ;
	 height:140px ;
	 border:solid black 1px ;
	 box-shadow: 0px 0px 10px 8px #006B9F; 
	 background-color:#333;
 }
 .entoure_image:hover {
	 box-shadow: 0px 0px 10px 12px #006B9F; 
	 cursor:pointer ;	 
 }
 .image_centre {
	 width:152px ;
	 height:100px ;
	 margin:auto ;
	 margin-top:22px ;
	 box-shadow:2px 2px 2px black ;
	 background-image:url(../images/sextant2.jpg) ;
 }
 .no-icons {
    pointer-events: none; /* Empêche les interactions directes */
    user-select: none; /* Désactive la sélection */
}
 .image_centre img {
	display: block;
	 width: 152px ;
	 height: 100px ;
	 object-fit:none; 
	 aspect-ratio: auto; /* Empêche la conservation du ratio */
	 opacity:0.2 ;
 }

 .rose {
	 width:90px ;
	 height:87px ;
	 margin:auto ;
	 margin-top:70px ;
	 background-image:url(../images/rose_cercle.png) ;
	 background-repeat:no-repeat ;
	 opacity:0.9 ;
 }
 img#image_rose {
 }
 .date_publication {
	 float:right ;
	 margin:3px ;
	 margin-left:20px ;
	 font-weight:bold ;
	 font-size:12px ;
	 font-style:italic ;
 }