/* Odissia Expertise — le site de présentation. Une seule feuille pour les six
   pages. VERSION 8, le 8 septembre 2026, sa commande : « trop simpliste, ça
   fait trop penser à l'IA, ça manque de design système, un peu pauvre ».

   ═══════════════════════════════════════════════════════════════════════
   LE SYSTÈME, EN QUATRE RÈGLES — elles sont gardées par le banc
   (banc/manuel.mjs, « Le site tient ses mesures de lisibilité » et
   « Le site a un système »).
   1. TOUTE couleur est un jeton de :root. Aucun hexadécimal ailleurs dans
      cette feuille — les pages ne connaissent que des noms.
   2. TOUTE taille de texte vient de l'échelle (--t-…), fluide : les polices
      grandissent avec l'écran. Les écrans DESSINÉS de l'application, eux,
      se mesurent en em depuis une seule taille (--ecran-taille) : un
      téléphone plus grand agrandit tout ce qu'il porte.
   3. TOUT espacement de section vient de l'échelle (--e-…).
   4. Deux familles de caractères, servies par les jetons : Archivo (variable,
      avec un axe de largeur — le titrage se resserre à 90 %, le corps reste à
      100 %) et Spline Sans Mono pour ce qui se relève (heures, références).
      L'application, elle, parle la police du système ; le site garde sa
      palette EXACTE (src/theme.js) — le navy, l'or rationné, le gris froid.
   ═══════════════════════════════════════════════════════════════════════

   Le monde : L'APPLICATION À L'ÉCHELLE DU SITE. Le navy de l'en-tête de l'app
   devient le sol du héros et des temps forts ; les écrans dessinés sont
   grands, en léger relief, et ils SE JOUENT : le constat se dresse pendant
   qu'on défile. L'or ne marque que trois choses : l'action, le sceau, ce qui
   se fige. */

:root {
  /* ---- Les couleurs de l'application (src/theme.js) ---- */
  --marine: #16233f;          /* navy — le sol des temps forts */
  --marine-2: #1d2c4f;        /* une surface posée sur le navy */
  --marine-3: #3d5480;        /* navyLight — traits, ondes, secondaire */
  --marine-encre-clair: #2c3d63;
  --or: #c9a227;              /* accent — rationné : l'action, le sceau, ce qui se fige */
  --or-clair: #e2c766;        /* l'or sur le navy */
  --or-doux: #fbf5e4;         /* accentSoft */
  --or-encre: #7a6209;        /* l'or qui s'ÉCRIT : 5,39:1 sur l'or doux, 4,67:1 sur le blanc */
  --fond: #f6f7f9;            /* bg */
  --carte: #ffffff;           /* card */
  --champ: #f1f3f6;           /* inputBg */
  --bordure: #eaecf0;         /* border */
  --bordure-champ: #7E89A1;   /* la limite d'un champ à remplir — 3,51:1 contre la carte,
                                 la norme WCAG 1.4.11 pour un élément d'interface est 3:1 */
  --texte: #16233f;           /* text */
  /* ⚠️ CETTE ENCRE SE CALCULE, ELLE NE SE CHOISIT PAS À L'ŒIL — la règle du
     thème de l'application. textMuted (#667085) tombait à 4,33:1 sur le lavis
     doré du héros ; #5e6879 mesure 4,89:1 sur le lavis, 5,25:1 sur le fond,
     5,63:1 sur une carte. Le banc recalcule ces paires. */
  --texte-2: #5e6879;
  --texte-3: #868c9c;         /* placeholder — 3:1, jamais pour un texte qui informe */
  --sur-marine: #ffffff;
  --sur-marine-2: #b7c1d9;    /* 8,65:1 sur le navy */
  --sur-marine-3: #8b96b2;    /* 5,28:1 sur le navy — les intitulés du pied */
  --pied-titre: #8b96b2;
  --pied-texte: #97a2bd;      /* 6,1:1 */
  --pied-lien: #d4dbe9;
  --filet-marine: rgba(255, 255, 255, .14);
  --lavis: rgba(22, 35, 63, .055);
  --lavis-or: rgba(201, 162, 39, .14);
  --succes-encre: #2e7d4f;
  --succes-fond: #e9f5ee;
  --attente-encre: #8a5f0b;
  --attente-fond: #fff6e3;
  --danger-encre: #c0392b;
  --danger-fond: #fcedea;
  --appareil-haut: #2c3b60;
  --appareil-bas: #0b1224;
  --noir: #000000;
  --photo-1: #2e3d5e;
  --photo-2: #50638a;
  --photo-3: #8996b0;
  --ligne-doc: #e9ebf1;
  --doc-cadre-1: #e7ebf3;
  --doc-cadre-2: #f3f5f9;
  --poignee: #c3c9d6;
  --surligne: #ffef9d;
  --surligne-encre: #52430a;

  /* ---- Les caractères ---- */
  --titrage: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;
  --titrage-largeur: 90%;

  /* ---- L'échelle des tailles, fluide : plus grosse partout que la v7 ---- */
  --t-display: clamp(2.5rem, .6rem + 4.4vw, 4.25rem);     /* le titre du héros, 68 px à 1 440 : trois lignes */
  --t-1: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);             /* h2 */
  --t-2: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);            /* h3 */
  --t-3: clamp(1.15rem, 1.05rem + .4vw, 1.3rem);          /* h4, intitulés */
  --t-lead: clamp(1.125rem, 1rem + .5vw, 1.3rem);         /* l'accroche */
  --t-corps: clamp(1.0625rem, 1rem + .2vw, 1.125rem);     /* 17 → 18 px */
  --t-petit: .9375rem;
  --t-etiquette: .8125rem;
  --t-mini: .75rem;
  --t-ui: 1rem;                                           /* le menu, les commandes */
  --t-display-court: clamp(2rem, 1.1rem + 3vw, 3.4rem);    /* le titre des autres pages */

  /* ---- L'échelle des espaces, base 4 px ---- */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem;
  --e-section: clamp(4.5rem, 9vw, 8rem);
  --e-section-court: clamp(3rem, 6vw, 5rem);
  --gabarit: 80rem;
  --prose: 44rem;
  --mesure: 66ch;

  /* ---- Rayons, ombres ---- */
  --r-s: 8px; --r-m: 14px; --r-l: 24px; --r-rond: 999px;
  --ombre-1: 0 1px 2px rgba(22, 35, 63, .05), 0 4px 12px rgba(22, 35, 63, .06);
  --ombre-2: 0 2px 6px rgba(22, 35, 63, .08), 0 20px 44px rgba(22, 35, 63, .14);
  --ombre-3: 0 12px 28px rgba(8, 14, 30, .28), 0 48px 96px rgba(8, 14, 30, .38);
  --ombre-or: 0 8px 24px rgba(201, 162, 39, .28);

  /* ---- Le mouvement ---- */
  --d-1: 150ms; --d-2: 300ms; --d-3: 600ms; --d-4: 900ms;
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --boucle: 12s;

  /* ⚠️ LA HAUTEUR DE L'EN-TÊTE — repli pour qui arrive sans JavaScript. Le
     script la MESURE et la pose sur <html> ; en dessous de 700 px l'en-tête se
     replie sur deux lignes (le menu passe sous la marque) et passe de 72 à
     ~140 px. Le repli suit la largeur, lui aussi. */
  --h-entete: 4.5rem;
}
@media (max-width: 700px) { :root { --h-entete: 9rem; } }

/* ═══════════════ 1 · LE SOCLE ═══════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--marine); color: var(--sur-marine); }
.section-marine ::selection, .heros ::selection, .pied ::selection { background: var(--or); color: var(--marine); }

.gabarit { max-width: var(--gabarit); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.prose { max-width: var(--prose); }
.prose p { max-width: var(--mesure); }

h1, h2, h3, h4 { font-family: var(--titrage); text-wrap: balance; font-stretch: var(--titrage-largeur); }
h1 { font-size: var(--t-display); font-weight: 720; line-height: .98; letter-spacing: -.035em; }
h2 { font-size: var(--t-1); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: var(--t-2); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
h4 { font-size: var(--t-3); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
h2 + p, h3 + p { margin-top: var(--e-4); }
p + p { margin-top: var(--e-4); }
strong { font-weight: 650; }
p, li { text-wrap: pretty; }

/* L'accent des titres : l'or, en romain. Sur le clair, il s'ÉCRIT (or-encre) ;
   sur le navy, il brille (or-clair). */
h1 em, h2 em, h3 em { font-style: normal; font-weight: inherit; color: var(--or-encre); }
.heros h1 em, .section-marine :is(h2, h3) em, .bandeau-cta h2 em { color: var(--or-clair); }
/* Sur le navy, l'or qui s'écrit est l'or CLAIR — sa demande du 11 septembre 2026 :
   l'or foncé (5,39:1 sur blanc) se voit mal sur le bleu. Le jeton est redéfini dans
   chaque contenant navy, donc chaque règle qui l'emploie suit, y compris les
   en-têtes des pages Fonctionnalités, Mise en service et Conditions. */
:is(.heros, .heros-petit, .section-marine, .bandeau-cta, .pied, .aparte-rdv) { --or-encre: var(--or-clair); }
/* Le groupe souligné du héros ne se coupe pas : « sur le terrain » reste sur une ligne. */
.heros h1 em { white-space: nowrap; }

a { color: inherit; }
main a:not(.bouton):not(.rail a):not(.sommaire a):not(.etiquette-lien) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--or) 70%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--d-1) var(--ease-standard);
}
main a:not(.bouton):hover { text-decoration-color: var(--or); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 3px;
}
:where(.heros, .section-marine, .pied, .entete) :is(a, button):focus-visible { outline-color: var(--or-clair); }

/* Les chiffres se tiennent comme sur un relevé. */
:where(td, .quand, .sous, .ecran-statut, .heros-preuves, .doc-date, .calc-ligne,
       .cliche span, .photo-cadre::after, .eo-quand, .preuve-liste dd) {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ═══════════════ 2 · LES COMPOSANTS ═══════════════ */

/* Le repère : la SEULE étiquette au-dessus d'un titre, sur l'accueil (elle dit
   pour qui) et sur la politique (elle dit l'éditeur). Partout ailleurs, le
   titre parle seul — le banc compte. */
.sur-titre {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin-bottom: var(--e-5);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.sur-titre::before { content: ""; width: .55em; height: .55em; background: var(--or); rotate: -8deg; flex: none; }
.heros .sur-titre { color: var(--or-clair); }

/* Les boutons : trois tenues, une seule forme. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: .85rem 1.4rem;
  border-radius: var(--r-rond);
  border: 1px solid transparent;
  /* Du relief — sa demande du 11 septembre 2026 : un reflet en haut, une ombre
     portée dessous, et le bouton se soulève sous la souris. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(22, 35, 63, .14), 0 6px 16px rgba(22, 35, 63, .12);
  white-space: nowrap;
  transition: transform var(--d-1) var(--ease-standard), background var(--d-1) var(--ease-standard),
              border-color var(--d-1) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard),
              color var(--d-1) var(--ease-standard);
}
.bouton::after { content: "→"; font-size: .9em; opacity: .85; transition: transform var(--d-2) var(--ease-sortie); }
.bouton:hover::after { transform: translateX(4px); }
.bouton:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 4px rgba(22, 35, 63, .16), 0 12px 26px rgba(22, 35, 63, .18); }
.bouton:active { transform: translateY(0) scale(.985); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); }
.bouton-accent { background-color: var(--marine); color: var(--sur-marine); }
.bouton-accent:hover { background-color: var(--marine-3); }
.bouton-contour { background-color: var(--carte); border-color: color-mix(in srgb, var(--marine) 30%, transparent); color: var(--texte); }
.bouton-contour:hover { border-color: var(--marine); }
/* Sur le navy, l'action porte l'or de l'application. */
:is(.heros, .section-marine, .bandeau-cta, .aparte-rdv) .bouton-accent { background-color: var(--or); color: var(--marine); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .25), var(--ombre-or); }
:is(.heros, .section-marine, .bandeau-cta, .aparte-rdv) .bouton-accent:hover { background-color: var(--or-clair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .25), 0 14px 32px rgba(201, 162, 39, .38); }
:is(.heros, .section-marine, .bandeau-cta) .bouton-contour { background-color: transparent; }
:is(.heros, .section-marine, .bandeau-cta) .bouton-contour { border-color: rgba(255, 255, 255, .3); color: var(--sur-marine); }
:is(.heros, .section-marine, .bandeau-cta) .bouton-contour:hover { border-color: rgba(255, 255, 255, .75); }
.bouton-petit { padding: .65rem 1.4rem; font-size: var(--t-petit); }
.bouton-petit::after { content: none; }
.bouton-encre { background-color: var(--marine); color: var(--sur-marine); }
.bouton-encre:hover { background-color: var(--marine-3); }

/* Les puces : un mot, une pastille. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.chips li {
  font-family: var(--mono);
  font-size: var(--t-petit);
  letter-spacing: .02em;
  padding: .45rem .95rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-rond);
  background: var(--carte);
}
.chips-barrees li { text-decoration: line-through; text-decoration-color: var(--or); color: var(--texte-2); }
.chip-forte { border-color: var(--or); color: var(--or-encre); font-weight: 500; }
.section-marine .chips li { background: var(--marine-2); border-color: var(--filet-marine); color: var(--sur-marine); }
.section-marine .chips-barrees li { color: var(--sur-marine-2); }

/* La carte : une surface blanche sur le gris de l'application. */
.carte-bloc {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--ombre-1);
}
.carte-bloc h3 { margin-bottom: var(--e-3); }
.carte-bloc p { color: var(--texte-2); }

/* L'encadré : une note en marge du dossier, en pointillés. */
.encadre {
  border: 1.5px dashed color-mix(in srgb, var(--marine) 28%, transparent);
  background: var(--carte);
  padding: var(--e-5) var(--e-6);
  margin-top: var(--e-6);
  border-radius: var(--r-l);
}
.encadre-titre {
  font-family: var(--titrage);
  font-size: var(--t-3);
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: var(--e-2);
}
.encadre p { color: var(--texte-2); }

/* Les listes : un tiret d'or, jamais un rond. */
.liste { list-style: none; margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.liste li { padding-left: 1.8rem; position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: .7em; width: .9rem; height: 2px; background: var(--or); }
.liste-serree { gap: var(--e-3); }
.section-marine .liste li { color: var(--sur-marine-2); }
.section-marine .liste strong { color: var(--sur-marine); }

/* L'exergue : la phrase surlignée du dossier, au marqueur doré. */
.exergue {
  margin-top: var(--e-6);
  font-family: var(--titrage);
  font-stretch: var(--titrage-largeur);
  font-size: var(--t-2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  max-width: 36rem;
  text-wrap: balance;
}
.exergue strong {
  font-weight: inherit;
  background: var(--or-doux);
  box-shadow: inset 0 -2px 0 rgba(201, 162, 39, .55);
  padding: .02em .18em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.section-marine .exergue { color: var(--sur-marine); }
.section-marine .exergue strong { background: rgba(201, 162, 39, .18); box-shadow: inset 0 -2px 0 rgba(226, 199, 102, .6); color: var(--or-clair); }

/* Les étapes numérotées : une VRAIE séquence (la mise en service). */
.etapes { list-style: none; counter-reset: etape; margin-top: var(--e-7); display: grid; gap: 0; }
.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--e-5);
  padding: var(--e-6) 0;
  border-top: 1px solid var(--bordure);
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--titrage);
  font-stretch: var(--titrage-largeur);
  font-size: var(--t-1);
  font-weight: 720;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--or-encre);
}
.etapes h2 { font-size: var(--t-2); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--e-2); }
.etapes p { color: var(--texte-2); max-width: var(--mesure); }

/* Les tableaux des pages document. */
.tableau-cadre { overflow-x: auto; margin-top: var(--e-6); border: 1px solid var(--bordure); border-radius: var(--r-m); background: var(--carte); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--t-petit); }
th {
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
  text-align: left;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
}
td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--marine); font-weight: 500; }

/* Le surligneur des crochets à compléter avant publication. */
.a-completer { background: var(--surligne); color: var(--surligne-encre); padding: .05em .3em; border-radius: 4px; }

/* ═══════════════ 3 · L'EN-TÊTE ═══════════════ */

/* Le navy de l'application, partout, collant. Avec JavaScript, le menu se
   replie derrière un bouton sur un téléphone ; sans, il passe sous la marque
   (et l'en-tête grandit : le repli de --h-entete en tient compte). */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--marine) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--sur-marine);
  border-bottom: 1px solid var(--filet-marine);
}
.entete-int {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-6);
  min-height: 4.5rem;
  padding-top: var(--e-3);
  padding-bottom: var(--e-3);
}
.marque {
  font-family: var(--titrage);
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.marque span {
  display: inline-block;
  margin-left: .55em;
  padding-left: .55em;
  border-left: 1.5px solid var(--or);
  font-size: .56em;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or-clair);
  vertical-align: .12em;
}
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); font-size: var(--t-ui); font-weight: 500; }
.menu a { color: var(--sur-marine-2); text-decoration: none; padding: .3rem 0; transition: color var(--d-1) var(--ease-standard); }
.menu a:hover { color: var(--sur-marine); }
.menu a[aria-current="page"] { color: var(--sur-marine); box-shadow: inset 0 -2px 0 var(--or); }
/* ⚠️ LE PADDING SE REDIT ICI : le bouton vit dans le menu, et `.menu a` (padding
   .3rem 0) pèse plus lourd que `.bouton-petit` — c'est ce qui collait « Nous
   écrire » à ses bords (son constat du 11 septembre 2026). */
.entete .bouton-petit { padding: .65rem 1.4rem; background-color: var(--carte); color: var(--marine); box-shadow: inset 0 1px 0 var(--sur-marine), 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .18); }
.entete .bouton-petit:hover { background-color: var(--or-clair); }
/* ⚠⚠ DANS L'EN-TÊTE, LE BOUTON NE SE DÉPLACE PAS — 14 SEPTEMBRE 2026.
   Son retour : « le bouton "Nous écrire" en haut, quand on clique dessus, ça
   bugue un peu. C'est comme s'il vibrait, comme s'il y avait trois saccades. »

   MESURÉ : `.bouton:hover` monte de **2 px**, `.bouton:active` redescend à 0 en
   s'écrasant à .985, et le relâchement **remonte de 2 px**. Avec la transition
   sur `transform`, un seul clic produit donc **TROIS mouvements verticaux
   animés** : monte, descend, remonte. Ce n'était pas un bug, c'était l'effet —
   et l'effet était faux à cet endroit.

   ⚠️ POURQUOI ICI ET PAS AILLEURS : sur une grande page, un bouton qui se
   soulève sous la souris est une invitation — c'est sa demande du 11 septembre,
   et elle reste. Dans une barre de navigation serrée, où la souris passe SUR le
   bouton pour atteindre autre chose, le même effet devient un tremblement.

   Ce qui reste : la couleur change au survol, et l'appui écrase légèrement.
   **Une réponse au doigt, sans un seul déplacement vertical.** */
.entete .bouton-petit:hover { transform: none; }
.entete .bouton-petit:active { transform: scale(.985); }
.menu-bouton {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--filet-marine);
  color: var(--sur-marine);
  border-radius: var(--r-s);
  width: 2.75rem; height: 2.75rem;
  place-items: center;
  cursor: pointer;
}
.menu-bouton i { display: block; width: 1.15rem; height: 2px; background: currentColor; position: relative; }
.menu-bouton i::before, .menu-bouton i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.menu-bouton i::before { top: -6px; }
.menu-bouton i::after { top: 6px; }

/* ═══════════════ 4 · LE PIED ═══════════════ */

.pied { background: var(--marine); color: var(--pied-texte); font-size: var(--t-petit); }
.pied-int {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--e-7);
  padding-top: var(--e-8);
  padding-bottom: var(--e-5);
}
.marque-pied {
  font-family: var(--titrage);
  font-stretch: var(--titrage-largeur);
  font-size: var(--t-1);
  font-weight: 720;
  color: var(--sur-marine);
  letter-spacing: -.03em;
  margin-bottom: var(--e-3);
}
.marque-pied em {
  display: block;
  width: max-content;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1.5px solid var(--or);
  font-style: normal;
  font-size: .4em;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.pied-titre {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pied-titre);
  margin-bottom: var(--e-3);
}
.pied nav { display: grid; gap: var(--e-2); justify-items: start; }
.pied a { color: var(--pied-lien); text-decoration: none; transition: color var(--d-1) var(--ease-standard); }
.pied a:hover { color: var(--sur-marine); }
.pied-agence { color: var(--pied-texte); margin-top: var(--e-4); }
.pied-agence a { color: var(--pied-lien); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; }
.pied-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--filet-marine);
  padding-top: var(--e-5);
  font-size: var(--t-etiquette);
  line-height: 1.6;
  color: var(--pied-titre);
}

/* ═══════════════ 5 · LES SECTIONS ═══════════════ */

.section { padding: var(--e-section) 0; }
.section + .section { border-top: 1px solid var(--bordure); }
.section-blanche { background: var(--carte); }
.section-marine {
  position: relative;
  background:
    radial-gradient(900px 480px at 12% -5%, var(--lavis-or), transparent 55%),
    var(--marine);
  color: var(--sur-marine);
  overflow: hidden;
}
.section-marine + .section, .section + .section-marine { border-top: 0; }
.section-marine h2, .section-marine h3 { color: var(--sur-marine); }
.section-marine p { color: var(--sur-marine-2); }
.section-marine .prose strong { color: var(--sur-marine); }

.entete-section { max-width: 46rem; }
.entete-section p { margin-top: var(--e-4); font-size: var(--t-lead); line-height: 1.45; color: var(--texte-2); }
.section-marine .entete-section p { color: var(--sur-marine-2); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.duo-inverse > :first-child { order: 2; }
.duo-haut { align-items: start; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--e-5); margin-top: var(--e-7); }

/* Le bandeau d'appel, en fin de page. */
.bandeau-cta { background: var(--fond); padding: 0 0 var(--e-section); color: var(--sur-marine); }
.bandeau-cta .cta-int {
  background:
    radial-gradient(900px 500px at 85% 20%, var(--lavis-or), transparent 60%),
    var(--marine);
  border-radius: var(--r-l);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: var(--ombre-2);
}
.bandeau-cta h2 { color: var(--sur-marine); max-width: 20ch; }
.bandeau-cta p { color: var(--sur-marine-2); font-size: var(--t-lead); line-height: 1.45; max-width: 34rem; margin-top: var(--e-4); }
.cta-int { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--e-8); align-items: center; }
.heros-actions { margin-top: var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* ═══════════════ 6 · LE HÉROS ═══════════════ */

/* L'accueil s'ouvre sur le navy de l'application : le titre, très grand, et
   le téléphone, très grand, qui joue un constat. Le lavis doré vient de la
   droite, là où se pose le sceau. */
.heros {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 88% 12%, rgba(201, 162, 39, .16), transparent 62%),
    radial-gradient(900px 500px at 10% 100%, rgba(61, 84, 128, .35), transparent 60%),
    var(--marine);
  color: var(--sur-marine);
}
.heros-int {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: min(calc(100vh - 4.5rem), 50rem);
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.heros .accroche { margin-top: var(--e-5); font-size: var(--t-lead); line-height: 1.45; color: var(--sur-marine-2); max-width: 34rem; }
.heros .accroche strong { color: var(--sur-marine); font-weight: 600; }
.heros-offre {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--filet-marine);
  color: var(--sur-marine-2);
  font-size: var(--t-petit);
  line-height: 1.55;
  max-width: 34rem;
}
.heros-offre strong { color: var(--or-clair); font-weight: 600; }
/* ⚠️ L'ENCADRÉ PORTE DEUX PARAGRAPHES DEPUIS LE 14 SEPTEMBRE 2026 : le prix,
   puis ce qui l'explique. Ils vivent dans le MÊME cadre — deux cadres auraient
   fait deux arguments, alors que le second est la raison du premier. */
.heros-offre p { margin: 0; }
.heros-offre p + p { margin-top: .7em; }
.heros-preuves {
  list-style: none;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--filet-marine);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: .02em;
  color: var(--sur-marine-2);
}
.heros-preuves li { display: flex; align-items: center; gap: .6rem; }
.heros-preuves li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex: none; }

/* Les en-têtes des autres pages : le même navy, plus court. */
.heros-petit { background: var(--marine); color: var(--sur-marine); }
.heros-petit .gabarit { padding-top: var(--e-section-court); padding-bottom: var(--e-section-court); }
.heros-petit h1 { font-size: var(--t-display-court); max-width: 22ch; }
.heros-petit p { margin-top: var(--e-4); color: var(--sur-marine-2); max-width: 40rem; font-size: var(--t-lead); line-height: 1.45; }
.heros-petit .sur-titre { color: var(--or-clair); }

/* ═══════════════ 7 · L'APPAREIL — le téléphone montre L'APPLICATION ═══════════════ */

/* Un seul objet, réglé par une seule taille : tout ce qu'il porte se mesure
   en em depuis --ecran-taille. Le héros le montre à 400 px ; la page des
   fonctionnalités à 340 px ; le survol au défilement à 360 px. */
.appareil {
  --ecran-taille: .86rem;
  position: relative;
  z-index: 2;
  width: min(400px, 100%);
  background: linear-gradient(160deg, var(--appareil-haut), var(--appareil-bas) 40%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 54px;
  padding: 12px;
  box-shadow: var(--ombre-3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ecran {
  background: var(--fond);
  border-radius: 44px;
  overflow: hidden;
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--ecran-taille);
  line-height: 1.4;
}
.ecran-statut {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--marine); color: var(--sur-marine-2);
  font-family: var(--mono); font-size: .72em;
  padding: .85em 1.4em .2em;
}
.ecran-statut .encoche { width: 7.4em; height: 1.9em; background: var(--noir); border-radius: var(--r-rond); }
.ecran-tete { background: var(--marine); color: var(--sur-marine); padding: .8em 1.15em 1em; }
.ecran-tete .type { font-family: var(--titrage); font-weight: 650; font-size: 1.08em; letter-spacing: -.01em; }
.ecran-tete .sous { display: flex; justify-content: space-between; align-items: center; margin-top: .3em; color: var(--sur-marine-2); font-size: .78em; font-family: var(--mono); }
.pastille {
  background: var(--attente-fond); color: var(--attente-encre);
  font-family: var(--sans); font-weight: 650; font-size: .72em; letter-spacing: .08em; text-transform: uppercase;
  padding: .2em .7em; border-radius: var(--r-rond);
}
.pastille-ok { background: var(--succes-fond); color: var(--succes-encre); }
.fil { padding: .9em .8em 1.2em; display: grid; gap: .7em; }
.releve {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px;
  padding: .75em .85em; box-shadow: 0 1px 3px rgba(22, 35, 63, .05);
}
.releve .quand { color: var(--texte-2); font-family: var(--mono); font-size: .74em; letter-spacing: .02em; margin-bottom: .4em; }
.photo-cadre {
  height: 5.6em; border-radius: 8px; margin-bottom: .45em; position: relative; overflow: hidden;
  background:
    radial-gradient(60px 30px at 75% 20%, rgba(201, 162, 39, .35), transparent 60%),
    linear-gradient(115deg, var(--photo-1) 0%, var(--photo-2) 45%, var(--photo-3) 100%);
}
.photo-cadre::after {
  content: "12"; position: absolute; right: .5em; bottom: .4em;
  font-family: var(--mono); font-size: .7em; color: var(--sur-marine);
  background: rgba(14, 21, 38, .72); padding: .05em .4em; border-radius: 4px;
}
.onde { display: flex; align-items: flex-end; gap: 3px; height: 1.4em; margin-bottom: .45em; }
.onde i { width: 4px; background: var(--marine-3); border-radius: 2px; height: calc(4px + var(--h) * 14px); }
.releve .texte em { color: var(--texte-2); font-style: normal; font-family: var(--mono); font-size: .9em; }
.ecran-barre { display: grid; place-items: center; padding: .4em 0 .7em; }
.ecran-barre i { width: 7.5em; height: 5px; border-radius: var(--r-rond); background: rgba(22, 35, 63, .25); }

/* La barre de capture — un seul bouton : appui court, l'écran de capture
   (photographie ou vidéo) ; appui long, l'album. */
.barre-capture { display: flex; align-items: center; gap: .6em; justify-content: center; padding: .6em 0 .2em; }
.declencheur {
  width: 2.2em; height: 2.2em; border-radius: var(--r-rond);
  background: var(--carte); border: 2.5px solid var(--marine);
  box-shadow: inset 0 0 0 2px var(--carte), inset 0 0 0 8px var(--marine);
}
.capture-mot { font-family: var(--mono); font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }

/* La fiche « rapport » qui flotte devant le téléphone. */
.carte-rapport {
  position: absolute; z-index: 3; right: -1.5rem; bottom: -1.2rem; width: 13rem;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 16px; padding: 1rem 1.1rem;
  box-shadow: var(--ombre-3); transform: rotate(2deg); color: var(--texte); font-size: var(--t-etiquette);
}
.carte-rapport .doc-mini-titre { font-family: var(--titrage); font-weight: 700; font-size: var(--t-petit); }
.ligne-doc { height: 6px; background: var(--ligne-doc); border-radius: 3px; margin-top: 8px; }
.ligne-doc.l2 { width: 84%; }
.ligne-doc.l3 { width: 91%; }
.ligne-doc.l4 { width: 58%; }
/* Le coup de tampon : l'or du sceau. La règle porte sur l'objet, pas sur le
   bloc qui l'a vu naître — il se pose sur la fiche du héros comme sur la
   seconde feuille de la page des fonctionnalités. */
.cachet, .cachet-pose {
  margin-top: .8rem; display: inline-block;
  font-family: var(--mono); font-size: var(--t-mini); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--or-encre); border: 1.5px solid var(--or); border-radius: 3px; padding: .2rem .6rem;
  transform: rotate(-2deg);
}

/* Le héros : l'appareil en léger relief, et la scène qui se joue. */
.heros-visuel { position: relative; justify-self: center; }
.heros-visuel .appareil { transform: none; }

/* LA DÉMO AUTO-JOUÉE du héros — une seule horloge de 12 s. Hors mouvement
   réduit, les styles de repos décrivent la scène FINALE complète. */
@media (prefers-reduced-motion: no-preference) {
  .heros-visuel .appareil { animation: flotte 7s ease-in-out infinite; }
  @keyframes flotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .heros-visuel .fil .releve { animation: var(--boucle) ease-out infinite; }
  .heros-visuel .fil .releve:nth-child(1) { animation-name: demo-photo; }
  .heros-visuel .fil .releve:nth-child(2) { animation-name: demo-dictee; }
  .heros-visuel .fil .releve:nth-child(3) { animation-name: demo-note; }
  @keyframes demo-photo  { 0%, 3%  { opacity: 0; translate: 0 12px; } 7%, 93%  { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
  @keyframes demo-dictee { 0%, 20% { opacity: 0; translate: 0 12px; } 24%, 93% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
  @keyframes demo-note   { 0%, 62% { opacity: 0; translate: 0 12px; } 66%, 93% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
  .heros-visuel .fil .releve:nth-child(1) .photo-cadre { animation: demo-developpe var(--boucle) ease infinite; }
  @keyframes demo-developpe { 0%, 7% { filter: saturate(0) brightness(1.45); } 14%, 100% { filter: none; } }
  .heros-visuel .fil .releve:nth-child(2) .texte { animation: demo-transcrit var(--boucle) linear infinite; }
  @keyframes demo-transcrit { 0%, 46% { clip-path: inset(0 100% 0 0); } 58%, 100% { clip-path: inset(0 -2% 0 0); } }
  .onde i { transform-origin: bottom; animation: onde-vit .9s ease-in-out infinite alternate; }
  .onde i:nth-child(2n) { animation-delay: -.35s; }
  .onde i:nth-child(3n) { animation-delay: -.6s; }
  .onde i:nth-child(5n) { animation-delay: -.15s; }
  @keyframes onde-vit { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
  .heros-visuel .carte-rapport .ligne-doc { transform-origin: left center; animation: var(--boucle) ease infinite; }
  .heros-visuel .carte-rapport .ligne-doc:nth-of-type(1) { animation-name: demo-ligne-1; }
  .heros-visuel .carte-rapport .ligne-doc:nth-of-type(2) { animation-name: demo-ligne-2; }
  .heros-visuel .carte-rapport .ligne-doc:nth-of-type(3) { animation-name: demo-ligne-3; }
  .heros-visuel .carte-rapport .ligne-doc:nth-of-type(4) { animation-name: demo-ligne-4; }
  @keyframes demo-ligne-1 { 0%, 70% { transform: scaleX(0); } 74%, 100% { transform: scaleX(1); } }
  @keyframes demo-ligne-2 { 0%, 74% { transform: scaleX(0); } 78%, 100% { transform: scaleX(1); } }
  @keyframes demo-ligne-3 { 0%, 78% { transform: scaleX(0); } 82%, 100% { transform: scaleX(1); } }
  @keyframes demo-ligne-4 { 0%, 82% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
  .heros-visuel .carte-rapport .cachet { animation: demo-cachet var(--boucle) cubic-bezier(.2, .9, .3, 1.3) infinite; }
  @keyframes demo-cachet {
    0%, 86% { opacity: 0; transform: rotate(-2deg) scale(1.5); }
    89%, 100% { opacity: 1; transform: rotate(-2deg) scale(1); }
  }
}

/* ═══════════════ 8 · LES ÉCRANS DESSINÉS ═══════════════ */

/* L'ÉCRAN DE L'ORDRE : la liste des constatations numérotées, la poignée qui
   réordonne, le geste de fermeture — un morceau concret de l'application. */
.ordre-visuel { --ecran-taille: .86rem; position: relative; justify-self: center; width: min(24rem, 100%); font-size: var(--ecran-taille); }
.ecran-ordre { background: var(--fond); border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-3); color: var(--texte); }
.eo-tete { display: flex; justify-content: space-between; align-items: center; gap: .6em; background: var(--marine); color: var(--sur-marine); padding: .8em 1.1em; }
.eo-titre { font-family: var(--titrage); font-weight: 650; font-size: 1.08em; letter-spacing: -.01em; }
.eo-etat { background: var(--attente-fond); color: var(--attente-encre); font-weight: 650; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; padding: .2em .7em; border-radius: var(--r-rond); flex: none; }
.eo-onglets { display: flex; gap: .4em; padding: .7em .8em .1em; font-size: .78em; color: var(--texte-2); }
.eo-onglets span { padding: .3em .7em; border-radius: var(--r-rond); background: var(--carte); border: 1px solid var(--bordure); white-space: nowrap; }
.eo-onglets .actif { background: var(--marine); border-color: var(--marine); color: var(--sur-marine); font-weight: 600; }
.eo-liste { list-style: none; padding: .9em .8em 0; display: grid; gap: .6em; }
.eo-liste li {
  display: flex; align-items: center; gap: .7em;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px;
  padding: .65em .8em; box-shadow: 0 1px 3px rgba(22, 35, 63, .05);
}
.eo-liste b { font-family: var(--mono); font-size: .82em; font-weight: 500; color: var(--or-encre); }
.eo-col { flex: 1; display: grid; gap: .15em; min-width: 0; }
.eo-quand { font-family: var(--mono); font-size: .74em; letter-spacing: .02em; color: var(--texte-2); }
.eo-texte { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-poignee { display: grid; gap: 3px; width: 1em; flex: none; }
.eo-poignee i { height: 2px; border-radius: 1px; background: var(--poignee); }
.eo-bouton { margin: .9em .8em 1em; background: var(--marine); color: var(--sur-marine); text-align: center; font-weight: 600; font-size: .95em; padding: .75em; border-radius: 12px; }
.eo-carte {
  position: absolute; right: -1rem; bottom: -1.1rem;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 14px; padding: .9em 1.1em;
  box-shadow: var(--ombre-3); transform: rotate(2.5deg);
}
.eo-ferme-badge { display: inline-block; background: var(--succes-fond); color: var(--succes-encre); font-weight: 650; font-size: .74em; letter-spacing: .06em; text-transform: uppercase; padding: .2em .7em; border-radius: var(--r-rond); }
.eo-ferme-texte { display: block; margin-top: .4em; font-family: var(--titrage); font-weight: 700; font-size: .95em; color: var(--texte); }

/* L'écran des réglages : les cartes pliées, et le verrou. */
.reglages-liste { list-style: none; padding: .9em .8em 0; display: grid; gap: .45em; }
.reglages-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: .7em;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px;
  padding: .7em .85em; font-size: .95em;
}
.rg-nom { font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-chevron { width: .5em; height: .5em; flex: none; border-right: 1.5px solid var(--poignee); border-bottom: 1.5px solid var(--poignee); rotate: -45deg; }
.rg-ouvert { border-color: color-mix(in srgb, var(--or) 55%, var(--bordure)); }
.rg-bascule { width: 2.2em; height: 1.25em; border-radius: var(--r-rond); flex: none; background: var(--marine); display: flex; align-items: center; justify-content: flex-end; padding: 2px; }
.rg-bascule i { width: .95em; height: .95em; border-radius: var(--r-rond); background: var(--carte); }
.rg-note { font-family: var(--mono); font-size: .72em; color: var(--texte-2); padding: .8em 1em 1.1em; }

/* Les deux documents, côte à côte : même plan, mêmes numéros. */
.docs-duo { --ecran-taille: .86rem; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: var(--ecran-taille); }
.doc-feuille { background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.1em 1em 1.2em; box-shadow: var(--ombre-2); }
.doc-feuille-2 { position: relative; translate: 0 1.3rem; }
.doc-etiquette { font-family: var(--mono); font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: .7em; }
.doc-etiquette-or { color: var(--or-encre); }
.doc-feuille .ligne-doc { height: 5px; margin-top: 6px; }
.doc-titre { font-family: var(--titrage); font-weight: 700; font-size: .9em; letter-spacing: -.01em; margin-bottom: .5em; }
.doc-cadre { position: relative; height: 4.2em; margin: .7em 0 .4em; border-radius: 6px; background: linear-gradient(140deg, var(--doc-cadre-1), var(--doc-cadre-2)); border: 1px solid var(--bordure); }
.doc-cadre-bas { margin-top: .8em; }
.doc-num { position: absolute; left: .45em; bottom: .3em; font-family: var(--mono); font-size: .66em; letter-spacing: .04em; color: var(--texte-2); }

/* La carte de la preuve : l'heure du lieu, la position, le sceau. */
.preuve-carte { --ecran-taille: .86rem; font-size: var(--ecran-taille); background: var(--carte); color: var(--texte); border-radius: 18px; padding: 1.2em 1.3em 1.35em; box-shadow: var(--ombre-3); width: min(24rem, 100%); justify-self: center; }
.preuve-tete { font-family: var(--titrage); font-weight: 700; font-size: 1.1em; margin-bottom: .7em; }
.preuve-cadre { height: 8em; border-radius: 10px; background: linear-gradient(140deg, var(--doc-cadre-1), var(--doc-cadre-2)); border: 1px solid var(--bordure); }
.preuve-liste { margin-top: 1em; display: grid; gap: .5em; font-size: .95em; }
.preuve-liste > div { display: flex; justify-content: space-between; gap: 1em; }
.preuve-liste dt { color: var(--texte-2); }
.preuve-liste dd { font-family: var(--mono); font-size: .88em; text-align: right; }
.preuve-empreinte { color: var(--or-encre); }
.preuve-clot { margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--bordure); display: grid; justify-items: start; gap: .2em; }
.preuve-sceau { width: 2.6em; height: 2.6em; border-radius: var(--r-rond); border: 2px solid color-mix(in srgb, var(--or) 70%, transparent); box-shadow: inset 0 0 0 3px var(--carte), inset 0 0 0 5px color-mix(in srgb, var(--or) 35%, transparent); }
.seing { display: block; width: 6em; margin-top: .3em; }
.seing path { fill: none; stroke: var(--marine); stroke-width: 2; stroke-linecap: round; }
.preuve-mention { font-family: var(--mono); font-size: .7em; letter-spacing: .04em; color: var(--texte-2); margin-top: .3em; }
@media (prefers-reduced-motion: no-preference) {
  .apparait .seing path { stroke-dasharray: 160; stroke-dashoffset: 160; }
  .apparait.visible .seing path { animation: trace .9s var(--ease-standard) .45s forwards; }
  @keyframes trace { to { stroke-dashoffset: 0; } }
}

/* La planche de clichés horodatés : en désordre au bureau. */
.planche { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cliche { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: var(--ombre-1); transform: rotate(var(--r, 0deg)); }
.cliche::before {
  content: ""; position: absolute; inset: 0; filter: hue-rotate(var(--t, 0deg));
  background:
    radial-gradient(70px 34px at 70% 22%, rgba(201, 162, 39, .3), transparent 60%),
    linear-gradient(115deg, var(--photo-1), var(--photo-2) 45%, var(--photo-3) 100%);
}
.cliche span { position: absolute; left: .5rem; bottom: .4rem; font-family: var(--mono); font-size: var(--t-mini); color: var(--sur-marine); background: rgba(14, 21, 38, .72); padding: .1rem .4rem; border-radius: 3px; }

/* Le schéma de l'hébergement : chez l'étude, tout ; chez nous, rien. */
.garde { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e-4); align-self: center; }
.garde-boite { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-l); padding: var(--e-5) var(--e-6); box-shadow: var(--ombre-1); }
.garde-titre { font-family: var(--titrage); font-size: var(--t-3); font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--e-4); }
.cylindre i { display: block; height: 16px; border-radius: 8px; background: linear-gradient(180deg, var(--marine-encre-clair), var(--marine)); margin-top: 8px; }
.cylindre i:first-child { margin-top: 0; }
.garde-liste { list-style: none; margin-top: var(--e-4); display: grid; gap: .4rem; font-family: var(--mono); font-size: var(--t-petit); color: var(--texte-2); }
.garde-liste li { display: flex; align-items: center; gap: .5rem; }
.garde-liste li::before { content: ""; width: 5px; height: 5px; background: var(--or); border-radius: 50%; flex: none; }
.garde-vide { box-shadow: none; border-style: dashed; background: transparent; }
.vide-cadre { border: 1.5px dashed color-mix(in srgb, var(--marine) 25%, transparent); border-radius: var(--r-m); min-height: 6.5rem; display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.garde-note { margin-top: var(--e-3); font-size: var(--t-etiquette); line-height: 1.5; color: var(--texte-2); text-align: center; }

/* LE CALCUL : aucun chiffre inventé. La multiplication, et le visiteur y met
   les siens. En flux, jamais en positions absolues. */
.calcul { margin-top: var(--e-7); display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-4); }
.calcul-pas {
  flex: 1 1 13rem;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: var(--e-5); box-shadow: var(--ombre-1);
  display: grid; grid-template-rows: 1fr auto; gap: var(--e-3);
}
.calcul-pas-fort { border-color: color-mix(in srgb, var(--or) 55%, var(--bordure)); background: var(--or-doux); }
.calcul-etiquette { font-size: var(--t-petit); line-height: 1.4; color: var(--texte-2); }
.calcul-pas-fort .calcul-etiquette { color: var(--or-encre); }
.calcul-valeur { font-family: var(--mono); font-size: var(--t-petit); letter-spacing: .02em; color: var(--texte); padding: .6rem .75rem; border-radius: var(--r-s); background: var(--fond); border: 1px dashed var(--poignee); }
.calcul-pas-fort .calcul-valeur { background: var(--carte); border-style: solid; border-color: color-mix(in srgb, var(--or) 40%, var(--bordure)); }
.calcul-signe { flex: none; align-self: center; font-family: var(--titrage); font-size: var(--t-1); font-weight: 300; color: var(--texte-2); }
.calcul-egal { color: var(--or-encre); }
.calcul-note { margin-top: var(--e-6); max-width: var(--mesure); color: var(--texte-2); }

/* Le tableau du rendez-vous, année par année. */
.carte-calcul { background: var(--carte); color: var(--texte); border-radius: var(--r-l); padding: var(--e-5) var(--e-6); width: min(20rem, 100%); box-shadow: var(--ombre-3); transform: rotate(2deg); justify-self: center; }
.calc-titre { font-family: var(--titrage); font-size: var(--t-3); font-weight: 650; margin-bottom: var(--e-3); }
.calc-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--bordure); font-family: var(--mono); font-size: var(--t-petit); color: var(--texte-2); }
.calc-ligne i { height: 6px; width: 5.5rem; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--bordure) 0 6px, transparent 6px 9px); }
@media (prefers-reduced-motion: no-preference) {
  .calc-ligne i { transform-origin: left center; animation: 7s ease infinite; }
  .calc-ligne:nth-of-type(1) i { animation-name: calc-trace-1; }
  .calc-ligne:nth-of-type(2) i { animation-name: calc-trace-2; }
  .calc-ligne:nth-of-type(3) i { animation-name: calc-trace-3; }
  @keyframes calc-trace-1 { 0% { transform: scaleX(0); } 14%, 93% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes calc-trace-2 { 0%, 18% { transform: scaleX(0); } 32%, 93% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes calc-trace-3 { 0%, 36% { transform: scaleX(0); } 50%, 93% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
}

/* ═══════════════ 9 · LE CONSTAT QUI SE DRESSE — le survol au défilement ═══════════════ */

/* Le téléphone reste collé pendant que les cinq gestes défilent à sa gauche ;
   à chaque geste, son écran change d'état. Sans JavaScript, la section n'a
   pas d'attribut data-etape : l'écran montre la scène FINALE, complète, et
   les cinq gestes se lisent tels quels. Sous mouvement réduit, les états
   changent sans transition : c'est de l'information, pas de la décoration. */
.dresse-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dresse-voir { position: sticky; top: calc(var(--h-entete, 4.5rem) + 3rem); display: grid; justify-items: center; padding-bottom: var(--e-6); }
.dresse-voir .appareil { --ecran-taille: .82rem; width: min(360px, 100%); }
.gestes { list-style: none; margin-top: var(--e-7); display: grid; gap: 0; }
.gestes li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-6) 0;
  border-top: 1px solid var(--bordure);
  min-height: 14rem;
  transition: opacity var(--d-3) var(--ease-sortie);
}
.section-marine .gestes li { border-top-color: var(--filet-marine); }
.gestes li:first-child { border-top: 0; }
.gestes .geste-num {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: .1em;
  color: var(--or-encre);
  padding-top: .55rem;
}
.gestes .geste { font-family: var(--titrage); font-stretch: var(--titrage-largeur); font-size: var(--t-2); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--texte); }
.gestes .reponse { margin-top: var(--e-3); color: var(--texte-2); max-width: 30rem; }
.gestes .reponse strong { color: var(--texte); }
.gestes .geste-final .geste { color: var(--or-encre); }
.section-marine .gestes .geste-num, .section-marine .gestes .geste-final .geste { color: var(--or-clair); }
.section-marine .gestes .geste, .section-marine .gestes .reponse strong { color: var(--sur-marine); }
.section-marine .gestes .reponse { color: var(--sur-marine-2); }
/* Avec JavaScript : le geste courant est plein, les autres en retrait. */
.dresse[data-etape] .gestes li { opacity: .38; }
.dresse[data-etape] .gestes li[aria-current="step"] { opacity: 1; }
/* L'écran du survol : ses états. Chaque relevé porte le numéro du geste qui
   le fait naître (data-des) ; la fermeture change l'en-tête et le bouton. */
.dresse .fil .releve, .dresse .dresse-ferme, .dresse .eo-poignee { transition: opacity var(--d-3) var(--ease-sortie), translate var(--d-3) var(--ease-sortie); }
.dresse[data-etape="1"] .eo-poignee { opacity: 0; }
.dresse:is([data-etape="1"], [data-etape="2"]) .dresse-ferme { opacity: 0; translate: 0 14px; }
.dresse:is([data-etape="1"], [data-etape="2"]) .pastille-ok,
.dresse:is([data-etape="1"], [data-etape="2"]) .eo-bouton-ferme { display: none; }
.dresse[data-etape="3"] .pastille-attente, .dresse[data-etape="3"] .eo-bouton-ouvert,
.dresse:not([data-etape]) .pastille-attente, .dresse:not([data-etape]) .eo-bouton-ouvert { display: none; }
/* Sur fond clair, le téléphone du survol porte une ombre douce, pas la nuit. */
.dresse:not(.section-marine) .appareil { box-shadow: var(--ombre-2), inset 0 1px 0 rgba(255, 255, 255, .18); }
.dresse .releve { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7em; align-items: start; }
.dresse .releve .rel-corps { min-width: 0; }
.dresse .releve b { font-family: var(--mono); font-size: .82em; font-weight: 500; color: var(--or-encre); padding-top: .15em; }
.dresse .releve .eo-poignee { align-self: center; }
.dresse-ferme { margin: 0 .8em 1em; background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px; padding: .8em .9em; box-shadow: 0 1px 3px rgba(22, 35, 63, .05); }
.eo-bouton-ferme { background: var(--succes-encre); }

/* LE MONTAGE DU DOCUMENT : le modèle rend des textes, l'application les place
   à leur numéro. Le désordre à gauche est voulu : 02, 03, 01. */
.montage { --ecran-taille: .95rem; font-size: var(--ecran-taille); display: grid; grid-template-columns: minmax(0, .8fr) 3rem minmax(0, 1.1fr); gap: 1rem; align-items: center; color: var(--texte); }
.montage-titre { font-family: var(--mono); font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-marine-2); margin-bottom: .8em; }
.montage-textes { display: grid; gap: .6em; }
.montage-texte { display: flex; align-items: center; gap: .7em; background: var(--marine-2); border: 1px solid var(--filet-marine); border-radius: 10px; padding: .7em .8em; }
.montage-texte b { font-family: var(--mono); font-size: .82em; font-weight: 500; color: var(--or-clair); }
.montage-texte span { flex: 1; display: grid; gap: 5px; }
.montage-texte i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.montage-texte i.c { width: 62%; }
.montage-fleche { display: grid; gap: 1.4em; align-self: center; }
.montage-fleche i { display: block; height: 2px; background: var(--or); position: relative; }
.montage-fleche i::after { content: ""; position: absolute; right: -1px; top: -4px; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--or); }
.montage-doc .doc-feuille { padding: 1em 1em 1.1em; }
.montage-case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4em .7em; align-items: center; padding: .6em 0; border-top: 1px solid var(--bordure); }
.montage-case:first-of-type { border-top: 0; }
.montage-case b { font-family: var(--mono); font-size: .82em; font-weight: 500; color: var(--or-encre); grid-row: span 3; align-self: start; padding-top: .2em; }
.montage-case .doc-cadre { height: 3.2em; margin: 0; }
.montage-case i { display: block; height: 5px; border-radius: 3px; background: var(--ligne-doc); }
.montage-case i.c { width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .montage.apparait .montage-texte { transition: translate var(--d-4) var(--ease-sortie), opacity var(--d-3) var(--ease-standard); translate: -1.2rem 0; opacity: 0; }
  .montage.apparait.visible .montage-texte { translate: 0 0; opacity: 1; }
  .montage.apparait.visible .montage-texte:nth-child(3) { transition-delay: 120ms; }
  .montage.apparait.visible .montage-texte:nth-child(4) { transition-delay: 240ms; }
}

/* Sous les listes « part / ne part pas », et le renvoi vers les conditions. */
.note-sous { margin-top: var(--e-5); font-size: var(--t-petit); color: var(--texte-2); }
.renvoi { margin-top: var(--e-7); max-width: var(--mesure); color: var(--texte-2); }

/* LE CALCUL SE FAIT SUR LA PAGE : trois cases à remplir, et le résultat se
   calcule. Aucun chiffre n'est pré-rempli, aucun résultat n'est écrit dans la
   page : c'est le visiteur qui les met. Sans JavaScript, les cases restent
   des cases, et le résultat dit « votre résultat ». */
.calcul-valeur input {
  appearance: textfield; -moz-appearance: textfield;
  width: 100%; border: 0; background: transparent; color: var(--texte);
  font-family: var(--mono); font-size: var(--t-corps); letter-spacing: .02em; outline: none;
}
.calcul-valeur input::-webkit-outer-spin-button, .calcul-valeur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calcul-valeur input::placeholder { color: var(--texte-3); }
.calcul-valeur:focus-within { border-color: var(--or); border-style: solid; background: var(--carte); }
.calcul-resultat { font-family: var(--titrage); font-stretch: var(--titrage-largeur); font-size: var(--t-2); font-weight: 700; letter-spacing: -.02em; color: var(--texte); }
.simulateur { margin-top: var(--e-7); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr); gap: var(--e-4); align-items: stretch; }
.simulateur-champs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.simulateur-champs .calcul-pas { flex: none; }
.simulateur-resultat { display: grid; grid-template-rows: auto 1fr; align-content: start; }
.simulateur-resultat .calcul-resultat { align-self: center; }
.simulateur-resultat .calcul-resultat.simulateur-autre { font-size: var(--t-3); font-weight: 600; line-height: 1.35; }
.simulateur-suite { margin-top: var(--e-7); }
@media (max-width: 900px) { .simulateur, .simulateur-champs, .simulateur-suite { grid-template-columns: 1fr; } }
.calcul-resultat small { display: block; font-family: var(--mono); font-size: var(--t-etiquette); font-weight: 400; letter-spacing: .02em; color: var(--texte-2); margin-top: .3rem; }

/* ═══════════════ 10 · L'ACCUEIL — les autres sections ═══════════════ */

/* Terrain / bureau : les deux temps d'un constat, en grand. */
.deux-temps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); margin-top: var(--e-7); }
.temps { border: 1px solid var(--bordure); border-radius: var(--r-l); background: var(--carte); padding: var(--e-5) var(--e-6); box-shadow: var(--ombre-1); }
.temps-titre { font-family: var(--titrage); font-size: var(--t-3); font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--e-3); }
.temps-lourd { background: var(--marine); border-color: var(--marine); color: var(--sur-marine); }
.temps-lourd .temps-titre { color: var(--or-clair); }
.temps-lourd .chips li { background: var(--marine-2); border-color: var(--filet-marine); }

/* Les impossibilités, barrées d'or. */
.interdits { list-style: none; margin-top: var(--e-5); display: grid; gap: var(--e-3); font-size: var(--t-3); }
.interdits li { display: flex; gap: .8rem; align-items: center; color: var(--texte-2); text-decoration: line-through; text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.interdits li::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%; border: 1.5px solid var(--or); background: linear-gradient(135deg, transparent 44%, var(--or) 44% 56%, transparent 56%); }
.section-marine .interdits li { color: var(--sur-marine-2); text-decoration-color: var(--or-clair); }

/* Les situations qui fâchent : une liste, pas des cartes. */
/* Resserrée le 11 septembre 2026 (« trop de blanc en hauteur ») : trois colonnes
   côte à côte plutôt que trois bandes, et la section prend le pas court. */
.section-serree { padding: var(--e-section-court) 0; }
.situations { list-style: none; margin-top: var(--e-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
.situation { display: block; padding: var(--e-4) 0 0; border-top: 2px solid var(--marine); }
.situation h3 { font-size: var(--t-2); margin-bottom: var(--e-3); }
.situation p { color: var(--texte-2); max-width: 36rem; }
.situation p strong { color: var(--texte); }
.situation-forte h3 { color: var(--or-encre); }

/* Les six questions à poser. */
.liste-questions { list-style: none; counter-reset: q; margin-top: var(--e-7); display: grid; gap: 0; border-top: 1px solid var(--bordure); }
.liste-questions li {
  counter-increment: q;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--e-4); align-items: baseline;
  padding: var(--e-5) 0; border-bottom: 1px solid var(--bordure);
  font-family: var(--titrage); font-stretch: var(--titrage-largeur); font-size: var(--t-2); font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.liste-questions li::before { content: counter(q); font-family: var(--mono); font-size: var(--t-petit); font-weight: 500; color: var(--or-encre); font-stretch: 100%; }
@media (min-width: 900px) { .liste-questions { grid-template-columns: 1fr 1fr; column-gap: var(--e-8); } }

/* Ce qui vient des études partenaires. */
.venu { list-style: none; margin-top: var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.venu li { font-size: var(--t-petit); padding: .5rem 1rem; border-radius: var(--r-rond); background: var(--carte); border: 1px solid var(--bordure); }

/* Les trois choses à apporter. */
.apporter { list-style: none; counter-reset: apporte; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e-4); margin-top: var(--e-6); }
.apporter li { counter-increment: apporte; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-l); padding: var(--e-5); box-shadow: var(--ombre-1); }
.apporter li::before { content: counter(apporte); display: block; font-family: var(--titrage); font-stretch: var(--titrage-largeur); font-weight: 720; font-size: var(--t-1); letter-spacing: -.03em; color: var(--or-encre); margin-bottom: var(--e-3); line-height: 1; }

/* ═══════════════ 11 · LA PAGE DES FONCTIONNALITÉS ═══════════════ */

/* Sa référence : legatus.fr/gestion — une barre d'onglets en haut, puis des
   sections en quinconce. ⚠️ LA BARRE NE CACHE RIEN : c'est un SOMMAIRE
   COLLANT. Des onglets qui masquent laissent une page vide à qui arrive sans
   JavaScript, et privent le moteur de recherche des quatre cinquièmes du
   texte.
   ⚠️ LE RAIL SE COLLE SOUS L'EN-TÊTE, PAS DERRIÈRE : les deux collés au même
   top: 0, l'en-tête (z-index 50) recouvrait le rail en entier. Sa hauteur est
   MESURÉE par le script et posée dans --h-entete ; le repli de :root vaut pour
   qui arrive sans JavaScript, et il suit la largeur. */
.rail {
  position: sticky;
  top: var(--h-entete, 4.5rem);
  z-index: 20;
  background: color-mix(in srgb, var(--carte) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.rail-piste { display: flex; gap: clamp(.4rem, 2vw, 2rem); overflow-x: auto; scrollbar-width: none; }
.rail-piste::-webkit-scrollbar { display: none; }
/* `main .rail a`, et pas `.rail a` : la règle des liens du corps pèse une
   classe de plus et soulignerait les onglets. */
main .rail a {
  flex: none;
  text-decoration: none;
  color: var(--texte-2);
  font-size: var(--t-petit);
  font-weight: 550;
  padding: 1.1rem .2rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--d-1) var(--ease-standard), border-color var(--d-1) var(--ease-standard);
}
main .rail a:hover { color: var(--texte); }
main .rail a[aria-current="true"] { color: var(--texte); border-bottom-color: var(--or); }

/* La quinconce : le texte d'un côté, l'écran de l'autre, et l'on alterne.
   ⚠️ L'ORDRE VISUEL SEUL S'INVERSE : dans le document, le texte reste
   toujours AVANT son écran. */
.fonction { scroll-margin-top: calc(var(--h-entete, 4.5rem) + 4.75rem); }
.fonction-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.fonction-inverse .fonction-voir { order: -1; }
.fonction-dire { max-width: 36rem; }
.fonction-dire h2 { max-width: 16ch; }
.fonction-dire > p { margin-top: var(--e-4); font-size: var(--t-lead); line-height: 1.45; color: var(--texte-2); }
.section-marine .fonction-dire > p { color: var(--sur-marine-2); }
.fonction-voir { justify-self: center; width: min(24rem, 100%); perspective: 1600px; }
.fonction-voir .appareil { --ecran-taille: .8rem; width: min(340px, 100%); margin: 0 auto; }
.fonction:not(.section-marine) .ecran-ordre, .fonction:not(.section-marine) .preuve-carte { box-shadow: var(--ombre-2); }

/* ═══════════════ 12 · LES PAGES DOCUMENT ═══════════════ */

.document { padding: var(--e-section-court) 0 var(--e-section); }
.document-int { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sommaire { position: sticky; top: calc(var(--h-entete, 4.5rem) + 1.5rem); font-size: var(--t-petit); }
.sommaire-titre { font-family: var(--titrage); font-size: var(--t-3); font-weight: 650; margin-bottom: var(--e-3); }
.sommaire nav { display: grid; gap: .1rem; }
.sommaire a { text-decoration: none; color: var(--texte-2); padding: .4rem .75rem; border-left: 2px solid var(--bordure); transition: color var(--d-1) var(--ease-standard), border-color var(--d-1) var(--ease-standard); line-height: 1.35; }
.sommaire a:hover, .sommaire a[aria-current="true"] { color: var(--texte); border-left-color: var(--or); }
.document-corps { max-width: var(--prose); }
.document-corps > p, .document-corps li { max-width: var(--mesure); }
.document-corps h2 { font-size: var(--t-2); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--bordure); scroll-margin-top: calc(var(--h-entete, 4.5rem) + 1rem); }
.document-corps h2:first-of-type { margin-top: var(--e-4); border-top: 0; padding-top: 0; }
.document-corps h3 { font-size: var(--t-3); margin-top: var(--e-6); scroll-margin-top: calc(var(--h-entete, 4.5rem) + 1rem); }
.document-corps ul { margin: var(--e-4) 0 0 1.3rem; display: grid; gap: var(--e-2); }
.document-corps table { min-width: 0; }
.document-corps .tableau-cadre { margin-top: var(--e-5); }
.document-corps code { font-family: var(--mono); font-size: .88em; background: var(--lavis); padding: .1em .35em; border-radius: 5px; }
.doc-date { font-family: var(--mono); font-size: var(--t-etiquette); letter-spacing: .04em; color: var(--sur-marine-2); margin-top: var(--e-4); }

/* ═══════════════ 13 · LE MOUVEMENT ═══════════════ */

/* L'apparition au défilement : un léger flou qui se dissipe, une montée courte,
   la même sortie exponentielle partout. Le repli sans JavaScript (noscript)
   force l'opacité à 1 : rien ne reste caché. */
.apparait {
  opacity: 0;
  translate: 0 18px;
  filter: blur(4px);
  transition: opacity var(--d-3) var(--ease-standard), translate var(--d-4) var(--ease-sortie), filter var(--d-3) var(--ease-standard);
  transition-delay: var(--retard, 0s);
}
.apparait.visible { opacity: 1; translate: 0 0; filter: blur(0); }
.apparait :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions) > li,
.apparait .cliche {
  opacity: 0;
  translate: 0 10px;
  transition: opacity var(--d-2) var(--ease-standard), translate var(--d-3) var(--ease-sortie), scale var(--d-3) var(--ease-sortie);
}
.apparait .cliche { translate: 0 0; scale: .92; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions) > li,
.apparait.visible .cliche { opacity: 1; translate: 0 0; scale: 1; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions, .planche) > :nth-child(2) { transition-delay: 70ms; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions, .planche) > :nth-child(3) { transition-delay: 140ms; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions, .planche) > :nth-child(4) { transition-delay: 210ms; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions, .planche) > :nth-child(5) { transition-delay: 280ms; }
.apparait.visible :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions, .planche) > :nth-child(n+6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait, .apparait :is(.chips, .heros-preuves, .interdits, .apporter, .venu, .situations, .liste-questions) > li, .apparait .cliche { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}

/* ═══════════════ 14 · LES PETITS ÉCRANS ═══════════════ */

@media (max-width: 1080px) {
  .pied-int { grid-template-columns: 1fr 1fr; }
  .pied-int > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .situations { grid-template-columns: 1fr; gap: var(--e-5); }
  .heros-int, .duo, .dresse-int, .fonction-int, .cta-int, .document-int { grid-template-columns: 1fr; }
  .heros-int { min-height: 0; }
  .duo-inverse > :first-child { order: 0; }
  .fonction-inverse .fonction-voir { order: 0; }
  .heros-visuel { justify-self: start; margin-top: var(--e-6); perspective: none; padding-right: 2.5rem; }
  .heros-visuel .appareil { transform: none; width: min(330px, 100%); animation: none; }
  .montage { grid-template-columns: minmax(0, .8fr) 2rem minmax(0, 1.1fr); }
  .dresse-voir { position: static; order: -1; padding-bottom: 0; }
  .dresse-voir .appareil { width: min(300px, 100%); }
  .gestes li { min-height: 0; }
  .dresse[data-etape] .gestes li { opacity: 1; }
  .sommaire { position: static; }
  .situation { grid-template-columns: 1fr; gap: var(--e-2); }
  .deux-temps { grid-template-columns: 1fr; }
  .garde { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Avec JavaScript, le menu se replie derrière un bouton ; sans, il passe
     sous la marque, et l'en-tête grandit (le repli de --h-entete le sait). */
  html.js .menu-bouton { display: grid; }
  html.js .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--marine); border-bottom: 1px solid var(--filet-marine);
    padding: var(--e-2) clamp(1.25rem, 4vw, 3rem) var(--e-5);
  }
  html.js .menu.ouvert { display: flex; }
  html.js .menu a { padding: .9rem 0; border-bottom: 1px solid var(--filet-marine); font-size: var(--t-3); }
  html.js .menu a[aria-current="page"] { box-shadow: none; color: var(--or-clair); }
  html.js .menu .bouton { margin-top: var(--e-4); align-self: flex-start; }
  .entete { position: sticky; }
  .entete-int { position: relative; }
  .colonnes { grid-template-columns: 1fr; }
  .etapes li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .docs-duo { grid-template-columns: 1fr; }
  .doc-feuille-2 { translate: 0 0; }
  .carte-rapport { right: 0; width: 11rem; }
  .eo-carte { right: 0; }
  .calcul-signe { align-self: center; width: 100%; text-align: center; }
  .planche { grid-template-columns: repeat(2, 1fr); }
}

/* Sur la page « Nous écrire », le bouton de l'en-tête EST la page courante : il
   se remplit d'or clair et garde ses lettres navy — la règle générale du menu
   le passait en or sur blanc, illisible. */
html.js .entete .bouton-petit[aria-current="page"], .entete .bouton-petit[aria-current="page"] {
  color: var(--marine); background-color: var(--or-clair); box-shadow: inset 0 1px 0 var(--sur-marine), 0 1px 2px rgba(0, 0, 0, .3);
}

/* LE FORMULAIRE DE CONTACT — 11 septembre 2026, à la place d'un bouton qui
   ouvrait un courriel. Resserré le soir même (« le formulaire prend énormément
   de place ») : une carte, des champs courts, deux par rangée ; à côté, deux
   cartes, le rendez-vous et le courriel, alignées en haut. Des jetons seulement. */
.contact-int { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.carte-contact { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--ombre-1); }
.formulaire { display: grid; gap: var(--e-3); align-content: start; }
.formulaire-titre { font-size: var(--t-2); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.champ { display: grid; gap: .3rem; font-size: var(--t-mini); font-weight: 600; letter-spacing: .02em; color: var(--texte-2); }
.champ-large { grid-column: 1 / -1; }
.champ small { font-weight: 400; letter-spacing: 0; color: var(--texte-3); }
/* ⚠⚠ LA BORDURE D'UN CHAMP N'EST PAS UNE DÉCORATION — 14 SEPTEMBRE 2026.
   Son retour, en ouvrant le site sur un second écran : « au niveau du
   formulaire de contact, on voit pas les cases : tout est blanc ».

   MESURÉ : la bordure était à **1,18:1** contre la carte, et le fond du champ
   à **1,07:1**. La norme pour la limite d'un élément d'interface (WCAG 1.4.11)
   est de **3:1** — on en était à un tiers. Sur un bon écran, on devinait le
   champ ; sur un écran ordinaire, il disparaît, et c'est la page qui reçoit
   les demandes de devis.

   `--bordure-champ` : #7E89A1, mesuré à **3,51:1** contre la carte. Un jeton à
   part, et pas la bordure générale : les filets qui séparent deux blocs ont le
   droit d'être discrets — **un champ à remplir, non.** */
.champ input, .champ textarea {
  width: 100%; font: inherit; font-weight: 400; font-size: var(--t-petit); letter-spacing: 0; color: var(--texte);
  background: var(--carte); border: 1.5px solid var(--bordure-champ); border-radius: var(--r-s);
  padding: .55rem .75rem;
  transition: border-color var(--d-1) var(--ease-standard), box-shadow var(--d-1) var(--ease-standard), background var(--d-1) var(--ease-standard);
}
.champ textarea { resize: vertical; min-height: 6.5rem; }
.champ input:focus, .champ textarea:focus { outline: none; background: var(--carte); border-color: var(--or); box-shadow: 0 0 0 3px var(--or-doux); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-3); }
/* Le champ piège : hors de l'écran, hors du clavier, mais dans le formulaire — seul un robot le remplit. */
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.formulaire-note { flex: 1 1 16rem; font-size: var(--t-mini); line-height: 1.45; color: var(--texte-3); }
.formulaire-etat { font-size: var(--t-petit); line-height: 1.5; }
.formulaire-etat:empty { display: none; }
.formulaire-ok { color: var(--marine); font-weight: 600; }
.formulaire-echec { background: var(--or-doux); border: 1.5px solid var(--or); border-radius: var(--r-s); padding: .8rem 1rem; color: var(--texte); }
.contact-aparte { display: grid; gap: var(--e-3); align-content: start; }
.aparte-carte { display: grid; gap: .55rem; justify-items: start; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 1.75rem); }
.aparte-carte h2 { font-size: var(--t-2); }
.aparte-carte p { color: var(--texte-2); }
.aparte-carte .bouton { margin-top: .4rem; }
.aparte-rdv { background: var(--marine); border-color: var(--marine); color: var(--sur-marine); }
.aparte-rdv h2 { color: var(--sur-marine); }
.aparte-rdv p { color: var(--sur-marine-2); }
.aparte-rdv .sur-titre { color: var(--or-clair); }
.aparte-adresse a { font-weight: 600; }
.aparte-note { font-size: var(--t-petit); }
@media (max-width: 900px) { .contact-int { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .champs { grid-template-columns: 1fr; } }