/* Hypervisible : jetons de l'application, v3 « Noir » (29/09/2026).
   Copie de brand/tokens.css (même noms, mêmes valeurs ; source : brand/tokens.json), plus une section
   « Application » en fin de fichier : des rôles propres à l'interface, tous dérivés de la même palette.
   C'est la seule source des couleurs, polices, rayons et ombres de site/app/ : les feuilles de l'application
   n'écrivent aucun littéral, les modules qui dessinent (graphiques SVG, mouvement) lisent ces jetons par
   getComputedStyle (js/jetons.js). Chemins de polices relatifs à site/assets/ : les woff2 vivent dans site/fonts/. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ---- Scène : le noir est la page, la lumière est le contenu ---- */
  --noir: #000000;
  --fond: #000000;                       /* page : site, application, rapport, vidéo */
  --fond-2: #0A0A0A;                     /* bande secondaire, pied de page */
  --panneau: #111111;                    /* surface pleine : menus, tiroirs, dialogues */
  --panneau-2: #1A1A1A;                  /* survol d'une surface pleine, toast */
  --panneau-3: #242424;                  /* actif, glissière, bulle */
  --voile-1: rgba(255, 255, 255, 0.04);  /* ligne survolée */
  --voile-2: rgba(255, 255, 255, 0.08);  /* carte, champ, bouton secondaire */
  --voile-3: rgba(255, 255, 255, 0.12);  /* carte survolée, élément actif */
  --voile-4: rgba(255, 255, 255, 0.16);  /* actif appuyé */
  --trait: rgba(255, 255, 255, 0.10);    /* bordure de carte et de champ */
  --trait-fort: rgba(255, 255, 255, 0.18);
  --trait-lumiere: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* arête haute d'une carte : la lumière vient d'en haut */

  /* ---- Encres ---- */
  --encre: #FFFFFF;                      /* 21:1 */
  --encre-2: rgba(255, 255, 255, 0.62);  /* secondaire : 7,8:1 sur noir, 6,9:1 sur une carte */
  --encre-3: rgba(255, 255, 255, 0.48);  /* tertiaire : 4,9:1 sur noir seulement ; jamais du texte sur une carte */
  --encre-inverse: #000000;              /* sur bouton blanc, sur pastille de couleur */

  /* ---- Bleu : un accent, trois rôles ---- */
  --bleu: #1E6FFF;                       /* objets : faisceau, barres, courbe de la marque, curseur */
  --bleu-texte: #5B9BFF;                 /* liens et texte bleu sur noir : 7,6:1 */
  --bleu-profond: #0B4FE0;               /* bouton d'accent, tuile de la marque suivie */
  --bleu-clair: #9CC4FF;                 /* mot d'accent d'un titre, pointe du faisceau */
  --faisceau: linear-gradient(90deg, #1E6FFF 0%, #7DB4FF 55%, rgba(30, 111, 255, 0) 100%);
  --lueur: 0 0 40px rgba(30, 111, 255, 0.35), 0 0 120px rgba(30, 111, 255, 0.16);
  --lueur-forte: 0 0 24px rgba(91, 155, 255, 0.55), 0 0 80px rgba(30, 111, 255, 0.35);

  /* ---- Sens d'un écart (le signe est toujours écrit) ---- */
  --mieux: #2ED47A;      --mieux-fond: rgba(46, 212, 122, 0.12);
  --moins: #FF5A7A;      --moins-fond: rgba(255, 90, 122, 0.12);
  --attention: #FFB020;  --attention-fond: rgba(255, 176, 32, 0.12);
  --stable: rgba(255, 255, 255, 0.62); --stable-fond: rgba(255, 255, 255, 0.08);

  /* ---- Surfaces d'IA : pastille + nom, jamais la teinte seule (ordre fixe, validé daltonisme) ---- */
  --moteur-chatgpt: #10A37F;
  --moteur-ai-overview: #BB891E;
  --moteur-gemini: #8B7CF6;
  --moteur-ai-mode: #E2603C;
  --moteur-perplexity: #1FA3B8;
  --moteur-autre: #8A8A8A;

  /* ---- Typographie : Inter variable (axe optique 14–32 : les titres prennent le dessin « Display ») ---- */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --taille-etiquette: 0.75rem;                                       /* 12 px, Inter 500, casse de phrase */
  --taille-petit: 0.8125rem;                                         /* 13 px */
  --taille-corps: 0.9375rem;                                         /* 15 px */
  --taille-intro: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);        /* 17 à 19 px, encre-2 */
  --taille-h3: 1.125rem;                                             /* 18 px, Inter 500 */
  --taille-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);             /* 28 à 44 px, Inter 500, −0,035 em */
  --taille-h1: clamp(2.25rem, 1.7rem + 2.3vw, 3.375rem);             /* 36 à 54 px, Inter 500, −0,04 em */
  --taille-heros: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);           /* 44 à 76 px, Inter 500, −0,04 em */
  --taille-chiffre: clamp(2.25rem, 1.8rem + 2vw, 3.375rem);          /* 36 à 54 px, tabular-nums */
  --taille-chiffre-principal: clamp(4rem, 2.6rem + 6vw, 8rem);       /* 64 à 128 px : le chiffre principal */

  --graisse-corps: 400;
  --graisse-moyenne: 500;   /* titres, étiquettes, boutons */
  --graisse-forte: 600;     /* logotype, mot fort dans une phrase */

  --interligne-titre: 1.0;
  --interligne-h2: 1.1;
  --interligne-corps: 1.5;
  --interligne-chiffre: 0.95;
  --approche-heros: -0.04em;
  --approche-h2: -0.035em;
  --approche-h3: -0.01em;

  /* ---- Espacements (base 4) ---- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px;
  --esp-12: 48px; --esp-16: 64px; --esp-24: 96px;
  --esp-section: clamp(4rem, 2.5rem + 6vw, 9rem);
  --gouttiere: clamp(16px, 4vw, 40px);
  --largeur-lecture: 64ch;
  --largeur-page: 1200px;

  /* ---- Rayons ---- */
  --rayon-1: 6px;      /* jetons, badges, champs compacts */
  --rayon-2: 8px;      /* boutons, petites cartes, images */
  --rayon-3: 12px;     /* cartes */
  --rayon-4: 16px;     /* panneaux, boîtes de dialogue */
  --rayon-5: 20px;     /* grands cadres d'écran */
  --rayon-pilule: 100px;

  /* ---- Ombres : sur noir, une carte se détache par son bord, pas par son ombre ---- */
  --ombre-flottante: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); /* menus, dialogues */
  --ombre-cadre: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
  --anneau-focus: 0 0 0 2px #000000, 0 0 0 4px var(--bleu-texte);

  /* ---- Boutons ---- */
  --bouton-primaire-fond: #FFFFFF;  --bouton-primaire-encre: #000000;
  --bouton-secondaire-fond: rgba(255, 255, 255, 0.10);
  --bouton-accent-fond: #0B4FE0;    --bouton-accent-encre: #FFFFFF;  /* 6,5:1 ; survol #1E6FFF */
  --bouton-hauteur: 40px;           --bouton-hauteur-compacte: 32px;

  /* ---- Mouvement ---- */
  --duree-rapide: 150ms;
  --duree-normale: 300ms;
  --duree-lente: 600ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Traits ---- */
  --trait-icone: 1.5px;
  --trait-courbe: 2px;

  /* =====================================================================================
     Application : rôles propres à l'interface, dérivés de la palette ci-dessus
     ===================================================================================== */
  --barre-haute-fond: rgba(0, 0, 0, 0.72);            /* barre haute : noir à 72 %, flouté */
  --barre-basse-fond: rgba(17, 17, 17, 0.88);         /* rail replié en barre basse : panneau à 88 %, flouté */
  --voile-fond: rgba(0, 0, 0, 0.72);                  /* derrière un dialogue, autour du projecteur du tutoriel */
  --encre-indice: rgba(255, 255, 255, 0.56);          /* texte indicatif d'un champ : 4,7:1 sur un champ posé sur une carte */
  --bouton-primaire-survol: #E6E6E6;
  --bouton-accent-survol: color-mix(in srgb, var(--bouton-accent-fond) 70%, var(--bleu)); /* 5,8:1 sous le blanc (le bleu pur tomberait à 4,4:1) */
  --selection: rgba(30, 111, 255, 0.35);
  --bleu-voile: rgba(30, 111, 255, 0.18);             /* jeton actif, marque surlignée dans une réponse */
  --bleu-trait: rgba(91, 155, 255, 0.5);              /* bord d'un jeton actif */
  --halo: radial-gradient(closest-side, rgba(30, 111, 255, 0.30), rgba(30, 111, 255, 0.06) 55%, rgba(30, 111, 255, 0) 72%); /* un seul par écran, sous 30 % */
  --faisceau-traversant: linear-gradient(90deg, rgba(30, 111, 255, 0) 0%, #1E6FFF 20%, #9CC4FF 60%, rgba(156, 196, 255, 0) 100%); /* le faisceau qui passe derrière un titre */
  --eclat: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(156, 196, 255, 0.5) 45%, rgba(156, 196, 255, 0) 100%); /* éclat du faisceau sous le pointeur */
  --voile-video: rgba(0, 0, 0, 0.62);                 /* pastille de durée et barre du lecteur, posées sur l'image */
  --lueur-point: 0 0 10px rgba(30, 111, 255, 0.55);   /* une réponse qui vous cite s'allume */
  --lueur-mieux: 0 0 10px rgba(46, 212, 122, 0.5);
  --anneau-projecteur: 0 0 0 2px var(--bleu-texte), 0 0 0 6px rgba(30, 111, 255, 0.25), 0 0 0 9999px rgba(0, 0, 0, 0.72); /* tutoriel */
  --ton-positif: var(--mieux);
  --ton-neutre: var(--encre-3);
  --ton-negatif: var(--moins);
}

/* Thème clair : documents imprimés, e-mails, factures. Jamais pour le site ni l'application. */
:root[data-theme="light"] {
  color-scheme: light;
  --fond: #FFFFFF; --fond-2: #F5F5F5; --panneau: #FFFFFF; --panneau-2: #F5F5F5; --panneau-3: #EBEBEB;
  --voile-1: rgba(0, 0, 0, 0.03); --voile-2: rgba(0, 0, 0, 0.05); --voile-3: rgba(0, 0, 0, 0.08); --voile-4: rgba(0, 0, 0, 0.12);
  --trait: rgba(0, 0, 0, 0.10); --trait-fort: rgba(0, 0, 0, 0.18); --trait-lumiere: none;
  --encre: #000000; --encre-2: rgba(0, 0, 0, 0.62); --encre-3: rgba(0, 0, 0, 0.46); --encre-inverse: #FFFFFF;
  --bleu-texte: #0B4FE0; --lueur: none; --lueur-forte: none;
  --mieux: #0E8A4F; --moins: #D1244A; --attention: #A86400; --stable: rgba(0, 0, 0, 0.62);
  --bouton-primaire-fond: #000000; --bouton-primaire-encre: #FFFFFF; --bouton-secondaire-fond: rgba(0, 0, 0, 0.06);
  --anneau-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #1E6FFF;
}

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