/* ============================================================================
   Charte « Le relevé » : jetons et composants portables.
   Document de géomètre : papier quadrillé, cotes en mono, coins vifs, trait fin.
   Voir CHARTE-GRAPHIQUE.md pour les règles et le pourquoi.

   Deux thèmes sur la même page, pilotés par html[data-theme]. Le sombre est le
   défaut : il tient sans attribut ni script. Poser le thème mémorisé AVANT le
   premier rendu, sinon éclair du thème opposé au chargement :

     <script>
       document.documentElement.dataset.theme =
         localStorage.getItem("appli:theme") || "sombre";
     </script>

   Les polices sont attendues en local. Ajuster les chemins ci-dessous.
   ============================================================================ */

@font-face { font-family:"Archivo"; src:url("../vendor/fonts/Archivo-var.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../vendor/fonts/IBMPlexMono-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../vendor/fonts/IBMPlexMono-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }

/* ---------------------------------------------------------------------------
   1. Jetons
   --------------------------------------------------------------------------- */

/* Sombre par défaut : encre claire sur papier carbone, accent bleu riso. Le bleu
   plein sert aux aplats, sa version éclaircie aux traits fins et aux cotes
   (illisibles autrement en petit corps sur fond sombre). */
:root {
  color-scheme: dark;

  --acc:#2f3aa6;               /* aplats : option active, action qui fait avancer */
  --acc-hi:#8a93e6;            /* cotes, traits fins, survols */
  --acc-soft:#23274d;          /* fond de survol dans une liste, cible de dépôt */

  --desk:#161511;              /* la table, sous le quadrillage */
  --paper:#1e1d18;             /* les feuilles : panneaux, bandeaux, cartes */
  --ink:#e6e1d3;               /* l'encre du relevé : texte et cadres manipulables */
  --mut:#948d7b;               /* texte secondaire, étiquettes */
  --faint:#5f5a4c;             /* texte tertiaire, numéros au repos */
  --hair:#24231d;              /* quadrillage, séparateurs internes */
  --mid:#45423a;               /* cadres au repos */
  --field:#12110d;             /* fond des champs de saisie */
  --inv-mut:#6a655a;           /* texte secondaire posé sur un fond encre */

  --backdrop:rgba(0,0,0,.55);
  --shadow-soft:rgba(0,0,0,.38);
  --shadow-deep:rgba(0,0,0,.8);

  --font:"Archivo", "Helvetica Neue", sans-serif;
  --mono:"IBM Plex Mono", "SF Mono", monospace;
  --grid:linear-gradient(var(--hair) 1px, transparent 1px),
         linear-gradient(90deg, var(--hair) 1px, transparent 1px);

  /* base : 13px pour un outil dense, 15px pour une page éditoriale */
  --base:13px;
}

/* Clair : l'encre sur le papier, accent minium. Ici --acc et --acc-hi se
   confondent, le minium tient déjà en petit corps sur du papier. */
html[data-theme="clair"] {
  color-scheme: light;
  --acc:#e8500a;
  --acc-hi:#e8500a;
  --acc-soft:#fbe3d4;
  --desk:#f6f4ee;
  --paper:#fcfbf7;
  --ink:#26241f;
  --mut:#8d8779;
  --faint:#c4beae;
  --hair:#ddd8ca;
  --mid:#b9b3a3;
  --field:#fff;
  --inv-mut:#c4beae;
  --backdrop:rgba(38,36,31,.22);
  --shadow-soft:rgba(38,36,31,.08);
  --shadow-deep:rgba(38,36,31,.55);
}

/* Pour suivre la préférence système au lieu d'une bascule mémorisée, dupliquer
   le bloc ci-dessus dans :
     @media (prefers-color-scheme:light) { html:not([data-theme]) { … } }
   La bascule explicite reste prioritaire. */

/* ---------------------------------------------------------------------------
   2. Socle
   --------------------------------------------------------------------------- */

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font); font-size:var(--base); line-height:1.55;
  color:var(--ink); background:var(--desk);
}
/* le fond de table quadrillé : sur le body d'une page éditoriale (pas 28px),
   ou sur la seule zone de travail d'un outil (26px). */
.quadrille { background-image:var(--grid); background-size:26px 26px; }
::selection { background:var(--acc-hi); color:var(--desk); }
a { color:inherit; }
[hidden] { display:none !important; }

/* ---------------------------------------------------------------------------
   3. La voix des cotes
   Tout ce qui mesure, nomme un état ou numérote passe en mono capitales espacées.
   L'interlettrage suit le corps : plus c'est petit, plus c'est espacé.
   --------------------------------------------------------------------------- */

.cote { font-family:var(--mono); font-size:10.5px; font-weight:500;
        letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.cote-xs { font-family:var(--mono); font-size:9px; letter-spacing:.1em;
           text-transform:uppercase; color:var(--mut); }
/* partout où un nombre change en place, sinon la ligne tremble */
.num { font-variant-numeric:tabular-nums; }

/* titre de section dans un panneau */
.h-sec { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em;
         text-transform:uppercase; color:var(--mut); margin:2px 0 16px; }
.h-sec::after { content:" ·"; color:var(--faint); }

/* titre de vue : le trait d'accent qui le prolonge */
.h-vue { font-size:19px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 20px; }
.h-vue::after { content:""; display:inline-block; width:32px; height:3px;
                background:var(--acc-hi); margin-left:14px; vertical-align:middle; }

.hint { font-size:11.5px; color:var(--mut); line-height:1.55; margin:8px 0 0; }

/* ---------------------------------------------------------------------------
   4. Bandeaux
   Hauteurs fixes : 48px en tête, 34px en pied. La zone de travail prend le reste.
   --------------------------------------------------------------------------- */

.bandeau { flex:0 0 auto; display:flex; align-items:stretch; gap:22px; padding:0 18px; height:48px;
           background:var(--paper); border-bottom:1px solid var(--ink); }
.marque { align-self:center; font-size:13px; font-weight:800; letter-spacing:.24em;
          text-transform:uppercase; }
.marque::before { content:"+"; font-family:var(--mono); font-weight:400; color:var(--acc-hi);
                  margin-right:10px; }

/* étapes : l'onglet actif est souligné par l'intérieur, pas encadré */
.etapes { list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.etape { display:flex; align-items:center; gap:8px; padding:4px 13px 2px;
         font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
         color:var(--mut); cursor:pointer; box-shadow:inset 0 -2px 0 transparent;
         transition:color .12s, box-shadow .12s; }
.etape .n { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.etape .n::before { content:"0"; }
.etape:hover { color:var(--ink); }
.etape.active { color:var(--ink); box-shadow:inset 0 -2px 0 var(--acc-hi); }
.etape.active .n { color:var(--acc-hi); }
/* invitation à passer à la suite : l'onglet bat doucement */
.etape.nudge { color:var(--ink); animation:etape-nudge 1.3s ease-in-out infinite; }
@keyframes etape-nudge { 0%,100% { box-shadow:inset 0 -2px 0 transparent; }
                         50% { box-shadow:inset 0 -2px 0 var(--acc-hi); } }

/* la ligne de cotes du bas */
.barre-cotes { flex:0 0 auto; display:flex; align-items:center; padding:0 20px; height:34px;
               background:var(--paper); border-top:1px solid var(--ink); font-family:var(--mono);
               font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.barre-cotes b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.barre-cotes .d { color:var(--faint); margin:0 10px; }

.theme-toggle { margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--mut); background:transparent;
                border:1px solid var(--mid); border-radius:0; padding:4px 9px; cursor:pointer;
                transition:color .12s, border-color .12s; }
.theme-toggle::before { content:"◐ "; color:var(--acc-hi); }
.theme-toggle:hover { color:var(--acc-hi); border-color:var(--acc-hi); }
.theme-toggle:focus-visible { outline:1px solid var(--acc-hi); outline-offset:2px; }

/* ---------------------------------------------------------------------------
   5. Panneaux et séparateurs
   --------------------------------------------------------------------------- */

.panneau { background:var(--paper); border:1px solid var(--mid); padding:16px; }
.panneau-vif { background:var(--paper); border:1px solid var(--ink); }
.sep { height:1px; background:var(--hair); margin:12px 0; }

/* la feuille : de l'imprimé posé sur la table, ombre douce et lointaine.
   Reste claire même en thème sombre, c'est un document, pas une interface. */
.feuille { background:#fcfbf7; color:#26241f; border:1px solid var(--mid); padding:14px;
           box-shadow:0 26px 50px -28px var(--shadow-soft); }

/* la zone de travail, avec ses croix de calage aux coins opposés */
.scene { position:relative; background:var(--desk); background-image:var(--grid);
         background-size:26px 26px; }
.scene::before, .scene::after { position:absolute; z-index:2; pointer-events:none;
         content:"+"; font-family:var(--mono); font-size:14px; color:var(--acc-hi); }
.scene::before { top:8px; left:12px; }
.scene::after { bottom:8px; right:12px; }

/* ---------------------------------------------------------------------------
   6. Boutons
   Cadre encre, coins vifs, étiquette mono. Le survol double le trait par
   l'intérieur au lieu d'épaissir la bordure, ce qui bougerait la mise en page.
   --------------------------------------------------------------------------- */

.btn { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
       padding:9px 12px; border:1px solid var(--ink); border-radius:0; background:var(--paper);
       color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block;
       transition:box-shadow .1s, background .1s, color .1s; }
.btn:hover { box-shadow:inset 0 0 0 1px var(--ink); }
.btn:active { transform:translate(1px,1px); }
.btn:focus-visible { outline:1px solid var(--acc-hi); outline-offset:3px; }
.btn[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn:disabled:hover { box-shadow:none; }
/* l'action qui fait avancer : un seul par écran */
.btn.cta { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
.btn.cta:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.btns { display:flex; gap:8px; flex-wrap:wrap; }

/* segments : des choix exclusifs dans un cadre unique, le retenu prend l'aplat */
.seg { display:flex; border:1px solid var(--ink); background:var(--paper); }
.seg span { flex:1; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
            text-transform:uppercase; padding:8px 4px; color:var(--mut);
            border-right:1px solid var(--ink); cursor:pointer; font-variant-numeric:tabular-nums;
            transition:color .1s, background .1s; }
.seg span:last-child { border-right:0; }
.seg span:hover { color:var(--ink); }
.seg span.on { background:var(--acc); color:#fff; }

/* repli expert : + / − en accent, pas de triangle natif */
details.repli { margin:2px 0 8px; }
details.repli > summary { cursor:pointer; list-style:none; font-family:var(--mono); font-size:10.5px;
         letter-spacing:.12em; text-transform:uppercase; color:var(--mut); padding:10px 0;
         border-top:1px solid var(--hair); }
details.repli > summary::-webkit-details-marker { display:none; }
details.repli > summary::before { content:"+ "; color:var(--acc-hi); }
details.repli[open] > summary { color:var(--ink); }
details.repli[open] > summary::before { content:"− "; }

/* ---------------------------------------------------------------------------
   7. Réglages
   --------------------------------------------------------------------------- */

.ctl { margin:0 0 16px; }
.ctl.off { opacity:.35; pointer-events:none; }
/* libellé à gauche, valeur mesurée à droite, en mono à l'accent */
.ctl .lab { display:flex; justify-content:space-between; align-items:baseline;
            font-size:12.5px; font-weight:600; margin-bottom:4px; }
.ctl .lab b { font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--acc-hi);
              font-variant-numeric:tabular-nums; }
/* les deux extrémités nommées, sous le curseur */
.ctl .bornes { display:flex; justify-content:space-between; font-family:var(--mono); font-size:8.5px;
               letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-top:-3px; }

/* curseur-règle : piste graduée sous trait de base, poignée-index à l'accent */
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:24px;
       background:transparent; cursor:ew-resize; margin:0; }
input[type="range"]::-webkit-slider-runnable-track { height:15px;
       background:linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat,
                  repeating-linear-gradient(90deg, var(--mid) 0 1px, transparent 1px 10%) 0 100% / 100% 7px no-repeat; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:9px; height:17px; margin-top:-2px;
       background:var(--acc-hi); clip-path:polygon(50% 100%, 0 58%, 0 0, 100% 0, 100% 58%); }
input[type="range"]::-moz-range-track { height:1px; background:var(--ink); }
input[type="range"]::-moz-range-thumb { width:9px; height:17px; border:0; border-radius:0;
       background:var(--acc-hi); }
input[type="range"]:focus-visible { outline:1px solid var(--acc-hi); outline-offset:4px; }

input[type="number"], input[type="text"] { font-family:var(--mono); font-size:12px; padding:8px 10px;
       border:1px solid var(--ink); border-radius:0; background:var(--field); color:var(--ink);
       font-variant-numeric:tabular-nums; }
input[type="text"]::placeholder { color:var(--faint); text-transform:none; letter-spacing:0; }
input[type="number"]:focus-visible, input[type="text"]:focus-visible {
       outline:1px solid var(--acc-hi); outline-offset:2px; }
select { width:100%; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--ink);
       border-radius:0; background:var(--field); color:var(--ink); cursor:pointer; }
select:focus-visible { outline:1px solid var(--acc-hi); outline-offset:2px; }
input[type="checkbox"] { accent-color:var(--acc-hi); }

/* ---------------------------------------------------------------------------
   8. Cartes échantillon
   --------------------------------------------------------------------------- */

.carte { position:relative; font:inherit; display:flex; flex-direction:column; gap:8px; padding:9px;
         border:1px solid var(--mid); border-radius:0; background:var(--paper); color:var(--ink);
         cursor:pointer; text-align:left; min-width:0;
         transition:border-color .12s, box-shadow .12s; }
/* hauteur d'en-tête imposée : les rangées s'alignent quel que soit le nom */
.carte .tete { display:flex; flex-direction:column; gap:2px; min-height:48px; }
.carte .nom { font-size:14px; font-weight:700; line-height:1.15; letter-spacing:.01em;
              display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
              -webkit-box-orient:vertical; overflow:hidden; }
.carte .fam { font-family:var(--mono); font-size:8px; letter-spacing:.09em;
              text-transform:uppercase; color:var(--faint); }
/* fenêtre d'illustration : quadrillée tant que l'image n'est pas là */
.carte .vignette { display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
              background:var(--field); background-image:var(--grid); background-size:13px 13px;
              border:1px solid var(--mid); }
.carte .vignette img, .carte .vignette svg { display:block; width:100%; height:100%; object-fit:cover; }
.carte .desc { font-size:11px; line-height:1.35; color:var(--mut);
              display:-webkit-box; -webkit-line-clamp:3; line-clamp:3;
              -webkit-box-orient:vertical; overflow:hidden; }
.carte:hover { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.carte:hover .vignette { border-color:var(--ink); }
.carte.on { border-color:var(--acc-hi); box-shadow:inset 0 0 0 1px var(--acc-hi); }
.carte.on .vignette { border-color:var(--acc-hi); }
.carte.on .nom { color:var(--acc-hi); }
.carte.on .pip.f { background:var(--acc-hi); }

/* jauges à crans : une caractéristique sur cinq niveaux, sans unité ni nombre */
.stats { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.stat { display:flex; flex-direction:column; gap:3px; min-width:0; }
.stat-top { display:flex; justify-content:space-between; align-items:baseline; gap:4px; }
.stat-k { font-family:var(--mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); }
.stat-v { font-family:var(--mono); font-size:8px; color:var(--faint); font-variant-numeric:tabular-nums; }
.pips { display:flex; gap:2px; }
.pip { flex:1; height:5px; background:transparent; box-shadow:inset 0 0 0 1px var(--faint); }
.pip.f { background:var(--ink); box-shadow:none; }

/* étiquette d'état, cadre seul */
.badge { align-self:flex-start; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
         text-transform:uppercase; padding:2px 7px; border:1px solid var(--acc-hi);
         border-radius:0; background:transparent; color:var(--acc-hi); }

/* ---------------------------------------------------------------------------
   9. Relevé d'avancement
   Une liste de cases qui se cochent, plutôt qu'une barre de progression.
   --------------------------------------------------------------------------- */

.releve { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px 18px; }
.releve li { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
             letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.releve .box { width:14px; height:14px; border:1px solid var(--mid); flex:0 0 auto; position:relative; }
.releve .box::after { position:absolute; inset:0; display:flex; align-items:center;
             justify-content:center; font-size:11px; line-height:1; }
.releve li.run { color:var(--ink); }
.releve li.run .box { border-color:var(--acc-hi); animation:box-run 1s ease-in-out infinite; }
@keyframes box-run { 50% { background:var(--acc-soft); } }
.releve li.ok { color:var(--ink); }
.releve li.ok .box { border-color:var(--acc); background:var(--acc); }
.releve li.ok .box::after { content:"✓"; color:#fff; }
.releve li.skip { color:var(--faint); }
.releve li.skip .box::after { content:"–"; color:var(--faint); }
.releve li.fail { color:var(--acc); }
.releve li.fail .box { border-color:var(--acc); }
.releve li.fail .box::after { content:"×"; color:var(--acc); }

/* ---------------------------------------------------------------------------
   10. Surfaces au-dessus
   Un tiroir plutôt qu'une fenêtre plein écran : le travail reste visible derrière.
   --------------------------------------------------------------------------- */

.voile { position:fixed; inset:0; z-index:1200; background:var(--backdrop); }
.tiroir { position:absolute; top:0; right:0; bottom:0; width:min(560px, 92vw);
          background:var(--paper); border-left:1px solid var(--ink);
          box-shadow:-20px 0 44px -28px var(--shadow-deep); display:flex; flex-direction:column; }
.voile:not([hidden]) .tiroir { animation:tiroir-in .2s ease-out; }
@keyframes tiroir-in { from { transform:translateX(26px); opacity:0; } }

/* liste de suggestions sous un champ : ombre nette décalée, pas de flou */
.suggest { position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:1000; margin:0; padding:0;
           list-style:none; background:var(--paper); border:1px solid var(--ink); max-height:220px;
           overflow-y:auto; box-shadow:5px 5px 0 var(--shadow-soft); }
.suggest li { padding:8px 10px; font-size:12px; color:var(--ink); cursor:pointer;
              border-bottom:1px solid var(--hair); white-space:nowrap; overflow:hidden;
              text-overflow:ellipsis; }
.suggest li:last-child { border-bottom:0; }
.suggest li:hover, .suggest li.hi { background:var(--acc-soft); color:var(--acc-hi); }

/* étiquette flottante sur un objet de la scène, avec son ergot */
.etiquette { position:absolute; z-index:3; transform:translate(-50%,-100%); }
.etiquette::after { content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
           border-left:6px solid transparent; border-right:6px solid transparent;
           border-top:7px solid var(--ink); }
.etiquette .face { display:flex; align-items:baseline; gap:8px; font:inherit; cursor:pointer;
           white-space:nowrap; background:var(--paper); color:var(--ink); border:1px solid var(--ink);
           padding:5px 9px 6px; box-shadow:0 2px 9px rgba(0,0,0,.20); }
.etiquette .face:hover { box-shadow:0 2px 9px rgba(0,0,0,.2), inset 0 0 0 1px var(--ink); }

/* ascenseurs discrets dans une colonne défilante */
.defile { overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--mid) transparent; }
.defile::-webkit-scrollbar { width:10px; }
.defile::-webkit-scrollbar-thumb { background:var(--mid); border-radius:5px; border:2px solid var(--paper); }
.defile::-webkit-scrollbar-track { background:transparent; }

/* ---------------------------------------------------------------------------
   11. Mouvement
   Rare et court. La pose à l'arrivée d'un bloc, rien d'autre en entrée.
   --------------------------------------------------------------------------- */

.pose { animation:pose .5s ease-out backwards; }
@keyframes pose { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  .pose { animation:none; }
  .etape.nudge { animation:none; box-shadow:inset 0 -2px 0 var(--acc-hi); }
  .releve li.run .box { animation:none; background:var(--acc-soft); }
}