/**
 * Pages pays — section « Les animations et formations ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 6079, nom du dispositif en
 * or de 36 px à y 6173, texte de 20 px à y 6245, mosaïque de 6332 à 7319. Les
 * gouttières valent 24 px en largeur et 16 en hauteur.
 *
 * Emplacement : assets/css/components/pays-animations.css
 */

/* En bas, l'écart se compte jusqu'à la pointe de la lentille, que cette marge
   pousse d'autant : Figma en laisse 160 sous la mosaïque. Aucun palier de
   l'échelle ne tombe juste, d'où la somme de deux. */
.pays-animations {
	padding-block: var(--space-7) calc(var(--space-11) + var(--space-6));
}

/* Même traitement que le nom du champion du coup de cœur, juste au-dessus :
   or, 36 px, centré. Les deux sections l'écrivent séparément — un sous-titre
   de section-entete est un texte de 20 px en vert, et rien ne dit que les
   autres pages en auront besoin. */
.pays-animations__soustitre {
	margin-block-start: var(--space-6);   /* Figma : 54 px entre les deux lignes */
	font-size: var(--fs-h2);              /* Figma : 36 px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-align: center;
	color: var(--e4y-gold);
}

.pays-animations__texte {
	max-width: var(--container-soustitre);
	margin: var(--space-5) auto 0;        /* Figma : 27 px */
	font-size: var(--fs-lead);            /* Figma : 20 px */
	line-height: var(--lh-body);
	text-align: center;
	color: var(--color-text);
}

/* ── Mosaïque ──────────────────────────────────────────────── */

/* Une grille qui passe à la ligne, et non des colonnes. Les tuiles partagent
   désormais la même proportion : il n'y a plus de décalage à ménager, et le
   passage à la ligne permet à une dernière rangée incomplète de se centrer,
   ce que des colonnes ne savent pas faire. Même parti que la section
   « Quelques produits de nos champions ». */
.pays-animations__mosaique {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
	margin-block-start: var(--space-5);   /* Figma : 27 px sous le texte */
}

.pays-animations__item {
	display: flex;
	flex: 0 1 100%;
}


/* ============================================================
   Tablette 768px — deux par rangée
   ============================================================ */

@media (min-width: 768px) {

	.pays-animations__item {
		flex-basis: calc((100% - var(--space-5)) / 2);
	}

}


/* ============================================================
   Desktop 1200px — quatre par rangée
   ============================================================ */

@media (min-width: 1200px) {

	.pays-animations__item {
		flex-basis: calc((100% - 3 * var(--space-5)) / 4);
	}

}


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

   Les 160 px de la maquette laissaient la place à l'arc bas de la lentille,
   qui creuse 231 px en desktop. Il n'en creuse plus que 28 en mobile : 240 px
   séparaient la dernière photo du titre « Regards croisés ».
   ============================================================ */

@media (max-width: 767px) {

	.pays-animations {
		padding-block-end: var(--space-8);
	}

	/* Une tuile par rangée : elle reprend la largeur des cartes du reste du
	   site, 280 px au milieu de l'écran, comme les produits, les champions et
	   les regards croisés. Sur 346, elle était la seule à s'étaler d'une
	   gouttière à l'autre. */
	.pays-animations__item {
		max-width: 280px;
		margin-inline: auto;
	}

}