/**
 * Carte chiffre ronde — anneau, disque plein, pictogramme, filet et chiffre.
 *
 * Cotes Figma, relevées sur les groupes 79:92 à 79:94 de la page Sénégal et
 * comptées depuis le haut du carré de 399 px :
 *   anneau 399, trait 15,9, disque 319 (soit un retrait de 40,1)
 *   pictogramme de 115 à 126 de haut, calé vers y 70
 *   filet de 236 à y 207, valeur de 64 px à y 215, libellé de 20 px à y 285
 *
 * La carte est un conteneur de requête : tout ce qu'elle porte se mesure en
 * cqw, donc en centièmes de son diamètre. Le disque garde ses proportions à
 * toutes les tailles sans une seule media query. Les trois blocs de texte sont
 * calés par le haut et non centrés : dans la maquette, filet, valeur et
 * libellé sont à la même hauteur sur les trois disques, que le libellé tienne
 * sur une ligne ou sur deux.
 *
 * Emplacement : assets/css/components/card-chiffre-rond.css
 */

.card-chiffre-rond {
	container-type: inline-size;
	display: grid;
	grid-template: 1fr / 1fr;   /* anneau et disque dans la même cellule */
	aspect-ratio: 1 / 1;

	/* Blanc entre le trait et le disque : 24,1 px pour un anneau de 399. La
	   même valeur est passée en argument « gap » au composant anneau. */
	--ring-gap: 6.05;
}

.card-chiffre-rond > * {
	grid-area: 1 / 1;
}

/* ── Disque ────────────────────────────────────────────────── */

.card-chiffre-rond__disque {
	/* Le disque affleure le bord intérieur de l'anneau : trait + blanc.
	   Une marge en pourcentage se mesure toujours sur la largeur, verticale
	   comprise : le retrait est donc le même sur les quatre côtés. */
	margin: calc((var(--ring-stroke) + var(--ring-gap)) * 1%);
	padding-block-start: 7.48cqw;   /* pictogramme à 70 px du haut du carré */
	padding-inline: 2.5cqw;
	border-radius: var(--radius-full);
	text-align: center;
	color: var(--e4y-white);
}

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

/* Hauteur commune aux trois pictogrammes. Figma les dessine entre 115 et
   126 px, calés entre y 63 et y 70 : les uniformiser vaut mieux que reproduire
   cet écart, qui déséquilibre la rangée. 29 cqw sur 399 font 115 px — la cote
   du premier pictogramme, et la moyenne des trois au pixel près. */
.card-chiffre-rond__picto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 29cqw;
}

.card-chiffre-rond__img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Filet, valeur et libellé ──────────────────────────────── */

.card-chiffre-rond__valeur {
	/* 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;
	position: relative;
	margin-block-start: 7.5cqw;    /* le filet passe dans cet écart */
	/* Le nombre est en HomepageBaukasten dans la maquette, et le node l'est
	   entièrement : ce n'est pas la rustine habituelle d'Eigerdals, dont la
	   démo porte bien les chiffres. C'est donc la police de corps, en gras. */
	font-family: var(--font-body);
	font-size: 16.04cqw;           /* Figma : 64 px sur 399 */
	font-weight: var(--fw-bold);
	/* 1,1 place le libellé à y 285, comme dans la maquette. */
	line-height: 1.1;
}

/* Filet posé en pseudo-élément et non en bordure du bloc de texte : il est
   plus étroit que la valeur, et « 22 034 » doit pouvoir le déborder. */
.card-chiffre-rond__valeur::before {
	content: '';
	position: absolute;
	inset-block-start: -2cqw;      /* Figma : filet à y 207, valeur à y 215 */
	inset-inline-start: 50%;
	width: 59.15cqw;               /* Figma : 236 px sur 399 */
	border-block-start: 2px solid currentColor;
	transform: translateX(-50%);
}

.card-chiffre-rond__libelle {
	font-size: 5.01cqw;            /* Figma : 20 px sur 399 */
	line-height: var(--lh-heading);
}

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

.card-chiffre-rond--vert .card-chiffre-rond__disque {
	background-color: var(--e4y-green);
}

.card-chiffre-rond--ambre .card-chiffre-rond__disque {
	background-color: var(--e4y-amber);
}

.card-chiffre-rond--orange .card-chiffre-rond__disque {
	background-color: var(--e4y-orange);
}


/* Valeur longue — « 2,72 Mds », le montant décaissé

   Les valeurs de la maquette tiennent en cinq signes au plus : « 22 034 »
   effleure déjà le bord du disque. Un montant abrégé en fait huit et
   débordait franchement. La taille se resserre à proportion, et le mot passe
   d'un bloc sans césure pour que « Mds » ne tombe pas seul à la ligne. */

.card-chiffre-rond__valeur--longue {
	font-size: 11cqw;
	white-space: nowrap;
}


/* Anneau sans pictogramme

   Le pictogramme occupe 29 cqw en haut du disque ; sans lui, la valeur et le
   libellé remontaient à sa place et le quatrième anneau ne s'alignait plus
   sur ses voisins. Son espace est réservé, le disque garde sa composition.
   Le montant décaissé est le seul cas aujourd'hui : la charte n'a pas de
   pictogramme pour une somme. */

.card-chiffre-rond__disque:not(:has(.card-chiffre-rond__picto)) {
	padding-block-start: 36.5cqw;   /* 7,48 du haut + 29 de pictogramme */
}