/**
 * Pages pays — section « Quelques produits de nos champions ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 3021, cartes de 398 × 572
 * à y 3221 puis y 3836, gouttière de 24 px en largeur et 43 px en hauteur. Les
 * disques de la section précédente s'arrêtent à 2879, soit 142 px au-dessus du
 * titre. La maquette montre cinq produits : trois sur la première rangée, deux
 * centrés sur la seconde.
 *
 * Emplacement : assets/css/components/pays-produits.css
 */

/* La section des chiffres pose déjà 80 px sous ses disques : 64 de plus donnent
   les 142 px de la maquette. */
.pays-produits {
	padding-block: var(--space-8) var(--section-gap);
}

/* Flex et non grid : c'est ce qui centre la dernière rangée incomplète. Une
   grille laisserait les deux cartes calées à gauche, alors que la maquette les
   pose au milieu. La base des colonnes reste calculée sur trois, la rangée
   pleine occupe donc toute la largeur et s'aligne sur le logo du header. */
.pays-produits__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7) var(--space-5);   /* Figma : 43 px et 24 px */
	margin: 0;
	margin-block-start: var(--space-7);   /* Figma : 58 px sous le titre */
	padding: 0;
	list-style: none;
}

/* Mobile : une carte par rangée. display: flex pour que la carte s'étire à la
   hauteur de la rangée — sans quoi son height: 100% n'a rien à quoi se mesurer
   et les cartes d'une même rangée ne s'égalisent plus. */
.pays-produits__item {
	display: flex;
	flex: 0 1 100%;
}


/* ============================================================
   Tablette 768px — deux colonnes
   ============================================================ */

@media (min-width: 768px) {

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

}


/* ============================================================
   Desktop 1200px — trois colonnes, comme la maquette
   ============================================================ */

@media (min-width: 1200px) {

	/* Quatre par rangée : les cartes ne portent le plus souvent que le nom de
	   leur champion, les documents ne nommant pas les produits. Trois par
	   rangée leur donnait une largeur que leur contenu ne remplit pas. La
	   dernière rangée, incomplète, se centre d'elle-même. */
	.pays-produits__item {
		flex-basis: calc((100% - 3 * var(--space-5)) / 4);
	}

}


/* ============================================================
   Mobile — la carte reprend la largeur des autres

   Une carte par rangée, mais sur 280 px au milieu de l'écran et non d'une
   gouttière à l'autre : c'est la largeur qu'ont partout ailleurs en mobile les
   cartes de partenaire, de champion et de consortium. Sur 346, celle-ci était
   la seule à s'étaler.
   ============================================================ */

@media (max-width: 767px) {

	.pays-produits__item {
		max-width: 280px;
		margin-inline: auto;
	}

}


/* Écarts de section : les 64 px de la maquette desktop, ajoutés aux 55 px de
   boîte vide que laissent les anneaux au-dessus, ouvraient 147 px avant ce
   titre. En bas, la carte laisse déjà 32 px de jeu sous son bouton. */

@media (max-width: 767px) {

	.pays-produits {
		padding-block: var(--space-7) var(--space-6);
	}

}