/* ═══════════════════════════════════════════════════════════════════════════
   05 — LE PARCOURS

   Partagé par les deux pages de présentation : `fmt/parcours` sur une bande
   lin (marque blanche), `fmt/privee-parcours` sur une bande ivoire (marque
   privée). Trois morceaux : l'en-tête, l'équation « notre formule + votre
   logo = votre produit fini », et le carrousel des cinq étapes posé dans un
   bloc teinté.

   LA TEINTE SUIT LA BANDE. Tout contenant posé sur la bande lit
   `--surface-contenant` (surface relevée sur lin, lin sur ivoire). Un
   contenant posé DANS un contenant — cadre du visuel, bouton de lecture,
   pastilles, cartouches, jetons des tuiles au téléphone — prend la teinte de
   l'autre famille : `--parcours-imbrique`, déclaré ci-dessous pour chacune
   des deux bandes. Aucun trait, aucune ombre (règle du client).

   `parcours.js` n'est pas touché : il ne lit que les attributs
   `data-fmt-parcours-*`, `data-etat`, les classes `is-passe` / `is-actif` et
   `aria-current`, et n'écrit que `--fmt-parcours-avancement`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bande ivoire : le bloc est lin, l'imbriqué surface relevée. */
.fmt-parcours {
	--parcours-imbrique: var(--surface-raised);
	--parcours-imbrique-survol: var(--ivoire-clair);
}

/* Bande lin : le bloc est surface relevée, l'imbriqué lin. */
.fmt-parcours.fmt-section--lin {
	--parcours-imbrique: var(--lin);
	--parcours-imbrique-survol: var(--lin-survol);
}

.fmt-parcours > *,
.fmt-parcours .fmt-parcours__intro > *,
.fmt-parcours .fmt-parcours__equation > *,
.fmt-parcours .fmt-parcours__terme > *,
.fmt-parcours .fmt-parcours__terme-texte > * {
	margin-block: 0;
}

.fmt-parcours .fmt-parcours__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Titre de section du kit : 30 px au téléphone, 48 px au bureau. */
.fmt-parcours .fmt-parcours__titre {
	max-inline-size: 820px;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* ═══════════════════════════════════════════════════════════════ L'ÉQUATION */

.fmt-parcours .fmt-parcours__equation {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-32);
	margin-block-start: var(--space-48);
}

.fmt-parcours .fmt-parcours__terme {
	display: flex;
	align-items: center;
	gap: var(--space-24);
}

/* Jeton : un repère rond, teinté, sans contour. */
.fmt-parcours .fmt-parcours__jeton {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 72px;
	block-size: 72px;
	border-radius: var(--radius-pill);
	background: var(--surface-contenant);
	color: var(--petrole);
}

.fmt-parcours .fmt-parcours__jeton svg {
	inline-size: 32px;
	block-size: 32px;
}

/* Le terme final est le seul jeton pétrole plein de la section. */
.fmt-parcours .fmt-parcours__terme--final .fmt-parcours__jeton {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-parcours .fmt-parcours__terme-texte {
	display: flex;
	flex-direction: column;
	line-height: 1.04;
}

.fmt-parcours .fmt-parcours__possessif {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	letter-spacing: var(--track-subsection);
	color: var(--text-muted);
}

.fmt-parcours .fmt-parcours__nom {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
	letter-spacing: var(--track-section);
	color: var(--text-heading);
}

.fmt-parcours .fmt-parcours__terme--final .fmt-parcours__possessif {
	color: var(--text-heading);
}

.fmt-parcours .fmt-parcours__operateur {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 300;
	line-height: 1;
	color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════ LE CARROUSEL */

/* `.fmt-panel` pose la teinte du contenant, le rayon 12 et le rembourrage. */
.fmt-parcours .fmt-parcours__carrousel {
	--fmt-parcours-pastille: 52px;

	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: var(--space-64);
	align-items: stretch;
	margin-block-start: var(--space-48);
}

.fmt-parcours .fmt-parcours__carrousel p,
.fmt-parcours .fmt-parcours__carrousel h3,
.fmt-parcours .fmt-parcours__carrousel dl,
.fmt-parcours .fmt-parcours__carrousel dd {
	margin: 0;
}

/* ───────────────────────────────────────────────────────────────── Le visuel */

.fmt-parcours .fmt-parcours__visuel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
}

/* Une photographie carrée par étape ; la teinte tient la place avant le chargement. */
.fmt-parcours .fmt-parcours__cadre {
	inline-size: 300px;
	max-inline-size: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-2);
	background: var(--parcours-imbrique);
	overflow: hidden;
}

.fmt-parcours .fmt-parcours__cadre [data-fmt-parcours-image] {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Le badge, sous la photographie et non posé dessus : un `Badge` pétrole du
   kit, rayon 4, sans ombre. */
.fmt-parcours .fmt-parcours__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-block-size: 28px;
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	white-space: nowrap;
}

.fmt-parcours .fmt-parcours__badge .fmt-mono {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1;
}

/* Le point : un repère rond, cuivre — décor, jamais du texte. */
.fmt-parcours .fmt-parcours__badge-point {
	flex: none;
	inline-size: 6px;
	block-size: 6px;
	border-radius: var(--radius-pill);
	background: var(--cuivre);
}

/* ─────────────────────────────────────────────────────────────── Le contenu */

.fmt-parcours .fmt-parcours__contenu {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-block-size: 450px;
}

.fmt-parcours .fmt-parcours__meta {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

/* Le compteur ne dit vrai que si une seule étape est affichée. */
.fmt-parcours .fmt-parcours__compteur {
	display: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--petrole);
}

.fmt-js .fmt-parcours .fmt-parcours__compteur {
	display: block;
}

/* L'ancien filet entre le compteur et la mention : un simple espace
   extensible désormais, le client ne veut pas de traits partout. */
.fmt-parcours .fmt-parcours__filet {
	flex: 1;
}

.fmt-parcours .fmt-parcours__mention {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	color: var(--text-muted);
}

/* Commande de lecture : un repère rond, teinté. Sans script, rien ne défile,
   elle n'aurait rien à commander. */
.fmt-parcours .fmt-parcours__lecture {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0; /* Remise à zéro de la bordure native du bouton : aucun contour. */
	border-radius: var(--radius-pill);
	background: var(--parcours-imbrique);
	color: var(--petrole);
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-js .fmt-parcours .fmt-parcours__lecture {
	display: inline-flex;
}

.fmt-parcours .fmt-parcours__lecture:hover {
	background: var(--parcours-imbrique-survol);
}

.fmt-parcours .fmt-parcours__lecture:active {
	transform: scale(var(--scale-press));
}

.fmt-parcours .fmt-parcours__lecture svg {
	display: block;
	inline-size: 16px;
	block-size: 16px;
}

/* Une seule des deux icônes est montrée, selon l'état publié par le script. */
.fmt-parcours__lecture[data-etat="lecture"] .fmt-parcours__lecture-marche,
.fmt-parcours__lecture[data-etat="pause"] .fmt-parcours__lecture-pause {
	display: none;
}

/* ─────────────────────────────────────────────────────────────── Les étapes */

.fmt-parcours .fmt-parcours__etapes {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.fmt-parcours .fmt-parcours__etape {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

/* `display: flex` l'emporterait sur le `[hidden]` du navigateur. */
.fmt-js .fmt-parcours .fmt-parcours__etape[hidden] {
	display: none;
}

/* Une apparition unique à chaque changement d'étape. `backwards` et non
   `both` : l'état d'arrivée est l'état naturel de l'étape. Une animation qui
   ne se jouerait pas laisserait donc l'étape lisible, jamais transparente. */
.fmt-js .fmt-parcours .fmt-parcours__etape:not([hidden]) {
	animation: fmt-parcours-monte var(--dur-enter-short) var(--ease-soft) backwards;
}

@keyframes fmt-parcours-monte {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Rang de l'étape : utile tant que les cinq sont empilées, redondant avec le
   compteur dès que le carrousel prend la main. */
.fmt-parcours .fmt-parcours__rang {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--petrole);
}

.fmt-js .fmt-parcours .fmt-parcours__rang {
	display: none;
}

/* Icône d'étape : pétrole plein, sans ombre. */
.fmt-parcours .fmt-parcours__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--radius-8);
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-parcours .fmt-parcours__icone svg {
	inline-size: 28px;
	block-size: 28px;
}

.fmt-parcours .fmt-parcours__etape-titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

.fmt-parcours .fmt-parcours__etape-texte {
	max-inline-size: 620px;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--lh-body);
	color: var(--text-muted);
	text-wrap: pretty;
}

.fmt-parcours .fmt-parcours__chiffres {
	display: flex;
	gap: var(--space-64);
	padding-block-start: var(--space-8);
}

/* La valeur se lit avant son libellé, mais la liste de définitions veut le
   terme d'abord : l'ordre du document reste juste, l'affichage s'inverse. */
.fmt-parcours .fmt-parcours__chiffre {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-8);
}

/* Grand chiffre : Fraunces, comme le poids des vignettes du kit. */
.fmt-parcours .fmt-parcours__chiffre-valeur {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.1;
	letter-spacing: var(--track-subsection);
	color: var(--text-heading);
}

.fmt-parcours .fmt-parcours__chiffre-libelle {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-caption);
	color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────── La piste */

.fmt-parcours .fmt-parcours__piste {
	display: none;
	flex-direction: column;
	gap: var(--space-16);
	margin-block-start: auto;
}

.fmt-js .fmt-parcours .fmt-parcours__piste {
	display: flex;
}

.fmt-parcours .fmt-parcours__rail {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fmt-parcours .fmt-parcours__rail-fond,
.fmt-parcours .fmt-parcours__rail-remplissage {
	position: absolute;
	top: 50%;
	block-size: 2px;
	border-radius: var(--radius-pill);
	transform: translateY(-50%);
}

/* Piste : voile pétrole à 12 %. */
.fmt-parcours .fmt-parcours__rail-fond {
	left: calc(var(--fmt-parcours-pastille) / 2);
	right: calc(var(--fmt-parcours-pastille) / 2);
	background: var(--petrole-12);
}

/* Progression : pétrole plein. `--fmt-parcours-avancement` va de 0 à 1 ;
   c'est la seule chose que le script écrit sur le bloc. */
.fmt-parcours .fmt-parcours__rail-remplissage {
	left: calc(var(--fmt-parcours-pastille) / 2);
	width: calc((100% - var(--fmt-parcours-pastille)) * var(--fmt-parcours-avancement, 0));
	background: var(--petrole);
	transition: width var(--dur-ui) var(--ease-soft);
}

/*
 * Les pastilles : des repères ronds, sans contour. À venir : teinte
 * imbriquée. Passées : un voile pétrole — mélangé à la teinte du bloc pour
 * rester opaque, sinon la piste transparaîtrait. Étape en cours : aplat
 * pétrole plein, texte ivoire.
 */
.fmt-parcours .fmt-parcours__pastille {
	position: relative;
	flex: none;
	inline-size: var(--fmt-parcours-pastille);
	block-size: var(--fmt-parcours-pastille);
	padding: 0;
	border: 0; /* Remise à zéro de la bordure native du bouton : aucun contour. */
	border-radius: var(--radius-pill);
	background: var(--parcours-imbrique);
	color: var(--text-muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color var(--dur-ui) var(--ease-soft),
		color var(--dur-ui) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-parcours .fmt-parcours__pastille:hover {
	background: var(--parcours-imbrique-survol);
	color: var(--petrole);
}

.fmt-parcours .fmt-parcours__pastille.is-passe {
	background: color-mix(in srgb, var(--petrole) 18%, var(--surface-contenant));
	color: var(--petrole);
}

.fmt-parcours .fmt-parcours__pastille[aria-current="step"] {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-parcours .fmt-parcours__pastille:active {
	transform: scale(var(--scale-press));
}

.fmt-parcours .fmt-parcours__mots {
	display: flex;
}

.fmt-parcours .fmt-parcours__mot {
	flex: 1;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--text-muted);
	transition: color var(--dur-quick) var(--ease-soft);
}

.fmt-parcours .fmt-parcours__mot.is-actif {
	color: var(--petrole);
}

/* ═══════════════════════════════════════════════════════════════ Adaptation */

@media (max-width: 1080px) {
	.fmt-parcours .fmt-parcours__carrousel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
	}

	.fmt-parcours .fmt-parcours__contenu {
		min-block-size: 0;
	}

	.fmt-parcours .fmt-parcours__chiffres {
		gap: var(--space-48);
	}
}

/* En dessous de 900 px l'équation passe en colonne : chaque terme devient une
   tuile teintée pleine largeur, rayon 4, l'opérateur se centre entre deux. Le
   jeton, posé dans la tuile, prend la teinte imbriquée. */
@media (max-width: 900px) {
	.fmt-parcours .fmt-parcours__equation {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-8);
		margin-block-start: var(--space-32);
	}

	.fmt-parcours .fmt-parcours__terme {
		gap: var(--space-12);
		padding: var(--space-12) var(--space-16);
		border-radius: var(--radius-4);
		background: var(--surface-contenant);
	}

	.fmt-parcours .fmt-parcours__jeton {
		inline-size: 36px;
		block-size: 36px;
		background: var(--parcours-imbrique);
	}

	.fmt-parcours .fmt-parcours__jeton svg {
		inline-size: 18px;
		block-size: 18px;
	}

	.fmt-parcours .fmt-parcours__terme-texte {
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
	}

	.fmt-parcours .fmt-parcours__possessif {
		font-size: var(--wp--preset--font-size--h-4);
	}

	.fmt-parcours .fmt-parcours__nom {
		font-size: var(--wp--preset--font-size--large);
		letter-spacing: var(--track-subsection);
	}

	.fmt-parcours .fmt-parcours__operateur {
		align-self: center;
		font-size: var(--wp--preset--font-size--h-4);
	}
}

@media (max-width: 782px) {
	.fmt-parcours .fmt-parcours__carrousel {
		--fmt-parcours-pastille: 38px;
	}

	.fmt-parcours .fmt-parcours__cadre {
		inline-size: 176px;
	}

	.fmt-parcours .fmt-parcours__contenu {
		gap: var(--space-16);
	}

	.fmt-parcours .fmt-parcours__etapes {
		gap: var(--space-32);
	}

	.fmt-parcours .fmt-parcours__icone {
		inline-size: 48px;
		block-size: 48px;
	}

	.fmt-parcours .fmt-parcours__icone svg {
		inline-size: 24px;
		block-size: 24px;
	}

	.fmt-parcours .fmt-parcours__etape-texte {
		font-size: var(--wp--preset--font-size--medium);
	}

	/* Les deux chiffres deviennent deux cartouches teintées de largeur
	   égale. */
	.fmt-parcours .fmt-parcours__chiffres {
		gap: var(--space-12);
		align-self: stretch;
	}

	.fmt-parcours .fmt-parcours__chiffre {
		flex: 1;
		gap: var(--space-4);
		padding: var(--space-12) var(--space-16);
		border-radius: var(--radius-8);
		background: var(--parcours-imbrique);
	}

	.fmt-parcours .fmt-parcours__chiffre-valeur {
		font-size: var(--wp--preset--font-size--h-4);
	}

	.fmt-parcours .fmt-parcours__chiffre-libelle {
		font-size: var(--wp--preset--font-size--caption);
	}

	.fmt-parcours .fmt-parcours__pastille {
		font-size: var(--wp--preset--font-size--small);
	}

	/* Cinq libellés ne tiennent pas sous cinq pastilles de 38 px : la pastille
	   garde son nom accessible, l'écran garde sa lisibilité. */
	.fmt-parcours .fmt-parcours__mots {
		display: none;
	}
}