/* ═══ tokens.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   AYALINE GROUP — Jetons de design
   Direction artistique « LE TRAIT ».

   Le logo AYALINE est entièrement construit en traits monolinéaires à
   terminaisons rondes, posés sur un arc de sol. Le nom contient le mot LINE.
   Le système reprend cette grammaire : la ligne structure la page comme elle
   structure un plan d'architecte. L'or n'est jamais un aplat décoratif, c'est
   « le trait actif » — celui qu'on est en train de tracer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Encre : graphite bleuté dérivé du fond du logo (#23232F mesuré) ───── */
  --ink-900: #0C0C12;
  --ink-850: #101018;
  --ink-800: #14141C;
  --ink-700: #1B1B25;
  --ink-600: #23232F;   /* couleur exacte du fond du logo source */
  --ink-500: #2E2E3C;
  --ink-400: #3C3C4C;

  /* ── Or de marque : #FFC92B relevé au pixel sur le logo ────────────────── */
  --or-500: #FFC92B;
  --or-600: #E3AE16;
  --or-400: #FFD65C;
  --or-300: #FFE49A;

  /* ── Chaux & sable : la face claire, tirée vers le chaud (papier, béton) ─ */
  --chaux-050: #F8F6F1;
  --chaux-100: #EFEBE3;
  --chaux-200: #E0DACE;
  --chaux-300: #CDC5B4;
  --sable-500: #A2957C;

  --rouge-500: #E2574C;   /* erreurs de formulaire uniquement */
  --vert-500:  #4CA97E;   /* confirmations uniquement */

  /* ── Rôles sémantiques — thème sombre par défaut ───────────────────────── */
  --fond:          var(--ink-800);
  --fond-alt:      var(--ink-700);
  --fond-creux:    var(--ink-900);
  --sur-fond:      rgba(255,255,255,.04);
  --texte-fort:    #FFFFFF;
  --texte:         rgba(255,255,255,.70);
  --texte-faible:  rgba(255,255,255,.52);
  --accent:        var(--or-500);
  --accent-tenu:   var(--or-600);
  --sur-accent:    var(--ink-900);

  /* Le trait. Trois intensités, jamais davantage. */
  --trait:         rgba(255,255,255,.11);
  --trait-fort:    rgba(255,255,255,.20);
  --trait-accent:  rgba(255,201,43,.42);

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --f-sans:  "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle fluide. Le pas d'affichage vise le monumental sans casser 360px. */
  --pas-display: clamp(3.05rem, 1.10rem + 8.30vw, 9.25rem);
  --pas-h1:      clamp(2.45rem, 1.35rem + 4.40vw, 5.35rem);
  --pas-h2:      clamp(1.95rem, 1.30rem + 2.70vw, 3.45rem);
  --pas-h3:      clamp(1.30rem, 1.08rem + 0.95vw, 1.80rem);
  --pas-h4:      clamp(1.08rem, 1.00rem + 0.35vw, 1.28rem);
  --pas-lead:    clamp(1.08rem, 0.99rem + 0.42vw, 1.35rem);
  --pas-corps:   1.0625rem;
  --pas-petit:   0.9375rem;
  --pas-menu:    0.8125rem;
  --pas-mono:    0.6875rem;

  --inter-titre:  -0.028em;
  --inter-large:   0.18em;
  --inter-mono:    0.14em;

  --haut-titre: 0.98;
  --haut-corps: 1.68;

  /* ── Trame spatiale — base 4, rythme large ────────────────────────────── */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 40px;  --e-8: 48px;
  --e-9: 64px;  --e-10: 80px; --e-11: 96px; --e-12: 128px;
  --section:      clamp(84px, 10.5vw, 168px);
  --section-fine: clamp(56px, 7vw, 104px);

  /* ── Grille ───────────────────────────────────────────────────────────── */
  --contenu: 1280px;
  --contenu-large: 1560px;
  --contenu-texte: 68ch;
  --marge: clamp(20px, 5vw, 72px);
  --gouttiere: clamp(16px, 2.2vw, 32px);

  /* ── Rayons : quasi nuls. Un plan n'a pas d'angles arrondis. ──────────── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pilule: 999px;

  /* ── Mouvement ────────────────────────────────────────────────────────── */
  --sortie: cubic-bezier(.22, 1, .36, 1);
  --doux:   cubic-bezier(.40, 0, .20, 1);
  --franc:  cubic-bezier(.65, 0, .35, 1);
  --t-1: .18s;  --t-2: .32s;  --t-3: .55s;  --t-4: .9s;  --t-5: 1.4s;

  /* ── Profondeur : portée, jamais lourde ───────────────────────────────── */
  --ombre-1: 0 1px 2px rgba(0,0,0,.30);
  --ombre-2: 0 18px 44px -22px rgba(0,0,0,.68);
  --ombre-3: 0 44px 92px -40px rgba(0,0,0,.78);

  --entete-h: 76px;
  /* L'entête passe AU-DESSUS du menu : sans cela le bouton de fermeture, qui
     vit dans l'entête, disparaît sous le panneau dès son ouverture. */
  --z-entete: 210;
  --z-menu: 200;
  --z-flottant: 90;
}

/* ── Face claire ────────────────────────────────────────────────────────────
   Une section passe au jour en changeant ses rôles, pas ses composants. Les
   boutons, cartes et champs héritent : un seul jeu de composants, deux jours. */
.jour {
  --fond:         var(--chaux-050);
  --fond-alt:     var(--chaux-100);
  --fond-creux:   var(--chaux-200);
  --sur-fond:     rgba(20,20,28,.035);
  --texte-fort:   var(--ink-800);
  --texte:        rgba(20,20,28,.72);
  --texte-faible: rgba(20,20,28,.56);
  /* L'or de marque (#FFC92B) plafonne à 1,6:1 sur la chaux : illisible. Les
     sections claires emploient une déclinaison assombrie, mesurée — 4,61:1 sur
     chaux-050, et 4,98:1 pour le blanc posé dessus. L'or de marque reste intact
     partout où il est posé sur le graphite, où il tient 11,9:1. */
  --accent:       #8E6A04;
  --accent-tenu:  #775803;
  --sur-accent:   #FFFFFF;
  --trait:        rgba(20,20,28,.14);
  --trait-fort:   rgba(20,20,28,.26);
  --trait-accent: rgba(142,106,4,.44);
  --ombre-2: 0 18px 44px -26px rgba(20,20,28,.28);
  --ombre-3: 0 44px 92px -46px rgba(20,20,28,.34);
  background: var(--fond);
  color: var(--texte);
}

/* Face nuit explicite, pour rebasculer à l'intérieur d'une zone claire. */
.nuit {
  --fond:         var(--ink-800);
  --fond-alt:     var(--ink-700);
  --fond-creux:   var(--ink-900);
  --sur-fond:     rgba(255,255,255,.04);
  --texte-fort:   #FFFFFF;
  --texte:        rgba(255,255,255,.70);
  --texte-faible: rgba(255,255,255,.52);
  --accent:       var(--or-500);
  --accent-tenu:  var(--or-600);
  --sur-accent:   var(--ink-900);
  --trait:        rgba(255,255,255,.11);
  --trait-fort:   rgba(255,255,255,.20);
  --trait-accent: rgba(255,201,43,.42);
  background: var(--fond);
  color: var(--texte);
}


/* ═══ base.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   AYALINE GROUP — Socle : polices, réinitialisation, typographie, trame
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ─────────────────────────────────────────────────
   Manrope en variable (200→800) : une seule requête couvre toute l'échelle de
   graisses. Les sous-ensembles cyrillique/grec/vietnamien ne sont pas chargés,
   le site étant francophone. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope/manrope-normal-200_800-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope/manrope-normal-200_800-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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif/instrument-serif-normal-400-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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif/instrument-serif-normal-400-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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif/instrument-serif-italic-400-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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif/instrument-serif-italic-400-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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-normal-400-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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-normal-400-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;
}

/* ── Réinitialisation ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 24px);
  background: var(--ink-800);
}

body {
  font-family: var(--f-sans);
  font-size: var(--pas-corps);
  font-weight: 400;
  line-height: var(--haut-corps);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
:target { scroll-margin-top: calc(var(--entete-h) + 32px); }

/* ── Accessibilité ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

.saut-contenu {
  position: absolute; left: var(--e-4); top: -100px; z-index: 500;
  padding: 14px 22px; background: var(--or-500); color: var(--ink-900);
  font-size: var(--pas-petit); font-weight: 700; letter-spacing: .01em;
  transition: top var(--t-2) var(--sortie);
}
.saut-contenu:focus { top: var(--e-4); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 300;
  line-height: var(--haut-titre);
  letter-spacing: var(--inter-titre);
  color: var(--texte-fort);
  text-wrap: balance;
}
h1 { font-size: var(--pas-h1); }
h2 { font-size: var(--pas-h2); }
h3 { font-size: var(--pas-h3); font-weight: 400; line-height: 1.18; letter-spacing: -.018em; }
h4 { font-size: var(--pas-h4); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }

/* Le pas monumental. Graisse 200 : à cette taille, la finesse fait le luxe —
   et c'est exactement le trait du logo. */
.display {
  font-size: var(--pas-display);
  font-weight: 200;
  line-height: .92;
  letter-spacing: -.042em;
  color: var(--texte-fort);
  text-wrap: balance;
}

/* La serif ne porte jamais un titre entier : elle souligne un mot, en italique,
   comme une annotation manuscrite sur un tirage de plan. */
.editorial {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.012em;
  color: var(--accent);
}
.display .editorial, h1 .editorial, h2 .editorial { font-size: 1.06em; }

.lead {
  font-size: var(--pas-lead);
  line-height: 1.58;
  color: var(--texte);
  max-width: 58ch;
  text-wrap: pretty;
}
.p-large { font-size: var(--pas-lead); line-height: 1.62; }
p + p { margin-top: 1.1em; }
strong, b { font-weight: 600; color: var(--texte-fort); }

/* Surtitre : la légende de cartouche d'un plan. */
.surtitre {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--pas-mono);
  font-weight: 400;
  letter-spacing: var(--inter-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--e-5);
}
.surtitre::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.surtitre--nu::before { display: none; }
.surtitre--centre { justify-content: center; }

/* Repère : le numéro de planche. */
.repere {
  font-family: var(--f-mono);
  font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono);
  color: var(--texte-faible);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.repere--accent { color: var(--accent); }

/* Donnée technique : cote, surface, référence. */
.donnee {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ── Trame ────────────────────────────────────────────────────────────────── */
.enveloppe { width: 100%; padding-inline: var(--marge); }
.contenu   { width: 100%; max-width: var(--contenu); margin-inline: auto; padding-inline: var(--marge); }
.contenu--large { max-width: var(--contenu-large); }
.contenu--etroit { max-width: 920px; }
.mesure { max-width: var(--contenu-texte); }

.section { padding-block: var(--section); position: relative; }
.section--fine { padding-block: var(--section-fine); }
.section--haute { padding-block: calc(var(--section) * 1.25); }
.section--sans-bas { padding-bottom: 0; }
.section--sans-haut { padding-top: 0; }

.grille { display: grid; gap: var(--gouttiere); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grille--serree { gap: var(--e-4); }

/* ── Le trait : filets structurants ───────────────────────────────────────── */
.filet { height: 1px; background: var(--trait); border: 0; width: 100%; }
.filet--fort { background: var(--trait-fort); }

/* Ligne de sol : l'arc du logo, réemployé comme séparateur de section.
   Aucune image — un SVG inline dans le balisage, mais le tracé est ici. */
.ligne-sol { display: block; width: 100%; height: clamp(28px, 4vw, 56px); color: var(--trait-accent); }
.ligne-sol path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* Trame de fond : le quadrillage d'une feuille de calque, à la limite du
   perceptible. Il donne au fond une matière sans coûter une seule image. */
.trame {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right,  var(--trait) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trait) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 112px) clamp(60px, 8vw, 112px);
  opacity: .5;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}
.trame--colonnes {
  background-image: linear-gradient(to right, var(--trait) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  opacity: .8;
}

/* ── Mouvement ────────────────────────────────────────────────────────────── */
[data-apparait] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-4) var(--sortie), transform var(--t-4) var(--sortie);
  transition-delay: var(--retard, 0ms);
}
[data-apparait="ligne"] { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--t-5) var(--sortie), opacity var(--t-2) linear; }
[data-apparait].vu { opacity: 1; transform: none; }
/* Le rideau horizontal ne se referme QUE sur la variante « ligne ». Posé sur
   tous les éléments révélés, ce clip-path les rognait définitivement à leur
   propre boîte — et Manrope déborde la sienne : sa boîte de glyphe fait
   1,364 em quand les titres tournent entre 0,92 et 1,02 em d'interligne. Les
   jambages de g, p, q, y et j passaient donc à la coupe. */
[data-apparait="ligne"].vu { clip-path: inset(0 0 0 0); }

/* Rideau de texte : chaque ligne monte depuis son masque. */
.rideau { display: block; overflow: hidden; padding-block: .06em; }
.rideau > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--sortie);
  transition-delay: var(--retard, 0ms);
}
.vu .rideau > span, .rideau.vu > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-apparait] { opacity: 1; transform: none; clip-path: none; }
  .rideau > span { transform: none; }
  .defilement-indice, .marquee__piste { animation: none !important; }
}


/* ═══ components.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   AYALINE GROUP — Composants
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Boutons ────────────────────────────────────────────────────────────────
   Le bouton plein est un rectangle franc. Le survol ne change pas la couleur :
   un trait de lumière balaie la surface, comme le passage d'un tire-ligne. */
.btn {
  --btn-h: 54px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: var(--btn-h); padding: 0 var(--e-7);
  font-size: var(--pas-menu); font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase;
  border-radius: var(--r-1); border: 1px solid transparent;
  cursor: pointer; overflow: hidden; text-align: center;
  transition: color var(--t-2) var(--doux), background-color var(--t-2) var(--doux),
              border-color var(--t-2) var(--doux), transform var(--t-1) var(--doux);
}
.btn:active { transform: translateY(1px); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 8%, rgba(255,255,255,.30) 48%, transparent 88%);
  transform: translateX(-115%);
  transition: transform .78s var(--sortie);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(115%); }

.btn--plein { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.btn--plein:hover, .btn--plein:focus-visible { background: var(--accent-tenu); border-color: var(--accent-tenu); }

.btn--trait { background: transparent; color: var(--texte-fort); border-color: var(--trait-fort); }
.btn--trait:hover, .btn--trait:focus-visible { border-color: var(--accent); color: var(--accent); }

.btn--fantome { background: transparent; color: var(--texte-fort); border-color: transparent; padding-inline: var(--e-4); }

/* ── Variante « or de marque » ───────────────────────────────────────────────
   `--plein` suit la face de sa section : sur fond clair, il vire à l'or
   assombri, seule teinte dorée lisible pour un TEXTE. Un bouton plein ne pose
   pas la même question — ce qui doit contraster, c'est son libellé sur sa
   surface. `--or` épingle donc l'or de marque quel que soit le fond :
     · encre sur or de marque ......... 12,67:1
     · encre sur or de survol ......... 9,59:1
   Reste la limite du composant (WCAG 1.4.11, 3:1) : l'or vif ne tient que
   1,43:1 sur la chaux. Le liseré reprend `--accent`, donc l'or assombri en
   section claire (4,61:1) et l'or de marque en section sombre, où il se fond
   dans l'aplat comme sur le bouton d'entête. Une seule classe, deux faces. */
.btn--or {
  background: var(--or-500);
  color: var(--ink-900);
  border-color: var(--accent);
  /* Dans une grille, un `inline-flex` s'étire : le bouton se cale à gauche et
     garde la largeur de son contenu. */
  justify-self: start;
  align-self: start;
  transition: background-color .22s var(--doux), border-color .22s var(--doux),
              color .22s var(--doux), transform .22s var(--doux),
              box-shadow .22s var(--doux);
}
.btn--or:hover, .btn--or:focus-visible {
  background: var(--or-600);
  border-color: var(--or-600);
  transform: translateY(-1px);
  box-shadow: 0 7px 20px -9px rgba(227, 174, 22, .62);
}
.btn--or:active { transform: translateY(0); box-shadow: none; }

/* Sous 560 px, le libellé le plus long dépasse la colonne : le bouton prend
   toute la largeur plutôt que de déborder. La cible tactile y gagne. */
@media (max-width: 560px) {
  .btn--or { width: 100%; }
}
.btn--fantome:hover { color: var(--accent); }

.btn--large { width: 100%; }
.btn--compact { --btn-h: 44px; padding-inline: var(--e-5); font-size: var(--pas-mono); }

/* La flèche est dimensionnée pour elle-même, pas par son contexte : elle vit
   aussi bien dans un bouton que dans un lien-trait ou un pied de page. */
.fleche {
  width: 15px; height: 15px; flex: none;
  transition: transform var(--t-2) var(--sortie);
}
.btn:hover .fleche,
.lien-trait:hover .fleche,
a:hover > .fleche { transform: translateX(4px); }

/* Lien-trait : le soulignement se retire par la droite et revient par la
   gauche. Le trait est le sujet, pas un ornement. */
.lien-trait {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-3);
  /* Le soulignement fait toute la largeur du lien : dans une grille, sans
     ces trois lignes, le lien s'étire et le trait court jusqu'au bord. */
  align-self: start; justify-self: start; width: fit-content;
  font-size: var(--pas-menu); font-weight: 600; letter-spacing: .075em;
  text-transform: uppercase; color: var(--texte-fort);
  padding-bottom: 7px;
  transition: color var(--t-2) var(--doux);
}
.lien-trait::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right;
  transition: transform .5s var(--sortie);
}
.lien-trait:hover { color: var(--accent); }
.lien-trait:hover::after { animation: trait-rejoue .62s var(--sortie); }
@keyframes trait-rejoue {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  51%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ── Cotation : la signature graphique du système ────────────────────────────
   Reproduit une cote de plan — deux serifs d'extrémité, une ligne, une valeur
   en monospace. Sert à annoter une image, un chiffre, une donnée réelle. */
.cote {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.cote::before, .cote::after {
  content: ""; height: 9px; width: 1px; background: currentColor; flex: none; opacity: .8;
}
.cote__ligne { display: block; height: 1px; background: currentColor; opacity: .45; flex: 1 1 auto; min-width: 22px; }

/* ── Entête ─────────────────────────────────────────────────────────────────
   Transparent au sommet, il se dépose sur un voile flouté dès le premier
   défilement. Le filet du bas est le seul élément qui matérialise sa limite. */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-entete);
  height: var(--entete-h);
  display: flex; align-items: center;
  transition: background-color var(--t-3) var(--doux), backdrop-filter var(--t-3) var(--doux),
              transform var(--t-3) var(--sortie), border-color var(--t-3) var(--doux);
  border-bottom: 1px solid transparent;
}
.entete__interne {
  width: 100%; max-width: var(--contenu-large); margin-inline: auto;
  padding-inline: var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-6);
}
.entete[data-pose="true"] {
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom-color: var(--trait);
}
.entete[data-cache="true"] { transform: translateY(-102%); }

/* Menu ouvert : l'entête reste au-dessus pour garder le bouton de fermeture
   accessible, mais s'efface visuellement — elle appartient alors au panneau. */
body.fige .entete {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transform: none;
}

.marque { display: inline-flex; align-items: center; gap: var(--e-3); flex: none; }
.marque__signe { width: 30px; height: 26px; color: var(--or-500); flex: none; }
.marque__signe svg { width: 100%; height: 100%; }
.marque__nom { display: flex; flex-direction: column; line-height: 1; }
.marque__nom b {
  font-size: 1.02rem; font-weight: 500; letter-spacing: .20em;
  color: #fff; text-transform: uppercase;
}
.marque__nom span {
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .38em;
  color: var(--or-500); text-transform: uppercase; margin-top: 4px;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav { display: none; align-items: center; gap: clamp(var(--e-4), 1.7vw, var(--e-7)); }
.nav__lien {
  position: relative; padding: 8px 2px;
  font-size: var(--pas-menu); font-weight: 500; letter-spacing: .045em;
  color: rgba(255,255,255,.66);
  transition: color var(--t-2) var(--doux);
}
.nav__lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--or-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-3) var(--sortie);
}
.nav__lien:hover { color: #fff; }
.nav__lien:hover::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: #fff; }
.nav__lien[aria-current="page"]::after { transform: scaleX(1); background: var(--or-500); }

.entete__actions { display: flex; align-items: center; gap: var(--e-4); flex: none; }
.entete .btn--plein { --btn-h: 44px; padding-inline: var(--e-5); font-size: var(--pas-mono); }
.entete__tel { display: none; }

/* Sous 700 px, l'appel à l'action quitte l'entête : il tient déjà dans le
   héros, dans le menu et dans le bouton WhatsApp. L'y maintenir écraserait
   la marque et ferait déborder la ligne. */
@media (max-width: 699px) {
  .entete .btn--plein { display: none; }
}
@media (max-width: 400px) {
  .marque__nom b { font-size: .92rem; letter-spacing: .16em; }
  .entete__interne { gap: var(--e-4); }
}

/* ── Bascule du menu ────────────────────────────────────────────────────── */
.bascule {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--trait-fort); border-radius: var(--r-1);
  transition: border-color var(--t-2) var(--doux);
}
.bascule:hover { border-color: var(--or-500); }
.bascule__traits { width: 18px; height: 12px; position: relative; }
.bascule__traits span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: #fff;
  transition: transform var(--t-3) var(--sortie), opacity var(--t-1) linear, width var(--t-3) var(--sortie);
}
.bascule__traits span:nth-child(1) { top: 0; }
.bascule__traits span:nth-child(2) { top: 50%; width: 68%; }
.bascule__traits span:nth-child(3) { bottom: 0; }
.bascule[aria-expanded="true"] .bascule__traits span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.bascule[aria-expanded="true"] .bascule__traits span:nth-child(2) { opacity: 0; width: 0; }
.bascule[aria-expanded="true"] .bascule__traits span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* ── Menu plein écran ───────────────────────────────────────────────────────
   Pas un tiroir : une planche. Les entrées sont numérotées comme des repères
   de plan et se lèvent une à une derrière leur masque. */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink-900);
  display: grid; grid-template-rows: var(--entete-h) 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .82s var(--sortie), visibility 0s linear .82s;
  visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[data-ouvert="true"] { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .82s var(--sortie), visibility 0s; }
.menu__corps { padding: var(--e-6) var(--marge) var(--e-8); display: flex; flex-direction: column; justify-content: center; }
.menu__liste { display: flex; flex-direction: column; }
.menu__ligne { border-top: 1px solid var(--trait); }
.menu__ligne:last-child { border-bottom: 1px solid var(--trait); }
.menu__lien {
  display: flex; align-items: baseline; gap: var(--e-4);
  padding: clamp(14px, 2.4vh, 26px) 0;
  font-size: clamp(1.7rem, 8.5vw, 2.9rem); font-weight: 300; letter-spacing: -.03em;
  color: #fff; line-height: 1.06;
  transform: translateY(120%); opacity: 0;
  transition: transform .7s var(--sortie), opacity .5s linear, color var(--t-2) var(--doux);
  transition-delay: var(--retard, 0ms);
}
.menu[data-ouvert="true"] .menu__lien { transform: none; opacity: 1; }
.menu__lien:hover, .menu__lien[aria-current="page"] { color: var(--or-500); }
.menu__lien i {
  font-family: var(--f-mono); font-style: normal; font-size: .625rem;
  letter-spacing: .1em; color: var(--or-500); flex: none; width: 2.1em;
}
.menu__pied {
  padding: var(--e-6) var(--marge) calc(var(--e-7) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  display: grid; gap: var(--e-5);
}
.menu__contacts { display: grid; gap: var(--e-3); }
.menu__contacts a { color: rgba(255,255,255,.72); font-size: var(--pas-petit); display: flex; gap: var(--e-3); align-items: center; }
.menu__contacts a:hover { color: var(--or-500); }
.menu__contacts svg { width: 15px; height: 15px; color: var(--or-500); flex: none; }
body.fige { overflow: hidden; }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .bascule { display: none; }
  .entete__tel { display: inline-flex; }
}
@media (min-width: 640px) {
  .menu__corps { padding-inline: var(--marge); }
  .menu__pied { grid-template-columns: 1fr auto; align-items: end; }
}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.carte {
  position: relative;
  background: var(--sur-fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  padding: var(--e-7);
  transition: border-color var(--t-3) var(--doux), background-color var(--t-3) var(--doux),
              transform var(--t-3) var(--sortie);
}
.carte:hover { border-color: var(--trait-fort); }
.carte--lien:hover { transform: translateY(-3px); border-color: var(--trait-accent); }
.carte__num {
  font-family: var(--f-mono); font-size: var(--pas-mono); letter-spacing: var(--inter-mono);
  color: var(--accent); display: block; margin-bottom: var(--e-5);
}
.carte h3 { margin-bottom: var(--e-3); }
.carte p { color: var(--texte); font-size: var(--pas-petit); line-height: 1.68; }

/* ── Images ─────────────────────────────────────────────────────────────── */
.cadre { position: relative; overflow: hidden; background: var(--ink-700); border-radius: var(--r-2); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
.cadre--4-3  { aspect-ratio: 4 / 3; }
.cadre--3-2  { aspect-ratio: 3 / 2; }
.cadre--1-1  { aspect-ratio: 1 / 1; }
.cadre--16-9 { aspect-ratio: 16 / 9; }
.cadre--haut { aspect-ratio: 3 / 4; }
.cadre--zoom img { transition: transform 1.1s var(--sortie), filter 1.1s var(--sortie); }
a:hover .cadre--zoom img, .carte--lien:hover .cadre--zoom img { transform: scale(1.045); }

/* Filet intérieur : un liseré qui rappelle le cadre d'une planche. */
.cadre--liseré::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.16);
  pointer-events: none; border-radius: 1px;
}

.legende {
  margin-top: var(--e-3);
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--texte-faible);
  display: flex; gap: var(--e-3); align-items: baseline;
}
.legende b { color: var(--accent); font-weight: 400; }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.champ { display: grid; gap: var(--e-2); }
.champ > label {
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
}
.champ > label .req { color: var(--accent); }

.saisie {
  width: 100%; min-height: 52px; padding: 13px 16px;
  background: transparent;
  border: 1px solid var(--trait-fort); border-radius: var(--r-1);
  color: var(--texte-fort); font-size: var(--pas-corps);
  transition: border-color var(--t-2) var(--doux), background-color var(--t-2) var(--doux);
}
.saisie::placeholder { color: var(--texte-faible); opacity: 1; }
.saisie:hover { border-color: var(--trait-accent); }
.saisie:focus { outline: none; border-color: var(--accent); background: var(--sur-fond); }
.saisie[aria-invalid="true"] { border-color: var(--rouge-500); }
textarea.saisie { min-height: 132px; resize: vertical; line-height: 1.6; }
select.saisie {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23FFC92B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
}
.jour select.saisie {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238E6A04' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
select.saisie option { background: var(--ink-700); color: #fff; }
.jour select.saisie option { background: #fff; color: var(--ink-800); }

.erreur-champ { font-size: .8125rem; color: var(--rouge-500); min-height: 0; }
.erreur-champ:empty { display: none; }

.case { display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer; }
.case input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--accent); flex: none; cursor: pointer; }
.case span { font-size: .875rem; line-height: 1.55; color: var(--texte); }
.case a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.piege { position: absolute !important; left: -9999px; opacity: 0; pointer-events: none; }

.formulaire__etat {
  border: 1px solid var(--trait-fort); border-radius: var(--r-2);
  padding: var(--e-5); font-size: var(--pas-petit); line-height: 1.62;
}
.formulaire__etat[data-ton="ok"]     { border-color: rgba(76,169,126,.5); background: rgba(76,169,126,.09); color: var(--texte-fort); }
.formulaire__etat[data-ton="erreur"] { border-color: rgba(226,87,76,.5);  background: rgba(226,87,76,.09);  color: var(--texte-fort); }
.formulaire__etat a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.formulaire__etat:not([data-ton]) { display: none; }

.btn[aria-busy="true"] { pointer-events: none; opacity: .62; }

/* ── Bouton WhatsApp ────────────────────────────────────────────────────────
   Discret : un rond fermé qui se déplie au survol pour révéler son libellé.
   Sur mobile il reste fermé, pour ne jamais recouvrir le contenu. */
.wa {
  position: fixed; right: clamp(14px, 3vw, 28px);
  bottom: calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-bottom));
  z-index: var(--z-flottant);
  display: inline-flex; align-items: center; gap: var(--e-3);
  height: 54px; padding: 0 17px;
  background: var(--ink-600); color: #fff;
  border: 1px solid var(--trait-fort); border-radius: var(--r-pilule);
  box-shadow: var(--ombre-2);
  transition: background-color var(--t-2) var(--doux), border-color var(--t-2) var(--doux),
              transform var(--t-3) var(--sortie), opacity var(--t-3) var(--doux);
}
.wa svg { width: 22px; height: 22px; flex: none; color: #4BD267; }
.wa__texte {
  font-size: var(--pas-menu); font-weight: 600; letter-spacing: .03em;
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .55s var(--sortie), margin-right .55s var(--sortie);
  margin-right: -4px;
}
.wa:hover, .wa:focus-visible { background: var(--ink-500); border-color: var(--trait-accent); }
.wa:hover .wa__texte, .wa:focus-visible .wa__texte { max-width: 200px; margin-right: 2px; }
.wa[data-masque="true"] { opacity: 0; transform: translateY(120%); pointer-events: none; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.pied { background: var(--ink-900); color: rgba(255,255,255,.62); position: relative; }
.pied__sol { display: block; width: 100%; height: clamp(32px, 5vw, 64px); color: rgba(255,201,43,.30); }
.pied__sol path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pied__haut { display: grid; gap: var(--e-9); padding-block: var(--e-10) var(--e-9); }
.pied__marque { display: grid; gap: var(--e-5); align-content: start; }
.pied__logo { width: clamp(148px, 22vw, 196px); height: auto; }
.pied__phrase { font-size: var(--pas-petit); line-height: 1.72; max-width: 40ch; color: rgba(255,255,255,.58); }
.pied__colonnes { display: grid; gap: var(--e-8) var(--gouttiere); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.pied__titre {
  font-family: var(--f-mono); font-size: var(--pas-mono); font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--inter-mono); text-transform: uppercase;
  color: var(--or-500); margin-bottom: var(--e-5);
}
.pied__liste { display: grid; gap: var(--e-3); }
.pied__liste a, .pied__liste span { font-size: var(--pas-petit); color: rgba(255,255,255,.62); transition: color var(--t-2) var(--doux); }
.pied__liste a:hover { color: var(--or-500); }
.pied__bas {
  border-top: 1px solid var(--trait);
  padding-block: var(--e-6) calc(var(--e-6) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6);
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: rgba(255,255,255,.44);
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-5); }
.pied__bas a:hover { color: var(--or-500); }
.pied__signature { display: inline-flex; align-items: center; gap: 6px; }
.pied__signature a { color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 3px; }
.pied__signature a:hover { color: var(--or-500); }
/* Le cœur de la signature n'existe dans aucun des sous-ensembles chargés :
   laissé en Manrope, il déclenchait à lui seul le téléchargement du fichier
   latin-ext sur toutes les pages. Il est confié aux polices d'emoji du système. */
.pied__coeur {
  color: var(--or-500);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: .95em;
}

.reseaux { display: flex; gap: var(--e-3); }
.reseaux a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: var(--r-1);
  transition: border-color var(--t-2) var(--doux), color var(--t-2) var(--doux);
}
.reseaux a:hover { border-color: var(--or-500); color: var(--or-500); }
.reseaux svg { width: 17px; height: 17px; }

@media (min-width: 860px) {
  .pied__haut { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr); gap: var(--e-12); }
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible);
}
.fil a:hover { color: var(--accent); }
.fil li { display: flex; align-items: center; gap: var(--e-2); }
.fil li + li::before { content: "/"; color: var(--trait-fort); }
.fil [aria-current] { color: var(--accent); }

/* ── Canaux du pied de page ─────────────────────────────────────────────────
   Une ligne téléphonique et un compte WhatsApp sont deux canaux : ils portent
   deux signes distincts, jamais le même. */
/* Le numéro ne se coupe jamais ; la mention passe à la ligne si la colonne
   est étroite, alignée sous le numéro et non sous l'icône. */
.pied__liste--canaux a {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e-3);
  align-items: center;
}
.pied__numero { white-space: nowrap; }
.pied__signe { display: inline-flex; width: 15px; height: 15px; flex: none; color: var(--or-500); }
.pied__signe svg { width: 100%; height: 100%; }
.pied__signe--wa { color: #4BD267; }
.pied__mention {
  grid-column: 2; font-family: var(--f-mono); font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.40);
}
.pied__slogan {
  font-size: var(--pas-petit); line-height: 1.5; color: rgba(255,255,255,.58);
}
.pied__slogan b {
  display: block; margin-top: 2px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .8125rem; color: var(--or-500);
}


/* Le bloc de contact porte des numéros qui ne se coupent pas : sur petite
   fenêtre il occupe toute la largeur plutôt que d'être serré dans une colonne
   de 150 px, où il déborderait. */
@media (max-width: 620px) {
  .pied__colonnes > div:last-child { grid-column: 1 / -1; }
}


/* ═══ sections.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   AYALINE GROUP — Sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HÉROS ──────────────────────────────────────────────────────────────────
   Une image de projet, et par-dessus la grammaire du plan : filets, cotes,
   annotations. L'annotation se trace pendant que le titre se lève. */
.heros {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: calc(var(--entete-h) + var(--e-5));
  isolation: isolate; overflow: hidden;
}
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.heros__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,12,18,.92) 0%, rgba(12,12,18,.52) 26%, rgba(12,12,18,.60) 62%, rgba(12,12,18,.96) 100%),
    linear-gradient(96deg, rgba(12,12,18,.90) 0%, rgba(12,12,18,.42) 46%, rgba(12,12,18,.16) 100%);
}
/* Sur petite fenêtre, l'accroche traverse toute la largeur et passe donc sur la
   façade claire du rendu. Le voile y est nettement plus dense : l'image reste une
   atmosphère, la lisibilité du titre ne dépend jamais d'elle. */
@media (max-width: 899px) {
  .heros__voile {
    background:
      linear-gradient(180deg, rgba(12,12,18,.94) 0%, rgba(12,12,18,.74) 28%,
                              rgba(12,12,18,.82) 66%, rgba(12,12,18,.97) 100%),
      linear-gradient(90deg, rgba(12,12,18,.88) 0%, rgba(12,12,18,.60) 100%);
  }
}

.heros__corps {
  width: 100%; max-width: var(--contenu-large); margin-inline: auto;
  padding-inline: var(--marge); align-self: center;
  padding-block: var(--e-5);
  min-height: 0;
}
.heros__titre { max-width: 15ch; margin-bottom: var(--e-5); }
.heros .lead { max-width: 46ch; margin-bottom: var(--e-7); color: rgba(255,255,255,.80); }
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* Bandeau bas : les cotes du projet, alignées comme un cartouche. */
.heros__pied {
  width: 100%; max-width: var(--contenu-large); margin-inline: auto;
  padding: var(--e-6) var(--marge) calc(var(--e-6) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: var(--e-5);
}
.heros__cotes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--e-5) var(--e-6); }
.heros__cote { display: grid; gap: 6px; }
.heros__cote b {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 300;
  color: #fff; letter-spacing: -.02em; line-height: 1;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.heros__cote span {
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: rgba(255,255,255,.50);
}
.heros__descente { display: none; }

@media (min-width: 720px) {
  .heros__cotes { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .heros__pied { grid-template-columns: 1fr auto; align-items: end; gap: var(--e-8); }
  .heros__descente {
    display: inline-flex; align-items: center; gap: var(--e-3);
    font-family: var(--f-mono); font-size: var(--pas-mono);
    letter-spacing: var(--inter-mono); text-transform: uppercase; color: rgba(255,255,255,.52);
    padding-bottom: 4px;
  }
  .heros__descente svg { width: 11px; height: 26px; color: var(--or-500); animation: descente 2.6s var(--doux) infinite; }
}
/* Écran bas de plafond : le bandeau de cotes doit rester visible sans
   défiler. On réduit le pas d'affichage plutôt que de sacrifier la donnée. */
@media (min-width: 900px) and (max-height: 860px) {
  .heros__titre { font-size: clamp(2.8rem, 1rem + 6.1vw, 6rem); }
  .heros .lead { font-size: var(--pas-corps); margin-bottom: var(--e-6); }
  .heros__pied { padding-block: var(--e-5); }
}
@media (max-height: 700px) {
  .heros { min-height: 0; padding-bottom: var(--e-7); }
}

@keyframes descente {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Annotation tracée sur l'image : la ligne se dessine, le repère apparaît. */
.annot { position: absolute; z-index: 0; pointer-events: none; display: none; }
.annot__ligne { stroke: var(--or-500); stroke-width: 1; fill: none; stroke-dasharray: 260; stroke-dashoffset: 260; }
.vu .annot__ligne { animation: trace 1.5s var(--sortie) .5s forwards; }
.annot__point { fill: var(--or-500); opacity: 0; }
.vu .annot__point { animation: parait .4s linear 1.6s forwards; }
.annot__texte {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  fill: var(--or-500); text-transform: uppercase; opacity: 0;
}
.vu .annot__texte { animation: parait .5s linear 1.75s forwards; }
@keyframes trace  { to { stroke-dashoffset: 0; } }
@keyframes parait { to { opacity: 1; } }
@media (min-width: 1180px) { .annot { display: block; } }

/* ── MANIFESTE ──────────────────────────────────────────────────────────────
   Une phrase, très grande, qui se révèle mot à mot au défilement. Le texte
   inactif reste lisible : on éclaire, on n'efface pas. */
.manifeste { position: relative; overflow: hidden; }
.manifeste__phrase {
  font-size: clamp(1.85rem, 1.05rem + 4.1vw, 4.5rem);
  font-weight: 200; line-height: 1.14; letter-spacing: -.035em;
  max-width: 21ch; text-wrap: balance;
}
.manifeste__phrase .mot { color: rgba(255,255,255,.20); transition: color .5s var(--doux); }
.jour .manifeste__phrase .mot { color: rgba(20,20,28,.20); }
.manifeste__phrase .mot.actif { color: var(--texte-fort); }
.manifeste__phrase .mot.editorial.actif { color: var(--accent); }
.manifeste__signature {
  margin-top: var(--e-8); display: flex; align-items: center; gap: var(--e-4);
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
}
.manifeste__signature::before { content: ""; width: 48px; height: 1px; background: var(--trait-accent); }

/* ── DUO : titre à gauche, corps à droite ───────────────────────────────── */
.duo {
  display: grid; gap: var(--e-8); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); }
  .duo__tete  { grid-column: 1 / span 5; position: sticky; top: calc(var(--entete-h) + var(--e-7)); }
  .duo__corps { grid-column: 7 / span 6; }
}

/* ── INDEX D'EXPERTISES ─────────────────────────────────────────────────────
   Une liste, pas une grille de cartes. Chaque ligne s'ouvre au survol et
   appelle son image ; le trait de gauche se remplit en or. */
.index { border-top: 1px solid var(--trait); }
.index__ligne { border-bottom: 1px solid var(--trait); position: relative; }
.index__lien {
  display: grid; gap: var(--e-2) var(--e-5);
  grid-template-columns: auto 1fr;
  padding: clamp(24px, 3.4vw, 42px) 0;
  align-items: baseline;
  transition: padding-inline-start var(--t-3) var(--sortie);
}
.index__num {
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); color: var(--accent);
  grid-row: 1; align-self: center;
}
.index__titre {
  grid-column: 2; font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.85rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.06; color: var(--texte-fort);
  transition: color var(--t-2) var(--doux);
}
.index__desc { grid-column: 2; font-size: var(--pas-petit); color: var(--texte-faible); max-width: 54ch; }
.index__ligne::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--sortie);
}
.index__ligne:hover::before, .index__ligne:focus-within::before { transform: scaleX(1); }
.index__ligne:hover .index__titre { color: var(--accent); }
@media (min-width: 900px) {
  .index__lien { grid-template-columns: auto minmax(0, 1fr) minmax(0, 22ch) auto; align-items: center; }
  .index__titre { grid-column: 2; grid-row: 1; }
  .index__desc  { grid-column: 3; grid-row: 1; }
  .index__fleche { grid-column: 4; grid-row: 1; }
  .index__ligne:hover .index__lien { padding-inline-start: var(--e-5); }
}
.index__fleche { width: 20px; height: 20px; color: var(--texte-faible); transition: transform var(--t-3) var(--sortie), color var(--t-2) var(--doux); }
.index__ligne:hover .index__fleche { transform: translateX(6px); color: var(--accent); }

/* Vignette qui suit le curseur sur la ligne survolée — desktop uniquement. */
.index__vignette {
  position: fixed; z-index: 5; width: 300px; aspect-ratio: 4/3;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.94);
  transition: opacity var(--t-2) var(--doux), transform var(--t-3) var(--sortie);
  border-radius: var(--r-2); overflow: hidden; box-shadow: var(--ombre-3);
  display: none;
}
.index__vignette img { width: 100%; height: 100%; object-fit: cover; }
.index__vignette[data-actif="true"] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) and (min-width: 1080px) { .index__vignette { display: block; } }

/* ── EMPILEMENT COLLANT ─────────────────────────────────────────────────────
   Chaque volet se cale sous l'entête et le suivant vient le recouvrir. Le
   volet sortant s'assombrit et recule légèrement : on sent l'épaisseur.  */
.pile { position: relative; }
.pile__volet { position: sticky; top: var(--entete-h); }
.pile__carte {
  min-height: min(88svh, 760px);
  display: grid; align-content: center;
  border-top: 1px solid var(--trait-fort);
  padding-block: clamp(40px, 6vw, 78px);
  background: var(--fond);
  transition: transform .5s var(--doux), filter .5s var(--doux);
  transform-origin: top center;
}
.pile__volet[data-recouvert="true"] .pile__carte { transform: scale(.965); filter: brightness(.5); }
.pile__interne { display: grid; gap: var(--e-7); align-items: center; }
.pile__texte { display: grid; gap: var(--e-4); align-content: start; }
.pile__texte h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); font-weight: 300; letter-spacing: -.032em; }
/* Le trait vit dans la gouttière, hors du flux. En colonne de grille, il
   faisait de chaque <em> ou <strong> une cellule à part, et la ligne se
   brisait en deux. Ici la ligne reste un paragraphe : le balisage inline y
   coule normalement. */
.pile__liste {
  display: grid; gap: var(--e-3); margin-top: var(--e-3);
  padding-left: calc(16px + var(--e-3));
}
.pile__liste li {
  position: relative;
  font-size: var(--pas-petit); color: var(--texte); line-height: 1.6;
}
.pile__liste li::before {
  content: ""; position: absolute; left: calc((16px + var(--e-3)) * -1); top: .72em;
  width: 16px; height: 1px; background: var(--trait-accent);
}
@media (min-width: 900px) {
  .pile__interne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-10); }
}

/* ── LE PLAN VIVANT ─────────────────────────────────────────────────────────
   Le plan réel du duplex, redessiné. Les pièces s'allument au survol et au
   défilement, avec leur surface exacte relevée sur les plans d'exécution. */
.plan { display: grid; gap: var(--e-8); }
.plan__scene { position: relative; }
.plan__svg { width: 100%; height: auto; overflow: visible; }
.plan__mur   { fill: none; stroke: var(--texte-fort); stroke-width: 2.6; stroke-linejoin: miter; opacity: .85; }
.plan__cloison { fill: none; stroke: var(--texte-fort); stroke-width: 1.4; opacity: .55; }
.plan__piece {
  fill: var(--sur-fond); stroke: none;
  transition: fill .35s var(--doux);
  cursor: pointer;
}
.plan__piece:hover, .plan__piece[data-actif="true"] { fill: rgba(255,201,43,.20); }
.jour .plan__piece:hover, .jour .plan__piece[data-actif="true"] { fill: rgba(154,116,5,.16); }
.plan__etiquette { pointer-events: none; }
.plan__etiquette text { font-family: var(--f-mono); fill: var(--texte-faible); }
.plan__etiquette .nom { font-size: 9.4px; letter-spacing: .08em; }
.plan__etiquette .surf { font-size: 8.6px; fill: var(--accent); }
.plan__ouverture { fill: none; stroke: var(--texte-faible); stroke-width: 1; opacity: .6; }
.plan__cote { stroke: var(--trait-accent); stroke-width: .8; fill: none; }
.plan__cote-texte { font-family: var(--f-mono); font-size: 7.5px; fill: var(--accent); letter-spacing: .1em; }

.plan__bascule { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: var(--r-1); overflow: hidden; }
.plan__bascule button {
  padding: 11px var(--e-5); font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
  transition: background-color var(--t-2) var(--doux), color var(--t-2) var(--doux);
}
.plan__bascule button + button { border-left: 1px solid var(--trait-fort); }
.plan__bascule button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }

.plan__legende { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.plan__legende li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding: 11px 0; border-bottom: 1px solid var(--trait);
  font-size: var(--pas-petit); color: var(--texte);
  cursor: pointer; transition: color var(--t-2) var(--doux), padding-inline-start var(--t-2) var(--sortie);
}
.plan__legende li:hover, .plan__legende li[data-actif="true"] { color: var(--texte-fort); padding-inline-start: var(--e-3); }
.plan__legende b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--accent); font-size: var(--pas-petit); }
.plan__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding-top: var(--e-4); font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
}
.plan__total b { color: var(--texte-fort); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; }
@media (min-width: 980px) {
  .plan { grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr); gap: var(--e-10); align-items: start; }
}

/* ── MÉTHODE : la ligne de vie ──────────────────────────────────────────────
   Une verticale qui se remplit d'or au fur et à mesure du défilement. Les
   étapes sont des repères posés dessus. */
.methode { position: relative; }
.methode__rail { position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--trait); }
.methode__jauge { position: absolute; left: 0; top: 0; width: 100%; height: var(--avancement, 0%); background: var(--accent); transition: height .18s linear; }
.methode__etapes { display: grid; gap: clamp(36px, 5vw, 68px); padding-left: 40px; }
.methode__etape { position: relative; display: grid; gap: var(--e-3); }
.methode__etape::before {
  content: ""; position: absolute; left: -40px; top: .55em;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--trait-fort); background: var(--fond);
  transition: border-color var(--t-3) var(--doux), background-color var(--t-3) var(--doux), box-shadow var(--t-3) var(--doux);
}
.methode__etape.vu::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.methode__num { font-family: var(--f-mono); font-size: var(--pas-mono); letter-spacing: var(--inter-mono); color: var(--accent); }
.methode__etape h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); }
.methode__etape p { font-size: var(--pas-petit); color: var(--texte); max-width: 56ch; }
.methode__livrable {
  margin-top: var(--e-2); font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible);
}
.methode__livrable b { color: var(--texte); font-weight: 400; }
@media (min-width: 900px) {
  .methode__rail { left: 12px; }
  .methode__etapes { padding-left: 76px; }
  .methode__etape::before { left: -72px; }
}

/* ── PROGRAMME : la fiche projet ────────────────────────────────────────── */
.programme__entete { display: grid; gap: var(--e-6); }
.fiche { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.fiche__ligne {
  display: grid; grid-template-columns: minmax(0, 12ch) minmax(0, 1fr); gap: var(--e-5);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--trait); align-items: baseline;
}
.fiche__cle {
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
}
.fiche__val { color: var(--texte-fort); font-size: var(--pas-petit); }
@media (min-width: 640px) { .fiche__ligne { grid-template-columns: minmax(0, 16ch) minmax(0, 1fr); } }

/* Galerie asymétrique : deux images de tailles inégales, décalées. */
.galerie { display: grid; gap: var(--gouttiere); }
.galerie__a { grid-column: span 12; }
.galerie__b { grid-column: span 12; }
@media (min-width: 860px) {
  .galerie { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; }
  .galerie__a { grid-column: 1 / span 7; }
  .galerie__b { grid-column: 9 / span 4; padding-bottom: var(--e-9); }
}

/* Chiffres du projet. */
.chiffres { display: grid; gap: var(--e-6) var(--gouttiere); grid-template-columns: repeat(2, minmax(0,1fr)); }
.chiffres__item { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.chiffres__item b {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 400;
  color: var(--texte-fort); letter-spacing: -.02em; line-height: 1;
}
.chiffres__item span { font-family: var(--f-mono); font-size: var(--pas-mono); letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible); }
@media (min-width: 780px) { .chiffres { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ── ENGAGEMENTS ────────────────────────────────────────────────────────── */
.engagements { display: grid; gap: var(--gouttiere); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* Un groupe de quatre se range en 2 × 2 dans la zone où quatre colonnes ne
   tiennent pas : trois cartes suivies d'une orpheline déséquilibre la page. */
@media (min-width: 640px) and (max-width: 1179px) {
  .engagements--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.engagement { display: grid; gap: var(--e-3); padding-top: var(--e-5); border-top: 1px solid var(--trait); align-content: start; }
.engagement__signe { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--e-2); }
.engagement h3 { font-size: var(--pas-h4); font-weight: 600; }
.engagement p { font-size: var(--pas-petit); color: var(--texte); line-height: 1.66; }

/* ── APPEL À L'ACTION ───────────────────────────────────────────────────── */
.appel { position: relative; overflow: hidden; }
.appel__interne { display: grid; gap: var(--e-8); align-items: end; position: relative; z-index: 1; }
.appel__titre { font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4.4rem); font-weight: 200; letter-spacing: -.038em; line-height: 1.02; max-width: 16ch; }
.appel__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); }
@media (min-width: 940px) { .appel__interne { grid-template-columns: minmax(0, 1.3fr) auto; } }

/* ── CONTACT ────────────────────────────────────────────────────────────── */
.contact { display: grid; gap: var(--e-9); }
.contact__canaux { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.contact__canal {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-5);
  align-items: center; padding: var(--e-5) 0; border-bottom: 1px solid var(--trait);
  transition: padding-inline-start var(--t-3) var(--sortie);
}
.contact__canal:hover { padding-inline-start: var(--e-3); }
.contact__canal svg.icone { width: 20px; height: 20px; color: var(--accent); flex: none; }
.contact__canal b { display: block; font-size: var(--pas-corps); font-weight: 500; color: var(--texte-fort); }
.contact__canal span { font-family: var(--f-mono); font-size: var(--pas-mono); letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible); }
.contact__canal .index__fleche { width: 17px; height: 17px; }
@media (min-width: 980px) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; } }

.formulaire { display: grid; gap: var(--e-5); }
.formulaire__paire { display: grid; gap: var(--e-5); }
@media (min-width: 620px) { .formulaire__paire { grid-template-columns: 1fr 1fr; } }

/* ── EN-TÊTE DE PAGE INTÉRIEURE ─────────────────────────────────────────── */
.chapeau {
  position: relative; padding-top: calc(var(--entete-h) + clamp(56px, 9vw, 128px));
  padding-bottom: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--trait); overflow: hidden;
}
.chapeau__interne { position: relative; z-index: 1; display: grid; gap: var(--e-6); }
.chapeau h1 { max-width: 17ch; }
.chapeau .lead { max-width: 54ch; }
.chapeau--image .chapeau__fond { position: absolute; inset: 0; z-index: 0; }
.chapeau--image .chapeau__fond img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.chapeau--image::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(12,12,18,.72), rgba(12,12,18,.94));
}

/* ── DÉFILANT ───────────────────────────────────────────────────────────────
   Un bandeau de mots-clés qui glisse, séparé par la marque. Il donne du
   mouvement à une page sans rien animer d'important. */
.marquee { overflow: hidden; border-block: 1px solid var(--trait); padding-block: var(--e-5); }
.marquee__piste {
  display: flex; gap: var(--e-7); width: max-content;
  animation: glisse 42s linear infinite;
}
.marquee:hover .marquee__piste { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--e-7);
  font-size: clamp(1.05rem, .9rem + .8vw, 1.6rem); font-weight: 300;
  letter-spacing: -.02em; color: var(--texte-faible); white-space: nowrap;
}
.marquee__item::after { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex: none; }
@keyframes glisse { to { transform: translateX(-50%); } }

/* ── PAGE 404 ───────────────────────────────────────────────────────────── */
.perdu { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: calc(var(--entete-h) + var(--e-9)) var(--marge) var(--e-9); gap: var(--e-6); }
.perdu__code { font-family: var(--f-mono); font-size: clamp(4.5rem, 2rem + 12vw, 11rem); color: var(--accent); line-height: .9; letter-spacing: -.04em; }
.perdu__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: center; }

/* ── PAGES LÉGALES ──────────────────────────────────────────────────────── */
.prose { max-width: var(--contenu-texte); display: grid; gap: var(--e-5); }
.prose h2 { font-size: var(--pas-h3); margin-top: var(--e-7); }
.prose h3 { font-size: var(--pas-h4); font-weight: 600; margin-top: var(--e-5); }
.prose p, .prose li { font-size: var(--pas-petit); line-height: 1.75; }
.prose ul { display: grid; gap: var(--e-2); padding-left: var(--e-5); }
.prose li { list-style: none; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: calc(var(--e-5) * -1); top: .78em; width: 12px; height: 1px; background: var(--trait-accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose__note {
  border-left: 2px solid var(--trait-accent); padding: var(--e-4) 0 var(--e-4) var(--e-5);
  background: var(--sur-fond); font-size: .875rem; color: var(--texte-faible);
}

/* ── Utilitaires d'assise ───────────────────────────────────────────────── */
.pile-v      { display: grid; gap: var(--e-5); }
.pile-v--lg  { gap: var(--e-7); }
.rangee      { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
.mt-6 { margin-top: var(--e-6); } .mt-7 { margin-top: var(--e-7); } .mt-8 { margin-top: var(--e-8); }
.mt-9 { margin-top: var(--e-9); } .mt-10 { margin-top: var(--e-10); }
.tc { text-align: center; }

/* ── PLAN DE MASSE ──────────────────────────────────────────────────────────
   Le seul dessin d'ensemble du programme : quatre emprises sur la parcelle,
   les deux du centre accolées. Tout est tracé, rien n'est photographié. */
.masse { width: 100%; height: auto; overflow: visible; }
.masse__parcelle { fill: var(--sur-fond); stroke: var(--trait-fort); stroke-width: 1; stroke-dasharray: 6 5; }
.masse__voie { fill: none; stroke: var(--trait); stroke-width: 10; stroke-linecap: round; }
.masse__bati { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 1.4; transition: fill var(--t-2) var(--doux); }
.masse__bati--jumele { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.masse__lot:hover .masse__bati { fill: color-mix(in srgb, var(--accent) 42%, transparent); }
.masse__mitoyen { stroke: var(--accent); stroke-width: 3; }
.masse__num { font-family: var(--f-mono); font-size: 15px; fill: var(--texte-fort); letter-spacing: .04em; }
.masse__nom { font-family: var(--f-mono); font-size: 7.5px; fill: var(--texte-faible); letter-spacing: .16em; }
.masse__annot text { font-family: var(--f-mono); font-size: 8.5px; fill: var(--accent); letter-spacing: .14em; text-transform: uppercase; }
.masse__cote, .masse__fleche { fill: none; stroke: var(--trait-accent); stroke-width: 1; }

/* ── NOTE ───────────────────────────────────────────────────────────────────
   Les précisions honnêtes — origine d'une surface, nature d'une image, ce que
   le site n'affirme pas — méritent d'être lues. Elles quittent donc la
   monospace des cotes pour la sans du corps de texte, en retrait. */
.note {
  border-left: 1px solid var(--trait-accent);
  padding-left: var(--e-5);
  max-width: 74ch;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--texte-faible);
}
.note strong { color: var(--texte); font-weight: 600; }

/* ── Utilitaires ────────────────────────────────────────────────────────────
   La CSP du site interdit les styles en ligne (`style-src 'self'`, sans
   `unsafe-inline`) : un attribut `style=` est purement et simplement ignoré en
   production. Les quelques ajustements ponctuels du balisage vivent donc ici. */
.t-h1    { font-size: var(--pas-h1); }
.t-h2    { font-size: var(--pas-h2); }
.t-h3    { font-size: var(--pas-h3); }
.t-corps { font-size: var(--pas-corps); }
.t-petit { font-size: var(--pas-petit); }

.mes-18 { max-width: 18ch; }
.mes-19 { max-width: 19ch; }
.mes-20 { max-width: 20ch; }
.mes-46-centre { max-width: 46ch; margin-inline: auto; }

.pile-v--md { gap: var(--e-6); }
.au-dessus  { position: relative; z-index: 1; }
.filet-haut { border-top: 1px solid var(--trait); }
.dec-4      { padding-left: var(--e-4); }
.p-6        { padding: var(--e-6); }
.p-7        { padding: var(--e-7); }
.en-ligne   { display: inline-flex; }
.sans-curseur { cursor: default; }
.retard-140 { --retard: 140ms; }

.lien-souligne {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Carte-programme : l'image touche les bords, le texte porte son propre retrait. */
.carte--pleine { display: block; padding: 0; overflow: hidden; }

/* Ancrage de l'annotation tracée sur le héros. */
.annot--heros { right: 6%; top: 26%; }

/* Bloc central de la page 404. */
.perdu__bloc {
  position: relative; z-index: 1;
  display: grid; gap: var(--e-6); justify-items: center;
}

/* Aperçu de plan : décoratif, il ne réagit pas au pointeur. */
.plan__piece--fixe { cursor: default; pointer-events: none; }

/* ── Statut du programme ────────────────────────────────────────────────────
   Un état de chantier, pas une promotion : un filet, une pastille, une
   majuscule discrète. Aucun aplat criard. */
.statut {
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 7px var(--e-4) 7px var(--e-3);
  border: 1px solid var(--trait-accent); border-radius: var(--r-pilule);
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase;
  color: var(--accent); align-self: start; width: fit-content;
}
.statut__point {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .statut__point { animation: statut-pulse 2.6s var(--doux) infinite; }
}
@keyframes statut-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
}

/* ── Repères du programme ───────────────────────────────────────────────────
   Les données officielles, alignées comme un cartouche. Pas un tableau : une
   ligne de cotes qui se replie proprement sur petite fenêtre. */
.reperes {
  display: grid; gap: var(--e-5) var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  border-top: 1px solid var(--trait);
  padding-top: var(--e-5);
}
.reperes li { display: grid; gap: 6px; align-content: start; }
.reperes b {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 400;
  color: var(--texte-fort); letter-spacing: -.02em; line-height: 1;
}
.reperes span {
  font-family: var(--f-mono); font-size: var(--pas-mono);
  letter-spacing: var(--inter-mono); text-transform: uppercase; color: var(--texte-faible);
}

/* ── Signature de marque ────────────────────────────────────────────────────
   Le slogan, employé avec parcimonie : une fois sur l'accueil, une fois au
   pied de page. Les trois mots portent seuls l'emphase. */
.signature {
  font-size: var(--pas-lead); line-height: 1.35; color: var(--texte-faible);
  padding-left: var(--e-5); border-left: 1px solid var(--trait-accent);
}
.signature b {
  display: block; margin-top: 4px; font-weight: 400;
  font-size: clamp(1.05rem, .92rem + .55vw, 1.4rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}