/**
 * Pages pays — bloc « En quelques chiffres ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 2302, disques de 399 px à
 * y 2480, calés à x 96, 522 et 945 — soit des gouttières de 24 et 27 px.
 *
 * Emplacement : assets/css/components/pays-chiffres.css
 */

/* Le bloc précédent porte déjà 80 px sous la vidéo : 32 de plus donnent les
   116 px de la maquette entre le bas de la vidéo et le titre. */
.pays-chiffres {
	padding-block: var(--space-6) var(--space-9);
}

.pays-chiffres__grille {
	display: grid;
	gap: var(--space-5);                   /* Figma : 24 px entre les disques */
	justify-items: center;
	margin-block-start: var(--space-7);    /* Figma : 51 px sous le titre */
}

/* Un disque par ligne tant qu'il n'y a pas la place d'en tenir trois : à
   1200 px, une rangée de trois les réduirait déjà à 328 px, et le libellé
   à 16 px. En colonne, chacun garde son diamètre de maquette. */
.pays-chiffres__grille > * {
	width: 100%;
	max-width: 399px;                      /* diamètre Figma */
}

@media (min-width: 1200px) {

	.pays-chiffres__grille {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Une quatrième valeur — le montant décaissé — passerait seule à la ligne
	   sous une grille de trois. La règle ne se déclenche que si l'élément
	   existe : les pays qui n'en ont que trois gardent leur rangée. */
	.pays-chiffres__grille:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ============================================================
   Mobile — l'écart bas se resserre

   Même raison qu'ailleurs : 80 px relevés sur la maquette desktop, qui
   ouvraient ici 179 px jusqu'au titre des produits.
   ============================================================ */

@media (max-width: 767px) {

	/* Aucun écart déclaré en bas : les anneaux laissent déjà 55 px de boîte
	   vide sous leur dernier arc visible, mesurés au rendu. Les 48 px du socle
	   s'y ajoutaient et portaient l'écart jusqu'au titre des produits à
	   147 px, contre 72–92 partout ailleurs sur le site. */
	.pays-chiffres {
		padding-block-end: 0;
	}

}