/**
 * Pages pays — section « Nos champions ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 4567, flèches à y 4660,
 * cartes de 398 × 476 à y 4700, bouton « Voir plus » à y 5218. La section se
 * pose sur le blanc du corps : la zone crème s'est refermée juste au-dessus.
 *
 * Emplacement : assets/css/components/pays-champions.css
 */

/* La zone crème pose déjà son écart de section sous les produits ; 64 px de
   plus donnent les 159 px de la maquette entre les cartes et ce titre. */
.pays-champions {
	/* En bas, 48 px seulement : la lentille teintée du coup de cœur commence
	   juste après, et Figma ne laisse que 54 px entre le bouton et son titre. */
	padding-block: var(--space-8) var(--space-7);
}

.pays-champions__carousel {
	margin-block-start: var(--space-5);   /* Figma : 39 px avant les flèches */
	text-align: start;
}

.pays-champions__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-7);   /* Figma : 42 px sous les cartes */
}


/* ============================================================
   Mobile — même rythme que le consortium de l'accueil
   ============================================================ */

@media (max-width: 767px) {

	.pays-champions {
		padding-block-start: var(--space-7);
	}

	.pays-champions__carousel {
		margin-block-start: var(--space-7);
	}

	/* C'est la carte qui se resserre, et non l'élément de piste : plafonné,
	   celui-ci cesse d'être étiré par la grille et se cale au bord gauche de
	   sa colonne. La colonne garde toute la largeur, puisque c'est elle qui
	   règle le pas du défilement. */
	.pays-champions .card-partenaire {
		max-width: 280px;
		margin-inline: auto;
	}

	.pays-champions__actions {
		margin-block-start: var(--space-6);
	}

	.pays-champions__actions .btn {
		gap: var(--space-5);
		justify-content: space-between;
		width: 100%;
		max-width: 280px;
		line-height: var(--lh-heading);
		text-align: start;
		white-space: normal;
	}

}