/**
 * Pages pays — section « Regards croisés ».
 *
 * Repères Figma (page Sénégal) : titre de 48 px à y 7570, nom du champion en
 * or à y 7641, vidéo de 1236 × 659 à y 7729, cartes à y 8431. La lentille
 * teintée s'est refermée juste au-dessus : la section se pose sur le blanc.
 *
 * Emplacement : assets/css/components/pays-regards.css
 */

/* En haut, l'écart se compte depuis la pointe basse de la lentille : Figma en
   laisse 87. En bas, 82 px seulement jusqu'au cercle du bloc de contact, qui
   ne pose donc rien de son côté sur les pages pays. */
.pays-regards {
	padding-block: var(--space-9) var(--space-9);
}

/* Même traitement que le nom du champion du coup de cœur : or, 36 px, centré.
   Voir le commentaire de pays-coup.css pour la raison. */
.pays-regards__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);
}

/* Le composant vidéo est calé sur les proportions de la maquette d'accueil ;
   celle-ci est plus large et ses angles plus francs.
   Les deux classes sur le même sélecteur ne sont pas décoratives : les feuilles
   de components/ sont chargées dans l'ordre alphabétique, video.css passe donc
   après pays-regards.css et l'emporterait à spécificité égale. */
.video.pays-regards__video {
	aspect-ratio: 1236 / 659;             /* Figma */
	margin-block-start: var(--space-7);   /* Figma : 43 px */
	border-radius: var(--radius-xxl);     /* Figma : 32 px */
}

.pays-regards__carousel {
	margin-block-start: var(--space-7);   /* Figma : 43 px sous la vidéo */
	text-align: start;
}

/* La rangée de navigation passe sous les cartes, numérotée : voir la variante
   pagineur du composant carousel. Rien à ajouter ici. */


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

   Photo, corps coloré, texte et bouton : c'est la structure de la carte
   partenaire, qui vaut 280 px au milieu de l'écran sur toutes les pages. La
   mosaïque des animations, elle, garde sa pleine largeur — ce sont des photos,
   qui perdent plus qu'elles ne gagnent à être resserrées, comme la galerie de
   la page Actualités.
   ============================================================ */

@media (max-width: 767px) {

	.pays-regards .card-regard {
		max-width: 280px;
		margin-inline: auto;
	}

}


/* Écarts de section, mêmes raisons que partout ailleurs : 80 px de chaque
   côté relevés en desktop, qui donnaient 160 px avant et après. */

@media (max-width: 767px) {

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

}