/**
 * Pages pays — bloc d'identité.
 *
 * Même technique que les blocs d'introduction des autres pages : scène
 * plafonnée à la largeur de maquette, tout exprimé en cqw.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle ambre 530 / 235 / Ø 947    anneau  centre 703,5 / 1136,5, Ø 488
 *   devise       692 / 697 / l. 574   disque  Ø 385
 *   colonne      100 / 693            emblème 100 / 982 / 330 × 200
 *   pastille     993 / 931 / Ø 296    hauteur du bloc 812
 *
 * Emplacement : assets/css/components/pays-identite.css
 */

.pays-identite {
	overflow: hidden;   /* le cercle ambre déborde à droite */
}

.pays-identite__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	/* Hauteur calculée et non tâtonnée : dans la maquette, l'anneau descend à
	   1380 (centre 1136,5 + rayon 244) et l'ellipse de la zone passe à 1440 au
	   droit de son axe — soit 60 px de vert sous lui. Notre anneau finit à
	   796 px du haut de la scène (21,417 + 33,889 cqw), d'où 856.
	   Mes relevés antérieurs par détection de pixels confondaient l'arc avec le
	   cercle ambre et donnaient 333. */
	aspect-ratio: 1440 / 856;
}

/* ── Grand cercle ambre ────────────────────────────────────── */

/* Le haut du cercle passe sous le bandeau : d'où le décalage négatif, la scène
   commençant au bas de celui-ci. */
.pays-identite__cercle {
	position: absolute;
	top: -27.292cqw;
	left: 36.806cqw;
	width: 65.764cqw;           /* Figma : 947 px */
	aspect-ratio: 1;
	background-color: var(--e4y-amber);
	border-radius: var(--radius-full);
}

/* ── Devise dans le cercle ─────────────────────────────────── */

.pays-identite__devise {
	position: absolute;
	top: 4.792cqw;
	left: 48.056cqw;
	width: 39.861cqw;           /* Figma : 574 px */
	margin: 0;
	font-family: var(--font-display);
	font-size: 6.25cqw;         /* Figma : 90 px, interligne relevé à 108 */
	font-weight: var(--fw-bold);
	line-height: 1.19;
	color: var(--color-text);
	text-align: center;
}

/* ── Colonne de texte ──────────────────────────────────────── */

/* left : le bord gauche du conteneur, pour s'aligner sur le logo — voir
   hub-intro.css, qui détaille le calcul. */
.pays-identite__colonne {
	position: absolute;
	top: 4.514cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 21.389cqw;           /* Figma : 308 px */
}

.pays-identite__titre {
	margin: 0;
	font-size: 3.333cqw;        /* Figma : 48 px */
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

.pays-identite__texte {
	margin-block-start: 1.25cqw;
	font-size: 1.389cqw;        /* Figma : 20 px */
	line-height: 1.25;
	color: var(--color-text-inverse);
}

.pays-identite__bouton {
	margin-block-start: 1.25cqw;
	min-height: 3.4cqw;         /* Figma : 49 px */
	padding: 0.6cqw 0.9cqw;
	gap: 0.6cqw;
	font-size: 1.111cqw;        /* Figma : 16 px */
}

.pays-identite__bouton .btn__icon--arrow {
	width: 1.46cqw;
	height: auto;
}

/* ── Emblème ───────────────────────────────────────────────── */

.pays-identite__embleme {
	position: absolute;
	top: 24.583cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	width: 22.917cqw;           /* Figma : 330 px */
}

.pays-identite__embleme-img {
	width: 100%;
	height: auto;
}

/* ── Anneau et logo national ───────────────────────────────── */

.pays-identite__medaillon {
	position: absolute;
	top: 21.417cqw;
	left: 31.906cqw;
	width: 33.889cqw;           /* Figma : 488 px */
}

/* Le disque est blanc : l'anneau ne cercle pas une photo mais un logo, qui a
   besoin d'un fond propre. */
.pays-identite__medaillon .anneau__contenu {
	background-color: var(--e4y-white);
}

/* Le logo n'occupe pas tout le disque : Figma le pose sur 317 × 171 dans un
   cercle de 385, soit 82 % de large. */
.pays-identite__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82%;
	height: 100%;
}

/* Le sélecteur descend de .anneau__contenu : celui-ci impose un
   object-fit: cover à toute image qu'il contient — juste pour une photo, mais
   il rognait ici le logo. À spécificité égale, anneau.css étant chargé avant
   ce fichier, il fallait le passer. */
.anneau__contenu .pays-identite__logo-img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ── Pastille photo ────────────────────────────────────────── */

.pays-identite__pastille {
	position: absolute;
	top: 21.042cqw;
	left: 68.958cqw;
	width: 20.556cqw;           /* Figma : 296 px */
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-full);
}

.pays-identite__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================================================
   Sous 1200px — la composition se déplie

   Même repli que les blocs d'introduction des autres pages, dont cette scène
   reprend la technique : tout est en cqw, et à 402 px un cqw ne vaut plus que
   4 px — le titre tombait à 13 px, le texte à 5,6 et la devise à 25.

   La grille reprend l'agencement de la maquette là où elle le peut : la
   colonne d'abord, le disque de la devise, l'anneau qui le chevauche, puis
   l'emblème et la photo côte à côte, comme ils encadrent l'anneau en desktop.
   ============================================================ */

@media (max-width: 1199px) {

	.pays-identite__scene {
		/* Le diamètre sert aussi de repère au chevauchement et au retrait :
		   en pourcentage, ils se seraient calculés sur la scène. */
		--pays-disque: min(360px, 92vw);
		display: grid;
		grid-template-columns: auto auto;
		grid-template-areas:
			'colonne colonne'
			'devise  devise'
			'anneau  anneau'
			'embleme pastille';
		gap: var(--space-6);
		align-items: center;
		justify-content: center;
		aspect-ratio: auto;
		padding-block: var(--space-7);
	}

	/* Le disque ambre est repris par la devise elle-même : deux boîtes pour un
	   seul cercle ne pouvaient plus rester alignées une fois la position
	   absolue abandonnée. */
	.pays-identite__cercle {
		display: none;
	}

	/* La colonne prend la largeur de la gouttière et se centre dans sa piste :
	   calée sur le disque, qui déborde volontairement de l'écran, son texte
	   commençait à x 21 quand toutes les autres sections du site commencent à
	   28 — et le logo de l'en-tête avec elles. */
	.pays-identite__colonne {
		position: static;
		grid-area: colonne;
		justify-self: center;
		width: calc(100vw - 2 * var(--gutter));
		max-width: 100%;
		padding-inline: 0;
	}

	.pays-identite__titre {
		font-size: var(--fs-h1);
	}

	.pays-identite__texte {
		margin-block-start: var(--space-3);
		font-size: var(--fs-body);
	}

	.pays-identite__bouton {
		margin-block-start: var(--space-5);
		gap: var(--space-3);
		min-height: 49px;               /* Figma : 49 px, en dur cette fois */
		padding: var(--space-3) var(--space-5);
		font-size: var(--fs-body);
	}

	.pays-identite__bouton .btn__icon--arrow {
		width: 21px;
	}

	.pays-identite__devise {
		position: static;
		grid-area: devise;
		display: grid;
		place-items: center;
		width: var(--pays-disque);
		aspect-ratio: 1;
		padding-inline: calc(var(--pays-disque) * 0.11);
		font-size: var(--fs-h1);
		background-color: var(--e4y-amber);
		border-radius: var(--radius-full);
	}

	/* Chevauche le bas du disque, comme en desktop. La grille se referme
	   d'elle-même sur la marge négative. */
	.pays-identite__medaillon {
		position: static;
		grid-area: anneau;
		justify-self: center;
		width: min(280px, 72vw);
		margin-block-start: calc(var(--pays-disque) * -0.18 - var(--space-6));
	}

	/* Emblème et photo sont l'un et l'autre facultatifs — la Côte d'Ivoire n'a
	   pas encore le sien. Sans lui, sa colonne reste dans la grille et la photo
	   se retrouvait décalée à droite : la dernière rangée repasse alors sur une
	   seule colonne. */
	.pays-identite__scene:not(:has(.pays-identite__embleme)) {
		grid-template-areas:
			'colonne  colonne'
			'devise   devise'
			'anneau   anneau'
			'pastille pastille';
	}

	.pays-identite__scene:not(:has(.pays-identite__pastille)) {
		grid-template-areas:
			'colonne colonne'
			'devise  devise'
			'anneau  anneau'
			'embleme embleme';
	}

	.pays-identite__embleme {
		position: static;
		grid-area: embleme;
		justify-self: center;
		width: min(160px, 40vw);
	}

	.pays-identite__pastille {
		position: static;
		grid-area: pastille;
		justify-self: center;
		width: min(120px, 30vw);
	}

}