/**
 * Page « Le Programme » — bloc d'introduction.
 *
 * Composition à l'échelle. La scène est un conteneur de requête : 1cqw vaut
 * 1 % de sa largeur, soit 14,4 px à la largeur de la maquette. Toutes les
 * mesures relevées sur Figma sont donc divisées par 14,4, et l'ensemble —
 * géométrie comme typographie — se réduit proportionnellement.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle or  530 / 235 / 947      anneau  centre 703,7 / 1136,7, Ø 486,7
 *   accroche   centrée 1020 / 701   photo   Ø 385 (10,45 % de retrait)
 *   colonne    102 / 735            hauteur du bloc 752
 *
 * Emplacement : assets/css/components/pgm-intro.css
 */

.pgm-intro {
	overflow: hidden;   /* le cercle or déborde à droite, comme dans la maquette */
}

/* Plafonnée à la largeur de la maquette. Au-delà, la composition cesse de
   grandir : sans ce plafond, tout est multiplié par la largeur du navigateur
   et le titre atteint 55 px à 1663 px là où Figma en prévoit 48.
   En dessous de 1440, la scène occupe toute la largeur et tout se réduit
   proportionnellement. */
.pgm-intro__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 752;
}

/* ── Grand cercle or ───────────────────────────────────────── */

/* Le haut du cercle passe sous le bandeau dans la maquette ; ici il sort par
   le haut de la scène, que overflow se charge de rogner. */
.pgm-intro__cercle {
	position: absolute;
	top: -27.29cqw;
	left: 36.81cqw;
	width: 65.76cqw;
	aspect-ratio: 1;
	background-color: var(--e4y-gold);
	border-radius: var(--radius-full);
}

/* ── Accroche dans le cercle ───────────────────────────────── */

.pgm-intro__accroche {
	position: absolute;
	top: 5.07cqw;
	left: 47.29cqw;
	width: 47.08cqw;
	margin: 0;
	font-family: var(--font-display);
	font-size: 3.333cqw;        /* Figma : 48 px */
	font-weight: var(--fw-bold);
	line-height: 1.366;
	color: var(--color-text-inverse);
	text-align: center;
}

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

.pgm-intro__colonne {
	position: absolute;
	top: 7.43cqw;
	left: 5.08cqw;
	width: 32cqw;
}

.pgm-intro__titre {
	margin: 0;
	font-size: 3.333cqw;        /* Figma : 48 px */
	line-height: 1.366;
	text-transform: uppercase;
	color: var(--e4y-gold);
}

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

/* Le bouton suit la même échelle que le reste de la scène, sinon il
   paraîtrait démesuré une fois la composition réduite. */
.pgm-intro__bouton {
	margin-block-start: 1.7cqw;
	min-height: 3.4cqw;         /* Figma : 49 px */
	padding: 0.6cqw 0.9cqw;
	font-size: 1.111cqw;        /* Figma : 16 px */
	gap: 0.6cqw;
}

.pgm-intro__bouton .btn__icon--arrow {
	width: 1.46cqw;             /* Figma : 21 px */
	height: auto;
}

/* ── Anneau photographique ─────────────────────────────────── */

.pgm-intro__medaillon {
	position: absolute;
	top: 18.43cqw;
	left: 31.97cqw;
	width: 33.80cqw;            /* Figma : 486,7 px */
}

.pgm-intro__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


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

   La scène est bâtie en cqw : tout, géométrie comme typographie, se réduit
   avec la largeur. À 402 px, un cqw ne vaut plus que 4 px et le titre tombe à
   13 px, le texte à 5,6. La composition à l'échelle n'a donc de sens qu'aux
   abords de la maquette ; en dessous, elle se déplie en colonne.

   Le fichier Figma ne propose pas de maquette mobile pour cette page — 01_MOB
   ne couvre que l'accueil. La règle appliquée ici est celle de l'accueil : les
   disques de couleur restent des disques et débordent de l'écran plutôt que de
   rétrécir, et la typographie repasse aux tokens.
   ============================================================ */

@media (max-width: 1199px) {

	.pgm-intro__scene {
		/* Le diamètre sert aussi de repère aux retraits et au chevauchement :
		   exprimés en pourcentage, ils se seraient calculés sur la scène —
		   soit 143 px de marge intérieure à 1100 px de large, pour un cercle
		   qui n'en fait que 430. */
		--pgm-disque: min(360px, 92vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		/* En desktop, le cercle or remonte sous le bandeau ; déplié, le titre
		   se retrouvait collé au bas de la photo. */
		padding-block: var(--space-7) var(--space-3);
	}

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

	.pgm-intro__colonne {
		position: static;
		order: 1;
		width: 100%;
		max-width: var(--container-narrow);
		padding-inline: var(--gutter);
	}

	.pgm-intro__titre {
		font-size: var(--fs-h1);
	}

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

	.pgm-intro__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);
	}

	.pgm-intro__bouton .btn__icon--arrow {
		width: 21px;
	}

	/* Le cercle déborde de l'écran comme dans la maquette : c'est son diamètre
	   qui est plafonné, pas la place disponible. La section rogne le surplus. */
	.pgm-intro__accroche {
		position: static;
		order: 2;
		display: grid;
		place-items: center;
		width: var(--pgm-disque);
		aspect-ratio: 1;
		margin-block-start: var(--space-7);
		padding-inline: calc(var(--pgm-disque) * 0.11);
		font-size: var(--fs-h3);
		background-color: var(--e4y-gold);
		border-radius: var(--radius-full);
	}

	/* Chevauche le bas du disque, comme en desktop. La marge est un
	   pourcentage de la scène : elle suit donc la largeur de l'écran. */
	.pgm-intro__medaillon {
		position: static;
		order: 3;
		width: min(280px, 72vw);
		margin-block-start: calc(var(--pgm-disque) * -0.18);
	}

}