/**
 * Storytelling Scroll Animation — Feuille de style frontend
 * -----------------------------------------------------------------------------
 * Structure ciblée :
 *   .storytelling-container  → bloc scrollé (hauteur = N écrans), pleine largeur.
 *   .storytelling-stage      → scène "collante" (sticky), reste à l'écran.
 *   .storytelling-video/frame→ le média, en plein écran (object-fit: cover).
 *   .storytelling-steps      → calque des textes superposés.
 *   .storytelling-step       → une étape, masquée par défaut, révélée par le JS.
 * -----------------------------------------------------------------------------
 */

/* -----------------------------------------------------------------------------
 * 1. CONTENEUR — pleine largeur de l'écran (full-bleed)
 *
 * On "casse" la colonne de contenu du thème pour occuper 100vw. La hauteur
 * réelle (nombre d'écrans à scroller) est fixée par le JS via un style inline.
 * --------------------------------------------------------------------------- */
.storytelling-container {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	/* Full-bleed : recentre le bloc sur toute la largeur du viewport. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Valeur de repli tant que le JS n'a pas calculé la hauteur définitive. */
	min-height: 100vh;
	background: #000;
	overflow: clip; /* Empêche tout débordement horizontal du média. */
}

/* -----------------------------------------------------------------------------
 * 2. SCÈNE COLLANTE — reste figée pendant le défilement
 * --------------------------------------------------------------------------- */
.storytelling-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	/* Sur mobile : évite les sauts liés à la barre d'adresse dynamique. */
	height: 100svh;
}

/* -----------------------------------------------------------------------------
 * 3. LE MÉDIA — vidéo ou frame, plein écran QUELLE QUE SOIT LA TAILLE
 *
 * Les !important sont volontaires : beaucoup de thèmes WordPress imposent
 * `video, img { max-width:100%; height:auto; }`, ce qui empêche le média de
 * remplir l'écran. On neutralise ces règles pour garantir l'adaptation à
 * toutes les tailles d'écran.
 *
 * object-fit: cover remplit toute la largeur ET la hauteur (recadrage propre).
 * La variante .is-contain (réglage "Tout afficher") montre le média entier.
 * --------------------------------------------------------------------------- */
.storytelling-container .storytelling-video,
.storytelling-container .storytelling-frame {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #000;
	/* Optimisation : on prévient le navigateur des changements fréquents. */
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Réglage "Tout afficher" : le média entier est visible, sans recadrage.
   Les marges autour sont TRANSPARENTES (pas de bandes noires). */
.storytelling-container.is-contain {
	background: transparent;
}
.storytelling-container.is-contain .storytelling-video,
.storytelling-container.is-contain .storytelling-frame {
	object-fit: contain;
	background: transparent;
}

/* -----------------------------------------------------------------------------
 * Réglage "Coller à la vidéo" (is-adapt) : AUCUN recadrage en largeur.
 * La scène épouse exactement le format du média (aspect-ratio fourni par le
 * JS via --mssa-ar) : pleine largeur, hauteur = celle de la vidéo, fond
 * transparent, et le contenu avant/après reste collé — aucun espace vide.
 * --------------------------------------------------------------------------- */
.storytelling-container.is-adapt {
	background: transparent;
	min-height: 0;
}

.storytelling-container.is-adapt .storytelling-stage {
	height: auto;
	aspect-ratio: var(--mssa-ar, 16 / 9);
	/* Garde-fou : ne dépasse jamais un écran de haut (le média est alors
	   entièrement contenu, marges transparentes sur les côtés). */
	max-height: 100vh;
	max-height: 100svh;
}

.storytelling-container.is-adapt .storytelling-video,
.storytelling-container.is-adapt .storytelling-frame {
	object-fit: contain;
	background: transparent;
}

/* -----------------------------------------------------------------------------
 * 4. CALQUE DES ÉTAPES + voile de lisibilité
 * --------------------------------------------------------------------------- */
.storytelling-steps {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none; /* Le calque ne bloque pas les interactions de scroll. */
}

/* Voile dégradé pour que le texte reste lisible sur n'importe quelle image. */
.storytelling-steps::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.35) 40%,
		rgba(0, 0, 0, 0) 70%
	);
	z-index: 1;
}

/* -----------------------------------------------------------------------------
 * 5. UNE ÉTAPE — masquée par défaut, révélée via la classe .is-active (JS)
 * --------------------------------------------------------------------------- */
.storytelling-step {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 640px;
	padding: 0 6vw;
	color: #fff;
	/* État masqué. */
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

/* État révélé (posé par le JS sur l'étape active). */
.storytelling-step.is-active {
	opacity: 1;
	transform: translateY(0);
}

.storytelling-step__title {
	margin: 0 0 0.5em;
	font-size: clamp(1.8rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.storytelling-step__text {
	margin: 0;
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.storytelling-step__text p {
	margin: 0 0 0.75em;
}

.storytelling-step__text p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * 6. RESPONSIVE — sur mobile, texte centré et voile plus dense
 * --------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.storytelling-step {
		max-width: 100%;
		align-items: center;
		text-align: center;
		padding: 0 8vw;
	}

	.storytelling-steps::before {
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.35) 0%,
			rgba(0, 0, 0, 0.55) 100%
		);
	}
}

/* -----------------------------------------------------------------------------
 * 7. ACCESSIBILITÉ — mouvement réduit : on affiche tout sans transition
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.storytelling-step {
		transition: opacity 0.2s linear;
		transform: none;
	}
}

/* Message d'aide affiché aux éditeurs si la story est mal configurée. */
.mssa-empty-notice {
	padding: 1rem 1.25rem;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 0.95rem;
}