html, body {
	background-color: #365a7c;	
	color: #000033;
	font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   overflow-x: hidden;
   width: 100%;
}

.integral {
      
    /*width: 100%;          /* Prend toute la largeur de la page */
    max-width: 1200px;    /* Ne dépasse pas 1200px même sur les grands écrans */
    margin: 0 auto;       /* Centre le div horizontalement */
    padding: 20px;        /* Ajoute des marges internes (optionnel) */

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

a:visited, a:active, a:hover, a:focus, a:link {
    text-decoration: none;
 }
    
.header {

    margin-bottom: 9px;
    position: relative;
}

.slide {
      
        border: 1px solid #CACACA;
        border-radius: 5px;
        overflow: hidden;
      
    }
    
    
/* Optionnel : S'assurer que l'élément s'ajuste bien sur les écrans plus petits */
@media (max-width: 768px) {
    .slide {
        width: 95vw;  /* Pour les petits écrans, donner un peu plus de largeur */
        max-width: 100%;  /* Permet à l'élément d'occuper toute la largeur de l'écran */
    }
}
    

.footer {
    border: 1px solid #CACACA;
    margin: 0 auto;       /* Centre le div horizontalement */
    border-radius: 5px;
    height: 25px;
    max-width: 1200px;    /* Ne dépasse pas 1200px même sur les grands écrans */
    width: 100%;          /* Prend toute la largeur de la page */
    position: relative;
    
}

.langue {
    float: right;
    height: 55px;
    width: 25px;
    margin-right: 20px;
    white-space: nowrap;
    top: 10px;
    font-size: 10px;
    font-weight: bold;

}


.langue ul {	
	list-style: none;
	float: left;
	text-align: right;
}

#langue ul li {
	float: left;
	text-align: right;
	opacity: 0.7;
}

.langue ul li a {
	text-decoration: none;
}

.checked {
	opacity: 1.0;
}	
	
.date {
	text-align: right;
	height: 20px;
    margin-right: 20px;
    margin-left: -4px;
    white-space: nowrap;
    top: 10px;
   font-size: 10px;
   font-weight: bold;
}	

/* Contenu */
.content {
    display: flex;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #CACACA;
    border-radius: 5px;
    

}

 
.main {
    width: 90%;  /* Taille de la zone de contenu */
    /* background-color: lightgreen; */
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
   /* min-height: 100vh;*/
    flex-grow: 1;
    overflow-y: auto;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
}



/* Menu */
.menu {
    width: 20%; 
    height: 100%;
    /*background-color: lightblue; Permet de voir le menu */
    padding: 20px;
    /*text-align: center;*/
    box-sizing: border-box;
}


.accueil {
	 color: #ffce31;
    font-size: 10px;
    font-weight: bold;
    padding-left: 7px; 
    border: 1px solid #5e7b96;
    cursor: pointer;
    display: block;
    padding: 11px 6px;
    position: relative;
    text-align: center;
    text-decoration: none;
 	 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px ;
} 
 
.lien {
    color: #ffce31;
    font-size: 10px;
    font-weight: bold;
}
 
.navVilla { 
    list-style: none; 
    margin: 0; 
    padding: 5px; 
}
    
.navVilla li { 
    margin-bottom: 4px ; 
    border-radius:5px;
}
 
.navVilla li a {
	 color: #ffffff;
	 display: block;
    font-size: 10px;
    font-weight: bold;
    padding-left: 15px;    
    outline: medium none;
    text-decoration: none;
} 

.navVilla li a:hover, .navVilla li a:focus, .navVilla li a:active { 
    background: #ffffff; 
    text-decoration: none;
    color: #5e7b96; 
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    border-radius:5px; 
}
 
.lien a:visited,a:active,a:hover,a:focus,a:link {
    text-decoration: none;
 	
 }
 



.WhiteMain {
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
}

.YellowMain {
    color: #ffce31;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.img {
 border: 1px solid #cacaca;
 }	



.little {
 	font-size: 9px;
 }



.image {
    color: #ffffff;
    outline: medium none;
   
}

.expose {
		font-weight: bold;
		font-size: 11px;
		color: #ffffff;
		text-decoration: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}


.legende {
		font-weight: bold;
		font-size: 10px;
		color: #ffffff;
		font-family: Verdana;
		text-decoration: none;
}

.center {
	text-align: center;
	margin: 0 auto;
}

.present {
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 50px;*/
}


.tableau {
	text-align: center;
    margin-left: auto;
    margin-right: auto;
 
}


.map {
	text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 500px;
    border-color: white;
 
}



.foot {
	width: 180px;
	text-align: right;
	height: 35px;
   left: 780px;
   position: relative;
}

h1 {
		text-align : center;
		font-size: 14pt;
		color: #000033;	
}

h3 {
    text-align : center;
    color: #ffce31;	
}

.textehead {
    border: 0px solid #FFFFFF;
    height: 72px;
    padding: 20px 60px;
    position: absolute;
    right: 0;
    top: 0;
    /*width: 216px;*/
    color: #000000;
    font-size: 14px; 
    font-weight: bold;
    text-align: center;
}



table#tarif {
 border:1px solid #000000;
 border-collapse:collapse;
 width:90%;
 margin:auto;
 color: #ffffff;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 }
 
table#tarif th, table#tarif td {
 border:1px solid black;
 width:20%;
 text-align:center;
 height: 30px;
 }

.prix {
color: #ffce31;	
}

table#tarif caption {
 font-weight:bold;
}
 
.equipement {
  /*  max-width: 1200px;    /* Ne dépasse pas 1200px même sur les grands écrans */
   /* margin: 0 auto;       /* Centre le div horizontalement */
    /*padding: 20px;        /* Ajoute des marges internes (optionnel) */
       
    background: #F5F5F5;
    border-bottom: 0px solid #ffffff;
   width: 65%;   
    margin-left: auto;
    margin-right: auto;
}


.listeEquipement {
 	 /*background: url("../img/fondEquipements.gif") repeat-y scroll left top #F5F5F5;*/
	 border-bottom: 0px solid #ffffff;
     margin: 0 auto;       /* Centre le div horizontalement */
    /*width: 770px;*/
}
 
.listeEquipement div {
    float: left;
    line-height: 16px;
    margin: 0 10px 0 15px;
    padding: 10px 5px 10px 0;
    width: 80px;
}
 
.listeEquipement ul {
    float: left;
    padding: 6px 0 15px 35px;
    width: 180px;
    list-style-type: circle;
}

.listeEquipement ul li {
    clear: both;
    line-height: 22px;
    padding: 0 10px 0 1px;
    font-family: Verdana,Arial,Sans-serif;
    font-size: 11px;
    list-style-type: circle;
}


.listeEquipement span {
    font-weight: bold;
    line-height: 16px;
    margin: 0 5px 0 0;
}

.clearBothHR {
	background-color: #365a7c;
	color: #365a7c;
    border: medium none;
    clear: both;
    font-size: 0;
    height: 0;
    margin: 0;
    padding: 0;
    visibility: hidden;
}


.listeServices {
 	 background: #F5F5F5;
	 border-bottom: 0px solid #ffffff;
    width: 80%;   
     margin-left: auto;
     margin-right: auto;
    
    
}
 
.listeServices div {
    float: left;
    line-height: 16px;
    margin: 0 10px 0 15px;
    padding: 10px 5px 10px 0;
    width: 80px;
}
 
.listeServices ul {
    float: left;
    padding: 11px 0 30px 35px;
    width: 215px;
    list-style-type: circle;
}

.listeServices ul li {
    clear: both;
    line-height: 22px;
    padding: 0 10px 0 1px;
    font-family: Verdana,Arial,Sans-serif;
    font-size: 11px;
    list-style-type: circle;
}



.MainPopup {
    color: #000033;
    /*font-family: Verdana;*/
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 20px;*/
    text-align: center;
    /*width: 800px;*/
}

.WhitePopup {
    color: #ffffff;
    /*font-family: Verdana;*/
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 20px;*/
    text-align: center;
    width: 340px;
}

.villa {

	
   /*min-height: 400px;*/
   position: relative;
 /*  width: 700px;*/

	
}
.photovilla {
	
    border: 0px solid #CACACA;
}


.villa img {
	 
    border: 1px solid #CACACA;
   
}

.menuvilla {
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
    font-size: 12px; 
    font-weight: bold;
}



/* Conteneur global qui sépare la galerie et la grande image */
.gallery-container {
    display: flex;
    justify-content: center;  /* Centrer les éléments horizontalement */
    align-items: flex-start;  /* Aligner les éléments en haut */
    padding: 20px;
    gap: 20px;  /* Espace entre la grille et l'image grande */
    flex-wrap: wrap;
}

/* Grille de miniatures */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 10px;
    max-width: 190px; /* Largeur max de la grille */
    flex: 1;
    height: auto;
}

/* Style des miniatures */
.thumbnail {
    width: 100%;  /* La miniature occupe toute la largeur de la cellule */
    aspect-ratio: 1; /* Force les miniatures à etre carrées */
    object-fit: cover; /* Maintient l'aspect de l'image sans distorsion */
    cursor: pointer;
    border-radius: 8px;
    border:1px solid white;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.3);  /* Zoom au survol des miniatures */
    border-color: #ffcc00;  /* Changer la couleur du bord au survol, par exemple un jaune */

}








/* Conteneur de l'image grande */
.large-image-container {
    width: 80%;
    /*height: 60vh;  /* Le conteneur prend 60% de la hauteur de la fenêtre */
    max-height: 520px;  /* Limite la hauteur maximale du conteneur à 600px */
    overflow: hidden;  /* Cacher la partie qui dépasse du conteneur */
    display: flex;
    justify-content: center;  /* Centrer l'image horizontalement */
    align-items: center;  /* Centrer l'image verticalement */
     border: 1px solid white;  /* Bordure autour du conteneur */
     border-radius: 8px;
}


/* Image grande */
.accueil-large-image {
    max-width: 60%;  /* L'image ne dépasse pas la largeur du conteneur */
    max-height: auto;  /* L'image garde son rapport d'aspect */
    object-fit: contain;  /* L'image s'ajuste à l'intérieur du conteneur sans être coupée */
    object-position: center;  /* Centrer l'image dans le conteneur */
}

/* Image grande */
.large-image {
    max-width: 100%;  /* L'image ne dépasse pas la largeur du conteneur */
    max-height: 100%;  /* L'image garde son rapport d'aspect */
    object-fit: contain;  /* L'image s'ajuste à l'intérieur du conteneur sans être coupée */
    object-position: center;  /* Centrer l'image dans le conteneur */
}


/* Image grande */
.image-head {
    max-width: 100%;  /* L'image ne dépasse pas la largeur du conteneur */
    max-height: 100%;  /* L'image garde son rapport d'aspect */
    object-fit: contain;  /* L'image s'ajuste à l'intérieur du conteneur sans être coupée */
    object-position: center;  /* Centrer l'image dans le conteneur */
}


/* Image grande */
.service-image {
    max-width: 20%;  /* L'image ne dépasse pas la largeur du conteneur */
    max-height: auto;  /* L'image garde son rapport d'aspect */
    object-fit: contain;  /* L'image s'ajuste à l'intérieur du conteneur sans être coupée */
    object-position: center;  /* Centrer l'image dans le conteneur */
}




/* Responsive pour les écrans mobiles */
@media (max-width: 768px) {
    .gallery-container {
        flex-direction: column;  /* Empile les éléments en une colonne sur mobile */
        align-items: center;  /* Centre les éléments horizontalement */
    }

    .thumbnail-grid {
        grid-template-columns: 1fr;  /* 1 colonne pour les miniatures sur mobile */
        max-width: 100%;  /* La grille prend toute la largeur disponible */
    }

       /* Cacher l'image grande sur mobile */
    .large-image-container {
        display: none;  /* Masquer l'image grande */
    }

    .content {
        flex-direction: column;
    }
    .menu, .main{
        width: 100%;
    }


}



/* Le popup */
.popup {
    display: none;  /* Initialement caché */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    height: 80%;
    max-height: 500px;
    background-image: url('../img/AutourDeWx/baieStJean-01.jpg');  /* Ajoute ton image ici */
    background-size: cover;  /* L'image couvre tout le popup */
    background-position: center;  /* Centrer l'image */
    background-repeat: no-repeat;  /* Empêche l'image de se répéter */
    border: 1px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Pour qu'il soit au-dessus de la page */
}




/* Le contenu du popup */
.popup-content {
    position: absolute; /* Positionner le contenu par-dessus l'image */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(180, 255, 255, 0.2);  /* Fond semi-transparent pour le texte */
    color: #000;  /* Couleur du texte */
}




/* Bouton de fermeture */
.close-btn {
    /*position: absolute;*/
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    
}




/* L'overlay (l'arrière-plan semi-transparent) */
.popup::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}