/* Qwifon TV — variables compilees depuis tokens.json le 19/09/2026.
   NE PAS EDITER A LA MAIN : modifier tokens.json et recompiler.
   Themes : <html data-theme="sombre"> (defaut) ou "clair". */

:root, [data-theme="sombre"] {
  --bg: #09090b;
  --surface: #131316;
  --surface2: #1b1b20;
  --text: #fbf8f9;
  --muted: #bdb6be;
  --faint: #7a7480;
  --faint-lisible: #8b8591;
  --line: rgba(251, 248, 249, 0.1);
  --line2: rgba(251, 248, 249, 0.18);
  --bordure-controle: rgba(251, 248, 249, 0.38);
  --accent: #e01a3c;
  --accent-soft: rgba(224, 26, 60, 0.14);
  --accent-texte: #ffc9d2;
  --on-accent: #ffffff;
  --warm: #e0a33c;
  --warm-soft: rgba(224, 163, 60, 0.12);
  --warm-texte: #f2d9a8;
  --ok: #39c77a;
  --ok-soft: rgba(57, 199, 122, 0.08);
  --ok-texte: #bff0d6;
  --porte-cameroun: #b0122e;
  --porte-france: #1d3e8a;
  --porte-afrique: #1f6e4a;
  --porte-sport: #8a6a12;
  --porte-enfants: #6a3e8a;
  --porte-series: #2a5b6e;
  --porte-xl: #8a4a12;
  --logo-rouge: #b0122e;
  --logo-bleu: #1d3e8a;
  --logo-encre: #20202a;
  --logo-vert: #1f6e4a;
  --logo-brique: #8a4a12;
  --logo-violet: #6a3e8a;
  --logo-brun: #6e4b2a;
  --logo-ardoise: #2a4b6e;
  --logo-indigo: #3a2a6e;
  --logo-sarcelle: #2a6e6a;
  --logo-gris: #4a4a52;
  --logo-noir: #111111;
  --on-logo: #ffffff;
  --lecteur-fond: #000000;
  --overlay-voile: rgba(0, 0, 0, 0.85);
  --filigrane: rgba(255, 255, 255, 0.3);
  --lueur-direct: 0 0 10px rgba(224, 26, 60, 0.9);
}
[data-theme="clair"] {
  --bg: #f7f5f6;
  --surface: #ffffff;
  --surface2: #efebee;
  --text: #131316;
  --muted: #6b6472;
  --faint: #746e7a;
  --faint-lisible: #6b6472;
  --line: rgba(19, 19, 22, 0.1);
  --line2: rgba(19, 19, 22, 0.18);
  --bordure-controle: rgba(19, 19, 22, 0.5);
  --accent: #e01a3c;
  --accent-soft: rgba(224, 26, 60, 0.1);
  --accent-texte: #b4122f;
  --on-accent: #ffffff;
  --warm: #9a6a10;
  --warm-soft: rgba(224, 163, 60, 0.16);
  --warm-texte: #7a5210;
  --ok: #1f8a52;
  --ok-soft: rgba(57, 199, 122, 0.12);
  --ok-texte: #1a6b41;

}
:root {
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 20px;
  --r-pill: 999px;
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.t-h1 { font-family: var(--font-sans); font-size: 22px; line-height: 1.5; font-weight: 800; letter-spacing: -0.02em }
.t-h2 { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 700 }
.t-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400 }
.t-sub { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400 }
.t-faint { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400 }
.t-marque { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; font-weight: 800; letter-spacing: -0.02em }
.t-marque-tv { font-family: var(--font-sans); font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: 0.08em }
.t-bouton { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 800; letter-spacing: 0.1em }
.t-bouton-fantome { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 600 }
.t-pastille { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400 }
.t-direct { font-family: var(--font-sans); font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: 0.12em }
.t-tete-liste { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: 0.06em }
.t-chaine { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 600 }
.t-chaine-meta { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400 }
.t-porte-titre { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 700 }
.t-porte-sous { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400 }
.t-code { font-family: var(--font-sans); font-size: 30px; line-height: 1.5; font-weight: 800; letter-spacing: 0.08em }
.t-planche { font-family: var(--font-sans); font-size: 24px; line-height: 1.5; font-weight: 800 }
.t-etape { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 800; letter-spacing: 0.12em }
.t-etape-h4 { font-family: var(--font-sans); font-size: 11px; line-height: 1.5; font-weight: 400; letter-spacing: 0.1em }
.t-etape-p { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; font-weight: 400 }