/**
 * Carte chiffre clé.
 *
 * Figma : cadre 204 × 242 px, bordure 2 px, rayon 13 px. Pictogramme ~102 px,
 * filet de 131 px (64 % de la carte), valeur 36 px, libellé 16 px.
 * La couleur du cadre, du filet et du texte est celle de la variante : elle
 * passe par currentColor, une seule déclaration suffit donc par variante.
 *
 * Emplacement : assets/css/components/card-chiffre.css
 */

.card-chiffre {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-5) var(--space-4);
	text-align: center;
	border: 2px solid currentColor;
	border-radius: var(--radius-lg);
}

/* ── Pictogramme ───────────────────────────────────────────── */

.card-chiffre__icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: var(--space-10);   /* Figma : ~102 px */
}

.card-chiffre__img {
	display: block;
	width: auto;
	height: 100%;
	aspect-ratio: var(--rapport, 1 / 1);
	background-color: currentColor;
	-webkit-mask: var(--picto) center / contain no-repeat;
	mask: var(--picto) center / contain no-repeat;
}

/* ── Filet et texte ────────────────────────────────────────── */

.card-chiffre__texte {
	position: relative;
	width: 100%;
	padding-block-start: var(--space-3);
}

/* Le filet est plus étroit que le texte : Figma trace 131 px de trait dans une
   carte de 204 px, alors que le bloc de texte en fait 161. Le poser en
   pseudo-élément évite de brider la largeur du texte — sinon « 49 000 » et
   « micro-entrepreneurs » passent à la ligne. */
.card-chiffre__texte::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	width: 64%;
	border-block-start: 2px solid currentColor;
	transform: translateX(-50%);
}

.card-chiffre__valeur {
	font-family: var(--font-display);
	font-size: var(--fs-h2);   /* Figma : 36 px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	/* Chiffres de largeur fixe : pendant le décompte, « 8 » et « 1 » se
	   succèdent au même rang et le nombre tremblerait à chaque trame. */
	font-variant-numeric: tabular-nums;
}

.card-chiffre__libelle {
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
}

/* ── Variantes ─────────────────────────────────────────────── */

.card-chiffre--vision {
	color: var(--e4y-green);
}

.card-chiffre--impact {
	color: var(--e4y-orange);
}