/* ==========================================================================
   Agence — Hero
   Media plein cadre + overlay sombre + titre Bitblast blanc sur DEUX lignes.
   Calque du hero home (home.css), MAIS deux lignes distinctes (empilees) au lieu
   de deux moities cote a cote. Specs Figma : frame 727:7716.

   ANIMATION DE SCROLL (assets/js/agence-hero-scroll.js, GSAP) — SANS pin :
   .agence-hero fait 200vh (reserve en CSS quand l'anim est autorisee), contient un
   bloc .agence-hero__sticky (sticky, 100vh). Le 1er 100vh de scroll pilote (scrub) la
   reduction du media (scale UNIFORME) pendant que les 2 lignes du titre partent en sens
   opposes (ligne 1 a gauche, ligne 2 a droite) et sortent du cadre ; le 2e 100vh laisse
   le bloc partir naturellement. PAS de pin ScrollTrigger (il injecte un wrapper -> CLS,
   lecon du 06/08 sur le hero home).
   - L'overlay est DANS .agence-hero__media : il retrecit avec le media (fait partie du cadre).
   - Le titre vit dans .agence-hero__content (hors du media) : il ne retrecit pas, il s'ecarte.
   - Fond blanc autour du media : les lignes blanches deviennent invisibles d'elles-memes
     en franchissant le bord (blanc sur blanc), aucun fondu a coder.
   - reduced-motion : .agence-hero reste 100vh, aucun mouvement (bail-out JS + defaut CSS).
   ========================================================================== */

.agence-hero {
	position: relative;
	width: 100%;
	/* Defaut / reduced-motion : section 100vh normale. */
	height: 100vh;
	/* Fond derriere le media + bandes autour du media reduit : DOIT etre blanc pour que
	   les lignes du titre (blanches) deviennent invisibles en sortant du cadre. Le cas
	   « image non renseignee » est couvert par le fond noir de .agence-hero__media. */
	background-color: var(--color-white);
}

/* Anim autorisee : on RESERVE 200vh en CSS (1er 100vh = reduction pilotee par
   agence-hero-scroll.js via scrub, 2e 100vh = le bloc sticky part naturellement). Reserve
   en CSS -> CLS 0. En reduced-motion on garde 100vh (pas de 200vh de scroll mort). Pas
   d'overflow:hidden sur .agence-hero : il casserait le position: sticky ci-dessous. */
@media (prefers-reduced-motion: no-preference) {
	.agence-hero {
		height: 200vh;
	}
}

.agence-hero__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	/* Clippe les deux lignes du titre qui sortent lateralement. Overflow sur l'element
	   sticky lui-meme : n'affecte pas sa stickyness (contrairement a un ancetre). */
	overflow: hidden;
}

/* Conteneur media plein cadre : c'est LUI que l'anim retrecit (scale). Contient l'image
   + l'overlay. Fond noir : fallback si l'image n'est pas encore renseignee (le titre
   blanc reste lisible), et il retrecit avec le media sans laisser de trou. */
.agence-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--color-black);
	/* Reduction par scale() UNIFORME depuis le centre (jamais scaleX/scaleY separes ->
	   jamais de deformation). transform par defaut = aucune transformation avant le 1er
	   scroll (protection du LCP). Le border-radius (8/scale) est pose par le JS pour etre
	   net a l'arrivee. */
	transform-origin: center center;
}

.agence-hero__media-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.agence-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
}

.agence-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 0 48px;
}

/* Titre : deux lignes empilees, centrees. flex column + align-items center -> chaque
   ligne fait la largeur de son contenu (pas etiree) : le xPercent de l'anim est alors
   relatif a la largeur du texte (sortie serree), comme les moities du hero home. */
.agence-hero__title {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	font-size: clamp(2rem, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: 2.88px;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

/* Chaque ligne est un bloc distinct (empile), pret a recevoir un transform propre a
   l'animation (ligne 1 vers la gauche, ligne 2 vers la droite). Etat par defaut (sans
   JS / reduced-motion) : deux lignes centrees, empilees, immobiles. */
.agence-hero__title-line {
	display: block;
}

@media (max-width: 767px) {
	.agence-hero__content {
		padding: 0 24px;
	}

	.agence-hero__title {
		letter-spacing: 1px;
	}
}