/* =========================================================================
   Kairos, site v6 du 2026-09-16. Feuille UNIQUE.
   Design arrete au contrat `00-contrat-v6.md` section 1 : variante B de la
   proposition du 16/09 (Figtree, bleu Kairos, bandeau d'en-tete bleu nuit,
   corps clair, cartes lavande, pied sombre), appliquee a l'integralite du site.

   Trois differenciants NOMMES, a verifier sur le rendu et nulle part ailleurs :
   1. la bascule nuit vers jour SANS COUTURE : chaque page ouvre sur un bandeau
      bleu nuit qui se fond dans le corps clair par une seule lueur froide, et
      se referme sur un pied nuit ;
   2. le RANG NUMEROTE comme signe unique : « 01 » a « 04 » en bleu profond,
      la meme marque sur les phases, les modules, le parcours et la frise de
      contact, jamais un autre vocabulaire de numerotation ;
   3. la CARTE SOMBRE DU FORMULAIRE : un seul objet sombre dans le corps clair,
      reserve a la saisie. Rien d'autre dans le corps n'est sombre.

   Toute valeur vit en jeton nomme ci-dessous. Les seules exceptions sont les
   geometries locales d'une maquette d'interface, groupees et commentees.

   AUCUN STYLE EN LIGNE dans les pages : la politique de securite du site porte
   `style-src 'self'` (voir `vercel.json`), qui bloque aussi bien une balise
   `<style>` qu'un attribut `style=""`. Les largeurs variables d'une jauge
   passent donc par les classes utilitaires `.p18` a `.p81`, en fin de feuille.
   ========================================================================= */

/* ====================== Police ========================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ====================== Jetons ========================================== */

:root {
  color-scheme: light;

  /* --- Nuit : les bandeaux d'en-tete, le pied, la carte du formulaire ----
     Bleu nuit derive du bleu Kairos, pas un noir neutre. */
  --nuit: #060b1e;
  --nuit-haute: #0a1132;
  --nuit-carte: #0c1430;      /* fond de la carte du formulaire */
  --nuit-champ: #141d3d;      /* fond d'un champ de saisie sur la carte */
  --nuit-texte: #aebbd8;      /* 9,7:1 sur --nuit */
  /* Un gris plus clair, pour le seul texte qui traverse la lueur d'un bandeau :
     sur le point le plus clair mesure (62, 81, 134), `--nuit-texte` tombe a
     3,96:1 et celui-ci tient 5,65:1. */
  --nuit-texte-fort: #d7e0f2;
  --nuit-filet: rgba(174, 187, 216, 0.22);
  --nuit-filet-fort: rgba(174, 187, 216, 0.38);

  /* --- Jour : le corps --------------------------------------------------- */
  --jour: #ffffff;
  --carte: #f4f6fd;           /* panneau lavande tres pale */
  --carte-creux: #eaeefa;     /* panneau interieur d'une vignette */
  --filet: #e4e9f6;
  --encre: #101b33;           /* 17:1 sur blanc */
  --encre-mi: #43506b;        /* 8,0:1 sur blanc */
  --gris: #5a6782;            /* 5,2:1 sur blanc et sur --carte */
  --gris-clair: #656f88;      /* 5,0:1 sur blanc */

  /* --- Accent : la famille bleue de Kairos ------------------------------
     Sur fond clair, seuls les deux arrets les plus sombres portent du texte ;
     les arrets clairs restent de l'ornement. */
  --accent-profond: #0e4ddf;  /* 6,2:1 sur blanc */
  --accent-sombre: #2f63ea;   /* borne claire du bouton : blanc a 5,1:1 */
  --accent: #4a7ef5;
  --accent-clair: #89a7ec;    /* 8,0:1 sur --nuit */

  --degrade-bouton: linear-gradient(118deg,
    var(--accent-profond) 0%, var(--accent-sombre) 38%,
    var(--accent-sombre) 62%, var(--accent-profond) 100%);
  --degrade-ornement: linear-gradient(118deg,
    var(--accent-profond) 0%, var(--accent) 34%,
    var(--accent-clair) 62%, var(--accent) 100%);

  /* --- Surfaces internes de la maquette d'ecran de l'accueil ------------- */
  --maq-chrome: #f1f4fb;
  --maq-feu: #d3daea;
  --maq-cote: #fafbfe;
  --maq-actif: #e9effc;
  --maq-puce: #eef2fc;
  --maq-entete: #f7f9fe;
  --maq-piste: #e8ecf7;

  /* --- Etats fonctionnels (jamais la marque) ----------------------------- */
  --etat-bas-texte: #a32316;      --etat-bas-fond: #fdeceb;
  --etat-attente-texte: #7d5200;  --etat-attente-fond: #fdf4e3;
  --etat-ok-texte: #0f6b45;       --etat-ok-fond: #e8f6ef;
  /* Les memes trois etats, lisibles sur la carte sombre du formulaire. */
  --etat-bas-nuit: #ff9d92;       /* 6,4:1 sur --nuit-carte */
  --etat-ok-nuit: #6fd7a8;        /* 9,1:1 sur --nuit-carte */

  /* --- Geometrie --------------------------------------------------------- */
  --conteneur: 1180px;
  --etroit: 760px;
  --lecture: 66ch;            /* largeur maximale d'une colonne de prose */
  --marge-laterale: clamp(20px, 5vw, 44px);
  --rayon-carte: 20px;
  --rayon-petit: 12px;
  --rayon-pilule: 999px;

  /* --- Rythme vertical ---------------------------------------------------- */
  --section-y: clamp(48px, 6.4vw, 84px);

  /* --- Profondeur --------------------------------------------------------- */
  --ombre-ecran: 0 34px 70px -24px rgba(4, 9, 28, 0.62), 0 4px 14px rgba(4, 9, 28, 0.18);
  --ombre-satellite: 0 16px 30px -14px rgba(4, 9, 28, 0.42);
  --ombre-bouton: 0 10px 22px -12px rgba(14, 77, 223, 0.7);
  --ombre-carte: 0 26px 54px -26px rgba(4, 9, 28, 0.46);

  /* --- Typographie --------------------------------------------------------
     Figtree a un oeil plus grand et une chasse plus etroite que la police du
     site v5 : la borne haute du titre et les interlettrages sont un cran plus
     serres, exactement comme dans la variante B retenue. */
  --police: "Figtree", "Helvetica Neue", system-ui, sans-serif;
  --t-h1: clamp(2.05rem, 1.02rem + 3.4vw, 3.85rem);
  --t-h2: clamp(1.6rem, 1.05rem + 2.1vw, 2.7rem);
  --t-h3: 1.08rem;
  --t-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  --t-corps: 1rem;
  --t-petit: 0.9375rem;
  --t-mini: 0.875rem;
  --t-kicker: 0.72rem;

  /* --- Mouvement (charte du contrat v7, section 0) -----------------------
     Une entree dure de 0,4 a 0,9 s, une boucle de 6 a 12 s, la courbe est
     douce et unique. Toute animation du site lit ces trois jetons : aucune
     duree ne se reecrit dans une feuille de page. */
  --duree-entree: 0.62s;
  --duree-boucle: 9s;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  /* Derive de la boucle, pour les derives tres lentes (lueur d'un bandeau,
     bordure aurore d'une carte sombre). */
  --duree-derive: 20s;
  --duree-aurore: 12s;

  /* --- Les quatre teintes de phase (decision A.2 du 17/09) ---------------
     Quatre nuances du SEUL bleu Kairos, du plus clair au plus profond :
     01 Audit clair, 02 Structuration moyen, 03 Automatisation electrique,
     04 Maintien profond. Les quatre `--phase-N` sont exactement les quatre
     arrets de la famille d'accent choisis par Jonathan.

     Chaque phase a QUATRE membres parce qu'une seule valeur ne peut pas
     etre a la fois un ornement vif et un texte lisible :
       --phase-N        identite, aplats et ornements. Ne porte JAMAIS de texte.
       --phase-N-encre  le membre lisible sur fond clair (au moins 4,5:1 sur
                        --carte, sur --jour et sur --phase-N-fond).
       --phase-N-clair  le membre lisible sur fond nuit (au moins 4,5:1 sur
                        --nuit et sur --nuit-haute).
       --phase-N-fond   le lavis pale d'une pastille ou d'une tuile claire.
     Mesures : voir `11-fondations-v7.md` section 4. */
  --phase-1: #89a7ec;  --phase-1-encre: #3163d8;  --phase-1-clair: #bcd0fb;  --phase-1-fond: #e9effc;
  --phase-2: #4a7ef5;  --phase-2-encre: #2a55c4;  --phase-2-clair: #9fbaf6;  --phase-2-fond: #e3ebfc;
  --phase-3: #2f63ea;  --phase-3-encre: #1c3f9c;  --phase-3-clair: #89a7ec;  --phase-3-fond: #dee7fb;
  --phase-4: #0e4ddf;  --phase-4-encre: #132a66;  --phase-4-clair: #6f92e8;  --phase-4-fond: #d9e1f7;

  /* --- Le fondu nuit vers jour (decision B : la FINESSE, pas la longueur) -
     UNE seule liste d'arrets pour TOUS les bords de bande du site, haut comme
     bas. Neuf arrets poses sur une courbe douce (depart lent, arrivee lente),
     pour qu'aucune marche ne se voie. `--arrets-fondu` est la liste seule :
     l'angle se choisit a l'emploi, 180deg pour un fondu vers le bas,
     0deg pour un fondu vers le haut. La version en interpolation perceptive
     (`in oklab`) est posee plus bas, sous @supports. */
  --arrets-fondu:
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.02) 14%,
    rgba(255, 255, 255, 0.08) 28%,
    rgba(255, 255, 255, 0.20) 42%,
    rgba(255, 255, 255, 0.38) 56%,
    rgba(255, 255, 255, 0.60) 70%,
    rgba(255, 255, 255, 0.83) 84%,
    rgba(255, 255, 255, 0.94) 92%,
    var(--jour) 100%;
  --fondu-vers-jour: linear-gradient(180deg, var(--arrets-fondu));
  --fondu-depuis-jour: linear-gradient(0deg, var(--arrets-fondu));
  /* Hauteur du fondu d'une bande. C'est CELLE de l'en-tete interieur actuel :
     la decision B ne change aucune hauteur, seulement la finesse. */
  --h-fondu: clamp(56px, 6vw, 92px);

  /* --- Profondeur des cartes (systeme du contrat v7, section 1.2) -------- */
  --ombre-carte-repos: 0 1px 2px rgba(4, 9, 28, 0.05), 0 12px 26px -18px rgba(4, 9, 28, 0.30);
  --ombre-carte-levee: 0 2px 4px rgba(4, 9, 28, 0.06), 0 26px 48px -22px rgba(4, 9, 28, 0.38);
  --filet-interieur: inset 0 0 0 1px rgba(16, 27, 51, 0.06);
}

/* Le meme fondu, interpole en oklab : c'est lui qui supprime la marche que
   l'interpolation en sRGB laissait au milieu de la course. Les navigateurs qui
   ne lisent pas `in oklab` gardent la version sRGB declaree ci-dessus. */
@supports (background: linear-gradient(in oklab, #000, #fff)) {
  :root {
    --fondu-vers-jour: linear-gradient(180deg in oklab, var(--arrets-fondu));
    --fondu-depuis-jour: linear-gradient(0deg in oklab, var(--arrets-fondu));
  }
}

/* Les quatre signes de phase portent leur epaisseur de trait SUR LE SYMBOLE, et
   non sur le `<svg class="icone">` qui l'appelle. Raison : `.icone` vaut 2 pour
   tout le reste du site (herite de la v6, on n'y touche pas), alors que la
   direction artistique demande 1,7 pour ces quatre signes. Une regle posee sur
   les enfants du `<symbol>` est calculee sur l'element d'origine, donc le clone
   de `<use>` la porte partout, dans une tuile comme ailleurs, sans qu'une page
   ait a se souvenir d'une classe de plus. */
#i-phase-1 > *, #i-phase-2 > *, #i-phase-3 > *, #i-phase-4 > * {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================================
   LES TEINTES DE PHASE A L'EMPLOI
   Un seul mecanisme : poser `data-phase="1"` a `"4"` sur N'IMPORTE QUEL
   element publie les quatre membres de la phase sous les noms neutres
   `--teinte`, `--teinte-encre`, `--teinte-clair` et `--teinte-fond`. Tout ce
   qui vit dans cet element les lit sans savoir de quelle phase il s'agit.
   Un element sans `data-phase` garde l'accent general du site : chaque emploi
   ecrit donc `var(--teinte-encre, var(--accent-profond))` et non `var(--teinte-encre)`.
   ========================================================================= */

[data-phase="1"] { --teinte: var(--phase-1); --teinte-encre: var(--phase-1-encre); --teinte-clair: var(--phase-1-clair); --teinte-fond: var(--phase-1-fond); }
[data-phase="2"] { --teinte: var(--phase-2); --teinte-encre: var(--phase-2-encre); --teinte-clair: var(--phase-2-clair); --teinte-fond: var(--phase-2-fond); }
[data-phase="3"] { --teinte: var(--phase-3); --teinte-encre: var(--phase-3-encre); --teinte-clair: var(--phase-3-clair); --teinte-fond: var(--phase-3-fond); }
[data-phase="4"] { --teinte: var(--phase-4); --teinte-encre: var(--phase-4-encre); --teinte-clair: var(--phase-4-clair); --teinte-fond: var(--phase-4-fond); }

/* ====================== Socle ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--jour);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* garde-fou : les satellites de la maquette debordent */
}

img { max-width: 100%; height: auto; }

/* `app.js` masque et demasque le badge de preorientation, l'etat vide de la
   page articles et le lien de secours du rendez-vous par l'attribut `hidden`.
   Une classe qui pose `display: flex` ou `grid` l'emporterait sur la regle par
   defaut du navigateur : sans cette ligne, un bloc « masque » reste visible. */
[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.032em;
  font-weight: 800;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}
.conteneur--etroit { max-width: calc(var(--etroit) + 2 * var(--marge-laterale)); }
/* Les pages v5 imbriquent parfois un conteneur dans un autre : le second ne
   doit ni re-marger ni re-borner. */
.conteneur .conteneur { max-width: none; padding-inline: 0; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.evitement, .lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--jour); color: var(--encre);
  padding: 10px 16px; border-radius: var(--rayon-petit);
  font-weight: 700; text-decoration: none;
}
.evitement:focus-visible, .lien-evitement:focus-visible { top: 12px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur fond nuit, le bleu d'accent ne se detache pas assez : on passe au blanc. */
.barre :focus-visible, .entete :focus-visible, .heros :focus-visible,
.pied :focus-visible, .carte-formulaire :focus-visible {
  outline-color: var(--jour);
}

/* Le bloc de symboles SVG herite du site v5 : il ne doit rien occuper. */
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ====================== Typographie partagee ============================= */

.kicker {
  display: block;
  margin: 0 0 14px;
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-profond);
}
.kicker--nuit, .entete .kicker, .heros .kicker { color: var(--accent-clair); }

.titre-section {
  font-size: var(--t-h2);
  text-wrap: balance;
}
.titre-section--gauche { text-align: left; }

/* L'accent d'un titre : italique bleu. `em` dans les pages neuves,
   `.texte-accent` dans les chaines heritees du site v5. */
.titre-section em, .heros__titre em,
.titre-section .texte-accent, .heros__titre .texte-accent,
.entete-page__titre .texte-accent, .article__titre .texte-accent {
  font-style: italic;
  font-weight: 800;
  color: var(--accent-profond);
}
.heros__titre em, .heros__titre .texte-accent,
.entete .entete-page__titre .texte-accent { color: var(--accent-clair); }

.texte, .chapo, .intro-section, .texte-long p, .legal p, .couche__texte,
.faq__reponse, .parcours__texte, .carte__texte, .article__corps p {
  color: var(--gris);
  max-width: var(--lecture);
}
.texte { font-size: var(--t-corps); margin-top: 18px; }
.texte--intro, .intro-section, .chapo {
  font-size: var(--t-lead);
  color: var(--encre-mi);
}

.note, .note-section, .article__meta {
  font-size: var(--t-petit);
  color: var(--gris);
  max-width: var(--lecture);
}
.note, .note-section {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--filet);
}
.note--centre, .entete-bloc + .note-section, .section .note-section:last-child {
  margin: 34px auto 0;
  text-align: center;
  border-left: 0;
  padding-left: 0;
  max-width: 62ch;
}

/* Le filet d'accent des titres v5 : un court segment sous le titre. */
.filet-accent {
  border: 0;
  height: 3px;
  width: 64px;
  margin: 18px 0 0;
  border-radius: var(--rayon-pilule);
  background: var(--degrade-ornement);
}
.entete-bloc .filet-accent { margin-inline: auto; }
.filet-accent--court { width: 48px; }

/* ====================== Boutons ========================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--rayon-pilule);
  background: var(--degrade-bouton);
  color: var(--jour);
  font-weight: 800;
  font-size: var(--t-petit);
  font-family: inherit;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--ombre-bouton);
  border: 0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(14, 77, 223, 0.8); }
.bouton[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.bouton--compact { padding: 10px 18px; font-size: var(--t-mini); }
.bouton--grand { padding: 16px 32px; font-size: 1.02rem; }

.bouton--filet {
  background: transparent;
  color: var(--encre);
  border: 1.5px solid var(--filet);
  box-shadow: none;
}
.bouton--filet:hover { border-color: var(--accent); box-shadow: none; }

.bouton--discret {
  background: transparent;
  color: var(--accent-profond);
  box-shadow: none;
  padding: 8px 12px;
  text-decoration: underline;
}
.bouton--discret:hover { transform: none; box-shadow: none; }

/* Sur fond nuit : le bouton a filet devient blanc. */
.heros .bouton--filet, .entete .bouton--filet {
  color: var(--jour);
  border-color: var(--nuit-filet-fort);
}
.heros .bouton--filet:hover, .entete .bouton--filet:hover { border-color: var(--accent-clair); }

@media (prefers-reduced-motion: reduce) {
  .bouton, .carte { transition: none; }
  .bouton:hover { transform: none; }
}

/* ====================== Barre de navigation ============================== */

.barre {
  background: var(--nuit);
  position: relative;
  z-index: 3;
}
.barre__interieur {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
}

.signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--jour);
  flex: 0 0 auto;
}
.signature__icone { width: 30px; height: 30px; border-radius: 9px; }
.signature__mot { font-weight: 900; letter-spacing: 0.15em; font-size: 0.9rem; }

.nav {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  margin-inline: auto;
}
.nav__lien {
  color: var(--nuit-texte);
  text-decoration: none;
  font-size: var(--t-petit);
  font-weight: 600;
  display: inline-block;
  padding-block: 4px;     /* 2.5.8 : une cible fait au moins 24 px de haut */
}
.nav__lien:hover { color: var(--jour); }
.nav__lien[aria-current="page"] { color: var(--jour); font-weight: 800; }

/* --- Menu de repli mobile -------------------------------------------------
   Un `details` natif : il s'ouvre au clavier, annonce son etat replie ou
   deplie sans un seul attribut `aria-*` a tenir a jour, et ne demande aucun
   script. Le libelle change de mot a l'ouverture (cles `nav-menu-ouvrir` et
   `nav-menu-fermer`). */
.menu { display: none; position: relative; flex: 0 0 auto; }
.menu__bouton {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--nuit-filet-fort);
  color: var(--jour);
  font-size: var(--t-mini);
  font-weight: 800;
  cursor: pointer;
}
.menu__bouton::-webkit-details-marker { display: none; }
.menu__barres {
  display: grid;
  gap: 3px;
  width: 15px;
}
.menu__barres span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu[open] .menu__barres { display: none; }
.menu__mot--fermer { display: none; }
.menu[open] .menu__mot--ouvrir { display: none; }
.menu[open] .menu__mot--fermer { display: inline; }

.menu__panneau {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 220px;
  padding: 10px;
  border-radius: var(--rayon-petit);
  background: var(--nuit-haute);
  border: 1px solid var(--nuit-filet);
  box-shadow: var(--ombre-carte);
}
.menu__panneau a {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--nuit-texte);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-petit);
}
.menu__panneau a:hover { background: rgba(174, 187, 216, 0.12); color: var(--jour); }
.menu__panneau a[aria-current="page"] { color: var(--jour); }

@media (max-width: 899px) {
  .nav { display: none; }
  .menu { display: block; }
  .barre__interieur { justify-content: space-between; }
  .barre__cta { display: none; }   /* l'appel reste dans le menu et dans la page */
}
@media (max-width: 379px) {
  .signature__mot { display: none; }
}

/* ====================== Bandeau d'en-tete de page ======================== */
/* Le meme objet sur les dix pages : fond nuit, lueur froide en bas a droite,
   fondu vers le corps clair. L'accueil en est la variante haute (`.heros`). */

/* Le fond nuit et sa descente vers `--nuit-haute` vivent sur L'ELEMENT, et non
   plus sur le pseudo-element : c'est ce qui permet a la lueur radiale de deriver
   (transform sur `::before`) sans que le degrade de fond ne bouge avec elle. */
.entete, .heros {
  position: relative;
  isolation: isolate;
  background-color: var(--nuit);
  background-image: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-haute) 58%, var(--nuit-haute) 100%);
  /* La lueur qui derive est CONTENUE ici (defaut mesure le 17/09 : la
     translation de plus ou moins 1,8 % du `::before` rendait la page
     defilable horizontalement de 23 px a 1280, atteignable par
     `window.scrollTo` ou par un focus, meme si `body { overflow-x: hidden }`
     empechait le geste de l'utilisateur). Trois raisons du choix de `clip` :
       - `clip` ne cree pas de conteneur de defilement, donc ne casse ni
         `position: sticky` ni l'ancrage de defilement, contrairement a `hidden` ;
       - l'axe Y reste `visible`, ce que `hidden` interdit (il forcerait
         `overflow-y: auto`) : l'ombre de `.ecran` descend 62 px sous le bas du
         heros pour 43 px de marge, `overflow: hidden` lui aurait coupe la queue ;
       - `clip-path: inset(0)` aurait fait de l'element une racine d'arriere-plan
         et change ce que le `backdrop-filter` de la carte de contact echantillonne.
     Mesure avant correctif : aucun descendant de `.entete`, `.heros` ou `.bande`
     ne sort de la boite horizontalement, sur sept pages et quatre largeurs (les
     ombres les plus proches d'un bord lateral en sont a 71 px pour 30 px de
     portee). Rien n'est donc coupe. Un navigateur qui ignore `clip` retombe sur
     le comportement d'avant, jamais sur une boite tronquee. */
  overflow-x: clip;
}
.entete {
  padding-top: clamp(26px, 3.4vw, 40px);
  padding-bottom: clamp(76px, 9vw, 120px);
}
.heros {
  padding-top: clamp(48px, 6vw, 86px);
  padding-bottom: clamp(26px, 3.4vw, 46px);
}

/* La lueur seule. Elle s'eteint ENTIEREMENT avant les bords de sa boite : c'est
   ce qui autorise la derive de plus ou moins deux pour cent sans qu'aucun bord
   ne se decouvre. */
.entete::before, .heros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  animation: derive-lueur var(--duree-derive) ease-in-out infinite alternate;
  will-change: transform;
}
.heros::before {
  background:
    radial-gradient(84% 58% at 76% 72%, rgba(138, 174, 255, 0.72) 0%, rgba(138, 174, 255, 0.22) 38%, rgba(138, 174, 255, 0) 66%),
    radial-gradient(46% 30% at 90% 56%, rgba(214, 228, 255, 0.5) 0%, rgba(214, 228, 255, 0) 72%),
    radial-gradient(40% 44% at 22% 8%, rgba(74, 126, 245, 0.2) 0%, rgba(74, 126, 245, 0) 70%);
}
.entete::before {
  background:
    radial-gradient(84% 62% at 78% 74%, rgba(138, 174, 255, 0.34) 0%, rgba(138, 174, 255, 0.11) 40%, rgba(138, 174, 255, 0) 68%),
    radial-gradient(46% 30% at 90% 58%, rgba(214, 228, 255, 0.2) 0%, rgba(214, 228, 255, 0) 72%),
    radial-gradient(40% 44% at 22% 8%, rgba(74, 126, 245, 0.2) 0%, rgba(74, 126, 245, 0) 70%);
}

@keyframes derive-lueur {
  from { transform: translate3d(-1.8%, 1.4%, 0); }
  to   { transform: translate3d(1.8%, -1.4%, 0); }
}
/* Le fondu terminal : le bas du bandeau EST deja blanc. Sa construction est
   celle de `--fondu-vers-jour` (neuf arrets, interpolation perceptive) : le
   MEME fondu sert les en-tetes, les bandes deplacables et l'accueil, pour que
   la transition soit identique partout. Les hauteurs, elles, ne changent pas. */
.entete::after, .heros::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--fondu-vers-jour);
}
.entete::after { height: var(--h-fondu); }
/* Quand le bandeau est le DERNIER bloc de la page (la 404), le fondu vers le
   blanc donnerait une bande claire coincee entre le bandeau et le pied, tous
   deux sombres. Il n'a alors pas lieu d'etre.
   Retirer le fondu ne suffisait pas : le fond du bandeau FINIT sur
   `--nuit-haute` (#0a1132) et le pied commence sur `--nuit` (#060b1e), soit
   une couture nette de 20 niveaux de bleu en travers de la page (mesuree a
   19,2/255 le 17/09 sur la 404, defaut herite de la v6). C'est exactement le
   probleme que `.bande--bas` resout deja : le fond REMONTE vers `--nuit` en
   descendant, sans passer par du clair. Meme traitement ici, en gardant le
   depart sur `--nuit` parce que ce bandeau touche la barre de navigation en
   haut, elle aussi sur `--nuit`. */
main > .entete:last-child {
  background-image: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-haute) 52%, var(--nuit) 100%);
}
main > .entete:last-child::after { display: none; }

/* Le fond qui revient sur `--nuit` ne suffisait PAS, et c'est la deuxieme
   moitie du defaut : la lueur, centree a 74 % de la hauteur, ne s'arrete pas au
   bord de sa boite. Mesure du 17/09, colonne a 8 px du bord DROIT, echelle 2 :
   la derniere ligne du bandeau valait encore [16, 23, 47] contre [6, 11, 30]
   pour la premiere ligne du pied, soit 17 niveaux de bleu d'un coup, et la
   couture traversait toute la largeur (regardee sur `coin-404-droite.png`).
   Le meme defaut se mesurait a l'identique sous la `.bande--bas` d'articles.html
   (17 aussi), alors que les fondations la donnaient « sans couture » : la v7
   avait corrige le fond de cette variante, pas sa lueur. Les deux cas sont donc
   traites ensemble ici. La lueur s'eteint sur la hauteur de fondu du site, juste
   avant la jonction : court (56 a 92 px), donc le coeur de la lueur est intact,
   et l'extinction est progressive, donc elle ne cree pas un deuxieme bord. */
main > .entete:last-child::before,
.bande--bas::before {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--h-fondu)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--h-fondu)), rgba(0, 0, 0, 0) 100%);
}
.heros::after { height: clamp(300px, 36vw, 500px); }

.entete-page { display: grid; gap: clamp(28px, 4vw, 48px); }
.entete-page__titre {
  font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.1rem);
  color: var(--jour);
  max-width: 20ch;
  text-wrap: balance;
}
.entete-page__intro {
  margin-top: 20px;
  font-size: var(--t-lead);
  color: var(--nuit-texte-fort);
  max-width: 58ch;
}
.entete-page--colonne .entete-page__titre { max-width: 24ch; }

@media (min-width: 900px) {
  .entete-page--phases, .entete-page--contact {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
}

/* --- Ce qui vient du corps clair et vit maintenant sur nuit --------------
   La page 404 et la tete d'un article sont des blocs du corps clair remontes
   dans le bandeau. Sans ces lignes, ils gardent l'encre du corps : mesure a
   1,14 pour 3 exige sur le titre de la 404, soit un titre invisible. */

.entete .page-404 h1,
.entete .article__titre { color: var(--jour); }
.entete .page-404 p,
.entete .article__chapo { color: var(--nuit-texte-fort); }
.entete .article__meta { color: var(--nuit-texte); }
.entete .page-404 .page-404__code { color: var(--accent); }
.entete .article__meta .article__etiquette {
  background: rgba(174, 187, 216, 0.16);
  color: var(--jour);
}
.entete .page-404 { padding-block: clamp(30px, 5vw, 60px); }

/* --- Fil d'Ariane, dans le bandeau sombre ------------------------------- */

.fil { margin-bottom: clamp(20px, 3vw, 34px); }
.fil__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--t-mini);
  color: var(--nuit-texte);
}
.fil__liste li { display: flex; align-items: center; gap: 10px; }
.fil__liste li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nuit-filet-fort);
}
.fil__liste a {
  color: var(--nuit-texte);
  text-decoration: none;
  display: inline-block;
  padding-block: 4px;
}
.fil__liste a:hover { color: var(--jour); text-decoration: underline; }
.fil__liste [aria-current="page"] { color: var(--jour); font-weight: 700; }

/* ====================== Accueil : le heros =============================== */

.heros__titre {
  font-size: var(--t-h1);
  color: var(--jour);
  line-height: 1.06;
  max-width: 17ch;
  text-wrap: balance;
}
@media (min-width: 900px) { .heros__titre { max-width: 22ch; } }

.heros__sous-titre {
  margin-top: 20px;
  font-size: var(--t-lead);
  color: var(--nuit-texte);
  max-width: 52ch;
}
.heros__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ====================== Accueil : la maquette flottante ================== */

.maquette {
  margin: clamp(46px, 6vw, 82px) 0 0;
  padding-inline: var(--marge-laterale);
  position: relative;
  z-index: 2;
}
.maquette__scene {
  position: relative;
  width: 100%;
  max-width: 1010px;
  margin-inline: auto;
}
/* La legende est une etiquette d'honnetete. Elle se lit AVANT les chiffres,
   donc elle passe au-dessus de la maquette, sur une pastille blanche opaque
   qui garantit son fond (l'ombre portee de l'ecran descend a 2,1:1). */
.maquette__legende {
  margin: 0 auto 34px;
  display: table;
  padding: 5px 15px;
  border-radius: var(--rayon-pilule);
  background: var(--jour);
  border: 1px solid var(--filet);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--encre-mi);
}

/* Geometries locales de la maquette : elle a ses propres tailles, plus petites
   que celles du site, parce qu'elle represente un ecran vu de loin. */
.ecran {
  background: var(--jour);
  border-radius: 16px;
  box-shadow: var(--ombre-ecran);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: var(--encre-mi);
}
.ecran__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--maq-chrome);
  border-bottom: 1px solid var(--filet);
}
.ecran__feu { width: 8px; height: 8px; border-radius: 50%; background: var(--maq-feu); }
.ecran__url {
  margin-left: 12px;
  padding: 3px 12px;
  border-radius: var(--rayon-pilule);
  background: var(--jour);
  border: 1px solid var(--filet);
  color: var(--gris-clair);
  font-size: 10px;
}
.ecran__corps { display: flex; }
.ecran__cote {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 10px;
  background: var(--maq-cote);
  border-right: 1px solid var(--filet);
}
.ecran__marque {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--degrade-ornement);
  margin: 0 0 10px 6px;
}
.ecran__item { padding: 6px 10px; border-radius: 8px; color: var(--gris-clair); font-weight: 600; }
.ecran__item--actif { background: var(--maq-actif); color: var(--accent-profond); font-weight: 800; }
.ecran__vue { flex: 1 1 auto; padding: 16px 18px 20px; min-width: 0; }
.ecran__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.ecran__titre { font-size: 14px; font-weight: 800; color: var(--encre); }
.ecran__puce {
  padding: 3px 10px; border-radius: var(--rayon-pilule);
  background: var(--maq-puce); color: var(--encre-mi);
  font-weight: 700; font-size: 10px;
}
.ecran__indicateurs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.indic {
  padding: 11px 12px 13px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: var(--jour);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.indic__nom { color: var(--gris-clair); font-weight: 600; font-size: 10px; line-height: 1.3; min-height: 2.6em; }
.indic__valeur { font-size: 22px; font-weight: 900; color: var(--encre); letter-spacing: -0.02em; line-height: 1; }
.indic__valeur small { font-size: 11px; font-weight: 700; color: var(--gris-clair); }

.jauge {
  display: block; height: 5px;
  border-radius: var(--rayon-pilule);
  background: var(--maq-piste); overflow: hidden;
}
.jauge i { display: block; height: 100%; border-radius: inherit; background: var(--degrade-ornement); }
.jauge--fine { height: 4px; }

.ecran__tableau { border: 1px solid var(--filet); border-radius: var(--rayon-petit); overflow: hidden; }
.ligne {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; align-items: center; padding: 9px 12px;
  border-top: 1px solid var(--filet);
}
.ligne:first-child { border-top: 0; }
.ligne--entete {
  background: var(--maq-entete); color: var(--gris-clair);
  font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ligne__ref { font-weight: 800; color: var(--encre); }
.ligne__four { color: var(--gris-clair); }

/* Ces pastilles sont PORTEES PAR LA MAQUETTE, et par elle seule : `app.js`
   emploie le meme mot `etat` pour son bloc de reponse du formulaire. Sans cette
   portee, le `white-space: nowrap` d'une pastille passait sur une phrase
   entiere, qui sortait alors de la carte (constate sur la capture d'essai). */
.ecran .etat {
  justify-self: start; padding: 3px 9px;
  border-radius: var(--rayon-pilule);
  font-weight: 800; font-size: 9.5px; white-space: nowrap;
}
.ecran .etat--bas { color: var(--etat-bas-texte); background: var(--etat-bas-fond); }
.ecran .etat--attente { color: var(--etat-attente-texte); background: var(--etat-attente-fond); }
.ecran .etat--ok { color: var(--etat-ok-texte); background: var(--etat-ok-fond); }

.satellite {
  position: absolute;
  background: var(--jour);
  border-radius: 14px;
  box-shadow: var(--ombre-satellite);
  border: 1px solid rgba(228, 233, 246, 0.9);
  padding: 10px 14px;
  z-index: 2;
}
.satellite--compteur {
  top: -26px; left: 66%; transform: translateX(-50%);
  text-align: center; padding: 9px 20px 11px;
}
.satellite__nom {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--gris-clair);
}
.satellite__chiffre {
  display: block; font-size: 26px; font-weight: 900;
  color: var(--encre); line-height: 1.1; letter-spacing: -0.03em;
}
.satellite--alerte {
  left: -64px; top: 70%;
  display: flex; align-items: center; gap: 10px;
  max-width: 208px; font-size: 11px; line-height: 1.3;
}
.satellite__pastille {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--etat-bas-fond); border: 2px solid var(--etat-bas-texte);
}
.satellite--alerte b { display: block; color: var(--encre); font-weight: 800; }
.satellite--alerte i { color: var(--gris-clair); font-style: normal; }

.accent-vol {
  position: absolute;
  right: -30px; bottom: 19%;
  width: 78px; height: 78px; z-index: 2;
  background: var(--degrade-ornement);
  clip-path: polygon(100% 0%, 0% 58%, 42% 66%, 50% 100%);
  filter: drop-shadow(0 12px 18px rgba(14, 77, 223, 0.35));
}

@media (max-width: 1023px) {
  .ecran__cote, .satellite--alerte, .accent-vol { display: none; }
}
@media (max-width: 719px) {
  .ecran__indicateurs { grid-template-columns: repeat(2, 1fr); }
  .indic--large { grid-column: span 2; }
  .indic--large .indic__nom { min-height: 0; }
  .ligne { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .ligne__four { display: none; }
  .ligne--entete { grid-template-columns: 1fr 1fr; }
  .ligne--entete span:nth-child(2), .ligne--entete span:nth-child(4) { display: none; }
  .satellite--compteur { top: -22px; left: auto; right: 6px; transform: none; }
}

/* ====================== Ruban des quatre phases ========================== */

.ruban {
  padding-top: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(28px, 4vw, 44px);
  text-align: center;
}
.ruban__kicker { color: var(--gris); margin-bottom: 20px; }
.ruban__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
  position: relative;
}
.ruban__liste li {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 800;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  color: var(--encre);
  letter-spacing: -0.01em;
}
.ruban__rang { font-size: 0.76rem; font-weight: 900; color: var(--teinte-encre, var(--accent-profond)); letter-spacing: 0.04em; }

@media (min-width: 680px) {
  .ruban__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ruban__liste::before {
    content: "";
    position: absolute;
    left: calc(var(--marge-laterale) + 8%);
    right: calc(var(--marge-laterale) + 8%);
    top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--filet) 12%, var(--filet) 88%, transparent);
    z-index: -1;
  }
  .ruban__liste li { background: var(--jour); padding-inline: 6px; justify-content: center; }
}

/* ====================== Sections claires ================================= */

.section { padding-block: var(--section-y); }
.section--serree { padding-block: clamp(36px, 5vw, 64px); }
/* `--suite-entete` prolonge le bandeau : meme propos, aucun blanc de section. */
.section--suite-entete { padding-top: clamp(8px, 1.6vw, 18px); }
.section--modules { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(24px, 3vw, 40px); }
.section--conviction { padding-block: clamp(48px, 7vw, 92px); }
.section--appel { padding-bottom: clamp(56px, 8vw, 100px); }
/* Un fond lavande pleine largeur pour alterner le rythme des pages longues. */
.section--fond { background: var(--carte); }

.entete-bloc {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 48px);
}
.entete-bloc .texte, .entete-bloc .intro-section { margin-inline: auto; }
.entete-bloc .intro-section { margin-top: 18px; }

.section .conteneur--etroit { text-align: center; }
.section .conteneur--etroit .texte,
.section .conteneur--etroit .note { margin-inline: auto; text-align: left; }
.section--appel .conteneur--etroit .texte { text-align: center; }

.texte-long { max-width: var(--lecture); }
.texte-long p + p { margin-top: 18px; }

/* ====================== Grille de cartes de l'accueil ==================== */

.grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* --- LE SYSTEME DE CARTES (contrat v7 section 1.2) -----------------------
   Un seul objet, reutilise partout : ombre douce en deux couches, filet
   interieur de 1 px, et au survol trois choses ensemble, un anneau degrade de
   1 px, une lueur radiale qui suit le curseur, et une levee de 5 px.
   Les feuilles de page ne le redefinissent jamais : elles posent `.carte` et,
   si la carte appartient a une phase, `data-phase="1"` a `"4"`. */

.carte {
  position: relative;
  isolation: isolate;
  background: var(--carte);
  border-radius: var(--rayon-carte);
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--filet-interieur), var(--ombre-carte-repos);
  transition: transform 0.24s var(--courbe), box-shadow 0.24s var(--courbe);
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--filet-interieur), var(--ombre-carte-levee); }

/* La lueur qui suit le curseur. `--mx` et `--my` sont posees par `app.js` en
   pourcentage de la carte survolee ; sans script elles valent 50 %, et la
   lueur reste invisible tant que la carte n'est pas survolee. */
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    var(--teinte, var(--accent)) 0%, transparent 68%);
}
.carte:hover::before { opacity: 0.16; }

/* L'anneau degrade de 1 px : le degrade du bouton, decoupe en cadre par un
   masque qui exclut le remplissage. */
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--degrade-bouton);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.24s ease;
}
/* 0,6 et non 1 : a pleine opacite le contour se lisait « tres franc,
   utilitaire » (verdict du 17/09). C'est la lueur qui doit porter le survol,
   l'anneau ne fait que cerner la carte. */
.carte:hover::after { opacity: 0.6; }

/* La tete d'une carte de phase : une tuile d'icone teintee, puis le rang en
   pastille et le titre. La tuile est DECORATIVE : la pastille et le titre
   disent deja la phase. */
.carte__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.carte__tuile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  /* L'arret clair est pose a 165 %, donc HORS de la tuile : seule la partie
     sombre du degrade se voit. Mesure : au point le plus clair de la tuile la
     plus claire (phase 1), le blanc de l'icone tient encore 3,26:1, le seuil
     d'un objet graphique. A 115 % il tombait a 2,64:1. */
  background: linear-gradient(140deg,
    var(--teinte-encre, var(--accent-profond)) 0%,
    var(--teinte, var(--accent)) 165%);
  box-shadow: 0 6px 14px -8px rgba(4, 9, 28, 0.55);
}
.carte__tuile .icone {
  width: 22px; height: 22px;
  stroke: var(--jour);
  stroke-width: 1.7;
}

.carte__titre {
  font-size: var(--t-h3);
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 18px;
}
.carte__tete .carte__titre { margin-top: 0; }
/* Le rang sur une pastille teintee : c'est la pastille qui porte la teinte de
   phase, en APLAT de sa teinte profonde, texte en blanc.
   Pourquoi pas le lavis pale d'avant (`--teinte-fond`) : mesure du 17/09, les
   quatre lavis ne sont separes que de 2,1 a 2,6 de distance de couleur (dE76),
   c'est-a-dire au seuil de perception sur une pastille de 32 x 21 px, et les
   quatre pastilles se lisaient identiques. La recette « fond a 18 a 22 % de la
   teinte » ne reglait pas le probleme (2,2 a 2,8 entre voisines) et faisait
   tomber la phase 1 a 4,37:1, sous le plancher de 4,5:1. L'aplat des quatre
   teintes profondes donne 6,1 / 12,7 / 21,2 entre voisines (38,6 entre les
   extremes) et un contraste de 5,38 a 13,54:1 : c'est la meme gradation que
   celle des tuiles, qui elle se lisait deja. Valeurs et mesures : addendum du
   17/09 dans `11-fondations-v7.md`.
   Sur fond NUIT, cette pastille serait trop sombre : une page qui en pose une
   dans une `.bande` doit lui donner `--teinte-clair` comme fond et l'encre du
   site comme texte (aucune page ne le fait aujourd'hui). */
.carte__rang {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--rayon-pilule);
  background: var(--teinte-encre, var(--accent-profond));
  color: var(--jour);
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em;
  line-height: 1.3;
}
.carte__texte { margin-top: 9px; font-size: var(--t-petit); }

@media (min-width: 700px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) {
  .grille { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; }
  .grille > .carte:nth-child(1) { grid-column: span 4; }
  .grille > .carte:nth-child(2) { grid-column: span 3; }
  .grille > .carte:nth-child(3) { grid-column: span 3; }
  .grille > .carte:nth-child(4) { grid-column: span 4; }
}

/* --- Les quatre illustrations de phase ----------------------------------
   Chacune dit SA phase, en SVG, dans la meme palette et sans un mot :
   01 Audit, l'observation ; 02 Structuration, la regle ecrite et ses
   indicateurs ; 03 Automatisation, un flux qui passe par une validation
   humaine ; 04 Maintien, un cycle qui revient. */
.vignette {
  display: block;
  width: 100%;
  height: 176px;
  border-radius: 14px;
  background: var(--carte-creux);
  overflow: hidden;
}
@media (max-width: 699px) { .vignette { height: 158px; } }

/* Toutes les couleurs d'accent d'une vignette passent par `--teinte*` : posee
   `data-phase` sur la carte, la vignette prend la teinte de sa phase sans
   qu'une seule regle ne soit ecrite par phase. Les traits et les marques
   emploient le membre LISIBLE (`--teinte-encre`), les aplats d'ornement le
   membre d'identite (`--teinte`). */
.vg-fond { fill: var(--jour); }
.vg-surligne { fill: var(--teinte, var(--accent)); fill-opacity: 0.26; }
.vg-barre { fill: #dfe5f4; }
.vg-marque { fill: var(--teinte-encre, var(--accent-profond)); }
.vg-trace { fill: none; stroke: var(--teinte-encre, var(--accent-profond)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vg-trace--fin { stroke: var(--gris-clair); stroke-width: 1.8; }
.vg-pointille { fill: none; stroke: var(--teinte, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; }
.vg-marque-pleine { fill: var(--teinte-encre, var(--accent-profond)); }
/* Trois jauges de hauteurs differentes : trois arrets de la meme phase. */
.vg-jauge-a { fill: var(--teinte, var(--accent)); }
.vg-jauge-b { fill: var(--teinte-encre, var(--accent-profond)); }
.vg-jauge-c { fill: var(--teinte-encre, var(--accent-profond)); fill-opacity: 0.72; }
.vg-bloc { fill: var(--jour); stroke: var(--filet); stroke-width: 1.5; }
.vg-bloc--actif { fill: var(--teinte-encre, var(--accent-profond)); stroke: var(--teinte-encre, var(--accent-profond)); }
.vg-coche { fill: none; stroke: var(--etat-ok-texte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vg-coche--claire { stroke: var(--jour); }
.vg-pastille-ok { fill: var(--etat-ok-fond); }
.vg-ombre { fill: rgba(16, 27, 51, 0.07); }

/* ====================== Panneau de l'audit (accueil) ===================== */

.panneau-audit {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}
.panneau-audit::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--degrade-ornement);
}
.panneau-audit .titre-section { font-size: clamp(1.5rem, 1.02rem + 1.6vw, 2.15rem); }
.panneau-audit__image {
  border-radius: var(--rayon-petit);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--carte-creux);
}
.panneau-audit__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panneau-audit__prix { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.prix { font-size: var(--t-lead); color: var(--encre-mi); max-width: 34ch; }
.prix strong, .repere__valeur, .phase__valeur--fort strong {
  font-weight: 900;
  color: var(--accent-profond);
  letter-spacing: -0.02em;
}
.prix strong { font-size: 1.5em; }

@media (min-width: 980px) {
  .panneau-audit { grid-template-columns: 0.82fr 1.25fr 0.95fr; align-items: center; }
}
@media (min-width: 620px) and (max-width: 979px) {
  .panneau-audit { grid-template-columns: 1fr 1fr; }
  .panneau-audit__image { grid-column: span 2; }
}

/* ====================== Conviction ======================================= */

.conviction { margin: 0; }
.conviction blockquote { margin: 0; }
.conviction p, blockquote.conviction p {
  font-size: clamp(1.18rem, 1rem + 1.1vw, 1.72rem);
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gris);
  text-wrap: balance;
  max-width: none;
}
.conviction__tete { color: var(--accent-profond); }
.conviction__source {
  margin-top: 26px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--t-petit); font-weight: 700; color: var(--encre-mi);
}
.conviction__logo { width: 28px; height: 28px; border-radius: 9px; }
/* La citation de la page « a propos » reste une prose, pas une affiche. */
blockquote.conviction {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent-clair);
  max-width: var(--lecture);
}

/* ====================== Appel final et coordonnees ======================= */

.appel__action { margin-top: 30px; text-align: center; }

.coordonnees {
  margin-top: 40px;
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
  max-width: 460px;
  margin-inline: auto;
}
.coordonnees li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--filet);
}
.coordonnees li > div { display: contents; }
.coordonnees li:last-child { border-bottom: 0; padding-bottom: 0; }
.coordonnees__intitule {
  font-size: var(--t-kicker); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}
.coordonnees__valeur { font-weight: 700; color: var(--encre); text-align: right; }
.coordonnees__valeur a { color: var(--accent-profond); text-decoration: none; display: inline-block; padding-block: 2px; }
.coordonnees__valeur a:hover { text-decoration: underline; }
/* L'icone de coordonnee du site v5 n'a plus d'emploi dans cette grammaire :
   l'intitule en capitales espacees porte deja le role de la ligne. */
.coordonnees .icone { display: none; }

/* La cloture d'une page : un filet, un titre, un bouton. */
.cloture { text-align: center; }
.cloture__filet {
  border: 0; height: 1px; background: var(--filet);
  margin: 0 auto clamp(30px, 4vw, 48px); max-width: 560px;
}
.cloture .intro-section { margin: 18px auto 28px; }
.cloture .titre-section { margin-inline: auto; max-width: 20ch; }

/* ====================== Pied ============================================= */

.pied {
  background: var(--nuit);
  color: var(--nuit-texte);
  padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px);
}
.pied__interieur {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--nuit-filet);
}
.pied__liens { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); margin-inline: auto; }
.pied__liens a {
  color: var(--nuit-texte); text-decoration: none;
  font-size: var(--t-petit); font-weight: 600;
  /* 2.5.8 : une cible fait au moins 24 px. Un lien en ligne mesure la hauteur
     de ses glyphes, pas son interlignage : il faut le passer en bloc. */
  display: inline-block; padding-block: 3px;
}
.pied__liens a:hover { color: var(--jour); }
.pied__baseline {
  margin-top: 26px; color: var(--jour);
  font-weight: 700; font-size: var(--t-lead); max-width: 46ch;
}
.pied__bas {
  margin-top: 26px; display: flex; flex-wrap: wrap;
  gap: 8px 22px; font-size: var(--t-mini);
}
.pied__bas a { color: var(--nuit-texte); text-decoration: none; display: inline-block; padding-block: 4px; }
.pied__bas a:hover { color: var(--jour); text-decoration: underline; }
.pied__bas p:last-child { margin-left: auto; }

@media (max-width: 719px) {
  .pied__bas p:last-child { margin-left: 0; width: 100%; }
}

/* =========================================================================
   LE FORMULAIRE
   Contrat v6 section 1 : a gauche une frise verticale de trois etapes
   (disque plein bleu numerote en blanc, relies par un fin trait vertical
   gris) ; a droite une carte sombre bleu nuit, coins arrondis, lueur
   degradee en bas a droite, titre blanc, libelles blancs de petite taille,
   champs a fond ardoise bordes d'un filet leger, texte indicatif gris,
   champs sur deux colonnes, bouton blanc pleine largeur a texte sombre.
   C'est le SEUL objet sombre du corps clair : c'est ce qui en fait un lieu
   de saisie et non une section de plus.
   ========================================================================= */

.bloc-contact {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  align-items: start;
}
@media (min-width: 940px) {
  .bloc-contact { grid-template-columns: 0.78fr 1.22fr; }
  .bloc-contact .frise { position: sticky; top: 28px; }
}

/* --- La frise des trois etapes ------------------------------------------ */

.frise { display: grid; gap: 0; }
.frise__etape {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding-bottom: 30px;
}
.frise__etape:last-child { padding-bottom: 0; }
/* Le fin trait vertical gris qui relie les disques. */
.frise__etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 8px;
  width: 1px;
  background: var(--filet);
}
.frise__rang {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-profond);
  color: var(--jour);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.frise__titre { font-size: var(--t-h3); margin-top: 9px; }
.frise__texte {
  margin-top: 8px;
  font-size: var(--t-petit);
  color: var(--gris);
  max-width: 34ch;
}

/* --- La carte sombre ----------------------------------------------------- */

.carte-formulaire {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nuit-carte);
  border-radius: var(--rayon-carte);
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--ombre-carte);
  color: var(--nuit-texte);
}
/* La lueur degradee, en bas a droite. */
.carte-formulaire::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18%; bottom: -34%;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(74, 126, 245, 0.55) 0%, rgba(74, 126, 245, 0.18) 46%, rgba(74, 126, 245, 0) 72%);
}
.carte-formulaire:hover { transform: none; }
.carte-formulaire__titre {
  font-size: clamp(1.28rem, 1.06rem + 0.9vw, 1.7rem);
  color: var(--jour);
  margin-bottom: 22px;
}

.formulaire { display: grid; gap: 20px; }
.groupe-champs { display: grid; gap: 16px; }
.paire-champs { display: grid; gap: 16px; }
@media (min-width: 560px) {
  .paire-champs { grid-template-columns: 1fr 1fr; }
}

.champ { display: grid; gap: 7px; min-width: 0; }
.champ__libelle {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--jour);
}
.champ__badge {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nuit-texte);
}
.champ__aide {
  font-size: 0.8125rem;
  color: var(--nuit-texte);
  max-width: none;
}

.carte-formulaire input[type="text"],
.carte-formulaire input[type="email"],
.carte-formulaire input[type="tel"],
.carte-formulaire textarea,
.carte-formulaire select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--nuit-filet);
  background: var(--nuit-champ);
  color: var(--jour);
  font-family: inherit;
  font-size: var(--t-petit);
  line-height: 1.5;
}
.carte-formulaire textarea { min-height: 124px; resize: vertical; }
.carte-formulaire ::placeholder { color: var(--nuit-texte); opacity: 1; }
.carte-formulaire input:focus-visible,
.carte-formulaire textarea:focus-visible,
.carte-formulaire select:focus-visible { border-color: var(--accent-clair); }
.carte-formulaire [aria-invalid="true"] { border-color: var(--etat-bas-nuit); }

/* Le choix de l'activite : trois pastilles sombres, memes `name` et `value`
   qu'en v5, donc meme corps envoye au service. */
.groupe-profil { border: 0; margin: 0; padding: 0; min-width: 0; }
.groupe-profil legend {
  padding: 0;
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--jour);
  margin-bottom: 10px;
}
.options { display: grid; gap: 9px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--nuit-filet);
  background: var(--nuit-champ);
  color: var(--nuit-texte);
  font-size: var(--t-petit);
  cursor: pointer;
}
.option:hover { border-color: var(--nuit-filet-fort); }
.option input { margin: 4px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.option:has(input:checked) { border-color: var(--accent); color: var(--jour); }

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.consentement input { margin: 4px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.consentement__texte { font-size: 0.8125rem; color: var(--nuit-texte); cursor: pointer; }

.mention-donnees { font-size: 0.8125rem; color: var(--nuit-texte); }
.mention-donnees a { color: var(--accent-clair); }

.actions-formulaire { margin-top: 4px; }
/* Bouton blanc, pleine largeur, texte sombre : contrat v6 section 1. */
.carte-formulaire .bouton[data-envoyer] {
  width: 100%;
  background: var(--jour);
  color: var(--encre);
  box-shadow: none;
  padding: 15px 24px;
  font-size: 1rem;
}
.carte-formulaire .bouton[data-envoyer]:hover { background: #eef2fc; transform: translateY(-2px); }

.champ__erreur {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--etat-bas-nuit);
  min-height: 0;
}
.champ__erreur:empty { display: none; }

/* Le leurre : present, vide, hors du parcours, et invisible sans
   `display:none` (un robot qui execute le CSS ignorerait un champ retire). */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Le badge de preorientation, pose par app.js quand l'activite vient de l'URL. */
.badge-preorientation {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 14px;
  border-radius: var(--rayon-petit);
  background: rgba(74, 126, 245, 0.16);
  border: 1px solid var(--nuit-filet);
  font-size: var(--t-mini);
  color: var(--jour);
}
.badge-preorientation .bouton--discret { color: var(--accent-clair); }

/* La zone d'etat : elle REMPLACE le formulaire a la reussite, elle vit donc
   dans la meme carte sombre. */
.zone-etat:empty { display: none; }
.zone-etat > div {
  border-radius: var(--rayon-petit);
  padding: 16px 18px;
  border: 1px solid var(--nuit-filet);
  background: rgba(174, 187, 216, 0.08);
}
.zone-etat p { color: var(--nuit-texte); font-size: var(--t-petit); }
.zone-etat p + p { margin-top: 10px; }
.zone-etat .etat__titre, .zone-etat strong { color: var(--jour); font-weight: 800; }
.zone-etat .etat--erreur { border-left: 3px solid var(--etat-bas-nuit); }
.zone-etat .etat--succes { border-left: 3px solid var(--etat-ok-nuit); }
.zone-etat .etat__reference { font-size: 0.8125rem; }
.zone-etat code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; color: var(--jour);
  background: var(--nuit-champ);
  padding: 2px 7px; border-radius: 6px;
}
.zone-etat .etat__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.zone-etat .bouton { background: var(--jour); color: var(--encre); box-shadow: none; }

/* La carte du formulaire quand elle est seule au centre d'une page. */
.bloc-formulaire--centre { max-width: 720px; margin-inline: auto; }
/* Sur l'accueil, la carte suit les coordonnees au lieu de leur faire face :
   une colonne de trois lignes n'equilibre pas un formulaire de dix champs. */
.section--appel .bloc-formulaire--centre { margin-top: clamp(34px, 5vw, 56px); }

/* ====================== Bandeau de consentement (app.js) ================= */

.bandeau-consentement {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(680px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: var(--rayon-carte);
  background: var(--nuit-carte);
  border: 1px solid var(--nuit-filet);
  box-shadow: var(--ombre-carte);
  color: var(--nuit-texte);
}
.bandeau-consentement__texte { font-size: var(--t-mini); }
.bandeau-consentement__actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.bandeau-consentement .bouton { background: var(--jour); color: var(--encre); box-shadow: none; }
.bandeau-consentement .bouton--discret { background: transparent; color: var(--accent-clair); }

/* =========================================================================
   PAGE « L'OFFRE »
   ========================================================================= */

/* Le schema isometrique des quatre phases, repris tel quel du site v5 et
   repose dans le bandeau sombre : ses faces se relisent sur fond nuit. */
.cadre-phases { display: grid; gap: 18px; }
.phases-svg { width: 100%; height: auto; max-height: 320px; }
.phases-svg .face-haute { fill: var(--accent-clair); }
.phases-svg .face-gauche { fill: var(--accent-profond); }
.phases-svg .face-droite { fill: var(--accent-sombre); }
.phases-svg .arete { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.phases-svg .ombre-sol { fill: rgba(4, 9, 28, 0.55); }
.phases-svg .sol, .phases-svg .tige { fill: none; stroke: var(--nuit-filet-fort); stroke-width: 1; }
.phases-svg__numero {
  fill: var(--nuit);
  font-family: var(--police);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.phases-legende {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--rayon-petit);
  background: rgba(6, 11, 30, 0.78);
}
.phases-legende__entree { display: grid; justify-items: center; gap: 4px; }
.phases-legende .icone { width: 22px; height: 22px; }
.phases-legende .signe-phase { stroke: var(--accent-clair); }
.phases-legende__rang {
  font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.08em; color: var(--accent-clair);
}
.phases-legende__nom { font-size: var(--t-mini); font-weight: 800; color: var(--jour); }

/* Les quatre phases detaillees : une fiche par phase. */
.phases { display: grid; gap: 18px; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }

.phase {
  background: var(--jour);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: clamp(20px, 2.6vw, 30px);
}
.section--fond .phase { background: var(--jour); }
.phase__entete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.phase__rang { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.06em; color: var(--accent-profond); }
.phase__titre { font-size: 1.22rem; }
.phase__champs { display: grid; gap: 14px; }
@media (min-width: 560px) { .phase__champs { grid-template-columns: 1fr 1fr; } }
.phase__champ {
  display: grid; gap: 4px;
  padding: 12px 14px;
  border-radius: var(--rayon-petit);
  background: var(--carte);
}
.phase__champ--large { grid-column: 1 / -1; }
.parcours__label {
  font-size: var(--t-kicker); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}
.phase__valeur { font-size: var(--t-petit); color: var(--encre-mi); }
.phase__valeur--fort { font-weight: 800; color: var(--encre); }

/* Les modules : une liste numerotee, meme signe de rang que partout. */
.couches { display: grid; gap: 14px; }
@media (min-width: 860px) { .couches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.couche {
  position: relative;
  background: var(--jour);
  border-radius: var(--rayon-carte);
  padding: 22px 24px 26px;
  border: 1px solid var(--filet);
}
.couche__rang {
  display: inline-block;
  font-size: 0.74rem; font-weight: 900;
  letter-spacing: 0.06em; color: var(--accent-profond);
  margin-bottom: 8px;
}
.couche__titre { font-size: var(--t-h3); }
.couche__texte { margin-top: 10px; font-size: var(--t-petit); }

/* Les deux colonnes d'une prestation : ce qui est livre, ce que ca coute. */
.prestation {
  display: grid; gap: clamp(20px, 3vw, 34px);
  background: var(--carte);
  border-radius: var(--rayon-carte);
  padding: clamp(24px, 3.4vw, 40px);
}
.prestation + .note-section { margin-top: 26px; }
.section .prestation + .note-section { text-align: left; margin-inline: 0; }
.prestation + .prestation { margin-top: 22px; }
@media (min-width: 900px) { .prestation { grid-template-columns: 1.35fr 1fr; } }
.prestation__mecanisme ul { display: grid; gap: 12px; margin-top: 16px; }
.prestation__mecanisme li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-petit);
  color: var(--gris);
}
.prestation__mecanisme li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--degrade-ornement);
}
.prestation__mecanisme p, .prestation__exemple p { margin-top: 14px; font-size: var(--t-petit); color: var(--gris); }
.prestation__exemple {
  background: var(--jour);
  border-radius: var(--rayon-petit);
  padding: clamp(18px, 2.4vw, 26px);
}

/* Les confusions frequentes. */
.faq { display: grid; gap: 14px; }
@media (min-width: 860px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.faq__entree {
  background: var(--jour);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: 22px 24px 24px;
}
.faq__question { font-size: 1.02rem; }
.faq__reponse { margin-top: 10px; font-size: var(--t-petit); }

/* =========================================================================
   PAGE « A PROPOS »
   ========================================================================= */

/* La frise de parcours reprend le meme motif que la frise de contact :
   un rang numerote, un trait qui relie, un titre, un texte. */
.parcours { display: grid; gap: 0; max-width: 780px; margin-inline: auto; }
.parcours__etape {
  position: relative;
  padding: 0 0 30px 40px;
}
.parcours__etape:last-child { padding-bottom: 0; }
.parcours__etape::before {
  content: "";
  position: absolute;
  left: 7px; top: 22px; bottom: 0;
  width: 1px;
  background: var(--filet);
}
.parcours__etape:last-child::before { display: none; }
.parcours__puce {
  position: absolute;
  left: 0; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--jour);
  border: 3px solid var(--accent-profond);
}
.parcours__date {
  display: block;
  font-size: var(--t-kicker); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-profond);
}
.parcours__titre { font-size: var(--t-h3); margin-top: 6px; }
.parcours__texte { margin-top: 8px; font-size: var(--t-petit); }
.parcours__texte a { color: var(--accent-profond); }

/* Trois engagements : trois cartes lavande de meme rang. */
.grille-3 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grille-3 .carte__titre { margin-top: 0; }
.section--fond .carte { background: var(--jour); }

/* Trois reperes : un chiffre, un libelle. */
.bande-chiffres {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) { .bande-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.repere {
  background: var(--jour);
  border-radius: var(--rayon-carte);
  padding: 26px 24px;
  text-align: center;
}
.repere__valeur { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; }
.repere__libelle { margin-top: 8px; font-size: var(--t-petit); color: var(--gris); }

/* =========================================================================
   PAGES « ARTICLES » ET ARTICLE
   ========================================================================= */

.gabarit__grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .gabarit__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.carte-article { padding: 26px 26px 28px; }
.gabarit__grille > .carte-article:only-child { grid-column: 1 / -1; max-width: 720px; }
.carte-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: var(--t-kicker); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}
.article__etiquette {
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  background: var(--jour);
  color: var(--accent-profond);
}
.section--fond .article__etiquette, .carte .article__etiquette { background: var(--jour); }
.carte-article__titre { margin-top: 14px; font-size: 1.22rem; }
.carte-article__titre a { text-decoration: none; }
.carte-article__titre a:hover { color: var(--accent-profond); }
.carte-article__chapo { margin-top: 12px; font-size: var(--t-petit); color: var(--gris); }
.carte-article__lien {
  margin-top: 18px;
  font-weight: 800; font-size: var(--t-petit);
  color: var(--accent-profond);
}

.etat-vide {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: clamp(30px, 4vw, 48px);
  border-radius: var(--rayon-carte);
  background: var(--carte);
}
.etat-vide .icone { width: 40px; height: 40px; }
.etat-vide__titre { font-size: 1.22rem; }
.etat-vide__texte { margin-top: 10px; font-size: var(--t-petit); color: var(--gris); max-width: 52ch; }

/* La page d'un article : une colonne de lecture, rien d'autre. */
.article { max-width: var(--lecture); }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: var(--t-kicker); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}
.article__meta .article__etiquette { background: var(--carte); }
.article__titre { margin-top: 18px; font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.5rem); }
.article__chapo { margin-top: 20px; font-size: var(--t-lead); color: var(--encre-mi); }
.article__corps { margin-top: 30px; }
.article__corps p { margin-top: 18px; }
.article__corps h2 {
  margin-top: 38px;
  font-size: 1.32rem;
}
.article__corps .chapo-fort { font-size: var(--t-lead); color: var(--encre-mi); }
.article__signature {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-size: var(--t-petit);
  color: var(--gris);
}

/* =========================================================================
   PAGES LEGALES
   Corps clair, une seule colonne de lecture bornee a 66 caracteres.
   ========================================================================= */

.legal { max-width: var(--lecture); }
.legal__bloc + .legal__bloc { margin-top: 34px; }
.legal__titre { font-size: 1.12rem; }
.legal p { margin-top: 14px; font-size: var(--t-petit); }
.legal ul { margin-top: 14px; display: grid; gap: 10px; }
.legal li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-petit);
  color: var(--gris);
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent-clair);
}
.legal a { color: var(--accent-profond); }

/* =========================================================================
   PAGE RENDEZ-VOUS
   ========================================================================= */

.rdv { max-width: 860px; }
.rdv__cadre:empty { display: none; }
.rdv__iframe {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background: var(--jour);
}
.rdv__note { margin-top: 16px; font-size: var(--t-petit); color: var(--gris); }
.rdv__secours { margin-top: 16px; font-size: var(--t-petit); }
.rdv__secours a { color: var(--accent-profond); font-weight: 700; }
.rdv .etat-vide { text-align: left; justify-items: start; }
.etat__texte { font-size: var(--t-petit); color: var(--gris); }
.etat__texte a { color: var(--accent-profond); font-weight: 700; }

/* =========================================================================
   PAGE 404
   ========================================================================= */

.page-404 {
  text-align: center;
  padding-block: clamp(50px, 8vw, 96px);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.page-404__code {
  font-size: clamp(3.6rem, 2rem + 7vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  /* Degrade PROPRE a ce nombre : le degrade d'ornement commence sur
     `--accent-profond`, qui ne mesure que 2,96:1 sur nuit, sous le seuil de
     3:1 des grands textes. Celui-ci part de `--accent` : son arret le plus
     sombre mesure 5,2:1. Le calcul se fait sur les arrets, un texte dont le
     fond EST sa propre peinture ne se mesure pas au pixel. */
  background: linear-gradient(118deg, var(--accent) 0%, var(--accent-clair) 62%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent);
  -webkit-text-fill-color: transparent;
}
.page-404 h1 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); }
.page-404 p { color: var(--gris); max-width: 46ch; }
.page-404__liens { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =========================================================================
   ICONES ET DEGRADE HERITES DU SITE V5
   ========================================================================= */

.icone {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--accent-profond);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--petite { width: 20px; height: 20px; }
.signe-phase { stroke: url(#accent-svg); }
.arret-1 { stop-color: var(--accent-profond); }
.arret-2 { stop-color: var(--accent-sombre); }
.arret-3 { stop-color: var(--accent); }
.arret-4 { stop-color: var(--accent-clair); }
.arret-5 { stop-color: var(--accent); }
/* Le combine de la page contact : un signe, pas une illustration. */
.combine {
  width: 46px; height: 46px;
  fill: none;
  stroke: var(--accent-clair);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carte-visuel {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--rayon-carte);
  background: rgba(10, 17, 50, 0.88);
  border: 1px solid var(--nuit-filet);
  display: grid;
  gap: 18px;
}
.carte-visuel .coordonnees { margin-top: 0; max-width: none; }
.carte-visuel .coordonnees li { border-bottom-color: var(--nuit-filet); }
.carte-visuel .coordonnees__intitule { color: var(--nuit-texte); }
.carte-visuel .coordonnees__valeur { color: var(--jour); }
.carte-visuel .coordonnees__valeur a { color: var(--accent-clair); }

/* =========================================================================
   FONDATIONS V7, PARTIE PARTAGEE
   Tout ce qui suit est lu par les DIX pages. Une feuille de page
   (`css/<page>.css`, chargee APRES celle-ci) ne redefinit aucun jeton et ne
   reecrit aucune de ces classes : elle ajoute ce qui n'appartient qu'a elle.
   Mode d'emploi complet et HTML type : `11-fondations-v7.md` section 1.
   ========================================================================= */

/* --- 1. Apparition au defilement -----------------------------------------
   `app.js` pose `js-anim` sur <html> SAUF si le mouvement reduit est demande,
   puis pose `est-visible` sur chaque `[data-anim]` qui entre dans la vue.
   Sans script : aucune de ces regles ne s'applique, tout est visible.
   L'entree est une ANIMATION et non une transition, pour que le contenu deja
   present a l'ouverture de la page s'anime lui aussi (une transition n'aurait
   pas d'etat de depart, la classe etant posee dans la meme tache). */

.js-anim [data-anim] { opacity: 0; }
/* Le remplissage est `backwards` et NON `both`, et l'etat final est ecrit dans
   la regle elle-meme. Avec `both`, l'animation continuait de tenir `transform`
   apres sa fin et ecrasait toute regle de survol : la levee des cartes ne se
   produisait plus (defaut mesure au rendu le 17/09). Avec `backwards`, elle
   tient l'etat de depart pendant le delai, puis rend la main a la cascade. */
.js-anim [data-anim].est-visible {
  opacity: 1;
  animation: entree-montee var(--duree-entree) var(--courbe) var(--delai, 0ms) backwards;
}
@keyframes entree-montee {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- 2. Cartes sombres : la bordure « aurore » ----------------------------
   Le seul objet sombre du corps clair (la carte du formulaire) et la carte de
   coordonnees portent un filet de 1 px parcouru par une lueur lente de 12 s.
   Seule `background-position` bouge : aucune mise en page n'est touchee. */

.carte-visuel { position: relative; isolation: isolate; }
.carte-formulaire::after, .carte-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(115deg,
    var(--nuit-filet) 0%,
    var(--nuit-filet) 16%,
    var(--accent) 30%,
    rgba(214, 228, 255, 0.92) 40%,
    var(--accent-clair) 50%,
    var(--nuit-filet) 66%,
    var(--nuit-filet) 100%);
  background-size: 320% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: aurore var(--duree-aurore) ease-in-out infinite alternate;
}
@keyframes aurore {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* --- 3. Les bandes sombres deplacables (decision C du 17/09) --------------
   Une `.bande` est le MEME objet que `.entete` : fond nuit, lueur qui derive,
   texte clair, memes jetons. Ce qui change est l'endroit ou elle vit dans la
   page, donc le cote par lequel elle se fond dans le corps clair.
     `.bande--haut`   fondu en bas seulement (c'est l'en-tete d'aujourd'hui)
     `.bande--milieu` fondu de part et d'autre
     `.bande--bas`    fondu en haut seulement, elle rejoint le pied sombre
   Les hauteurs de fondu sont celles de l'en-tete interieur : `--h-fondu`. */

/* PAGE D'EXEMPLE MINIMALE, rendue et mesuree le 17/09 (capture
   `captures-v7/accueil/bandes-trois-variantes-1280.png`). Elle ne charge QUE cette
   feuille et n'ajoute aucune regle : tout ce qui suit vient d'ici.

     <header class="entete entete--clair">
       <nav class="fil"><ol class="fil__liste"> ... </ol></nav>
       <div class="conteneur entete-page">
         <div class="entete-page__texte">
           <p class="kicker">En-tete clair</p>
           <h1 class="entete-page__titre">Le titre</h1>
           <p class="entete-page__intro">L'intro.</p>
         </div>
       </div>
     </header>

     <section class="section"><div class="conteneur"><p class="texte">Corps clair.</p></div></section>

     <section class="bande bande--milieu">
       <div class="conteneur" data-cascade>
         <div class="entete-bloc" data-anim>
           <p class="kicker">Bande au milieu</p>
           <h2 class="titre-section">Fondu de part et d autre</h2>
         </div>
       </div>
     </section>

     <section class="section"><div class="conteneur"><p class="texte">Corps clair.</p></div></section>

     <section class="bande bande--bas">
       <div class="conteneur" data-anim>
         <p class="kicker">Bande en bas</p>
         <h2 class="titre-section">Fondu en haut seulement</h2>
       </div>
     </section>

     <footer class="pied"> ... </footer>

   Rien a recolorer a l'interieur d'une bande : le kicker, les titres, les textes, les
   notes, les boutons a filet et le contour de focus y prennent deja leurs valeurs
   sombres. `.bande--haut` remplace `.entete` quand la bande est en tete de page. */

.bande {
  position: relative;
  isolation: isolate;
  color: var(--nuit-texte);
  background-color: var(--nuit);
  background-image: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-haute) 58%, var(--nuit-haute) 100%);
  padding-block: clamp(46px, 6vw, 84px);
  /* Meme confinement que `.entete` et `.heros` : la lueur qui derive ne rend
     plus la page defilable horizontalement. Motifs et mesures : commentaire de
     `.entete, .heros`. Consequence a connaitre pour une feuille de page : un
     contenu qui doit deborder lateralement d'une bande sera coupe au bord de la
     bande. Aucun ne le fait aujourd'hui (mesure du 17/09), et un contenu large
     reste libre de porter son propre conteneur a defilement, qui n'est pas
     concerne (le schema de La methode le fait deja a 390). */
  overflow-x: clip;
}
/* La bande qui rejoint le pied ne doit pas s'eclaircir en descendant : son
   fond remonte vers `--nuit` a l'approche du pied, sans quoi un filet clair
   se voit entre les deux. Le fond ne fait que la moitie du travail : sa LUEUR
   s'eteint aussi avant la jonction, par un masque ecrit une seule fois pour ce
   cas et pour celui de la 404 (regle `main > .entete:last-child::before,
   .bande--bas::before`, section du bandeau d'en-tete, avec sa mesure). */
.bande--bas {
  background-image: linear-gradient(180deg, var(--nuit-haute) 0%, var(--nuit-haute) 34%, var(--nuit) 100%);
  padding-bottom: clamp(52px, 7vw, 92px);
}
.bande--haut { padding-top: clamp(26px, 3.4vw, 40px); padding-bottom: clamp(76px, 9vw, 120px); }
.bande--milieu { padding-block: clamp(76px, 9vw, 120px); }

.bande::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(84% 62% at 78% 74%, rgba(138, 174, 255, 0.34) 0%, rgba(138, 174, 255, 0.11) 40%, rgba(138, 174, 255, 0) 68%),
    radial-gradient(46% 30% at 90% 58%, rgba(214, 228, 255, 0.2) 0%, rgba(214, 228, 255, 0) 72%),
    radial-gradient(40% 44% at 22% 8%, rgba(74, 126, 245, 0.2) 0%, rgba(74, 126, 245, 0) 70%);
  animation: derive-lueur var(--duree-derive) ease-in-out infinite alternate;
  will-change: transform;
}
/* Les fondus : UN seul pseudo-element porte les deux bords, en deux couches de
   fond. La variante decide lesquelles existent. */
.bande::after {
  content: "";
  position: absolute;
  /* Le depassement d'un pixel en haut et en bas n'est pas un ornement : la hauteur
     d'une section est fractionnaire, et une boite calee exactement sur son bord
     laissait une derniere ligne de rendu melangee au fond nuit, soit une couture
     grise de 45/255 en travers de la page (mesuree au bas de `.bande--milieu`).
     Le pixel de marge paint du blanc sur du blanc : invisible, et la couture tombe. */
  inset: -1px 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.bande--haut::after {
  background-image: var(--fondu-vers-jour);
  background-position: bottom;
  background-size: 100% var(--h-fondu);
}
.bande--bas::after {
  background-image: var(--fondu-depuis-jour);
  background-position: top;
  background-size: 100% var(--h-fondu);
}
.bande--milieu::after {
  background-image: var(--fondu-depuis-jour), var(--fondu-vers-jour);
  background-position: top, bottom;
  background-size: 100% var(--h-fondu), 100% var(--h-fondu);
}

/* Le texte d'une bande reprend exactement les regles du bandeau sombre. */
.bande .kicker { color: var(--accent-clair); }
.bande .titre-section, .bande .entete-page__titre, .bande h2, .bande h3 { color: var(--jour); }
.bande .texte, .bande .intro-section, .bande .entete-page__intro { color: var(--nuit-texte-fort); }
.bande .note, .bande .note-section { color: var(--nuit-texte); border-left-color: var(--nuit-filet); }
.bande .titre-section em, .bande .titre-section .texte-accent { color: var(--accent-clair); }
.bande :focus-visible { outline-color: var(--jour); }
.bande .bouton--filet { color: var(--jour); border-color: var(--nuit-filet-fort); }
.bande .bouton--filet:hover { border-color: var(--accent-clair); }

/* --- 4. L'en-tete CLAIR (decision C) --------------------------------------
   Meme objet que `.entete`, mais dans le corps clair : la bande sombre de la
   page vit ailleurs. Il reprend les jetons du corps, sans fondu ni lueur
   froide, et une seule lueur tres pale pour qu'il ne soit pas un aplat. */

.entete--clair {
  background-color: var(--jour);
  /* La lueur est portee par le FOND de l'element et centree HORS de sa boite :
     posee sur un pseudo-element comme sur un en-tete sombre, elle laissait voir
     le bord de sa boite, une marche pale en travers du blanc (constate au
     rendu le 17/09). Rien ne derive ici : sur du blanc, un halo qui bouge se
     remarque au lieu de se sentir. */
  background-image:
    radial-gradient(130% 95% at 88% -14%, rgba(74, 126, 245, 0.09) 0%, rgba(74, 126, 245, 0) 58%);
  color: var(--encre);
}
.entete--clair::before { display: none; }
.entete--clair::after { display: none; }
.entete--clair .kicker { color: var(--accent-profond); }
.entete--clair .entete-page__titre { color: var(--encre); }
.entete--clair .entete-page__intro { color: var(--encre-mi); }
.entete--clair .entete-page__titre .texte-accent,
.entete--clair .entete-page__titre em { color: var(--accent-profond); }
.entete--clair .fil__liste { color: var(--gris); }
.entete--clair .fil__liste a { color: var(--gris); }
.entete--clair .fil__liste a:hover { color: var(--encre); }
.entete--clair .fil__liste [aria-current="page"] { color: var(--encre); }
.entete--clair .fil__liste li + li::before { background: var(--filet); }
.entete--clair :focus-visible { outline-color: var(--accent); }
.entete--clair .bouton--filet { color: var(--encre); border-color: var(--filet); }
.entete--clair .bouton--filet:hover { border-color: var(--accent); }

/* --- 5. Le fondu comme bord de bande reutilisable -------------------------
   Pour un bloc qui n'est pas une `.bande` mais qui a besoin du meme bord. */
.bord-fondu-bas, .bord-fondu-haut {
  position: relative;
  isolation: isolate;
}
.bord-fondu-bas::after, .bord-fondu-haut::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--h-fondu);
  z-index: -1;
  pointer-events: none;
}
.bord-fondu-bas::after { bottom: 0; background: var(--fondu-vers-jour); }
.bord-fondu-haut::after { top: 0; background: var(--fondu-depuis-jour); }

/* --- 5 bis. IMPRESSION : le contenu ne depend pas d'un defilement ---------
   Defaut mesure le 17/09 : une entree `data-anim` n'est revelee que lorsque
   l'element entre dans la vue. A l'impression, rien ne defile : tout ce qui
   vivait sous la ligne de flottaison sortait BLANC. Le meme piege frappe toute
   capture de page entiere sans defilement. Ici, l'etat final partout : le
   papier ne sait pas animer, il n'a donc rien a reveler. */
@media print {
  .js-anim [data-anim],
  .js-anim [data-anim].est-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* --- 6. Mouvement reduit : la regle unique -------------------------------
   Aucune boucle, aucune entree, l'etat final partout. Elle vient APRES tout
   ce qui precede et avant les animations de l'accueil : celles-ci ajoutent
   leurs propres etats finaux dans leur section. */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim],
  .js-anim [data-anim].est-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .entete::before, .heros::before, .bande::before,
  .carte-formulaire::after, .carte-visuel::after {
    animation: none;
  }
  .carte { transition: none; }
  .carte:hover { transform: none; }
}

/* =========================================================================
   LARGEURS DES JAUGES DE LA MAQUETTE
   La politique de securite du site interdit l'attribut `style`. Les huit
   remplissages de la maquette d'exemple passent donc par une classe. Ce sont
   les SEULES valeurs geometriques portees par le document.
   ========================================================================= */

.p18 { width: 18%; }
.p26 { width: 26%; }
.p38 { width: 38%; }
.p44 { width: 44%; }
.p62 { width: 62%; }
.p68 { width: 68%; }
.p74 { width: 74%; }
.p81 { width: 81%; }

/* =========================================================================
   LES QUATRE VIGNETTES ANIMEES DE L'ACCUEIL (contrat v7 section 1.1)
   Une seule animation continue par vignette, de 7 a 9 s, en `transform`,
   `opacity` et `stroke-dashoffset` uniquement. Les quatre vignettes vivent
   sur `index.html` et nulle part ailleurs : une feuille de page ne les
   reprend pas. `transform-box: view-box` rend les translations exprimees en
   pixels egales aux unites du `viewBox`.
   ========================================================================= */

/* --- 01 Audit : la loupe qui se deplace et grossit vraiment ---------------
   Trois groupes emboites produisent le grossissement qui SUIT le verre :
   `.a01-verre` translate le verre de (cx, cy), `scale(2.1)` agrandit, et
   `.a01-grossi` translate la copie de (-cx, -cy). Le produit des trois vaut
   translate(cx,cy) scale(2,1) translate(-cx,-cy), c'est-a-dire un
   agrandissement CENTRE sur le point survole. Les deux translations portent
   les memes temps, donc le decoupage et le contenu ne se desynchronisent pas.
   Le facteur etait de 1,6 : mesure a l'oeil, il ne se lisait ni a l'echelle 1
   ni a 390 px (verdict du 17/09). */

/* Les quatre arrets tombent sur du CONTENU, jamais sur le vide : la barre de
   texte de chaque ligne surlignee (x 140) et sa marque pleine (x 368). Mesure
   du 17/09 : arrete a x 348, le verre grossissait la fin vide des lignes et
   l'effet ne se lisait pas, alors qu'il etait bien present. L'etat de repos
   (sans script, ou sous mouvement reduit) est l'arret sur la marque : c'est la
   ou le grossissement fige se voit le mieux. */
.a01-verre, .a01-grossi { transform-box: view-box; }
.a01-verre { transform: translate(368px, 60px); }
.a01-grossi { transform: translate(-368px, -60px); }
.js-anim .a01-verre { animation: a01-course var(--duree-boucle) ease-in-out infinite; }
.js-anim .a01-grossi { animation: a01-course-inverse var(--duree-boucle) ease-in-out infinite; }

@keyframes a01-course {
  0%, 8%    { transform: translate(140px, 60px); }
  30%, 38%  { transform: translate(368px, 60px); }
  46%, 54%  { transform: translate(368px, 112px); }
  76%, 84%  { transform: translate(140px, 112px); }
  100%      { transform: translate(140px, 60px); }
}
@keyframes a01-course-inverse {
  0%, 8%    { transform: translate(-140px, -60px); }
  30%, 38%  { transform: translate(-368px, -60px); }
  46%, 54%  { transform: translate(-368px, -112px); }
  76%, 84%  { transform: translate(-140px, -112px); }
  100%      { transform: translate(-140px, -60px); }
}

/* A 390 px la carte large ne dispose que de 310 px pour 480 unites de viewBox :
   l'echelle mesuree tombe a 0,6458 et un verre de 48 unites n'y ferait que
   62 px de diametre. La scene entiere est donc agrandie de 30 % sous 700 px,
   ce qui recadre la liste sur ses bords gauche et droit (les unites 55 a 425
   des 480 restent visibles, le panneau blanc va au bord au lieu de montrer ses
   coins arrondis) et porte le verre a 81 px de diametre. Rien n'est recadre en
   hauteur : 158 px de boite pour 176 unites a 0,8395 laissent de la marge.
   L'ORIGINE S'ECRIT : mesure du 17/09, Chrome resout `transform-origin` d'un
   groupe SVG a `0px 0px` et non au centre du viewBox, ce qui poussait la scene
   vers la droite et coupait le verre au bord. */
@media (max-width: 699px) {
  .a01-scene { transform-origin: 240px 88px; transform: scale(1.3); }
}

.a01-vitre { fill: var(--jour); }
.a01-cercle { fill: none; stroke: var(--teinte-encre, var(--accent-profond)); stroke-width: 4.5; }
.a01-manche { fill: none; stroke: var(--teinte-encre, var(--accent-profond)); stroke-width: 6.5; stroke-linecap: round; }
.a01-reflet { fill: none; stroke: var(--jour); stroke-width: 6.5; stroke-linecap: round; opacity: 0.85; }

/* --- 02 Structuration : la regle qui trie --------------------------------
   La regle graduee est la LIGNE DE BASE : posee une fois pour toutes sous les
   colonnes (`translateY(156px)`, donc corps sur y 150 a 162 et graduations
   dedans), elle ne balaie plus l'image de haut en bas. Verdict du 17/09 : ce
   balayage vertical laissait voir la regle en haut avec des points epars
   dessous, et l'etat trie ne durait pas.
   Ce qui balaie, c'est `.s02-curseur`, une lueur et un trait qui courent sur la
   regle de gauche a droite en 1,8 s. Chaque point se range AU MOMENT ou le
   curseur le croise : son delai vaut exactement 1,0 s + 1,8 s x (x - 40) / 240,
   pose dans `--d` et lu par la forme courte `animation`. Mesure du 17/09 : les
   anciens delais portes par `.s02-pt--mi` et `.s02-pt--tard` valaient 0 s
   (specificite inferieure a celle de la forme courte), donc les neuf points
   partaient ENSEMBLE ; les faire passer par une variable de la meme regle
   supprime le piege.
   Cycle de 10 s (le contrat autorise 8 a 10 s pour cette vignette). Mesure du
   deroulement : tous les points ranges de 3,6 s a 8,7 s, soit 51 % du cycle,
   jauges pleines de 3,4 s a 8,7 s ; dispersion visible 1 s par point ;
   dissolution 0,6 s. ETAT DE REPOS (sans script, ou sous mouvement reduit) :
   colonnes rangees et jauges levees, ecrit dans les regles elles-memes, pas
   dans le bloc de mouvement reduit. C'est une correction : `.s02-jauge` valait
   `opacity: 0` au repos, donc les trois jauges etaient invisibles sans script
   et sous mouvement reduit, ce que les fondations annoncaient pourtant levees. */

/* Anneau blanc autour de chaque point : sans lui, les points se perdent dans
   les jauges (la plus haute porte exactement leur couleur, `--teinte-encre`),
   et l'etat trie ne se lisait plus comme un empilement. Meme parade que pour
   `.s03-paquet`, qui traverse lui aussi un fond pale puis un aplat sombre.
   Chaque point rejoint la colonne la plus PROCHE de son abscisse, et prend la
   case la plus basse encore libre : comme le curseur avance de gauche a
   droite, les colonnes s'empilent du bas vers le haut dans l'ordre de passage
   et aucun point ne vole vers une colonne que le curseur n'a pas atteinte.
   Colonnes a x 96 (2 points), 160 (3) et 224 (4) ; cases a y 144, 112, 80, 48. */
.s02-pt, .s02-regle, .s02-curseur { transform-box: view-box; }
.s02-pt {
  fill: var(--teinte-encre, var(--accent-profond));
  stroke: var(--jour);
  stroke-width: 2.4;
  transform: translate(var(--tx), var(--ty));
}
.js-anim .s02-pt { animation: s02-ranger 10s var(--courbe) var(--d, 0s) infinite; }

.s02-p1 { --tx: 34px;  --ty: 110px; --d: 1.165s; }
.s02-p5 { --tx: 10px;  --ty: 34px;  --d: 1.345s; }
.s02-p2 { --tx: 42px;  --ty: 122px; --d: 1.585s; }
.s02-p9 { --tx: 32px;  --ty: 6px;   --d: 1.660s; }
.s02-p6 { --tx: 10px;  --ty: 16px;  --d: 1.825s; }
.s02-p3 { --tx: 48px;  --ty: 98px;  --d: 2.020s; }
.s02-p7 { --tx: 20px;  --ty: 18px;  --d: 2.230s; }
.s02-p4 { --tx: -14px; --ty: 52px;  --d: 2.485s; }
.s02-p8 { --tx: -38px; --ty: -22px; --d: 2.665s; }

@keyframes s02-ranger {
  0%        { transform: translate(0, 0); opacity: 1; }
  8%, 77%   { transform: translate(var(--tx), var(--ty)); opacity: 1; }
  83%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
  84%       { transform: translate(0, 0); opacity: 0; }
  90%, 100% { transform: translate(0, 0); opacity: 1; }
}

.s02-regle-corps { fill: var(--teinte, var(--accent)); fill-opacity: 0.22; }
.s02-regle-traits { fill: none; stroke: var(--teinte-encre, var(--accent-profond)); stroke-width: 1.7; stroke-linecap: round; }
.s02-regle { transform: translateY(156px); }

.s02-curseur { transform: translateX(40px); opacity: 0; }
.js-anim .s02-curseur { animation: s02-balayer 10s linear infinite; }
@keyframes s02-balayer {
  0%, 8%    { transform: translateX(40px);  opacity: 0; }
  10%       { transform: translateX(40px);  opacity: 1; }
  28%       { transform: translateX(280px); opacity: 1; }
  34%, 100% { transform: translateX(280px); opacity: 0; }
}
.s02-lueur { fill: url(#s02-degrade-lueur); }
.s02-arret-bord { stop-color: var(--teinte, var(--accent)); stop-opacity: 0; }
.s02-arret-coeur { stop-color: var(--teinte, var(--accent)); stop-opacity: 0.32; }
.s02-trait { fill: var(--teinte-encre, var(--accent-profond)); opacity: 0.5; }
.s02-tete { fill: var(--teinte-encre, var(--accent-profond)); }

.s02-jauge { transform-box: fill-box; transform-origin: 50% 100%; }
.js-anim .s02-jauge { animation: s02-mesurer 10s var(--courbe) infinite; }
@keyframes s02-mesurer {
  0%, 24%   { opacity: 0; transform: scaleY(0.04); }
  34%, 87%  { opacity: 1; transform: scaleY(1); }
  93%, 100% { opacity: 0; transform: scaleY(1); }
}

/* --- 03 Automatisation : le paquet qui circule ---------------------------
   UN seul paquet a la fois (le second, decale de -3,5 s, faisait voir deux
   paquets et brouillait le sens : verdict du 17/09). Il va toujours de gauche
   a droite, du bloc d'entree au bloc central, ou il s'arrete pendant que la
   coche se trace, puis au bloc de sortie. Les connecteurs portent une pointe
   de fleche (`.s03-fleche`) qui dit le sens sans animation. */

/* Au repos (sans script, ou sous mouvement reduit) le paquet est ARRETE sur le
   bloc central, la ou la validation se fait : c'est l'etat qui dit la phase. */
/* Un anneau blanc autour du disque : le paquet traverse un fond pale PUIS un
   bloc sombre, et aucune couleur pleine ne se lit sur les deux. */
.s03-paquet {
  transform-box: view-box;
  transform: translateX(76px);
  fill: var(--teinte, var(--accent));
  stroke: var(--jour);
  stroke-width: 2.6;
}
.js-anim .s03-paquet { animation: s03-circuler 7s var(--courbe) infinite; }
@keyframes s03-circuler {
  0%        { transform: translateX(0); opacity: 0; }
  4%        { transform: translateX(0); opacity: 1; }
  20%, 44%  { transform: translateX(76px); opacity: 1; }
  60%, 76%  { transform: translateX(196px); opacity: 1; }
  82%, 100% { transform: translateX(196px); opacity: 0; }
}

.s03-fleche {
  fill: none;
  stroke: var(--teinte, var(--accent));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s03-halo { fill: var(--teinte, var(--accent)); fill-opacity: 0.2; opacity: 0; }
.s03-halo--b { opacity: 1; }
.js-anim .s03-halo { animation: s03-eclairer 7s ease-in-out infinite; }
/* Chaque halo s'allume quand le paquet est SUR son bloc : entree jusqu'a 10 %,
   bloc central de 20 a 44 %, sortie de 60 a 76 %. */
.js-anim .s03-halo--a { animation-delay: -0.4s; }
.js-anim .s03-halo--b { animation-delay: 0.98s; }
.js-anim .s03-halo--c { animation-delay: 3.78s; }
@keyframes s03-eclairer {
  0%        { opacity: 0; }
  8%, 22%   { opacity: 1; }
  34%, 100% { opacity: 0; }
}

/* La coche se trace quand le paquet est dans le bloc et RESTE affichee bien
   apres qu'il en est sorti : elle ne s'efface qu'a 92 a 98 %, c'est-a-dire
   juste avant l'entree du paquet suivant. */
.s03-coche { stroke-dasharray: 46; stroke-dashoffset: 0; }
.js-anim .s03-coche { animation: s03-valider 7s var(--courbe) infinite; }
@keyframes s03-valider {
  0%, 20%   { stroke-dashoffset: 46; }
  30%, 92%  { stroke-dashoffset: 0; }
  98%, 100% { stroke-dashoffset: 46; }
}

.s03-veille { opacity: 1; }
.js-anim .s03-veille { opacity: 0; animation: s03-eveiller 7s ease-in-out infinite; }
@keyframes s03-eveiller {
  0%, 16%   { opacity: 0; }
  24%, 48%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}

.s03-flux { stroke-dasharray: 5 6; }
.js-anim .s03-flux { animation: s03-defiler 2.4s linear infinite; }
@keyframes s03-defiler { to { stroke-dashoffset: -22px; } }

/* --- 04 Maintien : la fleche qui tourne ----------------------------------
   Un tour en 9 s, vitesse constante, centre de rotation au centre exact du
   cercle (240, 96 dans le `viewBox`). Une coche du calendrier se trace a
   chaque tour, et les trois se reinitialisent ensemble au bout de trois. */

.s04-cycle { transform-box: view-box; transform-origin: 176px 92px; }
.js-anim .s04-cycle { animation: s04-tourner var(--duree-boucle) linear infinite; }
@keyframes s04-tourner { to { transform: rotate(360deg); } }

.s04-coeur { transform-box: fill-box; transform-origin: 50% 50%; }
.js-anim .s04-coeur { animation: s04-respirer 6s ease-in-out infinite alternate; }
@keyframes s04-respirer {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* Le calendrier : deux anneaux, un bandeau d'en-tete a la teinte de la phase
   (aplat, il ne porte aucun texte) et douze cases en lavis de la meme teinte.
   Les coches sont portees a 3,2 d'epaisseur, contre 2,6 pour `.vg-coche`,
   parce qu'a 1280 elles doivent se lire franchement dans une case de 32 x 22.
   La longueur du trace est passee de 26 a 30 : c'est la longueur reelle du
   nouveau chemin, 9,2 plus 20,5. */
.s04-anneau { fill: none; stroke: var(--teinte-encre, var(--accent-profond)); stroke-width: 3; stroke-linecap: round; }
.s04-bandeau { fill: var(--teinte, var(--accent)); }
.s04-case { fill: var(--teinte, var(--accent)); fill-opacity: 0.14; }

.s04-coche { stroke-dasharray: 30; stroke-dashoffset: 0; stroke-width: 3.2; }
.js-anim .s04-coche--1 { animation: s04-cocher-1 27s var(--courbe) infinite; }
.js-anim .s04-coche--2 { animation: s04-cocher-2 27s var(--courbe) infinite; }
.js-anim .s04-coche--3 { animation: s04-cocher-3 27s var(--courbe) infinite; }
@keyframes s04-cocher-1 {
  0%        { stroke-dashoffset: 30; }
  4%, 96%   { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 30; }
}
@keyframes s04-cocher-2 {
  0%, 33%   { stroke-dashoffset: 30; }
  37%, 96%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 30; }
}
@keyframes s04-cocher-3 {
  0%, 66%   { stroke-dashoffset: 30; }
  70%, 96%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 30; }
}

/* Mouvement reduit : aucune boucle, et l'ETAT FINAL de chacune. La loupe est
   posee sur une ligne surlignee et son grossissement est fige ; les points
   sont ranges et les jauges levees ; le paquet est arrete sur le bloc central,
   sa coche tracee ; la roue est immobile et les trois coches sont faites. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .a01-verre, .js-anim .a01-grossi,
  .js-anim .s02-pt, .js-anim .s02-curseur, .js-anim .s02-jauge,
  .js-anim .s03-paquet, .js-anim .s03-halo, .js-anim .s03-coche,
  .js-anim .s03-veille, .js-anim .s03-flux,
  .js-anim .s04-cycle, .js-anim .s04-coeur,
  .js-anim .s04-coche--1, .js-anim .s04-coche--2, .js-anim .s04-coche--3 {
    animation: none;
  }
  .s03-paquet { opacity: 1; }
  .js-anim .s03-veille { opacity: 1; }
  .s03-halo--b { opacity: 1; }
}