/**
 * Page « Le Programme » — les étapes du parcours.
 *
 * La scène occupe la largeur de contenu du conteneur (--container-max) et sert
 * de conteneur de requête : 1cqw en vaut donc un centième. Contrairement au
 * bloc d'introduction, le repère n'est pas le cadre de 1440 px mais l'empan de
 * la rangée haute relevé sur Figma — de x = 102 à x = 1340, soit 1238 px. Les
 * pastilles des extrémités affleurent ainsi les bords du conteneur, et toutes
 * les mesures de la maquette sont divisées par 12,38 au lieu de 14,4.
 *
 * Repères Figma, origine verticale au bas de l'anneau d'introduction (1380) :
 *   pastille  Ø 385      médaillon Ø 167, débordant de 41 px vers le haut
 *   rangée 1  y = 1473   x = 102, 529, 955
 *   rangée 2  y = 1873   x = 311, 738      bas des pastilles 2258
 *
 * Emplacement : assets/css/components/pgm-parcours.css
 */

/* Hauteur 1013 et non 878 : l'ellipse crème descend jusqu'à 2393 dans la
   maquette, soit 135 px sous la dernière rangée. Cette queue appartient à la
   scène, faute de quoi la zone crème se referme sur les pastilles et l'arbre
   de la section suivante se retrouve sur fond blanc. */
.pgm-parcours__scene {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 1238 / 1013;
}

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

/* --x et --y viennent du PHP, déjà exprimés en centièmes de l'empan. */
.pgm-parcours__pastille {
	position: absolute;
	top: calc(var(--y) * 1cqw);
	left: calc(var(--x) * 1cqw);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 31.10cqw;              /* Figma : 385 px sur 1238 */
	aspect-ratio: 1;
	padding-block-start: 11.63cqw; /* laisse passer le médaillon */
	padding-inline: 3.5cqw;
	color: var(--color-text-inverse);
	text-align: center;
	border-radius: var(--radius-full);
}

/* ── Médaillon ─────────────────────────────────────────────── */

/* Pourcentages de la pastille, et non cqw : le médaillon reste ainsi soudé à
   son cercle quelle que soit l'échelle. Figma : 167 sur 385, remonté de 41. */
.pgm-parcours__medaillon {
	position: absolute;
	top: -10.65%;
	left: 50%;
	width: 43.38%;
	transform: translateX(-50%);
}

.pgm-parcours__picto {
	width: 100%;
	height: auto;
}

/* ── Textes ────────────────────────────────────────────────── */

.pgm-parcours__titre {
	margin: 0;
	font-size: 1.939cqw;          /* Figma : 24 px */
	line-height: 1.2;
	color: inherit;               /* sinon le vert de base.css reprend la main */
}

.pgm-parcours__texte {
	margin-block-start: 1.75cqw;
	max-width: 24.07cqw;          /* Figma : 298 px */
	font-size: 1.616cqw;          /* Figma : 20 px */
	line-height: 1.25;
}

/* ── Couleurs, dans l'ordre du parcours ────────────────────── */

.pgm-parcours__pastille--gold {
	background-color: var(--card-gold-bg);
}

.pgm-parcours__pastille--orange {
	background-color: var(--card-orange-bg);
}

.pgm-parcours__pastille--amber {
	background-color: var(--card-amber-bg);
}

.pgm-parcours__pastille--green {
	background-color: var(--card-green-bg);
}

.pgm-parcours__pastille--taupe {
	background-color: var(--card-taupe-bg);
}


/* ============================================================
   Sous 1200px — les pastilles s'empilent

   Mêmes raisons qu'au bloc d'introduction : les mesures sont en cqw, et sous
   1200 px les titres tombent sous 19 px, les textes sous 16. Les pastilles
   quittent donc leurs coordonnées et se rangent en colonne, à un diamètre
   fixe. Sur tablette, la rangée se remplit d'elle-même : c'est le seul point
   où le repli tient compte de la place restante.

   Les proportions internes sont conservées telles quelles — le médaillon
   déborde toujours du dixième du diamètre, le texte commence toujours aux
   37 % (144 px sur les 385 de la maquette).
   ============================================================ */

@media (max-width: 1199px) {

	.pgm-parcours__scene {
		/* Le diamètre est posé ici et non sur la pastille : le retrait haut
		   s'en déduit. Le médaillon déborde du dixième du diamètre au-dessus
		   de son cercle, et c'est cette saillie que le retrait doit dégager —
		   sinon le picto de la première pastille vient chevaucher l'anneau du
		   bloc précédent, ce qu'un écart en dur ne peut pas anticiper. */
		--pgm-pastille: min(300px, 86vw);
		display: flex;
		flex-wrap: wrap;
		/* Rangée large, colonne serrée : le médaillon de la pastille du dessous
		   remonte de 32 px, l'écart vertical doit l'absorber. Horizontalement,
		   32 px suffisent — et permettent deux colonnes dès 768 px, où 64 en
		   auraient laissé une seule. */
		gap: var(--space-8) var(--space-6);
		align-items: flex-start;
		justify-content: center;
		aspect-ratio: auto;
		/* Le médaillon de la première pastille déborde vers le haut, et
		   l'ellipse crème doit encore descendre sous la dernière. */
		padding-block: calc(var(--space-6) + var(--pgm-pastille) * 0.1065) var(--space-7);
	}

	/* relative et non static : le médaillon se positionne sur sa pastille.
	   Rendu statique, il retombait sur la scène — les cinq pictos se
	   superposaient alors au-dessus du premier disque, hors du cadre.

	   Les retraits passent par le diamètre et non par un pourcentage : une
	   marge intérieure en % se calcule sur le bloc conteneur, ici la scène.
	   À 900 px, les 11 % valaient 84 px au lieu de 33 et le texte, réduit à
	   133 px de large, débordait du cercle par le bas. */
	.pgm-parcours__pastille {
		position: relative;
		inset: auto;
		width: var(--pgm-pastille);
		padding-block-start: calc(var(--pgm-pastille) * 0.374);  /* Figma : 144 sur 385 */
		padding-inline: calc(var(--pgm-pastille) * 0.112);       /* Figma : 43 sur 385 */
	}

	.pgm-parcours__titre {
		font-size: var(--fs-lead);
	}

	.pgm-parcours__texte {
		max-width: none;
		margin-block-start: var(--space-2);
		font-size: var(--fs-small);
	}

}