/* =============================================================
   SUPAPUNK — feuille de style commune
   Langage : celui de Punk 90. Fond noir, une couleur signal,
   grotesque très condensée en très grand, mélange de titres
   pleins et de titres en contour, cartes sombres douces,
   boutons en pilule, surtitres mono encadrés de traits.
   Tout est en 2D. Transform + opacity uniquement.
   ============================================================= */

/* ---------------------------------------------------------------
   01 — JETONS
   --------------------------------------------------------------- */
:root {
  --c-black:  #0A0A0A;
  /* Les blocs se distinguent par des aplats de valeur, pas par des filets.
     Trois niveaux de surface suffisent à structurer toute la page. */
  --c-ash:    #141412;   /* surface 1 */
  --c-ash-2:  #1C1B18;   /* surface 2, survol et blocs imbriqués */
  --c-ash-3:  #232220;   /* surface 3 */
  --c-white:  #FFFFFF;
  --c-mute:   #A3A099;
  --c-line:   rgba(255,255,255,.10);
  --c-line-2: rgba(255,255,255,.18);
  --c-signal: #FBE554;   /* jaune Punk 90 */

  /* rôles, réassignés par thème et par bloc */
  --bg:       var(--c-black);
  --card:     var(--c-ash);
  --card-2:   var(--c-ash-2);
  --card-3:   var(--c-ash-3);
  --ink:      var(--c-white);
  --ink-mute: var(--c-mute);
  --line:     var(--c-line);
  --line-2:   var(--c-line-2);

  --display: 'Saira Extra Condensed', 'Archivo Narrow', 'Oswald', Impact, sans-serif;
  --body:    Arial, Helvetica, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Rayons — un seul endroit à changer.
     Pour repasser tout le site en angles vifs :
     ajouter data-corners="sharp" sur <html>. */
  --r-pill: 999px;
  --r-card: 16px;
  --r-sm:   10px;

  /* gabarit de l'en-tête — l'en-tête et la barre flottante s'y
     réfèrent tous les deux, c'est ce qui les garde alignés. */
  --hdr-pad:  clamp(18px, 2.4vw, 32px);
  --hdr-logo: clamp(48px, 5vw, 74px);

  --gut: clamp(18px, 4vw, 64px);
  --max: 1280px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --fast: 200ms var(--ease);
  --med:  300ms var(--ease);
}

[data-corners="sharp"] { --r-pill: 0px; --r-card: 0px; --r-sm: 0px; }

@media (max-width: 560px) { :root { --hdr-logo: 48px; } }

/* Palette définitive (29/09/2026) : jaune Punk 90 sur noir, repris de punk90.com. */

/* bloc clair, sur papier */
.inv {
  --bg: #EFEBE1; --card: #FFFFFF; --card-2: #F7F5EF; --card-3: #E6E1D4;
  --ink: #0A0A0A; --ink-mute: #5D584D;
  --line: rgba(10,10,10,.12); --line-2: rgba(10,10,10,.22);
}

/* bloc en couleur signal pleine */
.sig {
  --bg: var(--c-signal); --card: rgba(10,10,10,.07); --card-2: rgba(10,10,10,.12); --card-3: rgba(10,10,10,.16);
  --ink: #0A0A0A; --ink-mute: #3A3A2C;
  --line: rgba(10,10,10,.22); --line-2: rgba(10,10,10,.34);
}

/* ---------------------------------------------------------------
   02 — SOCLE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--c-signal); color: #0A0A0A; }
:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 3px; border-radius: var(--r-sm); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-signal); color: #0A0A0A;
  font-family: var(--mono); font-size: 13px; padding: 12px 20px; border-radius: var(--r-pill);
}
.skip-link:focus { left: 12px; top: 12px; }

.grain {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   03 — TYPOGRAPHIE
   Les grands titres, et le mélange plein / contour.
   --------------------------------------------------------------- */
.h-giant, .h-1, .h-2, .h-3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  /* .94 et non .85 : le français est plein d'accents hauts (Ê, É, À)
     qui viennent taper la ligne du dessus en interlignage serré. */
  line-height: .94;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.h-giant { font-size: clamp(3.4rem, 9.4vw, 9rem); }
.h-1     { font-size: clamp(2.6rem, 5.8vw, 5.4rem); }
.h-2     { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.h-3     { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }

/* le mot en couleur signal, au milieu d'un titre plein */
.hl { color: var(--c-signal); }
.sig .hl { color: #0A0A0A; opacity: .55; }

/* le mot en contour : on ne voit que les lignes autour.
   C'est la signature. Il s'utilise en alternance avec le plein. */
.out {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.h-giant .out { -webkit-text-stroke-width: 3px; }
.h-2 .out, .h-3 .out { -webkit-text-stroke-width: 1.5px; }
.out-sig { color: transparent; -webkit-text-stroke: 2px var(--c-signal); }
@media (max-width: 640px) {
  .out, .h-giant .out { -webkit-text-stroke-width: 1.5px; }
}

/* surtitre mono, encadré de deux traits — repris de Punk 90 */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(10px, .95vw, 12px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before { content: "// "; color: var(--c-signal); letter-spacing: 0; }
.eyebrow.is-ruled { color: var(--c-signal); }
.eyebrow.is-ruled::before,
.eyebrow.is-ruled::after {
  content: ""; height: 1px; width: 24px; flex: none;
  background: var(--c-signal); opacity: .7;
}
.eyebrow.is-ruled { justify-content: center; }
.eyebrow.is-ruled .txt::before { content: "// "; color: var(--c-signal); }
/* sur fond jaune : traits et « // » en noir, sans fond derrière le « // » (sinon un pavé noir) */
.sig .eyebrow::before, .sig .eyebrow::after { color: #0A0A0A; }
.sig .eyebrow.is-ruled::before, .sig .eyebrow.is-ruled::after { background: #0A0A0A; }
.sig .eyebrow.is-ruled .txt::before { color: #0A0A0A; background: none; }
.sig .eyebrow.is-ruled, .sig .eyebrow.is-ruled .txt { color: #0A0A0A; } /* sinon jaune sur jaune, invisible */

.lede {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  max-width: 64ch;
  color: var(--ink-mute);
}
.lede strong, .lede b { color: var(--ink); font-weight: 700; }
.body-mute { color: var(--ink-mute); }
.small { font-size: 15px; line-height: 1.6; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

.mark {
  background: var(--c-signal); color: #0A0A0A;
  padding: 0 .2em; border-radius: var(--r-sm);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------
   04 — GRILLE
   --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--gut); }

.section {
  background: var(--bg); color: var(--ink);
  padding-block: clamp(76px, 11vw, 168px);
  position: relative;
}
.section--tight { padding-block: clamp(52px, 7vw, 104px); }
/* une section se distingue par sa valeur de fond, pas par un filet */
.section--ruled { border-top: 1px solid var(--line); }
.section--soft { background: var(--card); }

/* en-tête de section, centré, à la Punk 90 */
.sec-head { text-align: center; max-width: 900px; margin-inline: auto; }
.sec-head .h-1, .sec-head .h-2, .sec-head .h-giant { margin: 20px 0 0; }
.sec-head .lede { margin: 22px auto 0; }

.stack > * + * { margin-top: var(--s, 20px); }
.stack-s { --s: 12px; }
.stack-l { --s: 34px; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

.split {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}
.split--rev > *:first-child { order: 2; }
@media (max-width: 860px) { .split--rev > *:first-child { order: 0; } }

.grid-3 { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.rule { border: 0; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------
   05 — BOUTONS EN PILULE
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--body); font-weight: 700;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 30px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink);
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
  white-space: nowrap;
}
.btn .arw { transition: transform var(--fast); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arw { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-signal); color: #0A0A0A; border-color: var(--c-signal);
  box-shadow: 0 0 0 0 rgba(251,229,84,0);
}
.btn--primary:hover { box-shadow: 0 10px 40px -12px var(--c-signal); }
.sig .btn--primary { background: #0A0A0A; color: var(--c-signal); border-color: #0A0A0A; }

.btn--ghost { border-color: transparent; background: var(--card-2); color: var(--ink); }
.btn--ghost:hover { background: var(--card-3); }
.sig .btn--ghost { background: rgba(10,10,10,.12); }

.btn--sm { padding: 12px 20px; font-size: 12px; }
/* bouton contour, repris de punk90.com : couleur sur le bord seulement, pastille à droite */
.btn--outline { background: transparent; border: 2px solid var(--c-signal); color: var(--c-signal); gap: 10px; }
.btn--outline::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-signal); flex-shrink: 0; }
.btn--outline:hover { background: var(--c-signal); color: #0A0A0A; box-shadow: none; }
.btn--outline:hover::after { background: #0A0A0A; }
.btn--block { width: 100%; }

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

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .cta-row { justify-content: center; }

/* bouton géant, pleine largeur */
.btn-giant {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left;
  padding: clamp(28px, 3.6vw, 52px) clamp(26px, 3.2vw, 56px);
  border: 0;
  border-radius: var(--r-card);
  background: var(--card-2);
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase; line-height: .96; letter-spacing: -.01em;
  font-size: clamp(2rem, 5vw, 4.4rem);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.btn-giant .arw { font-size: .7em; transition: transform var(--med); }
.btn-giant:hover { background: var(--c-signal); color: #0A0A0A; border-color: var(--c-signal); }
.btn-giant:hover .arw { transform: translateX(16px); }

/* ---------------------------------------------------------------
   06 — EN-TÊTE FLOTTANT
   Pas de barre, pas de cadre : le logo et les pilules flottent
   au-dessus du contenu.
   --------------------------------------------------------------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: var(--hdr-pad) var(--gut);
  min-height: calc(var(--hdr-pad) * 2 + var(--hdr-logo));
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 14px; }
/* logo vintage : SVG inline, il prend la couleur du texte courant
   donc il suit les blocs clairs comme les blocs sombres. */
.brand-logo {
  display: block; width: auto; height: var(--hdr-logo);
  color: var(--ink);
}
.brand-logo--footer { height: clamp(46px, 4.8vw, 66px); }
.brand-mark {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3vw, 40px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.01em;
}
.brand-mark .slash { color: var(--c-signal); }
.brand-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 860px) { .brand-sub { display: none; } }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Pages dont le haut est clair (le blog, par exemple) : l'en-tête
   flotte au-dessus d'un fond crème, où l'encre blanche par défaut
   serait tout simplement invisible. */
body.fond-clair .site-header,
body.fond-clair .menu-float { --ink: var(--sp-ink, #17150F); color: var(--sp-ink, #17150F); }
body.fond-clair .brand-sub { color: #5D584D; }

/* commutateur de palette */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  border-radius: var(--r-pill);
  padding: 12px 16px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  transition: color var(--fast), background var(--fast);
}

.theme-toggle:hover { color: var(--ink); background: rgba(255,255,255,.16); }
.theme-toggle .swatch {
  width: 11px; height: 11px; border-radius: var(--r-pill);
  background: var(--c-signal); flex: none;
}

/* ---------------------------------------------------------------
   Bouton menu — pilule signal, deux points qui pivotent,
   « Menu » qui glisse vers le haut pour laisser « Fermer ».
   Repris tel quel de la base Punk 90.
   --------------------------------------------------------------- */
.menu-btn {
  display: inline-flex; align-items: center;
  font-family: var(--body); font-weight: 700;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 24px; line-height: 1;
  border-radius: var(--r-pill);
  background: var(--c-signal); color: var(--c-black);
  border: 2px solid var(--c-signal);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              transform .2s ease, box-shadow .2s ease;
}
.menu-btn-inner { display: inline-flex; align-items: center; gap: 10px; }

/* les deux mots occupent la même cellule : la pilule se dimensionne
   sur le plus large et « Fermer » n'est jamais rogné */
.menu-btn-label {
  position: relative; display: inline-grid;
  grid-template-areas: "stack"; overflow: hidden; line-height: 1.15;
}
.menu-btn-text, .menu-btn-close {
  grid-area: stack; justify-self: center; white-space: nowrap;
  transition: transform .35s cubic-bezier(.4, 0, .1, 1);
}
.menu-btn-close { transform: translate3d(0, 110%, 0); }
.menu-btn.is-open .menu-btn-text { transform: translate3d(0, -110%, 0); }
.menu-btn.is-open .menu-btn-close { transform: translateZ(0); }

.menu-btn .dots { display: inline-flex; gap: 5px; transition: transform .35s cubic-bezier(.4, 0, .1, 1); }
.menu-btn .dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }
.menu-btn:hover .dots, .menu-btn.is-open .dots { transform: rotate(90deg); }

.menu-btn:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 #000; }
.menu-btn.is-open { background: #000; color: var(--c-signal); border-color: #000; }
.menu-btn.is-open:hover { box-shadow: 4px 4px 0 var(--c-signal); }
.menu-btn:focus { outline: none; }
.menu-btn:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 3px; }

/* Le bouton flottant reste accroché en haut quand on scrolle.
   La barre reprend le gabarit de l'en-tête — même retrait, même
   hauteur utile — donc le bouton tombe exactement là où était celui
   de l'en-tête : le relais entre les deux est un fondu sur place. */
.menu-float {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  display: flex; align-items: center; justify-content: flex-end;
  padding: var(--hdr-pad) var(--gut);
  min-height: calc(var(--hdr-pad) * 2 + var(--hdr-logo));
  opacity: 0; transform: translateY(-14px);
  pointer-events: none;   /* la barre ne capte jamais le clic, seul le bouton */
  transition: opacity var(--med), transform var(--med);
}
.menu-float.show { opacity: 1; transform: none; }
.menu-float.show .menu-btn { pointer-events: auto; }
/* Panneau ouvert : le déclencheur repasse au-dessus du voile, mais il ne
   s'affiche pas de force. En haut de page c'est celui de l'en-tête qui
   sert — inutile d'afficher deux « Fermer » décalés. */
.menu-float.panel-open { z-index: 130; }
body.menu-open .site-header { z-index: 130; }

/* ---------------------------------------------------------------
   07 — MENU DÉROULANT
   Panneau ancré en haut à droite, sous les boutons de l'en-tête.
   Fermé : les blocs sont décalés vers le bas, pivotés, invisibles.
   Ouvert : ils remontent à leur place et la rotation s'annule.
   --------------------------------------------------------------- */
.menu-panel {
  /* Calque sur le .punk-menu de punk90.com : aucun overflow, aucun
     max-height. Les trois blocs portent un box-shadow large ; le
     moindre rognage le coupe net au bord du panneau et dessine un
     rectangle gris. Et un overflow-y:auto fait apparaître un ascenseur
     pendant la cascade d'ouverture, le temps que les blocs remontent.
     Le panneau se suspend sous l'en-tête : même gabarit, donc il suit
     la taille du logo au lieu d'un retrait en dur. */
  position: fixed; top: calc(var(--hdr-pad) * 2 + var(--hdr-logo) + 8px);
  right: var(--gut); z-index: 120;
  width: 340px; max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; color: #000;
}
.menu-panel.is-open { pointer-events: auto; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10,10,10,0);
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  pointer-events: none;
  transition: background-color .4s ease, backdrop-filter .4s ease;
}
.menu-backdrop.is-open {
  pointer-events: auto;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* état fermé des trois blocs */
.menu-links, .menu-note, .menu-tag {
  opacity: 0; will-change: transform, opacity;
  transition: transform .5s cubic-bezier(.4, 0, .1, 1),
              opacity   .5s cubic-bezier(.4, 0, .1, 1);
}
.menu-links { transform: translate3d(0, 5.5em, 0) rotate(3.5deg); }
.menu-note  { transform: translate3d(0, 7.5em, 0) rotate(-3.5deg); }
.menu-tag   { transform: translate3d(0, 9.5em, 0) rotate(2.5deg); }

.menu-panel.is-open .menu-links { opacity: 1; transform: translateZ(0); transition-delay: .05s; }
.menu-panel.is-open .menu-note  { opacity: 1; transform: translateZ(0); transition-delay: .1s; }
.menu-panel.is-open .menu-tag   { opacity: 1; transform: translateZ(0); transition-delay: .15s; }

/* bloc des liens */
.menu-links {
  background: var(--c-white); border-radius: 12px; padding: 10px 6px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 2px 0 var(--c-signal);
}
.menu-link {
  position: relative; display: block; padding: 14px 22px; overflow: hidden;
  text-transform: uppercase; color: #000;
  font-family: var(--display); font-weight: 800; letter-spacing: .02em;
  border-radius: var(--r-pill); cursor: pointer;
}
.menu-link-bg {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--c-signal); opacity: 0; transform: scale(.85);
  transition: transform .4s cubic-bezier(.4, 0, .1, 1), opacity .3s ease;
  pointer-events: none;
}
.menu-link-inner { position: relative; overflow: hidden; line-height: 1; display: block; }
.menu-link-text, .menu-link-clone {
  display: inline-block; font-size: 28px; line-height: 1;
  transition: transform .4s cubic-bezier(.4, 0, .1, 1);
}
.menu-link-clone { position: absolute; top: 0; left: 0; transform: translate3d(0, 100%, 0); }

/* Flèche nord-est. Le glyphe ↗ (U+2197) manque à beaucoup de polices
   système : il tombait en fallback et rendait mal, surtout sur mobile.
   En SVG, dimensionnée en em et tracée en currentColor, elle suit la
   taille et la couleur du texte partout, à l'identique. */
.ico-nordest { width: 1em; height: 1em; display: block; flex-shrink: 0; }
.menu-link-arrow {
  position: absolute; top: 50%; right: 0;
  transform: translateY(-50%) scale(0);
  display: inline-flex; align-items: center;
  transition: transform .25s cubic-bezier(.4, 0, .1, 1);
}
@media (hover: hover) {
  .menu-link:hover .menu-link-bg { transform: scale(1); opacity: 1; }
  .menu-link:hover .menu-link-text { transform: translate3d(0, -110%, 0); }
  .menu-link:hover .menu-link-clone { transform: translateZ(0); }
  .menu-link:hover .menu-link-arrow { transform: translateY(-50%) scale(1); transition-delay: .15s; }
}

/* bloc note */
.menu-note {
  background: var(--c-white); border-radius: 12px; padding: 24px 22px; color: #000;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.menu-note .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #666; margin-bottom: 10px;
}
.menu-note h3 {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  line-height: .95; text-transform: uppercase; margin-bottom: 12px; color: #000;
}
.menu-note p { font-size: 14px; line-height: 1.5; color: #57534A; }

/* bloc signature en couleur signal */
.menu-tag {
  display: block; background: var(--c-signal); color: #000;
  border-radius: 12px; padding: 18px 22px; cursor: pointer;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 2px 0 #000;
}
.menu-tag-inner { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; }
.menu-tag-dot {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #000;
  animation: tag-pulse 1.6s ease-in-out infinite;
}
@keyframes tag-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .55; }
}
.menu-tag-texts {
  position: relative; flex: 1; overflow: hidden;
  font-family: var(--display); font-weight: 900; font-size: 24px;
  text-transform: uppercase; line-height: 1;
}
.menu-tag-text, .menu-tag-clone {
  display: inline-block; transition: transform .4s cubic-bezier(.4, 0, .1, 1);
}
.menu-tag-clone { position: absolute; top: 0; left: 0; transform: translate3d(0, 100%, 0); }
.menu-tag-arrow, .menu-tag-arrow2 {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; flex-shrink: 0;
  transition: transform .35s cubic-bezier(.4, 0, .1, 1);
}
.menu-tag-arrow2 { position: absolute; right: 0; top: 50%; transform: translate3d(-1em, 100%, 0) translateY(-50%); }
.menu-tag-note {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: #000; opacity: .65;
}
@media (hover: hover) {
  .menu-tag:hover .menu-tag-text { transform: translate3d(0, -110%, 0); }
  .menu-tag:hover .menu-tag-clone { transform: translateZ(0); }
  .menu-tag:hover .menu-tag-arrow { transform: translate3d(1em, -110%, 0); }
  .menu-tag:hover .menu-tag-arrow2 { transform: translate3d(0, -50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-links, .menu-note, .menu-tag { transition: opacity .2s linear; transform: none !important; }
}
@media (max-width: 760px) {
  .menu-panel { top: 84px; left: var(--gut); right: var(--gut); width: auto; max-width: none; }
}

/* ---------------------------------------------------------------
   08 — MASCOTTE
   --------------------------------------------------------------- */
.mascot {
  position: fixed; bottom: 10px; left: 0; z-index: 80;
  width: clamp(44px, 4.4vw, 62px);
  cursor: pointer;
  transform: translateX(var(--mx, 0px)) scaleX(var(--flip, 1));
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
}
.mascot img { width: 100%; height: auto; }
.mascot[data-state="run"] img { animation: mascot-bob var(--bob, 320ms) steps(2, end) infinite; }
.mascot[data-state="idle"] img { animation: mascot-breathe 2.6s ease-in-out infinite; }
.mascot[data-state="wave"] img { animation: mascot-wave 500ms var(--ease); }
@keyframes mascot-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes mascot-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes mascot-wave { 0% { transform: rotate(0) } 30% { transform: rotate(-14deg) } 60% { transform: rotate(10deg) } 100% { transform: rotate(0) } }

.mascot-bubble {
  position: absolute; bottom: 100%; left: 50%;
  /* la mascotte est retournée par scaleX(--flip) : on retourne la bulle en sens inverse pour garder le texte lisible */
  transform: translate(-50%, -8px) scaleX(var(--flip, 1)); white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--c-signal); color: #0A0A0A;
  padding: 7px 12px; border-radius: var(--r-pill);
  opacity: 0; transition: opacity var(--fast);
}
.mascot.talk .mascot-bubble { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mascot img { animation: none !important; } }
@media (max-width: 560px) { .mascot { width: 40px; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 130;
  height: 3px; width: 0%; background: var(--c-signal);
  transition: width 80ms linear;
}

/* indice de scroll dans le hero */
.scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mute);
}
.scroll-hint .arw { animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }
@media (prefers-reduced-motion: reduce) { .scroll-hint .arw { animation: none; } }

/* ---------------------------------------------------------------
   09 — BANDEAU DÉFILANT
   --------------------------------------------------------------- */
.marquee {
  overflow: hidden; background: var(--card); padding-block: 20px;
  display: grid; gap: 10px;
}
.marquee--sig { background: var(--c-signal); color: #0A0A0A; }
.marquee-track { display: flex; width: max-content; animation: marquee-run var(--dur, 38s) linear infinite; }
.marquee-track.rev { animation-direction: reverse; }
.marquee-track span {
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase; font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.1; letter-spacing: -.005em;
  padding-inline: 26px;
  display: inline-flex; align-items: center; gap: 26px;
}
.marquee-track span::after { content: "/"; color: var(--c-signal); }
.marquee--sig .marquee-track span::after { color: #0A0A0A; opacity: .4; }
/* une ligne sur deux en contour, pour le mélange plein / contour */
.marquee-track.outline span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.marquee-track.outline span::after { -webkit-text-stroke: 0; color: var(--c-signal); }
@keyframes marquee-run { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------------------------------------------------------------
   10 — PIPELINE HORIZONTAL (piloté au scroll)
   --------------------------------------------------------------- */
.pipeline { overflow: hidden; padding-block: clamp(52px, 7vw, 96px); background: var(--bg); }
.pipeline-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 52px); width: max-content; will-change: transform; }
.pipeline-node {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 52px);
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: 1;
  white-space: nowrap;
}
.pipeline-node:nth-child(even) { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.pipeline-node .arw { color: var(--c-signal); -webkit-text-stroke: 0; font-size: .6em; }

/* ---------------------------------------------------------------
   11 — HERO
   Structure reprise de la base Punk 90 : le hero est un cover
   pleine hauteur (fond, fantôme, bande, personnages). Le discours
   — surtitre, USP, chapô, boutons — vient juste après, centré,
   dans le bloc manifeste. Les pieds des personnages débordent sur
   le manifeste pour que le noir fasse office de sol.
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: visible;
  padding: 0 var(--gut);
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse 60% 80% at 50% 115%, #1a1400 0%, var(--c-black) 45%, #000 100%);
}

.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 25%, rgba(0,0,0,.4) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 25%, rgba(0,0,0,.4) 70%, transparent 100%);
}
.hero-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .75;
}

/* fantôme géant en contour derrière le cover */
.hero-ghost {
  position: absolute; z-index: 1; top: 9%; left: 50%;
  transform: translateX(-50%) translate3d(0, var(--gy, 0px), 0);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(180px, 38vw, 640px); line-height: .78; letter-spacing: -.04em;
  text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(251,229,84,.16);
  pointer-events: none; user-select: none; will-change: transform;
}
.hero-ghost .slash { -webkit-text-stroke-color: rgba(251,229,84,.5); }

/* halo au sol, sous les personnages seulement */
.hero-floor {
  position: absolute; z-index: 1; left: 50%; bottom: -6%;
  width: 62%; height: 38%; transform: translateX(-50%);
  pointer-events: none; filter: blur(3px); mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 55% 100% at 50% 100%, rgba(251,229,84,.34), rgba(251,229,84,.1) 40%, transparent 75%),
    radial-gradient(ellipse 28% 75% at 50% 100%, rgba(251,229,84,.62), transparent 70%);
}
/* fine ligne de sol */
.hero-baseline {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(251,229,84,0) 5%,
    rgba(251,229,84,.65) 50%, rgba(251,229,84,0) 95%, transparent 100%);
}

/* métadonnées d'angle, à la manière d'un ours de journal */
.hero-meta {
  position: absolute; z-index: 5;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: #9A968C;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.hero-meta .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-signal);
  box-shadow: 0 0 10px var(--c-signal);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.hero-meta .y { color: var(--c-signal); }
.hero-meta.tl { top: 118px; left: var(--gut); }
.hero-meta.tr { top: 118px; right: var(--gut); }
.hero-meta.bl { left: var(--gut); bottom: 24px; }
.hero-meta.br { right: var(--gut); bottom: 24px; text-align: right; display: block; line-height: 1.6; }
.hero-meta.br .big {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: 42px; color: var(--c-white); line-height: .9; letter-spacing: -.02em;
}
.hero-meta.br .big .y { color: var(--c-signal); }
@media (max-width: 900px) { .hero-meta.bl, .hero-meta.br { display: none; } }
/* mobile : le bouton Diagnostic laisse la place au menu */
@media (max-width: 640px) { .header-actions .btn--outline { display: none; } }
@media (max-width: 900px) { .hero-meta { display: none; } }

/* la bande diagonale */
.hero-tape {
  /* la bande passe sous le titre : les lettres en contour sont creuses,
     le jaune les remplissait et on ne lisait plus rien */
  position: absolute; z-index: 1; top: 68%; left: -15%; right: -15%;
  padding: 10px 0;
  background: var(--c-signal); color: #000;
  transform: translate3d(0, var(--py, 0px), 0) rotate(-6deg);
  will-change: transform; overflow: hidden; pointer-events: none;
  border-top: 2px solid #000; border-bottom: 2px solid #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.hero-tape-track {
  display: flex; white-space: nowrap;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .08em;
  will-change: transform; backface-visibility: hidden;
  animation: tape-scroll 28s linear infinite;
}
.hero-tape-track span { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; }
.hero-tape-track span::after { content: ""; width: 8px; height: 8px; background: #000; transform: skewX(-20deg); flex: none; }
/* boucle au pixel : --tape-shift est posée par le JS (scrollWidth / 2) */
@keyframes tape-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--tape-shift, -50%), 0, 0); }
}
@media (max-width: 640px) { .hero-tape { top: 64%; } .hero-tape-track { font-size: 11px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .hero-tape-track { animation: none; } }

/* le titre gravé, au-dessus des personnages */
.hero-title {
  /* repris de punk90.com : titre en SVG, accents jaunes intégrés */
  position: relative; z-index: 2; margin: 12vh 0 0;
  width: min(1180px, 88vw);
  will-change: transform; transform-style: preserve-3d; perspective: 1200px;
}
.hero-title img, .hero-title .ht-bloc {
  display: block; width: 100%; height: auto;
  will-change: transform; transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.hero-title img { filter: drop-shadow(0 4px 20px rgba(0,0,0,.4)); }
.hero-title .ht-bloc { width: auto; }
@media (max-width: 640px) { .hero-title { margin-top: 20vh; width: 92vw; } }

/* les personnages */
.hero-characters {
  position: relative; z-index: 3;
  width: 100%; max-width: 1200px; height: 64vh;
  margin-top: -8vh; margin-bottom: -14vh;
  pointer-events: none;
}
.hero-characters .char {
  position: absolute; bottom: 0; height: 100%; width: auto;
  display: block; will-change: transform;
}
.hero-characters .char.man   { z-index: 1; left: 50%; height: 70%;  bottom: 4%;  transform: translateX(-82%); }
.hero-characters .char.woman { z-index: 2; left: 50%; height: 100%; bottom: -4%; transform: translateX(-18%); }
@media (max-width: 900px) {
  /* 60vh et pas 46 : le titre a maigri, les personnages peuvent reprendre
     la place — en dessous ils flottaient trop haut dans le vide. */
  .hero-characters { height: 60vh; margin-bottom: -8vh; }
  .hero-characters .char.man   { height: 58%; transform: translateX(-72%); bottom: 2%; }
  .hero-characters .char.woman { height: 88%; transform: translateX(-22%); bottom: -4%; }
}

/* ---------------------------------------------------------------
   11.b — LE MANIFESTE
   Le discours arrive ici, centré, sous le cover.
   --------------------------------------------------------------- */
.manifesto {
  position: relative; z-index: 0;
  background: var(--bg);
  padding: clamp(120px, 16vw, 200px) var(--gut) clamp(90px, 12vw, 150px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 3.4vw, 44px);
}
.manifesto .lede { margin-inline: auto; }
.tagline {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(38px, 6.4vw, 96px); line-height: .98; letter-spacing: -.005em;
  max-width: 1200px; text-wrap: balance;
}
.tagline .hl { color: var(--c-signal); }
.tagline .out { -webkit-text-stroke-width: 2.5px; }

/* ---------------------------------------------------------------
   12 — CARTES
   --------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.8vw, 36px);
  transition: background var(--fast), transform var(--fast);
}
.card:hover { background: var(--card-2); }
.card--sig { background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--c-signal), 0 0 70px -26px var(--c-signal); }
.card--fill { background: var(--c-signal); color: #0A0A0A; }
.card--fill .k, .card--fill .stat { color: #0A0A0A; }
.card--fill p { color: #3A3A2C; }
.card .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-signal);
}
.card h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; margin: 14px 0 12px;
}
.card p { color: var(--ink-mute); font-size: 15px; line-height: 1.6; }

/* grande initiale, comme les cartes P/ U/ N/ K/ de Punk 90 */
.card .glyph {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.2rem, 5vw, 4.6rem); line-height: .9; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.card .glyph em { color: var(--c-signal); font-style: normal; }

.stat {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3rem, 6.4vw, 6rem); line-height: .92; letter-spacing: -.015em;
  color: var(--c-signal);
}

/* ---------------------------------------------------------------
   13 — LE CALCULATEUR ET LE TICKET
   --------------------------------------------------------------- */
.calc {
  border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-controls { padding: clamp(26px, 3vw, 42px); }

.calc-field + .calc-field { margin-top: 26px; }
.calc-field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}
.calc-field .val {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1; color: var(--ink);
}
.calc-field .val.is-after { color: var(--c-signal); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--line-2);
  border-radius: var(--r-pill); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-signal); border: 0; cursor: grab;
  box-shadow: 0 0 0 4px rgba(251,229,84,.18);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: var(--c-signal); cursor: grab;
}

.ticket {
  background: #F5F2EA; color: #0A0A0A;
  font-family: var(--mono);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 32px) 0;
  position: relative;
}
.ticket::after {
  content: ""; display: block; height: 14px; margin-top: 20px;
  background:
    linear-gradient(-45deg, transparent 50%, #F5F2EA 51%) 0 0/14px 14px repeat-x,
    linear-gradient(45deg, transparent 50%, #F5F2EA 51%) 0 0/14px 14px repeat-x;
  transform: translateY(1px);
}
.ticket-head { text-align: center; border-bottom: 1px dashed rgba(10,10,10,.35); padding-bottom: 16px; }
.ticket-head .shop {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1;
}
.ticket-head .meta { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; color: #6A6459; }

.ticket-line {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  font-size: 12.5px; padding: 9px 0;
  border-bottom: 1px dotted rgba(10,10,10,.2);
}
.ticket-line .lbl { text-transform: uppercase; letter-spacing: .05em; }
.ticket-line .a { text-align: right; color: #837C6F; min-width: 5.5ch; }
.ticket-line .b { text-align: right; font-weight: 700; min-width: 6.5ch; }
.ticket-line.is-up .b { background: var(--c-signal); padding: 1px 5px; border-radius: 4px; }

.ticket-total {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  border-top: 2px solid #0A0A0A; margin-top: 14px; padding-top: 16px;
}
.ticket-total .lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.ticket-total .amount {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: .95; letter-spacing: -.015em;
}
.ticket-foot { font-size: 10px; line-height: 1.6; color: #6A6459; padding: 16px 0 0; text-align: center; }
.ticket-barcode {
  height: 40px; margin: 16px 0 4px;
  background: repeating-linear-gradient(90deg, #0A0A0A 0 2px, transparent 2px 4px, #0A0A0A 4px 5px, transparent 5px 9px, #0A0A0A 9px 12px, transparent 12px 14px);
}

.disclaimer {
  display: block;
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  letter-spacing: .02em; color: var(--ink-mute);
  background: var(--card); border-radius: var(--r-sm);
  padding: 14px 18px; max-width: 78ch;
}
.ticket .disclaimer { background: rgba(10,10,10,.06); }
.center .disclaimer { margin-inline: auto; text-align: left; }
.ticket .disclaimer { color: #6A6459; }

/* ---------------------------------------------------------------
   14 — GALERIE DES DÉCRYPTAGES
   --------------------------------------------------------------- */
.gallery {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding-bottom: 20px;
}
/* barre de défilement masquée : les cartes coupées à droite suffisent à signaler le défilement */
.gallery { scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: clamp(16px, 2vw, 26px); width: max-content; padding-inline: var(--gut); }

.decrypt-card {
  scroll-snap-align: start;
  width: clamp(280px, 42vw, 480px);
  border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--fast), background var(--fast);
}
.decrypt-card:hover { transform: translateY(-6px); background: var(--card-2); }
.browser-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--card-3);
}
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.browser-bar .url {
  flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.decrypt-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.decrypt-body .sector { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-signal); }
.decrypt-body h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1;
}
.decrypt-body p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }
.decrypt-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px clamp(20px, 2.4vw, 28px) 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.decrypt-foot .go { color: var(--c-signal); }

/* ---------------------------------------------------------------
   15 — LIGNES NUMÉROTÉES
   --------------------------------------------------------------- */
.lines { display: grid; gap: 10px; }
.line-item {
  display: block; width: 100%; text-align: left;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  transition: background var(--fast);
}
.line-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 2.4vw, 36px);
  align-items: center; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px);
  width: 100%; text-align: left;
}
.line-item .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--c-signal); font-weight: 700; }
.line-item h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -.005em;
}
.line-item .sign { font-family: var(--mono); font-size: 20px; color: var(--ink-mute); transition: transform var(--fast); }
.line-item[aria-expanded="true"] .sign { transform: rotate(45deg); color: var(--c-signal); }
.line-body { display: none; padding: 0 clamp(20px, 2.4vw, 32px) clamp(22px, 2.6vw, 32px); max-width: 74ch; }
.line-item[aria-expanded="true"] .line-body { display: block; }
.line-item[aria-expanded="true"] h3 { color: var(--c-signal); }
.line-item:hover { background: var(--card-2); }
.line-item[aria-expanded="true"] { background: var(--card-2); }
.line-body p { color: var(--ink-mute); }

/* ---------------------------------------------------------------
   16 — POUR QUI / PAS POUR QUI
   --------------------------------------------------------------- */
.forwho { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 760px) { .forwho { grid-template-columns: 1fr; } }
.forwho-col { padding: clamp(26px, 3vw, 42px); border-radius: var(--r-card); background: var(--card); }
.forwho-col--yes { background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--c-signal); }
.forwho-col h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; margin-bottom: 22px;
}
.forwho-col--yes h3 { color: var(--c-signal); }
.forwho-col--no h3 { color: var(--ink-mute); }
.forwho-list { list-style: none; display: grid; gap: 15px; }
.forwho-list li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.55; }
.forwho-list li strong { color: var(--ink); }
.forwho-list li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  font-family: var(--mono); color: var(--c-signal);
}
.forwho-col--no .forwho-list li { color: var(--ink-mute); }
.forwho-col--no .forwho-list li::before { content: "\00d7"; color: var(--ink-mute); }
.sig .forwho-list li::before { color: #0A0A0A; }

/* ---------------------------------------------------------------
   17 — FAQ
   --------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq-item { background: var(--card); border-radius: var(--r-card); overflow: hidden; transition: background var(--fast); }
.faq-item:hover, .faq-item[aria-expanded="true"] { background: var(--card-2); }
.faq-q {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  width: 100%; text-align: left; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 32px);
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.05; letter-spacing: -.005em;
  transition: color var(--fast);
}
.faq-q:hover { color: var(--c-signal); }
.faq-q .sign { font-family: var(--mono); font-size: 20px; color: var(--c-signal); transition: transform var(--fast); }
.faq-item[aria-expanded="true"] .faq-q .sign { transform: rotate(45deg); }
.faq-item[aria-expanded="true"] .faq-q { color: var(--c-signal); }
.faq-a { display: none; padding: 0 clamp(20px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px); max-width: 76ch; }
.faq-item[aria-expanded="true"] .faq-a { display: block; }
.faq-a p { color: var(--ink-mute); }
.faq-a p + p { margin-top: 14px; }

/* ---------------------------------------------------------------
   18 — PIED DE PAGE
   --------------------------------------------------------------- */
.site-footer { background: var(--card); padding-block: clamp(52px, 7vw, 96px) 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(26px, 3vw, 52px); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--c-signal); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a, .footer-col li { font-size: 14px; color: var(--ink-mute); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line);
  /* seul filet conservé du pied de page : il sépare l'ours du reste */
  padding-block: 24px 32px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-mute);
}

/* ---------------------------------------------------------------
   19 — RÉVÉLATION AU SCROLL
   --------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  /* le retard est porté par la transition elle-même, pas par
     transition-delay : sinon il retarderait aussi le survol des
     éléments qui composent leur transition avec celle-ci. */
  --tr-reveal: opacity 400ms var(--ease) var(--tr-retard, 0ms),
               transform 460ms var(--ease) var(--tr-retard, 0ms);
}
.reveal.d1 { --tr-retard: 80ms; }
.reveal.d2 { --tr-retard: 160ms; }
.reveal.d3 { --tr-retard: 240ms; }
.reveal.in { opacity: 1; transform: none; transition: var(--tr-reveal); }
/* transition est une propriété unique : .reveal.in l'écrase en entier.
   Un élément qui est à la fois une entrée révélée et un bouton perdait
   donc l'adoucissement de son survol une fois révélé. On rappelle les
   deux ensemble. */
.card.reveal.in { transition: var(--tr-reveal), background var(--fast); }
.btn-giant.reveal.in { transition: var(--tr-reveal), background var(--fast), color var(--fast), border-color var(--fast); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------
   20 — LE DIAGNOSTIC
   --------------------------------------------------------------- */
.diag-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,.8); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: clamp(0px, 3vw, 32px);
}
.diag-modal.open { display: flex; }

.diag-shell {
  width: min(740px, 100%); height: min(740px, 100%);
  display: flex; flex-direction: column;
  background: var(--c-ash); color: var(--c-white);
  border-radius: var(--r-card); overflow: hidden;
}
.diag-inline .diag-shell { height: min(680px, 78vh); }

.diag-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; background: var(--c-ash-3);
}
.diag-brand { display: flex; align-items: center; gap: 12px; }
.diag-brand img { width: 30px; height: auto; }
.diag-brand span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A3A099; }
.diag-close {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.07); border-radius: var(--r-pill); padding: 10px 16px; color: #A3A099;
}
.diag-close:hover { color: #0A0A0A; background: var(--c-signal); border-color: var(--c-signal); }

.diag-progress { height: 2px; background: var(--c-line); }
.diag-progress-bar { height: 100%; width: 0%; background: var(--c-signal); transition: width var(--med); }
.diag-progress-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #7C776C; padding: 10px 20px;
}

.diag-chat { flex: 1; overflow-y: auto; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.diag-msg { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; max-width: 88%; }
.diag-msg.is-user { grid-template-columns: 1fr auto; margin-left: auto; }
.diag-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #1D1D1A;
  font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: #7C776C;
}
.diag-avatar img { width: 24px; height: auto; }
.diag-bubble {
  background: #1D1D1A; border-radius: var(--r-card);
  padding: 14px 17px; font-size: 15.5px; line-height: 1.55; color: #E8E6E1;
}
.diag-msg.is-user .diag-bubble { background: var(--c-signal); color: #0A0A0A; font-weight: 700; }
.diag-bubble-typing { display: flex; gap: 5px; padding: 16px; }
.diag-bubble-typing span { width: 6px; height: 6px; border-radius: 50%; background: #7C776C; animation: diag-blink 1s infinite; }
.diag-bubble-typing span:nth-child(2) { animation-delay: .16s; }
.diag-bubble-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes diag-blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .diag-bubble-typing span { animation: none; opacity: .6; } }

.diag-input-zone { background: var(--c-ash-2); padding: 18px 20px 22px; }
.diag-options { display: flex; flex-wrap: wrap; gap: 8px; }
.diag-option {
  background: rgba(255,255,255,.06); border-radius: var(--r-pill);
  padding: 13px 20px; font-size: 14px; color: #E8E6E1; text-align: left;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.diag-option:hover, .diag-option.is-selected { background: var(--c-signal); color: #0A0A0A; border-color: var(--c-signal); font-weight: 700; }
.diag-input-row { display: flex; gap: 8px; margin-top: 10px; }
.diag-input {
  flex: 1; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); color: #E8E6E1; padding: 14px 20px; font-size: 14px;
}
.diag-input:focus { outline: 2px solid var(--c-signal); outline-offset: 0; }
.diag-submit {
  border-radius: var(--r-pill); background: var(--c-signal); color: #0A0A0A;
  padding: 13px 22px; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.diag-submit:hover { transform: translateY(-1px); }
.diag-back { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7C776C; margin-bottom: 12px; display: inline-block; }
.diag-back:hover { color: var(--c-signal); }
.diag-error { font-family: var(--mono); font-size: 11px; color: #FF6A5A; margin-top: 8px; }

.diag-summary { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1.5px var(--c-signal); border-radius: var(--r-card); padding: 22px; display: grid; gap: 14px; }
.diag-summary h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--c-signal); }
.diag-summary ul { list-style: none; display: grid; gap: 11px; }
.diag-summary li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: #E8E6E1; }
.diag-summary li::before { content: "→"; position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--c-signal); }
.diag-summary .small { color: #7C776C; }

/* ---------------------------------------------------------------
   21 — APERÇU DE LE BACKSTAGE
   --------------------------------------------------------------- */
.caisse-preview {
  border-radius: var(--r-card);
  background: var(--card); font-family: var(--mono); overflow: hidden;
}
.caisse-preview-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px; background: var(--card-3);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
.caisse-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--bg); padding: 2px; }
@media (max-width: 760px) { .caisse-kpis { grid-template-columns: 1fr 1fr; } }
.kpi { padding: clamp(20px, 2.2vw, 28px); background: var(--card); }
.kpi .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.kpi .v {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; margin-top: 10px;
}
.kpi .v.is-sig { color: var(--c-signal); }
.kpi .d { font-size: 10px; letter-spacing: .08em; color: var(--ink-mute); margin-top: 8px; }

.caisse-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.caisse-table th, .caisse-table td { padding: 14px 20px; text-align: left; }
.caisse-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.025); }
.caisse-table th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; }
.caisse-table td.num, .caisse-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.caisse-table tbody tr:hover { background: rgba(255,255,255,.03); }

.funnel-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 16px; align-items: center; padding: 9px 0; }
@media (max-width: 620px) { .funnel-row { grid-template-columns: 120px 1fr auto; gap: 10px; } }
.funnel-row .step { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.funnel-bar { height: 20px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--c-signal); width: var(--w, 0%); border-radius: var(--r-pill); transition: width 700ms var(--ease); }
.funnel-row .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }

/* ---------------------------------------------------------------
   22 — UTILITAIRES
   --------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.center .tags { justify-content: center; }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 14px; color: var(--ink-mute);
}
.tag--sig { border-color: var(--c-signal); color: var(--c-signal); }

.price-line {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 15px 18px; border-radius: var(--r-sm); font-size: 15px;
}
.price-line:nth-child(odd) { background: var(--card-2); }
.price-line .p { font-family: var(--display); font-weight: 900; font-size: 26px; white-space: nowrap; }
.price-line--head .p { color: var(--c-signal); font-size: 34px; }

.steps-60 { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.step-60 {
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-card); background: var(--card);
  transition: background var(--fast);
}
.step-60:hover { background: var(--card-2); }
.step-60 .when { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-signal); }
.step-60 h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; margin: 14px 0 12px; }
.step-60 p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }

@media print {
  .mascot, .menu-float, .site-header, .grain, .scroll-progress, .diag-modal { display: none !important; }
  html, body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------
   23 — MOBILE
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .site-header { padding: 16px var(--gut); }
  .header-actions .theme-toggle span:not(.swatch) { display: none; }
  .header-actions .theme-toggle { padding: 11px; }
  .header-actions .btn--primary { display: none; }
  .menu-btn { padding: 12px 18px; }

  .menu-panel { top: 76px; left: var(--gut); right: var(--gut); width: auto; max-width: none; }

  .cta-row .btn { width: 100%; }

  .diag-modal { padding: 0; }
  .diag-shell { height: 100%; width: 100%; border-radius: 0; border: 0; }
  .diag-option { width: 100%; }

  .caisse-kpis { grid-template-columns: 1fr 1fr; }
  .funnel-row { grid-template-columns: 1fr; gap: 6px; }
  .funnel-row .n { text-align: left; }

  .footer-bottom { flex-direction: column; gap: 10px; }
}

/* =============================================================
   24 — LES EFFETS AU SCROLL
   Repris de la base Punk 90 / LeadKong : ce sont eux qui font la
   démonstration. On vend des pages qui convertissent, la nôtre
   doit prouver qu'on sait les faire.
   ============================================================= */

/* ---------------------------------------------------------------
   24.2 — LES MOTS QUI S'ÉTIRENT ET S'ÉCRASENT AU SCROLL
   Chaque ligne part d'une déformation différente — l'une haute et
   serrée, l'autre aplatie, la troisième presque juste — et les trois
   se résolvent ensemble pendant que la bande traverse l'écran.
   La bande rogne : au milieu de la course les lignes débordent des
   deux côtés, c'est voulu.
   Les valeurs image par image sont dans le JS (updateBand) ; ici,
   l'état de repos, pour que le titre reste lisible sans JavaScript.
   --------------------------------------------------------------- */
.stretch-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(80px, 11vw, 150px) clamp(28px, 4vw, 52px);
}
.stretch-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2vw, 28px);
  text-align: center; padding-inline: var(--gut);
}
.stretch-title {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: clamp(2px, .4vw, 8px);
}
.stretch-word {
  display: block;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  color: var(--ink); line-height: .78;
  /* nowrap : la ligne ne se coupe jamais, c'est sa taille qui suit la
     largeur de la bande (fitBand), pas l'inverse. */
  white-space: nowrap;
  letter-spacing: var(--sp, -.01em);
  transform: scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  transform-origin: 50% 70%;
  opacity: var(--o, 1);
  will-change: transform, letter-spacing, opacity;
}
.stretch-word.w3 { color: transparent; -webkit-text-stroke: .013em var(--ink); }
.stretch-sub {
  color: var(--ink-mute); font-size: clamp(15px, 1.2vw, 19px);
  max-width: 58ch; line-height: 1.6; margin: clamp(10px, 1.4vw, 20px) 0 0;
}
.stretch-sub strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .stretch-word { transform: none; letter-spacing: -.01em; opacity: 1; }
}

/* ---------------------------------------------------------------
   24.3 — LE SWAP : texte collant à gauche, visuels empilés à droite
   Le texte change quand le visuel correspondant passe au centre.
   --------------------------------------------------------------- */
.swap { position: relative; background: var(--bg); }
.swap-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1560px; margin-inline: auto; padding-inline: var(--gut);
}
.swap-sticky { position: sticky; top: 0; align-self: start; height: 100vh; }
.swap-sticky-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.swap-slide-wrap { position: relative; min-height: 320px; }
.swap-slide {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.swap-slide.active { opacity: 1; transform: none; visibility: visible; }
.swap-slide .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-signal); }
.swap-slide h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: .96;
  letter-spacing: -.008em; margin: 16px 0 18px;
}
.swap-slide p { color: var(--ink-mute); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; max-width: 44ch; }

.swap-stack { display: flex; flex-direction: column; gap: 26vh; padding-block: 34vh; }
.swap-visual {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--card);
  display: grid; place-items: center;
  opacity: .28; transform: scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.swap-visual.is-on { opacity: 1; transform: none; }
.swap-visual img { width: 100%; height: 100%; object-fit: cover; }
.swap-visual .num {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #0A0A0A;
  background: var(--c-signal); padding: 7px 12px; border-radius: var(--r-pill);
}
@media (max-width: 900px) {
  .swap-inner { grid-template-columns: 1fr; }
  .swap-sticky { position: static; height: auto; margin-bottom: 28px; }
  .swap-sticky-inner { position: static; }
  .swap-slide-wrap { min-height: 0; }
  .swap-slide { position: static; opacity: 1; visibility: visible; transform: none; display: none; }
  .swap-slide.active { display: block; }
  .swap-stack { gap: 16px; padding-block: 0; }
  .swap-visual { opacity: 1; transform: none; }
}