/* Code pour les photos en mode modal et flèches de changement de photos */

/* **** **** **** **** **** **** **** **** */
/*     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);
}

/* **** **** **** **** **** **** **** **** **** */
/*    Début des boutons de navigation photos    */
/* **** **** **** **** **** **** **** **** **** */

.boutonversgauche {
	position: absolute;
	width: 30px;
	height: 45px;
	top: 35%;
	left: 6px; /* 8px; */
	font-size: 2.3rem;
	color: black;
	padding-top: 2px;
/*	-webkit-transform: translate(-42%, -42%);
	-moz-transform: translate(-42%, -42%);
	-ms-transform: translate(-42%, -42%);*/
	transform: translate(-42%, -42%);
/* 	-webkit-border-radius: 0px 50% 50% 0px;
	-moz-border-radius: 0px 50% 50% 0px;
	-ms-border-radius: 0px 50% 50% 0px;*/
	border-radius: 0px 50% 50% 0px !important;
	opacity: 0.6;
	cursor: pointer;
	outline: none;
}

.boutonversgauche:hover {
	color: #0000FF;
	opacity: 1;
	outline: none;
}

.boutonversdroite {
	position: absolute;
	width: 30px;
	height: 45px;
	top: 35%;
	right: -19px; /* -17px; */
	font-size: 2.3rem;
	color: black;
	padding-top: 2px;
/*	-webkit-transform: translate(-42%, -42%);
	-moz-transform: translate(-42%, -42%);
	-ms-transform: translate(-42%, -42%);*/
	transform: translate(-42%, -42%);
/* 	-webkit-border-radius: 50% 0px 0px 50%;
	-moz-border-radius: 50% 0px 0px 50%;
	-ms-border-radius: 50% 0px 0px 50%;*/
	border-radius: 50% 0px 0px 50% !important;
	opacity: 0.6;
	cursor: pointer;
	outline: none;
}

.boutonversdroite:hover {
	color: #0000FF;
	opacity: 1;
	outline: none;
}

/* **** **** **** **** **** **** **** **** */
/*   Fin des boutons de navigation photos  */
/* **** **** **** **** **** **** **** **** */

/* ///////////////////////////////////////******\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*     Début code pour l'image modal - nouvelle page ouverte quand click sur l'image    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

input:focus,
input:hover {
background-color: rgba(0, 0, 255, 0.5); 
color: red;/* transparent;  */
}

#monModal:target {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}

/* La fenêtre Modal et l'arrière-plan) */
.modal {
	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) c'était à 0.9 */
}

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

/* Modal Contenu (image) */
.modal-content {
	z-index: 10; /* Devant la fenêtre principale */
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}
/* Caption pour Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: white; /* #ccc; */
	padding: 8px 16px; /* 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;
}

@-webkit-keyframes zoom {
	from {-webkit-transform: scale(0)} 
	to {-webkit-transform: scale(1)}
}

@keyframes zoom {
	from {transform: scale(0)} 
	to {transform: scale(1)}
}

.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:hover, .fermer:focus {
	color: #bbb;
	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;
	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;
}

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

/* Code pour les pages photos de ma vie et autres - image plus petite en modal */

/* 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%;
  }
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      Fin code pour l'image modal - nouvelle page ouverte quand click sur l'image     */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** */
/*    Début des boutons de navigation photos image modal   */
/* **** **** **** **** **** **** **** **** **** */

/* 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;
  }
}

.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;
}

.caption-conteneur {
	text-align: center;
	background-color: black;
	padding: 2px 16px;
	color: white;
}

.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;
}
		
/* **** **** **** **** **** **** **** **** */
/*   Fin des boutons de navigation photos  */
/* **** **** **** **** **** **** **** **** */

 /*.portrait {
    max-width: 70%; Réduction de la taille pour les images portrait */
/*    max-height: 80vh;  Empêcher que ça prenne tout l’écran 
    margin: auto;
}
*/
/* Fenêtre normale */
.portrait {
    max-width: 90%; /* Rendre les images plus grandes */
    max-height: 80vh;
}

/* Fenêtre modale 
.modalfmv .portrait {
    max-width: 60%;*/ /* Garder les images réduites en mode plein écran 
    max-height: 70vh;
}
*/
/* Fenêtre modale */
.modalfmv .portrait {
    max-width: 82%; /*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 */
}