/* Conteneur principal */
.histoire-accordeon-container {
	display: flex;
	width: 100%;
	height: clamp(371px,var(--pas)*371,580px); /* Ajustez la hauteur globale selon vos besoins */
	overflow: hidden;
	background-color: #f9f9f9;
}

/* Style de base d'une slide (état fermé) */
.slide-histoire {
	position: relative;
	flex: 1; /* Prend 1 portion de l'espace */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
	overflow: hidden;
	border-right: 1px solid #ffffff; /* Séparateur léger entre les slides */
	color:var(--blanc);
}

.slide-histoire:last-child {
	border-right: none;
}

/* Dégradé de fond pour assurer la lisibilité du texte sur les photos */
.slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28,28,28,0.95) 0%, rgba(28,28,28,0.6) 40%, rgba(28,28,28,0) 100%);
	opacity: 0.8;
	transition: opacity 0.4s ease;
}

/* Conteneur du contenu textuel */
.slide-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Date visible uniquement quand la slide est fermée */
/* Date visible uniquement quand la slide est fermée */
.slide-date-fermee {
	position: absolute;
	bottom: 24px; /* On s'aligne avec le padding de 24px de .slide-content */
	left: 0;
	width: 100%;
	font-weight: 700;
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-align: center;
}

/* Contenu complet caché par défaut */
.slide-details-ouverte {
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	max-width: 100%;
}

.slide-details-ouverte h3 {
	margin: 0 0 12px 0;
}

.slide-details-ouverte .slide-texte {
}

/* =========================================
ÉTAT ACTIF (SLIDE OUVERTE)
========================================= */
.slide-histoire.active {
	flex: 6; /* Prend 6 portions de l'espace (soit beaucoup plus large) */
	cursor: default;
}

/* Disparition de la date simple */
.slide-histoire.active .slide-date-fermee {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

/* Apparition du contenu complet */
.slide-histoire.active .slide-details-ouverte {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0.3s; /* Un léger délai pour laisser la slide s'ouvrir d'abord */
}

.slide-histoire.active .slide-overlay {
	opacity: 1; /* Le dégradé peut être plus fort sur la slide active pour bien lire le pavé de texte */
}

/* =========================================
VERSION RESPONSIVE (< 1120px)
========================================= */
@media (max-width: 1120px) {

	/* 1. Le conteneur s'adapte au contenu, plus de hauteur fixe */
	.histoire-accordeon-container {
		flex-direction: column;
		height: auto;
	}

	/* 2. Les slides ne partagent plus l'espace (flex), elles enveloppent leur contenu */
	.slide-histoire {
		flex: none; /* Annule l'effet flexbox du bureau */
		height: auto; 
		border-right: none;
		border-bottom: 1px solid #ffffff;
	}

	.slide-histoire:last-child {
		border-bottom: none;
	}

	/* 3. Le contenu repasse en position "relative" pour pouvoir pousser la hauteur de la slide */
	.slide-content {
		position: relative;
		min-height: 90px; /* Donne l'épaisseur de base de la bande quand elle est fermée */
		padding: 24px;
		display: flex;
		flex-direction: column;
		justify-content: center; /* Centre le contenu verticalement */
	}

	/* 4. La date fermée est centrée de manière absolue pour ne pas gêner la hauteur */
	.slide-date-fermee {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		bottom: auto;
	}

	/* 5. On cache le texte en réduisant sa hauteur à 0 avec max-height pour l'animer */
	.slide-details-ouverte {
		max-height: 0;
		overflow: hidden; /* Empêche le texte de dépasser quand la hauteur est à 0 */
		width: 100%;
		padding-top: 0;
		transform: translateY(10px);
		transition: max-height 0.4s ease-out, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
	}

	/* 6. ÉTAT ACTIF : La slide ouverte s'agrandit grâce à max-height */
	.slide-histoire.active .slide-details-ouverte {
		max-height: 1500px; /* Valeur suffisamment grande pour ne jamais bloquer votre contenu */
		min-height:clamp(597px,var(--pas)*597,674px);
		transform: translateY(0);
		transition: max-height 0.6s ease-in, opacity 0.5s ease, transform 0.5s ease, padding 0.5s ease;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* La date simple monte et disparait */
	.slide-histoire.active .slide-date-fermee {
		transform: translate(-50%, -150%);
	}
}
@media (max-width:991px){
	.slide-histoire.active .slide-details-ouverte {
		min-height:clamp(447px,var(--pas)*447,577px);
	}
}
@media (max-width:767px){
	.slide-histoire.active .slide-details-ouverte {
		min-height:clamp(288px,var(--pas)*288,460px);
	}
}
@media (max-width:479px){
	.slide-histoire.active .slide-details-ouverte {
		min-height:clamp(208px,var(--pas)*208,277px);
	}
	.slide-histoire.active .slide-overlay {
		background: rgba(28,28,28,0.8);
		opacity:1;
	}
}