/* ============================================================
   Guiter Ops · tokens.css
   Source unique des variables de conception du design system.
   Chargé par ui/base.html et ui/base_public.html : ne jamais le
   recharger dans un gabarit enfant.
   ============================================================ */

:root {
  /* ---- Palette de marque (design validé « Guiter Ops ») ---- */
  --g-vert-950: #0A2E1B;
  --g-vert-900: #0E3A25;
  --g-vert-800: #12482E;
  --g-vert-600: #1B7A3D;
  --g-vert-100: #E6F3EA;
  --g-orange-500: #F0A028;
  --g-orange-600: #E8890C;
  --g-creme: #FAF7F0;
  --g-blanc: #FFFFFF;
  --g-encre: #1A1A18;
  --g-encre-2: #52514E;
  --g-muet: #898781;
  --g-filet: #E1E0D9;

  /* ---- Code couleur des STATUTS (référentiel unique du CDC).
     Toujours pastille + libellé texte, jamais la couleur seule. ---- */
  --statut-gris: #8A8781;
  --statut-bleu: #2A78D6;
  --statut-jaune: #EDA100;
  --statut-orange: #EB6834;
  --statut-vert: #0CA30C;
  --statut-rouge: #D03B3B;
  --g-rouge-erreur: #D03B3B;

  /* ---- Palette CATÉGORIELLE des séries de graphiques.
     Ordre FIXE, jamais recyclé : série 1 = --serie-1, etc. ---- */
  --serie-1: #2A78D6;
  --serie-2: #1BAF7A;
  --serie-3: #EDA100;
  --serie-4: #008300;
  --serie-5: #4A3AA7;
  --serie-6: #E34948;
  --serie-7: #E87BA4;
  --serie-8: #EB6834;

  /* ---- Chrome graphique (grilles, axes, libellés de ticks) ---- */
  --graphe-grille: var(--g-filet);
  --graphe-axes: var(--g-muet);

  /* ---- Typographie.
     Figtree en repli système : déposer plus tard les fichiers
     woff2 dans static/ui/polices/ et déclarer les @font-face ici
     même (aucune police distante, aucun CDN). ---- */
  --police: "Figtree", "Segoe UI", system-ui, sans-serif;

  /* ---- Rayons ---- */
  --rayon-carte: 16px;
  --rayon-champ: 12px;
  --rayon-bouton: 12px;

  /* ---- Ombres douces ---- */
  --ombre-douce: 0 1px 2px rgba(26, 26, 24, .04), 0 6px 20px rgba(26, 26, 24, .06);
  --ombre-elevee: 0 4px 10px rgba(26, 26, 24, .08), 0 16px 40px rgba(26, 26, 24, .14);
  --ombre-verre: 0 8px 40px rgba(10, 46, 27, .35);

  /* ---- Échelle d'espacement ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* ---- Mouvement (micro-interactions : 150 à 250 ms, ease-out) ---- */
  --t-rapide: 180ms ease-out;
  --t-moyen: 250ms ease-out;

  /* ---- Cibles tactiles (l'usage avec gants est la règle sur site) ---- */
  --cible-min: 48px;

  /* ---- Anneau de focus (orange, visible sur clair comme sur sombre) ---- */
  --anneau-focus: 0 0 0 3px rgba(240, 160, 40, .55);
}

/* Mode sombre : prévu par contrat, non implémenté en v1.
   Les surcharges de variables viendront ici, sans toucher aux
   composants qui ne consomment que des variables. */
[data-theme="sombre"] {
  /* réservé */
}

/* ---- Socle typographique minimal ---- */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* CACHÉ VEUT DIRE CACHÉ · 12/08/2026.

   Le navigateur pose « display: none » sur [hidden] dans SA feuille par
   défaut, la plus faible de toutes : la moindre règle de classe qui dit
   « display » l'emporte. Le dépôt en compte plusieurs (.creer-champ en
   flex, .btn en inline-flex, .expl-ligne en grid…), et une quinzaine
   d'éléments marqués `hidden` portent justement ces classes-là. Ils
   restaient AFFICHÉS · le HTML disait caché, l'écran montrait le
   contraire, et un test qui lit la balise passait au vert devant un
   écran faux.

   Trouvé sur le sélecteur « Engin concerné » du formulaire d'expression
   de besoin, qui doit disparaître quand on demande des ordinateurs. La
   cause n'était pas là : elle est ici, et elle se répare une fois.

   `!important` est nécessaire, pas confortable : sans lui, toute classe
   posant un display rouvrirait la brèche. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--g-encre);
  background: var(--g-creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--esp-3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--g-encre);
}

p {
  margin: 0 0 var(--esp-3);
}

img {
  max-width: 100%;
}

/* Chiffres alignés (colonnes, ticks d'axes, compteurs) */
.chiffres {
  font-variant-numeric: tabular-nums;
  /* UN MONTANT NE SE COUPE JAMAIS · « 8 884 000 » sur deux lignes se lit
     comme deux nombres. Les chiffres sont courts et tiennent sur une ligne ;
     l'espace des milliers ne doit pas servir de point de coupure. */
  white-space: nowrap;
}