/* =============================================================
   SUPAPUNK, essai « vintage » (09/10/2026) : la page rejoint le
   logo dessiné à la main. Chargé après theme-stripe.css, sur
   tout le site. La structure et les couleurs nuit
   et violet ne bougent pas : on change l'habillage.

   - les grandes lettres serrées d'origine, quelques-unes penchées ;
   - DM Sans pour le texte courant, à la place d'Arial ;
   - le point du P remplace les barres obliques et les carrés ;
   - crème à la place du blanc pur, grain un peu plus présent ;
   - quelques annotations écrites à la main sur les dessins.
   ============================================================= */

:root {
  --body: 'DM Sans', Arial, Helvetica, sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;

  --vt-cream:   #F4EEE2;   /* fond clair principal */
  --vt-cream-2: #ECE4D4;   /* fond clair secondaire */
  --vt-paper:   #FBF8F1;   /* cartes posées sur la crème */
  --vt-lav:     #8B85FF;   /* le lavande du logo */
}

html, body { background: var(--vt-cream); }
body { font-size: 17px; }

/* ---------- grain : un peu plus de matière, partout ---------- */
.grain { opacity: .085; mix-blend-mode: multiply; }

/* ---------- les mots d'accent : couleur d'accent, comme avant ;
   les courts penchent légèrement, comme le logo ---------- */
.hl.vt-tilt-hl { display: inline-block; transform: rotate(-2deg); transform-origin: 0 60%; }

/* ---------- le point du P : remplace les « // », les « / » et les carrés ---------- */
.eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: 14px; letter-spacing: .16em;
}
.eyebrow::before, .eyebrow.is-ruled .txt::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vt-lav); margin-right: 10px; vertical-align: .08em;
}
.sig .eyebrow::before, .sig .eyebrow.is-ruled .txt::before { background: #fff; }
.card .glyph em {
  display: inline-block; width: .2em; height: .2em; border-radius: 50%;
  background: var(--vt-lav); overflow: hidden; text-indent: -9em;
  margin-left: .05em; vertical-align: .02em;
}
.kw-item::after { width: .11em; height: .11em; border-radius: 50%; transform: none; background: var(--vt-lav); }
.hero-tape-track span::after { width: 9px; height: 9px; border-radius: 50%; transform: none; background: var(--st-navy-deep); }

/* ---------- fonds clairs : crème au lieu du blanc pur ---------- */
.manifesto, #methode, #backstage, #calculateur, #pour-qui, #contact {
  --bg: var(--vt-cream); --card: var(--vt-paper); --card-2: #F7F2E8; --card-3: #F1EADD;
  --line: rgba(10,37,64,.12); --line-2: rgba(10,37,64,.2);
}
#methode, #backstage { --bg: var(--vt-cream-2); --card: var(--vt-paper); }
#backstage .bsw-txt .ex, #backstage .swap-slide .ex { background: var(--vt-paper); border-left-color: var(--vt-lav); }
.kw-band { background: var(--vt-cream-2); }

/* Pages internes (body.int, posé par tools/build.sh) : theme-stripe y
   pilote les sections claires par body.int .inv, que les règles crème
   ci-dessus ne touchent pas. On reprend donc les mêmes valeurs, à
   spécificité égale — cette feuille étant chargée après, elle gagne. */
body.int .inv {
  --bg: var(--vt-cream); --card: var(--vt-paper); --card-2: #F7F2E8; --card-3: #F1EADD;
  --line: rgba(10,37,64,.12); --line-2: rgba(10,37,64,.2);
}
body.int main > .section.inv.is-mist {
  --bg: var(--vt-cream-2); --card: var(--vt-paper); --card-2: #F7F2E8; --card-3: #F1EADD;
}
.kw-row.reverse .kw-item { color: #D3C8B4; }
.kw-row.reverse .kw-item.outline { -webkit-text-stroke-color: #D3C8B4; }
.kw-row.reverse .kw-item::after { background: #D3C8B4; }

/* le chiffre qui compte, entouré au marqueur */
#methode .card--sig .punk-num { position: relative; display: inline-block; justify-self: start; }
#methode .card--sig .punk-num::after {
  content: ""; position: absolute; inset: -.18em -.34em -.12em -.26em; pointer-events: none;
  background: 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='%23635BFF' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: rotate(-4deg);
}

/* ---------- moins de marqueurs « tech » ---------- */
.hero-grid { opacity: .35; }
.hero-scan { display: none; }

/* ---------- en-tête : le logo un peu plus présent ---------- */
/* Le logo d'en-tête est dimensionné par --hdr-logo (supapunk.css).
   Surtout pas de transform ici : il agrandirait le dessin sans
   agrandir sa boîte, et les pilules de droite ne pourraient plus
   s'aligner dessus. Pour changer sa taille, bouger le jeton. */

/* ---------- hero : le titre d'origine ----------
   Le bloc entier ne penche plus : penché, la première ligne partait de
   travers juste sous le logo et les deux dessins se contrariaient.
   L'inclinaison est maintenant ligne par ligne, dans le SVG lui-même
   (assets/title-stripe-vintage.svg) : première ligne droite, les deux
   suivantes posées de travers. */
.vt-lean { display: block; }

/* ---------- annotations à la main sur les dessins du Backstage ---------- */
.pin-fig { position: relative; }
.vt-anno {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--hand); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1;
  color: var(--st-blurple); white-space: nowrap;
  transform: rotate(-6deg);
  opacity: 0; transition: opacity .6s ease .9s;
}
.pin-fig.is-on .vt-anno, .bsw-mfig .vt-anno { opacity: 1; }
.vt-anno svg { position: absolute; width: 64px; height: 52px; overflow: visible; }
.vt-anno svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- bandeau de la page de test ---------- */
.vt-badge {
  position: fixed; left: 50%; bottom: 16px; z-index: 500; transform: translateX(-50%);
  font-family: var(--body); font-size: 12.5px; font-weight: 700;
  background: var(--st-navy-deep); color: var(--vt-cream);
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(6,27,49,.6);
}
.vt-badge:hover { background: var(--st-blurple); color: #fff; }


/* ---------- footer : le logo en grand, c'est là qu'il rend le mieux ---------- */
.site-footer .brand-logo--footer { height: clamp(64px, 6.4vw, 96px); width: auto; }