/* ==========================================================================
   Agence — Valeurs
   Fond NOIR. 3 mots geants Bitblast (pas de pretitle). Specs Figma : 727:7756.

   DEUX MODES (cf. valeurs.php) :
   - STATIQUE (aucune image, ou reduced-motion, ou JS absent) : 3 mots BLANCS colles,
     centres. Pas de sticky, pas de course. C'est l'ETAT FINAL (rendu par CSS/PHP).
   - SEQUENCE STICKY (classe .agence-valeurs--anim posee en JS hors reduced-motion) : la
     section devient un conteneur de hauteur derivee de la course > bloc sticky 100vh ;
     l'accordeon se joue DANS une scene a HAUTEUR RESERVEE (jamais de height animee).

   ⚠️ PISTE K RETIREE. Un transform scrubbe sur la section casserait le sticky (ancetre
   transforme = bloc conteneur -> epinglage casse, STATUS.md). Le handoff escalier#1 ->
   Valeurs se fait par une MARGE statique (compatible sticky), MEME valeur dans les deux
   modes : -62.5vh (plancher piste J, marches de l'escalier VISIBLES). Arbitrage FX (19/08) :
   sur /agence, Valeurs ne peut PAS avoir a la fois zero vide ET des marches visibles (la
   piste K, qui resout ce dilemme sur la home en faisant suivre le bord de la colonne 4, est
   indisponible ici : ancetre transforme = sticky casse). Choix : marches visibles, ~37.5vh
   de noir (rail de l'escalier) defile avant l'epinglage -> lu comme une amorce, comme le
   lead-in noir du CTA. Un -100vh (zero vide) ramenait le noir opaque de Valeurs par-dessus
   les marches -> cassure nette blanc/noir, sans colonnes (abandonne). Voir STATUS.md.

   HAUTEUR CONSTANTE (critere de reussite, CLS 0) : la scene reserve 3xhauteur-mot +
   hauteur-image (padding-block = img-h/2 en haut et en bas). Les mots se translatent et
   les images s'ouvrent en clip-path DANS cet espace reserve ; il ne grandit jamais.
   ========================================================================== */

.agence-valeurs {
	position: relative;
	z-index: 4; /* > esc#1 (z3) : les Valeurs passent DEVANT l'escalier (handoff) */
	background-color: var(--color-black);
	padding: var(--space-4xl) var(--space-xl);
	/* Handoff escalier#1 (piste J, plancher 37.5vh) : MARGE statique, pas transform.
	   MEME valeur en mode --anim (marches visibles, cf. en-tete). */
	margin-top: calc(-1 * 62.5vh);
}

/* Sticky : neutre par defaut (mode statique, position relative). Devient sticky en mode
   --anim (plus bas). Colonne centree : la scene (mots + images) est centree. */
.agence-valeurs__sticky {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xl);
	max-width: 1344px;
	margin-inline: auto;
	text-align: center;
}

/* Scene : contient les 3 mots (flux) + les 2 images (absolues). Position relative pour
   ancrer les images. En statique, hauteur = celle des mots (3 mots colles). */
.agence-valeurs__stage {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* 3 mots geants, un par ligne. BLANCS (etat final ; le voile gris -> blanc viendra au
   scroll, commit suivant). H2 : semantique inchangee. */
.agence-valeurs__mots {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	font-size: clamp(3rem, 12vw, 130px);
	line-height: 0.95;
	letter-spacing: 1px;
	/* Casse SAISIE respectee (minuscules) : annule l'uppercase global des h1..h6
	   (global.css). 2e occurrence de ce pattern (apres le H1 du hero /projets) -> on
	   DUPLIQUE (regle projet : factoriser seulement a la 3e). Si un 3e titre en casse
	   normale apparait, factoriser (retirer l'uppercase global, le reposer ou voulu). */
	text-transform: none;
	color: var(--color-white);
}

.agence-valeurs__mot {
	display: block;
}

/* Images : masquees en mode statique (les mots suffisent, plus lisible). Ratio 16:9 +
   dimensions -> zero CLS quand elles apparaissent en mode --anim. */
.agence-valeurs__img {
	display: none;
	margin: 0;
}

.agence-valeurs__img-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   MODE SEQUENCE ANIMEE (.agence-valeurs--anim, pose en JS hors reduced-motion)
   Sticky + scene a hauteur reservee. Les transforms/clips sont pilotes par
   valeurs-sequence.js (commit suivant) ; ici on pose le cadre + l'etat de repos.
   -------------------------------------------------------------------------- */

.agence-valeurs--sequence {
	/* Largeur d'image (fixe -> hauteur derivable en CSS). Ratio paysage 16:9. */
	--valeurs-img-w: min(560px, 56vw);
	--valeurs-img-h: calc(var(--valeurs-img-w) * 9 / 16);
	/* Course : duree de scroll de la sequence. 150vh = ~50vh par phase (1: ouverture,
	   2: bascule, 3: fermeture). Sobre (la page est deja longue). Ajustable ici. */
	--valeurs-course: 150vh;
}

.agence-valeurs--anim {
	/* Conteneur = 100vh (sticky) + course. Reserve en CSS -> pas de CLS. */
	height: calc(100vh + var(--valeurs-course));
	padding: 0 var(--space-xl);
	/* Pas d'override de margin-top : on GARDE le -62.5vh de base (piste J, marches
	   visibles). L'ancien -100vh (zero vide) masquait l'escalier -> abandonne, cf. en-tete. */
}

.agence-valeurs--anim .agence-valeurs__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	/* RESSERREMENT du handoff escalier#1 -> Valeurs : le contenu est remonte vers le haut
	   du viewport (flex-start + petit padding) au lieu d'etre centre -> les mots apparaissent
	   plus pres de la fin de l'escalier. Ne touche NI la marge -100vh (deja au plus serre du
	   handoff : tirer plus recouvrirait les marches) NI l'epinglage sticky. Residuel inevitable :
	   l'espace RESERVE a l'accordeon (I/2 au-dessus du mot 1, pour qu'il puisse monter) reste
	   vide au repos -> fermer completement le vide exigerait la piste K (suivi de colonne),
	   incompatible avec le sticky. padding-top ajustable. */
	justify-content: flex-start;
	padding-top: 4vh;
	gap: var(--space-2xl);
}

/* Scene reservee : 3 mots (flux) + une hauteur d'image (padding haut/bas = img-h/2).
   Les mots bougent et les images s'ouvrent DANS cet espace ; il ne grandit jamais. */
.agence-valeurs--anim .agence-valeurs__stage {
	padding-block: calc(var(--valeurs-img-h) / 2);
}

/* Degrade gris -> blanc : TROIS transitions couleur, mot par mot, ENTRELACEES avec
   l'accordeon (chaque blanchiment est le signal de la phase de mouvement suivante :
   mot 1 -> ouverture img1 -> mot 2 -> bascule -> mot 3 -> fermeture). Pilotees par
   valeurs-sequence.js via --mot-white (0 = gris, 1 = blanc). PAS de mix-blend-mode ni de
   mask (technique abandonnee : elle peignait un rectangle opaque au-dessus du texte
   transforme). Le texte est un VRAI texte (selectionnable, lisible), seule sa couleur bouge.
   Statique / reduced-motion : pas de mode --anim -> les mots heritent du blanc (etat final,
   cf. .agence-valeurs__mots). */
.agence-valeurs--anim .agence-valeurs__mot {
	will-change: transform; /* translate scrubbe (valeurs-sequence.js) */
	color: color-mix(in srgb, var(--color-white) calc(var(--mot-white, 0) * 100%), var(--color-gray-700));
}

/* Images visibles en mode anim : absolues (hors flux -> n'agrandissent pas la scene),
   centrees horizontalement, largeur/hauteur reservees. Etat de REPOS = fermees (clip a
   hauteur nulle, au centre vertical) ; valeurs-sequence.js pilote top + clip-path. */
.agence-valeurs--anim .agence-valeurs__img {
	display: block;
	position: absolute;
	/* Ancre au CENTRE de la scene : top:50% pose le haut au centre, translate(-50%,-50%)
	   recentre l'image sur ce point. Le JS ajoute l'offset yCenter (mesure DEPUIS le centre
	   de scene) -> le referentiel CSS correspond a celui du calcul (etait top:0 = haut, d'ou
	   les images rejetees en haut / rognees). */
	left: 50%;
	top: 50%;
	width: var(--valeurs-img-w);
	height: var(--valeurs-img-h);
	transform: translate(-50%, -50%);
	clip-path: inset(50% 0 round var(--radius-md)); /* fermee (repos) */
	will-change: clip-path, transform;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.agence-valeurs {
		padding: var(--space-2xl) var(--space-md);
	}

	.agence-valeurs__sticky {
		gap: var(--space-xl);
	}

	.agence-valeurs--sequence {
		--valeurs-img-w: 84vw;
	}
}