/*
 * Stats Scroll – styles (par 6LEX – https://6lex.co)
 *
 * L'état d'un bloc est piloté par la variable --p (0 = inactif, 1 = actif),
 * mise à jour en continu par le JS.
 *  - Les couleurs de texte s'interpolent avec color-mix().
 *  - Les fonds "actifs" (couleur OU dégradé, gérés par Elementor) vivent sur
 *    une couche ::before dont l'opacité = var(--p) -> fondu fluide même avec
 *    un dégradé.
 */

.ess-stats {
	/* Valeurs par défaut, surchargées par les réglages Elementor */
	--num-inactive: var(--ax-filet);
	--num-active: #ffffff;
	--icon-inactive: var(--ax-filet);
	--icon-active: var(--ax-encre);
	--label-color: #ffffff;
	--desc-inactive: var(--ax-filet);
	--desc-active: var(--ax-encre);

	--arrow-w: 90px;
	--col-w: 320px;
	--ess-scale: 0.08;

	/* Par défaut, le contenu suit la largeur du conteneur (réglable via Elementor). */
	max-width: 100%;
	margin: 0 auto;
}

.ess-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ess-row {
	--p: 0;
	display: grid;
	grid-template-columns: 1fr var(--col-w);
	column-gap: 60px;
	align-items: center;
	transform: scale(calc(1 + (var(--p) * var(--ess-scale))));
	transform-origin: left center;
	will-change: transform;
}

.ess-stats.ess-no-desc .ess-row {
	grid-template-columns: 1fr;
}

/* ---- Colonne gauche : icône + chiffre ---- */
.ess-main {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.ess-arrow {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	width: var(--arrow-w);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ax-bloc);
	line-height: 1.2;
	color: color-mix(in srgb, var(--icon-inactive), var(--icon-active) calc(var(--p) * 100%));
}

/* Couche de fond "actif" (couleur ou dégradé Elementor) qui apparaît en fondu */
.ess-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--p);
	z-index: 0;
}

.ess-arrow-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	color: inherit;
}
.ess-arrow-icon svg { fill: currentColor; }
.ess-arrow-icon i { color: inherit; }

.ess-value {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	margin-left: 22px;
	padding: 6px 22px;
	overflow: hidden;
}

/* Couche de fond "actif" du bloc chiffre */
.ess-value::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--p);
	z-index: 0;
}

.ess-number,
.ess-label {
	position: relative;
	z-index: 1;
}

.ess-number {
	font-size: var(--ax-chiffre);
	font-weight: 600;
	line-height: .95;
	letter-spacing: -.03em;
	color: color-mix(in srgb, var(--num-inactive), var(--num-active) calc(var(--p) * 100%));
}

.ess-number .ess-unit {
	font-size: 0.62em; line-height: .95;
	font-weight: 600;
}

.ess-label {
	font-size: var(--ax-second);
	color: color-mix(in srgb, transparent, var(--label-color) calc(var(--p) * 100%)); line-height: 1.55; font-weight: 500;}

.ess-desc {
	margin: 0;
	font-size: var(--ax-corps);
	line-height: 1.6;
	color: color-mix(in srgb, var(--desc-inactive), var(--desc-active) calc(var(--p) * 100%)); font-weight: 500;}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.ess-row {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}
}

/* Repli si color-mix non supporté (très vieux navigateurs) */
@supports not (color: color-mix(in srgb, #000, #fff 50%)) {
	.ess-number { color: var(--num-inactive); }
	.ess-desc { color: var(--desc-inactive); }
	.ess-arrow { color: var(--icon-inactive); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
	.ess-row { transform: none; }
}