/* ==========================================================================
   Méridel — feuille de style unique
   1. Polices  2. Tokens  3. Base  4. Layout  5. Composants  6. Sections
   7. Mode « coulisses »  8. Utilitaires  9. Mouvement réduit
   ========================================================================== */

/* 1. Polices (OFL, auto-hébergées, sous-ensemble latin + français) -------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Variante avec l'axe SOFT : chargée seulement si la direction « Naturel » est affichée */
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/fraunces-soft-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
/* Polices de repli ajustées : limitent le décalage au chargement */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman"), local("DejaVu Serif");
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Palette « Léman à l'aube » */
  --ink: #111A22;
  --paper: #F5F1EA;
  --paper-2: #ECE6DC;
  --stone: #6B6A66;
  --stone-deep: #5A5955;
  --lake: #1F4E5A;
  --lake-soft: #5E8A90;
  --mist: #C8D3D0;
  --ember: #D9693F;
  --night: #0D1418;
  --cream: #EDE7DC;

  /* Rôles (redéfinis dans les zones sombres) */
  --fg: var(--ink);
  --fg-2: var(--stone);
  --accent: var(--lake);
  --rule: rgba(17, 26, 34, .14);
  --rule-strong: rgba(17, 26, 34, .32);
  --surface: var(--paper-2);
  --line: var(--lake-soft);

  /* Typographie */
  --f-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --f-text: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fv-draft: "wght" 360, "opsz" 88, "SOFT" 0;
  --fv-set: "wght" 440, "opsz" 144, "SOFT" 0;
  --fs-h1: clamp(48px, 4px + 7.8vw, 116px);
  --fs-h2: clamp(36px, 14px + 4.2vw, 76px);
  --fs-h3: clamp(24px, 17px + 1.6vw, 40px);
  --fs-lead: clamp(19px, 15px + .7vw, 24px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-micro: 13px;

  /* Grille & espace (base 8 px) */
  --margin: clamp(16px, 5vw, 80px);
  --gutter: 24px;
  --maxw: 1440px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --section: clamp(96px, 10vw, 160px);
  --header-h: 72px;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, 0, 1);
  --t-micro: 220ms;
  --t-enter: 600ms;
}

.tone-night {
  --np: 1;
  --fg: var(--cream);
  --fg-2: var(--mist);
  --accent: #9CC3C8;
  --rule: rgba(237, 231, 220, .16);
  --rule-strong: rgba(237, 231, 220, .34);
  --surface: #151F25;
  --line: var(--lake-soft);
  color: var(--fg);
  background: var(--night);
}
/* Avec JS, le fond sombre est porté par la toile de fond (transition douce) */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .js .methode.tone-night {
    background: transparent;
    --fg: color-mix(in oklab, var(--cream) calc(var(--np) * 100%), var(--ink));
    --fg-2: color-mix(in oklab, var(--mist) calc(var(--np) * 100%), var(--stone));
    --accent: color-mix(in oklab, #9CC3C8 calc(var(--np) * 100%), var(--lake));
    --rule: color-mix(in oklab, rgba(237, 231, 220, .16) calc(var(--np) * 100%), rgba(17, 26, 34, .14));
  }
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  background: var(--paper);
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.js body { background: transparent; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
:where(ol[role="list"], ul[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--ember); color: var(--ink); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}
main:focus-visible { outline: none; }
[hidden] { display: none !important; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 400ms; animation-timing-function: var(--ease); }

/* Toile de fond, grain, grille, ligne-méridien */
.backdrop {
  position: fixed; inset: 0; z-index: -3;
  background: var(--paper);
  pointer-events: none;
}
.backdrop__night {
  position: absolute; inset: 0;
  background: var(--night);
  opacity: var(--night-o, 0);
}
.grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.meridian {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 0;
  overflow: visible;
  pointer-events: none;
}
.meridian__path {
  fill: none;
  stroke: var(--lake-soft);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.meridian__dots circle {
  fill: var(--paper);
  stroke: var(--lake-soft);
  stroke-width: 1;
  transition: fill var(--t-micro) var(--ease), stroke var(--t-micro) var(--ease);
}
.meridian__dots circle.is-lit { fill: var(--ember); stroke: var(--ember); }
.no-js .meridian, html:not(.js) .meridian { display: none; }

/* 4. Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
.section { padding-block: var(--section); position: relative; }
main { position: relative; z-index: 1; display: block; }

/* 5. Composants ----------------------------------------------------------- */
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  font-weight: 500;
  transition: top var(--t-micro) var(--ease);
}
.skip:focus { top: 16px; }

.overline {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s4);
}
.overline::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
}

.h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 440;
  font-variation-settings: var(--fv-set);
  line-height: 1;
  letter-spacing: -.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 44ch;
  color: var(--fg);
}
.micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--fg-2); }
.micro--mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; }
.note { font-size: var(--fs-small); color: var(--fg-2); max-width: 62ch; margin-top: var(--s4); }

/* Mots qui « s'allument » (poids variable, largeur compensée) */
.w { display: inline-block; white-space: pre; }
.js [data-words] .w {
  /* Mot « éteint » : gris pierre (contraste ≥ 4,5:1), puis il s'allume en encre */
  font-variation-settings: var(--fv-draft);
  color: var(--fg-2);
  transition:
    font-variation-settings 700ms var(--ease) calc(var(--i, 0) * 50ms),
    color 700ms var(--ease) calc(var(--i, 0) * 50ms);
}
.js [data-words].is-lit .w { font-variation-settings: var(--fv-set); color: inherit; }

/* Boutons */
.btn {
  --mx: 0px; --my: 0px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.005em;
  white-space: nowrap;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 350ms var(--ease), background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.btn__arrow { display: inline-block; transition: transform 350ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translate3d(var(--mx), calc(var(--my) + 1px), 0) scale(.985); }
.btn--primary { background: var(--ember); color: var(--ink); }
.btn--primary:hover { background: #E27A52; }
.btn--ghost { border-color: var(--rule-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--paper); }

/* Liens soulignés qui se dessinent */
.link-draw {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-weight: 500;
  color: var(--fg);
}
.link-draw::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(.25);
  transform-origin: left;
  opacity: .5;
  transition: transform 450ms var(--ease), opacity 450ms var(--ease);
}
.link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); opacity: 1; }
.note .link-draw, .micro .link-draw, .contact__direct .link-draw { min-height: 0; }
.note .link-draw::after, .micro .link-draw::after, .contact__direct .link-draw::after { bottom: -1px; }

/* Listes cochées */
.ticks li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: var(--fs-small);
  border-top: 1px solid var(--rule);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 19px;
  width: 12px; height: 1px;
  background: var(--accent);
}

/* Marqueurs à compléter (visibles volontairement) */
mark.todo {
  background: #FFE9A8;
  color: #3A2A00;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: .82em;
}

/* Accordéons */
.acc { border-top: 1px solid var(--rule); }
.acc:last-child { border-bottom: 1px solid var(--rule); }
.acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(18px, 16px + .4vw, 22px);
  font-weight: 500;
  letter-spacing: -.01em;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__icon {
  position: relative; flex: none;
  width: 28px; height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transition: transform 400ms var(--ease), border-color var(--t-micro) var(--ease);
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1px; background: currentColor;
  transform: translate(-50%, -50%);
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 400ms var(--ease); }
.acc[open] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__sum:hover .acc__icon { border-color: var(--fg); }
.acc__body { padding: 0 0 var(--s5); animation: acc-in 450ms var(--ease); }
.acc__body > p { color: var(--fg-2); max-width: 62ch; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Interrupteur « coulisses » */
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--fg-2);
  transition: color var(--t-micro) var(--ease);
}
.switch:hover { color: var(--fg); }
.switch__track {
  position: relative;
  width: 34px; height: 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 300ms var(--ease), background-color var(--t-micro) var(--ease);
}
.switch[aria-pressed="true"] { color: var(--fg); }
.switch[aria-pressed="true"] .switch__thumb { transform: translateX(14px); background: var(--ember); }

/* Logo */
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }
.logo__svg { width: 112px; height: auto; overflow: visible; }
.logo__svg text {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 460;
  font-variation-settings: "wght" 460, "opsz" 48, "SOFT" 0;
  letter-spacing: -.02em;
  fill: currentColor;
}
.logo__svg line { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.logo__svg circle { fill: var(--ember); }
.logo:hover .logo__svg line { stroke: var(--ember); }

/* En-tête */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  transition: transform 450ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
  color: var(--fg);
}
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(245, 241, 234, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
html[data-tone="night"] .site-header { --fg: var(--cream); --fg-2: var(--mist); --rule: rgba(237,231,220,.14); --rule-strong: rgba(237,231,220,.34); color: var(--cream); }
html[data-tone="night"] .site-header::before { background: rgba(13, 20, 24, .72); }
.site-header__inner {
  position: relative;
  height: 100%;
  max-width: calc(var(--maxw) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav__list { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500;
  color: var(--fg);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
.menu-toggle { display: none; }

@media (max-width: 1023.98px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 44px; min-width: 44px;
    position: relative; z-index: 2;
    font-size: 15px; font-weight: 500;
  }
  .menu-toggle__icon { position: relative; width: 22px; height: 10px; }
  .menu-toggle__icon span {
    position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
    transition: transform 400ms var(--ease), top 400ms var(--ease);
  }
  .menu-toggle__icon span:first-child { top: 0; }
  .menu-toggle__icon span:last-child { top: 9px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 5px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 5px; transform: rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s4);
    padding: calc(var(--header-h) + 24px) var(--margin) max(40px, env(safe-area-inset-bottom));
    background: var(--night);
    color: var(--cream);
    --fg: var(--cream); --fg-2: var(--mist); --rule-strong: rgba(237,231,220,.34);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 600ms var(--ease), visibility 0s linear 600ms;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 600ms var(--ease), visibility 0s; }
  .nav__list { flex-direction: column; gap: 4px; }
  .nav__link {
    font-family: var(--f-display);
    font-size: clamp(40px, 11vw, 64px);
    font-variation-settings: "wght" 400, "opsz" 144;
    line-height: 1.1;
    letter-spacing: -.02em;
    opacity: 0; transform: translateY(24px);
    transition: opacity 500ms var(--ease), transform 600ms var(--ease);
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; }
  .nav.is-open li:nth-child(2) .nav__link { transition-delay: 50ms; }
  .nav.is-open li:nth-child(3) .nav__link { transition-delay: 100ms; }
  .nav.is-open li:nth-child(4) .nav__link { transition-delay: 150ms; }
  .nav.is-open li:nth-child(5) .nav__link { transition-delay: 200ms; }
  .nav__link::after { bottom: 6px; }
  .menu-open .site-header { color: var(--cream); --fg: var(--cream); }
  .menu-open .site-header::before { opacity: 0; }
  .menu-open { overflow: hidden; }
}

/* 6. Sections ------------------------------------------------------------- */

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px));
  padding-bottom: clamp(32px, 6vh, 64px);
  --hp: 0;
}
.hero__inner { position: relative; z-index: 1; }
.hero .overline { color: var(--fg-2); }
.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 440;
  font-variation-settings: var(--fv-set);
  line-height: .95;
  letter-spacing: -.028em;
  word-spacing: .03em;
  margin-bottom: clamp(32px, 5vh, 56px);
  max-width: 14ch;
}
.hero__line { display: block; text-wrap: balance; }
.hero__line--2 { color: var(--lake); }
.hero__mark { position: relative; display: inline-block; white-space: nowrap; }
.js .hero { --hp-set: 0; }
.js .hero__title {
  /* Échafaudages → dessin final : poids + taille optique compensés (largeur quasi constante) */
  font-variation-settings:
    "wght" calc(360 + 80 * var(--hp-set)),
    "opsz" calc(88 + 56 * var(--hp-set)),
    "SOFT" 0;
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .js .hero__line--2 { color: color-mix(in oklab, var(--lake) calc(40% + 60% * var(--hp-set)), var(--stone)); }
}
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: end;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; color: var(--fg); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(40px, 7vh, 80px);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.hero__hint { opacity: calc(1 - var(--hp) * 2); }
@media (min-width: 1024px) {
  .hero__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); }
  .hero__actions { justify-content: flex-end; }
}

/* Plan technique du hero */
.hero__blueprint {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: calc(1 - var(--hp) * 1.4);
  transform: translate3d(0, calc(var(--hp) * -40px), 0);
  color: var(--lake-soft);
}
.hero__blueprint svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-line {
  fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bp-draw 1100ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
  opacity: .55;
}
.bp-line--faint { opacity: .22; }
.bp-line--ember { stroke: var(--ember); opacity: .9; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
.bp-note {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--lake);
  white-space: nowrap;
  opacity: 0;
  animation: bp-fade 500ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.bp-note::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); }
@keyframes bp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Approche */
.approche__title { max-width: 16ch; margin-bottom: clamp(56px, 8vw, 112px); }
.principles { display: grid; gap: var(--s6); }
.principle { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.principle__num { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); padding-top: 14px; align-self: start; }
.principle__title {
  font-family: var(--f-display);
  font-size: clamp(48px, 20px + 6vw, 112px);
  font-weight: 440;
  font-variation-settings: var(--fv-set);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: var(--s2);
}
.principle__text { grid-column: 2; font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; color: var(--fg-2); }
@media (min-width: 1024px) {
  .principle { grid-template-columns: 1fr 6fr 5fr; align-items: end; gap: var(--gutter); padding-top: var(--s4); }
  .principle__title { margin: 0; }
  .principle__text { grid-column: 3; padding-bottom: 12px; }
  .principle:nth-child(2) { padding-left: 8.333%; }
  .principle:nth-child(3) { padding-left: 16.666%; }
}

/* Ce que vous ne voyez pas */
.invisible__grid { display: grid; gap: var(--s6); align-items: start; }
.invisible__copy .h2 { margin-bottom: var(--s4); }
.invisible__copy .lead { margin-bottom: var(--s5); color: var(--fg-2); }
.invisible__note { margin-top: var(--s2); max-width: 44ch; }
@media (min-width: 1024px) {
  .invisible__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); }
  .meter { margin-top: 64px; }
}
.meter {
  position: relative;
  padding: var(--s4);
  background: var(--night);
  color: var(--cream);
  border-radius: 4px;
  --fg-2: var(--mist);
  font-family: var(--f-mono);
}
.meter__caption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin-bottom: var(--s3); display: flex; align-items: center; gap: 10px; }
.meter__caption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(217, 105, 63, .18); }
.meter__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(237, 231, 220, .14);
}
.meter__row dt { font-family: var(--f-text); font-size: 15px; color: var(--mist); }
.meter__row dd { white-space: nowrap; }
.meter__value {
  font-family: var(--f-display);
  font-size: clamp(32px, 24px + 1.4vw, 44px);
  font-variation-settings: "wght" 400, "opsz" 72;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--cream);
}
.meter__unit { font-size: 13px; color: var(--mist); }
.meter__foot { margin-top: var(--s2); color: var(--mist); }
.meter__empty { color: var(--mist); }

/* Services */
.services .h2 { margin-bottom: clamp(48px, 6vw, 96px); }
.svc { border-bottom: 1px solid var(--rule); }
.svc__head { margin: 0; font: inherit; }
.svc__btn {
  width: 100%;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; align-items: center; gap: var(--s2);
  min-height: 88px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  color: var(--fg);
}
.svc__num { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.svc__name {
  font-family: var(--f-display);
  font-size: clamp(30px, 14px + 3.4vw, 64px);
  font-variation-settings: "wght" 380, "opsz" 144;
  line-height: 1.02;
  letter-spacing: -.025em;
  transition: font-variation-settings 500ms var(--ease), color 300ms var(--ease), transform 500ms var(--ease);
}
.svc__btn[aria-expanded="true"] .svc__name { color: var(--lake); }
.svc__btn:hover .svc__name { transform: translateX(8px); }
.svc__icon { position: relative; width: 32px; height: 32px; border: 1px solid var(--rule-strong); border-radius: 50%; justify-self: end; transition: transform 400ms var(--ease), background-color 300ms var(--ease); }
.svc__icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.svc__btn[aria-expanded="true"] .svc__icon { background: var(--ember); border-color: var(--ember); transform: rotate(-45deg); }
.svc__btn[aria-expanded="true"] .svc__icon::before { width: 12px; }
.svc__panel { padding: 0 0 var(--s5) 64px; animation: panel-in 500ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.svc__desc { font-size: var(--fs-lead); line-height: 1.45; margin-bottom: var(--s3); max-width: 40ch; }
.svc__panel .ticks { margin-bottom: var(--s3); }
@media (max-width: 767.98px) { .svc__panel { padding-left: 0; } .svc__btn { grid-template-columns: 36px minmax(0, 1fr) 32px; } }
@media (min-width: 1024px) {
  .svc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto) 1fr; column-gap: var(--gutter); border-bottom: 0; }
  .svc__head { grid-column: 1; }
  .svc__head--1 { grid-row: 1; } .svc__head--2 { grid-row: 2; } .svc__head--3 { grid-row: 3; }
  .svc__head--3 .svc__btn { border-bottom: 1px solid var(--rule); }
  .svc__panel { grid-column: 2; grid-row: 1 / span 4; padding: 28px 0 0; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
  .svc__btn { min-height: 128px; grid-template-columns: 64px minmax(0, 1fr) 32px; }
}

/* Votre nom, mis en scène */
.nameplay .h2 { margin-bottom: clamp(48px, 6vw, 80px); max-width: 16ch; }
.np { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .np { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); align-items: stretch; } }
.np__label { display: block; font-size: var(--fs-small); color: var(--fg-2); margin-bottom: var(--s1); }
.np__input {
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--f-display);
  font-size: 26px;
  font-variation-settings: "wght" 400, "opsz" 48;
  transition: border-color var(--t-micro) var(--ease);
}
.np__input::placeholder { color: var(--fg-2); opacity: .8; }
.np__input:focus-visible { outline: none; border-bottom-color: var(--ember); box-shadow: 0 1px 0 var(--ember); }
.np__privacy { margin-top: var(--s1); }
.np__dirs { border: 0; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.np__legend { width: 100%; font-size: var(--fs-small); color: var(--fg-2); margin-bottom: var(--s1); padding: 0; }
.np__dir { position: relative; }
.np__dir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.np__dir span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.np__dir span:hover { border-color: var(--fg); }
.np__dir input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.np__dir input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 3px; }

.np__stage {
  --np-fg: var(--ink);
  --np-accent: var(--lake);
  position: relative;
  container-type: inline-size;
  min-height: clamp(280px, 38vw, 480px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 5cqi, 64px);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--rule);
}
.np__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 450ms var(--ease); }
.np__bg--classique { background: var(--paper); }
.np__bg--contemporain { background: var(--ink); }
.np__bg--audacieux { background: var(--ember); }
.np__bg--naturel { background: #DCE3D6; }
.np__stage[data-dir="classique"] .np__bg--classique,
.np__stage[data-dir="contemporain"] .np__bg--contemporain,
.np__stage[data-dir="audacieux"] .np__bg--audacieux,
.np__stage[data-dir="naturel"] .np__bg--naturel { opacity: 1; }
.np__stage[data-dir="contemporain"] { --np-fg: #EDE7DC; --np-accent: var(--ember); }
.np__stage[data-dir="audacieux"] { --np-fg: var(--ink); --np-accent: var(--paper); }
.np__stage[data-dir="naturel"] { --np-fg: #2F4A3A; --np-accent: #8A6A4A; }

.np__name {
  --k: .42;
  position: relative;
  margin: 0;
  max-width: 100%;
  color: var(--np-fg);
  font-family: var(--f-display);
  font-size: clamp(28px, calc(80cqi / (var(--chars, 16) * var(--k))), 168px);
  font-variation-settings: "wght" 400, "opsz" 144, "SOFT" 0;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  overflow-wrap: anywhere;
  transition: font-variation-settings 450ms var(--ease), color 450ms var(--ease), opacity 160ms var(--ease), transform 450ms var(--ease);
}
.np__stage.is-morphing .np__name { opacity: 0; transform: translateY(8px) scale(.985); }
.np__stage[data-dir="contemporain"] .np__name {
  --k: .46;
  font-family: var(--f-text);
  font-variation-settings: "wght" 560;
  letter-spacing: -.045em;
  text-transform: lowercase;
}
.np__stage[data-dir="audacieux"] .np__name {
  --k: .64;
  font-variation-settings: "wght" 700, "opsz" 144, "SOFT" 0;
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .9;
}
.np__stage[data-dir="naturel"] .np__name {
  --k: .46;
  font-family: "Fraunces Soft", var(--f-display);
  font-variation-settings: "wght" 330, "opsz" 72, "SOFT" 100;
  letter-spacing: 0;
}
.np__dot {
  display: inline-block;
  width: .16em; height: .16em;
  margin-left: .06em;
  border-radius: 50%;
  background: var(--np-accent);
  vertical-align: baseline;
  opacity: 0; transform: scale(0);
  transition: opacity 300ms var(--ease), transform 450ms var(--ease);
}
.np__stage[data-dir="contemporain"] .np__dot { opacity: 1; transform: none; }
.np__frame {
  position: absolute; inset: clamp(14px, 3cqi, 28px) clamp(14px, 3cqi, 28px) clamp(36px, 5cqi, 48px);
  border-top: 1px solid var(--np-accent); border-bottom: 1px solid var(--np-accent);
  box-shadow: inset 0 4px 0 -3px var(--np-accent), inset 0 -4px 0 -3px var(--np-accent);
  opacity: 0; transform: scaleX(.92);
  transition: opacity 450ms var(--ease), transform 600ms var(--ease);
}
.np__stage[data-dir="classique"] .np__frame { opacity: .7; transform: none; }
.np__stage[data-dir="audacieux"] .np__frame {
  opacity: 1; transform: none;
  inset: auto clamp(24px, 5cqi, 64px) clamp(24px, 5cqi, 56px);
  height: 10px; border: 0; box-shadow: none; background: var(--np-accent);
}
.np__leaf {
  position: absolute; left: 50%; bottom: clamp(24px, 7cqi, 64px);
  width: min(38%, 220px); height: auto;
  transform: translateX(-50%);
  overflow: visible;
}
.np__leaf path { fill: none; stroke: var(--np-accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 800ms var(--ease), opacity 200ms var(--ease); }
.np__stage[data-dir="naturel"] .np__leaf path { stroke-dashoffset: 0; opacity: 1; }
.np__caption {
  position: absolute; left: 16px; bottom: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--np-fg); opacity: .7;
  transition: color 450ms var(--ease);
}
.np__outro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.np__outro .lead { font-family: var(--f-display); font-variation-settings: "wght" 400, "opsz" 72; font-size: clamp(22px, 16px + 1.2vw, 32px); line-height: 1.2; max-width: 28ch; }

/* Méthode */
.methode { --methode-extra: 0px; }
.methode__head { margin-bottom: clamp(48px, 6vw, 88px); }
.methode__head .h2 { max-width: 14ch; }
.methode__track { position: relative; display: grid; gap: 0; padding-inline: var(--margin); max-width: calc(var(--maxw) + 2 * var(--margin)); margin-inline: auto; }
.step { position: relative; padding: var(--s4) 0 var(--s4) var(--s5); border-top: 1px solid var(--rule); }
.step::before {
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.step::after {
  content: ""; position: absolute; left: 1px; top: calc(var(--s4) + 14px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--line);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
.step.is-active::after { background: var(--ember); border-color: var(--ember); }
.step__num { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.step__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 16px + 4vw, 72px);
  font-variation-settings: "wght" 400, "opsz" 144;
  line-height: 1;
  letter-spacing: -.025em;
  margin: var(--s2) 0 var(--s2);
}
.step__text { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.methode__rail { display: none; }

/* Méthode — piste horizontale sur grand écran (JS + mouvement autorisé) */
@media (min-width: 1024px) {
  .js.motion-ok .methode { height: calc(100svh + var(--methode-extra)); padding: 0; }
  .js.motion-ok .methode__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
  .js.motion-ok .methode__head { margin-bottom: clamp(40px, 6vh, 72px); }
  .js.motion-ok .methode__track {
    display: flex; gap: clamp(48px, 6vw, 120px);
    width: max-content; max-width: none; margin: 0;
    padding-inline: max(var(--margin), (100vw - var(--maxw)) / 2) 30vw;
    transform: translate3d(calc(var(--mp, 0) * var(--methode-extra) * -1), 0, 0);
    will-change: transform;
  }
  .js.motion-ok .step { width: clamp(300px, 30vw, 440px); flex: none; border-top: 0; padding: 56px 0 0; }
  .js.motion-ok .step::before { display: none; }
  .js.motion-ok .step::after { left: 0; top: -5px; }
  .js.motion-ok .methode__rail {
    display: block; position: absolute; top: 0;
    left: max(var(--margin), (100vw - var(--maxw)) / 2); right: 30vw; height: 1px;
    background: var(--line);
    transform: scaleX(clamp(0, var(--mp, 0) * 1.15, 1)); transform-origin: left;
  }
  .js.motion-ok .methode__viewport { position: relative; padding-top: 6px; }
  .js.motion-ok .methode__viewport::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--rule); }
}
@media (min-width: 1024px) {
  html:not(.motion-ok) .methode__track, html:not(.js) .methode__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
  html:not(.motion-ok) .step, html:not(.js) .step { padding-left: 0; padding-top: var(--s5); }
  html:not(.motion-ok) .step::before, html:not(.js) .step::before { display: none; }
  html:not(.motion-ok) .step::after, html:not(.js) .step::after { left: 0; top: -6px; }
}

/* Offres */
.offres .h2 { margin-bottom: clamp(48px, 6vw, 96px); }
.plans { display: grid; gap: var(--s3); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border-radius: 4px;
  --fg-2: var(--stone-deep);
}
.plan--featured { background: var(--ink); color: var(--cream); --fg: var(--cream); --fg-2: var(--mist); --rule: rgba(237,231,220,.16); --rule-strong: rgba(237,231,220,.34); --accent: #9CC3C8; }
@media (min-width: 900px) { .plan--featured { transform: translateY(-16px); } }
.plan__outline { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.plan__outline rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--ember); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease); }
.plan--featured:hover .plan__outline rect, .plan--featured:focus-within .plan__outline rect { stroke-dashoffset: 0; }
.plan__badge {
  align-self: flex-start;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; margin-bottom: var(--s3);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--mist);
}
.plan__name { font-family: var(--f-display); font-size: var(--fs-h3); font-variation-settings: "wght" 440, "opsz" 96; line-height: 1.05; letter-spacing: -.02em; }
.plan__desc { color: var(--fg-2); font-size: var(--fs-small); margin: var(--s2) 0 var(--s4); min-height: 3em; }
.plan__price { font-family: var(--f-display); font-variation-settings: "wght" 400, "opsz" 144; font-size: clamp(40px, 24px + 2.2vw, 60px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; white-space: nowrap; }
.plan__cur { font-family: var(--f-text); font-size: 15px; letter-spacing: .04em; vertical-align: .9em; margin-right: 2px; color: var(--fg-2); }
.plan__terms { font-size: 13px; color: var(--fg-2); margin: var(--s1) 0 var(--s4); }
.plan .ticks { margin-bottom: var(--s5); }
.plan__cta { margin-top: auto; width: 100%; }
.plan--featured .btn--ghost { color: var(--cream); }

.accordions { margin-top: var(--s7); }
.mplans { display: grid; gap: var(--s5); margin-bottom: var(--s3); }
@media (min-width: 900px) { .mplans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.mplan__name { font-family: var(--f-display); font-size: 28px; font-variation-settings: "wght" 440, "opsz" 72; line-height: 1.1; }
.mplan__price { font-family: var(--f-display); font-size: 36px; font-variation-settings: "wght" 400, "opsz" 144; margin: 6px 0 4px; letter-spacing: -.02em; }
.mplan__price span { font-family: var(--f-text); font-size: 14px; color: var(--fg-2); letter-spacing: 0; }
.mplan__desc { color: var(--fg-2); font-size: var(--fs-small); margin-bottom: var(--s2); }
.mplan .ticks { margin-bottom: var(--s2); }
.extras { display: grid; gap: 0 var(--s6); }
@media (min-width: 900px) { .extras { grid-template-columns: 1fr 1fr; } }
.extra { display: flex; justify-content: space-between; gap: var(--s3); padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); }
.extra dd { color: var(--fg-2); white-space: nowrap; }

/* À propos */
.apropos__grid { display: grid; gap: 0; }
.apropos .h2 { margin-bottom: var(--s5); max-width: 14ch; }
@media (min-width: 1024px) {
  .apropos__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--gutter); align-items: start; }
  .apropos__grid .overline { grid-column: 1 / -1; }
  .apropos .h2 { margin: 0; }
  .apropos__text { padding-bottom: 8px; }
}
.apropos__person { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.apropos__photo { flex: none; width: clamp(104px, 9vw, 136px); aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; text-align: center; font-size: 11px; }
.apropos__photo img { width: 100%; height: 100%; object-fit: cover; }
.apropos__sig { font-size: var(--fs-small); color: var(--fg-2); max-width: 40ch; }
.apropos__sig strong { color: var(--fg); font-weight: 600; }

/* Questions */
.questions__grid { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .questions__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); } .questions .h2 { position: sticky; top: calc(var(--header-h) + 40px); } }
.questions .h2 { max-width: 12ch; }

/* Contact — formulaire en forme de phrase */
.contact .h2 { margin-bottom: clamp(40px, 5vw, 72px); }
.phrase { max-width: 1100px; }
.phrase__text {
  font-family: var(--f-display);
  font-size: clamp(24px, 12px + 2.3vw, 44px);
  font-variation-settings: "wght" 380, "opsz" 72;
  line-height: 1.55;
  letter-spacing: -.012em;
  color: var(--fg);
}
.phrase__field {
  display: inline-block;
  max-width: 100%;
  min-width: 4ch;
  margin: 0 .04em 0 .12em;
  padding: 0 .04em 2px;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-variation-settings: "wght" 460, "opsz" 72;
  color: var(--lake);
  line-height: 1.2;
  vertical-align: baseline;
  field-sizing: content;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.phrase__field::placeholder { color: var(--fg-2); opacity: .9; font-variation-settings: "wght" 360, "opsz" 72; }
.phrase__field:hover { border-bottom-color: var(--fg); }
.phrase__field:focus-visible { outline: none; border-bottom-color: var(--ember); background: rgba(217, 105, 63, .07); }
.phrase__field[aria-invalid="true"] { border-bottom: 2px solid #B8431B; }
.phrase__slot { white-space: nowrap; }
.phrase__select { position: relative; display: inline-block; max-width: 100%; }
.phrase__select select { appearance: none; -webkit-appearance: none; padding-right: 1.1em; cursor: pointer; max-width: 100%; }
.phrase__select::after { content: "▾"; position: absolute; right: .25em; bottom: .28em; font-size: .5em; color: var(--lake); pointer-events: none; }
.phrase__text--more { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; }
.phrase__more { flex: 1 1 280px; field-sizing: content; min-height: 1.3em; resize: vertical; }
.phrase__errors { margin-top: var(--s3); color: #A33A15; font-size: var(--fs-small); font-weight: 500; }
.phrase__errors li::before { content: "— "; }
.phrase__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.phrase__status { margin-top: var(--s2); min-height: 1.5em; }
.phrase__status a { text-decoration: underline; text-underline-offset: 3px; }
.phrase__privacy { margin-top: var(--s1); max-width: 62ch; }
.phrase__delay { margin-top: var(--s2); color: var(--fg); font-weight: 500; }
.contact__direct { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--fg-2); }
@media (max-width: 599.98px) {
  .phrase__actions .btn { width: 100%; }
}

/* Pied de page */
.site-footer {
  position: relative; z-index: 1;
  padding: clamp(80px, 10vw, 140px) 0 max(32px, env(safe-area-inset-bottom));
  background: var(--night);
  color: var(--cream);
}
.site-footer__inner { display: grid; gap: var(--s5); }
.site-footer .logo { color: var(--cream); }
.site-footer .logo__svg { width: 168px; }
.site-footer__tag { font-family: var(--f-display); font-size: clamp(28px, 18px + 2vw, 48px); font-variation-settings: "wght" 360, "opsz" 144; letter-spacing: -.02em; margin-top: var(--s2); color: var(--cream); }
.site-footer__nav ul, .site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.site-footer .link-draw { color: var(--cream); font-weight: 400; font-size: var(--fs-small); }
.site-footer__meter, .site-footer__copy { color: var(--mist); }
.site-footer__copy { padding-top: var(--s3); border-top: 1px solid rgba(237, 231, 220, .14); }
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: 6fr 3fr 3fr; column-gap: var(--gutter); align-items: start; }
  .site-footer__nav ul, .site-footer__legal ul { flex-direction: column; }
  .site-footer__meter { grid-column: 1; }
  .site-footer__copy { grid-column: 1 / -1; }
}

/* Pages secondaires (légal, 404) */
.page { padding: calc(var(--header-h) + clamp(56px, 10vw, 128px)) 0 var(--section); }
.page__title { font-family: var(--f-display); font-size: clamp(40px, 16px + 5vw, 88px); font-variation-settings: "wght" 420, "opsz" 144; line-height: 1; letter-spacing: -.03em; max-width: 16ch; margin-bottom: var(--s4); }
.page__meta { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); margin-bottom: var(--s6); }
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--f-display); font-size: clamp(24px, 18px + 1.2vw, 34px); font-variation-settings: "wght" 440, "opsz" 72; line-height: 1.15; letter-spacing: -.015em; margin: var(--s6) 0 var(--s2); }
.prose h3 { font-size: 18px; font-weight: 600; margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--fg); }
.prose p + p { margin-top: var(--s2); }
.prose ul { padding-left: 1.2em; margin: var(--s2) 0; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--lake); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose a.btn { color: var(--ink); text-decoration: none; }
.prose dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; margin: var(--s3) 0; }
.prose dt { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .08em; margin-top: var(--s2); }
@media (min-width: 700px) { .prose dl { grid-template-columns: 220px minmax(0, 1fr); } .prose dt { margin-top: 3px; } }
.page__back { margin-top: var(--s6); }

/* 7. Mode « coulisses » --------------------------------------------------- */
.gridlines {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity 400ms var(--ease);
}
.gridlines__inner {
  height: 100%;
  max-width: calc(var(--maxw) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
  --cols: 4;
  background-clip: content-box;
  background-image: repeating-linear-gradient(to right,
    rgba(217, 105, 63, .07) 0,
    rgba(217, 105, 63, .07) calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)),
    transparent calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)),
    transparent calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols) + var(--gutter)));
}
@media (min-width: 768px) { .gridlines__inner { --cols: 6; } }
@media (min-width: 1024px) { .gridlines__inner { --cols: 12; } }
.coulisses .gridlines { opacity: 1; }

.coulisses [data-annot] { outline: 1px dashed rgba(94, 138, 144, .7); outline-offset: -1px; }
.coulisses [data-annot]:not(.logo):not(.site-header):not(.btn) { position: relative; }
.coulisses [data-annot]::before {
  content: attr(data-annot);
  position: absolute; left: 0; top: 0; z-index: 45;
  max-width: 100%;
  padding: 3px 6px;
  background: var(--lake);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: .02em; line-height: 1.3;
  text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0; animation: annot-in 400ms var(--ease) forwards;
}
.coulisses [data-annot=""]::before { display: none; }
.coulisses .section[data-annot] {
  background-image:
    repeating-linear-gradient(135deg, rgba(94, 138, 144, .12) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(135deg, rgba(94, 138, 144, .12) 0 1px, transparent 1px 8px);
  background-size: 100% var(--section), 100% var(--section);
  background-position: top, bottom;
  background-repeat: no-repeat;
}
.coulisses .btn[data-annot]::before { top: -22px; }
@keyframes annot-in { to { opacity: 1; } }
.coulisses .hero__blueprint { opacity: 1; transform: none; }

/* 8. Utilitaires ---------------------------------------------------------- */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* 9. Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-words] .w { font-variation-settings: var(--fv-set); color: inherit; }
  .hero__blueprint, .hero__hint { display: none; }
  .js .hero { --hp-set: 1; }
  .btn { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.hero__blueprint.is-static .bp-line { animation: none; stroke-dashoffset: 0; }
.hero__blueprint.is-static .bp-note { animation: none; opacity: 1; }
.prose code { font-family: var(--f-mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }