/* Style CSS pour le slideshow */

/* Cacher les diapositives par défaut */
.mySlides {
	display: none;
}

/* Conteneur du slideshow */
.slideshow-container {
	max-width: 845px; /* Limiter la largeur maximale du conteneur */
	position: relative; /* Positionner le conteneur de manière relative pour les boutons */
	margin: auto; /* Centrer le conteneur horizontalement */
}

/* Boutons suivant et précédent */
.prev, .next {
	cursor: pointer; /* Changer le curseur en pointeur pour indiquer que c'est cliquable */
	position: absolute; /* Positionner les boutons de manière absolue */
	top: 50%; /* Positionner verticalement au centre */
	width: auto; /* Largeur automatique */
	padding: 16px; /* Ajouter de l'espace autour du texte du bouton */
	margin-top: -22px; /* Ajuster la position verticale des boutons */
	color: white; /* Couleur du texte des boutons */
	font-weight: bold; /* Mettre le texte en gras */
	font-size: 18px; /* Taille de police du texte */
	transition: 0.6s ease; /* Ajouter une transition douce pour les effets */
	border-radius: 0 5px 5px 0; /* Arrondir les bords du bouton à droite */
	user-select: none; /* Empêcher la sélection du texte sur les boutons */
}

/* Positionner le bouton "suivant" à droite */
.next {
	right: 0; /* Positionner à droite */
	border-radius: 5px 0 0 5px; /* Arrondir les bords du bouton à gauche */
}

/* Au survol des boutons, ajouter un fond noir semi-transparent */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.5); /* Fond noir avec un peu de transparence */
}

/* Texte de la légende */
.text {
	color: #f2f2f2; /* Couleur du texte en blanc cassé */
	font-size: 1em; /* Taille de police standard */
	/* padding: 8px 12px; */ /* Espacement autour du texte (commenté ici) */
	position: absolute; /* Positionner le texte de manière absolue */
	bottom: 4px; /* Placer le texte à 4px du bas du conteneur */
	width: 100%; /* Largeur à 100% du conteneur */
	text-align: center; /* Aligner le texte au centre */
}

/* Texte de numéro (ex: 1/4 pour indiquer la diapositive actuelle) */
.numbertext {
	color: #f2f2f2; /* Couleur du texte en blanc cassé */
	font-size: 0.8em; /* Taille de police plus petite */
	padding: 8px 12px; /* Espacement autour du texte */
	position: absolute; /* Positionner de manière absolue */
	top: 0; /* Positionner en haut du conteneur */
}

/* Les points/indicatifs pour le slideshow */
.dot {
	cursor: pointer; /* Changer le curseur en pointeur pour indiquer que c'est cliquable */
	height: 15px; /* Hauteur des points */
	width: 15px; /* Largeur des points */
	margin: 0 1px; /* Espacement entre les points */
	background-color: #bbb; /* Couleur de fond des points */
	border-radius: 50%; /* Rendre les points ronds */
	display: inline-block; /* Afficher les points sur la même ligne */
	transition: background-color 0.6s ease; /* Transition douce pour la couleur de fond */
}

/* Changer la couleur des points actifs ou au survol */
.active, .dot:hover {
	background-color: #717171; /* Changer la couleur de fond en gris moyen */
}

/* Animation de fondu des diapositives */
.fade {
	animation-name: fade; /* Nom de l'animation */
	animation-duration: 1.5s; /* Durée de l'animation */
}

/* Définir l'animation de fondu */
@keyframes fade {
	from {opacity: .4} /* Commencer avec une opacité de 0.4 */
	to {opacity: 1} /* Finir avec une opacité de 1 (pleinement visible) */
}