/* =============================================================
   SUPAPUNK, palette officielle (03/10/2026) : nuit, violet, blanc,
   dans l'esprit de Stripe. Remplace le jaune Punk 90 sur noir.
   Chargé après supapunk.css et le style de la page, sur toutes
   les pages du site. Mêmes polices, mêmes tailles : seules les
   couleurs et la mise en blocs changent.

   La règle des blocs :
   - fonds foncés : blocs arrondis, posés sur le blanc de la page ;
   - fonds clairs : à plat, pleine largeur, sans carte ni ombre ;
   - bandes de texte qui défilent : d'un bord à l'autre de la page.
   ============================================================= */

/* ---------- jetons ---------- */
:root {
  --st-navy:      #0A2540;   /* bleu nuit */
  --st-navy-deep: #061B31;
  --st-blurple:   #635BFF;   /* violet principal */
  --st-royal:     #3A6FF8;   /* bleu roi, pour les dégradés et les tracés */
  --st-lavender:  #B3AEFF;   /* lavande, petits accents sur fond nuit */
  --st-violet-l:  #8B85FF;   /* violet lisible sur fond nuit */
  --st-slate:     #425466;
  --st-mist:      #F5F7FB;   /* gris bleuté très clair, fond des éléments à plat */

  --blk-gap: clamp(8px, 1.1vw, 16px);
  --blk-r:   clamp(22px, 2.6vw, 40px);

  /* fonds foncés par défaut */
  --c-black:  var(--st-navy);
  --c-ash:    #0F2E4E;
  --c-ash-2:  #14375C;
  --c-ash-3:  #1A416B;
  --c-mute:   #ADBDCC;
  --c-line:   rgba(255,255,255,.12);
  --c-line-2: rgba(255,255,255,.2);
  --c-signal: var(--st-violet-l);

  --bg: var(--st-navy); --card: var(--c-ash); --card-2: var(--c-ash-2); --card-3: var(--c-ash-3);
  --ink: #FFFFFF; --ink-mute: var(--c-mute); --line: var(--c-line); --line-2: var(--c-line-2);
}

html, body { background: #FFFFFF; }

/* ---------- blocs foncés : arrondis, en retrait des bords ---------- */
#preuves, section#funnel, #promesse, #faq-section, .site-footer {
  margin: 0 var(--blk-gap) var(--blk-gap);
  border-radius: var(--blk-r);
  overflow: clip;              /* « clip » et non « hidden » : rien de collant n'est cassé */
}
/* l'accueil reste pleine largeur, collé aux bords, comme l'en-tête */
#preuves { margin-top: var(--blk-gap); }
#preuves, section#funnel, #faq-section { --bg: var(--st-navy); background: var(--st-navy); }
.section--soft#preuves, .section--soft#funnel, .section--soft#faq-section { background: var(--st-navy); }
#preuves .card, section#funnel .card, #faq-section .card { background: var(--c-ash); }
section#funnel .card--sig {
  background: linear-gradient(135deg, #14375C 0%, #1B2F6B 100%);
  box-shadow: inset 0 0 0 1.5px var(--st-violet-l), 0 30px 70px -30px rgba(99,91,255,.55);
}
.site-footer { background: var(--st-navy-deep); }

/* ---------- bandes de texte : d'un bord à l'autre ---------- */
/* la bande de mots-clés, sur fond clair */
.kw-band { --ink: var(--st-navy); background: var(--st-mist); border: 0; }
.kw-item::after { background: var(--st-blurple); }
.kw-row.reverse .kw-track { opacity: 1; }
.kw-row.reverse .kw-item { color: #C9D3E0; }
.kw-row.reverse .kw-item.outline { -webkit-text-stroke-color: #C9D3E0; }
.kw-row.reverse .kw-item::after { background: #C9D3E0; }

/* ---------- fonds clairs : à plat, pleine largeur ---------- */
.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact {
  --bg: #FFFFFF; --card: var(--st-mist); --card-2: #EDF1F7; --card-3: #E3E8EF;
  --ink: var(--st-navy); --ink-mute: var(--st-slate);
  --line: rgba(10,37,64,.10); --line-2: rgba(10,37,64,.18);
  --c-signal: var(--st-blurple);
  background: var(--bg); color: var(--ink);
}
#methode, #backstage { --bg: var(--st-mist); --card: #FFFFFF; }
/* pas de cartes ombrées sur fond clair : des aplats discrets, ou rien */
.manifesto .card, #methode .card, #backstage .card, #calculateur .card, #pour-qui .card, #contact .card {
  box-shadow: none;
}
#methode .card--sig, #calculateur .card--sig, #pour-qui .card--sig {
  box-shadow: inset 0 0 0 1.5px var(--st-blurple);
}

/* ---------- Backstage épinglé : les dessins posés à plat sur le fond ---------- */
#backstage .pin-fig, #backstage .pin-fig svg { background: transparent; }
#backstage .pin-fig svg > rect[fill^="url(#grid"] { display: none; }   /* pas de quadrillage : le dessin est posé sur le fond */
#backstage .pin-stage { box-shadow: none; background: transparent; }
#backstage .pin-fig .num { background: var(--st-navy); color: #fff; }
#backstage .swap-slide .ex { background: #FFFFFF; border-left-color: var(--st-blurple); }
.pin-dots span.is-on { background: var(--st-blurple); }

/* ---------- texte posé sur la couleur d'accent : blanc ---------- */
::selection { background: var(--st-blurple); color: #fff; }
.skip-link, .mark, .card--fill, .marquee--sig, .menu-tag, .mascot-bubble,
.diag-msg.is-user .diag-bubble, .diag-submit, .pin-fig .num { color: #fff; }
.menu-tag, .mascot-bubble { background: var(--st-blurple); }
.diag-close:hover, .diag-option:hover, .diag-option.is-selected { color: #fff; }

/* ---------- boutons ---------- */
.btn--primary { background: var(--st-blurple); border-color: var(--st-blurple); color: #fff; }
.btn--primary:hover { background: var(--st-navy); border-color: var(--st-navy); box-shadow: 0 10px 30px -12px rgba(10,37,64,.55); }
.hero .btn--primary:hover, #preuves .btn--primary:hover, #funnel .btn--primary:hover,
#faq-section .btn--primary:hover {
  background: #fff; border-color: #fff; color: var(--st-navy);
}
.btn--outline { border-color: var(--st-violet-l); color: #fff; }
.btn--outline::after { background: var(--st-lavender); }
.btn--outline:hover { background: var(--st-blurple); border-color: var(--st-blurple); color: #fff; }
.btn-giant:hover, .usecase .btn-giant:hover, .usecase .btn-giant:focus-visible { color: #fff; }

/* bouton vidéo : pastille lecture */
.vbtn .play { background: var(--st-blurple); }
.vbtn .play::before { border-left-color: #fff; }
.btn--primary.vbtn .play { background: #fff; }
.btn--primary.vbtn .play::before { border-left-color: var(--st-blurple); }
.vmodal-chap.is-on { color: #fff; }

/* ---------- en-tête et menu ---------- */
.menu-btn { background: var(--st-blurple); border-color: var(--st-blurple); color: #fff; }
.menu-btn:hover { box-shadow: 0 8px 24px -8px rgba(99,91,255,.7); }
.menu-btn.is-open { background: #fff; color: var(--st-blurple); border-color: #fff; }
.menu-btn.is-open:hover { box-shadow: 0 8px 24px -8px rgba(255,255,255,.5); }

/* ---------- loader ---------- */
.loader { background: var(--st-navy-deep); }
.loader-count::after { color: var(--st-lavender); }

/* ---------- hero : nuit, halo violet ---------- */
.hero {
  background:
    radial-gradient(ellipse 55% 70% at 85% 10%, rgba(99,91,255,.22), transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 115%, #2B2378 0%, var(--st-navy) 48%, var(--st-navy-deep) 100%);
}
.hero-ghost { -webkit-text-stroke-color: rgba(139,133,255,.16); }
.hero-ghost .slash { -webkit-text-stroke-color: rgba(179,174,255,.5); }
.hero-floor {
  background:
    radial-gradient(ellipse 55% 100% at 50% 100%, rgba(99,91,255,.38), rgba(58,111,248,.12) 45%, transparent 75%),
    radial-gradient(ellipse 28% 75% at 50% 100%, rgba(139,133,255,.6), transparent 70%);
}
.hero-baseline {
  background: linear-gradient(to right, transparent 0%, rgba(99,91,255,0) 5%,
    rgba(139,133,255,.75) 40%, rgba(58,111,248,.7) 60%, rgba(58,111,248,0) 95%, transparent 100%);
}
.hero-meta .y, .hero-meta.br .big .y { color: var(--st-lavender); }
.hero-meta .live { background: var(--st-lavender); }
.hero-tape {
  background: linear-gradient(90deg, var(--st-blurple) 0%, #5361FC 50%, var(--st-royal) 100%);
  color: #fff; border-color: var(--st-navy-deep);
}

/* ---------- la promesse : aplat violet, texte blanc ---------- */
.sig {
  --bg: var(--st-blurple);
  --card: rgba(255,255,255,.12); --card-2: rgba(255,255,255,.16); --card-3: rgba(255,255,255,.22);
  --ink: #FFFFFF; --ink-mute: rgba(255,255,255,.82);
  --line: rgba(255,255,255,.28); --line-2: rgba(255,255,255,.4);
  --c-signal: #FFFFFF;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(58,111,248,.45), transparent 60%),
    linear-gradient(135deg, #635BFF 0%, #5A4FF0 55%, #4B3FD6 100%);
  color: #fff;
}
.sig .hl { color: #fff; opacity: .7; }
.sig .eyebrow::before, .sig .eyebrow::after,
.sig .eyebrow.is-ruled, .sig .eyebrow.is-ruled .txt, .sig .eyebrow.is-ruled .txt::before { color: #fff; }
.sig .eyebrow.is-ruled::before, .sig .eyebrow.is-ruled::after { background: #fff; }
.sig .btn--primary { background: var(--st-navy); border-color: var(--st-navy); color: #fff; }
.sig .btn--primary:hover { background: #fff; border-color: #fff; color: var(--st-navy); }
.sig .btn--ghost { background: rgba(255,255,255,.16); color: #fff; }
.sig .forwho-list li::before { color: #fff; }
.sig .btn--primary.vbtn .play { background: #fff; }
.sig .btn--primary.vbtn .play::before { border-left-color: var(--st-navy); }
.promise-list, .promise-note, .promise-note::before, .stretch-sub strong { color: #fff; }

/* ---------- divers ---------- */
:focus-visible { outline-color: var(--st-violet-l); }

/* ---------- le Diagnostic : blanc, violet et noir ---------- */
.diag-modal { background: rgba(10,10,10,.55); }
.diag-shell { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 40px 90px -20px rgba(10,10,10,.45); }
.diag-top { background: #FFFFFF; border-bottom: 1px solid #ECECF1; }
.diag-brand span { color: #0A0A0A; }
.diag-close { background: #F3F3F6; color: #55555F; }
.diag-close:hover { background: var(--st-blurple); color: #fff; }
.diag-progress { background: #ECECF1; }
.diag-progress-bar { background: var(--st-blurple); }
.diag-progress-label { color: #8A8A96; }
/* le robot seul, sans rond, centré sur son propre dessin (il est un peu bas dans l'image) */
.diag-avatar { background: transparent; color: #0A0A0A; width: 40px; height: 40px; position: relative; }
.diag-avatar img { position: absolute; left: 50%; top: 50%; width: 52px; max-width: none; transform: translate(-50%, -52.7%); }
.diag-msg.is-user .diag-avatar { background: #0A0A0A; color: #fff; box-shadow: none; }
.diag-bubble { background: #F3F3F6; color: #0A0A0A; }
.diag-msg.is-user .diag-bubble { background: var(--st-blurple); color: #fff; }
.diag-bubble-typing span { background: #8A8A96; }
.diag-input-zone { background: #FAFAFC; border-top: 1px solid #ECECF1; }
.diag-option { background: #FFFFFF; color: #0A0A0A; box-shadow: inset 0 0 0 1px #E2E2E8; }
.diag-option:hover, .diag-option.is-selected { background: var(--st-blurple); color: #fff; box-shadow: none; }
.diag-input { background: #FFFFFF; color: #0A0A0A; box-shadow: inset 0 0 0 1px #E2E2E8; }
.diag-input:focus { outline-color: var(--st-blurple); }
.diag-submit { background: #0A0A0A; color: #fff; }
.diag-submit:hover { background: var(--st-blurple); }
.diag-back { color: #8A8A96; }
.diag-back:hover { color: var(--st-blurple); }
.diag-summary { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--st-blurple); }
.diag-summary h4, .diag-summary li::before { color: var(--st-blurple); }
.diag-summary li { color: #0A0A0A; }
.diag-summary .small { color: #6B6B76; }

/* =============================================================
   PAGES INTERNES (body.int, posé par tools/build.sh)
   - l'ouverture de page : nuit pleine largeur, halo violet ;
   - sections foncées : blocs nuit arrondis, cartes NOIRES
     (un cran de contraste de plus que sur l'accueil) ;
   - .inv : sections claires, à plat, pleine largeur, sur blanc ;
     .inv.is-mist : la même sur le gris bleuté ;
   - .sig : bloc violet arrondi.
   ============================================================= */
body.int main > .section:not(.inv):not(.sig) {
  --bg: var(--st-navy);
  --card: #0A0A0A; --card-2: #151515; --card-3: #222222;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
  background: var(--st-navy);
}
body.int main > .section {
  margin: 0 var(--blk-gap) var(--blk-gap);
  border-radius: var(--blk-r);
  overflow: clip;
  border-top: 0;
}
/* l'ouverture : comme l'accueil, collée aux bords */
body.int main > .section:first-of-type {
  margin: 0 0 var(--blk-gap); border-radius: 0;
  background:
    radial-gradient(ellipse 50% 80% at 88% 0%, rgba(99,91,255,.24), transparent 60%),
    radial-gradient(ellipse 70% 90% at 25% 125%, #22277A 0%, var(--st-navy) 52%, var(--st-navy-deep) 100%);
}
body.int main > .section:first-of-type .out { -webkit-text-stroke-color: var(--st-lavender); }

/* sections claires */
body.int .inv {
  --bg: #FFFFFF; --card: var(--st-mist); --card-2: #EDF1F7; --card-3: #E3E8EF;
  --ink: var(--st-navy); --ink-mute: var(--st-slate);
  --line: rgba(10,37,64,.10); --line-2: rgba(10,37,64,.18);
  --c-signal: var(--st-blurple);
}
body.int main > .section.inv { margin: 0 0 var(--blk-gap); border-radius: 0; background: var(--bg); color: var(--ink); }
body.int main > .section.inv.is-mist { --bg: var(--st-mist); --card: #FFFFFF; --card-2: #F8FAFC; --card-3: #EDF1F7; }
body.int .inv .card { box-shadow: none; }
body.int .inv .card--sig { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--st-blurple); }
body.int .inv .btn--outline { color: var(--st-navy); border-color: var(--st-blurple); }
body.int .inv .btn--outline:hover { color: #fff; }
body.int .inv .out { -webkit-text-stroke-color: var(--st-navy); }

/* cartes noires sur la nuit : un filet très léger pour tenir le bord */
body.int main > .section:not(.inv):not(.sig) .card { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
body.int main > .section:not(.inv):not(.sig) .card--sig {
  background: #0A0A0A;
  box-shadow: inset 0 0 0 1.5px var(--st-violet-l), 0 30px 70px -30px rgba(99,91,255,.55);
}

/* pastilles posées sur l'accent : texte blanc */
.lever b, .lp-mark { background: var(--st-blurple); color: #fff; }

/* calculateur : curseurs et ticket */
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(99,91,255,.2); }
.ticket { background: #FFFFFF; color: var(--st-navy); }
.ticket::after {
  background:
    linear-gradient(-45deg, transparent 50%, #FFFFFF 51%) 0 0/14px 14px repeat-x,
    linear-gradient(45deg, transparent 50%, #FFFFFF 51%) 0 0/14px 14px repeat-x;
}
.ticket-line.is-up .b { background: var(--st-blurple); color: #fff; }
.ticket-total { border-top-color: var(--st-navy); }
.ticket-head .meta, .ticket-foot, .ticket .disclaimer { color: var(--st-slate); }
.ticket-line .a { color: #7F93AB; }
.ticket-barcode { background: repeating-linear-gradient(90deg, var(--st-navy) 0 2px, transparent 2px 4px, var(--st-navy) 4px 5px, transparent 5px 9px, var(--st-navy) 9px 12px, transparent 12px 14px); }
.swap-visual .num { color: #fff; background: var(--st-blurple); }
/* le Diagnostic posé dans la page, sur fond clair : à plat, un filet */
.diag-inline .diag-shell { box-shadow: 0 0 0 1px #E2E2E8; }