/* =============================================================
   SUPAPUNK, retour au jaune (11/10/2026). Chargé en dernier, après
   theme-stripe.css et theme-vintage.css, sur tout le site. Les deux
   feuilles précédentes restent en place : elles tiennent la
   structure — blocs arrondis, sections à plat, habillage vintage —
   et celle-ci ne reprend que la couleur. Pour revenir au violet,
   retirer la ligne de chargement dans inc/tete.php, rien d'autre.

   Le jaune vient de go.opalead.com (#FCE118), et avec lui la règle
   qui le rend lisible partout, que le violet n'imposait pas :

     sur la nuit, le jaune écrit ;
     sur la crème, c'est l'encre qui écrit et le jaune passe
     derrière, en aplat — surligneur, pastille, bouton ;
     le bloc plein jaune se lit à l'encre, sans dégradé.

   Deuxième emprunt : le trait d'encre et l'ombre portée nette,
   décalée, sans flou. C'est déjà le geste du bouton menu au survol
   (supapunk.css, .menu-btn:hover) ; on le sort de l'en-tête pour
   le poser sur les boutons, les cartes en avant et les pastilles.
   ============================================================= */

/* ---------------------------------------------------------------
   01 — JETONS
   --------------------------------------------------------------- */
:root {
  --sp-yellow:   #FCE118;   /* le jaune, repris de go.opalead.com */
  --sp-yellow-d: #ECD200;   /* survol, un cran plus cuit */
  --sp-yellow-p: #FFF6B8;   /* jaune pâle, pour les textes secondaires sur la nuit */

  --sp-ink:      #17150F;   /* l'encre : noir chaud, pour écrire sur la crème */
  --sp-night:    #0C0B09;   /* la nuit : fond des sections sombres */
  --sp-night-2:  #060604;   /* la nuit profonde : le pied de page */
  --sp-coal:     #16140F;   /* cartes posées sur la nuit */
  --sp-coal-2:   #1E1B14;
  --sp-coal-3:   #27231A;

  --sp-cream:    #F4EEE2;   /* la crème du vintage, inchangée */
  --sp-cream-2:  #ECE4D4;
  --sp-paper:    #FBF8F1;
  --sp-sand:     #6A6459;   /* texte secondaire sur la crème */
  --sp-ash:      #A8A296;   /* texte secondaire sur la nuit */

  /* le trait et l'ombre nette */
  --sp-trait:    2px;
  --sp-ombre:    5px;
  --sp-ombre-h:  8px;       /* au survol, l'ombre s'allonge */

  /* ---- les jetons Stripe sont réaffectés ----
     Tout le site pointe vers --st-* ; on ne touche pas aux appels,
     on change seulement ce vers quoi ils pointent. Le violet devient
     jaune, le bleu nuit devient noir, le gris bleuté devient crème. */
  --st-navy:      var(--sp-night);
  --st-navy-deep: var(--sp-night-2);
  --st-blurple:   var(--sp-yellow);
  --st-royal:     var(--sp-yellow-d);
  --st-lavender:  var(--sp-yellow);
  --st-violet-l:  var(--sp-yellow);
  --st-slate:     var(--sp-sand);
  --st-mist:      var(--sp-cream-2);

  --c-ash:    var(--sp-coal);
  --c-ash-2:  var(--sp-coal-2);
  --c-ash-3:  var(--sp-coal-3);
  --c-mute:   var(--sp-ash);
  --c-signal: var(--sp-yellow);

  --bg: var(--sp-night); --card: var(--sp-coal); --card-2: var(--sp-coal-2); --card-3: var(--sp-coal-3);
  --ink: #FFFFFF; --ink-mute: var(--sp-ash);

  /* le point et la boucle du logo, dans l'en-tête et au pied */
  --brand-logo-accent: var(--sp-yellow);

  /* le point du P, hérité de theme-vintage.css */
  --vt-lav: var(--sp-yellow);

  /* les dessins du Backstage — voir le chapitre 08 */
  --ill-ink:    var(--sp-ink);
  --ill-line:   var(--sp-ink);
  --ill-deep:   var(--sp-ink);
  --ill-fill:   #E9E1D0;
  --ill-fill-2: #F3EDE1;
  --ill-edge:   #CFC5B0;
  --ill-mid:    #A79D8A;
  --ill-sig:    var(--sp-yellow);
  --ill-paper:  var(--sp-paper);   /* le blanc des bulles, sur la crème */
}

html, body { background: var(--sp-cream); }

::selection { background: var(--sp-yellow); color: var(--sp-ink); }
:focus-visible { outline-color: var(--sp-yellow); }

/* ---------------------------------------------------------------
   02 — LES TROIS CONTEXTES

   a. la nuit      : fond noir, le jaune écrit ;
   b. la crème     : fond clair, l'encre écrit, le jaune remplit ;
   c. le jaune plein : aplat, l'encre écrit.

   Sur la crème on bascule --c-signal vers l'encre : d'un coup,
   les trente endroits de supapunk.css qui écrivent en couleur
   signal deviennent lisibles. Les quelques endroits qui
   *remplissent* en couleur signal sont rattrapés au chapitre 03.
   --------------------------------------------------------------- */

/* a. la nuit */
#preuves, section#funnel, #faq-section,
body.int main > .section:not(.inv):not(.sig) {
  --bg: var(--sp-night); background: var(--sp-night);
  --card: var(--sp-coal); --card-2: var(--sp-coal-2); --card-3: var(--sp-coal-3);
  --c-signal: var(--sp-yellow);
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
}
.section--soft#preuves, .section--soft#funnel, .section--soft#faq-section { background: var(--sp-night); }
#preuves .card, section#funnel .card, #faq-section .card { background: var(--sp-coal); }
.site-footer { background: var(--sp-night-2); }
.loader { background: var(--sp-night-2); }
.loader-count::after { color: var(--sp-yellow); }

/* b. la crème */
.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact,
body.int .inv {
  --bg: var(--sp-cream); --card: var(--sp-paper); --card-2: #F6F1E6; --card-3: #EDE6D8;
  --ink: var(--sp-ink); --ink-mute: var(--sp-sand);
  --line: rgba(23,21,15,.14); --line-2: rgba(23,21,15,.26);
  --c-signal: var(--sp-ink);          /* sur la crème, l'encre écrit */
  --vt-lav: var(--sp-ink);
}
#methode, #backstage { --bg: var(--sp-cream-2); --card: var(--sp-paper); }

/* Le corps d'article du blog : une longue lecture, donc le fond le plus
   clair de la famille — papier plutôt que crème — et des encadrés d'un
   cran plus soutenus pour qu'ils s'en détachent encore. */
body.int .blog-article {
  --bg: var(--sp-paper); --card: #F2ECE0; --card-2: #EDE6D8; --card-3: #E5DCCA;
}
body.int main > .section.inv.is-mist { --bg: var(--sp-cream-2); --card: var(--sp-paper); --card-2: #F6F1E6; --card-3: #EDE6D8; }
.kw-band { --ink: var(--sp-ink); --c-signal: var(--sp-ink); background: var(--sp-cream-2); }

/* c. le jaune plein — à plat, pas de dégradé */
.sig {
  --bg: var(--sp-yellow);
  --card: rgba(23,21,15,.07); --card-2: rgba(23,21,15,.11); --card-3: rgba(23,21,15,.16);
  --ink: var(--sp-ink); --ink-mute: rgba(23,21,15,.68);
  --line: rgba(23,21,15,.22); --line-2: rgba(23,21,15,.34);
  --c-signal: var(--sp-ink);
  background: var(--sp-yellow);
  color: var(--sp-ink);
}
.sig .hl { color: var(--sp-ink); opacity: .38; }
.sig .out { -webkit-text-stroke-color: var(--sp-ink); }
.sig .eyebrow, .sig .eyebrow .txt,
.sig .eyebrow::before, .sig .eyebrow::after,
.sig .eyebrow.is-ruled, .sig .eyebrow.is-ruled .txt, .sig .eyebrow.is-ruled .txt::before { color: var(--sp-ink); }
.sig .eyebrow::before, .sig .eyebrow.is-ruled .txt::before { background: var(--sp-ink); }
.sig .eyebrow.is-ruled::before, .sig .eyebrow.is-ruled::after { background: var(--sp-ink); }
.sig .btn--primary { background: var(--sp-ink); color: var(--sp-yellow); border-color: var(--sp-ink); box-shadow: none; }
.sig .btn--primary:hover { background: var(--sp-ink); color: #fff; box-shadow: var(--sp-ombre-h) var(--sp-ombre-h) 0 rgba(23,21,15,.26); transform: translate(-3px, -3px); }
.sig .btn--ghost { background: rgba(23,21,15,.10); color: var(--sp-ink); }
.sig .btn--primary.vbtn .play { background: var(--sp-ink); }
.sig .btn--primary.vbtn .play::before { border-left-color: var(--sp-yellow); }
.sig .forwho-list li::before { color: var(--sp-ink); }
.promise-list, .promise-note, .promise-note::before, .stretch-sub strong { color: var(--sp-ink); }
.sig .mark { background: var(--sp-ink); color: var(--sp-yellow); }

/* ---------------------------------------------------------------
   03 — SUR LA CRÈME, LE JAUNE REMPLIT
   Les quelques endroits où la couleur signal est un aplat et non
   une écriture : on les repose en jaune, texte à l'encre.
   --------------------------------------------------------------- */
.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv { --sp-fill: var(--sp-yellow); }

:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) :is(
  .mark, .card--fill, .marquee--sig, .ticket-line.is-up .b, .lever b, .lp-mark, .tag--sig.is-fill
) {
  background: var(--sp-fill); color: var(--sp-ink);
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .card--fill :is(.k, .stat, p) { color: var(--sp-ink); }
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .funnel-bar i { background: var(--sp-fill); }
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) input[type="range"]::-webkit-slider-thumb { background: var(--sp-fill); box-shadow: 0 0 0 2px var(--sp-ink); }
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) input[type="range"]::-moz-range-thumb { background: var(--sp-fill); box-shadow: 0 0 0 2px var(--sp-ink); }

/* le point du P, sur la crème : jaune cerclé d'encre, sinon il s'efface.
   Les pseudo-éléments ne peuvent pas entrer dans un :is() — la liste
   reste donc écrite à plat. */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .eyebrow::before,
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .eyebrow.is-ruled .txt::before,
.kw-band .eyebrow::before {
  background: var(--sp-yellow); box-shadow: 0 0 0 1.5px var(--sp-ink);
}
/* les deux traits qui encadrent le surtitre : à l'encre, discrets */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .eyebrow.is-ruled::before,
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .eyebrow.is-ruled::after {
  background: var(--sp-ink); opacity: .45; box-shadow: none;
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .card .glyph em { background: var(--sp-ink); }

/* ---------------------------------------------------------------
   04 — LE SURLIGNEUR
   Le mot d'accent dans un titre. Sur la nuit il s'écrit en jaune ;
   sur la crème il reste à l'encre et le jaune passe derrière, posé
   un peu de travers, bords irréguliers, comme un feutre.
   --------------------------------------------------------------- */
.hl { color: var(--c-signal); }

:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .hl,
.kw-band .hl {
  color: var(--sp-ink);
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 .06em;
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .hl::before,
.kw-band .hl::before {
  content: "";
  position: absolute; z-index: -1;
  inset: .12em -.1em .08em -.08em;
  background: var(--sp-yellow);
  border-radius: 3px 11px 4px 9px;
  transform: rotate(-1.2deg);
}
/* le mot déjà penché par le vintage ne penche pas deux fois :
   c'est le trait de feutre qui prend l'inclinaison */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .hl.vt-tilt-hl { transform: none; }

/* le mot en contour, sur la crème : contour d'encre */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) :is(.out, .out-sig) { -webkit-text-stroke-color: var(--sp-ink); }

/* les grands chiffres : à l'encre, soulignés au feutre */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) :is(.stat, .punk-num) {
  color: var(--sp-ink);
  position: relative; display: inline-block; isolation: isolate;
  /* le trait de feutre se taille sur le chiffre, pas sur la colonne */
  width: fit-content; justify-self: start;
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) :is(.stat, .punk-num)::before {
  content: "";
  position: absolute; z-index: -1;
  left: -.04em; right: -.06em; bottom: .1em; height: .3em;
  background: var(--sp-yellow);
  border-radius: 2px 9px 3px 8px;
  transform: rotate(-1deg);
}
/* sauf celui qui est déjà entouré au marqueur : un seul geste suffit */
#methode .card--sig .punk-num::before { display: none; }
#methode .card--sig .punk-num::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M118 8 C 60 2 10 22 8 52 C 6 84 70 96 120 92 C 170 88 196 66 192 42 C 188 18 150 6 96 12' fill='none' stroke='%23FCE118' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* l'annotation à la main : à l'encre, jamais en jaune */
.vt-anno { color: var(--sp-ink); }
body.int main > .section:not(.inv):not(.sig) .vt-anno,
#preuves .vt-anno, section#funnel .vt-anno { color: var(--sp-yellow); }

/* ---------------------------------------------------------------
   05 — LE TRAIT ET L'OMBRE NETTE
   Le geste du bouton menu, sorti de l'en-tête. Deux variantes :
   sur la crème l'ombre est d'encre, sur la nuit elle est d'un
   jaune très dilué — une encre noire sur du noir ne se verrait pas.
   --------------------------------------------------------------- */

/* le bouton plein : jaune, cerné d'encre, posé sur son ombre */
.btn--primary {
  background: var(--sp-yellow); color: var(--sp-ink);
  border: var(--sp-trait) solid var(--sp-ink);
  box-shadow: var(--sp-ombre) var(--sp-ombre) 0 var(--sp-ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background var(--fast), color var(--fast), border-color var(--fast);
}
.btn--primary:hover {
  background: var(--sp-yellow); color: var(--sp-ink); border-color: var(--sp-ink);
  box-shadow: var(--sp-ombre-h) var(--sp-ombre-h) 0 var(--sp-ink);
  transform: translate(-3px, -3px);
}
.btn--primary:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--sp-ink); }

/* sur la nuit, l'encre disparaîtrait : le trait et l'ombre passent au jaune */
#preuves .btn--primary, section#funnel .btn--primary, #faq-section .btn--primary,
.hero .btn--primary, .site-footer .btn--primary,
body.int main > .section:not(.inv):not(.sig) .btn--primary {
  border-color: var(--sp-yellow);
  box-shadow: var(--sp-ombre) var(--sp-ombre) 0 rgba(252,225,24,.26);
}
#preuves .btn--primary:hover, section#funnel .btn--primary:hover, #faq-section .btn--primary:hover,
.hero .btn--primary:hover, .site-footer .btn--primary:hover,
body.int main > .section:not(.inv):not(.sig) .btn--primary:hover {
  background: var(--sp-yellow); color: var(--sp-ink); border-color: var(--sp-yellow);
  box-shadow: var(--sp-ombre-h) var(--sp-ombre-h) 0 rgba(252,225,24,.26);
}

/* le bouton contour */
.btn--outline { border-color: var(--sp-yellow); color: #fff; }
.btn--outline::after { background: var(--sp-yellow); }
.btn--outline:hover { background: var(--sp-yellow); border-color: var(--sp-yellow); color: var(--sp-ink); }
.btn--outline:hover::after { background: var(--sp-ink); }
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .btn--outline {
  border-color: var(--sp-ink); color: var(--sp-ink);
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .btn--outline::after { background: var(--sp-ink); }
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .btn--outline:hover {
  background: var(--sp-yellow); border-color: var(--sp-ink); color: var(--sp-ink);
  box-shadow: 4px 4px 0 var(--sp-ink); transform: translate(-2px, -2px);
}

/* le bouton géant. Sur la crème il n'avait plus de contour du tout et
   se confondait avec le fond : on le cerne d'encre et on le pose sur
   son ombre, comme les autres boutons. */
.btn-giant:hover, .usecase .btn-giant:hover, .usecase .btn-giant:focus-visible {
  background: var(--sp-yellow); color: var(--sp-ink); border-color: var(--sp-yellow);
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .btn-giant {
  background: var(--sp-paper); color: var(--sp-ink);
  border: var(--sp-trait) solid var(--sp-ink);
  box-shadow: var(--sp-ombre) var(--sp-ombre) 0 var(--sp-ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background var(--fast), color var(--fast);
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) :is(.btn-giant:hover, .btn-giant:focus-visible) {
  background: var(--sp-yellow); color: var(--sp-ink); border-color: var(--sp-ink);
  box-shadow: var(--sp-ombre-h) var(--sp-ombre-h) 0 var(--sp-ink);
  transform: translate(-3px, -3px);
}

/* la carte mise en avant : trait d'encre et ombre nette sur la crème,
   anneau de jaune et halo très court sur la nuit */
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .card--sig {
  background: var(--sp-paper);
  box-shadow: var(--sp-ombre) var(--sp-ombre) 0 var(--sp-ink);
  border: var(--sp-trait) solid var(--sp-ink);
}
:is(.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact, body.int .inv) .forwho-col--yes {
  background: var(--sp-paper);
  box-shadow: var(--sp-ombre) var(--sp-ombre) 0 var(--sp-ink);
  border: var(--sp-trait) solid var(--sp-ink);
}
#preuves .card--sig, section#funnel .card--sig, #faq-section .card--sig,
body.int main > .section:not(.inv):not(.sig) .card--sig {
  background: var(--sp-coal);
  box-shadow: inset 0 0 0 1.5px var(--sp-yellow), 0 24px 60px -34px rgba(252,225,24,.5);
}
section#funnel .card--sig { background: var(--sp-coal); }

/* ---------------------------------------------------------------
   06 — EN-TÊTE, MENU, PASTILLES
   --------------------------------------------------------------- */
.menu-btn {
  background: var(--sp-yellow); color: var(--sp-ink);
  border-color: var(--sp-ink);
  box-shadow: 3px 3px 0 var(--sp-ink);
}
.menu-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sp-ink); }
.menu-btn.is-open { background: var(--sp-ink); color: var(--sp-yellow); border-color: var(--sp-ink); }
.menu-btn.is-open:hover { box-shadow: 6px 6px 0 rgba(252,225,24,.3); }
.menu-tag, .mascot-bubble { background: var(--sp-yellow); color: var(--sp-ink); }
.theme-toggle .swatch { background: var(--sp-yellow); }
.brand-mark .slash { color: var(--sp-yellow); }

/* la pastille mono, reprise de go.opalead.com : fond jaune, trait
   d'encre, petites capitales espacées. Posée sur l'étiquette du
   menu et sur les marqueurs de liste. */
.lever b, .lp-mark {
  background: var(--sp-yellow); color: var(--sp-ink);
  box-shadow: 0 0 0 1.5px var(--sp-ink);
}
.tag--sig { border-color: var(--sp-ink); color: var(--sp-ink); }
#preuves .tag--sig, section#funnel .tag--sig, #faq-section .tag--sig,
body.int main > .section:not(.inv):not(.sig) .tag--sig { border-color: var(--sp-yellow); color: var(--sp-yellow); }

/* ---------------------------------------------------------------
   07 — L'OUVERTURE
   Noir, et un seul halo jaune très retenu au ras du sol. Pas de
   dégradé coloré en travers de l'image.
   --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(ellipse 58% 62% at 50% 118%, rgba(252,225,24,.20), transparent 62%),
    var(--sp-night);
}
.hero-ghost { -webkit-text-stroke-color: rgba(252,225,24,.13); }
.hero-ghost .slash { -webkit-text-stroke-color: rgba(252,225,24,.45); }
.hero-floor {
  background:
    radial-gradient(ellipse 52% 100% at 50% 100%, rgba(252,225,24,.3), transparent 72%),
    radial-gradient(ellipse 24% 70% at 50% 100%, rgba(252,225,24,.5), transparent 74%);
}
.hero-baseline {
  background: linear-gradient(to right, transparent 0%, rgba(252,225,24,0) 6%,
    rgba(252,225,24,.75) 42%, rgba(252,225,24,.6) 62%, rgba(252,225,24,0) 94%, transparent 100%);
}
.hero-meta .y, .hero-meta.br .big .y { color: var(--sp-yellow); }
.hero-meta .live { background: var(--sp-yellow); }
.hero-grid { opacity: .22; }

/* la bande en travers : aplat jaune, texte à l'encre, cernée d'encre */
.hero-tape {
  background: var(--sp-yellow);
  color: var(--sp-ink);
  border-color: var(--sp-ink);
}
.hero-tape-track span::after { background: var(--sp-ink); }

/* L'ouverture des pages internes.
   :first-of-type vise le premier élément de son *type*, pas le premier
   enfant : sur le blog, le corps de l'article est un <article> et se
   trouvait donc visé lui aussi — il héritait du fond de nuit, texte
   sombre sur noir compris. On exclut les sections claires. */
body.int main > .section:first-of-type:not(.inv):not(.sig) {
  background:
    radial-gradient(ellipse 48% 70% at 50% 128%, rgba(252,225,24,.18), transparent 62%),
    var(--sp-night);
}
body.int main > .section:first-of-type:not(.inv):not(.sig) .out { -webkit-text-stroke-color: var(--sp-yellow); }
/* et on repose le fond clair explicitement, pour reprendre la main sur
   la même règle restée dans theme-stripe.css (spécificité égale, cette
   feuille est chargée après). */
body.int main > .section.inv { background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------
   08 — LES DESSINS DU BACKSTAGE
   Les dessins étaient en violet sur blanc. Sur la crème, le violet
   remplacé par du jaune disparaîtrait : on les repasse à l'encre,
   dans l'esprit du logo dessiné à la main, et le jaune revient sur
   une seule pièce par dessin — la barre qui monte, l'anneau qui se
   remplit, la tache. Les valeurs sont des jetons (chapitre 01) :
   une seule ligne à changer pour les reteinter toutes.
   --------------------------------------------------------------- */
/* La barre qui se remplit est la seule pièce jaune : c'est elle qu'on
   doit lire en premier. Un jaune posé à plat sur la piste claire ne se
   verrait pas — il lui faut son trait d'encre, comme aux boutons.
   Tout le reste du dessin est à l'encre : un jaune en filet sur la
   crème (anneaux, courbes, croissant de lune) disparaît. */
#backstage .pin-fig .bar { fill: var(--ill-sig); stroke: var(--ill-ink); stroke-width: 1.5; }

/* Les autres pièces jaunes sont désignées une par une dans le dessin
   (class="ill-sig") : les pastilles d'engagement et le bouton de la pub,
   la lune de la nuit, l'aire et le point d'arrivée de la courbe.
   Toujours cernées d'encre — vector-effect garde le trait à 1,5 px même
   dans les groupes agrandis 2,4×. */
#backstage .pin-fig :is(.ill-sig, .ill-sig *) {
  fill: var(--ill-sig); stroke: var(--ill-ink); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
#backstage .pin-fig .ill-sig-flat { fill: var(--ill-sig); stroke: none; }

/* Ce que dit le client est sur papier blanc, cerné d'encre ; ce que dit
   l'assistant est en encre pleine. Avant, les bulles du client étaient
   de la même valeur que la crème du fond : la moitié de la conversation
   était invisible, et le dessin ne racontait plus rien au premier coup
   d'œil. Blanc contre noir, on lit l'échange tout de suite. */
#backstage .pin-fig .ill-paper {
  fill: var(--ill-paper, #FBF8F1); stroke: var(--ill-ink); stroke-width: 2;
}
#backstage .pin-fig .num { background: var(--sp-ink); color: var(--sp-yellow); }
#backstage .bsw-txt .ex, #backstage .swap-slide .ex { background: var(--sp-paper); border-left-color: var(--sp-ink); }
.pin-dots span.is-on { background: var(--sp-ink); }
.swap-visual .num { background: var(--sp-ink); color: var(--sp-yellow); }

/* la bande de mots-clés */
.kw-item::after { background: var(--sp-ink); }
.kw-row.reverse .kw-item { color: #D6CCB7; }
.kw-row.reverse .kw-item.outline { -webkit-text-stroke-color: #D6CCB7; }
.kw-row.reverse .kw-item::after { background: #D6CCB7; }

/* ---------------------------------------------------------------
   09 — LE DIAGNOSTIC
   Fenêtre claire : papier, encre et jaune. Les réponses choisies
   se remplissent de jaune et se cernent d'encre, comme les
   réponses du quiz de go.opalead.com.
   --------------------------------------------------------------- */
.diag-shell { background: var(--sp-paper); color: var(--sp-ink); }
.diag-top { background: var(--sp-paper); border-bottom: 1px solid #E4DCCB; }
.diag-brand span { color: var(--sp-ink); }
.diag-close { background: #EFE8DA; color: var(--sp-sand); }
.diag-close:hover { background: var(--sp-yellow); color: var(--sp-ink); border-color: var(--sp-ink); }
.diag-progress { background: #E4DCCB; }
.diag-progress-bar { background: var(--sp-yellow); box-shadow: inset 0 0 0 1px rgba(23,21,15,.25); }
.diag-progress-label { color: var(--sp-sand); }
.diag-avatar { color: var(--sp-ink); }
.diag-msg.is-user .diag-avatar { background: var(--sp-ink); color: var(--sp-yellow); }
.diag-bubble { background: #F0E9DB; color: var(--sp-ink); }
.diag-msg.is-user .diag-bubble { background: var(--sp-yellow); color: var(--sp-ink); }
.diag-bubble-typing span { background: var(--sp-sand); }
.diag-input-zone { background: #F7F2E7; border-top: 1px solid #E4DCCB; }
.diag-option { background: var(--sp-paper); color: var(--sp-ink); box-shadow: inset 0 0 0 1.5px #D8CDB7; }
.diag-option:hover, .diag-option.is-selected { background: var(--sp-yellow); color: var(--sp-ink); box-shadow: inset 0 0 0 2px var(--sp-ink); }
.diag-input { background: var(--sp-paper); color: var(--sp-ink); box-shadow: inset 0 0 0 1.5px #D8CDB7; }
.diag-input:focus { outline-color: var(--sp-ink); }
.diag-submit { background: var(--sp-yellow); color: var(--sp-ink); box-shadow: 0 0 0 1.5px var(--sp-ink); }
.diag-submit:hover { background: var(--sp-ink); color: var(--sp-yellow); }
.diag-back { color: var(--sp-sand); }
.diag-back:hover { color: var(--sp-ink); }
.diag-summary { background: var(--sp-paper); box-shadow: 4px 4px 0 var(--sp-ink); border: var(--sp-trait) solid var(--sp-ink); }
.diag-summary h4, .diag-summary li::before { color: var(--sp-ink); }
.diag-summary li { color: var(--sp-ink); }
.diag-summary .small { color: var(--sp-sand); }
.diag-inline .diag-shell { box-shadow: 4px 4px 0 var(--sp-ink); border: var(--sp-trait) solid var(--sp-ink); }

/* ---------------------------------------------------------------
   10 — LE CALCULATEUR, LE TICKET, LES OUTILS
   --------------------------------------------------------------- */
.ticket { background: var(--sp-paper); color: var(--sp-ink); }
.ticket::after {
  background:
    linear-gradient(-45deg, transparent 50%, var(--sp-paper) 51%) 0 0/14px 14px repeat-x,
    linear-gradient(45deg, transparent 50%, var(--sp-paper) 51%) 0 0/14px 14px repeat-x;
}
.ticket-line.is-up .b { background: var(--sp-yellow); color: var(--sp-ink); }
.ticket-total { border-top-color: var(--sp-ink); }
.ticket-head .meta, .ticket-foot, .ticket .disclaimer { color: var(--sp-sand); }
.ticket-line .a { color: #78715F; }
.ticket-barcode { background: repeating-linear-gradient(90deg, var(--sp-ink) 0 2px, transparent 2px 4px, var(--sp-ink) 4px 5px, transparent 5px 9px, var(--sp-ink) 9px 12px, transparent 12px 14px); }
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(252,225,24,.22); }

/* les pages d'outils, sur la nuit : le jaune écrit et remplit */
.ot-res .k, .bc-res .k, .ot-copied, .bc-copied { color: var(--sp-yellow); }
.ot-badge, .bc-badge.is-ok { box-shadow: inset 3px 0 0 var(--sp-yellow); }
.ot-actions .is-main, .bc-actions .is-main { background: var(--sp-yellow); color: var(--sp-ink); }
.ot-bar-m a, .bc-bar-m a { background: var(--sp-yellow); color: var(--sp-ink); }
.bc-net .row b.pos { color: var(--sp-yellow); }
.bc-legend i { border-top-color: var(--sp-yellow); }

/* ---------------------------------------------------------------
   11 — DIVERS
   --------------------------------------------------------------- */
.skip-link { background: var(--sp-yellow); color: var(--sp-ink); }
.marquee--sig { background: var(--sp-yellow); color: var(--sp-ink); }
.card--fill, .diag-msg.is-user .diag-bubble, .pin-fig .num { color: var(--sp-ink); }
.vt-badge { background: var(--sp-ink); color: var(--sp-yellow); }
.vt-badge:hover { background: var(--sp-yellow); color: var(--sp-ink); }
.vbtn .play { background: var(--sp-yellow); }
.vbtn .play::before { border-left-color: var(--sp-ink); }
.btn--primary.vbtn .play { background: var(--sp-ink); }
.btn--primary.vbtn .play::before { border-left-color: var(--sp-yellow); }
.vmodal-chap.is-on { color: var(--sp-yellow); }

/* le grain : un peu moins marqué sur la nuit, il y grisaille */
#preuves .grain, section#funnel .grain { opacity: .06; }