/**
 * Pages pays — présentation en langue nationale.
 *
 * Repères Figma : emblème 151 × 128 à y 1476, titre de 48 px sur deux lignes
 * à y 1616, vidéo de 744 × 412 à y 1773. Tout est centré sur l'axe de la page.
 *
 * Emplacement : assets/css/components/pays-video.css
 */

/* Pas de marge négative ici : elle ferait remonter le drapeau sous l'anneau du
   bloc précédent, qui déborde de la zone verte. L'espace sous la courbe est
   celui que réserve le rectangle portant l'ellipse ; il se lit comme une
   respiration dès lors qu'il est crème et non blanc. */
.pays-video {
	padding-block: var(--space-6) var(--space-9);
	text-align: center;
}

.pays-video__drapeau {
	display: flex;
	justify-content: center;
}

/* Calage sur la hauteur et non sur la largeur : les quatre cartes ont des
   silhouettes très différentes — 151 × 128 pour le Sénégal, 65 × 129 pour le
   Bénin, 52 × 136 pour le Togo — mais Figma les pose toutes autour de 130 px
   de haut. Une largeur fixe étirait le Bénin sur 300 px de hauteur. */
.pays-video__drapeau-img {
	width: auto;
	height: 130px;             /* Figma : 128 à 137 selon le pays */
}

.pays-video__titre {
	max-width: var(--container-soustitre);
	margin: var(--space-5) auto 0;
	font-size: var(--fs-h1);   /* Figma : 48 px */
	text-transform: uppercase;
	color: var(--color-text);
}

/* Figma cale la vidéo sur 744 px, soit un peu plus de la moitié du conteneur :
   elle n'a pas à s'étendre sur toute la largeur. */
.pays-video__lecteur {
	max-width: 744px;
	margin: var(--space-7) auto 0;
}


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

   Les 80 px sont un relevé desktop : sous les 346 px de la gouttière, ils
   ouvraient 112 px jusqu'au titre suivant, là où les autres pages du site
   tiennent leurs sections à 72–92.
   ============================================================ */

@media (max-width: 767px) {

	.pays-video {
		padding-block-end: var(--space-7);
	}

}