/* ═══════════════════════════════════════════════════════════════
   Polices — hébergées dans le projet, aucun appel à un tiers.
   Fichiers variables : un seul par famille couvre toutes les graisses.
   Le `unicode-range` fait que latin-ext n'est téléchargé que si un
   caractère hors Latin-1 apparaît : un texte français ne le charge jamais.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-italic-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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-mono-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;
}

/* ═══════════════════════════════════════════════════════════════
   Quentin Kuntzmann — product design
   Système visuel : fascia d'instrument Braun / Vitsœ (cf. DESIGN.md)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Surfaces — gris craie froid. Jamais de crème, jamais de beige. */
  --ground:      oklch(0.968 0.0025 265);
  --plate:       oklch(1 0 0);
  --plate-sunk:  oklch(0.945 0.003 265);

  /* Encres */
  --ink:         oklch(0.185 0.008 265);
  --ink-2:       oklch(0.415 0.008 265);
  --ink-3:       oklch(0.520 0.008 265);  /* 4,90:1 sur --ground, 4,65:1 sur --plate-sunk */

  /* Traits */
  --rule:        oklch(0.885 0.004 265);
  --rule-strong: oklch(0.800 0.005 265);

  /* Signal — Aerospace Orange #FF4F00.
     --accent porte les surfaces et les traits (3,00:1 sur le fond : au seuil
     des éléments non textuels). Dès qu'il porte du texte, c'est --accent-ink,
     même teinte assombrie jusqu'à 4,5:1 sur fond clair comme sur plaque. */
  --accent:      oklch(0.670 0.222 37);
  --accent-ink:  oklch(0.555 0.222 37);
  --accent-lit:  oklch(0.800 0.170 45);   /* reflet du dôme de LED */
  --accent-deep: oklch(0.520 0.200 35);   /* arête basse, sertissage */

  /* Jaune du drapeau, repoussé à 92° : à 78° il collait trop à l'orange. */
  --yellow:      oklch(0.860 0.155 92);

  /* Fond sombre */
  --dark:        oklch(0.175 0.008 265);
  --dark-ink:    oklch(0.800 0.004 265);
  --dark-rule:   oklch(0.320 0.008 265);

  /* Rôles contextuels, redéfinis par section */
  --rail:        var(--rule);
  --rail-strong: var(--rule-strong);
  --rail-lit:    oklch(1 0 0 / .8);
  --focus:       var(--accent-ink);

  /* Typo */
  --sans: "Figtree", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Structure */
  --shell:  1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --head-h: 64px;
  --gap-sec: clamp(4.5rem, 9vw, 8.5rem);

  /* Matière — la lumière vient d'en haut, comme sur un boîtier posé sur un
     bureau. Une pièce en relief prend la lumière sur son arête haute et pose
     son ombre en bas ; une pièce en creux fait exactement l'inverse. Tout le
     site n'utilise que ces deux états : rien ne flotte, rien n'est en verre. */
  --edge-lit:  oklch(1 0 0 / .92);
  --edge-cast: oklch(0.20 0.01 265 / .10);

  --raise: inset 0 1px 0 var(--edge-lit),
           0 1px 1px oklch(0.20 0.01 265 / .05),
           0 3px 8px -4px oklch(0.20 0.01 265 / .16);
  --sink:  inset 0 1px 3px oklch(0.20 0.01 265 / .12),
           inset 0 -1px 0 oklch(1 0 0 / .85);

  /* Courbes de tendance du relevé d'effets : une polyligne qui monte ou qui
     descend, tête de flèche en équerre au bout. Le tracé descendant n'est pas
     le montant retourné — une rotation d'un demi-tour renverrait la courbe vers
     la gauche, donc à rebours du sens de lecture. Bouts francs et angles vifs,
     comme le chevron. */
  --trend-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1.5 12 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M1 8.6 4.3 5.3 6.8 7.8 11 3.6'/%3E%3Cpath d='M8 3.6h3v3'/%3E%3C/g%3E%3C/svg%3E");
  --trend-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1.5 12 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M1 3.4 4.3 6.7 6.8 4.2 11 8.4'/%3E%3Cpath d='M8 8.4h3v-3'/%3E%3C/g%3E%3C/svg%3E");

  /* Chevron des tiroirs : bouts francs et angle vif, pas d'arrondi. */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 4.6 6 8.2 9.6 4.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");

  /* Grain : un boîtier Braun est en ABS mat, pas en verre. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Mouvement */
  --dwell: 5200ms;                 /* temps d'affichage d'un visuel du hero */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --press: cubic-bezier(0.3, 0, 0.2, 1);

  /* Empilement */
  --z-rails: 0;
  --z-body: 1;
  --z-head: 60;
  --z-navm: 55;
  --z-grain: 90;

  interpolate-size: allow-keywords;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
     défilement et casserait le `position: sticky` de l'en-tête. */
  overflow-x: clip;
}

/* Le grain passe au-dessus de tout, à 4 % : il unifie les surfaces sans
   toucher la lisibilité. Ne capte aucun clic. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-image: var(--grain);
  opacity: .04;
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.skip {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 100; background: var(--ink); color: #fff;
  padding: .75rem 1.1rem; border-radius: 2px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: .75rem; }

/* ── Structure ───────────────────────────────────────────────── */
.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  position: relative;
  z-index: var(--z-body);
}
.shell.narrow { width: min(46rem, 100% - var(--gutter) * 2); }

.sec {
  position: relative;
  padding-block: var(--gap-sec);
}

/* Rails exposés — les montants latéraux d'une étagère Vitsœ 606.
   Chaque section vient s'y monter ; les taquets marquent le point de fixation. */
.rails {
  position: absolute;
  inset-block: 0;
  left: 50%;
  translate: -50% 0;
  width: min(var(--shell), 100% - var(--gutter) * 2);
  border-inline: 1px solid var(--rail);
  /* Rainure + reflet juste à côté : le montant a une épaisseur. */
  box-shadow: inset 1px 0 0 var(--rail-lit), inset -1px 0 0 var(--rail-lit);
  pointer-events: none;
  z-index: var(--z-rails);
}
.rails::before,
.rails::after {
  content: "";
  position: absolute;
  top: 0; width: 15px; height: 1px;
  background: var(--rail-strong);
}
.rails::before { left: -8px; }
.rails::after  { right: -8px; }
/* Le taquet de fixation a lui aussi son reflet en dessous. */
.rails::before, .rails::after { box-shadow: 0 1px 0 var(--rail-lit); }

@media (max-width: 599px) { .rails { display: none; } }

/* Grille perforée — le principe de la grille de haut-parleur Braun.
   Matière, pas décoration : réservée aux deux folds sombres. */
/* Deux passes décalées d'1 px : le trou, puis la lèvre inférieure que la
   lumière vient frapper. C'est ce décalage qui fait lire une tôle perforée
   plutôt qu'un semis de points. */
.grille {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 2px, oklch(1 0 0 / .055) 1px, transparent 1.5px),
    radial-gradient(circle at 1px 1px, oklch(0.08 0.01 265 / .55) 1px, transparent 1.5px);
  background-size: 7px 7px;
  pointer-events: none;
  z-index: var(--z-rails);
}

/* ── Typographie ─────────────────────────────────────────────── */
.hero__h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose {
  color: var(--ink-2);
  max-width: 66ch;
  text-wrap: pretty;
}
.prose + .prose { margin-top: 1.1em; }
.prose i { font-style: italic; }

.lede--dark, .prose--dark { color: var(--dark-ink); }

/* Plaque signalétique — le numéro de modèle au dos d'un appareil Braun.
   Usage rare et asymétrique : ce n'est pas un chapeau de section. */
.spec {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--plate);
  box-shadow: var(--raise);
  /* Lettrage gravé : le liseré clair sous la lettre creuse le caractère. */
  text-shadow: 0 1px 0 oklch(1 0 0 / .9);
}
.spec--free {
  background: var(--plate-sunk);
  box-shadow: var(--sink);
  border-color: oklch(0.86 0.004 265);
}

/* En dessous de 560 px la plaque tiendrait sur deux lignes : on resserre
   plutôt que de couper l'information. */
@media (max-width: 560px) {
  .spec { font-size: .625rem; padding: .35rem .55rem; }
}

/* LED sertie : rebord sombre du logement, reflet en haut du dôme, halo. */
.led {
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%,
              var(--accent-lit) 0%, var(--accent) 58%, var(--accent-deep) 100%);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / .34),
              0 0 4px oklch(0.670 0.222 37 / .55);
}
.led--live { animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse {
  0%, 62%, 100% { box-shadow: inset 0 0 0 1px oklch(0 0 0 / .28), 0 0 0 0 oklch(0.670 0.222 37 / .5); }
  30%           { box-shadow: inset 0 0 0 1px oklch(0 0 0 / .28), 0 0 0 5px oklch(0.670 0.222 37 / 0); }
}

/* ── Commandes ───────────────────────────────────────────────── */
/* Modèle à trois états, repris des touches Braun : la pièce a une PAROI
   latérale visible et une ombre de contact au sol. Sa base ne bouge jamais
   (elle est posée à 3 px), seul le capot se déplace :

     repos   capot à 0,  paroi 3 px  →  base à 3
     survol  capot à -1, paroi 4 px  →  base à 3   (la pièce se soulève)
     appui   capot à +3, paroi 0     →  base à 3   (elle rentre dans son logement)

   C'est cette base fixe qui fait lire un objet plutôt qu'un rectangle
   qui saute. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
  line-height: 1;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--ease),
              border-color .22s var(--ease),
              box-shadow .22s var(--ease),
              translate .22s var(--ease);
}
/* Le relâchement peut prendre son temps, pas l'enfoncement : une touche
   mécanique répond en moins de 100 ms ou elle semble molle. */
.btn:active { transition-duration: .07s; }

.btn--primary {
  background: var(--ink);
  color: oklch(1 0 0);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .22),              /* arête haute éclairée */
    inset 0 7px 10px -8px oklch(1 0 0 / .16),      /* la face capte la lumière */
    inset 0 -2px 0 oklch(0 0 0 / .42),             /* retour d'ombre sous la face */
    0 3px 0 oklch(0.115 0.008 265),                /* paroi latérale */
    0 4px 7px -2px oklch(0.20 0.01 265 / .30),     /* contact au sol */
    0 9px 18px -7px oklch(0.20 0.01 265 / .22);    /* ombre portée */
}
.btn--primary:hover {
  translate: 0 -1px;
  background: oklch(0.245 0.009 265);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .30),
    inset 0 8px 12px -8px oklch(1 0 0 / .22),
    inset 0 -2px 0 oklch(0 0 0 / .42),
    0 4px 0 oklch(0.115 0.008 265),
    0 6px 10px -2px oklch(0.20 0.01 265 / .34),
    0 15px 26px -8px oklch(0.20 0.01 265 / .30);
}
.btn--primary:active {
  translate: 0 3px;
  background: oklch(0.165 0.008 265);
  box-shadow:
    inset 0 2px 5px oklch(0 0 0 / .5),             /* la face ne prend plus la lumière */
    inset 0 -1px 0 oklch(1 0 0 / .05),
    0 0 0 oklch(0.115 0.008 265),                  /* paroi absorbée */
    0 1px 2px -1px oklch(0.20 0.01 265 / .3);
}

.btn--light {
  background: oklch(1 0 0);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0),
    inset 0 -2px 0 oklch(0 0 0 / .16),
    0 3px 0 oklch(0.745 0.006 265),
    0 5px 9px -2px oklch(0 0 0 / .38),
    0 12px 22px -8px oklch(0 0 0 / .34);
}
.btn--light:hover {
  translate: 0 -1px;
  background: oklch(0.985 0.002 265);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0),
    inset 0 -2px 0 oklch(0 0 0 / .16),
    0 4px 0 oklch(0.745 0.006 265),
    0 7px 12px -2px oklch(0 0 0 / .42),
    0 18px 30px -10px oklch(0 0 0 / .38);
}
.btn--light:active {
  translate: 0 3px;
  background: oklch(0.94 0.003 265);
  box-shadow:
    inset 0 2px 5px oklch(0 0 0 / .20),
    0 0 0 oklch(0.745 0.006 265),
    0 1px 2px -1px oklch(0 0 0 / .3);
}

/* Le témoin s'avive quand la main approche, et retombe à l'appui. */
.btn .led { transition: box-shadow .22s var(--ease); }
.btn:hover .led {
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / .34),
              0 0 8px oklch(0.670 0.222 37 / .9);
}
.btn:active .led {
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / .45),
              0 0 3px oklch(0.670 0.222 37 / .5);
}

/* Cible tactile : 44 px minimum, y compris pour la variante compacte. */
.btn--sm { padding: .95rem 1.15rem; font-size: .875rem; }
.btn--lg { padding: 1.15rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ── En-tête ─────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0;
  z-index: var(--z-head);
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Une fois décollé du haut de page, le capot porte son ombre sur le contenu
   qui passe dessous : il est devant, pas dessiné dessus. */
.head.is-stuck {
  border-bottom-color: var(--rule-strong);
  box-shadow: 0 1px 0 var(--edge-lit), 0 6px 14px -8px oklch(0.20 0.01 265 / .35);
}

.head__in {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.mark {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  gap: .6rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-right: auto;
}
.mark__badge {
  inline-size: 20px; block-size: 20px;
  border-radius: 2px;
  background: var(--ink);
  position: relative;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .22),
              0 1px 2px oklch(0.20 0.01 265 / .3);
}
.mark__badge::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%,
              var(--accent-lit) 0%, var(--accent) 58%, var(--accent-deep) 100%);
  box-shadow: 0 0 4px oklch(0.670 0.222 37 / .6);
}

.nav { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  scale: 0 1; transform-origin: left;
  transition: scale .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-current::after { scale: 1 1; }
.nav a.is-current { color: var(--ink); }

.head__end { display: flex; align-items: center; gap: .75rem; }

/* 44 × 44 : c'est le plancher tactile, et le bouton n'avait que 36 × 18. */
.burger {
  display: none;
  inline-size: 44px; block-size: 44px;
  place-items: center;
  padding: 0;
  margin-right: -.6rem;
  cursor: pointer;
  border-radius: 2px;
}
.burger__bars,
.burger__bars::before,
.burger__bars::after {
  display: block; inline-size: 20px; block-size: 1.5px;
  background: var(--ink);
  transition: translate .25s var(--ease), rotate .25s var(--ease), opacity .15s;
}
.burger__bars { position: relative; }
.burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { translate: 0 -6px; }
.burger__bars::after  { translate: 0 6px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] .burger__bars::after  { translate: 0 0; rotate: -45deg; }

.navm {
  border-top: 1px solid var(--rule);
  background: var(--ground);
  z-index: var(--z-navm);
}
/* `> a` et non `a` : sinon la règle écrase le bouton du panneau
   (texte encre sur fond encre = bouton illisible). */
.navm > a {
  display: block;
  padding: 1rem var(--gutter);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.navm[hidden] { display: none; }
.navm__cta { padding: 1.1rem var(--gutter) 1.35rem; }

@media (max-width: 899px) {
  .nav { display: none; }
  .burger { display: grid; }
  .head__end .btn { display: none; }
}
@media (min-width: 900px) { .navm { display: none !important; } }

/* ── Hero ────────────────────────────────────────────────────── */
.sec--hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 6vw, 6rem); }

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* 1,14fr : la largeur exacte à laquelle le titre pose 3 lignes pleines
     au lieu de 4 lignes en drapeau. La colonne suit la typo, pas l'inverse. */
  .hero { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); }
}

.hero__copy > * + * { margin-top: clamp(1.1rem, 2vw, 1.6rem); }
.hero__copy > .hero__h1 { margin-top: clamp(1.4rem, 2.5vw, 1.9rem); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.hero__copy > .hero__cta { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

.terms {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.15rem;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--ink-3);
}
.terms li + li { position: relative; padding-left: 1.15rem; }
.terms li + li::before {
  content: "";
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  inline-size: 3px; block-size: 3px;
  border-radius: 50%; background: var(--rule-strong);
}

/* ── Écran de projets ────────────────────────────────────────── */
/* Un poste, pas une mosaïque : les cinq visuels partagent le même cadrage,
   donc ils partagent le même écran. Les touches en dessous sont des
   présélections — l'écran affiche le nom, les touches portent le numéro,
   exactement comme les stations d'un poste de radio. */
.viewer { display: grid; }

.viewer__screen {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--plate-sunk);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: var(--sink);
  overflow: hidden;
}

/* Changement de vue : la sortante remonte et s'efface, l'entrante arrive par
   le bas. Une glissière de projecteur, pas un fondu de diaporama web. */
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  translate: 0 7%;
  scale: 1.015;
  transition: opacity .42s var(--ease),
              translate .55s var(--ease),
              scale .55s var(--ease);
}
.shot.is-on  { opacity: 1; translate: 0 0; scale: 1; z-index: 1; }
.shot.is-out { opacity: 0; translate: 0 -7%; scale: 1.015; z-index: 0; }
.shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Rail de progression : il pilote aussi l'avance. L'animation arrivée à son
   terme déclenche le visuel suivant, si bien que mettre le rail en pause
   (survol, focus) met l'avance en pause elle aussi — une seule horloge. */
.viewer__rail {
  position: relative;
  block-size: 2px;
  background: var(--rule);
  overflow: hidden;
}
.viewer__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  scale: 0 1;
  animation: viewerFill var(--dwell, 5200ms) linear both;
  animation-play-state: paused;
}
.viewer.is-playing .viewer__fill { animation-play-state: running; }
.viewer:hover .viewer__fill,
.viewer:focus-within .viewer__fill { animation-play-state: paused; }
@keyframes viewerFill { from { scale: 0 1; } to { scale: 1 1; } }

.viewer__ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .85rem .9rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  box-shadow: var(--raise);
}
.viewer__label {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
/* Sans script, les touches ne commanderaient rien : on ne les montre pas. */
.viewer__keys { display: none; gap: 6px; }
.js .viewer__keys { display: flex; }

/* Touche de présélection : même pièce physique que les boutons, en réduction.
   Enfoncée = sélectionnée. */
.key {
  inline-size: 46px;
  block-size: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--plate);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  text-shadow: 0 1px 0 oklch(1 0 0 / .9);
  box-shadow: inset 0 1px 0 oklch(1 0 0),
              0 2px 0 oklch(0.80 0.005 265),
              0 3px 5px -2px oklch(0.20 0.01 265 / .22);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease),
              box-shadow .18s var(--ease), translate .18s var(--ease);
}
.key:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 oklch(1 0 0),
              0 3px 0 oklch(0.80 0.005 265),
              0 5px 8px -2px oklch(0.20 0.01 265 / .26); }
.key:active { translate: 0 2px; box-shadow: var(--sink); transition-duration: .07s; }

.key.is-on {
  translate: 0 2px;
  color: var(--accent-ink);
  border-color: var(--accent);
  background: oklch(0.670 0.222 37 / .08);
  text-shadow: none;
  box-shadow: var(--sink), 0 0 0 2px oklch(0.670 0.222 37 / .10);
}

@media (max-width: 420px) {
  .viewer__ctl { justify-content: center; }
  .key { inline-size: 44px; }
}

/* ── Références ──────────────────────────────────────────────── */
.sec--clients {
  padding-block: clamp(2rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--rule);
}
.clients__lead {
  text-align: center;
  font-size: .8125rem;
  color: var(--ink-3);
  margin-bottom: 1.35rem;
}
.clients__lead b { color: var(--ink); font-weight: 600; }

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  background: var(--plate-sunk);
  box-shadow: inset 0 1px 2px oklch(0.20 0.01 265 / .07),
              inset 0 -1px 0 oklch(1 0 0 / .8);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* La bande porte l'animation, pas les listes : elle est décalée d'exactement
   une longueur de liste (--set), si bien que la copie suivante retombe au pixel
   près sur la position de départ. Aucun raccord visible, aucun trou en bout de
   course, quelle que soit la largeur de l'écran. */
.ticker__track {
  display: flex;
  inline-size: max-content;
}
.ticker.is-running .ticker__track {
  animation: ticker var(--dur, 40s) linear infinite;
  will-change: transform;
}
@keyframes ticker {
  from { translate: 0 0; }
  to   { translate: calc(-1 * var(--set, 0px)) 0; }
}

.ticker__row { display: flex; flex: 0 0 auto; }

/* Chaque logo est monté dans une baie de largeur fixe, séparée par une couture :
   la bande lit comme une réglette d'instrument, pas comme une file d'images de
   tailles hasardeuses. */
.ticker__row li {
  flex: 0 0 auto;
  inline-size: clamp(9rem, 12vw, 11rem);
  block-size: 4.75rem;
  display: grid;
  place-items: center;
  padding-inline: 1rem;
  border-right: 1px solid var(--rule);
  box-shadow: 1px 0 0 var(--edge-lit);
}

/* --h porte la hauteur optique propre à chaque marque (voir index.html).
   brightness(0) ramène ensuite tous les logos à une encre unique : un jeu de
   logos hétérogène redevient une seule matière. */
.ticker__row img {
  block-size: var(--h, 28px);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: .46;
  transition: opacity .25s var(--ease);
}
.ticker__name {
  font-size: clamp(.875rem, .82rem + .25vw, 1rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .25s var(--ease);
}

/* Le nom en toutes lettres ne sert que de secours si le fichier manque ou est
   vide (bascule dans script.js). */
.ticker__row li .ticker__name { display: none; }
.ticker__row li.is-textual img { display: none; }
.ticker__row li.is-textual .ticker__name { display: block; }

.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__row li:hover img { opacity: .92; }
.ticker__row li:hover .ticker__name { color: var(--ink); }

/* ── Folds sombres ───────────────────────────────────────────── */
.sec--dark {
  background: var(--dark);
  color: var(--dark-ink);
  /* L'arête où la pièce sombre affleure le fond clair prend la lumière. */
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .10),
              inset 0 -1px 0 oklch(1 0 0 / .06);
  --rail-lit: oklch(1 0 0 / .07);
  --rail: var(--dark-rule);
  --rail-strong: oklch(0.44 0.01 265);
  --focus: oklch(0.99 0 0);
}
.sec--dark .h2 { color: oklch(0.985 0 0); }
.sec--dark .shell > * + * { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.sec--dark .narrow { text-align: center; }
.sec--dark .narrow .lede,
.sec--dark .narrow .prose { margin-inline: auto; }
.sec--dark .narrow .prose { margin-top: 2rem; }

/* ── En-têtes de section ─────────────────────────────────────── */
.sec__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__head .lede { margin-top: 1.1rem; }
.sec__head--center { text-align: center; }
.sec__head--center .h2 { max-width: 28ch; margin-inline: auto; }
.sec__head--center .lede { margin-inline: auto; text-align: center; }

/* ── Effets : un relevé, pas des cartes ──────────────────────── */
/* Cinq lignes sur une seule plaque, séparées par des coutures : la lecture
   d'une plaque signalétique, métrique à gauche et effet à droite. Trois cartes
   à icônes auraient dit « template SaaS » ; un relevé dit « mesure ».
   Largeur bornée comme la FAQ : au-delà, la colonne de droite se vide. */
.releve {
  max-width: 54rem;
  margin-inline: auto;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--raise);
  overflow: hidden;
}

.gain {
  display: grid;
  gap: .4rem clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
.gain:first-child { border-top: 0; }
@media (min-width: 720px) {
  .gain {
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* La courbe est portée par le texte lui-même : sa ligne de base reste celle du
   libellé, donc elle s'aligne sur le titre en vis-à-vis. Le sens de variation
   tient à sa forme, jamais à sa couleur — un daltonien lit la même chose. */
.gain__metric {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--ink-2);
}
.gain__metric::before {
  content: "";
  display: inline-block;
  inline-size: 1.35em; block-size: 1.0125em;   /* le ratio du viewBox, 12 × 9 */
  margin-right: .5rem;
  vertical-align: -.1em;
  background: var(--accent-ink);
  -webkit-mask: var(--trend) center / contain no-repeat;
  mask: var(--trend) center / contain no-repeat;
}
.gain--up   .gain__metric::before { --trend: var(--trend-up); }
.gain--down .gain__metric::before { --trend: var(--trend-down); }

.gain__title {
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.gain__body .prose {
  margin-top: .4rem;
  font-size: .9375rem;
  max-width: 56ch;
}

/* ── Workflow ────────────────────────────────────────────────── */
/* Deux colonnes : l'intitulé reste en vis-à-vis pendant qu'on descend
   le rail. Évite les 500 px de vide à droite d'une simple liste. */
.shell--split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 980px) {
  .shell--split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(3rem, 6vw, 6rem); }
  .sec__head--sticky { position: sticky; top: calc(var(--head-h) + 3rem); align-self: start; }
}
.sec__head--sticky { margin-bottom: 0; }
.sec__head-note { margin-top: 1.75rem; text-wrap: balance; }

.track-wrap { position: relative; }

.track__rail {
  position: absolute;
  left: 19px; top: 20px; bottom: 20px;
  inline-size: 1px;
  background: var(--rule-strong);
  overflow: hidden;
}
.track__fill {
  position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: top;
  scale: 1 var(--p, 0);
  transition: scale .55s var(--ease);
}

.track { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: clamp(1.1rem, 2.5vw, 2rem); }

/* Palier au repos : chiffre gravé dans un logement fraisé.
   Palier atteint : le témoin s'allume — la plaque remonte et s'éclaire. */
.step__n {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  background: var(--plate-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--sink);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-3);
  text-shadow: 0 1px 0 oklch(1 0 0 / .9);
  position: relative; z-index: 1;
  transition: border-color .35s var(--ease), color .35s var(--ease),
              background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.step.is-on .step__n {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--plate);
  text-shadow: none;
  box-shadow: var(--raise), 0 0 0 3px oklch(0.670 0.222 37 / .09);
}
.step__body { padding-top: .25rem; }
.step__body .prose { margin-top: .5rem; max-width: 58ch; }

/* ── Offres : une fascia, trois baies ────────────────────────── */
.fascia {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--raise);
  overflow: hidden;
}
@media (min-width: 880px) { .fascia { grid-template-columns: repeat(3, 1fr); } }

.bayo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.bayo:first-child { border-top: 0; }
@media (min-width: 880px) {
  .bayo { border-top: 0; border-left: 1px solid var(--rule); }
  .bayo:first-child { border-left: 0; }
}

.flag {
  position: absolute; top: 0; right: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .35rem .6rem;
  border-bottom-left-radius: 2px;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .45),
              inset 0 -1px 0 oklch(0 0 0 / .12),
              0 1px 2px oklch(0.20 0.01 265 / .18);
}

.bayo__title {
  font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink);
  padding-right: 6.5rem;
}
.bayo__desc {
  margin-top: .8rem;
  font-size: .9375rem;
  color: var(--ink-2);
  min-height: 4.5em;
}

.checks {
  display: grid;
  gap: .85rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-2);
}
.checks li { position: relative; padding-left: 1.7rem; line-height: 1.45; }
.checks li::before {
  content: "";
  position: absolute;
  left: 1px; top: .3em;
  inline-size: .65rem; block-size: .34rem;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  rotate: -45deg;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .55rem;
  margin-top: auto;
  padding-top: 1.6rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--rule);
}
.price__pre { font-size: .8125rem; color: var(--ink-3); }
.price__n {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}
.price__cur {
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
}
.price__per { font-size: .875rem; color: var(--ink-3); }

/* ── À propos ────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 880px) {
  .about { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}

.about__fig {
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 8px;
  box-shadow: var(--raise);
  max-width: 380px;
}
.about__fig img {
  inline-size: 100%;
  aspect-ratio: 388 / 513;
  object-fit: cover;
  border-radius: 1px;
  background: var(--plate-sunk);
  box-shadow: var(--sink);
}
.about__fig figcaption {
  margin-top: 8px;
  border: 0; background: transparent; padding: .15rem 0;
  display: flex;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq {
  max-width: 48rem;
  margin-inline: auto;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--raise);
}
.qa { border-top: 1px solid var(--rule); }
.qa:first-child { border-top: 0; }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
  gap: 1.5rem;
  padding: 1.35rem clamp(1.1rem, 2.4vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  letter-spacing: -.015em;
  color: var(--ink);
  transition: background-color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: var(--plate-sunk); }

/* Chevron logé dans sa platine : il pointe vers le bas quand le tiroir est
   fermé, pivote d'un demi-tour à l'ouverture. La rotation dit l'état, la
   platine garde la commande physique du reste du site. */
.qa__ctl {
  position: relative;
  flex: 0 0 auto;
  inline-size: 22px; block-size: 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--plate);
  box-shadow: var(--raise);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--press), translate .16s var(--press);
}
.qa summary:active .qa__ctl { translate: 0 1px; box-shadow: var(--sink); }

/* Masque plutôt qu'un chevron en bordures : le tracé reste net à toute taille
   et la couleur se pilote comme n'importe quelle autre encre. */
.qa__ctl::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  inline-size: 11px; block-size: 11px;
  background: var(--ink-2);
  mask: var(--chevron) center / 11px 11px no-repeat;
  -webkit-mask: var(--chevron) center / 11px 11px no-repeat;
  transition: rotate .38s var(--ease), background-color .25s var(--ease);
}

/* Ouvert = platine enfoncée, chevron retourné, témoin orange. */
.qa[open] .qa__ctl {
  border-color: var(--accent);
  background: oklch(0.670 0.222 37 / .08);
  box-shadow: var(--sink), 0 0 0 3px oklch(0.670 0.222 37 / .08);
}
.qa[open] .qa__ctl::before { rotate: 180deg; background: var(--accent-ink); }
.qa summary:hover .qa__ctl { border-color: var(--ink-3); }

.qa__body { padding: 0 clamp(1.1rem, 2.4vw, 1.75rem) 1.5rem; }
.qa__body .prose { font-size: .9375rem; }

.qa::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
}
.qa[open]::details-content { block-size: auto; }

/* ── Contact ─────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
.contact__copy > * + * { margin-top: 1.35rem; }
.contact__copy .btn { margin-top: 2rem; }
.contact .h2 { max-width: 16ch; }

.specs { display: grid; gap: 0; border-top: 1px solid var(--dark-rule); }
.specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--dark-rule);
}
.specs dt {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .02em;
  color: oklch(0.66 0.006 265);
}
.specs dd {
  font-size: .9375rem;
  font-weight: 500;
  color: oklch(0.96 0 0);
  text-align: right;
}

/* ── Pied de page ────────────────────────────────────────────── */
.foot {
  position: relative;
  background: var(--dark);
  color: var(--dark-ink);
  --rail: var(--dark-rule);
  --rail-strong: oklch(0.44 0.01 265);
  --focus: oklch(0.99 0 0);
  padding-block: 2.25rem;
  border-top: 1px solid var(--dark-rule);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .08);
  --rail-lit: oklch(1 0 0 / .07);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
}
.mark--foot { color: oklch(0.98 0 0); margin-right: 0; }
.mark--foot .mark__badge { background: oklch(1 0 0 / .1); }

.foot__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-left: auto; }
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .875rem;
  text-decoration: none;
  color: var(--dark-ink);
  border-bottom: 1px solid oklch(1 0 0 / .2);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__nav a:hover { color: oklch(0.99 0 0); border-color: var(--accent); }

.foot__spec {
  flex-basis: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: oklch(0.62 0.006 265);
  margin-top: .5rem;
}

/* ── Mouvement ───────────────────────────────────────────────── */
/* Les révélations n'existent que si JS a pris la main : sans script,
   ou dans un rendu headless, tout est visible par défaut. */
.js .reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

.js .hero__copy > *,
.js .hero__col {
  opacity: 0;
  translate: 0 14px;
  animation: rise .85s var(--ease) forwards;
}
.js .hero__h1 { animation-name: riseClip; }
.js .hero__copy > *:nth-child(1) { animation-delay: .05s; }
.js .hero__copy > *:nth-child(2) { animation-delay: .12s; }
.js .hero__copy > *:nth-child(3) { animation-delay: .22s; }
.js .hero__copy > *:nth-child(4) { animation-delay: .3s; }
.js .hero__col:nth-child(1) { animation-delay: .24s; }
.js .hero__col:nth-child(2) { animation-delay: .34s; }

@keyframes rise { to { opacity: 1; translate: 0 0; } }
@keyframes riseClip {
  from { clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; translate: 0 0; clip-path: inset(0 0 -10% 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .btn:hover, .qa summary:active .qa__ctl { translate: 0 0; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; translate: 0 0; }
  .js .hero__copy > *, .js .hero__col { opacity: 1; translate: 0 0; }
  /* Sans mouvement, la réglette devient une grille : on retire les coutures,
     qui ne tiendraient plus la ligne une fois les baies passées à la ligne. */
  /* Sans le rail, plus rien ne déclenche l'avance : l'écran reste sur le
     visuel choisi. Surtout pas `animation-duration: .01ms` ici, qui ferait
     défiler les cinq vues en boucle instantanée. */
  .viewer__fill { animation: none !important; scale: 1 1; }
  .viewer__rail { display: none; }
  .shot { transition-duration: .01ms !important; }
  .key:hover, .key:active { translate: 0 0; }
  .key.is-on { translate: 0 2px; }

  .ticker { mask-image: none; overflow: visible; }
  /* Sélecteur aussi spécifique que `.ticker.is-running .ticker__track`, sinon
     l'animation gagnerait : une media query n'ajoute pas de spécificité. */
  .ticker .ticker__track,
  .ticker.is-running .ticker__track { animation: none; translate: 0 0; inline-size: auto; }
  .ticker__row { flex-wrap: wrap; flex: 1 1 auto; justify-content: center; }
  .ticker__row li { border-right: 0; }
  .ticker__row[aria-hidden="true"] { display: none; }
  .track__fill { transition: none; }
}