/**
 * Pages pays — section « Coup d'cœur ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 5321, nom du champion en
 * or de 36 px à y 5415, flèches à y 5500, photos de 396 × 359 à y 5567, bouton
 * à y 5978. La section se pose sur la lentille teintée, qu'elle partage avec
 * les animations.
 *
 * Emplacement : assets/css/components/pays-coup.css
 */

/* En haut, l'écart se compte depuis la pointe de la lentille, et non depuis le
   bord de l'écran : Figma pose 29 px entre l'un et l'autre. */
.pays-coup {
	padding-block: var(--space-6) var(--space-7);   /* Figma : 29 px, puis 52 */
}

/* Le nom du champion, seul sous-titre du site à être en or et à cette taille :
   il ne passe donc pas par section-entete, dont le sous-titre est un texte de
   20 px en vert. */
.pays-coup__champion {
	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);
}

/* Figma pose 107 px entre le nom du champion et les photos ; la rangée de
   flèches en occupe 54 à elle seule, marge comprise. */
.pays-coup__carousel {
	margin-block-start: var(--space-7);
	text-align: start;
}

.pays-coup__vignette {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xxl);
}

/* aspect-ratio sur l'image et non sur la figure : les photos confiées à
   l'équipe n'ont pas toutes le même format, et c'est le cadrage en cover qui
   les ramène aux proportions de la maquette. */
.pays-coup__img {
	width: 100%;
	aspect-ratio: 396 / 359;
	object-fit: cover;
}

.pays-coup__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-7);   /* Figma : 52 px */
}


/* ============================================================
   Mobile — de l'air sous la pointe de la lentille

   Les 29 px de la maquette se comptent depuis un arc bien plus creux : à
   402 px de large, la lentille ne monte plus que de 28, et le titre se
   retrouvait à cheval sur sa lisière.
   ============================================================ */

@media (max-width: 767px) {

	.pays-coup {
		padding-block: var(--space-8) var(--space-6);
	}

	.pays-coup__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;
	}

}