/* Hypervisible : jetons des pages publiques (rapport /r/<jeton>, scan gratuit /scan/), direction artistique v3
   « Noir » (29/09/2026). Valeurs = brand/tokens.json ; règles = dossier/02-DIRECTION-ARTISTIQUE.md.
   TOUTE couleur, police, rayon, ombre et durée de ces pages passe par les variables --hv-* ci-dessous :
   le balisage et le JS n'en portent aucune. Le noir est la scène, la lumière est le contenu, le bleu est ce
   qui traverse (faisceau, barres, anneau du score, bouton de scan). */
@font-face{font-family:"Inter Variable";src:url("../fonts/inter-variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* Scène */
  --hv-fond:#000000;
  --hv-fond-2:#0A0A0A;
  --hv-panneau:#111111;
  --hv-panneau-2:#1A1A1A;
  --hv-panneau-3:#242424;
  --hv-voile-1:rgba(255,255,255,.04);
  --hv-voile-2:rgba(255,255,255,.08);
  --hv-voile-3:rgba(255,255,255,.12);
  --hv-voile-4:rgba(255,255,255,.16);
  --hv-voile-entete:rgba(0,0,0,.72);
  --hv-voile-noir:rgba(0,0,0,.6);
  --hv-trait:rgba(255,255,255,.10);
  --hv-trait-fort:rgba(255,255,255,.18);
  --hv-trait-lumiere:inset 0 1px 0 rgba(255,255,255,.08);
  /* Encres (contrastes sur noir : 21, 8,6 et 4,9 pour 1) */
  --hv-encre:#FFFFFF;
  --hv-encre-2:rgba(255,255,255,.62);
  --hv-encre-3:rgba(255,255,255,.48);
  --hv-encre-inverse:#000000;
  /* Bleu : un accent, trois rôles */
  --hv-bleu:#1E6FFF;
  --hv-bleu-texte:#5B9BFF;
  --hv-bleu-profond:#0B4FE0;
  --hv-bleu-clair:#9CC4FF;
  --hv-bleu-fond:rgba(30,111,255,.16);
  --hv-bleu-trait:rgba(91,155,255,.5);
  --hv-faisceau:linear-gradient(90deg,#1E6FFF 0%,#7DB4FF 55%,rgba(30,111,255,0) 100%);
  --hv-faisceau-scene:linear-gradient(90deg,rgba(30,111,255,0) 0%,#1E6FFF 22%,#9CC4FF 58%,rgba(156,196,255,0) 100%);
  --hv-lueur:0 0 40px rgba(30,111,255,.35),0 0 120px rgba(30,111,255,.16);
  --hv-lueur-douce:0 0 12px rgba(30,111,255,.55),0 0 32px rgba(30,111,255,.25);
  --hv-halo:rgba(30,111,255,.26);
  --hv-halo-2:rgba(30,111,255,.08);
  --hv-lueur-anneau:drop-shadow(0 0 10px rgba(30,111,255,.55));
  --hv-surlignage:rgba(30,111,255,.35);
  /* Sens (le signe ou le mot est toujours écrit, la couleur ne fait que souligner) */
  --hv-mieux:#2ED47A;
  --hv-mieux-fond:rgba(46,212,122,.12);
  --hv-mieux-lueur:0 0 10px rgba(46,212,122,.5);
  --hv-moins:#FF5A7A;
  --hv-moins-fond:rgba(255,90,122,.12);
  --hv-attention:#FFB020;
  --hv-attention-fond:rgba(255,176,32,.12);
  --hv-stable:rgba(255,255,255,.62);
  --hv-stable-fond:rgba(255,255,255,.08);
  /* Surfaces d'IA : pastille + nom, jamais la teinte seule (ordre fixe, validé daltonisme) */
  --hv-s-chatgpt:#10A37F;
  --hv-s-ai-overview:#BB891E;
  --hv-s-gemini:#8B7CF6;
  --hv-s-ai-mode:#E2603C;
  --hv-s-perplexity:#1FA3B8;
  --hv-s-autre:#8A8A8A;
  /* Typographie : Inter variable seule, axe optique automatique (les grands corps prennent le dessin Display) */
  --hv-police:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hv-graisse-corps:400;
  --hv-graisse-moyenne:500;
  --hv-graisse-forte:600;
  --hv-taille-etiquette:.75rem;
  --hv-taille-petit:.8125rem;
  --hv-taille-corps:.9375rem;
  --hv-taille-intro:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --hv-taille-h3:1.125rem;
  --hv-taille-h2:clamp(1.75rem,1.35rem + 1.7vw,2.75rem);
  --hv-taille-h1:clamp(2.25rem,1.7rem + 2.3vw,3.375rem);
  --hv-taille-heros:clamp(2.75rem,1.9rem + 3.8vw,4.75rem);
  --hv-taille-chiffre:clamp(2.25rem,1.8rem + 2vw,3.375rem);
  --hv-taille-chiffre-principal:clamp(4rem,2.6rem + 6vw,8rem);
  --hv-taille-score:clamp(5rem,3.6rem + 3.6vw,7rem);
  --hv-approche-heros:-.04em;
  --hv-approche-h2:-.035em;
  --hv-approche-h3:-.01em;
  /* Formes */
  --hv-rayon-1:6px;
  --hv-rayon-2:8px;
  --hv-rayon-3:12px;
  --hv-rayon-4:16px;
  --hv-rayon-5:20px;
  --hv-rayon-pilule:100px;
  --hv-ombre-flottante:0 24px 64px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --hv-ombre-cadre:0 40px 120px -20px rgba(0,0,0,.8);
  --hv-focus:0 0 0 2px #000000,0 0 0 4px #5B9BFF;
  --hv-flou:blur(16px) saturate(1.4);
  --hv-flou-fantome:blur(10px);
  /* Boutons */
  --hv-bouton-primaire-fond:#FFFFFF;
  --hv-bouton-primaire-survol:#E6E6E6;
  --hv-bouton-primaire-encre:#000000;
  --hv-bouton-secondaire-fond:rgba(255,255,255,.10);
  --hv-bouton-secondaire-survol:rgba(255,255,255,.16);
  --hv-bouton-accent-fond:#0B4FE0;
  --hv-bouton-accent-survol:#1E6FFF;
  --hv-bouton-accent-encre:#FFFFFF;
  --hv-bouton-hauteur:40px;
  --hv-bouton-hauteur-compacte:32px;
  /* Mise en page et mouvement */
  --hv-largeur:1200px;
  --hv-gouttiere:clamp(16px,4vw,40px);
  --hv-espace-bloc:clamp(4rem,2.5rem + 6vw,9rem);
  --hv-hauteur-entete:56px;
  --hv-duree-rapide:150ms;
  --hv-duree:300ms;
  --hv-duree-lente:600ms;
  --hv-courbe:cubic-bezier(.2,0,0,1);
  --hv-expo:cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  :root{--hv-duree-rapide:0ms;--hv-duree:0ms;--hv-duree-lente:0ms}
}