@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&family=Nunito:ital,wght@0,400..800;1,400&family=Alegreya:ital,wght@1,500&display=swap");
/* SymbioteK · lot SymbioSite, transposé de P6 « Éclipse + Canopée » (2026-10-19). Feuille unique du tunnel : elle est injectée
   dans chaque page ET dans les cadres isolés de l'en-tête et du pied (export SymbioPlay), après le Bootstrap 5.3 posé d'office.
   Polices : Google Fonts par @import (display=swap), une pile de repli réelle derrière chaque famille.
   Ordre : jetons, garde Bootstrap, base, en-tête commun (cadre), commande du mouvement (page), boutons, scène, ouverture,
   plateformes, bloc APPROCHE, bloc RACINES, échange, finale, sources, pied commun (cadre), pages juridiques, barre mobile,
   états de course, mouvement réduit. L'état par défaut est l'état immobile : seules les règles sous html.js:not(.mouvement-reduit)
   épinglent, masquent ou déplacent. Calques de la page : flux 1, barre mobile 40, volet 45, commande du mouvement 50, évitement 60. */

:root { /* CH:tokens.css (2026-10-11) + verrou site lock-palette (2026-10-07) + R04 §1.2 */
  --nuit:#060B18; --nuit-2:#0E1A33; --creme:#F8F6F1; --sable:#E8E0D0; --blanc-chaud:#FDFCFA;
  --marine:#184989;        /* titres sur crème 8,3:1 ; JAMAIS de texte sur la nuit (2,2:1) */
  --marine-clair:#8FB0E6;  /* le marine lisible sur la nuit, 8,9:1 */
  --marine-survol:#264784; /* survol sur clair (DEV_03 le nomme marine-clair : homonyme, ne pas confondre) */
  --or:#E8B338;            /* accent unique, texte sur nuit 10,2:1 ; JAMAIS de texte sur crème (1,8:1) */
  --or-clair:#F0C85C;      /* survol des boutons or */
  --or-texte:#8A6A12;      /* seul or en texte sur clair, 4,68:1 : AA, jamais pour une information essentielle */
  --sauge:#6A9E72; --sauge-claire:#E8F3EA;
  --emeraude-vif:#2A9D7E;  /* texte sur crème en 24 px et plus seulement (3,1:1) */
  --encre:#2C2C2E;         /* texte courant sur crème, 12,9:1 */
  --encre-douce:#4D5A51;   /* texte secondaire, 6,7:1 */
  /* interdits en texte sur clair : #C89A20 (2,4:1, présent dans tokens.css sous --or-fonce), #6E7E72 (3,98:1) */
  --police-titre:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --police-code:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --police-texte:"Nunito","Helvetica Neue",Arial,sans-serif;
  --police-voix:"Alegreya",Georgia,serif;
  --t-h1:clamp(34px,4.6vw,60px); --t-h2:clamp(30px,3.6vw,46px); --t-h3:clamp(25px,2.6vw,32px);
  --t-texte:17px; --t-min:13px; --t-champ:16px; --t-citation:clamp(24px,2.4vw,31px);
  --sk-ease-pose:cubic-bezier(.16,1,.3,1);   /* signature : apparitions, révélations */
  --sk-ease-ui:cubic-bezier(.23,1,.32,1);    /* interface, entrée ET sortie */
  --sk-ease-trajet:cubic-bezier(.77,0,.175,1); /* déplacement, balayage clip-path */
  --sk-ease-souffle:cubic-bezier(.37,0,.63,1); /* ambiance */
  --sk-d-rapide:200ms; --sk-d-standard:500ms; --sk-d-lente:800ms;
}
:root { /* propres à P6 */
  --entete-h:60px;
  --gout:max(16px, env(safe-area-inset-left));
  --cadre-max:1200px;
  --col-g:7vw;                                   /* marge gauche de la colonne de lecture, au bureau */
  --arbre-d:min(50vw, 27svh);                    /* diamètre du disque de l'arbre (lu par common.js via .sonde) */
  --bande:calc(var(--entete-h) + 14px + var(--arbre-d) * 1.0625);   /* bas de l'arbre au téléphone : disque, racines, radicelles */
  --ombre-carte:0 8px 10px -8px rgb(6 11 24 / .22);
  --slot:calc(var(--bande) + 12px);              /* haut de la fiche outil en course : sous l'arbre au téléphone */
  --ouv-h:130svh;                                /* hauteur de l'ouverture en course (le titre reste épinglé 30 % d'écran) */
  /* La surface or, où finit la plongée dans « La vôtre » (tour 5). Mesuré sur #E8B338 : nuit 10,2:1, marine 4,65:1 (sous 7:1 :
     jamais pour un titre sur l'or), encre douce 3,8:1 (refusée). Aucun texte or, aucun crème sur l'or. */
  --sur-or:var(--nuit);                          /* titres et texte sur l'or, 10,2:1 */
  --sur-or-doux:#332D1E;                         /* texte secondaire sur l'or (la nuit à 80 % sur l'or), 7,1:1 */
  --sur-or-trait:rgb(6 11 24 / .28);             /* filets sur l'or */
}
@media (max-width: 899px) and (max-height: 700px) {
  :root { --arbre-d:min(46vw, 18svh); }          /* écran court : l'arbre rapetisse pour que la fiche tienne entière dessous */
}
@media (max-width: 899px) and (max-height: 650px) {
  :root { --arbre-d:min(46vw, 14svh); }
}
@media (min-width: 900px) {
  :root { --arbre-d:min(38vw, calc(66svh - 40px)); --slot:calc(var(--entete-h) + 13vh); --ouv-h:125svh; }
}
@media (min-width: 900px) and (max-height: 780px) {
  :root { --slot:calc(var(--entete-h) + 4vh); }
}

/* ---------- Garde Bootstrap 5.3 (posé d'office par l'export, avant cette feuille) ----------
   Son défilement doux casserait les sauts invisibles de la plongée et la retenue de l'ouverture ; sa classe .figure passerait le
   symbole final en inline-block (centrage perdu) ; sa classe « visible » a été évitée (les états visibles s'appellent .est-visible). */
:root { scroll-behavior: auto; }
.figure { display: block; }
mark { padding: 0; background: none; color: inherit; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; overflow-x: clip; background: var(--nuit); }
body { margin: 0; background: var(--nuit); color: var(--encre); font: 400 var(--t-texte)/1.6 var(--police-texte); overflow-x: clip; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; }
html.fond-pied { background: var(--sable); }
/* Le verrou de l'ouverture (common.js) : la page reste en haut pendant la séquence de l'éclipse, 4,7 s au plus. La gouttière garde la largeur. */
html.retenu { overflow: hidden; scrollbar-gutter: stable; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--police-titre); font-weight: 600; line-height: 1.08; text-wrap: balance; color: var(--marine); }
h2 { font-size: var(--t-h2); letter-spacing: -.015em; }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.lecteur, .visuellement-masque { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.evitement { position: fixed; z-index: 60; left: 16px; top: 12px; padding: 14px 18px; background: var(--or); color: var(--nuit); font: 600 16px/1 var(--police-titre); border-radius: 8px; text-decoration: none; transform: translateY(-160%); }
.evitement:focus-visible { transform: none; }
:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 4px; }
.entete[data-etat="nuit"] :focus-visible, .ouverture :focus-visible { outline-color: var(--or); }
.cadre { width: min(100%, var(--cadre-max)); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .cadre { padding-inline: 40px; } }
.texte { max-width: 60ch; }
.prix { font-family: var(--police-titre); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--marine); }

/* Mot-symbole en texte : « Symbio » marine + suffixe. Sur le clair, le suffixe passe en surlignage or sous texte marine. */
.mot-symbole { font-family: var(--police-titre); font-weight: 600; letter-spacing: -.01em; color: var(--marine); text-decoration: none; }
.ms-k, .sfx { color: var(--marine); background: linear-gradient(transparent 58%, var(--or) 58% 92%, transparent 92%); }
.entete[data-etat="nuit"] .mot-symbole { color: var(--creme); }
.entete[data-etat="nuit"] .ms-k { color: var(--or); background: none; }

/* ---------- En-tête commun (header.html) : il vit dans un cadre isolé, en tête de page, et défile avec elle ----------
   Une bande pleine de nuit, jamais floutée : la page s'ouvre sur la nuit de l'éclipse. La marque, la navigation, « Parler de mon
   projet ». Tout ce qui pilote la page (commande du mouvement, retenue, cadence) vit dans la page, pas ici. */
.entete {
  position: relative; z-index: 1;
  height: var(--entete-h);
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--nuit); color: var(--creme); border-bottom: 1px solid rgb(248 246 241 / .1);
}
.entete-marque { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; }
.entete-nav { display: flex; align-items: center; gap: 8px; }
.entete-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 15px/1 var(--police-titre); text-decoration: none; border-radius: 8px; }
@media (max-width: 899px) { .entete-lien, .entete .bouton-petit { display: none; } }
@media (min-width: 900px) { .entete { padding-inline: clamp(24px, 4vw, 56px); } }

/* ---------- Commande du mouvement (dans la page) ----------
   « Couper l'animation » : épinglée en haut à droite, dans la bande de tête que la mise en page réserve (--entete-h) ; elle suit le
   bas de l'en-tête commun tant qu'il est à l'écran, puis reste en place. Fond de nuit pour se lire sur toutes les scènes. */
.commande-mouvement { position: sticky; top: 0; z-index: 50; height: 0; }
.commande-mouvement .bascule { position: absolute; top: calc((var(--entete-h) - 44px) / 2); right: max(16px, env(safe-area-inset-right)); background: var(--nuit); color: var(--creme); border-color: rgb(248 246 241 / .28); }
@media (min-width: 900px) { .commande-mouvement .bascule { right: clamp(24px, 4vw, 56px); } }
.commande-mouvement :focus-visible { outline-color: var(--or); }
.bascule {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font: 500 14px/1 var(--police-titre); color: inherit; background: transparent;
  border: 1px solid rgb(24 73 137 / .35); border-radius: 8px; cursor: pointer;
  transition: border-color 200ms var(--sk-ease-ui);
}
.bascule-temoin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background-color 200ms var(--sk-ease-ui); }
.bascule[aria-pressed="true"] { border-color: var(--or); }
.bascule[aria-pressed="true"] .bascule-temoin { background: var(--or); border-color: var(--or); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border-radius: 8px; border: 1px solid transparent; font: 600 16px/1.2 var(--police-titre);
  text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color 200ms var(--sk-ease-ui), color 200ms var(--sk-ease-ui), border-color 200ms var(--sk-ease-ui), transform 120ms var(--sk-ease-ui);
}
.bouton:active { transform: scale(.97); }
.bouton-plein { background: var(--or); color: var(--nuit); border-color: var(--nuit); }
.bouton-contour { background: transparent; color: var(--marine); border: 1.5px solid currentColor; }
.bouton-petit { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.bouton-grand { min-height: 56px; padding: 16px 30px; font-size: 17px; }
.entete[data-etat="nuit"] .bouton-plein, .ouverture .bouton-plein { border-color: var(--or); }
.ouverture .bouton-contour { color: var(--creme); }
.sous-bouton { font: 400 15px/1.45 var(--police-texte); color: var(--encre-douce); }
.lien-doux { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1.3 var(--police-titre); color: var(--marine); text-decoration: underline; text-decoration-color: rgb(24 73 137 / .45); }
@media (hover: hover) and (pointer: fine) {
  .bouton-plein:hover { background: var(--or-clair); }
  .bouton-contour:hover { background: rgb(24 73 137 / .07); }
  .ouverture .bouton-contour:hover { background: rgb(248 246 241 / .1); }
  .entete-lien:hover { background: rgb(24 73 137 / .07); }
  .entete[data-etat="nuit"] .entete-lien:hover { background: rgb(248 246 241 / .1); }
  .bascule:hover { border-color: currentColor; }
  .lien-doux:hover { text-decoration-thickness: 2px; }
}

/* ---------- La scène (cachée par défaut : elle n'existe qu'en course) ---------- */
.scene { display: none; }
.sonde { position: absolute; left: 0; top: 0; width: var(--arbre-d); height: 0; visibility: hidden; pointer-events: none; }
.scene-lumiere { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 400ms var(--sk-ease-pose); }
.gl-pret .scene-lumiere { opacity: 1; }
.scene.plein-jour .scene-lumiere { visibility: hidden; }
.scene-arbre { position: absolute; left: 0; top: 0; z-index: 3; display: block; transform-origin: 0 0; }
/* La plongée (tour 5) : une toile plein cadre, allouée pour la seule plongée ; l'arbre y est redessiné net à chaque image, zoomé sur « La vôtre ». */
.scene-plongee { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: none; pointer-events: none; }
/* Téléphone : la ligne fine qui fait sortir la fiche de son nœud (sous l'arbre, elle ne se voit que sur le crème) */
.fils-mobiles { display: none; }
.fil-mobile { position: absolute; left: 0; top: 0; width: 1.5px; height: 0; background: var(--marine); transform-origin: 50% 0; scale: 1 0; transition: scale 150ms var(--sk-ease-ui); }
.fil-mobile.est-visible { scale: 1 1; transition: scale 300ms var(--sk-ease-pose); }

/* Repli de la lumière (sans WebGL2, avant compilation, contexte perdu, ?gl=0). Le disque : une boîte carrée de la taille de la lune,
   posée par common.js ; 1 cqi = 1 % de son côté, le rayon de la lune vaut 50 cqi. */
.disque { position: absolute; left: 0; top: 0; z-index: 2; width: var(--arbre-d); aspect-ratio: 1; container-type: inline-size; pointer-events: none; }
.repli-couronne, .repli-anneau, .repli-perle { position: absolute; pointer-events: none; }
.repli-couronne { inset: -50%; opacity: calc((.45 + .55 * var(--couronne, .55)) * var(--couronne-o, 1));
  background: radial-gradient(circle at 50% 50%, rgb(232 179 56 / 0) 0 49.6cqi, rgb(232 179 56 / .42) 50.2cqi, rgb(232 179 56 / .2) 54cqi, rgb(232 179 56 / .07) 66cqi, rgb(232 179 56 / 0) 86cqi); }
.repli-anneau { inset: -10%; opacity: var(--fil, 0);
  background: radial-gradient(circle at 50% 50%, rgb(240 200 92 / 0) calc(50cqi - 1px), rgb(240 200 92 / .98) calc(50cqi + .8px), rgb(232 179 56 / .45) calc(50cqi + 3.5px), rgb(232 179 56 / 0) calc(50cqi + 10px));
  -webkit-mask-image: conic-gradient(from var(--anneau-a, 270deg) at 50% 50%, #000, rgb(0 0 0 / .45) 22%, rgb(0 0 0 / .35) 50%, rgb(0 0 0 / .45) 78%, #000);
  mask-image: conic-gradient(from var(--anneau-a, 270deg) at 50% 50%, #000, rgb(0 0 0 / .45) 22%, rgb(0 0 0 / .35) 50%, rgb(0 0 0 / .45) 78%, #000); }
/* Perle : sur le bord du disque, à −46° écran. */
.repli-perle { width: 24cqi; height: 24cqi; left: calc(50% + 34.73cqi - 12cqi); top: calc(50% - 35.97cqi - 12cqi); border-radius: 50%; opacity: var(--perle, 0);
  background: radial-gradient(circle, rgb(253 252 250 / .95) 0 5%, rgb(240 200 92 / .85) 11%, rgb(240 200 92 / .22) 32%, rgb(240 200 92 / 0) 70%); }
/* Crue : un disque crème de taille fixe, centré sur l'arbre, qui grandit par transform (jamais un fondu plein cadre). */
.repli-crue { position: absolute; left: 0; top: 0; z-index: 1; width: 400px; height: 400px; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  background: radial-gradient(circle closest-side, var(--creme) 0 93%, rgb(246 226 168 / .92) 96%, rgb(240 200 92 / .3) 98.5%, rgb(240 200 92 / 0) 100%); }
.scene:not(.gl-pret) .repli-crue { opacity: var(--crue-o, 0); will-change: transform; }
.gl-pret .repli-couronne, .gl-pret .repli-anneau, .gl-pret .repli-perle, .gl-pret .repli-crue { opacity: 0; transition: opacity 400ms var(--sk-ease-pose); }
.scene.plein-jour .disque, .scene:not(.posee) .disque { visibility: hidden; }
@media (max-width: 899px) { .bulles { display: none; } }

/* Bulles : le logo entier de la plateforme, à droite de son gros nœud (bureau). Posées par common.js. */
.bulles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bulle {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px;
  background: var(--blanc-chaud); border: 1px solid var(--sable); border-radius: 999px; box-shadow: var(--ombre-carte);
  font: 600 25px/1 var(--police-titre); letter-spacing: -.01em; color: var(--marine); white-space: nowrap;
  opacity: 0; visibility: hidden; scale: .96; transform-origin: 0 50%;
  transition: opacity 200ms var(--sk-ease-ui), scale 200ms var(--sk-ease-ui), visibility 0s linear 200ms;
}
.bulle::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--fil-bulle, 26px); height: 1.5px; background: var(--marine); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--sk-ease-pose); }
.bulle img { width: 46px; height: auto; }
.bulle-nom .sfx { padding-inline: 1px; }
.bulle.est-visible { opacity: 1; visibility: visible; scale: 1; transition: opacity 500ms var(--sk-ease-pose), scale 500ms var(--sk-ease-pose), visibility 0s; }
.bulle.est-visible::before { transform: scaleX(1); }
.bulle-votre { font-size: 21px; padding-left: 14px; }
.bulle-creux { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--or); flex: none; }
.indice { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--haut-page, 0px)); text-align: center; font: 400 13px/1 var(--police-code); letter-spacing: .04em; color: rgb(248 246 241 / .8); transition: opacity 400ms var(--sk-ease-ui); }
@media (max-width: 899px) { html.avec-entete .indice { display: none; } }   /* téléphone : sous l'en-tête commun, l'indice croiserait les boutons du héros */
.indice::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: rgb(248 246 241 / .4); }
.indice.parti { opacity: 0; }

/* ---------- 0 · L'ouverture (état immobile par défaut : nuit, texte, planche) ---------- */
.ouverture { position: relative; background: var(--nuit); color: var(--creme); }
.heros { position: relative; display: grid; align-content: center; gap: 28px; padding: calc(var(--entete-h) + 40px) var(--gout) 64px; min-height: 92svh; }
.heros-texte { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 37rem; }
.heros-texte h1 { font-size: var(--t-h1); letter-spacing: -.02em; color: var(--creme); }
.h1-ombre { font-weight: 400; color: rgb(248 246 241 / .86); transition: color 600ms var(--sk-ease-pose); }

.insecable { white-space: nowrap; }
.chapeau { font-size: 18px; line-height: 1.6; color: rgb(248 246 241 / .9); max-width: 32em; }
.portes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; }
.porte-rdv { display: flex; flex-direction: column; gap: 8px; }
.ouverture .sous-bouton { color: rgb(248 246 241 / .82); }
.micro { font: 500 14px/1.4 var(--police-titre); color: var(--marine-clair); }
/* Le mot-clé : allumé en or par la perle. Sur la nuit, l'or est lisible (10,2:1). */
.mot-cle { position: relative; white-space: nowrap; color: var(--or); transition: color 500ms var(--sk-ease-pose); }
.mot-trace { position: absolute; left: 0; right: 0; bottom: -.06em; height: 3px; border-radius: 2px; background: var(--or); transform-origin: 0 50%; }
.planche { display: none; }
@media (min-width: 900px) {
  .heros { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; padding: calc(var(--entete-h) + 48px) var(--col-g) 72px; min-height: 100svh; }
  .heros-texte h1 { font-size: clamp(34px, min(4.4vw, 7svh), 58px); }
  /* l'ombre tient sur une ligne, en retrait : le titre pèse moins lourd que l'éclipse */
  .heros-texte .h1-ombre { display: block; margin-bottom: .3em; font-size: clamp(19px, min(2.46vw, 3.9svh), 32px); line-height: 1.2; letter-spacing: -.005em; }
  .heros-texte h1 br { display: none; }
}

/* ---------- 1 à 6 · Les plateformes (état immobile par défaut) ---------- */
.plateformes { background: var(--creme); padding: 16px 12px; }
.bloc { position: relative; padding: 72px calc(var(--gout) - 12px); }   /* la section porte déjà 12 px de marge intérieure */
.carte-flux { position: relative; }
.intro h2 { max-width: 17ch; }
/* Les deux familles (tour 6) : deux encarts côte à côte, au téléphone l'un sous l'autre ; la pastille de catégorie des fiches,
   la phrase, puis les deux noms composés (Symbio marine, suffixe surligné or). Même matière que les fiches : blanc chaud, filet sable. */
.intro-duo { display: grid; gap: 12px; margin-top: 24px; max-width: 560px; }
.intro-encart { padding: 16px 18px 18px; background: var(--blanc-chaud); border: 1px solid var(--sable); border-radius: 14px; box-shadow: var(--ombre-carte); }
.intro-phrase { margin-top: 8px; font: 500 18px/1.35 var(--police-titre); color: var(--encre); }
.intro-noms { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; }
.intro-nom { font: 600 22px/1.25 var(--police-titre); letter-spacing: -.01em; color: var(--marine); white-space: nowrap; }
.intro-nom .sfx { padding-inline: 1px; }
/* Tour 7 : sous chaque encart, son prix d'entrée (Sébastien, 2026-10-19). Même matière que l'encart de la fiche SymbioMail : crème,
   filet sable ; le montant en Plex tabulaire, marine sur un surlignage or (jamais d'or en texte sur le crème). En course, il sort de
   sous son encart (common.js : .vu). */
.intro-col { display: contents; }   /* encart et prix sont des cases de la grille : les deux encarts, puis les deux prix, à même hauteur */
.intro-encart { position: relative; z-index: 1; }
.intro-prix { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 7px; padding: 9px 16px 10px; background: var(--creme); border: 1px solid var(--sable); border-radius: 12px; font: 500 15px/1.35 var(--police-titre); color: var(--encre); }
.ip-montant { font-size: 21px; line-height: 1.15; padding-inline: 2px; background: linear-gradient(transparent 58%, var(--or) 58% 92%, transparent 92%) no-repeat 0 0 / 100% 100%; }
.ip-unite { white-space: nowrap; }
@media (max-width: 559px) {
  /* téléphone : deux encarts serrés, pour que le tronc et ses racines restent au-dessus du titre (l'arbre se rapproche au-dessus de la fiche) */
  .intro-duo { gap: 8px; margin-top: 16px; }
  .intro-encart { padding: 11px 14px 12px; border-radius: 12px; }
  .intro-duo { row-gap: 5px; }
  .intro-encart[data-intro="3"] { margin-top: 5px; }
  .intro-prix { padding: 5px 14px 6px; border-radius: 10px; font-size: 14px; }
  .ip-montant { font-size: 18px; }
  .intro .fiche-categorie { font-size: 14px; }
  .intro-phrase { margin-top: 3px; font-size: 16px; }
  .intro-noms { column-gap: 14px; }
  .intro-nom { font-size: 19px; }
}
@media (max-width: 559px) and (max-height: 700px) {
  /* écran court : les deux encarts côte à côte, les noms l'un sous l'autre (le tronc doit finir au-dessus du titre) */
  .intro h2 { font-size: 27px; }
  .intro-duo { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 8px; margin-top: 12px; }
  .intro-encart[data-intro="3"] { margin-top: 0; }
  .intro-encart { padding: 10px 11px 11px; }
  .intro .fiche-categorie { gap: 7px; font-size: 13px; align-items: baseline; }
  .intro .fiche-categorie::before { width: 8px; height: 8px; translate: 0 -1px; }
  .intro-phrase { font-size: 15px; line-height: 1.3; }
  .intro-noms { flex-direction: column; }
  .intro-nom { font-size: 17px; }
  .intro-prix { padding: 5px 10px 6px; column-gap: 5px; font-size: 13px; line-height: 1.3; }
  .ip-montant { font-size: 16px; }
}
@media (min-width: 560px) {
  .intro-duo { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 8px 16px; }
  .ip-de { flex-basis: 100%; font-size: 14px; color: var(--encre-douce); }   /* « À partir de » au-dessus du montant : deux prix de même forme */
  .intro-encart { display: flex; flex-direction: column; flex: 1; }
  .intro-noms { margin-top: auto; flex-direction: column; padding-top: 12px; border-top: 1px solid var(--sable); }
  .intro-phrase { margin-bottom: 12px; }
}
@media (min-width: 900px) {
  .bloc { padding: 96px calc(var(--col-g) - 12px); }
  .plateforme, .a-venir { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 6vw; align-items: center; }
  .plateforme .carte-flux, .a-venir .carte-flux { grid-column: 1; grid-row: 1; }
  .plateforme .planche, .a-venir .planche { grid-column: 2; grid-row: 1; }
}

/* La fiche outil : une pièce de collection, sobre. */
.fiche { max-width: 520px; padding: 30px 32px 28px; background: var(--blanc-chaud); border: 1px solid var(--sable); border-radius: 18px; box-shadow: var(--ombre-carte); }
.fiche-categorie { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--police-titre); color: var(--encre-douce); }
.fiche-categorie::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.categorie-quotidien::before { background: var(--sauge); }
.categorie-activite::before { background: var(--or); box-shadow: 0 0 0 1.5px var(--marine); }
.fiche-nom { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: clamp(34px, 3.2vw, 44px); letter-spacing: -.02em; }
.fiche-nom .sfx { padding-inline: 1px; }
.fiche-symbole { width: 52px; height: auto; flex: none; }
.fiche-slogan { margin-top: 10px; font: 500 19px/1.4 var(--police-titre); color: var(--marine); }
/* SymbioMail : le petit encart sobre (slogan validé, prix d'entrée) */
.fiche-encart { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--sable); border-radius: 10px; background: var(--creme); }
.encart-slogan { font: 500 19px/1.35 var(--police-titre); color: var(--marine); }
.encart-prix { font-size: 16px; line-height: 1.4; color: var(--encre); }
.categorie-venir::before { background: transparent; box-shadow: inset 0 0 0 2.5px var(--or), 0 0 0 1px var(--marine); }
.fiche-venir .fiche-nom { font-size: clamp(28px, 2.6vw, 34px); line-height: 1.12; }
.fiche-venir .fiche-slogan { margin-top: 14px; font-size: 20px; }
.fiche-venir .fiche-action { margin-top: 24px; }
.fiche-lignes { margin-top: 22px; border-top: 1px solid var(--sable); }
.fiche-lignes > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sable); }
.fiche-lignes dt { font: 500 15px/1.5 var(--police-titre); color: var(--encre-douce); padding-top: 1px; }
.fiche-lignes dd { font-size: 16.5px; line-height: 1.55; color: var(--encre); }
.fiche-preuve { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--encre); }
.fiche-preuve::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 1.5px var(--marine); vertical-align: 1px; }
.fiche-action { margin-top: 18px; }
@media (max-width: 599px) {
  .fiche { padding: 22px 20px 20px; border-radius: 16px; }
  .fiche-nom { margin-top: 10px; font-size: 32px; gap: 12px; }
  .fiche-symbole { width: 42px; }
  .fiche-slogan { font-size: 17px; margin-top: 6px; }
  .fiche-encart { margin-top: 10px; padding: 10px 12px; }
  .encart-slogan { font-size: 17px; }
  .encart-prix { font-size: 15px; }
  .fiche-lignes { margin-top: 14px; }
  .fiche-lignes > div { grid-template-columns: minmax(0, 1fr); padding: 9px 0; }
  .fiche-lignes dt { font-size: 14px; }
  .fiche-lignes dd { font-size: 16px; line-height: 1.5; }
  .fiche-preuve { margin-top: 12px; font-size: 15px; }
  .fiche-action { margin-top: 12px; }
}

/* ===================== APPROCHE : début =====================
   Bloc remplaçable d'un seul tenant (README, « Le bloc APPROCHE »). Toutes les règles de la section #approche sont ici, et seulement ici,
   y compris son état de course. Il s'appuie sur : --or (le fond, exactement celui où finit la plongée), --sur-or, --sur-or-doux,
   --sur-or-trait, --nuit, --nuit-2, --blanc-chaud, les polices et courbes de :root, et les classes communes .cadre et .texte.
   7 · Notre approche, « La journée allégée » (variante A2 ; tour 6 : les quatre charges portent les textes de A1). Mesuré sur l'or : texte nuit 10,2:1 ; secondaire 7,1:1 ; aucun texte or,
   crème ni marine sur l'or. L'état par défaut est l'état final (sans script, mouvement réduit) : la ligne dénouée, l'horloge pleine.
   En course, le module « journee » de common.js pose .jour-js sur la section (états d'attente), puis .jour-entree, .entree, .denoue. */
.approche { background: var(--or); color: var(--sur-or); padding: 112px 16px 96px; }   /* haut : l'en-tête (60 px) puis 52 px d'air */
.approche :focus-visible { outline-color: var(--sur-or); }
.approche h2, .approche h3 { color: var(--sur-or); }
.jour-grille, .jour-duo { display: grid; gap: 48px; }
.jour-surtitre { font: 600 15px/1.3 var(--police-titre); letter-spacing: .01em; color: var(--sur-or-doux); }
.jour-titre { margin-top: 12px; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.02em; }
.jour-titre .mot { display: inline-block; }
.jour-lede { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--sur-or); }

/* L'horloge : un cadran nuit posé sur l'or (le disque de l'ouverture, en petit). La journée en anneau fin, de 8 h à 19 h ;
   quatre marques aux heures des nœuds ; à chaque nœud défait, un arc or y rend le temps. Aucun chiffre sur le cadran. */
.horloge { display: flex; align-items: center; gap: 16px; }
.horloge-svg { flex: none; display: block; width: 132px; height: 132px; overflow: visible; }
.horloge figcaption { font: 500 15px/1.35 var(--police-titre); color: var(--sur-or-doux); max-width: 14ch; }
.h-cadran { fill: var(--nuit); }
.h-graduation { fill: none; stroke: var(--blanc-chaud); stroke-width: 1.6; stroke-linecap: round; opacity: .42; }
.h-journee { fill: none; stroke: var(--blanc-chaud); stroke-width: 1.4; opacity: .64; }
.h-rendu { fill: none; stroke: var(--or); stroke-width: 7; stroke-linecap: round; opacity: 0; }
/* Tour 7, le temps fort de 19 h : les quatre arcs rendus glissent le long du cadran et se rassemblent entre 19 h et 8 h, en un seul
   bloc d'or qui referme le cercle de la journée ; le cadran s'éclaire (lueur or, anneau de la journée plus clair). L'état par défaut
   est l'état final (sans script, mouvement réduit) : le bloc, la lueur. En course, common.js pose ces valeurs image par image. */
.h-lueur { pointer-events: none; }
.h-bloc { fill: none; stroke: var(--or); stroke-width: 10; stroke-linecap: round; }
.h-marque { fill: var(--nuit); stroke: var(--blanc-chaud); stroke-width: 1.6; opacity: 0; }
.h-aiguille { fill: none; stroke: var(--blanc-chaud); stroke-width: 3.5; stroke-linecap: round; }
.h-axe { fill: var(--or); stroke: var(--nuit); stroke-width: 2; }
.horloge-tete { display: none; }
.horloge-fin { margin-top: 22px; }

/* La journée : heures | fil | texte. Sans script, le fil est tracé en CSS segment par segment (un par étape, bout à bout),
   avec une perle à chaque nœud défait et un point plein à chaque borne ; le script le remplace par le dessin (.fil-pret). */
.jour { position: relative; --heure-l: 46px; --fil-l: 40px; }
.jour-fil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jour-fil .fil { fill: none; stroke: var(--sur-or); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.jour-fil .perle { fill: var(--or); stroke: var(--sur-or); stroke-width: 2.2; }
.jour-fil .borne { fill: var(--sur-or); }
.jour-fil .borne.allumee { fill: var(--or); stroke: var(--sur-or); stroke-width: 2.2; }   /* 19 h : le bout de la journée s'allume (tour 7) */
.etape { position: relative; display: grid; grid-template-columns: var(--heure-l) var(--fil-l) minmax(0, 1fr); padding-bottom: 60px; }
.etape:last-child { padding-bottom: 0; }
.etape::before { content: ""; position: absolute; left: calc(var(--heure-l) + var(--fil-l) / 2 - 1.25px); top: 0; bottom: 0; width: 2.5px; background: var(--sur-or); }
.etape:first-child::before { top: 12px; }
.etape:last-child::before { bottom: auto; height: 12px; }
.etape::after { content: ""; position: absolute; left: calc(var(--heure-l) + var(--fil-l) / 2 - 6px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--or); box-shadow: inset 0 0 0 2.2px var(--sur-or); }
.etape-borne::after { background: var(--sur-or); }
.jour.fil-pret .etape::before, .jour.fil-pret .etape::after { display: none; }
.heure { grid-column: 1; align-self: start; font: 600 15px/24px var(--police-titre); font-variant-numeric: tabular-nums; color: var(--sur-or-doux); text-align: right; white-space: nowrap; }
.etape-corps { grid-column: 3; min-width: 0; }
.borne-texte { font: 500 17px/24px var(--police-titre); color: var(--sur-or); }
/* la phrase du temps fort : le point d'orgue de la section, soulignée comme les charges défaites */
.rendu-phrase { position: relative; display: block; width: fit-content; margin-top: 12px; font: 600 clamp(25px, 2.5vw, 32px)/1.16 var(--police-titre); letter-spacing: -.012em; color: var(--sur-or); text-wrap: balance; }
.rendu-phrase::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: var(--sur-or); transform-origin: 0 50%; }
.jour-annonce { margin-bottom: 32px; font: 500 19px/1.4 var(--police-titre); color: var(--sur-or); max-width: 30ch; text-wrap: balance; }
.etape .noeud-nom { position: relative; display: inline-block; font: 600 clamp(21px, 2vw, 26px)/1.2 var(--police-titre); letter-spacing: -.005em; color: var(--sur-or); }
.noeud-nom::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 1px; background: var(--sur-or); transform-origin: 0 50%; transition: transform 700ms var(--sk-ease-pose) 120ms; }
.etape-corps > p:not(.noeud-nom):not(.borne-texte) { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--sur-or); max-width: 34rem; }

/* La sortie : la symbiose, l'autonomie, la question, le bouton (les preuves, 61 points et 10 ans, vivent désormais dans « Les racines »). Le bouton passe à la nuit sur l'or (texte clair sur nuit, 18:1). */
.jour-fin { display: grid; gap: 22px; padding-top: 36px; border-top: 1px solid var(--sur-or-trait); }
.jour-symbiose { font: 500 clamp(23px, 2.4vw, 30px)/1.3 var(--police-titre); letter-spacing: -.01em; color: var(--sur-or); max-width: 22ch; text-wrap: balance; }
.jour-fin-corps { display: grid; gap: 18px; }
.jour-fin-corps .texte { font-size: 17px; line-height: 1.6; color: var(--sur-or); }
.jour-appel { margin-top: 6px; font: 600 19px/1.4 var(--police-titre); color: var(--sur-or); }
.approche .bouton-plein { background: var(--nuit); color: var(--blanc-chaud); border-color: var(--nuit); }
@media (hover: hover) and (pointer: fine) {
  .approche .bouton-plein:hover { background: var(--nuit-2); }
}

@media (max-width: 374px) {
  .jour { --heure-l: 42px; --fil-l: 36px; }
  .horloge-svg { width: 104px; height: 104px; }
}
@media (min-width: 900px) {
  /* au bureau : la tête (titre, chapeau, horloge) reste sous les yeux pendant que la journée défile à droite */
  .approche { padding-bottom: 112px; }
  .jour-grille { row-gap: 104px; }
  .jour-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); }   /* la tête colle jusqu'à 19 h, pas au-delà */
  .jour-tete { position: sticky; top: 112px; align-self: start; }
  .jour { --heure-l: 58px; --fil-l: 76px; padding-top: 8px; }
  .etape { padding-bottom: 76px; }
  .etape .noeud-nom { margin-top: -4px; }   /* le milieu de la première ligne sur l'heure et le nœud */
  .horloge-tete { display: flex; margin-top: 40px; }
  .horloge-tete .horloge-svg { width: 156px; height: 156px; }
  .horloge-fin { display: none; }
  .jour-fin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); padding-top: 48px; }
  .jour-fin-corps { padding-left: calc(58px + 76px); }
}

/* En course (script, mouvement normal) : les états d'attente. Le motif d'entrée unique de la charte : montée de 18 à 22 px et fondu,
   un flou léger pour les mots du titre (cascade de 60 ms, 240 ms en tout). Les sorties ne se jouent jamais à l'écran. */
html:not(.mouvement-reduit) .jour-js .jour-surtitre, html:not(.mouvement-reduit) .jour-js .jour-lede, html:not(.mouvement-reduit) .jour-js .jour-annonce, html:not(.mouvement-reduit) .jour-js .horloge-tete, html:not(.mouvement-reduit) .jour-js .etape .heure, html:not(.mouvement-reduit) .jour-js .etape-corps, html:not(.mouvement-reduit) .jour-js .jour-fin > * {
  transition: opacity 520ms var(--sk-ease-pose), translate 640ms var(--sk-ease-pose);
}
html:not(.mouvement-reduit) .jour-js:not(.jour-entree) .jour-surtitre, html:not(.mouvement-reduit) .jour-js:not(.jour-entree) .jour-lede, html:not(.mouvement-reduit) .jour-js:not(.jour-entree) .horloge-tete,
html:not(.mouvement-reduit) .jour-js .etape:not(.entree) .heure, html:not(.mouvement-reduit) .jour-js .etape:not(.entree) .etape-corps { opacity: 0; translate: 0 20px; }
html:not(.mouvement-reduit) .jour-js .mot { transition: opacity 560ms var(--sk-ease-pose), translate 640ms var(--sk-ease-pose), filter 560ms var(--sk-ease-pose); }
html:not(.mouvement-reduit) .jour-js:not(.jour-entree) .mot { opacity: 0; translate: 0 22px; filter: blur(3px); }
html:not(.mouvement-reduit) .jour-js .mot:nth-child(1) { transition-delay: 80ms; }
html:not(.mouvement-reduit) .jour-js .mot:nth-child(2) { transition-delay: 140ms; }
html:not(.mouvement-reduit) .jour-js .mot:nth-child(3) { transition-delay: 200ms; }
html:not(.mouvement-reduit) .jour-js .mot:nth-child(4) { transition-delay: 260ms; }
html:not(.mouvement-reduit) .jour-js .mot:nth-child(5) { transition-delay: 320ms; }
html:not(.mouvement-reduit) .jour-js .jour-lede { transition-delay: 300ms; }
html:not(.mouvement-reduit) .jour-js .horloge-tete { transition-delay: 460ms; }
html:not(.mouvement-reduit) .jour-js .etape .etape-corps { transition-delay: 90ms; }
/* le nom du nœud se lit en retrait tant que le nœud tient ; il passe à la nuit, souligné, quand le nœud se défait */
html:not(.mouvement-reduit) .jour-js .etape:not(.denoue) .noeud-nom { color: var(--sur-or-doux); }
html:not(.mouvement-reduit) .jour-js .etape:not(.denoue) .noeud-nom::after { transform: scaleX(0); }
html:not(.mouvement-reduit) .jour-js .noeud-nom { transition: color 500ms var(--sk-ease-pose); }
/* tour 7 : l'annonce entre seule (cadence), et la phrase de 19 h attend la fin du rassemblement (.fort) */
html:not(.mouvement-reduit) .jour-js .jour-annonce:not(.vu) { opacity: 0; translate: 0 20px; }
html:not(.mouvement-reduit) .jour-js .jour-fin > :not(.vu) { opacity: 0; translate: 0 20px; }
html:not(.mouvement-reduit) .jour-js .rendu-phrase { transition: opacity 640ms var(--sk-ease-pose), translate 760ms var(--sk-ease-pose), filter 640ms var(--sk-ease-pose); }
html:not(.mouvement-reduit) .jour-js .rendu-phrase::after { transition: transform 900ms var(--sk-ease-pose) 420ms; }
html:not(.mouvement-reduit) .jour-js .etape:not(.fort) .rendu-phrase { opacity: 0; translate: 0 18px; filter: blur(3px); }
html:not(.mouvement-reduit) .jour-js .etape:not(.fort) .rendu-phrase::after { transform: scaleX(0); }
@keyframes h-souffle { 50% { opacity: .62; } }
html:not(.mouvement-reduit) .jour-js .horloge.apaise .h-lueur { animation: h-souffle 6.8s var(--sk-ease-souffle) infinite; }
/* ===================== APPROCHE : fin ===================== */

/* ===================== RACINES : début =====================
   Tour 6 : « Les racines », entre l'or de l'approche et la crème de l'échange. Sous la surface, ce qui tient.
   Fond : la terre, de la nuit 2 (sous la surface) à la nuit. Mesuré : crème 16:1 et plus, or 9,0:1, marine clair 7,8:1 au plus bas
   (sur la nuit 2) ; aucun marine en texte. Les racines : forme marine (la pousse), puis or (la lumière), chacune révélée par son
   masque (un trait large qui se déroule du collet vers la pointe). L'état par défaut est l'état final : sans script ou en mouvement
   réduit, la terre est découverte, les racines allumées, les P posés. En course, le module « racines » pose .racines-js, puis
   .surface (l'or se retire, le tronc descend), .pousse (les racines, une à une), .vue (l'ambiance tourne) et .vu (textes). */
.racines { position: relative; overflow-x: clip; padding: 0 16px 96px; background: linear-gradient(var(--nuit-2), var(--nuit) 78%); color: var(--blanc-chaud); }
.racines :focus-visible { outline-color: var(--or); }
.racines-voile { position: absolute; z-index: 2; inset: -2px 0 0; background: var(--or); clip-path: inset(0 0 100% 0); pointer-events: none; }
.racines-grille { display: grid; }
.racines-tronc { display: none; }
.racines-surtitre { font: 600 15px/1.3 var(--police-titre); letter-spacing: .01em; color: var(--marine-clair); }
.racines-titre { margin-top: 12px; font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.02em; color: var(--blanc-chaud); }
.racines-titre .mot { display: inline-block; }
.racines-chapeau { margin-top: 18px; font-size: 19px; line-height: 1.6; color: #C9D5EA; }
.racines-figure { position: relative; order: -1; margin: 0 -36px 28px; padding-bottom: 30px; }
.racines-svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-sombres { fill: var(--marine); }
.r-ors { fill: var(--or); }
.rm { fill: none; stroke: #fff; stroke-width: 64; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
#rm-pt .rm, #rm-lt .rm { stroke-width: 120; }
.r-radicelle { fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1; opacity: .62; }
.r-fil { fill: none; stroke: var(--marine-clair); stroke-width: 1.5; stroke-dasharray: 1 1; }
[data-racine="1"] .r-fil, [data-racine="2"] .r-fil { display: none; }   /* au téléphone, les P des racines du milieu sont posés sous leur pointe */
.r-seve { fill: none; stroke: #F7DC95; stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 1.3; stroke-dashoffset: .1; opacity: 0; }
.racines-etiquettes { position: absolute; inset: 0 0 auto; aspect-ratio: 1200 / 560; margin: 0; pointer-events: none; }
/* téléphone : les P des racines du milieu juste sous leur pointe ; ceux des racines extérieures au bout de leur fil, sous le dessin */
.racine-etiquette { position: absolute; top: calc(100% + 5px); font: 600 14px/1.2 var(--police-titre); letter-spacing: .01em; color: var(--or); white-space: nowrap; }
.racine-etiquette[data-etiquette="0"] { left: 12.5%; translate: -50% 0; }
.racine-etiquette[data-etiquette="1"] { left: 37.5%; top: 91.5%; translate: -50% 0; }
.racine-etiquette[data-etiquette="2"] { left: 62.5%; top: 91.5%; translate: -50% 0; }
.racine-etiquette[data-etiquette="3"] { right: 16px; }
.racines-liste { display: grid; gap: 22px; margin-top: 36px; }
.racine-p { position: relative; padding-left: 24px; }
.racine-p::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--or); }
.racine-p h3 { font-size: 22px; line-height: 1.2; color: var(--or); }
.racine-p p { margin-top: 6px; font-size: 17px; line-height: 1.55; color: var(--blanc-chaud); max-width: 34ch; }
.racine-p .surligne { font-weight: 700; }
/* Sébastien, 2026-10-19 (tour 10) : l'initiale P des quatre concepts soulignée d'or, et « les 4 P. » en grand sous la phrase de sortie.
   En course, les quatre soulignés se tracent au moment où « les 4 P. » apparaît (le mot déclenche l'image). */
.p-initiale { position: relative; }
.p-initiale::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .11em; border-radius: .05em; background: var(--or); transform-origin: 0 50%; }
.racines-4p { display: block; margin-top: 12px; font: 600 clamp(48px, 6.4vw, 92px)/1 var(--police-titre); letter-spacing: -.025em; color: var(--or); }   /* Sébastien, 2026-10-19 : les quatre preuves en gras, en plus du surlignage */
/* tour 7 : les mots porteurs des P, surlignés d'or sous un texte nuit (nuit sur or 10,2:1 ; le surlignage couvre toute la hauteur du
   texte, jamais de nuit sur la terre). */
.surligne { padding: 1px .2em; margin-inline: -.06em; border-radius: 3px; color: var(--nuit); background: linear-gradient(var(--or), var(--or)) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.racines-pousse { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgb(143 176 230 / .28); font: 500 clamp(21px, 2vw, 26px)/1.35 var(--police-titre); letter-spacing: -.005em; color: var(--blanc-chaud); max-width: 30ch; text-wrap: balance; }
@media (min-width: 900px) {
  /* au bureau : le tronc descend de la surface le long du titre, puis les quatre racines ; chaque P sous la pointe de sa racine,
     relié par un fil (colonnes centrées à 12,5, 37,5, 62,5 et 87,5 % : les pointes du dessin) */
  .racines { padding-bottom: 104px; }
  .racines-tronc { display: block; position: relative; grid-area: 1 / 1; justify-self: center; width: 3.5%; margin-bottom: -2px; }
  .rt-sombre, .rt-or { position: absolute; inset: 0; transform-origin: 50% 0; }
  .rt-sombre { background: var(--marine); }
  .rt-or { background: var(--or); }
  .racines-tete { grid-area: 1 / 1; justify-self: start; max-width: calc(47.5% - 56px); padding: 104px 0 64px; }
  .racines-figure { order: 0; margin: 0; padding: 0; }
  .racines-etiquettes { display: none; }
  [data-racine] .r-fil { display: inline; }
  .racines-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 0; }
  .racine-p { padding: 18px 16px 0; text-align: center; }
  .racine-p::before { left: 50%; top: 0; translate: -50% -50%; width: 11px; height: 11px; }
  .racine-p h3 { font-size: clamp(24px, 2.1vw, 30px); }
  .racine-p p { margin-inline: auto; font-size: 16.5px; max-width: 26ch; }
  .racines-pousse { justify-self: center; margin-top: 64px; padding-top: 30px; text-align: center; }
}

/* En course (script, mouvement normal) : les états d'attente. Primaire : la terre se découvre, le tronc descend (.pousse), puis
   chaque racine pousse (courbe de croissance) et s'allume (courbe signature), du collet vers la pointe : tour 7, chaque racine a sa
   classe (.r0 à .r3), posée par la cadence au moins 520 ms après la précédente. Secondaire : les radicelles, le fil, le P qui
   atterrit quand la lumière touche la pointe (950 ms), puis son surlignage or. Ambiance : la lueur du collet respire, une goutte de
   sève parcourt chaque racine. --k règle toute la file : 1 au premier passage, 0,35 en rattrapage, 0 quand la scène est posée d'un coup. */
html.js:not(.mouvement-reduit) .racines-js .racines-voile { transition: clip-path calc(1000ms * var(--k, 1)) var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .racines-js:not(.surface) .racines-voile { clip-path: inset(0); }
html.js:not(.mouvement-reduit) .racines-js .rt-sombre { transition: scale calc(760ms * var(--k, 1)) cubic-bezier(.33,1,.68,1) calc(280ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .rt-or { transition: scale calc(760ms * var(--k, 1)) var(--sk-ease-pose) calc(620ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js:not(.surface) .rt-sombre, html.js:not(.mouvement-reduit) .racines-js:not(.surface) .rt-or { scale: 1 0; }
html.js:not(.mouvement-reduit) .racines-js .rm-p { transition: stroke-dashoffset calc(1000ms * var(--k, 1)) cubic-bezier(.33,1,.68,1) calc(var(--rd, 0ms) * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .rm-l { transition: stroke-dashoffset calc(1000ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .p-initiale::after { transition: scale calc(520ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--pi, 0) * 110ms * var(--k, 1) + 260ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js:not(.p-soulignes) .p-initiale::after { scale: 0 1; }
html.js:not(.mouvement-reduit) .racines-js .racines-4p { transition: opacity calc(520ms * var(--k, 1)) var(--sk-ease-pose) calc(140ms * var(--k, 1)), translate calc(640ms * var(--k, 1)) var(--sk-ease-pose) calc(140ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .racines-pousse:not(.vu) .racines-4p { opacity: 0; translate: 0 14px; }
[data-racine-p="1"] .p-initiale, [data-etiquette="1"] .p-initiale { --pi: 1; } [data-racine-p="2"] .p-initiale, [data-etiquette="2"] .p-initiale { --pi: 2; } [data-racine-p="3"] .p-initiale, [data-etiquette="3"] .p-initiale { --pi: 3; }
html.js:not(.mouvement-reduit) .racines-js .r-radicelle { transition: stroke-dashoffset calc(640ms * var(--k, 1)) var(--sk-ease-pose) calc((var(--rd, 0ms) + var(--rd2, 0ms)) * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .r-fil { transition: stroke-dashoffset calc(360ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .r-lueur { transition: opacity calc(900ms * var(--k, 1)) var(--sk-ease-pose) calc(500ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js:not(.pousse) .r-lueur { opacity: 0; }
html.js:not(.mouvement-reduit) .racines-js:not(.pousse) #rm-pt .rm, html.js:not(.mouvement-reduit) .racines-js:not(.pousse) #rm-lt .rm,
html.js:not(.mouvement-reduit) .racines-js:not(.r0) :is(#rm-p0, #rm-l0) .rm, html.js:not(.mouvement-reduit) .racines-js:not(.r0) [data-racine="0"] :is(.r-radicelle, .r-fil),
html.js:not(.mouvement-reduit) .racines-js:not(.r1) :is(#rm-p1, #rm-l1) .rm, html.js:not(.mouvement-reduit) .racines-js:not(.r1) [data-racine="1"] :is(.r-radicelle, .r-fil),
html.js:not(.mouvement-reduit) .racines-js:not(.r2) :is(#rm-p2, #rm-l2) .rm, html.js:not(.mouvement-reduit) .racines-js:not(.r2) [data-racine="2"] :is(.r-radicelle, .r-fil),
html.js:not(.mouvement-reduit) .racines-js:not(.r3) :is(#rm-p3, #rm-l3) .rm, html.js:not(.mouvement-reduit) .racines-js:not(.r3) [data-racine="3"] :is(.r-radicelle, .r-fil) { stroke-dashoffset: 1; }
.racines-js.vite { --k: .35; }   /* lecteur déjà passé : la même file, trois fois plus serrée */
.racines-js.posee { --k: 0; }    /* arrivée par le bas ou par un saut : l'état final, posé d'un coup sous un fondu (common.js) */
/* la file d'une racine, depuis sa classe : la pousse, la lumière 320 ms après, radicelles, fil, puis le P à 950 ms */
#rm-lt { --rd: 220ms; }
#rm-l0, #rm-l1, #rm-l2, #rm-l3 { --rd: 320ms; }
.racines .r-radicelle { --rd: 700ms; } .racines .r-fil { --rd: 850ms; }
.r-radicelle + .r-radicelle { --rd2: 140ms; }
.racine-etiquette, .racine-p { --rd: 950ms; }
html.js:not(.mouvement-reduit) .racines-js .racine-etiquette, html.js:not(.mouvement-reduit) .racines-js .racine-p, html.js:not(.mouvement-reduit) .racines-js [data-racines-entree], html.js:not(.mouvement-reduit) .racines-js .racines-titre .mot {
  transition: opacity calc(560ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)), translate calc(640ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)), filter calc(560ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1));
}
html.js:not(.mouvement-reduit) .racines-js:not(.r0) :is(.racine-etiquette[data-etiquette="0"], .racine-p[data-racine-p="0"]),
html.js:not(.mouvement-reduit) .racines-js:not(.r1) :is(.racine-etiquette[data-etiquette="1"], .racine-p[data-racine-p="1"]),
html.js:not(.mouvement-reduit) .racines-js:not(.r2) :is(.racine-etiquette[data-etiquette="2"], .racine-p[data-racine-p="2"]),
html.js:not(.mouvement-reduit) .racines-js:not(.r3) :is(.racine-etiquette[data-etiquette="3"], .racine-p[data-racine-p="3"]) { opacity: 0; translate: 0 18px; }
html.js:not(.mouvement-reduit) .racines-js:not(.r0) .racine-etiquette[data-etiquette="0"], html.js:not(.mouvement-reduit) .racines-js:not(.r1) .racine-etiquette[data-etiquette="1"],
html.js:not(.mouvement-reduit) .racines-js:not(.r2) .racine-etiquette[data-etiquette="2"] { translate: -50% 12px; }
/* le surlignage or du P (sous texte nuit, 10,2:1) se trace après l'atterrissage ; avant, le texte reste blanc chaud sur la terre */
html.js:not(.mouvement-reduit) .racines-js .surligne { transition: background-size calc(560ms * var(--k, 1)) var(--sk-ease-pose) calc(1300ms * var(--k, 1)), color calc(260ms * var(--k, 1)) var(--sk-ease-ui) calc(1400ms * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js:not(.r0) [data-racine-p="0"] .surligne, html.js:not(.mouvement-reduit) .racines-js:not(.r1) [data-racine-p="1"] .surligne,
html.js:not(.mouvement-reduit) .racines-js:not(.r2) [data-racine-p="2"] .surligne, html.js:not(.mouvement-reduit) .racines-js:not(.r3) [data-racine-p="3"] .surligne { background-size: 0% 100%; color: var(--blanc-chaud); transition-delay: 0ms; }
html.js:not(.mouvement-reduit) .racines-js [data-racines-entree]:not(.vu), html.js:not(.mouvement-reduit) .racines-js .racines-tete:not(.vu) .mot { opacity: 0; translate: 0 20px; }
html.js:not(.mouvement-reduit) .racines-js .racines-tete:not(.vu) .mot { filter: blur(3px); }
html.js:not(.mouvement-reduit) .racines-js .racines-tete:not(.vu) { opacity: 1; translate: none; }
html.js:not(.mouvement-reduit) .racines-js .racines-tete > * { transition: opacity calc(520ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)), translate calc(640ms * var(--k, 1)) var(--sk-ease-pose) calc(var(--rd, 0ms) * var(--k, 1)); }
html.js:not(.mouvement-reduit) .racines-js .racines-tete:not(.vu) > :not(.racines-titre) { opacity: 0; translate: 0 20px; }
.racines-chapeau { --rd: 440ms; }
.racines-titre .mot:nth-child(2) { --rd: 50ms; } .racines-titre .mot:nth-child(3) { --rd: 100ms; } .racines-titre .mot:nth-child(4) { --rd: 150ms; }
.racines-titre .mot:nth-child(5) { --rd: 200ms; } .racines-titre .mot:nth-child(6) { --rd: 250ms; } .racines-titre .mot:nth-child(7) { --rd: 300ms; }
.racines-titre .mot:nth-child(8) { --rd: 350ms; } .racines-titre .mot:nth-child(9) { --rd: 400ms; }
/* ambiance : seulement la scène à l'écran, les quatre racines allumées */
@keyframes r-souffle { 50% { opacity: .62; } }
@keyframes r-seve { 0% { stroke-dashoffset: .1; opacity: 0; } 22% { opacity: .55; } 70% { opacity: .55; } 100% { stroke-dashoffset: -1.15; opacity: 0; } }
html.js:not(.mouvement-reduit) .racines-js.r3.vue .r-lueur { animation: r-souffle 6.8s var(--sk-ease-souffle) 1.8s infinite; }
html.js:not(.mouvement-reduit) .racines-js.r3.vue .r-seve { animation: r-seve 7.2s var(--sk-ease-souffle) 2s infinite; }
html.js:not(.mouvement-reduit) .racines-js.r3.vue [data-racine="1"] .r-seve { animation-delay: 3.8s; }
html.js:not(.mouvement-reduit) .racines-js.r3.vue [data-racine="2"] .r-seve { animation-delay: 2.9s; }
html.js:not(.mouvement-reduit) .racines-js.r3.vue [data-racine="3"] .r-seve { animation-delay: 4.7s; }
/* ===================== RACINES : fin ===================== */

/* ---------- 8 à 10 (tour 9) : la trame, les œuvres, votre chemin. Remplacent « L'échange ». ----------
   Hors course (sans script, mouvement réduit) : tout est posé, l'étoffe tissée, le compteur au chiffre, l'arbre à son étape. */
.surtitre-sec { font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.voix p { font: italic 500 var(--t-citation)/1.35 var(--police-voix); color: var(--marine); max-width: 30ch; }
.voix footer { margin-top: 12px; font: 500 15px/1.4 var(--police-titre); color: var(--encre-douce); }
.mode-emploi { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; counter-reset: etape; }
.mode-emploi li { counter-increment: etape; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; font-size: 16px; line-height: 1.5; color: var(--encre); }
.mode-emploi li::before { content: counter(etape); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--marine); font: 600 13px/1 var(--police-titre); color: var(--marine); }
.mode-emploi-final { margin-top: 4px; }

/* 8 · Les mondes superposés (repère gardé), ici P6c « Les ondes ». Sur la nuit : le champ d'interférences (WebGL2), un voile pour lire, un plan de texte à la fois.
   Hors course (sans script, sans WebGL, mouvement réduit) : la scène n'est pas épinglée, le fond montre l'onde accordée (anneaux d'or). */
.ondes { position: relative; background: var(--nuit); color: var(--blanc-chaud); }
.ondes :focus-visible { outline-color: var(--or); }
.ondes-scene { position: relative; overflow: hidden; isolation: isolate; }
.ondes-toile { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: none; }
.ondes-repli { position: absolute; inset: 0; z-index: 0; pointer-events: none; --ox: 70%; --oy: 50%; }
.or-anneaux { position: absolute; inset: 0; background: repeating-radial-gradient(circle at var(--ox) var(--oy), rgb(232 179 56 / .5) 0 1.2px, rgb(232 179 56 / 0) 2.2px 40px); -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 0, rgb(0 0 0 / .6) 34%, rgb(0 0 0 / 0) 80%); mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 0, rgb(0 0 0 / .6) 34%, rgb(0 0 0 / 0) 80%); }
.or-source { position: absolute; left: var(--ox); top: var(--oy); width: 180px; height: 180px; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, var(--or) 0 8px, rgb(232 179 56 / .4) 10px, rgb(232 179 56 / .12) 36px, rgb(232 179 56 / 0) 90px); }
.ondes-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(6 11 24 / .6), rgb(6 11 24 / .8)); }
.ondes-textes { position: relative; z-index: 2; display: grid; gap: 56px; padding: 96px 20px; max-width: 40rem; }
.onde-plan h2 { margin-top: 12px; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.026em; color: var(--blanc-chaud); text-wrap: balance; }
.ondes .surtitre-sec { color: var(--marine-clair); }
.onde-chapeau { margin-top: 18px; font: 500 clamp(22px, 2.3vw, 32px)/1.25 var(--police-titre); color: var(--or); text-wrap: balance; }
.onde-grand { font: 600 clamp(28px, 3.1vw, 44px)/1.12 var(--police-titre); letter-spacing: -.018em; color: var(--blanc-chaud); text-wrap: balance; }
.onde-texte { margin-top: 16px; max-width: 40ch; font-size: 19px; line-height: 1.6; color: #C9D5EA; }
.onde-verbe { margin-bottom: 12px; font: 500 13px/1.4 var(--police-code); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.ondes-principe { font: 500 17px/1.45 var(--police-titre); color: var(--marine-clair); max-width: 38ch; }
.onde-final { font: 600 clamp(40px, 5.2vw, 76px)/1.02 var(--police-titre); letter-spacing: -.026em; color: var(--blanc-chaud); text-wrap: balance; }
.mot-cle-onde { padding: 0 .12em; margin-inline: -.04em; border-radius: 3px; background: linear-gradient(var(--or), var(--or)) no-repeat 0 0 / 100% 100%; color: var(--nuit); white-space: nowrap; }
.ondes-rail { display: none; }
@media (min-width: 900px) { .ondes-textes { padding: 120px 0 120px 7vw; } }
@media (max-width: 899px) { .ondes-repli { --ox: 50%; --oy: 30%; } }

/* En course : la scène épinglée, le champ visible, un plan à la fois (common.js : .ondes-js, .gl, .accord, .final sur la section) */
html.js:not(.mouvement-reduit) .ondes-js .ondes-course { height: 760vh; height: 760svh; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-scene { position: sticky; top: 0; height: 100vh; height: 100svh; }
html.js:not(.mouvement-reduit) .ondes-js.gl .ondes-toile { display: block; }
html.js:not(.mouvement-reduit) .ondes-js.gl .ondes-repli { display: none; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-voile { background: linear-gradient(90deg, rgb(6 11 24 / .92) 0, rgb(6 11 24 / .78) 32%, rgb(6 11 24 / 0) 60%); }
html.js:not(.mouvement-reduit) .ondes-js .ondes-textes { position: absolute; inset: 0; display: block; max-width: none; padding: 0; }
html.js:not(.mouvement-reduit) .ondes-js :is(.onde-plan, .ondes-principe, .ondes-rail) { position: absolute; left: 7vw; width: min(36rem, 42vw); }
html.js:not(.mouvement-reduit) .ondes-js .onde-plan { top: 50%; translate: 0 calc(-50% + 18px); opacity: 0; visibility: hidden; transition: opacity 420ms var(--sk-ease-ui), translate 520ms var(--sk-ease-ui), visibility 0s linear 420ms; }
html.js:not(.mouvement-reduit) .ondes-js .onde-plan.actif { translate: 0 -50%; opacity: 1; visibility: visible; transition: opacity 600ms var(--sk-ease-pose) 180ms, translate 760ms var(--sk-ease-pose) 180ms, visibility 0s; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-principe { top: calc(var(--entete-h) + 6vh); opacity: 0; translate: 0 8px; transition: opacity 420ms var(--sk-ease-ui), translate 420ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .ondes-js.accord .ondes-principe { opacity: 1; translate: 0 0; transition: opacity 600ms var(--sk-ease-pose), translate 760ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .ondes-js .ondes-rail { display: flex; gap: 10px 24px; flex-wrap: wrap; bottom: 7vh; margin: 0; padding: 0; list-style: none; opacity: 0; transition: opacity 420ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .ondes-js:is(.accord, .final) .ondes-rail { opacity: 1; }
.ondes-metier { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: rgb(201 213 234 / .6); transition: color 300ms var(--sk-ease-ui); }
/* la pastille : deux cercles décalés (hors phase) qui se superposent quand le métier se cale */
.om-phase { position: relative; width: 14px; height: 14px; }
.om-phase::before, .om-phase::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; transition: translate 600ms var(--sk-ease-pose), border-color 300ms var(--sk-ease-ui), background-color 300ms var(--sk-ease-ui); }
.om-phase::before { translate: -3px 0; }
.om-phase::after { translate: 3px 0; }
.ondes-metier.actif { color: var(--blanc-chaud); }
.ondes-metier.aligne { color: #C9D5EA; }
.ondes-metier:is(.actif, .aligne) .om-phase::before, .ondes-metier:is(.actif, .aligne) .om-phase::after { translate: 0 0; border-color: var(--or); }
.ondes-metier.aligne .om-phase::after { background-color: var(--or); }
html.js:not(.mouvement-reduit) .ondes-js .onde-plan .mot-cle-onde { transition: background-size 520ms var(--sk-ease-pose) 1300ms, color 240ms var(--sk-ease-ui) 1380ms; }
html.js:not(.mouvement-reduit) .ondes-js .onde-plan:not(.actif) .mot-cle-onde { background-size: 0% 100%; color: var(--blanc-chaud); }
@media (max-width: 899px) {
  html.js:not(.mouvement-reduit) .ondes-js .ondes-voile { background: linear-gradient(180deg, rgb(6 11 24 / .92) 0, rgb(6 11 24 / .7) 16%, rgb(6 11 24 / 0) 28%), linear-gradient(0deg, rgb(6 11 24 / .95) 0, rgb(6 11 24 / .84) 46%, rgb(6 11 24 / 0) 72%); }
  html.js:not(.mouvement-reduit) .ondes-js :is(.onde-plan, .ondes-principe, .ondes-rail) { left: 20px; right: 20px; width: auto; }
  html.js:not(.mouvement-reduit) .ondes-js .onde-plan { top: auto; bottom: 14vh; translate: 0 18px; }
  html.js:not(.mouvement-reduit) .ondes-js .onde-plan.actif { translate: 0 0; }
  html.js:not(.mouvement-reduit) .ondes-js .ondes-principe { top: calc(var(--entete-h) + 16px); font-size: 15px; }
  html.js:not(.mouvement-reduit) .ondes-js .ondes-rail { top: calc(var(--entete-h) + 68px); bottom: auto; gap: 8px 14px; flex-wrap: nowrap; }
  .ondes-metier { letter-spacing: .06em; gap: 7px; }
  html.js:not(.mouvement-reduit) .ondes-js .onde-texte { font-size: 17px; margin-top: 12px; }
}


/* Tour 12 : la couture avec les racines (le champ se fond par le haut et s'approche), les cartes superposées des quatre métiers,
   la plongée dans le point d'or qui ouvre « Les œuvres ». Positions relatives à votre source : --sx, --sy (common.js). */
html.js:not(.mouvement-reduit) .ondes-js .ondes-toile { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fondu, 0px)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fondu, 0px)); }
.ondes-cartes { display: none; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-cartes { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.onde-carte { position: absolute; left: calc(var(--sx, 70%) + var(--cx)); top: calc(var(--sy, 50%) + var(--cy)); width: 236px; padding: 12px 16px 14px; border-radius: 12px;
  background: rgb(14 26 51 / .74); border: 1px solid rgb(143 176 230 / .26); box-shadow: 0 18px 32px -18px rgb(0 0 0 / .7);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.86);
  transition: opacity 520ms var(--sk-ease-ui), transform 820ms var(--sk-ease-pose), left 700ms var(--sk-ease-pose), top 700ms var(--sk-ease-pose); }
.onde-carte.posee { opacity: 1; transform: none; transition-delay: 260ms; }
.onde-carte.active { border-color: rgb(232 179 56 / .55); }
.oc-verbe { display: flex; align-items: center; gap: 8px; font: 500 13px/1.35 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--marine-clair); }
.oc-verbe::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.oc-mot { margin-top: 6px; font: 600 19px/1.2 var(--police-titre); color: var(--blanc-chaud); }
.onde-carte[data-carte="0"] { --c: var(--marine-clair); --cx: 44px; --cy: 36px; --fx: -170px; --fy: -60px; }
.onde-carte[data-carte="1"] { --c: var(--or); --cx: 74px; --cy: 72px; --fx: 150px; --fy: 90px; }
.onde-carte[data-carte="2"] { --c: #4FC3A1; --cx: 104px; --cy: 108px; --fx: 60px; --fy: -170px; }
.onde-carte[data-carte="3"] { --c: #8FC398; --cx: 134px; --cy: 144px; --fx: -90px; --fy: 170px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="0"] { --cx: 60px; --cy: 60px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="1"] { --cx: 72px; --cy: 72px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="2"] { --cx: 84px; --cy: 84px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="3"] { --cx: 96px; --cy: 96px; }
@media (max-width: 899px) {
  .onde-carte { width: 150px; padding: 8px 10px 10px; border-radius: 10px; }
  .oc-mot { font-size: 15px; margin-top: 3px; }
  .onde-carte[data-carte="0"] { --cx: -96px; --cy: 44px; --fx: -90px; --fy: -30px; }
  .onde-carte[data-carte="1"] { --cx: -82px; --cy: 62px; --fx: 80px; --fy: 50px; }
  .onde-carte[data-carte="2"] { --cx: -68px; --cy: 80px; --fx: 30px; --fy: -90px; }
  .onde-carte[data-carte="3"] { --cx: -54px; --cy: 98px; --fx: -50px; --fy: 90px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="0"] { --cx: -84px; --cy: 56px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="1"] { --cx: -78px; --cy: 62px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="2"] { --cx: -72px; --cy: 68px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="3"] { --cx: -66px; --cy: 74px; }
}
.ondes-plongee { display: none; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-plongee { display: block; position: absolute; z-index: 3; left: var(--sx, 70%); top: var(--sy, 50%); width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, #F0EBE3 0 56%, #F3DFA6 63%, var(--or) 67%, rgb(232 179 56 / .35) 69%, rgb(232 179 56 / 0) 72%); transform: scale(0); will-change: transform; }
html.js:not(.mouvement-reduit) .ondes-js :is(.onde-plan.actif, .ondes-principe, .ondes-rail, .ondes-cartes) { transition-property: opacity, translate, visibility; }
html.js:not(.mouvement-reduit) .ondes-js.plonge :is(.onde-plan.actif, .ondes-principe, .ondes-rail, .ondes-cartes) { opacity: 0; transition: opacity 360ms var(--sk-ease-ui); }

/* Le voyage du point d'or (tour 11) : la tête et sa traîne, posées par common.js ; rien hors du vol, rien en mouvement réduit. */
.voyageur { position: fixed; inset: 0; z-index: 44; pointer-events: none; display: none; }
html.js:not(.mouvement-reduit) .voyageur.en-vol { display: block; }
.voyageur-tete, .voyageur-traine { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--or); will-change: transform; }
.voyageur-tete { background: radial-gradient(circle, #FFF3CF 0 22%, var(--or) 46% 100%); }
.p-point { transition: opacity 320ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .p-point.parti { opacity: 0; transition: none; }

/* 9 · P7a « Le carnet de vol », version immersive (2026-10-20, « le rendre plus immersif encore »). Sur le sable clair où finit la plongée.
   La section devient un vol : un ciel épinglé (sticky) qui passe du sable de l'arrivée à une aube claire puis revient au sol, des instruments
   (heures de code, phase du vol), le carnet qui défile dessus en feuillets, et le point d'or, l'appareil, qui suit la route (couloir à gauche
   de chaque feuillet) : jalons, escales, cases de la check-list, puis la piste sous « Vous êtes au bon endroit. ». La conviction et la carte
   de Sébastien : l'atterrissage, sur le sable. Personnalité Premium : rien ne flotte, rien ne rebondit. Jamais d'or transparent sur le marine.
   États : sans script, les repères du HTML sont posés (état final) ; avec script, la route est dessinée par common.js (.vol-trace) ;
   les états masqués et le ciel animé n'existent que sous html.js:not(.mouvement-reduit) .vol-js (mouvement réduit : le ciel est fixe). */
.oeuvres { background: #F0EBE3; color: var(--encre); padding: 0 12px; }
.oeuvres .surtitre-sec { color: var(--encre-douce); }
.oeuvres h2 { margin-top: 12px; max-width: 22ch; color: var(--marine); }
.carnet-chapeau { margin-top: 16px; max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--encre); }

/* Le vol : le ciel (fixe en mouvement réduit, épinglé sinon), la grille instruments + route, puis le sol */
.vol { --lane: 44px; position: relative; padding: 0 0 96px; }
.vol-tete { padding-top: 96px; }   /* la marge haute est sous le ciel : il commence au bord même de la section */
.vol-tete, .vol-grille, .vol-sol { position: relative; z-index: 1; padding-inline: 8px; }
.vol-grille { margin-top: 44px; }
.vol-ciel { position: absolute; z-index: 0; top: 0; bottom: 0; left: -12px; right: -12px; overflow: hidden; pointer-events: none;
  background: linear-gradient(to bottom, #F0EBE3 0, #DCE5F2 9%, #E2E9F3 40%, #E9EBEE 66%, #EFEAE2 80%, #F0EBE3 86%); }
.ciel-aube { display: none; }
html.js:not(.mouvement-reduit) .vol-js .vol-ciel { position: sticky; top: 0; bottom: auto; height: 100lvh; margin: 0 -12px -100lvh; background: #F0EBE3; }
html.js:not(.mouvement-reduit) .vol-js .ciel-aube { display: block; position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.ciel-voute, .ciel-sol, .ciel-soleil, .ciel-cirrus { position: absolute; display: block; will-change: transform; }
.ciel-voute { left: 0; right: 0; top: -100lvh; height: 100lvh; background: linear-gradient(to bottom, #BCCDEA 0%, #CCD9EF 38%, #DCE4F1 68%, #EBEBEB 88%, #F4E7CB 97%, #F5DFAF 100%); }
.ciel-sol { left: 0; right: 0; top: 0; height: 115lvh; background: linear-gradient(to bottom, #D9CAAE 0 1px, #E9E0CF 1px, #EDE6DA 18%, #F0EBE3 52%); }
.ciel-soleil { left: 93%; top: 0; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  background: radial-gradient(circle, #FFF7E2 0 34%, #F9E9BC 64%, #F4DD9E 100%); box-shadow: 0 0 70px 34px #F7EBCB; }
.ciel-cirrus { left: 0; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgb(255 255 255 / 0), #FFFFFF 35% 60%, rgb(255 255 255 / 0)); opacity: .85; }
.ciel-c1 { left: 6%; top: 15%; width: 26vw; }
.ciel-c2 { left: 60%; top: 25%; width: 17vw; }
.ciel-c3 { left: 22%; top: 37%; width: 34vw; height: 2px; }

/* Les instruments (décor : aria-hidden ; le chiffre est dans le carnet). Téléphone et tablette : une bande épinglée sous l'en-tête. */
.vol-bord { position: sticky; z-index: 5; top: calc(var(--entete-h) + 8px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; padding: 11px 16px; border-radius: 14px; background: var(--nuit); color: var(--creme); box-shadow: 0 10px 22px -14px rgb(6 11 24 / .6); }
.vb-heures { order: 2; }
.vb-label { display: none; font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--marine-clair); }
.vb-compteur { display: flex; align-items: baseline; gap: 6px; font: 600 19px/1 var(--police-titre); font-variant-numeric: tabular-nums; color: var(--creme); }
.vb-unite { font: 500 14px/1.2 var(--police-titre); color: var(--marine-clair); }
.vb-phases { order: 1; position: relative; --jauge: 1; }
.vb-phases li { display: none; align-items: center; gap: 10px; font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--marine-clair); }
.vb-phases li::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--marine-clair); background: var(--nuit); }
.vb-phases li.passee::before { background: var(--marine-clair); }
.vb-phases li.active { display: flex; color: var(--creme); }
.vb-phases li.active::before { background: var(--or); border-color: var(--or); }
html:not(.js) .vb-phases li:last-child { display: flex; color: var(--creme); }
html:not(.js) .vb-phases li:last-child::before { background: var(--or); border-color: var(--or); }
@media (min-width: 1100px) {
  .vol-grille { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .vol-bord { top: calc(var(--entete-h) + 28px); display: block; margin: 0; padding: 22px 22px 20px; border-radius: 18px; }
  .vb-label { display: block; }
  .vb-compteur { margin-top: 8px; font-size: 40px; letter-spacing: -.02em; }
  .vb-unite { display: none; }
  .vb-phases { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgb(248 246 241 / .14); }
  .vb-phases::before, .vb-phases::after { content: ""; position: absolute; left: 4px; top: 30.75px; bottom: 16.75px; width: 2px; background: rgb(143 176 230 / .28); }
  .vb-phases::after { background: var(--marine-clair); transform-origin: 50% 0; transform: scaleY(var(--jauge)); }
  .vb-phases li, html:not(.js) .vb-phases li:last-child { display: flex; gap: 12px; padding: 7px 0; font: 500 15px/1.3 var(--police-titre); letter-spacing: 0; text-transform: none; }
  .vb-phases li::before { position: relative; z-index: 1; }
  .vb-phases li.active { font-weight: 600; }
}

/* La route : chaque feuillet garde à gauche un couloir (--lane) où passe l'appareil */
.vol-route { position: relative; }
.carnet-page { position: relative; margin-top: 40px; padding: 4px 18px 10px 0; border-radius: 18px; background: var(--blanc-chaud); border: 1px solid var(--sable); box-shadow: var(--ombre-carte); }
.carnet-page:first-child { margin-top: 0; }
.carnet-colonnes { display: none; }
.carnet-phase { position: relative; padding: 22px 0 10px var(--lane); font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.vol-depart { position: absolute; left: calc(var(--lane) / 2 - 11px); top: calc(50% + 6px); width: 22px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--marine); }
.cl { position: relative; display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); grid-template-areas: "lane num" "lane repere" "lane mission"; padding: 18px 0 20px; border-top: 1px solid var(--sable); }
.cl-point { grid-area: lane; justify-self: center; align-self: start; margin-top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--marine); }
.cl-num { grid-area: num; font: 500 13px/1.4 var(--police-code); letter-spacing: .1em; color: var(--encre-douce); }
.cl-repere { grid-area: repere; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; margin-top: 4px; font: 500 18px/1.15 var(--police-titre); color: var(--marine); }
.cl-repere strong { font: 600 38px/1 var(--police-titre); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cl-repere-mot { font: 600 26px/1.1 var(--police-titre); letter-spacing: -.01em; }
.cl-pre { flex-basis: 100%; font: 500 13px/1.4 var(--police-code); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.cl-unite { font: 500 17px/1.3 var(--police-titre); }
.cl-mission { grid-area: mission; margin-top: 10px; }
.cl-titre { font: 600 20px/1.3 var(--police-titre); color: var(--marine); }
.cl-texte { margin-top: 6px; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--encre); }

/* Le compteur d'heures : des tambours de chiffres sur la nuit (texte crème, 17:1) */
.hobbs { display: inline-flex; padding: 7px 9px; border-radius: 10px; background: var(--nuit); box-shadow: inset 0 0 0 1px rgb(143 176 230 / .28), 0 8px 16px -10px rgb(6 11 24 / .6); }
.compteur { display: inline-flex; font: 600 34px/1 var(--police-titre); font-variant-numeric: tabular-nums; color: var(--creme); }
.hobbs .cpt-col { display: inline-block; height: 1.18em; padding: .09em .1em 0; overflow: hidden; border-radius: 3px; background: linear-gradient(#18243F, var(--nuit) 45% 55%, #18243F); }
.hobbs .cpt-col + .cpt-col { margin-left: 3px; }
.cpt-bande { display: flex; flex-direction: column; }
.cpt-bande span { display: block; height: 1em; }
.cpt-sep { display: inline-block; width: .3em; }

/* Les escales : le troisième feuillet du carnet */
.escales-tete { padding: 22px 0 22px var(--lane); }
.escales-tete .carnet-phase { padding: 0; }
.escales-tete h3 { margin-top: 10px; }
.escales-chapeau { margin-top: 12px; max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--encre); }
.escale { position: relative; margin: 0; display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); grid-template-areas: "lane legende" "lane visuel"; row-gap: 14px; padding: 20px 0 24px; border-top: 1px solid var(--sable); }
.escale-pose { grid-area: lane; justify-self: center; align-self: start; box-sizing: border-box; margin-top: -1px; width: 20px; height: 20px; border-radius: 50%; background: var(--or); border: 2px solid var(--nuit); }
.escale figcaption { grid-area: legende; display: grid; gap: 2px; }
.escale-num { font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.escale-secteur { font: 600 24px/1.2 var(--police-titre); color: var(--marine); }
.escale-nom { font-size: 16px; line-height: 1.5; color: var(--encre); }
.escale-visuel { grid-area: visuel; overflow: hidden; border-radius: 12px; border: 1px solid var(--sable); background: var(--creme); }
.escale-visuel > img { display: block; width: 100%; height: auto; }
.escale-nuit { display: grid; place-items: center; padding: 14px; background: var(--nuit); border-color: var(--nuit); }
.numero-svg { display: block; width: 100%; max-width: 440px; height: auto; }
.nu-cadran { fill: none; stroke: #8FB0E6; stroke-opacity: .4; stroke-width: 1.5; }
.nu-fin { stroke-dasharray: 2 7; stroke-opacity: .5; }
.nu-etoile { fill: none; stroke: #8FB0E6; stroke-width: 1.6; stroke-linejoin: round; }
.nu-triangle { fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linejoin: round; }
.nu-points circle { fill: #8FB0E6; }
.nu-or { fill: var(--or); }
.nu-chiffres text { font: 600 21px var(--police-titre); fill: var(--creme); text-anchor: middle; }
.escale-logos { display: grid; gap: 18px; justify-items: center; align-content: center; padding: 26px 22px; background: var(--blanc-chaud); }
.escale-logos img { width: 100%; max-width: 260px; }

/* La check-list : un panneau de nuit (crème 17:1, marine clair 8,9:1, or sur la nuit 10,2:1) ; ses cases sont sur la route */
.checklist { position: relative; margin-top: 40px; padding: 28px 18px 32px 0; border-radius: 22px; background: var(--nuit); color: var(--creme); box-shadow: 0 14px 30px -18px rgb(6 11 24 / .7); }
.checklist-label, .checklist h3 { margin-left: var(--lane); }
.checklist-label { font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--marine-clair); }
.checklist h3 { margin-top: 10px; color: var(--creme); }
.checklist-liste { margin-top: 18px; }
.checklist-liste li { display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); align-items: center; padding: 12px 0; border-top: 1px solid rgb(248 246 241 / .12); font: 500 18px/1.4 var(--police-titre); color: var(--creme); }
.checklist-liste li:last-child { border-bottom: 1px solid rgb(248 246 241 / .12); }
.case { justify-self: center; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--or); background: var(--or); }
.case svg { width: 18px; height: 18px; }
.case path { fill: none; stroke: var(--nuit); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.checklist-fin { margin-top: 30px; padding-left: var(--lane); }
.bon-endroit { font: 600 clamp(30px, 3.4vw, 42px)/1.12 var(--police-titre); letter-spacing: -.015em; color: var(--creme); text-wrap: balance; }
.vol-piste { position: relative; display: block; width: calc(var(--lane) / 2 + 120px); height: 4px; margin: 16px 0 0 calc(var(--lane) / -2); border-radius: 2px; background: var(--or); }
.vol-piste::after { content: ""; position: absolute; right: -9px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #FFF3CF 0 22%, var(--or) 46% 100%); box-shadow: 0 0 0 3px var(--nuit); }
.checklist-action { margin-top: 26px; }
.checklist .bouton-plein { border-color: var(--or); }
.checklist :focus-visible { outline-color: var(--or); }
.checklist-sous { margin-top: 12px; font-size: 15px; line-height: 1.45; color: #C9D3E6; }

/* L'atterrissage : la conviction et la carte de Sébastien, sur le sable */
.vol-sol { padding-top: 88px; }
.adn { display: grid; gap: 32px; }
.adn-voix { margin-top: 14px; }
.adn-voix p { max-width: 34ch; }
.adn-texte { margin-top: 22px; max-width: 52ch; font-size: 18px; line-height: 1.65; color: var(--encre); }
.pilote { padding: 26px 22px 18px; border-radius: 18px; background: var(--blanc-chaud); border: 1px solid var(--sable); box-shadow: var(--ombre-carte); }
.pilote-tete { display: flex; align-items: center; gap: 18px; }
.pilote h3 { font-size: 26px; }
.pilote-role { margin-top: 4px; font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.medaillon { position: relative; flex: none; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; background: var(--creme); box-shadow: 0 0 0 3px var(--blanc-chaud), 0 0 0 5px var(--or); }
.medaillon img { position: absolute; left: -94%; top: 0; width: 270%; max-width: none; height: auto; }
.pilote-liste { margin-top: 20px; }
.pilote-liste li { text-wrap: wrap; position: relative; padding: 13px 0 13px 24px; border-top: 1px solid var(--sable); font-size: 16px; line-height: 1.55; color: var(--encre); }
.pilote-liste li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--marine); }
.pilote-liste strong { font-weight: 700; color: var(--marine); }

@media (min-width: 900px) {
  .oeuvres { padding: 0 16px; }
  .vol { --lane: 64px; padding: 0 0 120px; }
  .vol-tete { padding-top: 120px; }
  .vol-tete, .vol-grille, .vol-sol { padding-inline: 24px; }
  .vol-grille { margin-top: 56px; }
  .vol-ciel { left: -16px; right: -16px; }
  html.js:not(.mouvement-reduit) .vol-js .vol-ciel { margin-inline: -16px; }
  .carnet-page { margin-top: 56px; padding: 6px 36px 16px 0; }
  .carnet-page:first-child { margin-top: 0; }
  .carnet-colonnes { display: grid; grid-template-columns: var(--lane) 80px 236px minmax(0, 1fr); padding: 20px 0 12px; border-bottom: 2px solid var(--sable); font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
  .carnet-phase { padding-top: 26px; }
  .cl { grid-template-columns: var(--lane) 80px 236px minmax(0, 1fr); grid-template-areas: "lane num repere mission"; padding: 22px 0 24px; align-items: start; }
  .cl-point { margin-top: 17px; }
  .cl-num { padding-top: 12px; }
  .cl-repere { margin-top: 0; padding-right: 16px; }
  .cl-repere strong { font-size: 46px; }
  .cl-repere-mot { font-size: 30px; padding-top: 6px; }
  .compteur { font-size: 40px; }
  .cl-mission { margin-top: 0; padding: 8px 0 0 8px; }
  .cl-titre { font-size: 22px; }
  .escales-tete { padding-top: 26px; }
  .escale { grid-template-columns: var(--lane) 308px minmax(0, 1fr); grid-template-areas: "lane legende visuel"; column-gap: 0; padding: 26px 0 28px; align-items: start; }
  .escale figcaption { padding: 0 24px 0 0; }
  .checklist { margin-top: 56px; padding: 48px 48px 52px 0; }
  .checklist-liste li { font-size: 19px; }
  .vol-sol { padding-top: 112px; }
  .adn { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
  .adn-conviction { padding-top: 20px; }
  .pilote { padding: 30px 30px 20px; }
  .medaillon { width: 116px; height: 116px; }
}

/* La route dessinée (common.js, module « vol ») : la ligne prévue en pointillé, la ligne volée, les repères, la piste, l'appareil.
   Elle ne dépend que du défilement (et d'un lissage) : elle ne retient jamais la page. Les repères du HTML s'effacent devant elle. */
.vol-trace-pret .vol-route :is(.cl-point, .escale-pose, .case, .vol-depart, .vol-piste) { visibility: hidden; }
.vol-trace { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vt-ligne { position: absolute; left: 0; top: 0; width: 2px; margin-left: -1px; }
.vt-plan, .vt-vol { position: absolute; inset: 0; }
.vt-plan { background: linear-gradient(to bottom, #B9AC95 var(--n0), #5E7AAE var(--n0) var(--n1), #B9AC95 var(--n1));
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px); mask: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 11px); }
.vt-vol { background: linear-gradient(to bottom, var(--marine) var(--n0), var(--marine-clair) var(--n0) var(--n1), var(--marine) var(--n1)); }
.vt-m { position: absolute; left: 0; top: 0; box-sizing: border-box; }
.vt-depart { width: 22px; height: 6px; margin: -3px 0 0 -11px; border-radius: 3px; background: var(--marine); }
.vt-jalon { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--marine); border: 2px solid var(--marine); box-shadow: 0 0 0 4px var(--blanc-chaud); }
.vt-pose { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--or); border: 2px solid var(--nuit); box-shadow: 0 0 0 4px var(--blanc-chaud); }
.vt-pose::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--marine); opacity: 0; }
.vt-case { display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 6px; border: 2px solid var(--or); background: var(--or); }
.vt-case svg { width: 18px; height: 18px; }
.vt-case path { fill: none; stroke: var(--nuit); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.vt-piste { position: absolute; left: 0; top: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--or); transform-origin: 0 50%; }
.vol-appareil { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; will-change: transform; }
.va-corps { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #FFF3CF 0 22%, var(--or) 46% 100%); box-shadow: 0 0 0 3px var(--blanc-chaud), 0 6px 14px -4px rgb(6 11 24 / .45); }
.vol-appareil.sur-nuit .va-corps { box-shadow: 0 0 0 3px var(--nuit), 0 0 0 4.5px rgb(248 246 241 / .5); }

/* Le mouvement (html.js:not(.mouvement-reduit) .vol-js) : chaque feuillet entre par la cadence ; à l'intérieur, tout suit l'appareil. */
html.js:not(.mouvement-reduit) .vol-js .vol-bord { transition: opacity 520ms var(--sk-ease-pose), translate 600ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .vol-js .vol-bord:not(.allume) { opacity: 0; translate: 0 -8px; }
html.js:not(.mouvement-reduit) .vol-js .vb-compteur { transition: color 300ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .vol-js .vt-plan { transition: clip-path 700ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .vol-js .vt-m { transition: opacity 380ms var(--sk-ease-ui), scale 460ms var(--sk-ease-pose), background-color 260ms var(--sk-ease-ui), border-color 260ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .vol-js .vt-m:not(.montre) { opacity: 0; scale: .5; }
html.js:not(.mouvement-reduit) .vol-js .vt-jalon:not(.atteint) { background: var(--blanc-chaud); border-color: #C9BCA3; }
html.js:not(.mouvement-reduit) .vol-js .vt-pose:not(.atteint) { background: var(--blanc-chaud); border-color: var(--marine); }
html.js:not(.mouvement-reduit) .vol-js .vt-pose.atteint::before { animation: vt-toucher 760ms var(--sk-ease-pose); }
@keyframes vt-toucher { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 2.6; } }
html.js:not(.mouvement-reduit) .vol-js .vt-case:not(.atteint) { background: var(--nuit); border-color: var(--marine-clair); }
html.js:not(.mouvement-reduit) .vol-js .vt-case path { transition: stroke-dashoffset 320ms var(--sk-ease-ui) 120ms; }
html.js:not(.mouvement-reduit) .vol-js .vt-case:not(.atteint) path { stroke-dashoffset: 1; }
html.js:not(.mouvement-reduit) .vol-js .va-corps { transition: opacity 420ms var(--sk-ease-ui), scale 520ms var(--sk-ease-pose), box-shadow 300ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .vol-js .vol-appareil:not(.montre) .va-corps { opacity: 0; scale: .4; }
html.js:not(.mouvement-reduit) .vol-js .vol-appareil.pose .va-corps { animation: va-souffle 5.6s var(--sk-ease-souffle) 1.4s infinite; }
@keyframes va-souffle { 0%, 100% { box-shadow: 0 0 0 3px var(--nuit), 0 0 0 4.5px rgb(248 246 241 / .5); } 50% { box-shadow: 0 0 0 3px var(--nuit), 0 0 0 10px rgb(248 246 241 / .16); } }
html.js:not(.mouvement-reduit) .vol-js .cl-heures .cpt-bande { transition: translate 1500ms var(--sk-ease-pose) calc(200ms + var(--j, 0) * 90ms); }
html.js:not(.mouvement-reduit) .vol-js .cl-heures:not(.trace) .cpt-bande { translate: 0 0 !important; }
html.js:not(.mouvement-reduit) .vol-js :is(.nu-etoile, .nu-triangle) { stroke-dasharray: 1; transition: stroke-dashoffset 1200ms var(--sk-ease-trajet) 200ms; }
html.js:not(.mouvement-reduit) .vol-js .nu-triangle { transition-duration: 700ms; transition-delay: 1000ms; }
html.js:not(.mouvement-reduit) .vol-js .escale-dessin:not(.trace) :is(.nu-etoile, .nu-triangle) { stroke-dashoffset: 1; }
html.js:not(.mouvement-reduit) .vol-js .escale-capture .escale-visuel > img { transition: clip-path 900ms var(--sk-ease-trajet) 120ms; }
html.js:not(.mouvement-reduit) .vol-js .escale-capture:not(.trace) .escale-visuel > img { clip-path: inset(0 100% 0 0); }
html.js:not(.mouvement-reduit) .vol-js .escale-logos img { transition: opacity 480ms var(--sk-ease-pose), translate 560ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .vol-js .escale-logos img:nth-child(2) { transition-delay: 90ms; }
html.js:not(.mouvement-reduit) .vol-js .escale-logos img:nth-child(3) { transition-delay: 180ms; }
html.js:not(.mouvement-reduit) .vol-js .escale-trio:not(.trace) .escale-logos img { opacity: 0; translate: -14px 0; }
html.js:not(.mouvement-reduit) .vol-js .checklist-fin > :not(.vol-piste) { transition: opacity 520ms var(--sk-ease-pose), translate 600ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .vol-js .checklist-fin > .checklist-action { transition-delay: 380ms; }
html.js:not(.mouvement-reduit) .vol-js .checklist-fin > .checklist-sous { transition-delay: 460ms; }
html.js:not(.mouvement-reduit) .vol-js .checklist-fin:not(.trace):not(:focus-within) > :not(.vol-piste) { opacity: 0; translate: 0 14px; }

/* 10 · Votre chemin, P9c « Le sentier » : quatre stations le long d'un sentier (de gauche à droite au bureau, de haut en bas au
   téléphone). Le sentier se trace au défilement, chaque station pousse quand il l'atteint (common.js, module « chemin »). */
.chemin { background: var(--creme); padding: 88px 0 96px; overflow-x: clip; }
.chemin-tete h2 { margin-top: 12px; }
.chemin-chapeau { margin-top: 14px; max-width: 46ch; font-size: 19px; line-height: 1.6; }
.sentier { position: relative; margin-top: 44px; }
.sentier-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sentier-colline { fill: #EFE9DF; }
.sentier-piste { fill: none; stroke: var(--sable); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.sentier-trace { fill: none; stroke: var(--marine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sentier-but { fill: var(--creme); stroke: var(--marine); stroke-width: 3; }
.sentier-but.atteint { fill: var(--or); }
.sentier-vous { fill: var(--or); stroke: var(--marine); stroke-width: 3; }
.stations { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
/* Au téléphone : le sentier à gauche, une station par ligne, sa carte à droite */
.station { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: 12px; }
.station + .station { margin-top: 28px; }
.station::before { content: ""; grid-column: 2; grid-row: 1 / 4; border-radius: 16px; background: var(--blanc-chaud); border: 1px solid var(--sable); box-shadow: var(--ombre-carte);
  transition: border-color 200ms var(--sk-ease-ui), box-shadow 260ms var(--sk-ease-ui); }
.station > :not(.st-repere) { grid-column: 2; position: relative; margin-inline: 18px; }
.st-repere { grid-column: 1; grid-row: 1 / 4; align-self: start; display: grid; place-items: center; padding-top: 6px; }
.st-situation { grid-row: 1; padding-top: 20px; }
.st-etape { position: relative; font: 500 13px/1.4 var(--police-code); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.st-num { display: inline-block; min-width: 1.6em; color: var(--marine); }
.station h3 { margin-top: 8px; font-size: 22px; line-height: 1.2; }
.st-texte { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.st-offre { grid-row: 2; display: grid; justify-items: start; align-content: start; row-gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sable); }
.st-produit { font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.st-produit:not(:first-child) { margin-top: 8px; }
.st-tarif { display: grid; justify-items: start; padding: 5px 12px 6px; border-radius: 8px; color: var(--nuit);
  background: linear-gradient(var(--or), var(--or)) no-repeat 0 0 / calc(var(--allume, 1) * 100%) 100%; box-shadow: inset 0 0 0 1.5px var(--or); }
.st-tarif .prix { font-size: 20px; line-height: 1.25; color: var(--nuit); }
.st-unite { font: 500 14px/1.3 var(--police-titre); }
.st-note { font: 400 15px/1.45 var(--police-texte); color: var(--encre-douce); }
.st-action { grid-row: 3; margin-top: 18px; padding-bottom: 22px; }
.st-action .bouton { width: 100%; text-wrap: balance; }
/* La station mise en avant : « Vous êtes ici ? » (survol, focus ; au téléphone, la station que le sentier vient d'atteindre) */
.st-ici { position: absolute; right: -6px; top: -33px; padding: 4px 11px 5px; border-radius: 999px; background: var(--or); color: var(--nuit); font: 600 14px/1.2 var(--police-titre); letter-spacing: 0; text-transform: none; white-space: nowrap;
  opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity 200ms var(--sk-ease-ui), translate 260ms var(--sk-ease-ui); }
.st-medaillon { display: block; width: var(--d, 64px); height: var(--d, 64px); overflow: visible; transition: scale 280ms var(--sk-ease-ui); }
.st-socle { fill: var(--blanc-chaud); stroke: #BDB19C; stroke-width: 2.5; stroke-dasharray: 5 6; }
.st-disque { fill: var(--marine); transform-box: fill-box; transform-origin: center; }
.st-dessin path { fill: none; stroke: var(--or); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.st-dessin .st-tige { stroke-width: 4.2; }
.st-dessin .st-fin { stroke-width: 2.4; }
.st-dessin .st-sol { stroke: var(--marine-clair); stroke-width: 1.6; }
.st-dessin circle, .st-graine { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.st-dessin .st-creux { fill: var(--marine); stroke: var(--or); stroke-width: 2.6; }
.st-anneau { fill: none; stroke: var(--or); stroke-width: 3; opacity: 0; scale: .9; transform-box: fill-box; transform-origin: center; transition: opacity 220ms var(--sk-ease-ui), scale 280ms var(--sk-ease-ui); }
.station.ici::before { border-color: var(--marine); box-shadow: 0 14px 24px -14px rgb(6 11 24 / .3); }
.station.ici .st-ici { opacity: 1; translate: 0 0; }
.station.ici .st-medaillon { scale: 1.06; }
.station.ici .st-anneau { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .station:is(:hover, :focus-within)::before { border-color: var(--marine); box-shadow: 0 14px 24px -14px rgb(6 11 24 / .3); }
  .station:is(:hover, :focus-within) .st-ici { opacity: 1; translate: 0 0; }
  .station:is(:hover, :focus-within) .st-medaillon { scale: 1.06; }
  .station:is(:hover, :focus-within) .st-anneau { opacity: 1; scale: 1; }
}
.chemin-voix { margin: 44px 0 0; padding-left: 84px; }
.chemin-voix footer { margin-top: 12px; }
html.mouvement-reduit :is(.st-ici, .st-medaillon, .st-anneau), html.mouvement-reduit .station::before { transition: none; }
html:not(.js) .sentier::before { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; border-left: 3px solid var(--sable); }
/* Au bureau : la grille de tarifs, les quatre stations côte à côte ; offres et actions alignées d'une colonne à l'autre */
@media (min-width: 900px) {
  .chemin { padding: 120px 0 120px; }
  .sentier { margin-top: 36px; }
  .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 24px; }
  .station { grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; column-gap: 0; }
  .station + .station { margin-top: 0; }
  .station::before { grid-column: 1; grid-row: 2 / 5; }
  .station > :not(.st-repere) { grid-column: 1; margin-inline: 22px; }
  .st-repere { grid-row: 1; align-self: stretch; height: 210px; padding: 0 0 22px; }
  .station[data-station="1"] { --d: 112px; --dy: 20px; }
  .station[data-station="2"] { --d: 124px; --dy: 8px; }
  .station[data-station="3"] { --d: 136px; --dy: -4px; }
  .station[data-station="4"] { --d: 148px; --dy: -16px; }
  .st-medaillon { translate: 0 var(--dy, 0); }
  .st-situation { grid-row: 2; padding-top: 22px; }
  .station h3 { font-size: 23px; }
  .st-offre { grid-row: 3; margin-top: 18px; }
  .st-action { grid-row: 4; padding-bottom: 24px; }
  .st-ici { right: -8px; top: -35px; }
  .chemin-voix { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 64px; align-items: end; margin-top: 80px; padding: 44px 0 0; }
  .chemin-voix footer { margin: 0 0 8px; }
  html:not(.js) .sentier::before { left: 0; right: 0; top: 94px; bottom: auto; border-left: 0; border-top: 3px solid var(--sable); }
}
@media (min-width: 900px) and (max-width: 1099px) {   /* quatre colonnes étroites */
  .stations { column-gap: 16px; }
  .station > :not(.st-repere) { margin-inline: 16px; }
  .station h3 { font-size: 21px; }
}
/* Tour 7 : en course, chaque bloc entre à son tour (cadence, common.js : .vu). */
html.js:not(.mouvement-reduit) .entrees-js [data-entree] { transition: opacity 560ms var(--sk-ease-pose), translate 640ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .entrees-js [data-entree]:not(.vu) { opacity: 0; translate: 0 20px; }
html.js:not(.mouvement-reduit) .entrees-js .finale-texte-int h2[data-entree] { transition-delay: 80ms; }
html.js:not(.mouvement-reduit) .entrees-js .finale-texte-int .porte-rdv[data-entree] { transition-delay: 160ms; }
html.js:not(.mouvement-reduit) .entrees-js .signature[data-entree] { transition-delay: 120ms; }

/* ---------- 9 · La finale (fin de P2) ---------- */
.finale { background: var(--creme); overflow-x: clip; padding: 24px 0; }
/* Tour 12 : la canopée de circuits pousse sur les bords de la finale (common.js, module « canopee-finale »), derrière le texte et le symbole. */
.finale { position: relative; }
.finale-canopee { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fc-collant { position: sticky; top: 0; height: 100vh; height: 100svh; }
.fc-foret { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 599px) {                                  /* au téléphone, la forêt pousse au pied de la finale, sous la signature, jamais derrière le texte */
  .finale { padding-bottom: 36vh; padding-bottom: 36svh; }
  .fc-collant { position: absolute; top: auto; bottom: 0; left: 0; right: 0; height: 36vh; height: 36svh; }
}
.finale-course { position: relative; z-index: 1; }
/* Tour 12 (Sébastien, 2026-10-20) : « de Votre chef-d'œuvre commence par une conversation jusqu'au footer, revenir sur un fond foncé,
   comme au début du site, avec le bleu foncé de la charte au lieu du noir ». Textes clairs (crème sur marine : 8,3:1). */
.finale { background: var(--marine); color: var(--creme); }
.finale :focus-visible { outline-color: var(--or); }
.finale h2 { color: var(--blanc-chaud); }
.finale .finale-entree { color: var(--or); }
.finale .sous-bouton { color: #DCE5F5; }
.finale .mode-emploi li { color: var(--creme); }
.finale .mode-emploi li::before { border-color: var(--creme); color: var(--creme); }
.finale .ps { color: var(--creme); }
.finale .signature { color: #DCE5F5; border-top-color: rgb(248 246 241 / .25); }
.finale .fn-symbio { color: var(--creme); }
.finale .fn-tek { color: var(--nuit); }
.finale .reflet { color: #F0C85C; }

.finale-course { display: grid; padding: 0 var(--gout); }
.finale-texte-int { display: flex; flex-direction: column; gap: 18px; padding: 72px 0; max-width: 34rem; }
.finale-entree { font: 500 18px/1.4 var(--police-titre); color: var(--marine); }
.finale h2 { font-size: var(--t-h2); }
.finale .porte-rdv { margin-top: 8px; }
.ps { font-size: 18px; font-style: italic; color: var(--marine); }
.ps strong { font-style: normal; }
.signature { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--sable); font: 400 15px/1.45 var(--police-titre); color: var(--marine); }
.finale-scene { position: relative; padding: 24px 0 72px; }
.figure { position: relative; aspect-ratio: 670 / 700; width: min(78vw, 520px); margin: 0 auto; transform-origin: 48.1% 49.9%; }
.symbole-image img { width: 100%; height: auto; position: relative; z-index: 2; }
.lueur, .onde { position: absolute; left: 48.1%; top: 49.9%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.lueur { z-index: 0; width: 150%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(232 179 56 / .5), rgb(232 179 56 / .16) 58%, rgb(232 179 56 / 0)); }
.onde { z-index: 1; width: 93%; aspect-ratio: 1; border: 5px solid var(--or); opacity: 0; }
.flou { position: absolute; inset: 0; width: 100%; height: auto; z-index: 3; pointer-events: none; }
.finale-toile { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; display: none; }
.finale-nom { position: relative; margin: 18px 0 0; text-align: center; font-size: clamp(36px, 4.2vw, 58px); }
.fn-symbio { color: var(--marine); }
.fn-tek { color: var(--marine); background: linear-gradient(transparent 58%, var(--or) 58% 92%, transparent 92%); }
.reflet { position: absolute; inset: 0; color: var(--marine-clair); clip-path: inset(0 100% 0 0); pointer-events: none; }
@media (min-width: 900px) {
  .finale-course { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4vw; padding: 0 var(--col-g); }
  .finale-texte-int { min-height: calc(100svh - var(--entete-h)); justify-content: center; padding: 48px 0; }
  .finale-scene { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--entete-h)); padding: 0; }
  .figure { width: min(90%, calc((100svh - var(--entete-h)) * .7 * 670 / 700)); }
}

/* ---------- Sources des chiffres (dans la page, juste avant le pied commun) ---------- */
.sources-chiffres { background: var(--sable); color: var(--encre); padding: 40px 16px 8px; font-size: 15px; }
.sources summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font: 600 15px/1.3 var(--police-titre); color: var(--marine); }
.sources ul { display: grid; gap: 8px; margin-top: 8px; max-width: 80ch; }
.sources li { font-size: 14px; line-height: 1.5; color: var(--encre-douce); }

/* ---------- Pied commun (footer.html) : il vit dans un cadre isolé, sous chaque page ---------- */
html:has(> body > .pied), html:has(> body > .pied) body { background: var(--sable); }
.pied { background: var(--sable); color: var(--encre); padding: 40px 16px 48px; font-size: 15px; }
.pied-grille { display: grid; gap: 28px; }
.pied-identite { display: flex; flex-direction: column; gap: 10px; max-width: 64ch; }
.pied-marque { font-size: 24px; margin-bottom: 2px; }
.pied-legal ul { display: flex; flex-wrap: wrap; column-gap: 22px; }
.pied-legal li a, .pied-temoins { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); }
.pied-temoins { font-size: 14px; color: var(--encre-douce); }
.pied-copyright { line-height: 1.5; }
.pied-meta { font-size: 14px; line-height: 1.5; color: var(--encre-douce); max-width: 80ch; }
@media (min-width: 900px) {
  .pied-grille { grid-template-columns: 5fr 7fr; column-gap: 64px; }
  .pied-legal { align-self: start; }
  .pied-mentions { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid rgb(77 90 81 / .22); }
}

/* ---------- Pages juridiques (mentions, confidentialité, avis, CGV, CGU) : un texte long, lisible, sur la crème ---------- */
html:has(.page-texte), html:has(.page-texte) body { background: var(--creme); }
.page-texte { background: var(--creme); color: var(--encre); padding: 56px 0 72px; }
.texte-juridique { width: min(100%, 76ch); margin-inline: auto; padding-inline: 20px; }
.texte-juridique .surtitre { font: 600 15px/1.3 var(--police-titre); letter-spacing: .01em; color: var(--encre-douce); }
.texte-juridique h1 { margin-top: 10px; font-size: clamp(32px, 4.2vw, 48px); letter-spacing: -.02em; }
.texte-juridique .chapeau-juridique { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--encre); }
.texte-juridique .maj { margin-top: 12px; font-size: 15px; color: var(--encre-douce); }
.texte-juridique h2 { margin-top: 48px; font-size: clamp(25px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -.012em; }
.texte-juridique h3 { margin-top: 32px; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.25; letter-spacing: -.005em; }
.texte-juridique h4 { margin-top: 24px; font: 600 20px/1.3 var(--police-titre); color: var(--marine); }
.texte-juridique p, .texte-juridique li { font-size: 16px; line-height: 1.68; overflow-wrap: anywhere; }
.texte-juridique p { margin-top: 14px; }
.texte-juridique ul { margin-top: 12px; padding-left: 1.4em; list-style: disc; display: grid; gap: 6px; }
.texte-juridique ol { margin-top: 12px; padding-left: 1.6em; list-style: decimal; display: grid; gap: 6px; }
.texte-juridique a { color: var(--marine); text-decoration-color: rgb(24 73 137 / .45); }
.texte-juridique .a-completer { padding: 1px 6px; border-radius: 4px; background: var(--sauge-claire); color: var(--encre); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.texte-juridique .retour { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--sable); }
@media (min-width: 900px) { .page-texte { padding: 80px 0 96px; } }

/* ---------- Pistes de la canopée (course seulement) et volet de charte ---------- */
.pistes { display: none; }
.volet { display: none; }
html.js:not(.mouvement-reduit) .volet { display: block; position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; visibility: hidden; }
html.js:not(.mouvement-reduit) .volet.joue { visibility: visible; }
.volet-corps { position: absolute; top: -12px; bottom: -12px; left: 0; width: 140vw; will-change: transform; }
.volet-bande { position: absolute; inset: 0 0 0 0; background: var(--marine); }
.volet-accent { position: absolute; top: 0; bottom: 0; left: 100%; width: 46px; margin-left: 10px; background: var(--or); }

/* ---------- Barre d'appel mobile ---------- */
.barre-mobile { display: none; }
@media (max-width: 899px) {
  .barre-mobile { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--creme); border-top: 1px solid var(--sable); }
  .barre-mobile .bouton-plein { flex: 1 1 auto; }
  .barre-mobile .bouton-contour { flex: none; }
  .pied { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .page-texte { padding-bottom: 96px; }
  html.js .barre-mobile { transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--sk-ease-ui), visibility 0s linear 200ms; }
  html.js .barre-mobile.est-visible { transform: none; visibility: visible; transition: transform 200ms var(--sk-ease-ui), visibility 0s; }
}

/* =====================================================================
   États de course : seulement quand le script tourne et que le mouvement n'est pas coupé.
   ===================================================================== */
/* La scène vit dans un rail aussi haut que la canopée : collante tant que la canopée défile, elle part avec sa fin. */
html.js:not(.mouvement-reduit) .scene-rail { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.js:not(.mouvement-reduit) .scene { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: var(--nuit); }
html.js:not(.mouvement-reduit) .scene.plein-jour { background: var(--creme); }
/* La plongée (tour 5) : pendant le zoom, la toile plein cadre remplace l'arbre ; plongée faite, la scène est d'or plein (le fond même de
   #approche) : en remontant, la section or se retire sur de l'or, sans couture, jusqu'à ce que le dézoom se joue. */
html.js:not(.mouvement-reduit) .scene.plonge-anim .scene-plongee { display: block; }
html.js:not(.mouvement-reduit) .scene.plonge-anim .scene-arbre, html.js:not(.mouvement-reduit) .scene.plongee .scene-arbre { visibility: hidden; }
html.js:not(.mouvement-reduit) .scene.plongee { background: var(--or); }
html.js:not(.mouvement-reduit) .scene.plongee .bulles, html.js:not(.mouvement-reduit) .scene.plongee .fils-mobiles { visibility: hidden; }
html.js:not(.mouvement-reduit) .canopee { position: relative; }
html.js:not(.mouvement-reduit) .flux { position: relative; z-index: 1; }
html.js:not(.mouvement-reduit) .ouverture, html.js:not(.mouvement-reduit) .plateformes { background: transparent; }
html.js:not(.mouvement-reduit) .ouverture { height: var(--ouv-h); }
html.js:not(.mouvement-reduit) .heros { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; display: block; padding: 24px; }
html.js:not(.mouvement-reduit) .heros-texte { position: absolute; left: var(--gout); right: var(--gout); top: calc(var(--bande) + 10px); max-width: 37rem; gap: 16px; }
html.js:not(.mouvement-reduit) .heros-texte.eteint { pointer-events: none; }
html.js:not(.mouvement-reduit) .mot-cle { color: var(--creme); }
html.js:not(.mouvement-reduit) .mot-cle.allume { color: var(--or); }
html.js:not(.mouvement-reduit) .mot-trace { transform: scaleX(0); transition: transform 700ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .mot-cle.allume .mot-trace { transform: scaleX(1); }
/* Une fiche à la fois : la pile collante superpose l'intro, les quatre fiches et « à venir » au même emplacement (sous l'arbre au
   téléphone, à gauche au bureau). Elle remonte sur l'ouverture pour être en place dès le haut de la page ; sa hauteur est rendue
   par la marge négative des pistes, qui donnent la longueur du défilement. common.js pose .actif (entrée : montée de 20 px
   et fondu, 500 ms, le contenu 100 ms après) et .sortie (fondu et 8 px vers le haut, 200 ms). */
html.js:not(.mouvement-reduit) .plateformes { margin-top: calc(var(--slot) - var(--ouv-h)); padding: 0; }
html.js:not(.mouvement-reduit) .pile { position: sticky; z-index: 2; top: var(--slot); height: calc(100svh - var(--slot)); pointer-events: none; }
html.js:not(.mouvement-reduit) .pile > .bloc { position: absolute; top: 0; left: var(--gout); right: var(--gout); padding: 0; min-height: 0; display: block; }
html.js:not(.mouvement-reduit) .pistes { display: block; margin-top: calc(var(--slot) - 100svh); }   /* la pile ne prend pas de place : elle quitte l'écran avec la fin de la canopée */
html.js:not(.mouvement-reduit) .piste { height: 60vh; height: 60svh; }
html.js:not(.mouvement-reduit) .piste[data-piste="0"] { scroll-margin-top: 62vh; scroll-margin-top: 62svh; }   /* l'ancre « Les plateformes » arrive au milieu de la piste de SymbioMail */
html.js:not(.mouvement-reduit) .piste-intro { height: calc(180svh - var(--slot)); }
html.js:not(.mouvement-reduit) .piste-venir { height: 85vh; height: 85svh; }   /* « à venir » se lit 0,6 écran, puis la plongée se déclenche au bout */
html.js:not(.mouvement-reduit) .pile .carte-flux { opacity: 0; translate: 0 20px; pointer-events: none; }
html.js:not(.mouvement-reduit) .pile .carte-flux > * { opacity: 0; translate: 0 10px; }
html.js:not(.mouvement-reduit) .pile .carte-flux.actif { opacity: 1; translate: none; pointer-events: auto; transition: opacity 500ms var(--sk-ease-pose), translate 500ms var(--sk-ease-pose); }
html.js:not(.mouvement-reduit) .pile .carte-flux.actif > * { opacity: 1; translate: none; transition: opacity 500ms var(--sk-ease-pose) 100ms, translate 500ms var(--sk-ease-pose) 100ms; }
html.js:not(.mouvement-reduit) .pile .carte-flux.sortie { opacity: 0; translate: 0 -8px; transition: opacity 200ms var(--sk-ease-ui), translate 200ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .pile .carte-flux.sortie > * { opacity: 1; translate: none; }
html.js:not(.mouvement-reduit) .fiche-symbole { display: block; }
/* Tour 7, la cadence de l'intro : le titre avec la carte, puis chaque encart et chaque prix, un à un (520 ms au moins, common.js).
   L'encart monte de 20 px ; le prix sort de sous son encart, puis son surlignage or se trace. */
html.js:not(.mouvement-reduit) .pile [data-intro] { transition: opacity 500ms var(--sk-ease-pose) 100ms, translate 560ms var(--sk-ease-pose) 100ms; }   /* 100 ms : comme le contenu des fiches */
html.js:not(.mouvement-reduit) .pile [data-intro]:not(.vu) { opacity: 0; translate: 0 20px; }
html.js:not(.mouvement-reduit) .pile .intro-prix:not(.vu) { translate: 0 -60%; }
html.js:not(.mouvement-reduit) .pile .ip-montant { transition: background-size 560ms var(--sk-ease-pose) 240ms; }
html.js:not(.mouvement-reduit) .pile .intro-prix:not(.vu) .ip-montant { background-size: 0% 100%; transition-delay: 0ms; }
@media (max-width: 899px) {
  html.js:not(.mouvement-reduit) .fils-mobiles { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  /* au téléphone, chaque fiche se pose en bas de l'écran : l'arbre, rapproché, occupe tout l'espace au-dessus */
  html.js:not(.mouvement-reduit) .pile > .bloc { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
  html.js:not(.mouvement-reduit) .h1-ombre { font-size: .82em; }
  html.js:not(.mouvement-reduit) .heros-texte h1 { font-size: clamp(28px, 7.6vw, 36px); }
  html.js:not(.mouvement-reduit) .chapeau { font-size: 17px; line-height: 1.55; }
  html.js:not(.mouvement-reduit) .micro { display: none; }
  /* au téléphone, la fiche tient entière sous l'arbre : plus serrée, sans perdre une ligne */
  html.js:not(.mouvement-reduit) .fiche { padding: 16px 18px 16px; }
  html.js:not(.mouvement-reduit) .fiche-nom { font-size: 29px; margin-top: 6px; }
  html.js:not(.mouvement-reduit) .fiche-symbole { width: 36px; }
  html.js:not(.mouvement-reduit) .fiche-slogan { font-size: 16px; margin-top: 2px; }
  html.js:not(.mouvement-reduit) .fiche-lignes { margin-top: 10px; }
  html.js:not(.mouvement-reduit) .fiche-lignes > div { padding: 6px 0; }
  html.js:not(.mouvement-reduit) .fiche-lignes dt { font-size: 13px; line-height: 1.4; }
  html.js:not(.mouvement-reduit) .fiche-lignes dd { font-size: 15.5px; line-height: 1.45; }
  html.js:not(.mouvement-reduit) .fiche-preuve { margin-top: 10px; font-size: 14.5px; line-height: 1.45; }
  html.js:not(.mouvement-reduit) .fiche-action { margin-top: 8px; }
  html.js:not(.mouvement-reduit) .fiche-action .bouton { min-height: 44px; padding: 10px 16px; font-size: 15px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  html.js:not(.mouvement-reduit) .portes .bouton-contour, html.js:not(.mouvement-reduit) .indice { display: none; }
  html.js:not(.mouvement-reduit) .fiche { padding: 10px 14px; }
  html.js:not(.mouvement-reduit) .fiche-nom { font-size: 26px; margin-top: 4px; }
  /* le slogan redit « Dans votre journée » (une idée, une fois) : il cède sa ligne à l'arbre ; il reste au bureau et en mouvement coupé */
  html.js:not(.mouvement-reduit) .plateforme .fiche-slogan { display: none; }
  html.js:not(.mouvement-reduit) .fiche-encart { margin-top: 6px; padding: 6px 10px; }
  html.js:not(.mouvement-reduit) .encart-slogan { font-size: 16px; }
  html.js:not(.mouvement-reduit) .fiche-lignes { margin-top: 6px; }
  /* écran court : l'intitulé de chaque ligne passe en tête de sa phrase (une ligne de moins par rubrique, rien de retiré) */
  html.js:not(.mouvement-reduit) .fiche-lignes > div { display: block; padding: 4px 0; font-size: 15px; line-height: 1.38; }
  html.js:not(.mouvement-reduit) .fiche-lignes dt { display: inline; padding: 0; line-height: inherit; }
  html.js:not(.mouvement-reduit) .fiche-lignes dt::after { content: " :"; }
  html.js:not(.mouvement-reduit) .fiche-lignes dd { display: inline; margin-left: .3em; font-size: 15px; line-height: 1.38; }
  html.js:not(.mouvement-reduit) .fiche-preuve { margin-top: 6px; font-size: 14px; line-height: 1.36; }
  html.js:not(.mouvement-reduit) .fiche-action { margin-top: 4px; }
  html.js:not(.mouvement-reduit) .fiche-action .lien-doux { min-height: 36px; }
}
@media (min-width: 900px) {
  html.js:not(.mouvement-reduit) .heros-texte { left: var(--col-g); right: auto; top: 50%; width: min(40vw, 560px); max-width: none; transform: translateY(-46%); gap: 22px; }
  html.js:not(.mouvement-reduit) .heros-texte::before { content: ""; position: absolute; z-index: -1; inset: -12% -18% -12% -40vw; pointer-events: none; background: linear-gradient(90deg, rgb(6 11 24 / .9) 0 70%, rgb(6 11 24 / 0)); transition: opacity 300ms var(--sk-ease-ui); }
  html.js:not(.mouvement-reduit) .heros-texte.eteint::before { opacity: 0; }
  html.js:not(.mouvement-reduit) .pile > .bloc { left: var(--col-g); right: auto; width: min(36vw, 520px); }
  html.js:not(.mouvement-reduit) .intro { padding-top: 6vh; }
  html.js:not(.mouvement-reduit) .fiche-symbole { display: none; }
}
@media (min-width: 900px) and (max-height: 780px) {
  html.js:not(.mouvement-reduit) .fiche { padding: 22px 26px 20px; }
  html.js:not(.mouvement-reduit) .fiche-lignes > div { padding: 8px 0; }
  html.js:not(.mouvement-reduit) .fiche-lignes dd { font-size: 16px; line-height: 1.45; }
  html.js:not(.mouvement-reduit) .fiche-nom { font-size: 34px; margin-top: 8px; }
}
/* La finale en course : le texte et le symbole restent à l'écran pendant que la lumière monte. */
html.js:not(.mouvement-reduit) .finale-active .symbole-image { opacity: 0; }
html.js:not(.mouvement-reduit) .finale-active .lueur { opacity: 0; }
html.js:not(.mouvement-reduit) .finale-active .finale-toile { display: block; }
html.js:not(.mouvement-reduit) .finale-active .finale-nom:not(.ecrit) { clip-path: inset(0 100% 0 0); }
@media (min-width: 900px) {
  html.js:not(.mouvement-reduit) .finale-course { min-height: 140vh; min-height: 140svh; }
  html.js:not(.mouvement-reduit) .finale { padding-top: 0; }
  html.js:not(.mouvement-reduit) .finale-texte-int { justify-content: flex-start; padding-top: 5vh; }
  html.js:not(.mouvement-reduit) .finale-texte-int, html.js:not(.mouvement-reduit) .finale-scene { position: sticky; top: var(--entete-h); height: calc(100vh - var(--entete-h)); height: calc(100svh - var(--entete-h)); min-height: 0; }
}
@media (max-width: 899px) {
  html.js:not(.mouvement-reduit) .finale-course { display: flex; flex-direction: column; }
  html.js:not(.mouvement-reduit) .finale-scene-course { order: 0; height: 115vh; height: 115svh; }
  html.js:not(.mouvement-reduit) .finale-scene { position: sticky; top: var(--entete-h); height: calc(100svh - var(--entete-h)); display: flex; flex-direction: column; justify-content: center; padding: 0; }
  html.js:not(.mouvement-reduit) .finale-texte { order: 1; }
}

/* =====================================================================
   Mouvement réduit : scènes à hauteur naturelle, une image fixe par chapitre, tout le texte visible.
   Chaque règle écrite deux fois : préférence du système (sans choix contraire) et classe posée par le bouton.
   ===================================================================== */
html.js.mouvement-reduit .planche { display: block; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; justify-self: center; }
html.js.mouvement-reduit .planche-heros { max-width: 520px; }
html.js.mouvement-reduit .fiche-symbole { display: block; }
html.js.mouvement-reduit .mot-cle { color: var(--or); }
html.js.mouvement-reduit .bulle, html.js.mouvement-reduit .indice { transition: none; }
/* Bulle statique de chaque planche (bureau) : le symbole et le nom à droite du nœud or, comme l'état final de la scène animée.
   La planche s'aligne sur le haut de sa fiche ; common.js y dessine la couronne en haut et pose la bulle. */
.bulle-planche { display: none; }
@media (min-width: 900px) {
  html.js.mouvement-reduit .plateforme, html.js.mouvement-reduit .a-venir { align-items: start; }
  html.js.mouvement-reduit .plateforme .planche, html.js.mouvement-reduit .a-venir .planche { aspect-ratio: 4 / 3; justify-self: start; }
  html.js.mouvement-reduit .bulle-planche { display: flex; z-index: 1; }
  html.js.mouvement-reduit .bulle-planche.posee { opacity: 1; visibility: visible; scale: 1; }
  html.js.mouvement-reduit .bulle-planche::before { transform: none; transition: none; }
}
@media (max-width: 899px) {
  html.js.mouvement-reduit .plateforme .planche, html.js.mouvement-reduit .a-venir .planche { max-width: 300px; margin: 0 auto 20px; }
  html.js.mouvement-reduit .planche-heros { max-width: 260px; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.choix-normal) .bouton, html:not(.choix-normal) .bascule, html:not(.choix-normal) .bulle, html:not(.choix-normal) .mot-cle { transition: none; }
  html:not(.choix-normal) .barre-mobile, html:not(.choix-normal) .barre-mobile.est-visible { transform: none; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  html:not(.choix-normal) .barre-mobile { opacity: 0; }
  html:not(.choix-normal) .barre-mobile.est-visible { opacity: 1; transition: opacity 200ms linear, visibility 0s; }
  html:not(.choix-normal) .bouton:active { transform: none; }
}
html.mouvement-reduit .bouton, html.mouvement-reduit .bascule, html.mouvement-reduit .mot-cle { transition: none; }
html.mouvement-reduit .bouton:active { transform: none; }
html.mouvement-reduit .barre-mobile, html.mouvement-reduit .barre-mobile.est-visible { transform: none; }
html.mouvement-reduit .barre-mobile { opacity: 0; transition: opacity 200ms linear, visibility 0s linear 200ms; }
html.mouvement-reduit .barre-mobile.est-visible { opacity: 1; transition: opacity 200ms linear, visibility 0s; }
/* L'ombre se lit d'abord en retrait ; quand la lumière arrive, elle prend sa pleine couleur (9:1 puis 15:1 sur la nuit). */
html.js:not(.mouvement-reduit) .h1-ombre { color: rgb(248 246 241 / .7); }
html.js:not(.mouvement-reduit) .lumiere .h1-ombre { color: rgb(248 246 241 / .86); }

/* Tour 9 : les trois nouvelles scènes gardent leur propre marge intérieure (le cadre la complète : 20 px au téléphone, 40 px au bureau, comme ailleurs). */
:is(.oeuvres, .chemin) > .cadre { padding-inline: 8px; }
@media (min-width: 900px) { :is(.oeuvres, .chemin) > .cadre { padding-inline: 24px; } }

/* Tour 13 (Sébastien) : « le footer doit être géré aussi en harmonie avec le plan précédent » : le pied prend le marine de la finale. */
html.fond-pied { background: var(--marine); }
.pied { background: var(--marine); color: #DCE5F5; border-top: 1px solid rgb(248 246 241 / .14); }
.pied :focus-visible { outline-color: var(--or); }
.pied a { color: var(--creme); text-decoration-color: rgb(248 246 241 / .45); }
.pied .mot-symbole, .pied .pied-marque { color: var(--creme); }
.pied .ms-k { color: var(--nuit); }
.pied .sources summary { color: var(--creme); }
.pied .sources li { color: #DCE5F5; }
.pied .pied-legal li a { color: var(--creme); }
/* Sur le marine, « teK » passe en crème sur un trait d'or plus fin (le noir sur le marine tombait à 2,2:1) ; l'accroche prend l'or clair. */
.finale .fn-tek, .pied .ms-k { color: var(--creme); background: linear-gradient(transparent 80%, var(--or) 80% 94%, transparent 94%); }
.finale .finale-entree { color: #F0C85C; }
.finale .fn-tek, .pied .ms-k { position: relative; background: none; }
.finale .fn-tek::after, .pied .ms-k::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .13em; border-radius: .04em; background: var(--or); pointer-events: none; }

/* Tour 14 (Sébastien, 2026-10-20) : les cartes des métiers sur fond or, flottant à droite, superposées sans se masquer ;
   le pied sur fond or. Texte nuit sur or : 10,2:1. */
.onde-carte { left: auto; right: calc(5vw + var(--rx)); top: calc(50% + var(--ty)); width: 252px; padding: 12px 16px 13px; border-radius: 12px;
  background: var(--or); border: 1px solid rgb(6 11 24 / .14); box-shadow: 0 16px 30px -16px rgb(0 0 0 / .75); -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translate(var(--fx), var(--fy)) scale(.94); }
.onde-carte.active { border-color: rgb(6 11 24 / .14); box-shadow: 0 0 0 2px var(--nuit), 0 16px 30px -16px rgb(0 0 0 / .75); }
.oc-verbe { color: var(--nuit); }
.oc-verbe::before { box-shadow: 0 0 0 1.5px var(--nuit); }
.oc-mot { color: var(--nuit); }
.onde-carte[data-carte="0"] { --rx: 0px; --ty: -170px; --fx: 70px; --fy: 0px; }
.onde-carte[data-carte="1"] { --rx: 16px; --ty: -100px; --fx: 70px; --fy: 0px; }
.onde-carte[data-carte="2"] { --rx: 32px; --ty: -30px; --fx: 70px; --fy: 0px; }
.onde-carte[data-carte="3"] { --rx: 48px; --ty: 40px; --fx: 70px; --fy: 0px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="0"] { --rx: 0px; --ty: -150px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="1"] { --rx: 8px; --ty: -90px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="2"] { --rx: 16px; --ty: -30px; }
html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="3"] { --rx: 24px; --ty: 30px; }
@media (max-width: 899px) {
  .onde-carte { right: calc(16px + var(--rx)); top: calc(var(--sy, 33%) + var(--ty)); width: 156px; padding: 7px 10px 8px; }
  .onde-carte[data-carte="0"] { --rx: 0px; --ty: 26px; --fx: 40px; }
  .onde-carte[data-carte="1"] { --rx: 6px; --ty: 62px; --fx: 40px; }
  .onde-carte[data-carte="2"] { --rx: 12px; --ty: 98px; --fx: 40px; }
  .onde-carte[data-carte="3"] { --rx: 18px; --ty: 134px; --fx: 40px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="0"] { --rx: 0px; --ty: 34px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="1"] { --rx: 4px; --ty: 66px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="2"] { --rx: 8px; --ty: 98px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="3"] { --rx: 12px; --ty: 130px; }
}
html.fond-pied { background: var(--or); }
.pied { background: var(--or); color: var(--nuit); border-top: 0; }
.pied :focus-visible { outline-color: var(--nuit); }
.pied a, .pied .pied-legal li a { color: var(--nuit); text-decoration-color: rgb(6 11 24 / .5); }
.pied .mot-symbole, .pied .pied-marque { color: var(--nuit); }
.pied .ms-k { color: var(--nuit); }
.pied .ms-k::after { background: var(--nuit); }
.pied .sources summary, .pied .sources li { color: var(--nuit); }
@media (max-width: 899px) {
  .oc-long { display: none; }                         /* au téléphone, le verbe seul : chaque carte tient sur deux lignes et reste lisible sous la suivante */
  .onde-carte { width: 150px; }
  .onde-carte[data-carte="0"] { --ty: 18px; } .onde-carte[data-carte="1"] { --ty: 66px; } .onde-carte[data-carte="2"] { --ty: 114px; } .onde-carte[data-carte="3"] { --ty: 162px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="0"] { --ty: 24px; } html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="1"] { --ty: 68px; }
  html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="2"] { --ty: 112px; } html.js:not(.mouvement-reduit) .ondes-js.final .onde-carte[data-carte="3"] { --ty: 156px; }
}
@media (max-width: 899px) { .onde-carte { width: 184px; } .oc-mot { font-size: 14px; white-space: nowrap; } }

/* Tour 16 : la ligne de progression de la scène des ondes, remplie au fil du défilement (common.js). */
.ondes-progres { display: none; }
html.js:not(.mouvement-reduit) .ondes-js .ondes-progres { display: block; position: absolute; left: 7vw; bottom: 4vh; width: min(36rem, 42vw); height: 2px; margin: 0; background: rgb(248 246 241 / .16); border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity 400ms var(--sk-ease-ui); }
html.js:not(.mouvement-reduit) .ondes-js.vue .ondes-progres { opacity: 1; }
html.js:not(.mouvement-reduit) .ondes-js.plonge .ondes-progres { opacity: 0; }
.ondes-progres i { display: block; height: 100%; background: var(--or); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) { html.js:not(.mouvement-reduit) .ondes-js .ondes-progres { left: 20px; right: 20px; width: auto; bottom: calc(10vh + env(safe-area-inset-bottom)); } }
/* Tour 17 : la bande « Sources des chiffres » du lot (entre la finale et le pied) prend le marine de la finale. */
.sources-chiffres { background: var(--marine); color: var(--creme); }
.sources-chiffres .sources summary, .sources-chiffres .sources li { color: var(--creme); }
.sources-chiffres :focus-visible { outline-color: var(--or); }
/* Tour 18 (Sébastien, 2026-10-20) : les blocs « À partir de » sur fond or, texte nuit (10,2:1) ; le surlignage or du prix devient un trait nuit. */
.intro-prix { background: var(--or); border-color: rgb(6 11 24 / .14); color: var(--nuit); }
.ip-de, .ip-unite { color: var(--nuit); }
.ip-montant { position: relative; color: var(--nuit); background: none; }
.ip-montant::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: .04em; height: .1em; border-radius: .05em; background: var(--nuit); transform-origin: 0 50%; }
html.js:not(.mouvement-reduit) .pile .ip-montant::after { transition: scale 560ms var(--sk-ease-pose) 240ms; }
html.js:not(.mouvement-reduit) .pile .intro-prix:not(.vu) .ip-montant::after { scale: 0 1; transition-delay: 0ms; }
/* Tour 23 (Sébastien, 2026-10-20) : le pied de page prolonge le sol de la forêt ; la bande des sources du lot aussi. Texte crème sur nuit (17:1), soulignés or. */
html.fond-pied { background: var(--nuit); }
.pied, .sources-chiffres { background: var(--nuit); color: #DCE5F5; border-top: 0; }
.pied :focus-visible, .sources-chiffres :focus-visible { outline-color: var(--or); }
.pied a, .pied .pied-legal li a { color: var(--creme); text-decoration-color: rgb(248 246 241 / .45); }
.pied .mot-symbole, .pied .pied-marque, .pied .ms-k { color: var(--creme); }
.pied .ms-k::after { background: var(--or); }
.pied .sources summary, .sources-chiffres .sources summary { color: var(--creme); }
.pied .sources li, .sources-chiffres .sources li { color: #DCE5F5; }
.pied .pied-meta { color: #B8C6DE; }                 /* la mention du pied du lot, lisible sur la nuit (10:1) */
/* Tour 24 (Sébastien, 2026-10-20) : au bureau, le médaillon laisse la place à l'arbre géant planté dans la forêt, sous une éclipse (common.js, « foret-finale ») ; sa place reste réservée pour le nom. */
@media (min-width: 900px) { .finale.foret-ciel .figure, .finale.foret-ciel .finale-toile { visibility: hidden; } }
/* Tour 24 (Sébastien, 2026-10-20) : « Souverain » et « Croissant », deux promesses en or, l'explication dessous ; les coches or devant les gains des équipes. Or sur nuit : 10,2:1. */
.onde-promesses { margin-top: 20px; display: grid; gap: 16px; max-width: 40ch; }
.op-mot { display: block; font: 600 clamp(24px, 2.3vw, 32px)/1.1 var(--police-titre); letter-spacing: -.01em; color: var(--or); }
.op-texte { display: block; margin-top: 4px; font-size: 18px; line-height: 1.5; color: #C9D5EA; }
.onde-coches { margin-top: 20px; display: grid; gap: 12px; max-width: 42ch; }
.onde-coches li { position: relative; padding-left: 38px; font-size: 18px; line-height: 1.5; color: #C9D5EA; }
.onde-coches li::before { content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%; background: var(--or); }
.onde-coches li::after { content: ""; position: absolute; left: 9px; top: calc(.15em + 5px); width: 6px; height: 11px; border: solid var(--nuit); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
@media (max-width: 899px) {
  .onde-promesses, .onde-coches { margin-top: 12px; gap: 10px; }
  .op-mot { font-size: 22px; } .op-texte, .onde-coches li { font-size: 16px; }
  .onde-carte[data-carte="1"] .oc-mot { white-space: normal; }
}
@media (max-width: 899px) {                                  /* au téléphone, le plan « Régler » passe sous la quatrième carte */
  html.js:not(.mouvement-reduit) .ondes-js .onde-plan[data-plan="5"] .onde-grand { font-size: 24px; }
  html.js:not(.mouvement-reduit) .ondes-js .onde-plan[data-plan="5"] .onde-verbe { margin-bottom: 8px; }
  .onde-coches { margin-top: 10px; gap: 8px; } .onde-coches li { font-size: 15px; padding-left: 34px; }
}
/* Tour 27 (Sébastien, 2026-10-20) : repères et ligne de progression des plateformes, comme dans les ondes (sur le crème : marine,
   l'or toujours cerné de marine) ; invitation à défiler après 3 s sans geste ; raccourci flottant pour remonter. */
.pf-suivi { display: none; }
html.js:not(.mouvement-reduit) .pf-suivi { display: block; position: absolute; z-index: 3; left: var(--gout); bottom: 4.5vh; width: min(40rem, 46vw); padding-left: max(0px, calc(var(--col-g, 0px) - var(--gout))); opacity: 0; transition: opacity 420ms var(--sk-ease-ui); pointer-events: none; }
html.js:not(.mouvement-reduit) .pf-suivi.vu { opacity: 1; }
.pf-rail { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.pf-rail li { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--police-titre); color: #4A6690; transition: color 300ms var(--sk-ease-ui); }
.pf-point { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 300ms var(--sk-ease-ui), border-color 300ms var(--sk-ease-ui), scale 420ms var(--sk-ease-pose); }
.pf-rail li.passe { color: var(--marine); }
.pf-rail li.passe .pf-point { background: var(--marine); }
.pf-rail li.actif { color: var(--marine); }
.pf-rail li.actif .pf-point { background: var(--or); border: 2px solid var(--marine); scale: 1.25; }
.pf-progres { position: relative; height: 2px; margin: 14px 0 0; background: rgb(24 73 137 / .16); border-radius: 1px; overflow: hidden; }
.pf-progres i { display: block; height: 100%; background: var(--marine); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) {
  html.js:not(.mouvement-reduit) .pf-suivi { left: 20px; right: 20px; width: auto; padding-left: 0; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pf-pre { display: none; }
  .pf-rail { gap: 8px 16px; flex-wrap: nowrap; }
}

.invite { position: fixed; z-index: 44; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: min(92vw, 34rem); margin: 0; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--nuit); border: 1px solid rgb(248 246 241 / .18); box-shadow: 0 8px 28px rgb(6 11 24 / .28); color: var(--creme); font: 500 14px/1.35 var(--police-titre); pointer-events: none; opacity: 0; translate: -50% 12px; visibility: hidden; transition: opacity 420ms var(--sk-ease-ui), translate 520ms var(--sk-ease-pose), visibility 0s linear 420ms; }
.invite.montre { opacity: 1; translate: -50% 0; visibility: visible; transition: opacity 600ms var(--sk-ease-pose), translate 760ms var(--sk-ease-pose), visibility 0s; }
.invite-souris { flex: none; position: relative; width: 18px; height: 28px; border: 2px solid var(--or); border-radius: 10px; }
.invite-souris i { position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--or); }
html:not(.mouvement-reduit) .invite.montre .invite-souris i { animation: invite-molette 1.8s var(--sk-ease-ui) infinite; }
@keyframes invite-molette { 0% { translate: 0 0; opacity: 1; } 60% { translate: 0 9px; opacity: 0; } 61% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }

.remonter { position: fixed; z-index: 44; right: calc(20px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgb(248 246 241 / .28); background: var(--nuit); color: var(--or); box-shadow: 0 8px 24px rgb(6 11 24 / .3); cursor: pointer; opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity 260ms var(--sk-ease-ui), translate 260ms var(--sk-ease-ui), visibility 0s linear 260ms; }
.remonter.est-visible { opacity: 1; translate: none; visibility: visible; transition: opacity 260ms var(--sk-ease-ui), translate 260ms var(--sk-ease-ui), visibility 0s; }
.remonter:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .remonter:hover { translate: 0 -2px; box-shadow: 0 12px 28px rgb(6 11 24 / .36); } }
.remonter:active { scale: .97; }
@media (max-width: 899px) {
  .invite, .remonter { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .invite { font-size: 13px; padding: 9px 14px 9px 12px; }
}
/* Tour 27, réglages : l'invitation se pose en bas à droite, à côté du raccourci, pour ne jamais couvrir les repères ; au téléphone,
   centrée, sur la largeur utile, au-dessus de la barre d'appel quand celle-ci est là. */
.invite { left: auto; right: calc(84px + env(safe-area-inset-right)); width: max-content; max-width: min(calc(100vw - 120px), 27rem); translate: 0 12px; }
.invite.montre { translate: 0 0; }
@media (max-width: 899px) {
  .invite { left: 50%; right: auto; max-width: calc(100vw - 32px); translate: -50% 12px; bottom: calc(22px + env(safe-area-inset-bottom)); }
  .invite.montre { translate: -50% 0; }
  .remonter { bottom: calc(22px + env(safe-area-inset-bottom)); }
  html:has(.barre-mobile[class~="visible"], .barre-mobile.est-visible) :is(.invite, .remonter) { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .invite.montre ~ .remonter { opacity: 0; visibility: hidden; }
}
@media (max-width: 899px) {                                  /* au téléphone, les repères passent sous l'en-tête, au-dessus de l'arbre : la fiche garde tout le bas */
  html.js:not(.mouvement-reduit) .pf-suivi { position: fixed; top: calc(var(--entete-h) + 10px); bottom: auto; }
  html.js:not(.mouvement-reduit) .pf-suivi .pf-progres { margin-top: 8px; }
}
/* Tour 28 : le témoin de l'enregistreur de défilement (« ?mesure » dans l'adresse), discret, en bas à gauche. */
.mesure-badge { position: fixed; z-index: 60; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--nuit); color: var(--creme); font: 500 13px/1 var(--police-titre); box-shadow: 0 6px 18px rgb(6 11 24 / .3); }
.mesure-point { width: 9px; height: 9px; border-radius: 50%; background: #E2574C; }
html:not(.mouvement-reduit) .mesure-point { animation: mesure-pouls 1.6s ease-in-out infinite; }
@keyframes mesure-pouls { 50% { opacity: .35; } }
.mesure-badge button { min-height: 32px; padding: 0 12px; border: 1px solid rgb(248 246 241 / .35); border-radius: 999px; background: transparent; color: var(--creme); font: inherit; cursor: pointer; }
/* Tour 30 (Sébastien : « gros bug pour Où en est votre arbre, ça disparaît ») : le ciel collé du carnet (hauteur d'un écran, marge
   basse négative) débordait d'un écran sur la section suivante et la couvrait de sable. Le vol est coupé à la limite de sa section ;
   « clip » ne crée pas de conteneur de défilement, le ciel reste collé pendant le vol. */
.carnet-vol .vol { overflow: clip; }
/* Tour 30 (Sébastien) : sous « Conformité », le label jaune « 61 points de contrôle qualité à chaque mise à jour » (or, texte nuit 10,2:1). */
.cl-label { display: block; width: fit-content; max-width: 15rem; margin-top: 10px; padding: 5px 11px; border-radius: 8px; background: var(--or); color: var(--nuit); font: 600 13px/1.35 var(--police-titre); letter-spacing: 0; text-transform: none; }
/* Tour 32 : le témoin de rythme, quand la page retient un geste (common.js). Nuit, texte crème, anneau or qui tourne ; au-dessus de tout le reste du bas d'écran. */
.temoin-rythme { position: fixed; z-index: 46; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--nuit); border: 1px solid rgb(248 246 241 / .18); box-shadow: 0 8px 24px rgb(6 11 24 / .28); color: var(--creme); font: 500 14px/1 var(--police-titre); pointer-events: none; opacity: 0; translate: -50% 10px; visibility: hidden; transition: opacity 220ms var(--sk-ease-ui), translate 260ms var(--sk-ease-ui), visibility 0s linear 220ms; }
.temoin-rythme.montre { opacity: 1; translate: -50% 0; visibility: visible; transition: opacity 180ms var(--sk-ease-ui), translate 220ms var(--sk-ease-pose), visibility 0s; }
.tr-anneau { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(232 179 56 / .3); border-top-color: var(--or); }
.temoin-rythme.montre .tr-anneau { animation: tr-tour 900ms linear infinite; }
@keyframes tr-tour { to { rotate: 360deg; } }
html:has(.temoin-rythme.montre) .invite { opacity: 0; visibility: hidden; }
@media (max-width: 899px) { html:has(.barre-mobile[class~="visible"], .barre-mobile.est-visible) .temoin-rythme { bottom: calc(92px + env(safe-area-inset-bottom)); } }