/* Navigation des flèches */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(70, 70, 70, 0.5);
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*    background-color: rgba(0, 0, 0, 0.4);*/
    color: #FFFFFF; /* white;*/
    padding: 10px 15px;
/*     padding: 10px 10px;*/
/*margin-left: 3px;*/
/*margin-right: 3px;*/
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50%;
    cursor: pointer;
}

/*.prev { left: 10px; }
.next { right: 10px; }*/
.prev { left: 6px; } /* avant le 11/03/25 5px */
.next { right: 6px; } /* avant le 11/03/25 5px */

.prev:hover, .next:hover {
/*    background-color: rgba(0, 0, 0, 0.8);*/
    background-color: rgba(139, 139, 139, 0.7); /* rgba(116, 116, 116, 0.7) rgba(93, 93, 93, 0.7)  rgba(0, 0, 0, 0.7);*/
    color: #0000FF;
}

@media screen and (max-width: 768px) {
	.prev, .next {
/*		padding: 4px 9px;*/
		padding: 8px 13px;
		font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
	.prev {
/*		left: 1px;*/
		left: 4px; /*2px;*/
    }
}

@media screen and (max-width: 768px) {
	.next {
/*		right: 1px;*/
		right: 4px; /*2px;*/
    }
}

/* **** **** **** **** **** **** **** **** */
/*     Bulle cliquez dans la miniature     */
/* **** **** **** **** **** **** **** **** */
.bullecliquemin {
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;					 					
	background: #E9E9E9;								
	border: 2px solid #00CCFF;													
}																										

.bullecliqueminesq {
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;					 					
	background: #E9E9E9;								
	border: 2px solid #00CCFF;													
}																										

.bullecliqueminesq:hover {
	background: #D7D7D7;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
}

.bullecliquemindir {
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;					 					
	background: #E9E9E9;								
	border: 2px solid #00CCFF;													
}																										

.bullecliquemindir:hover {
	background: #D7D7D7;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
}

/* Informations sous l'image */
.info {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}
/* **** **** **** **** **** **** **** **** **** **** **** */
/*  D?but code pour les 4 colonnes des photos miniatures  */
/* **** **** **** **** **** **** **** **** **** **** **** */

.colonnemin p {
	display: flex;
	flex-wrap: wrap;
/*  	float: left;*/
  	float: none;
/*  	width: 23.35%;*/
/*  	width: 23%; /* 4 colonnes */
  	width: 22%; /* 4 colonnes */
	margin-top: 0px;
	margin-bottom: 6px;
	margin-left: 0.86%;
	margin-right: 0.7%;
	background-color: #F5F5F5;
	padding: 2px; /* 4px; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	border: 1px solid #999999 !important;
	overflow: hidden;
	justify-content: space-between;
}

.colonnemin img {
	height: auto;
/*  	float: left;*/
	float: none; /* Supprime les flottants */
	position: relative;
	display: inline-block;
/*  	width: 23.35%;*/
	width: 23%; /* 4 colonnes */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0.86%;
	margin-right: 0.7%;
	background-color: #F5F5F5;
	padding: 4px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	border: 1px solid #999999 !important;
	overflow: hidden;
}

.colonnemin img:hover {
	border: 1px solid #4B4B4B !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
}

/* 4 colonnes pour les petits écrans */
@media only screen and (max-width: 700px) {
	.colonnemin img {
	width: 22%;
  }
}

/* Code pour l'effet de zoom de l'image avec transition - avec balise img pas de point (par ex.: img:hover et pas .img:hover)! */
.zimage {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
	-webkit-transition: all 0.7s ease; /* Safari et Chrome */
	-moz-transition: all 0.7s ease; /* Firefox */
	-ms-transition: all 0.7s ease; /* Internet Explorer 9 */
	-o-transition: all 0.7s ease; /* Opera */
	transition: all 0.7s ease;
	opacity: 1;
}

.zimage:hover {
/* L'image est grossie de 5% */
	z-index: 50;
	-webkit-transform: scale(1.10); /* Safari et Chrome */
	-moz-transform: scale(1.10); /* Firefox */
	-ms-transform: scale(1.10); /* Internet Explorer 9 */
	-o-transform: scale(1.10); /* Opera */
	transform: scale(1.10);
	opacity: 0.60;
}
/* Fin du code pour l'effet de zoom */

.slidefnormal {
    object-fit: contain; /* Pour garder les proportions */
	cursor: pointer;
 	max-width: 80%;  /* Ajuste la taille maximale de l'image */
    max-height: 400px; /* Ajuste la hauteur maximale */
    width: auto;  /* Garde le ratio de l'image */
    height: auto;
    display: block;/**/
    margin: 0 auto; /* Centrer l'image */
}

/* Pour les images en paysage */
.slidefnormal:not(.portrait) {
    max-width: 80%;
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Pour les images en portrait */
.slidefnormal.portrait {
    max-width: 66%;  /* 50%; Réduit la largeur des images portrait */
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.slidefmodal {
    max-width: 93%; /* 90%*/
    max-height: 80vh;
}

/* Responsive: taille fenêtre modale sur mobile */
@media only screen and (max-width: 700px) {
    .slidefmodal {
/*    max-width: 100%;  /* 50%; Réduit la largeur des images portrait */
    max-width: 90%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    margin: 0px auto;
    }
}

/* Pour les images en paysage */
.slidefmodal:not(.portrait) {
    max-width: 100%;
    max-height: 520px; /* 400px */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Pour les images en portrait */
.slidefmodal.portrait {
    max-width: 100%;  /* 50%; Réduit la largeur des images portrait */
    max-height: 420px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive: taille fenêtre modale sur mobile */
@media only screen and (max-width: 700px) {
    .slidefmodal:not(.portrait) {
/*    max-width: 100%;  /* 50%; Réduit la largeur des images portrait */
    max-width: 90%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    margin: 0px auto;
    }
}

/* Responsive: taille fenêtre modale sur mobile */
@media only screen and (max-width: 700px) {
    .slidefmodal.portrait {
/*    max-width: 100%;  /* 50%; Réduit la largeur des images portrait */
    max-width: 90%;
/*    max-height: 420px;*/
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0px auto;
    }
}

/* Fenêtre modale */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
/*    background-color: rgba(0, 0, 0, 0.8);*/
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Image dans la modale */
.modal img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 10px;
    object-fit: contain;
}

/* Bouton de fermeture */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.close:hover {
    color: red;
}

/* Position des flèches en modale */
.modal .prev, .modal .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
/*    background-color: rgba(255, 255, 255, 0.8);*/
    background-color: rgba(247,247,247, 0.8);
    color: black;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
/*    border-radius: 50%;*/
    border-radius: 60%;
}

.modal .prev:hover, .modal .next:hover {
	color: #FF0000;
    background-color: rgba(255, 255, 255, 0.6);
}

.modal .prev { left: 5%; }
.modal .next { right: 5%; }

/* Informations dans la modale */
.modal-info {
    margin-top: 10px;
    font-size: 18px;
    color: white;
}

.fermer {
	position: absolute;
	top: 25px;
	right: 35px;
	-webkit-transition: 0.3s; /* Safari et Chrome */
	-moz-transition: 0.3s; /* Firefox */
	-ms-transition: 0.3s; /* Internet Explorer 9 */
	-o-transition: 0.3s; /* Opera */
	transition: 0.3s;
}

.fermer img {
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    max-height: none !important;
}

.fermer:hover, .fermer:focus {
	color: #BBBBBB;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.8;
	-webkit-transform: rotate(360deg); /* rotation de l'image */
	-moz-transform: rotate(360deg); /* rotation de l'image */
	-ms-transform: rotate(360deg); /* rotation de l'image */
	-o-transform: rotate(360deg); /* rotation de l'image */
  	transform: rotate(360deg);
}

.fermertxt {
	position: absolute;
	top: 5px;
/*	right: 1.75rem;*/
	right: 1.85rem;
	color: #F1F1F1;
	font-size: 14px;
	-webkit-transition: 0.3s; /* Safari et Chrome */
	-moz-transition: 0.3s; /* Firefox */
	-ms-transition: 0.3s; /* Internet Explorer 9 */
	-o-transition: 0.3s; /* Opera */
	transition: 0.3s;
}

.fermertxtpt {
	position: absolute;
	top: 5px;
/*	right: 1.75rem;*/
	right: 2rem;
	color: #F1F1F1;
	font-size: 14px;
	-webkit-transition: 0.3s; /* Safari et Chrome */
	-moz-transition: 0.3s; /* Firefox */
	-ms-transition: 0.3s; /* Internet Explorer 9 */
	-o-transition: 0.3s; /* Opera */
	transition: 0.3s;
}

/* Style de la galerie */
.galeriemini {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

/* Miniatures en grille */
.miniature {
    width: calc(25% - 10px); /* 4 colonnes */
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
}

.miniature img {
    width: 100%;
    display: block;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Effet zoom */
.miniature:hover {
    transform: scale(1.1);
    opacity: 0.7;
}

/* Responsive : une seule colonne sur mobile */
@media (max-width: 768px) {
    .miniature {
        width: 100%;
    }
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.1);
    opacity: 0.7;
}


/* La fenêtre Modal et l'arrière-plan) */
.modalfmv {
	display: none; /* Cachée par défaut */
	position: fixed; /* Reste en place */
	z-index: 10; /* Devant la fenêtre principale */
	padding-top: 100px; /* Position de la box image */
	left: 0;
	top: 0;
	width: 100%; /* Occupe la totalité de la largeur de l'écran */
	height: 100%; /* Occupe la totalité de la hauteur de l'écran */
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
/*	overflow: auto; Si besoin met la barre de scroll */
	background-color: rgb(0,0,0); /* Couleur de l'arrière-plan */
	background-color: rgba(0,0,0,0.9); /* Transparence de la couleur de l'arrière-plan (ici = noir) */
	/*opacity: 1;*/
}

.modalfmv::-webkit-scrollbar {  /* WebKit */
  width: 0px;	
}

.modalfmv:target {
	visibility: visible;
	opacity: 1;
}

/* Modal Contenu (image) */
.modalfmv-content {
	z-index: 10; /* Devant la fenêtre principale */
	margin: auto;
	display: block;
	width: 30%; /* 30%; */
	max-width: 480px; /* pour limiter la taille dans la fenêtre modal // avant = 700px 480px\\ */
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 575px) {
	.modalfmv-content {
	width: 100%; /* 80%; */
	max-width: 380px; /* 300px */
  }
}

/* 100% largeur image pour les petits écrans 	.modalfmv,;(max-width: 700px)*/
@media only screen and (min-width: 575px) and (max-width: 992px) {
	.modalfmv-content  {
	width: 100%;
  }
}


/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 480px) and (max-width: 992px) {
	.modalfmv, .modalfmv-content  {
	width: 100%;
  }
}

/* Caption pour Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #FFFFFF; /* #ccc; */
/*	padding: 8px 16px; */ /* 10px 0; */
	padding: 2px 16px 2px; /* 10px 0; */
/*	height: 150px;*/
}

/* Ajouter Animation */
.modal-content, #caption {  
	-webkit-animation-name: zoom;
	animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

.caption-text {
    text-align: center;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 3px; /*10px;*/
	background-color: #000000;
	padding: 2px 16px 2px; /* 10px 0; */
}

.popup {
    max-width: 90%;
    max-height: 80vh;
}

/* Fenêtre normale */
.portrait {
    max-width: 90%; /* Rendre les images plus grandes */
    max-height: 80vh;
}

/* Fenêtre modale */
.modalfmv .portrait {
 /*    max-width: 82%;70%; /* Garder les images réduites en mode plein écran */
    max-width: 85%; /*70%; /* Garder les images réduites en mode plein écran */
    max-height: 80vh;
}

.slide-container {
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center; /* Centre l’image */
}

.boutonversgauchemodal {
	position: absolute;
	width: auto;
	z-index: 23;
	left: 0;
	font-weight: bold;
	font-size: 2rem;
	color: #DADADA;
	padding: 0.8rem 1rem 0.8rem 1rem;
	margin-top: -50%;
	opacity: 0.9; /* c'était à 0.5 */
/* 	-webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-ms-border-radius: 3px 0px 0px 3px;*/
	border-radius: 3px 0px 0px 3px !important;
/*	-webkit-user-select: none;*/
	user-select: none;
	cursor: pointer;
	outline: none;
}

.boutonversdroitemodal {
	position: absolute;
	width: auto;
	z-index: 1000;
	right: 0;
	font-weight: bold;
	font-size: 2rem;
	color: #D0D0D0;
	padding: 0.8rem 1rem 0.8rem 1rem;
	margin-top: -50%;
	opacity: 0.9; /* c'était à 0.6 */
/* 	-webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-ms-border-radius: 0px 3px 3px 0px;*/
	border-radius: 0px 3px 3px 0px !important;
/*	-webkit-user-select: none;*/
	user-select: none;
	cursor: pointer;
	outline: none;
}

.boutonversgauchemodal:hover, .boutonversgauchemodal:focus {
	opacity: 0.8;
	background-color: rgba(0,0,0,0.5) !important;
	outline: none;
}

.boutonversdroitemodal:hover, .boutonversdroitemodal:focus {
	opacity: 1;
	background-color: rgba(0,0,0,0.6) !important;
	outline: none;
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 700px) {
	.boutonversgauchemodal, .boutonversdroitemodal {
	bottom: 56%;
	margin-left: -15px;
	margin-right: -15px;
	background-color: transparent !important;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 700px) {
	.boutonversgauchemodal:hover, .boutonversdroitemodal:hover {
	padding: 0.8rem 1rem 0.8rem 1rem;
	background-color: rgba(254,254,254,0.1)
  }
}


/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversgauchemodal, .boutonversdroitemodal {
	bottom: 50%;
	margin-left: 15px;
	margin-right: 15px;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversgauchemodal:hover {
	bottom: 50%;
	padding: 0.8rem 1rem 0.8rem 1rem;	
	margin-left: 15px;
	margin-right: 15px;
	background-color: rgba(0,0,0,0.1) !important;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversdroitemodal:hover {
	bottom: 50%;
	padding: 0.8rem 1rem 0.8rem 1rem;	
	margin-left: 15px;
	margin-right: 15px;
	background-color: rgba(0,0,0,0.5) !important;
	opacity: 1;
  }
}

.caption-conteneur {
	width: auto;
	text-align: center;
	background-color: #000000;
	padding: 2px 16px;
	color: #FFFFFF;
}

.box-hidden {
	display: none;
	position: absolute;
	top: 19em;
	left: 15em;
	width: 20em;
	height: 5em;
	border: 2px solid black;
	padding:0 1em 1em 1em;
	background-color: #eee;
	z-index:1002;
	overflow: auto;
}