/*
 * Bloc « chiffres cles ». Section pleine largeur, contenu contraint. En-tete a gauche + colonnes a droite.
 * Nombre : Urbanist Black 54 orange (cote Figma). Comptage 0 -> valeur cable sur la couche d'anim (anim.js) ;
 * la valeur finale est dans le DOM (a11y + sans JS). Zero CLS : colonnes en grille, chiffres en tabular-nums.
 */

.mx-chiffres {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
	/* Les colonnes se revelent EN GLISSANT depuis la droite (anim.js) : etat de depart translateX(+64px).
	   Sur mobile (colonne pleine largeur), ce depart depasse le viewport et creerait un scroll horizontal
	   tant que le bloc n'est pas revele. On clippe l'axe X (clip : pas de conteneur de defilement, l'axe Y
	   reste intact) : le mouvement d'entree part du bord droit de la section, sans debordement de page. */
	overflow-x: clip;
}

.mx-chiffres__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--55); /* 80 : ecart en-tete / colonnes (cote Figma) */
}

/* En-tete a gauche (borne en largeur, cote Figma). */
.mx-chiffres__head {
	flex: 0 0 auto;
	max-width: 288px; /* cote Figma */
}

.mx-chiffres__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

/* Colonnes de chiffres a droite. */
.mx-chiffres__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50); /* 40 (cote Figma) */
}

.mx-chiffres__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
	min-width: 0;
}

/* Ligne du nombre (prefixe + nombre + suffixe) : grand, orange (cote Figma). */
.mx-chiffres__valeur {
	margin: 0;
	display: flex;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--display); /* 54 (cote Figma) */
	line-height: 1;
	color: var(--wp--preset--color--orange-dark);
	text-transform: uppercase;
}

/* Chiffres a chasse fixe : pas de tremblement de largeur pendant le comptage (zero CLS). */
.mx-chiffres__nombre {
	font-variant-numeric: tabular-nums;
}

.mx-chiffres__libelle {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	/* En-tete au-dessus, colonnes en 2 x 2. */
	.mx-chiffres__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--50); /* 40 */
	}
	.mx-chiffres__head {
		max-width: none;
	}
	.mx-chiffres__grid {
		width: 100%;
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tout ferre a GAUCHE en mobile (valeur + libelle), en 2 colonnes comme en 1 (demande JN). */
	.mx-chiffres__item {
		align-items: flex-start;
		text-align: left;
	}
	.mx-chiffres__valeur {
		justify-content: flex-start;
	}
}

@media (max-width: 560px) {
	.mx-chiffres__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
	.mx-chiffres__grid {
		grid-template-columns: 1fr;
	}
}