/* ==========================================================================
   Fondations : jetons de couleur, typographie, espacement, primitives.
   Aucune police distante : le site doit fonctionner hors ligne, en file://.

   Deux registres cohabitent volontairement.
   — Le décor est celui de l'archive : papier vieilli, encre ferro-gallique,
     lumière basse du Nord. Il porte la lecture, jamais la donnée.
   — Les couleurs de données viennent d'une palette catégorielle validée
     (écart ΔE ≥ 8 sous protanopie et deutéranopie entre teintes voisines,
     ≥ 15 en vision normale). Elles ne sont jamais choisies à l'œil.
   Ratios de contraste indiqués en commentaire pour chaque couple critique.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Plans et surfaces --------------------------------------------- */
  --plan:            #f2eee4;   /* fond de page, papier légèrement bruni */
  --surface:         #fbf8f2;   /* cartes et panneaux — surface de référence */
  --surface-2:       #f6f1e7;   /* strate secondaire, entêtes de tableau */
  --surface-3:       #ece5d6;   /* zones enfoncées, pistes de curseur */
  --surface-inverse: #17150f;
  --voile:           rgba(24, 21, 15, .48);

  /* --- Encres ---------------------------------------------------------- */
  --encre:           #1a1712;   /* 16.86:1 sur --surface */
  --encre-2:         #57503f;   /*  7.55:1 sur --surface */
  --encre-3:         #756c5a;   /*  4.80:1 sur --surface */
  --encre-muette:    #8b8272;   /*  3.58:1 — graduations et axes seulement */
  --encre-inverse:   #f7f3e9;

  /* --- Traits ---------------------------------------------------------- */
  --trait:           rgba(26, 23, 18, .12);
  --trait-fort:      rgba(26, 23, 18, .22);
  --grille:          #e4ddcd;   /* filet de graphique, un ton au-dessus du fond */
  --ligne-base:      #cfc6b1;

  /* --- Accent : l'encre bleu-noir des registres ------------------------ */
  --accent:          #1c5cab;   /*  6.25:1 sur --surface */
  --accent-doux:     #e3edfb;
  --accent-encre:    #123f79;

  /* --- États (toujours accompagnés d'un mot, jamais seuls) ------------- */
  --bon:             #006300;   /*  7.11:1 */
  --attention:       #fab219;
  --serieux:         #ec835a;
  --critique:        #d03b3b;   /*  4.53:1 */

  /* --- Confiance : rampe ordinale d'une seule teinte -------------------
     La certitude est une grandeur ordonnée, pas une catégorie : la teinte
     reste identique et seule la clarté varie, du plus pâle au plus dense.
     Rampe validée (clarté monotone, écart ΔL ≥ 0,06, extrémité claire à
     2,36:1 sur la surface). « Contredit » sort de la rampe : ce n'est pas
     une certitude plus faible mais une contradiction, donc un état. */
  --confiance-etabli:     #1c5cab;
  --confiance-probable:   #2a78d6;
  --confiance-possible:   #6da7ec;
  --confiance-contredit:  #d03b3b;
  --confiance-non_evalue: #a9a08c;

  /* --- Branches : palette catégorielle validée -------------------------
     Ordre figé, jamais recyclé au-delà de huit. Trois teintes claires
     passent sous 3:1 de contraste : partout où elles servent, le nom de
     la branche est écrit — la couleur ne porte jamais seule le sens. */
  --branche-1: #2a78d6;
  --branche-2: #eb6834;
  --branche-3: #1baf7a;
  --branche-4: #eda100;
  --branche-5: #e87ba4;
  --branche-6: #008300;
  --branche-7: #4a3aa7;
  --branche-8: #e34948;
  --branche-autre: #898781;

  /* --- Séquentiel : magnitude, une seule teinte, clair → foncé --------- */
  --densite-0: #e8f0fc;
  --densite-1: #cde2fb;
  --densite-2: #9ec5f4;
  --densite-3: #5598e7;
  --densite-4: #2a78d6;
  --densite-5: #184f95;
  --densite-min: #e8f0fc;
  --densite-max: #184f95;

  /* --- Sexe : distinction discrète, doublée d'un pictogramme ---------- */
  --sexe-m: #4a3aa7;
  --sexe-f: #b8447e;
  --sexe-inconnu: #898781;

  /* --- Typographie ----------------------------------------------------
     Uniquement des polices système. Un empattement pour la lecture longue
     des récits, une linéale pour l'interface et tous les chiffres. */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-lecture: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --police-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   .6875rem;   /* 11px — graduations, mentions */
  --t-sm:   .8125rem;   /* 13px — légendes, métadonnées */
  --t-base: .9375rem;   /* 15px — interface */
  --t-md:   1.0625rem;  /* 17px — lecture */
  --t-lg:   1.375rem;
  --t-xl:   1.875rem;
  --t-2xl:  2.5rem;
  --t-3xl:  3.5rem;

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;

  --interligne-serre: 1.25;
  --interligne: 1.5;
  --interligne-lecture: 1.68;

  /* --- Espacement (échelle de 4) --------------------------------------- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;

  /* --- Rayons et ombres ------------------------------------------------ */
  --r-sm: 3px;  --r: 6px;  --r-lg: 10px;  --r-xl: 16px;  --r-rond: 999px;

  --ombre-1: 0 1px 2px rgba(26, 23, 18, .06);
  --ombre-2: 0 2px 8px rgba(26, 23, 18, .08), 0 1px 2px rgba(26, 23, 18, .05);
  --ombre-3: 0 8px 28px rgba(26, 23, 18, .14), 0 2px 6px rgba(26, 23, 18, .07);
  --ombre-4: 0 24px 64px rgba(26, 23, 18, .22);

  /* --- Mouvement ------------------------------------------------------- */
  --duree-1: 120ms;  --duree-2: 220ms;  --duree-3: 420ms;
  --courbe: cubic-bezier(.2, .7, .3, 1);

  /* --- Gabarit --------------------------------------------------------- */
  --h-entete: 56px;
  --l-rail: 76px;
  --l-tiroir: 440px;
  --cible-min: 32px;
}

/* Le thème sombre redéfinit les mêmes jetons — jamais de couleur dont la
   seule définition vivrait dans un bloc média. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --pont-sombre: 1;   /* jeton témoin, sans effet visuel */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --plan:            #100e0a;
    --surface:         #17150f;
    --surface-2:       #1f1c14;
    --surface-3:       #2a261c;
    --surface-inverse: #f7f3e9;
    --voile:           rgba(6, 5, 3, .66);

    --encre:           #f5f1e6;   /* 16.17:1 */
    --encre-2:         #c5bda9;   /*  9.76:1 */
    --encre-3:         #9c937f;   /*  5.99:1 */
    --encre-muette:    #8b8272;
    --encre-inverse:   #17150f;

    --trait:           rgba(245, 241, 230, .12);
    --trait-fort:      rgba(245, 241, 230, .24);
    --grille:          #2a261c;
    --ligne-base:      #383327;

    --accent:          #9ec5f4;   /* 10.21:1 */
    --accent-doux:     #1c2836;
    --accent-encre:    #cde2fb;

    --bon:             #0ca30c;
    --attention:       #fab219;
    --serieux:         #ec835a;
    --critique:        #e06b6b;

    --confiance-etabli:     #9ec5f4;
    --confiance-probable:   #5598e7;
    --confiance-possible:   #256abf;
    --confiance-contredit:  #e06b6b;
    --confiance-non_evalue: #6f6857;

    --branche-1: #3987e5;  --branche-2: #d95926;
    --branche-3: #199e70;  --branche-4: #c98500;
    --branche-5: #d55181;  --branche-6: #008300;
    --branche-7: #9085e9;  --branche-8: #e66767;
    --branche-autre: #898781;

    --densite-0: #131a24;  --densite-1: #16283f;
    --densite-2: #184f95;  --densite-3: #2a78d6;
    --densite-4: #5598e7;  --densite-5: #9ec5f4;
    --densite-min: #131a24; --densite-max: #9ec5f4;

    --sexe-m: #9085e9;  --sexe-f: #e58ab8;  --sexe-inconnu: #898781;

    --ombre-1: 0 1px 2px rgba(0, 0, 0, .5);
    --ombre-2: 0 2px 8px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-3: 0 8px 28px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
    --ombre-4: 0 24px 64px rgba(0, 0, 0, .72);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --plan:            #100e0a;
  --surface:         #17150f;
  --surface-2:       #1f1c14;
  --surface-3:       #2a261c;
  --surface-inverse: #f7f3e9;
  --voile:           rgba(6, 5, 3, .66);

  --encre:           #f5f1e6;
  --encre-2:         #c5bda9;
  --encre-3:         #9c937f;
  --encre-muette:    #8b8272;
  --encre-inverse:   #17150f;

  --trait:           rgba(245, 241, 230, .12);
  --trait-fort:      rgba(245, 241, 230, .24);
  --grille:          #2a261c;
  --ligne-base:      #383327;

  --accent:          #9ec5f4;
  --accent-doux:     #1c2836;
  --accent-encre:    #cde2fb;

  --bon:             #0ca30c;
  --attention:       #fab219;
  --serieux:         #ec835a;
  --critique:        #e06b6b;

  --confiance-etabli:     #9ec5f4;
  --confiance-probable:   #5598e7;
  --confiance-possible:   #256abf;
  --confiance-contredit:  #e06b6b;
  --confiance-non_evalue: #6f6857;

  --branche-1: #3987e5;  --branche-2: #d95926;
  --branche-3: #199e70;  --branche-4: #c98500;
  --branche-5: #d55181;  --branche-6: #008300;
  --branche-7: #9085e9;  --branche-8: #e66767;
  --branche-autre: #898781;

  --densite-0: #131a24;  --densite-1: #16283f;
  --densite-2: #184f95;  --densite-3: #2a78d6;
  --densite-4: #5598e7;  --densite-5: #9ec5f4;
  --densite-min: #131a24; --densite-max: #9ec5f4;

  --sexe-m: #9085e9;  --sexe-f: #e58ab8;  --sexe-inconnu: #898781;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .5);
  --ombre-2: 0 2px 8px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-3: 0 8px 28px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --ombre-4: 0 24px 64px rgba(0, 0, 0, .72);
}

/* ==========================================================================
   Remise à zéro et bases
   ========================================================================== */

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

/* L'attribut hidden ne vaut que par une règle du navigateur, que n'importe
   quel display: d'auteur écrase. Toutes nos primitives en déclarent un — un
   bouton masqué restait donc visible et cliquable. On le tranche une fois
   pour toutes plutôt que composant par composant. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--plan);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;           /* chaque panneau gère son propre défilement */
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--graisse-forte); line-height: var(--interligne-serre); }
h1 { font-size: var(--t-lg); }
h2 { font-size: var(--t-md); }
h3 { font-size: var(--t-base); }
p  { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-color: var(--trait-fort); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Les chiffres s'alignent partout où ils se superposent verticalement —
   tableaux, graduations — mais jamais sur un grand nombre isolé. */
table, .tabulaire, .graduation { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-doux); color: var(--encre); }

/* Anneau de focus visible et constant : la navigation au clavier doit être
   utilisable sans compromis, y compris dans l'arbre et sur la carte. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--e-3) var(--e-4);
  background: var(--surface); border: 1px solid var(--trait-fort);
  border-radius: var(--r);
}
.saut-contenu:focus { left: var(--e-3); top: var(--e-3); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
}

.bouton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--cible-min);
  padding: var(--e-2) var(--e-4);
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: var(--r);
  cursor: pointer;
  transition: background var(--duree-1) var(--courbe), border-color var(--duree-1) var(--courbe);
}
.bouton:hover { background: var(--surface-2); border-color: var(--encre-muette); }
.bouton--primaire { background: var(--accent); color: var(--surface); border-color: transparent; }
.bouton--primaire:hover { background: var(--accent-encre); }

.bouton-fantome {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--cible-min); padding: var(--e-1) var(--e-3);
  background: transparent; color: var(--encre-2);
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; font-size: var(--t-sm);
  transition: background var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe);
}
.bouton-fantome:hover { background: var(--surface-3); color: var(--encre); }
.bouton-fantome[aria-pressed="true"], .bouton-fantome.actif {
  background: var(--accent-doux); color: var(--accent-encre);
}

.bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible-min); height: var(--cible-min);
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: var(--encre-2); cursor: pointer;
  transition: background var(--duree-1) var(--courbe);
}
.bouton-icone:hover:not(:disabled) { background: var(--surface-3); color: var(--encre); }
.bouton-icone:disabled { opacity: .35; cursor: default; }

.icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.puce {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  background: var(--surface-2); border: 1px solid var(--trait);
  border-radius: var(--r-rond); font-size: var(--t-sm); color: var(--encre-2);
  white-space: nowrap; max-width: 100%; min-width: 0;
}
/* Une puce qui porte une phrase entière — une fonction, une distinction — ne
   peut pas rester sur une ligne : elle se replie au lieu de déborder. */
/* Une puce qui sert de bouton ou de lien tient la cible minimale ; celles qui
   ne font qu'afficher une valeur restent compactes. */
button.puce, a.puce, .puce[role="button"] {
  min-height: var(--cible-min); cursor: pointer;
  font: inherit; color: var(--encre-2);
}
button.puce:hover, a.puce:hover { background: var(--surface-3); border-color: var(--encre-muette); }

.puce--longue {
  white-space: normal; border-radius: var(--r);
  align-items: flex-start; line-height: 1.45; text-align: left;
}

/* Le niveau de confiance porte toujours son mot : la couleur seule ne dit rien. */
.etiquette-confiance {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 1px var(--e-2) 1px var(--e-2);
  font-size: var(--t-xs); font-weight: var(--graisse-moyenne);
  border-radius: var(--r-sm); border: 1px solid var(--trait);
  background: var(--surface-2); color: var(--encre-2);
  white-space: nowrap;
}
/* La marque porte une FORME autant qu'une teinte. Les chapitres de classeur
   finiront photocopiés en noir et blanc : la forme et le mot passent la
   photocopieuse, la couleur non. Elle sert aussi de second canal en cas de
   deutéranopie ou de protanopie. */
.etiquette-confiance::before {
  content: ""; width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--pastille, var(--encre-muette));
  border: 0 solid var(--pastille, var(--encre-muette));
}
.etiquette-confiance[data-confiance="etabli"]::before {
  /* disque plein : le fait est établi */
  background: var(--pastille);
}
.etiquette-confiance[data-confiance="probable"]::before {
  /* anneau épais : la conclusion tient, l'acte manque encore */
  background: transparent; border-width: 3px;
}
.etiquette-confiance[data-confiance="possible"]::before {
  /* anneau fin : une piste, pas une conclusion */
  background: transparent; border-width: 1.5px;
}
.etiquette-confiance[data-confiance="contredit"]::before {
  /* losange : deux sources se contredisent */
  border-radius: 1px; transform: rotate(45deg); background: var(--pastille);
}
.etiquette-confiance[data-confiance="non_evalue"]::before {
  /* tiret : rien n'a encore été évalué */
  height: 2.5px; border-radius: 1px; background: var(--pastille);
}

kbd {
  display: inline-block; min-width: 1.4em; padding: 1px 5px;
  font-family: var(--police); font-size: var(--t-xs); text-align: center;
  color: var(--encre-3); background: var(--surface-2);
  border: 1px solid var(--trait-fort); border-bottom-width: 2px;
  border-radius: var(--r-sm);
}

.discret { color: var(--encre-3); font-size: var(--t-sm); }
.muet { color: var(--encre-muette); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Une date approximative n'a pas le droit de ressembler à une date sûre. */
.date-approx { font-style: italic; color: var(--encre-3); }

.barre-outils {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-2) var(--e-4);
  background: var(--surface); border-bottom: 1px solid var(--trait);
}
.barre-outils__groupe {
  display: flex; align-items: center; gap: 2px;
  padding: 2px; background: var(--surface-3); border-radius: var(--r);
}
.barre-outils__separateur { width: 1px; height: 20px; background: var(--trait); margin: 0 var(--e-1); }
.barre-outils__espace { flex: 1 1 auto; }

.grille { display: grid; gap: var(--e-4); }
.grille--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.defilable { overflow: auto; overscroll-behavior: contain; }
.defilable::-webkit-scrollbar { width: 10px; height: 10px; }
.defilable::-webkit-scrollbar-thumb {
  background: var(--trait-fort); border-radius: var(--r-rond);
  border: 3px solid transparent; background-clip: content-box;
}
.defilable::-webkit-scrollbar-thumb:hover { background: var(--encre-muette); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}