/**
 * Biotifull Accordion Marque — styles front.
 *
 * Mécanique : chaque panneau est un flex item `flex: 1 1 0` (base nulle,
 * répartition purement proportionnelle). Le panneau actif passe à
 * `flex-grow: var(--bam-grow)`, les autres se compressent automatiquement.
 * On n'anime QUE flex-grow et opacity : jamais width/left/margin.
 */

.bam-accordion {
	display: flex;
	gap: var(--bam-gap, 10px);
	height: var(--bam-height, 600px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bam-accordion__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0; /* Autorise la compression sous la taille intrinsèque de l'image. */
	overflow: hidden;
	border-radius: var(--bam-radius, 14px);
	transition: flex-grow var(--bam-duration, 550ms) cubic-bezier(0.25, 1, 0.5, 1);
	will-change: flex-grow;
}

.bam-accordion__item.is-active {
	flex-grow: var(--bam-grow, 3);
}

/* Lien englobant : toute la surface du panneau est cliquable et focusable. */
.bam-accordion__link {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--bam-title-color, #fff);
	text-decoration: none;
	outline-offset: -4px;
}

.bam-accordion__link:focus-visible {
	outline: 3px solid #fff;
}

/* Image plein cadre : cover garantit zéro déformation pendant l'expansion,
   la position absolue la découple du flux (aucun reflow interne). */
.bam-accordion__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position injecté inline depuis PHP (meta « Position de l'image »). */
}

/* Calque background CSS : utilisé quand fichier joint, répétition ou taille
   sont personnalisés (propriétés inexistantes sur <img>). Les valeurs sont
   injectées inline depuis PHP (metas de la marque). */
.bam-accordion__bg {
	position: absolute;
	inset: 0;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Overlay : couvre tout, s'efface sur le panneau actif. */
.bam-accordion__overlay {
	position: absolute;
	inset: 0;
	background: var(--bam-overlay-color, #0e0b09);
	opacity: var(--bam-overlay-opacity, 0.45);
	transition: opacity var(--bam-duration, 550ms) cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}

.bam-accordion__item.is-active .bam-accordion__overlay {
	opacity: var(--bam-overlay-opacity-hover, 0);
}

/* Contenu : révélation fade + léger translateY sur le panneau actif. */
.bam-accordion__content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--bam-duration, 550ms) cubic-bezier(0.25, 1, 0.5, 1),
		transform var(--bam-duration, 550ms) cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}

.bam-accordion__item.is-active .bam-accordion__content {
	opacity: 1;
	transform: translateY(0);
}

.bam-accordion__logo img {
	max-width: var(--bam-logo-width, 110px);
	height: auto;
	display: block;
}

.bam-accordion__title {
	color: var(--bam-title-color, #fff);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	/* Le titre ne doit pas provoquer de retour à la ligne brutal pendant l'expansion. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bam-accordion__subtitle {
	color: var(--bam-subtitle-color, #fff);
	font-size: 0.95rem;
	opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* < 1024px : empilement vertical de cartes, sans animation d'expansion */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.bam-accordion {
		flex-direction: column;
		height: auto;
	}

	.bam-accordion__item {
		flex: none;
		aspect-ratio: 16 / 9;
		transition: none;
		will-change: auto;
	}

	/* Overlay atténué en permanence : le texte reste lisible. */
	.bam-accordion__overlay {
		opacity: calc(var(--bam-overlay-opacity, 0.45) * 0.6);
		transition: none;
	}

	/* Titre + sous-titre toujours visibles. */
	.bam-accordion__content {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.bam-accordion__title {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Accessibilité : préférence utilisateur pour la réduction de mouvement */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.bam-accordion__item,
	.bam-accordion__overlay,
	.bam-accordion__content {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* État initial sans JS (ou avant son exécution) : premier panneau     */
/* ouvert. Dès qu'un panneau porte .is-active, cette règle s'efface.   */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
	.bam-accordion:not(:has(.is-active)) .bam-accordion__item:first-child {
		flex-grow: var(--bam-grow, 3);
	}

	.bam-accordion:not(:has(.is-active)) .bam-accordion__item:first-child .bam-accordion__overlay {
		opacity: var(--bam-overlay-opacity-hover, 0);
	}

	.bam-accordion:not(:has(.is-active)) .bam-accordion__item:first-child .bam-accordion__content {
		opacity: 1;
		transform: translateY(0);
	}
}