/* ==========================================================================
   Pages événement, mode Lancement, gabarit « Le chemin » (10/11/2026, lot A1 ;
   chemin courbe et mouvement du lot G, 11/11/2026).
   Chargée après le socle (socle.css), dont elle ne redéfinit aucun jeton de
   couleur : seulement ses rayons, sa mise en page et ses jetons de lieu.

   Le chemin : une courbe SVG (svg.pe-ch-trace) que lancement-chemin.js trace
   d'après la place réelle des bornes. Des points pour ce qui reste à parcourir,
   un ruban plein pour ce qui est parcouru. Les épisodes sont posés de part et
   d'autre ; une porte se tient en travers, le chemin passe dedans.

   Mouvement : seuls transform et opacity s'animent (et le tracé du ruban).
   Courbes et durées : sortie forte pour ce qui entre ou répond, va-et-vient pour
   ce qui se déplace à l'écran. Sous prefers-reduced-motion, le socle ramène tout
   à un fondu et le script n'anime plus rien.
   ========================================================================== */
.pe[data-pe-gabarit="lancement-chemin"] {
  --pe-rayon-ecran: 24px; --pe-rayon: 20px;
  --ch-sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --ch-amplitude: 9px; /* demi-ondulation du chemin : douce sur un téléphone, franche sur grand écran */
}

/* ---------- Le départ : titre, avancement, et le geste qui fait avancer ---------- */
.pe-depart { max-width: 72rem; margin: 0 auto; padding: 36px 16px 8px; display: grid; gap: 14px; text-align: center; justify-items: center; }
/* Le titre tient sur une ligne (12/11/2026) : toute la largeur, une taille qui suit l'écran ; un titre trop long se répartit en lignes égales. */
.pe-depart h1 { font-size: clamp(1.875rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; max-width: 100%; text-wrap: balance; }
.pe-chapo { color: var(--pe-doux); font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.45; max-width: 46ch; }
.pe-presentation { color: var(--pe-doux); max-width: 60ch; white-space: pre-line; }
.pe-mesure { width: min(100%, 28rem); display: grid; gap: 14px; margin-top: 14px; justify-items: center; }
.pe-mesure .pe-jauge { width: 100%; height: 10px; }
/* L'avancement (12/11/2026) : le compte en grand sur un halo de la couleur du site, un titre en petites capitales
   entre deux filets, une jauge d'un segment par étape. */
.pe-ch-mesure { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 6px; margin: 0; padding: 6px 28px; }
.pe-ch-mesure::before { content: ""; position: absolute; inset: -18px -10px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent); pointer-events: none; }
.pe-ch-compte { font-family: var(--pe-police-titre); font-weight: 800; font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pe-ch-compte-n { color: var(--primary-color); }
.pe-ch-compte-sur { margin-left: .08em; font-size: .5em; font-weight: 700; color: var(--pe-doux); }
.pe-ch-mesure-txt { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pe-doux); }
.pe-ch-mesure-txt::before, .pe-ch-mesure-txt::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.pe-ch-segments { position: relative; display: flex; gap: 5px; width: 100%; height: 8px; border-radius: 99px; overflow: hidden; }
.pe-ch-segments i { position: relative; flex: 1; border-radius: 99px; overflow: hidden; background: var(--progress-bg-color); }
.pe-ch-segments b { position: absolute; inset: 0; border-radius: inherit; background: var(--progress-fill-color); transform-origin: left center; transform: scaleX(0); }
.pe-ch-segments i[data-fait="1"] b { transform: scaleX(1); }
/* Un reflet traverse la jauge une fois remplie. */
.pe-ch-segments::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--primary-lightened-color) 70%, transparent) 50%, transparent 65%); opacity: 0; transform: translateX(-100%); pointer-events: none; }
.pe-ch-segments.pe-ch-brille::after { animation: pe-ch-reflet 1100ms var(--ch-sortie); }
@keyframes pe-ch-reflet { from { opacity: 1; transform: translateX(-100%); } to { opacity: .2; transform: translateX(100%); } }
.pe .pe-mesure .pe-btn { margin-top: 8px; min-height: 52px; padding-inline: 1.6rem; font-size: 1.0625rem; }
/* Une seule action pleine par écran : le rendez-vous de la barre du haut reste à portée, en contour. */
.pe[data-pe-gabarit="lancement-chemin"] .pe-tete .pe-btn { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--pe-contour); }
@media (hover: hover) and (pointer: fine) { .pe[data-pe-gabarit="lancement-chemin"] .pe-tete .pe-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } }

/* ---------- Les bandes-annonces : un paquet de cartes, les deux autres dépassent derrière ---------- */
.pe-scene-bloc { max-width: 52rem; margin: 0 auto; padding: 26px 16px 0; }
.pe-chemin-gabarit .pe-scene { padding: 0 5% 2%; scroll-margin-top: calc(var(--pe-haut) + 80px); }
.pe-chemin-gabarit .pe-scene[data-n="1"] { padding: 0; }
.pe-chemin-gabarit .pe-ba[data-pos="1"] { transform: rotate(3.5deg) translate(4.5%, 3%); opacity: .9; }
.pe-chemin-gabarit .pe-ba[data-pos="2"] { transform: rotate(-4deg) translate(-4.5%, 4%); opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .pe-chemin-gabarit .pe-ba[data-pos="1"]:hover { transform: rotate(5deg) translate(6%, 3%); opacity: 1; }
  .pe-chemin-gabarit .pe-ba[data-pos="2"]:hover { transform: rotate(-5.5deg) translate(-6%, 4%); opacity: 1; }
}
.pe-chemin-gabarit .pe-ba:not([data-pos="0"]) .pe-ba-txt { opacity: 0; }
.pe-chemin-gabarit .pe-pile-nav { justify-content: center; }

/* ---------- Le chemin : son conteneur, son tracé ---------- */
.pe-chemin-page { position: relative; max-width: 40rem; margin: 0 auto; padding: 44px 16px 0; }
.pe-chemin-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.pe-ch-trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; color: var(--pe-encre); opacity: 0; }
.pe-chemin-page[data-ch-pret] .pe-ch-trace { opacity: 1; }
.pe-ch-trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Ce qui reste à parcourir : des points, à l'encre de la page (la part d'encre qui tient 3:1 sur ce fond). */
.pe-ch-voie { stroke: var(--pe-contour); stroke-width: 4px; }
/* Ce qui est parcouru : un ruban plein, dans la couleur d'avancement du site, et son halo. */
.pe-ch-ruban { stroke: var(--progress-fill-color); stroke-width: 6px; }
.pe-ch-halo { stroke: var(--progress-fill-color); stroke-width: 18px; opacity: .16; }
/* Sans script, un trait droit relie les bornes : le chemin reste lisible, il ne serpente pas. */
.pe-chemin-page:not([data-ch-pret]) .pe-station:not(:last-child)::before {
  content: ""; position: absolute; left: 29px; top: 22px; bottom: -52px; width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--pe-encre) 30%, transparent);
}
.pe-chemin-page:not([data-ch-pret]) .pe-station[data-suite="1"]:not(:last-child)::before { background: var(--progress-fill-color); }

/* ---------- Une étape et sa borne ---------- */
.pe-station { position: relative; min-height: 44px; padding-left: 74px; scroll-margin-top: calc(var(--pe-haut) + 90px); }
.pe-borne {
  position: absolute; left: 0; top: 0; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--couleur-fond-content); color: var(--pe-encre); box-shadow: inset 0 0 0 2px var(--pe-contour);
  transition: transform 200ms var(--ch-sortie);
}
/* L'ondulation : la borne se décale d'un côté puis de l'autre, la courbe la suit. */
.pe-station[data-cote="c"] .pe-borne { left: var(--ch-amplitude); }
.pe-station[data-cote="d"] .pe-borne { left: calc(var(--ch-amplitude) * 2); }
.pe-station:where([data-genre="episode"], [data-genre="saison"], [data-genre="recompense"]):not([data-ici="1"]) .pe-borne { top: calc(50% - 22px); }
.pe-borne .pe-ico { position: relative; width: 20px; height: 20px; color: var(--pe-doux); }
.pe-station[data-ouvert="1"] .pe-borne { box-shadow: inset 0 0 0 2.5px var(--primary-color); }
.pe-station[data-ouvert="1"] .pe-borne .pe-ico { color: var(--pe-accent-ici, var(--pe-accent)); }
.pe-station[data-fait="1"] .pe-borne { background: var(--primary-color); box-shadow: none; }
.pe-station[data-ici="1"][data-ouvert="1"]:not([data-genre="porte"]) .pe-borne { background: var(--primary-color); }
.pe-station[data-fait="1"] .pe-borne .pe-ico, .pe-station[data-ici="1"][data-ouvert="1"]:not([data-genre="porte"]) .pe-borne .pe-ico { color: var(--on-primary-color); }
.pe-station[data-ici="1"] .pe-borne { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 24%, transparent); }
.pe-station[data-ici="1"][data-genre="porte"] .pe-borne { box-shadow: inset 0 0 0 2.5px var(--primary-color), 0 0 0 6px color-mix(in srgb, var(--primary-color) 24%, transparent); }
.pe-station[data-genre="repli"] .pe-borne { width: 14px; height: 14px; margin: 15px; background: var(--pe-contour); box-shadow: 0 0 0 4px var(--couleur-fond-content); }
.pe-station[data-genre="repli"][data-suite="1"] .pe-borne { background: var(--progress-fill-color); }
/* L'onde de l'étape du moment : un seul battement quand elle arrive à l'écran ou vient de s'ouvrir, puis elle se tait.
   700 ms : c'est un signal rare (une fois par rendu), pas une réponse à un geste. */
.pe-borne::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--primary-color); opacity: 0; pointer-events: none; }
.pe-station.pe-ch-balise .pe-borne::after { animation: pe-ch-onde 700ms var(--ch-sortie); }
/* Arrivée sur l'étape du moment après le défilement automatique (12/11/2026) : la carte pulse deux fois, un anneau
   de la couleur du site s'en éloigne. Sous mouvement réduit, rien (voir plus bas). */
.pe-station.pe-ch-arrivee .pe-borne::after { animation: pe-ch-onde 700ms var(--ch-sortie) 2; }
.pe .pe-station.pe-ch-arrivee :is(.pe-ep, .pe-saison, .pe-carte, .pe-porte, .pe-jalon) { position: relative; animation: pe-ch-arrivee 900ms var(--ch-sortie) 2; }
.pe .pe-station.pe-ch-arrivee :is(.pe-ep, .pe-saison, .pe-carte, .pe-porte, .pe-jalon)::after {
  content: ""; position: absolute; inset: -2px; border-radius: 22px; border: 3px solid var(--primary-color); pointer-events: none;
  opacity: 0; animation: pe-ch-anneau 900ms var(--ch-sortie) 2;
}
@keyframes pe-ch-arrivee { 35% { transform: scale(1.025); } }
@keyframes pe-ch-anneau { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }
@keyframes pe-ch-onde { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* ---------- Une porte : une arche à deux vantaux, en travers du chemin ---------- */
.pe-station[data-genre="porte"] .pe-borne { height: 52px; border-radius: 22px 22px 9px 9px; box-shadow: inset 0 0 0 2.5px var(--primary-color); }
.pe-station[data-genre="porte"] .pe-borne .pe-ico { color: var(--pe-accent-ici, var(--pe-accent)); }
.pe-lueur { position: absolute; inset: 0; border-radius: inherit; background: var(--primary-color); opacity: 0; }
.pe-vantail {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 7px); border-radius: 16px 2px 2px 4px;
  background: color-mix(in srgb, var(--primary-color) 20%, var(--couleur-fond-content)); transform-origin: left center;
}
.pe-vantail + .pe-vantail { left: auto; right: 6px; border-radius: 2px 16px 4px 2px; transform-origin: right center; }
/* Porte franchie : les vantaux s'effacent sur les côtés, l'arche s'allume. */
.pe-station[data-genre="porte"][data-fait="1"] .pe-borne { box-shadow: none; }
.pe-station[data-fait="1"] .pe-lueur { opacity: 1; }
.pe-station[data-fait="1"] .pe-vantail { transform: scaleX(.22); }
.pe-station[data-genre="porte"][data-fait="1"] .pe-borne .pe-ico { color: var(--on-primary-color); }
.pe-station[data-genre="porte"][data-fait="0"] { padding-left: 0; }
/* Sur un téléphone, l'arche d'une porte fermée se tient à droite du coin arrondi de son panneau : le linteau se voit des deux côtés. */
@media (max-width: 899.98px) { .pe-station[data-genre="porte"][data-fait="0"] .pe-borne { left: 24px; } }
.pe-porte {
  display: grid; gap: .6rem; margin-top: 26px; padding: 42px 18px 18px; border-radius: 20px; text-align: left;
  background: var(--pe-carte); color: var(--pe-encre-carte); --pe-accent-ici: var(--pe-accent-carte);
  border: 1.5px solid var(--border-color); border-top: 3px solid var(--primary-color); box-shadow: 0 10px 30px var(--pe-ombre);
}
.pe-porte-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.375rem; line-height: 1.15; }
.pe-porte p:not(.pe-porte-titre):not(.pe-erreur):not(.pe-form-note) { color: var(--pe-doux-carte); max-width: 46ch; }
.pe-porte .pe-btn { justify-self: start; }
/* Une seule action pleine par écran : hors de l'étape du moment, l'inscription reste en contour. */
.pe .pe-station:not([data-ici="1"]) .pe-form .pe-btn { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--pe-contour); }
@media (hover: hover) and (pointer: fine) { .pe .pe-station:not([data-ici="1"]) .pe-form .pe-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } }

/* ---------- Un jalon : l'arrivée, une porte franchie, la fin du chemin (une ligne, pas une carte) ---------- */
.pe-jalon { display: grid; gap: .15rem; align-content: center; min-height: 44px; }
.pe-station[data-genre="porte"] .pe-jalon { min-height: 52px; }
.pe-jalon-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.0625rem; line-height: 1.25; }
.pe-jalon p:not(.pe-jalon-titre) { color: var(--pe-doux); font-size: .9375rem; line-height: 1.4; }
.pe-palier { border-radius: 20px; background: var(--couleur-fond-content); }
.pe-station .pe-recompense { border-radius: 20px; }

/* ---------- « Vous êtes ici » : une étiquette accrochée à la borne, pas un bouton ---------- */
/* L'encre de la page en fond, le fond de la page en texte : la paire que le serveur garantit lisible. */
.pe-ici {
  position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 28px; margin: 8px 0 12px; padding: 0 .8rem; border-radius: 99px;
  background: var(--pe-encre); color: var(--couleur-fond-content); font-size: .8125rem; font-weight: 800; line-height: 1.2; white-space: nowrap; transform-origin: left center;
}
.pe-ici::before { content: ""; position: absolute; left: -4px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.pe-station[data-genre="porte"][data-fait="0"] .pe-ici { position: absolute; left: 82px; top: 12px; margin: 0; }

/* ---------- Les cartes : un épisode, une saison ---------- */
/* Une surface de carte porte aussi SON accent (--pe-accent-carte) : le serveur le calcule d'après ce fond. */
.pe-carte { display: grid; gap: .5rem; padding: 14px 16px; border-radius: 20px; background: var(--pe-carte); color: var(--pe-encre-carte); border: 1.5px solid var(--border-color); --pe-accent-ici: var(--pe-accent-carte); }
.pe-carte-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }
.pe-carte p:not(.pe-carte-titre) { color: var(--pe-doux-carte); }
.pe .pe-station .pe-ep {
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px;
  border-radius: 20px; background: var(--pe-carte); border: 1.5px solid var(--border-color);
  --pe-encre-ici: var(--pe-encre-carte); --pe-doux-ici: var(--pe-doux-carte); --pe-accent-ici: var(--pe-accent-carte);
  transition: transform 200ms var(--ch-sortie);
}
.pe-station .pe-ep-img { border-radius: 13px; }
.pe-station .pe-ep-num, .pe-station .pe-saison-num { font-size: 1.05rem; }
.pe-station .pe-ep-ico { display: none; }
/* Pas encore accessible (12/11/2026) : la carte s'efface, le cadenas se pose au milieu de l'image, la raison est en étiquette (socle). */
.pe .pe-station .pe-ep[data-pe-ouvert="0"] :is(.pe-ep-titre, .pe-ep-meta) { opacity: .55; }
.pe-station .pe-ep[data-pe-ouvert="0"] .pe-ep-ico { display: grid; inset: 0; margin: auto; width: 52px; height: 52px; background: color-mix(in srgb, var(--pe-ecran-fond) 72%, transparent); box-shadow: inset 0 0 0 2px var(--primary-color); color: var(--primary-color); }
.pe-station .pe-ep[data-pe-ouvert="0"] .pe-ep-ico .pe-ico { width: 24px; height: 24px; }
/* Le résumé : une languette sous la carte, qui s'ouvre au survol (ou au focus clavier) ; elle ne pousse rien, le chemin ne bouge pas. */
.pe .pe-station .pe-ep { position: relative; }
.pe-station:has(.pe-ep:focus-visible) { z-index: 5; }
.pe-station .pe-ep-desc {
  display: block; position: absolute; left: -1.5px; right: -1.5px; top: calc(100% - 2px); z-index: 1; padding: 4px 16px 14px;
  border: 1.5px solid var(--border-color); border-top: 0; border-radius: 0 0 20px 20px; background: var(--pe-carte); color: var(--pe-doux-carte);
  font-size: .875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 250ms var(--ch-sortie), transform 250ms var(--ch-sortie);
}
.pe .pe-station .pe-ep[data-pe-ouvert="0"] .pe-ep-desc { border-style: dashed; background: var(--couleur-fond-content); }
.pe-station .pe-ep:focus-visible .pe-ep-desc { opacity: 1; transform: translateY(0); }
.pe .pe-station .pe-ep:focus-visible:has(.pe-ep-desc) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }.pe-station .pe-ep-titre { line-height: 1.2; }
.pe .pe-station .pe-ep[data-pe-ouvert="0"] { background: transparent; border-style: dashed; --pe-encre-ici: var(--pe-encre); --pe-doux-ici: var(--pe-doux); --pe-accent-ici: var(--pe-accent); }
.pe .pe-station .pe-saison { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border-radius: 20px; border: 1.5px dashed var(--border-color); transition: transform 200ms var(--ch-sortie); }
.pe-station .pe-saison-img { border-radius: 13px; }
.pe-station .pe-saison .pe-ep-ico { display: none; }
/* L'étape du moment, quand c'est un épisode ouvert : l'image en grand, le bouton de lecture dessus. C'est LE geste de cet écran. */
.pe .pe-station[data-ici="1"] .pe-ep, .pe-station[data-ici="1"] .pe-carte { border-color: var(--primary-color); box-shadow: 0 14px 36px var(--pe-ombre); }
.pe .pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"] { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 12px 16px; }
.pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"] .pe-ep-txt { padding: 0 6px; gap: .2rem; }
.pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"] .pe-ep-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.375rem; line-height: 1.15; }
.pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"] .pe-ep-ico { display: grid; inset: 0; margin: auto; width: 64px; height: 64px; transition: transform 200ms var(--ch-sortie); }
.pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"] .pe-ep-ico .pe-ico { width: 30px; height: 30px; }
.pe .pe-repli { width: 100%; min-height: 48px; padding: .5rem 1.1rem; border: 1.5px dashed var(--pe-contour); border-radius: 99px; background: var(--couleur-fond-content); font-weight: 700; color: var(--pe-accent-ici, var(--pe-accent)); text-align: center; transition: transform 160ms var(--ch-sortie); }
.pe[data-pe-gabarit="lancement-chemin"] .pe-bandeau { border-radius: 24px; }

/* ---------- Réponses au geste : survol (pointeur fin seulement), pression ---------- */
@media (hover: hover) and (pointer: fine) {
  .pe-station .pe-ep:hover .pe-ep-img { transform: none; }
  .pe-station .pe-saison:hover { transform: translateY(-2px); }
  /* Survol d'un épisode : la carte s'agrandit et son résumé s'ouvre dessous (12/11/2026). */
  .pe-station .pe-ep:hover { transform: scale(1.04); }
  .pe-station:has(.pe-ep:hover) { z-index: 5; }
  .pe-station .pe-ep:hover .pe-ep-desc { opacity: 1; transform: translateY(0); }
  .pe .pe-station .pe-ep:hover:has(.pe-ep-desc) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 18px 40px var(--pe-ombre); }
  .pe-station:has(.pe-ep:hover, .pe-saison:hover) .pe-borne { transform: scale(1.08); }
  .pe-station[data-ici="1"] .pe-ep[data-pe-ouvert="1"]:hover .pe-ep-ico { transform: scale(1.06); }
  .pe .pe-repli:hover { border-color: var(--pe-accent-ici, var(--pe-accent)); }
}
.pe .pe-station .pe-ep:active, .pe .pe-station .pe-saison:active { transform: scale(.98); transition-duration: 160ms; }
.pe .pe-repli:active { transform: scale(.97); }

/* ---------- Grand écran : le chemin serpente au milieu, les étapes de part et d'autre, les portes en travers ---------- */
@media (min-width: 900px) {
  .pe[data-pe-gabarit="lancement-chemin"] { --ch-amplitude: 56px; }
  .pe-chemin-page { max-width: 66rem; padding-top: 60px; }
  .pe-chemin-liste { gap: 34px; }
  .pe-station { width: 50%; padding: 0 calc(var(--ch-amplitude) + 44px) 0 0; }
  .pe-station .pe-borne, .pe-station[data-cote="c"] .pe-borne { left: auto; right: calc(var(--ch-amplitude) - 22px); }
  .pe-station:is([data-cote="g"], [data-cote="d"]) .pe-borne { top: calc(50% - 22px); }
  .pe-station[data-cote="d"] { margin-left: 50%; padding: 0 0 0 calc(var(--ch-amplitude) + 44px); }
  .pe-station[data-cote="d"] .pe-borne { right: auto; left: calc(var(--ch-amplitude) - 22px); }
  /* Côté droit en miroir (11/11/2026) : l'image passe du côté extérieur et son numéro dans le coin supérieur droit. */
  .pe .pe-station[data-cote="d"]:not([data-ici="1"]) .pe-ep, .pe .pe-station[data-cote="d"] .pe-saison { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .pe-station[data-cote="d"]:not([data-ici="1"]) .pe-ep-img, .pe-station[data-cote="d"] .pe-saison-img { order: 2; }
  .pe-station[data-cote="d"] .pe-ep-num, .pe-station[data-cote="d"] .pe-saison-num { left: auto; right: .5rem; }
  /* Les étapes de côtés opposés s'emboîtent : la courbe se resserre, la page aussi. */
  .pe-station[data-cote="g"]:not([data-ici="1"]) + .pe-station[data-cote="d"]:not([data-ici="1"]),
  .pe-station[data-cote="d"]:not([data-ici="1"]) + .pe-station[data-cote="g"]:not([data-ici="1"]) { margin-top: -30px; }
  /* Au milieu : l'arrivée, les portes, la récompense, la fin. Le chemin passe derrière, la borne est posée dessus. */
  .pe-station[data-cote="c"], .pe-station[data-genre="porte"][data-fait="0"] { width: min(100%, 34rem); margin-inline: auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pe-station[data-cote="c"] .pe-borne { position: relative; left: auto; right: auto; top: auto; }
  .pe-station[data-cote="c"] :is(.pe-jalon, .pe-palier, .pe-repli) { margin-top: 4px; }
  .pe-station[data-cote="c"] .pe-jalon { padding: 6px 18px 10px; border-radius: 14px; background: var(--couleur-fond-content); text-align: center; max-width: 30rem; }
  .pe-station[data-cote="c"] .pe-palier, .pe-station[data-cote="c"] .pe-porte { width: 100%; }
  .pe-station[data-cote="c"] .pe-porte { margin-top: -26px; padding: 44px 26px 24px; }
  .pe .pe-station[data-cote="c"] .pe-repli { width: auto; }
  /* L'étiquette passe de l'autre côté du chemin, face à sa carte, à hauteur de la borne. */
  .pe-station[data-cote="g"] .pe-ici, .pe-station[data-cote="d"] .pe-ici { position: absolute; top: calc(50% - 14px); margin: 0; }
  .pe-station[data-cote="g"] .pe-ici { left: calc(100% - var(--ch-amplitude) + 36px); }
  .pe-station[data-cote="d"] .pe-ici { right: calc(100% - var(--ch-amplitude) + 36px); transform-origin: right center; }
  .pe-station[data-cote="d"] .pe-ici::before { left: auto; right: -4px; }
  .pe-station[data-cote="c"] .pe-ici, .pe-station[data-genre="porte"][data-fait="0"] .pe-ici { position: absolute; left: calc(50% + 38px); top: 12px; margin: 0; }
  .pe-chemin-page:not([data-ch-pret]) .pe-station:not(:last-child)::before { left: auto; right: calc(var(--ch-amplitude) - 2px); }
  .pe-chemin-page:not([data-ch-pret]) .pe-station[data-cote="d"]:not(:last-child)::before { right: auto; left: calc(var(--ch-amplitude) - 2px); }
  .pe-chemin-page:not([data-ch-pret]) .pe-station[data-cote="c"]:not(:last-child)::before { right: auto; left: calc(50% - 2px); }
}
@media (min-width: 1200px) { .pe[data-pe-gabarit="lancement-chemin"] { --ch-amplitude: 72px; } }
.pe-pied { max-width: 40rem; margin: 0 auto; padding: 56px 16px 80px; }

/* ---------- Mouvement réduit : plus aucun déplacement, les états changent par un fondu (règle du socle) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pe .pe-station .pe-ep:hover, .pe .pe-station .pe-saison:hover, .pe .pe-station .pe-ep:active, .pe .pe-station .pe-saison:active,
  .pe-station:has(.pe-ep:hover, .pe-saison:hover) .pe-borne, .pe .pe-repli:active, .pe-station[data-ici="1"] .pe-ep:hover .pe-ep-ico { transform: none; }
  .pe .pe-station.pe-ch-arrivee :is(.pe-ep, .pe-saison, .pe-carte, .pe-porte, .pe-jalon), .pe .pe-station.pe-ch-arrivee :is(.pe-ep, .pe-saison, .pe-carte, .pe-porte, .pe-jalon)::after, .pe-station.pe-ch-arrivee .pe-borne::after, .pe-ch-segments.pe-ch-brille::after { animation: none; }
  .pe-station .pe-ep-desc { transform: none; }
}
@media print { .pe-ch-trace { display: none; } }