/* tokens.css — la charte, à un seul endroit. Direction « Cobalt » : net, corporate, bleu
 * franc — pour du sérieux. Titres en Archivo, texte en Inter.
 *
 * Vocabulaire repris de `se-former-ia-packs/moteur/theme.py` : ground · panel · panel2 ·
 * text · mist · line · accent · accent-ink · accent-bg · on-accent. Ce fichier-là était déjà
 * du DTCG qui s'ignore, et c'est le vocabulaire dans lequel Félix pense. En changer aurait
 * coûté une traduction mentale à chaque lecture, pour zéro gain.
 *
 * Trois couches, dans cet ordre — chacune peut surcharger la précédente, jamais l'inverse :
 *   1. :root                          le clair, toujours défini en entier
 *   2. @media prefers-color-scheme    le sombre par défaut du système
 *   3. [data-theme]                   le choix explicite, qui gagne dans les deux sens
 *   4. [data-product]                 l'identité du produit affiché
 *
 * Aucune couleur ne doit être définie UNIQUEMENT dans une media query : un token qui n'existe
 * qu'en sombre disparaît en clair, et le composant se rend transparent sans prévenir.
 */

/* — polices, RÉELLEMENT chargées —
 * Déclarer une famille sans la charger fait retomber tout le site sur la police système, sans
 * que rien ne le signale : c'est le piège que le contrôle DS006 traque. On les charge donc ici.
 *
 * Servies depuis lane, pas depuis Google : la politique de sécurité n'autorise aucune ressource
 * externe (`default-src 'self'`) — un @import vers fonts.googleapis serait bloqué en silence,
 * soit exactement la panne qu'on veut éviter. Les fichiers sont donc rapatriés dans web/fonts/
 * par `connectors/fonts.py`, comme les icônes le sont déjà par favicons.py, et servis en local.
 *
 * `swap` : le texte s'affiche tout de suite dans la police système puis bascule à l'arrivée du
 * fichier. Sur un back-office consulté debout, un écran blanc le temps du téléchargement serait pire. */
@font-face { font-family: Inter;   font-style: normal; font-weight: 400; font-display: swap;
             src: url("./fonts/inter-400.woff2")   format("woff2"); }
@font-face { font-family: Inter;   font-style: normal; font-weight: 500; font-display: swap;
             src: url("./fonts/inter-500.woff2")   format("woff2"); }
@font-face { font-family: Inter;   font-style: normal; font-weight: 600; font-display: swap;
             src: url("./fonts/inter-600.woff2")   format("woff2"); }
@font-face { font-family: Inter;   font-style: normal; font-weight: 700; font-display: swap;
             src: url("./fonts/inter-700.woff2")   format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-display: swap;
             src: url("./fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 700; font-display: swap;
             src: url("./fonts/archivo-700.woff2") format("woff2"); }

:root {
  /* — surfaces — */
  --ground:      #f5f7fb;
  --panel:       #ffffff;
  --panel2:      #eef2f9;
  --line:        #dfe4ee;

  /* — texte — */
  --text:        #0a0f1e;
  --mist:        #5a6478;

  /* — accent — */
  --accent:      #2563eb;
  --accent-ink:  #1d4ed8;
  --accent-bg:   #e8eefe;
  --on-accent:   #ffffff;

  /* — états — les trois seules couleurs sémantiques, et elles ne servent qu'à ça — */
  --ok:          #16a34a;
  --ok-bg:       #e8f6ed;
  --warn:        #b45309;
  --warn-bg:     #fdf2e2;
  --error:       #dc2626;
  --error-bg:    #fdecec;

  /* — typographie — */
  --font-head: Archivo, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* — échelle d'espacement : une seule suite, pas de valeur au jugé — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgb(15 19 26 / 6%), 0 4px 12px rgb(15 19 26 / 4%);

  /* Voile derrière une feuille de choix. Un token, pas un noir écrit en dur dans la mise en
   * page : « aucune couleur ailleurs que dans la charte » n'admet pas d'exception discrète. */
  --scrim:     rgb(0 0 0 / 45%);

  /* Cible tactile minimale. Tout ce qui se clique doit l'atteindre : le back-office se pilote
   * au pouce, debout, d'une main. C'est un token pour que ce soit vérifiable, pas une intention. */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #080b12;
    --panel:      #111726;
    --panel2:     #182032;
    --line:       #222b3e;
    --text:       #e8ecf5;
    --mist:       #8a93a8;
    --accent:     #6e8bff;
    --accent-ink: #9db0ff;
    --accent-bg:  #141c33;
    --on-accent:  #0a0f1e;
    --ok:         #4ade80;
    --ok-bg:      #10251a;
    --warn:       #fbbf24;
    --warn-bg:    #2a1f0c;
    --error:      #f87171;
    --error-bg:   #2a1414;
    --shadow:     0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 24%);
    --scrim:      rgb(0 0 0 / 60%);
  }
}

/* Le choix explicite gagne dans les DEUX sens : sans ce bloc, un utilisateur en système
 * sombre ne peut pas revenir au clair — le bascule ne marcherait que dans un sens. */
:root[data-theme="dark"] {
  --ground:     #080b12;
  --panel:      #111726;
  --panel2:     #182032;
  --line:       #222b3e;
  --text:       #e8ecf5;
  --mist:       #8a93a8;
  --accent:     #6e8bff;
  --accent-ink: #9db0ff;
  --accent-bg:  #141c33;
  --on-accent:  #0a0f1e;
  --ok:         #4ade80;
  --ok-bg:      #10251a;
  --warn:       #fbbf24;
  --warn-bg:    #2a1f0c;
  --error:      #f87171;
  --error-bg:   #2a1414;
  --shadow:     0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 24%);
  --scrim:      rgb(0 0 0 / 60%);
}

/* — base —
 * Volontairement minuscule. Tout le reste appartient aux composants : une feuille de base
 * qui grossit devient le dépotoir où atterrit ce qu'on ne sait pas ranger. */

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Le fond est peint explicitement : la page est rendue dans des contextes qui n'en
   * fournissent aucun, et un body transparent emprunte celui de l'hôte. */
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
  /* Encoches et barre de gestes : sans ça, le contenu passe dessous sur iPhone. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0; line-height: 1.2; }

button {
  font: inherit;
  /* Sans ça, un appui un peu long sur un bouton textuel sélectionne le texte et ouvre le
     menu « Copier / Chercher / Traduire » du navigateur au lieu de déclencher l'action. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  cursor: pointer;
}

a { color: var(--accent-ink); }

/* Respecte le réglage système. Une animation n'est jamais essentielle ici. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}