/* ==========================================================================
   Agence — Chiffres
   Fond NOIR. 4 stats + 6 polaroids en eparpillement. Specs Figma : frame 727:7760
   (base 1440×832). Polaroids relevees dans la maquette (Rectangle 6-11), stats dans
   la grille 289766.

   z-index 5 (echelle /agence, cf. global.css) : l'escalier#2 qui suit (noir ->
   beige) chevauche cette section et doit passer AU-DESSUS (z6).

   PROPORTIONS ANCREES A LA BASE FIGMA : la scene a aspect-ratio 1440/832 et sert de
   query container (container-type). Positions/tailles derivees des coordonnees Figma :
     - positions : % de la scene (left = x/1440, top = y/832) ;
     - tailles polaroids : % de largeur de scene (= x/1440) + aspect-ratio propre ;
     - tailles de texte : cqw (1% de la largeur de scene) -> tout scale ENSEMBLE avec
       la largeur, donc les libelles tiennent TOUJOURS sur une ligne (fini le wrap du
       max-width fixe). Seules les IMAGES restent editables.

   CLS : la scene reserve sa hauteur (aspect-ratio) et chaque polaroid porte son
   aspect-ratio -> l'arrivee des images ne decale rien. Les 6 images sont en lazy.
   ========================================================================== */

.agence-chiffres {
	position: relative;
	z-index: 5;
	background-color: var(--color-black);
	padding: var(--space-2xl) var(--space-xl);
	overflow: hidden; /* les polaroids inclines peuvent depasser : pas de scroll parasite */
}

/* Scene : reproduit le cadre Figma 1440×832. Query container -> les cqw des textes
   se calculent sur SA largeur. Hauteur reservee par aspect-ratio (zero CLS). */
.agence-chiffres__scene {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 832;
	container-type: inline-size;
}

/* --- Polaroids (6) : boite en cover, taille/position/aspect releves de la maquette --- */
.agence-chiffres__polaroid {
	position: absolute;
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-gray-800);
}

.agence-chiffres__polaroid-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agence-chiffres__polaroid-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	/* Reperage visuel de l'emplacement tant que l'image n'est pas uploadee. */
	background-color: var(--color-gray-800);
	border: 1px dashed var(--color-gray-600);
}

/* left/top/width en % de la scene (x/1440, y/832, w/1440) + aspect-ratio Figma propre.
   Rotation legere, cosmetique (autour du centre, ne deplace pas la boite).
   FLOTTAISON : --float-y (px, pose par agence-chiffres-float.js) est compose EN AMONT du
   rotate (translate en dernier applique = derive verticale pure a l'ecran, insensible a la
   rotation). Defaut 0px -> sans JS / reduced-motion, position maquette exacte (CLS 0). */
.agence-chiffres__polaroid--1 { left: 21.07%; top: 12.92%; width: 11.18%; aspect-ratio: 160.97 / 188.03; transform: translate3d(0, var(--float-y, 0px), 0) rotate(-3deg); }
.agence-chiffres__polaroid--2 { left: 35.93%; top: 48.07%; width: 12.31%; aspect-ratio: 177.31 / 220.48; transform: translate3d(0, var(--float-y, 0px), 0) rotate(3deg); }
.agence-chiffres__polaroid--3 { left: 51.45%; top: 28.86%; width: 13.00%; aspect-ratio: 187.22 / 215.62; transform: translate3d(0, var(--float-y, 0px), 0) rotate(4deg); }
.agence-chiffres__polaroid--4 { left: 68.95%; top: 61.66%; width: 12.58%; aspect-ratio: 181.21 / 235.55; transform: translate3d(0, var(--float-y, 0px), 0) rotate(-2deg); }
.agence-chiffres__polaroid--5 { left: 85.01%; top: 14.32%; width: 10.41%; aspect-ratio: 149.93 / 192.66; transform: translate3d(0, var(--float-y, 0px), 0) rotate(5deg); }
.agence-chiffres__polaroid--6 { left: 4.83%;  top: 66.89%; width: 11.10%; aspect-ratio: 159.91 / 210.63; transform: translate3d(0, var(--float-y, 0px), 0) rotate(-4deg); }

/* --- Stats (4) : valeur Bitblast + libelle. Au-dessus des polaroids. --- */
.agence-chiffres__stat {
	position: absolute;
	z-index: 1; /* texte au-dessus des polaroids en cas de recouvrement */
	/* FLOTTAISON : --float-y (px, pose par agence-chiffres-float.js). Defaut 0px -> sans JS
	   / reduced-motion, position maquette exacte (CLS 0). Amplitude plus faible que les
	   polaroids (cf. JS). */
	transform: translate3d(0, var(--float-y, 0px), 0);
	display: flex;
	flex-direction: column;
	/* Chaque paire valeur/libelle forme un bloc dont les deux elements sont CENTRES
	   l'un par rapport a l'autre (libelle centre sous son chiffre). */
	align-items: center;
	text-align: center;
	gap: 1.5cqw;
	width: 14.2%; /* = largeur de cellule Figma (204/1440) */
}

.agence-chiffres__stat-valeur {
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	/* ~86px a 1440 (releve Figma) ; scale avec la largeur de scene, borne. */
	font-size: clamp(2rem, 6cqw, 86px);
	line-height: 1;
	letter-spacing: 1px;
	white-space: nowrap;
	color: var(--color-white);
}

.agence-chiffres__stat-libelle {
	font-family: var(--font-body);
	/* ~13px a 1440 (releve Figma) ; en cqw -> tient sur UNE ligne a toute largeur. */
	font-size: clamp(9px, 0.95cqw, 13px);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-white);
}

/* Positions relevees de la maquette (x/1440, y/832), LEGEREMENT elargies pour que les
   4 blocs respirent (spread vertical 15->73%, horizontal 15->70%). */
.agence-chiffres__stat--1 { top: 15%; left: 35%; } /* 100% */
.agence-chiffres__stat--2 { top: 54%; left: 15%; } /* 60+ */
.agence-chiffres__stat--3 { top: 31%; left: 70%; } /* 5 ans */
.agence-chiffres__stat--4 { top: 73%; left: 50%; } /* 3 */

/* --------------------------------------------------------------------------
   Mobile : l'eparpillement absolu ne tient pas -> retour au flux (empile).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.agence-chiffres__scene {
		aspect-ratio: auto;
		container-type: normal;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-xl);
	}

	.agence-chiffres__polaroid,
	.agence-chiffres__stat {
		position: static;
		transform: none;
		width: auto;
	}

	.agence-chiffres__polaroid {
		width: 60vw;
		max-width: 280px;
		aspect-ratio: 4 / 5;
	}

	.agence-chiffres__stat {
		align-items: center;
		text-align: center;
	}

	.agence-chiffres__stat-valeur {
		font-size: clamp(3rem, 12vw, 88px);
	}

	.agence-chiffres__stat-libelle {
		font-size: 13px;
		white-space: normal;
	}
}