/* ================================================================
   COMMERCIAL PORTAL — Système de design (Enterprise)
   ================================================================
   Identité corporate MMD conservée pour le châssis :
     Persian Red #DE182F · Arsenic #364046 · Platinum #EBEBE2
     Japanese Indigo #1D3C57 · Celadon Green #2E8E8E

   Les SÉRIES DE DONNÉES utilisent des pas dérivés de ces teintes.
   Motif : passées au validateur de palette catégorielle, les couleurs
   de marque échouent — indigo et arsenic hors bande de luminosité,
   céladon et gris sous le plancher de chroma (ils se lisent comme du
   gris en petits aplats). Les pas ci-dessous passent les six
   contrôles, séparation sous daltonisme comprise.
   Ordre catégoriel fixe, jamais recyclé : une 6e série va dans
   « Autres » (--c-neutre).
   ================================================================ */

:root{
  /* --- Marque (châssis uniquement) --- */
  --mmd-red:#DE182F; --mmd-arsenic:#364046; --mmd-platinum:#EBEBE2;
  --mmd-indigo:#1D3C57; --mmd-celadon:#2E8E8E;

  /* --- Surfaces --- */
  --s-app:#F2F3EF; --s-1:#FFF; --s-2:#FAFAF7; --s-3:#F4F5F1;
  --s-inv:#242C31; --s-inv-2:#1B2226;

  /* --- Encre --- */
  --ink-1:#1C2226; --ink-2:#4E5A62; --ink-3:#7B868D; --ink-4:#9AA3A9;

  /* --- Traits --- */
  --line:#E3E5DF; --line-2:#D2D6CE; --line-inv:rgba(255,255,255,.12);

  /* --- Séries catégorielles (validées, ordre fixe) --- */
  --c1:#DE182F; --c2:#2C6FA8; --c3:#C87A12; --c4:#0E9594; --c5:#7B4EA3;
  --c-neutre:#98A1A7;

  /* --- Rampe séquentielle : une teinte, clair → foncé --- */
  --seq-1:#DCE7F1; --seq-2:#B4CBE0; --seq-3:#7FA6C8;
  --seq-4:#4B80AE; --seq-5:#2C6FA8; --seq-6:#1D4E77;

  /* --- États : réservés, jamais réutilisés comme série --- */
  --ok:#12694A;      --ok-bg:#E4F1EA;      --ok-bd:#BCDCCB;
  --warn:#8A5200;    --warn-bg:#FBF0DC;    --warn-bd:#EBD5A8;
  --serious:#A8460B; --serious-bg:#FBEADF; --serious-bd:#F0CBAE;
  --crit:#A8102A;    --crit-bg:#FBE7EA;    --crit-bd:#F0C2CA;
  --info:#1E5285;    --info-bg:#E7EFF7;    --info-bd:#C2D5E8;

  /* --- Typographie --- */
  --font:"Avenir Next","Nunito Sans","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-micro:10px; --t-mini:10.5px; --t-xs:11px; --t-sm:11.5px;
  --t-md:12.5px; --t-lg:14px; --t-xl:17px; --t-2xl:22px; --t-hero:40px;

  /* --- Espace, rayons --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-pill:999px;

  /* --- Élévation --- */
  --e-1:0 1px 1px rgba(28,34,38,.04), 0 1px 2px rgba(28,34,38,.05);
  --e-2:0 2px 4px rgba(28,34,38,.06), 0 1px 2px rgba(28,34,38,.05);
  --e-3:0 8px 24px rgba(28,34,38,.12), 0 2px 6px rgba(28,34,38,.08);
  --e-4:0 16px 48px rgba(28,34,38,.18);

  /* --- Mouvement --- */
  --m-fast:120ms cubic-bezier(.4,0,.2,1);
  --m-med:220ms cubic-bezier(.4,0,.2,1);
  --m-slow:420ms cubic-bezier(.22,1,.36,1);

  --rail:56px; --nav:212px; --top:52px; --statut:26px;

  /* --- Densité --- */
  --fs:12.5px; --row:6px; --btn:28px; --pad:16px;
}
html[data-densite="confort"]{ --fs:13.5px; --row:10px; --btn:32px; --pad:20px; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);font-size:var(--fs);line-height:1.45;color:var(--ink-1);
  background:var(--s-app);overflow:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-variant-numeric:proportional-nums;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
/* Toute règle de classe portant un `display` l'emporterait sur le
   display:none de [hidden] : un élément marqué caché resterait visible.
   Cette règle globale rend l'attribut fiable partout. */
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--mmd-red);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================================================================
   Connexion
   ================================================================ */
body.connexion{overflow:auto;display:grid;place-items:center;
  background:linear-gradient(155deg,#2A333A,var(--mmd-arsenic) 55%,#1B2732)}
.login{background:var(--s-1);border-radius:var(--r-lg);width:360px;padding:30px 32px;
       box-shadow:var(--e-4)}
.login .mark{width:42px;height:42px;background:var(--mmd-red);border-radius:var(--r-md);
             display:grid;place-items:center;color:#fff;font-weight:800;font-size:21px;
             margin-bottom:var(--sp-4);box-shadow:var(--e-2)}
.login h1{font-size:19px;font-weight:700;letter-spacing:-.4px}
.login p{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--sp-5)}
.login label{display:block;font-size:var(--t-micro);font-weight:800;letter-spacing:.6px;
             text-transform:uppercase;color:var(--ink-4);margin:var(--sp-3) 0 5px}
.login input{width:100%;height:36px;border:1px solid var(--line-2);border-radius:var(--r-md);
             padding:0 11px;outline:none;transition:var(--m-fast);background:var(--s-2)}
.login input:focus{border-color:var(--mmd-red);background:var(--s-1);
                   box-shadow:0 0 0 3px rgba(222,24,47,.12)}
.login button{width:100%;height:38px;margin-top:var(--sp-5);background:var(--mmd-red);
              color:#fff;border-radius:var(--r-md);font-weight:700;font-size:var(--t-md);
              transition:var(--m-fast);box-shadow:var(--e-2)}
.login button:hover:not(:disabled){background:#C4142A}
.login button:disabled{opacity:.6;cursor:progress}
.login .err{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-bd);
            font-size:var(--t-sm);font-weight:600;padding:9px 11px;border-radius:var(--r-md);
            margin-top:var(--sp-4)}

/* ================================================================
   Coquille
   ================================================================ */
.app{display:grid;height:100vh;
  grid-template-columns:var(--rail) var(--nav) 1fr;
  grid-template-rows:var(--top) 1fr var(--statut);
  grid-template-areas:"top top top" "rail nav main" "st st st"}
.topbar{grid-area:top}.rail{grid-area:rail}.nav{grid-area:nav}
.main{grid-area:main;overflow:hidden;display:flex;flex-direction:column}
.statusbar{grid-area:st}

/* ---------------- Barre supérieure ---------------- */
.topbar{background:var(--s-inv);display:flex;align-items:center;
        border-bottom:1px solid #12181B;padding-right:var(--sp-3)}
.topbar .mark{width:var(--rail);height:var(--top);flex:0 0 var(--rail);background:var(--mmd-red);
              display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;
              letter-spacing:-.5px;transition:var(--m-fast)}
.topbar .mark:hover{background:#C4142A}
.titre-app{padding:0 var(--sp-4) 0 var(--sp-3);white-space:nowrap;height:var(--top);
           border-right:1px solid var(--line-inv);display:flex;flex-direction:column;
           justify-content:center}
.titre-app b{color:#fff;font-size:var(--t-md);font-weight:700;line-height:1.2}
.titre-app span{color:rgba(255,255,255,.42);font-size:var(--t-micro);letter-spacing:.5px;
                text-transform:uppercase;line-height:1.3}
.fil{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);
     color:rgba(255,255,255,.45);font-size:var(--t-xs);white-space:nowrap}
.fil b{color:rgba(255,255,255,.9);font-weight:600}
.fil i{opacity:.35;font-style:normal}
.topbar .sp{flex:1}

.rech{position:relative;width:290px;height:30px;background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);
      display:flex;align-items:center;padding:0 var(--sp-2) 0 30px;transition:var(--m-fast)}
.rech:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.rech:focus-within{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);
                   box-shadow:0 0 0 3px rgba(222,24,47,.22)}
.rech svg{position:absolute;left:9px;top:7px;color:rgba(255,255,255,.42)}
.rech input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:var(--t-sm)}
.rech input::placeholder{color:rgba(255,255,255,.4)}
.kbd{font-size:9px;font-weight:700;letter-spacing:.4px;color:rgba(255,255,255,.45);
     border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:1px 4px;white-space:nowrap}

.densite{display:flex;align-items:center;background:rgba(255,255,255,.07);
         border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);
         padding:2px;margin-left:var(--sp-2)}
.densite b{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
           color:rgba(255,255,255,.42);padding:0 6px 0 5px}
.densite button{color:rgba(255,255,255,.6);font-size:var(--t-micro);font-weight:700;
                padding:3px 9px;border-radius:var(--r-sm);transition:var(--m-fast)}
.densite button:hover{color:#fff}
.densite button.on{background:var(--mmd-red);color:#fff}

.top-actions{display:flex;align-items:center;gap:2px;margin-left:var(--sp-2)}
.ic-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-md);
        color:rgba(255,255,255,.62);position:relative;transition:var(--m-fast)}
.ic-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.ic-btn .pastille-n{position:absolute;top:3px;right:3px;min-width:14px;height:14px;padding:0 3px;
  background:var(--mmd-red);color:#fff;border-radius:var(--r-pill);font-size:9px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--s-inv);line-height:1}

.user{display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-2);
      padding:0 var(--sp-2) 0 var(--sp-3);height:32px;border-left:1px solid var(--line-inv);
      border-radius:var(--r-md);transition:var(--m-fast)}
.user:hover{background:rgba(255,255,255,.08)}
.user .av{width:27px;height:27px;border-radius:var(--r-pill);flex:0 0 27px;
          background:linear-gradient(140deg,var(--mmd-celadon),#1F6F6F);
          color:#fff;display:grid;place-items:center;font-size:var(--t-mini);font-weight:800}
.user .nm{color:#fff;font-size:var(--t-xs);font-weight:600;line-height:1.2}
.user .rl{color:rgba(255,255,255,.42);font-size:var(--t-micro);line-height:1.2}
.user .out{color:rgba(255,255,255,.45);font-size:15px;margin-left:5px}
.user .out:hover{color:#fff}

/* ---------------- Rail ---------------- */
.rail{background:var(--s-inv-2);display:flex;flex-direction:column;align-items:center;
      padding:var(--sp-2) 0;gap:2px;border-right:1px solid #12181B}
.rail button{width:38px;height:36px;display:grid;place-items:center;border-radius:var(--r-md);
             color:rgba(255,255,255,.44);position:relative;transition:var(--m-fast);font-size:15px}
.rail button:hover{background:rgba(255,255,255,.08);color:#fff}
.rail button.on{color:#fff;background:rgba(222,24,47,.18)}
.rail button.on::before{content:"";position:absolute;left:-9px;top:8px;bottom:8px;width:3px;
                        background:var(--mmd-red);border-radius:0 3px 3px 0}
.rail button[data-info]:hover::after{content:attr(data-info);position:absolute;left:46px;
  top:50%;transform:translateY(-50%);background:var(--ink-1);color:#fff;font-size:var(--t-xs);
  font-weight:600;padding:5px 9px;border-radius:var(--r-md);white-space:nowrap;z-index:90;
  box-shadow:var(--e-3);pointer-events:none}
.rail .sep{width:22px;height:1px;background:rgba(255,255,255,.1);margin:var(--sp-2) 0}
.rail .sp{flex:1}

/* ---------------- Navigation secondaire ---------------- */
.nav{background:var(--s-1);border-right:1px solid var(--line);
     display:flex;flex-direction:column;overflow:hidden}
.nav-tete{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.nav-tete h2{font-size:var(--t-lg);font-weight:700;letter-spacing:-.2px}
.nav-tete p{font-size:var(--t-mini);color:var(--ink-3);margin-top:2px}
.nav-corps{flex:1;overflow-y:auto;padding:0 var(--sp-2) var(--sp-3)}
.nav-grp{margin-bottom:var(--sp-4)}
.nav-grp>h3{font-size:var(--t-micro);font-weight:800;letter-spacing:.7px;text-transform:uppercase;
            color:var(--ink-4);padding:0 var(--sp-2);margin-bottom:var(--sp-1)}
.nav-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:6px var(--sp-2);
          border-radius:var(--r-md);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
          transition:var(--m-fast);text-align:left;position:relative}
.nav-item:hover{background:var(--s-3);color:var(--ink-1)}
.nav-item.on{background:rgba(222,24,47,.07);color:var(--mmd-red);font-weight:700}
.nav-item.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
                     background:var(--mmd-red);border-radius:0 2px 2px 0}
.nav-item .cpt{margin-left:auto;font-size:var(--t-micro);font-weight:700;background:var(--s-3);
               color:var(--ink-3);border-radius:var(--r-pill);padding:1px 6px;min-width:20px;
               text-align:center;font-variant-numeric:tabular-nums}
.nav-item.on .cpt{background:rgba(222,24,47,.12);color:var(--mmd-red)}
.nav-item .pt{width:5px;height:5px;border-radius:50%;flex:0 0 5px}
.nav-pied{border-top:1px solid var(--line);padding:var(--sp-3) var(--sp-4);background:var(--s-2)}
/* Une consigne de service au pied de la navigation — le délai entre deux
   relances, par exemple. Ce n'est ni un compteur ni une action : elle se
   lit une fois et reste disponible. */
.nav-note{font-size:var(--t-mini);color:var(--ink-3);line-height:1.5}
.nav-note b{color:var(--ink-1);font-weight:700}
.jauge-obj .l{display:flex;justify-content:space-between;font-size:var(--t-mini);
              color:var(--ink-3);margin-bottom:5px}
.jauge-obj .l b{color:var(--ink-1);font-weight:700}
.piste{height:6px;background:var(--seq-1);border-radius:var(--r-pill);overflow:hidden}
.piste i{display:block;height:100%;border-radius:var(--r-pill);background:var(--seq-5);
         transition:width var(--m-slow)}

/* ================================================================
   En-tête de page, filtres
   ================================================================ */
.tete{background:var(--s-1);border-bottom:1px solid var(--line);
      padding:var(--sp-3) var(--sp-5);flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3)}
.tete h1{font-size:var(--t-xl);font-weight:700;letter-spacing:-.35px;line-height:1.25}
.tete .sous{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.tete .sp{flex:1}

.puce{font-size:var(--t-micro);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
      padding:3px 7px;border-radius:var(--r-sm);border:1px solid}
.puce.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.puce.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.puce.info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
/* Une puce cliquable reste une puce : le navigateur ne doit pas lui
   rendre son apparence de bouton. */
button.puce{font-family:inherit;line-height:inherit;cursor:pointer}
button.puce:hover{filter:brightness(.96)}

.btn{height:var(--btn);padding:0 11px;border-radius:var(--r-md);border:1px solid var(--line-2);
     background:var(--s-1);font-size:var(--t-sm);font-weight:600;color:var(--ink-1);
     display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
     transition:var(--m-fast);box-shadow:var(--e-1)}
.btn:hover{background:var(--s-2);border-color:var(--ink-4);box-shadow:var(--e-2)}
.btn:active{transform:translateY(.5px)}
.btn.primaire{background:var(--mmd-red);border-color:var(--mmd-red);color:#fff}
.btn.primaire:hover{background:#C4142A;border-color:#C4142A}
.btn.sombre{background:var(--mmd-arsenic);border-color:var(--mmd-arsenic);color:#fff}
.btn.sombre:hover{background:#2B3338}
.btn.fantome{border-color:transparent;box-shadow:none;background:none}
.btn.fantome:hover{background:var(--s-3)}
.btn.danger{color:var(--crit);border-color:var(--crit-bd);background:var(--crit-bg)}
.btn.danger:hover{background:#F7DBE0;border-color:var(--crit)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* barre de filtres — une seule, au-dessus de tout ce qu'elle porte */
.barre{background:var(--s-2);border-bottom:1px solid var(--line);
       padding:var(--sp-2) var(--sp-5);display:flex;align-items:center;gap:var(--sp-2);
       flex-wrap:wrap;flex:0 0 auto}
.barre .lib{font-size:var(--t-micro);font-weight:800;letter-spacing:.6px;
            text-transform:uppercase;color:var(--ink-4)}
.barre .sp{flex:1}
.barre .meta{font-size:var(--t-mini);color:var(--ink-3);font-weight:600}
/* Sépare deux jeux de filtres sur la même barre — les familles d'un côté,
   le procédé et le magasin de l'autre. */
.barre .sep{width:1px;height:18px;background:var(--line-2);margin:0 var(--sp-1)}
/* Une donnée absente, écrite en gris : « — » en noir se lit comme une
   valeur, alors que c'est un trou. */
.gris{color:var(--ink-3)}

/* ================= poste magasinier : la saisie du jour =================
   Cibles larges et chiffres gros : cet écran se remplit debout, dans un
   parc, parfois avec des gants. Les pas ± existent pour ça — taper « 12 »
   au clavier n'est pas toujours possible. */
.fil-etapes{display:flex;gap:var(--sp-1);padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--line);background:var(--s-2);flex-wrap:wrap}
.fil-et{display:flex;align-items:center;gap:var(--sp-2);background:var(--s-1);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 14px;
  font:inherit;font-size:var(--t-sm);color:var(--ink-3);cursor:pointer}
.fil-et .n{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--s-3);
  font-size:var(--t-mini);font-weight:800;color:var(--ink-3)}
.fil-et.faite{color:var(--ink-1);cursor:pointer}
.fil-et.faite .n{background:var(--ok-bg);color:var(--ok)}
.fil-et.faite .v{color:var(--mmd-red);font-weight:700}
.fil-et.on{background:var(--s-inv);border-color:var(--s-inv);color:#fff;font-weight:700}
.fil-et.on .n{background:var(--mmd-red);color:#fff}
.fil-et:disabled{opacity:.45;cursor:default}

.etape{padding:var(--sp-5)}
.etape .q{font-size:var(--t-xl);font-weight:700;margin-bottom:var(--sp-1)}
.etape .q-s{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:var(--sp-4);max-width:900px}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.carte-choix{text-align:left;background:var(--s-1);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:var(--sp-4);cursor:pointer;font:inherit;
  box-shadow:var(--e-1);transition:var(--m-fast)}
.carte-choix:hover:not(.off){border-color:var(--mmd-red);box-shadow:var(--e-2);transform:translateY(-1px)}
.carte-choix .t{font-size:var(--t-lg);font-weight:700;color:var(--ink-1)}
.carte-choix .s{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;min-height:16px}
.carte-choix .c{margin-top:var(--sp-3);font-size:var(--t-sm);font-weight:700;color:var(--mmd-red)}
/* Une famille absente de ce magasin : montrée mais fermée. La masquer
   ferait croire qu'elle n'existe pas. */
.carte-choix.off{opacity:.4;cursor:not-allowed}
.carte-choix.off .c{color:var(--ink-4)}

/* Le pas de saisie : − valeur + . */
.pas{display:inline-flex;align-items:center;gap:2px}
.pas input{width:64px;height:30px;text-align:center;border:1px solid var(--line-2);
  border-radius:var(--r-md);font:inherit;font-size:var(--t-lg);font-weight:700;
  background:var(--s-1);-moz-appearance:textfield}
.pas input::-webkit-outer-spin-button,.pas input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.pas input:focus{border-color:var(--mmd-red);outline:2px solid var(--crit-bg)}
.pas .mo{width:26px;height:30px;border:1px solid var(--line-2);background:var(--s-2);
  border-radius:var(--r-md);font-size:15px;line-height:1;cursor:pointer;color:var(--ink-2)}
.pas .mo:hover{background:var(--s-inv);border-color:var(--s-inv);color:#fff}

.rech-saisie{flex:1;min-width:220px;height:30px;border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:0 10px;font:inherit;background:var(--s-1)}
.pied-saisie{border-top:1px solid var(--line);border-bottom:0;position:sticky;bottom:0;z-index:4}
.pied-saisie .recap{font-size:var(--t-sm);color:var(--ink-2)}
.pied-saisie .recap.ok b{color:var(--ok)}
.pied-saisie .recap.crit b{color:var(--crit)}
.pied-saisie .sp{flex:1}

/* ---- Arborescence du catalogue : grande famille, puis petite ----
   Deux niveaux et rien de plus. L'indentation seule les distingue :
   des chevrons pliables demanderaient un clic avant de voir, alors que
   l'arbre entier tient dans la hauteur de l'écran. */
.arbre{display:flex;flex-direction:column;max-height:calc(100vh - 320px);overflow:auto}
.arbre .arb-n{display:flex;align-items:center;gap:var(--sp-2);width:100%;
  background:none;border:0;border-left:3px solid transparent;cursor:pointer;
  padding:var(--row) var(--sp-4);font:inherit;font-size:var(--t-sm);
  color:var(--ink-1);text-align:left}
.arbre .arb-n:hover{background:var(--s-3)}
.arbre .arb-n.on{background:var(--crit-bg);border-left-color:var(--mmd-red);font-weight:700}
.arbre .arb-n .lib{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arbre .arb-n .cpt{font-size:var(--t-mini);color:var(--ink-3);background:var(--s-3);
  border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
.arbre .arb-n.on .cpt{background:#fff}
.arbre .n0{font-weight:700;border-bottom:1px solid var(--line)}
.arbre .n1{font-weight:700;background:var(--s-2);border-top:1px solid var(--line)}
.arbre .n1.on{background:var(--crit-bg)}
.arbre .n2{padding-left:var(--sp-6);color:var(--ink-2);font-weight:400}
/* Une petite famille déduite des désignations, pas déclarée par la
   Direction Commerciale : le point le dit sans crier. */
.arbre .deduite{color:var(--warn);font-weight:700}
.jeton{height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);
       background:var(--s-1);font-size:var(--t-xs);font-weight:600;color:var(--ink-2);
       transition:var(--m-fast);box-shadow:var(--e-1)}
.jeton:hover{border-color:var(--ink-4);color:var(--ink-1)}
.jeton.on{background:var(--mmd-arsenic);border-color:var(--mmd-arsenic);color:#fff}
.seg{display:inline-flex;background:var(--s-1);border:1px solid var(--line-2);
     border-radius:var(--r-md);padding:2px;box-shadow:var(--e-1)}
.seg button{padding:3px 10px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);
            border-radius:var(--r-sm);transition:var(--m-fast)}
.seg button:hover{color:var(--ink-1);background:var(--s-3)}
.seg button.on{background:var(--mmd-arsenic);color:#fff}

/* ================================================================
   Grille de contenu et panneaux
   ================================================================ */
.corps{
  flex:1;overflow-y:auto;padding:var(--pad) var(--sp-5) var(--sp-6);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-3);align-content:start;
  /* Chaque rangée à la hauteur de son contenu : sinon la grille répartit
     la hauteur en rangées égales et overflow:hidden rogne les axes. */
  grid-auto-rows:min-content;
}
.corps.plein{padding:0;display:block;overflow:hidden}
.c12{grid-column:span 12}.c9{grid-column:span 9}.c8{grid-column:span 8}.c7{grid-column:span 7}
.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
/* c3 + c9 : l'arborescence du catalogue et la table des références. Le
   couple reste côte à côte plus longtemps que c4/c8 — un arbre à deux
   niveaux n'a pas besoin d'un tiers de l'écran, la table si. */
@media (max-width:1500px){.c8,.c7{grid-column:span 12}.c5,.c4{grid-column:span 6}
                          .c3{grid-column:span 4}.c9{grid-column:span 8}}
@media (max-width:1080px){.c6,.c5,.c4,.c3,.c9{grid-column:span 12}}

.pan{background:var(--s-1);border:1px solid var(--line);border-radius:var(--r-lg);
     box-shadow:var(--e-1);display:flex;flex-direction:column;overflow:hidden;
     transition:box-shadow var(--m-med)}
.pan:hover{box-shadow:var(--e-2)}
.pan-h{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
       display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.pan-h h3{font-size:var(--t-md);font-weight:700;letter-spacing:-.1px}
.pan-h .st{font-size:var(--t-mini);color:var(--ink-3);font-weight:500}
.pan-h .sp{flex:1}
.pan-b{padding:var(--sp-4);flex:1}
.pan-b.serre{padding:0}
.mini-btn{height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:var(--t-micro);
          font-weight:700;letter-spacing:.3px;color:var(--ink-3);border:1px solid transparent;
          transition:var(--m-fast);text-transform:uppercase}
.mini-btn:hover{background:var(--s-3);color:var(--ink-1);border-color:var(--line)}
.mini-btn.on{background:var(--s-3);color:var(--ink-1);border-color:var(--line-2)}

/* ---------------- Hero + tuiles KPI ---------------- */
.kpis{grid-column:span 12;display:grid;gap:var(--sp-3)}
@media (max-width:1500px){.kpis{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:900px){.kpis{grid-template-columns:1fr!important}}

.hero{background:linear-gradient(158deg,#2A333A 0%,var(--mmd-arsenic) 48%,#1E2A38 100%);
      border:1px solid #1A2228;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
      color:#fff;position:relative;overflow:hidden;box-shadow:var(--e-2);
      display:flex;flex-direction:column;justify-content:space-between;min-height:118px}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
             background:radial-gradient(circle,rgba(222,24,47,.24) 0%,transparent 68%)}
.hero .lb{font-size:var(--t-micro);font-weight:800;letter-spacing:.8px;text-transform:uppercase;
          color:rgba(255,255,255,.5)}
.hero .val{font-size:var(--t-hero);font-weight:800;letter-spacing:-1.6px;line-height:1;
           margin:var(--sp-2) 0 2px}
.hero .val small{font-size:15px;font-weight:600;letter-spacing:-.2px;
                 color:rgba(255,255,255,.55);margin-left:5px}
.hero .sous{font-size:var(--t-xs);color:rgba(255,255,255,.55)}
.hero .pied{display:flex;align-items:flex-end;gap:var(--sp-4);margin-top:var(--sp-4);
            position:relative;z-index:1}
.hero .obj{flex:1}
.hero .obj .l{display:flex;justify-content:space-between;font-size:var(--t-mini);
              color:rgba(255,255,255,.55);margin-bottom:5px}
.hero .obj .l b{color:#fff;font-weight:700}
.hero .piste{background:rgba(255,255,255,.14)}
.hero .piste i{background:linear-gradient(90deg,var(--mmd-red),#F2596A)}

/* L'objectif se règle là où il se lit. */
.hero .obj.cliquable{cursor:pointer;border-radius:var(--r-md);padding:5px 8px;margin:-5px -8px;
                     transition:var(--m-fast)}
.hero .obj.cliquable:hover{background:rgba(255,255,255,.08)}
.hero .obj.cliquable:hover .crayon{opacity:1}
.hero .obj .crayon{opacity:0;transition:var(--m-fast);font-size:11px;margin-left:2px}
.hero .obj-vide{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.72);
                font-size:var(--t-sm);font-weight:600;border:1px dashed rgba(255,255,255,.28);
                border-radius:var(--r-md);padding:6px 12px;transition:var(--m-fast)}
.hero .obj-vide:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.hero .obj-vide .plus{font-size:15px;font-weight:800;line-height:1}
.hero .obj-muet{font-size:var(--t-mini);color:rgba(255,255,255,.4)}

.jauge-obj.cliquable{cursor:pointer;border-radius:var(--r-md);padding:6px;margin:-6px;
                     transition:var(--m-fast)}
.jauge-obj.cliquable:hover{background:var(--s-3)}
.jauge-obj .definir{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-mini);
                    font-weight:700;color:var(--mmd-red);margin-top:4px}
.jauge-obj .definir:hover{text-decoration:underline}
.hero .delta.pos{background:rgba(46,142,142,.22);color:#7FD8C8}
.hero .delta.neg{background:rgba(222,24,47,.22);color:#FF9BA8}

.kpi{background:var(--s-1);border:1px solid var(--line);border-radius:var(--r-lg);
     padding:var(--sp-3) var(--sp-4);position:relative;overflow:hidden;box-shadow:var(--e-1);
     transition:var(--m-fast);display:flex;flex-direction:column;justify-content:space-between;
     min-height:104px}
.kpi:hover{box-shadow:var(--e-2);border-color:var(--line-2);transform:translateY(-1px)}
.kpi .lb{font-size:var(--t-micro);font-weight:800;letter-spacing:.6px;text-transform:uppercase;
         color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .vl{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.7px;line-height:1.1;
         margin-top:var(--sp-1)}
.kpi .vl small{font-size:var(--t-xs);font-weight:600;color:var(--ink-3);margin-left:3px}
.kpi .bas{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.kpi .sub{font-size:var(--t-mini);color:var(--ink-3);white-space:nowrap;overflow:hidden;
          text-overflow:ellipsis}
.kpi .spark{position:absolute;right:var(--sp-3);top:var(--sp-3);opacity:.9;pointer-events:none}
/* Tuile qui appelle une action maintenant — un camion qui attend son visa.
   Le liseré suffit : une tuile entièrement colorée se lirait comme une
   erreur alors qu'il s'agit d'une file d'attente normale. */
.kpi.alerte{border-color:var(--warn)}
.kpi.alerte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
                    background:var(--warn)}
.kpi.alerte .vl{color:var(--warn)}

/* Écritures comptables. Une écriture est un BLOC : la pièce en tête, ses
   lignes dessous. L'étaler en tableau plat ferait perdre la seule chose
   qui compte — quelles lignes s'équilibrent entre elles. */
.ecr{border:1px solid var(--line);border-radius:var(--r-md);margin:6px 0;
     background:var(--s-1);overflow:hidden}
.ecr-tete{display:flex;align-items:center;gap:var(--sp-2);padding:6px 9px;
          background:var(--s-2);border-bottom:1px solid var(--line);
          font-size:var(--t-mini)}
.ecr-lib{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
         color:var(--ink-2)}
.ecr-mt{font-weight:700;font-variant-numeric:tabular-nums}
.ecr-lignes{width:100%;border-collapse:collapse;font-size:var(--t-mini)}
.ecr-lignes td{padding:3px 9px;border-bottom:1px solid var(--line)}
.ecr-lignes tr:last-child td{border-bottom:0}
.ecr-lignes .num{text-align:right;font-variant-numeric:tabular-nums}
.ecr-c{font-weight:700;width:64px}
/* Annulée par avoir : l'écriture RESTE, on n'efface pas une écriture
   passée. Elle s'estompe, elle ne disparaît pas. */
.ecr-annulee{opacity:.62}

.delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-xs);font-weight:700;
       padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.delta.pos{background:var(--ok-bg);color:var(--ok)}
.delta.neg{background:var(--crit-bg);color:var(--crit)}
.delta.neutre{background:var(--s-3);color:var(--ink-3)}

/* ================================================================
   Graphiques
   ================================================================ */
.legende{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;
    color:var(--ink-2)}
.lg .cle{width:14px;height:2px;border-radius:1px;flex:0 0 14px}
.lg .cle.rect{height:9px;width:9px;border-radius:2px}
.graphe{position:relative;width:100%}
.graphe svg{display:block;width:100%;overflow:visible}
.grille-l{stroke:var(--line);stroke-width:1}
.axe-t{font-size:9.5px;fill:var(--ink-4);font-weight:600}
.axe-t.num{font-variant-numeric:tabular-nums}
.viseur{stroke:var(--ink-4);stroke-width:1;opacity:0;transition:opacity var(--m-fast)}
.graphe.survol .viseur{opacity:.5}

.bulle{position:fixed;z-index:300;pointer-events:none;opacity:0;background:var(--ink-1);
       color:#fff;border-radius:var(--r-md);padding:8px 10px;box-shadow:var(--e-4);
       min-width:150px;transition:opacity var(--m-fast)}
.bulle.on{opacity:1}
.bulle .t{font-size:var(--t-mini);font-weight:700;color:rgba(255,255,255,.62);letter-spacing:.4px;
          text-transform:uppercase;margin-bottom:5px}
.bulle .r{display:flex;align-items:center;gap:7px;padding:2px 0}
.bulle .r .cle{width:12px;height:2px;border-radius:1px;flex:0 0 12px}
.bulle .r .v{font-weight:700;font-size:var(--t-md);font-variant-numeric:tabular-nums}
.bulle .r .n{font-size:var(--t-xs);color:rgba(255,255,255,.6);margin-left:auto;padding-left:12px}

/* barres horizontales */
.barres{display:flex;flex-direction:column}
.bh{display:flex;align-items:center;gap:var(--sp-3);padding:5px 0}
.bh+.bh{border-top:1px solid var(--line)}
.bh .et{width:150px;flex:0 0 150px;font-size:var(--t-sm);font-weight:600;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh .tr{flex:1;height:20px;display:flex;align-items:center}
.bh .tr i{height:14px;border-radius:0 var(--r-md) var(--r-md) 0;display:block;
          transition:width var(--m-slow);min-width:2px}
.bh .vl{width:104px;text-align:right;font-size:var(--t-sm);font-weight:700;
        font-variant-numeric:tabular-nums}
.bh .cv{width:56px;text-align:right;font-size:var(--t-mini);font-weight:600;color:var(--ink-3);
        font-variant-numeric:tabular-nums}
.bh:hover .tr i{filter:brightness(1.08)}

/* beignet */
.beignet{display:flex;align-items:center;gap:var(--sp-5)}
.beignet>svg{flex:0 0 auto}
.b-liste{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.b-ligne{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);padding:3px 0;
         border-radius:var(--r-sm);transition:var(--m-fast)}
.b-ligne:hover{background:var(--s-3)}
.b-ligne em{width:9px;height:9px;border-radius:2px;flex:0 0 9px;font-style:normal}
.b-ligne .n{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-ligne .v{font-weight:700;font-variant-numeric:tabular-nums}
.b-ligne .p{width:44px;text-align:right;color:var(--ink-3);font-size:var(--t-xs);
            font-variant-numeric:tabular-nums}

/* vue tableau des graphiques (équivalent accessible) */
.vue-tbl{display:none}
.vue-tbl.on{display:block}
.graphe-zone.off{display:none}

/* ================================================================
   Tableaux
   ================================================================ */
.tbl-zone{overflow:auto}
/* Une table plus large que son panneau défile au lieu d'écraser ses
   colonnes : une désignation coupée à « ACIERS MARCHAND - COR… » ne
   désigne plus rien. */
.tbl-zone>table{min-width:max-content}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs)}
thead th{position:sticky;top:0;z-index:3;background:var(--s-2);text-align:left;
         font-size:var(--t-micro);font-weight:800;letter-spacing:.6px;text-transform:uppercase;
         color:var(--ink-4);padding:8px var(--sp-3);border-bottom:1px solid var(--line-2);
         white-space:nowrap;user-select:none}
thead th.num{text-align:right}
thead th.triable{cursor:pointer;transition:var(--m-fast)}
thead th.triable:hover{color:var(--ink-2);background:var(--s-3)}
thead th .fl{opacity:0;font-size:8px;margin-left:3px}
thead th.tri .fl{opacity:.7}
tbody td{padding:var(--row) var(--sp-3);border-bottom:1px solid var(--line);white-space:nowrap;
         vertical-align:middle}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr{transition:background var(--m-fast)}
tbody tr:hover{background:var(--s-2)}
tbody tr.sel{background:rgba(222,24,47,.05)}
tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--mmd-red)}
tbody tr[data-clic]{cursor:pointer}
tfoot td{padding:8px var(--sp-3);border-top:1px solid var(--line-2);background:var(--s-2);
         font-weight:700;font-variant-numeric:tabular-nums}
.vide{padding:36px;text-align:center;color:var(--ink-3);font-size:var(--t-md)}

.cell-org{display:flex;align-items:center;gap:9px;min-width:0}
.sigle{width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-md);display:grid;
       place-items:center;font-size:var(--t-mini);font-weight:800;color:#fff;letter-spacing:-.3px}
.cell-org .n{font-weight:600;line-height:1.25;max-width:190px;overflow:hidden;
             text-overflow:ellipsis;white-space:nowrap;display:block}
.cell-org .s{font-size:var(--t-mini);color:var(--ink-3);line-height:1.25}

.pastille{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-mini);font-weight:700;
          padding:2px 8px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap}
.pastille::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.p-gris{background:var(--s-3);color:var(--ink-2);border-color:var(--line-2)}
.p-bleu{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.p-vert{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.p-rouge{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-bd)}
.p-ambre{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.p-orange{background:var(--serious-bg);color:var(--serious);border-color:var(--serious-bd)}

.etiq{font-size:var(--t-mini);font-weight:600;color:var(--ink-2);background:var(--s-3);
      border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px}
.jauge{display:inline-flex;align-items:center;gap:7px}
.jauge .p{width:46px;height:5px;background:var(--s-3);border-radius:var(--r-pill);
          overflow:hidden;border:1px solid var(--line)}
.jauge .p i{display:block;height:100%;border-radius:var(--r-pill);transition:width var(--m-slow)}
.jauge .t{font-size:var(--t-mini);font-weight:700;font-variant-numeric:tabular-nums;
          color:var(--ink-2);min-width:28px}
/* Mode inventaire : saisie du comptage et écart en direct */
.cpt-inv{width:76px;height:26px;border:1px solid var(--line-2);border-radius:var(--r-sm);
         padding:0 7px;text-align:right;font-variant-numeric:tabular-nums;background:var(--s-1)}
.cpt-inv:focus{border-color:var(--mmd-red);box-shadow:0 0 0 3px rgba(222,24,47,.1);outline:none}
.ecart{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-4)}
.ecart.plus{color:var(--ok)}
.ecart.moins{color:var(--crit)}
tbody tr.modifie{background:rgba(232,157,42,.07)}
tbody tr.modifie:hover{background:rgba(232,157,42,.12)}

/* Sélection multiple */
.coche{width:14px;height:14px;accent-color:var(--mmd-red);cursor:pointer;vertical-align:middle}
.coche-vide{display:inline-block;width:14px;height:14px;border:1px solid var(--line-2);
            border-radius:2px;background:var(--s-3);vertical-align:middle;cursor:not-allowed}
.sel-info{font-size:var(--t-mini);font-weight:700;color:var(--mmd-red);
          background:var(--crit-bg);border:1px solid var(--crit-bd);
          border-radius:var(--r-pill);padding:2px 9px}

/* Action au niveau de la ligne : discrète, révélée au survol. */
.ic-tbl{width:26px;height:24px;display:grid;place-items:center;border-radius:var(--r-sm);
        color:var(--ink-4);opacity:.45;transition:var(--m-fast)}
tbody tr:hover .ic-tbl{opacity:1}
.ic-tbl:hover{background:var(--s-3);color:var(--mmd-red)}
.ic-tbl:focus-visible{opacity:1}

.pers{display:inline-flex;align-items:center;gap:6px}
.pers .a{width:20px;height:20px;border-radius:var(--r-pill);flex:0 0 20px;display:grid;
         place-items:center;font-size:9px;font-weight:800;color:#fff}

/* ================================================================
   Vue scindée : liste + panneau 360°
   ================================================================ */
/* Le volet de droite tient 45 % : c'est là qu'on crée un compte, qu'on le
   corrige, qu'on lance une proforma. En colonne de 356 px, les boutons
   d'action se repliaient sur trois rangs et la fiche déroulait ses six
   sections. La liste, elle, rend deux colonnes chiffrées — délai et
   plafond passent sous le nom du compte. */
.scinde{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,45%);overflow:hidden}
.scinde .colonne{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)}
.scinde .colonne .defile{flex:1;overflow:auto;background:var(--s-1)}
@media (max-width:1180px){.scinde{grid-template-columns:minmax(0,1fr) 380px}}

/* Segments de travail, au-dessus de la liste. */
.segments{display:flex;align-items:center;gap:2px;padding:0 var(--sp-3);height:36px;flex:0 0 auto;
          background:var(--s-1);border-bottom:1px solid var(--line);overflow-x:auto}
.segments .sp{flex:1}
.seg{height:100%;padding:0 10px;border:0;background:none;font-family:inherit;cursor:pointer;
     font-size:var(--t-sm);font-weight:700;color:var(--ink-3);white-space:nowrap;
     display:inline-flex;align-items:center;gap:5px;border-bottom:2px solid transparent}
.seg:hover{color:var(--ink-1)}
.seg.on{color:var(--ink-1);border-bottom-color:var(--mmd-red)}
.seg .c{font-size:var(--t-micro);color:var(--ink-4);font-variant-numeric:tabular-nums}
.seg.lien{font-weight:600;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.seg:focus-visible{outline:2px solid var(--mmd-red);outline-offset:-2px}

/* En-tête de groupe dans la liste des comptes. */
.scinde tr.groupe td{background:var(--s-3);font-size:var(--t-micro);letter-spacing:.06em;
                     text-transform:uppercase;font-weight:800;color:var(--ink-3);padding:5px var(--sp-3)}
.scinde tr.groupe td .n{color:var(--ink-4);font-weight:600;margin-left:6px;text-transform:none;
                        letter-spacing:0}
.scinde tr.eteinte td .cell-org .n{color:var(--ink-3)}
.scinde .sous-ligne{font-size:var(--t-micro);color:var(--ink-3);margin-top:3px;
                    font-variant-numeric:tabular-nums}
.g-piste.mince{height:4px}

.detail{display:flex;flex-direction:column;overflow:hidden;background:var(--s-1)}
.d-tete{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);flex:0 0 auto}
.d-haut{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--sp-3)}
.mono{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;
      font-size:var(--t-md);font-weight:800;color:#fff;flex:0 0 36px;letter-spacing:-.3px}
.d-haut h2{font-size:var(--t-lg);font-weight:700;letter-spacing:-.2px;line-height:1.25}
.d-haut .meta{font-size:var(--t-mini);color:var(--ink-3);font-weight:500;margin-top:2px}
/* La fiche est étroite : au-delà de trois actions, la barre doit passer
   à la ligne. Sans `wrap`, le dernier bouton — la suppression — sortait
   simplement du cadre, invisible et inatteignable. */
.d-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-3)}
.d-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.d-actions .btn.danger{flex:0 0 auto}
.d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.d-stat{background:var(--s-1);padding:7px 9px}
.d-stat .l{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
           color:var(--ink-4)}
.d-stat .v{font-size:var(--t-lg);font-weight:700;letter-spacing:-.3px;line-height:1.3;
           font-variant-numeric:tabular-nums}
.d-corps{flex:1;overflow:auto}

/* Onglets de la fiche. Les trois volets sont rendus ensemble et masqués
   par CSS : basculer ne coûte pas un appel au serveur. */
.f-onglets{display:flex;gap:2px;padding:0 var(--sp-3);flex:0 0 auto;
           background:var(--s-1);border-bottom:1px solid var(--line)}
.f-onglets a{padding:8px 10px;font-size:var(--t-sm);font-weight:700;color:var(--ink-3);
             cursor:pointer;border-bottom:2px solid transparent;
             display:inline-flex;align-items:center;gap:5px}
.f-onglets a:hover{color:var(--ink-1)}
.f-onglets a.on{color:var(--ink-1);border-bottom-color:var(--mmd-red)}
.f-onglets a .c{font-size:var(--t-micro);color:var(--ink-4);font-variant-numeric:tabular-nums}
.volet{display:none}
.volet.on{display:block}

/* La largeur gagnée sert à voir l'encours et l'identité côte à côte,
   plutôt qu'à étirer six sections empilées. Sous 1320 px la place
   manque : on repasse en une colonne. */
.f-deux{display:grid;grid-template-columns:1fr 1fr}
.f-deux > div:first-child{border-right:1px solid var(--line)}
@media (max-width:1320px){
  .f-deux{grid-template-columns:1fr}
  .f-deux > div:first-child{border-right:0}
}
.sec{border-bottom:1px solid var(--line);padding:var(--sp-3) var(--sp-4)}
.sec-t{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-2);font-size:var(--t-micro);
       font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-4)}
.sec-t .sp{flex:1}
.sec-t a{color:var(--mmd-red);font-size:var(--t-mini);cursor:pointer;text-decoration:none;
         font-weight:700;letter-spacing:.2px}
.sec-t a:hover{text-decoration:underline}
.d-vide{padding:26px var(--sp-4);text-align:center;color:var(--ink-3);font-size:var(--t-sm)}
.sec .rien{font-size:var(--t-sm);color:var(--ink-3)}

.g-ligne{display:flex;justify-content:space-between;font-size:var(--t-xs);margin-bottom:5px}
.g-ligne b{font-variant-numeric:tabular-nums;font-weight:700}
.g-piste{height:8px;background:var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);
         overflow:hidden;display:flex;gap:0}
.g-piste i{display:block;height:100%}
.g-legende{display:flex;gap:11px;margin-top:6px;font-size:var(--t-mini);color:var(--ink-2);
           flex-wrap:wrap}
.g-legende span{display:flex;align-items:center;gap:4px}
.g-legende em{width:7px;height:7px;border-radius:2px;font-style:normal}

.ct{display:flex;align-items:center;gap:9px;padding:5px 0}
.ct+.ct{border-top:1px dashed var(--line)}
.ct .av{width:26px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center;
        font-size:var(--t-mini);font-weight:800;color:#fff;flex:0 0 26px}
.ct .nm{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.ct .rl{font-size:var(--t-mini);color:var(--ink-3);line-height:1.3}

.frise{position:relative;padding-left:var(--sp-4)}
.frise::before{content:"";position:absolute;left:5px;top:6px;bottom:8px;width:1px;
               background:var(--line-2)}
.ev{position:relative;padding-bottom:var(--sp-3)}
.ev:last-child{padding-bottom:0}
.ev::before{content:"";position:absolute;left:-15px;top:4px;width:9px;height:9px;border-radius:50%;
            background:var(--s-1);border:2px solid var(--ink-4)}
.ev.c1::before{border-color:var(--c1)}.ev.c2::before{border-color:var(--c2)}
.ev.c3::before{border-color:var(--c3)}.ev.c4::before{border-color:var(--c4)}
.ev .t{font-size:var(--t-sm);font-weight:600;line-height:1.4}
.ev .d{font-size:var(--t-mini);color:var(--ink-3);margin-top:2px;line-height:1.45}
.ev .d b{color:var(--ink-2);font-weight:600}

.pl{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:var(--t-sm)}
.pl+.pl{border-top:1px dashed var(--line)}
.pl .tx{flex:1;line-height:1.35;min-width:0}
.pl .dt{font-size:var(--t-sm);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ================================================================
   Kanban
   ================================================================ */
.kanban{display:flex;gap:1px;background:var(--line);height:100%;overflow-x:auto}
.kcol{background:var(--s-3);min-width:228px;flex:1;display:flex;flex-direction:column;
      overflow:hidden;transition:background var(--m-fast)}
.kcol.survol{background:#E9EFE9}
.kcol>h3{padding:var(--sp-2) var(--sp-3);background:var(--s-1);border-bottom:1px solid var(--line)}
.kcol>h3 .t{display:flex;align-items:center;gap:6px;font-size:var(--t-micro);font-weight:800;
            letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.kcol>h3 .t em{width:7px;height:7px;border-radius:2px;font-style:normal}
.kcol>h3 .t .n{margin-left:auto;font-size:var(--t-micro);color:var(--ink-3);background:var(--s-3);
                border:1px solid var(--line);border-radius:var(--r-pill);padding:0 6px;
                font-variant-numeric:tabular-nums}
.kcol>h3 .s{font-size:var(--t-lg);font-weight:700;letter-spacing:-.4px;
            font-variant-numeric:tabular-nums;margin-top:2px}
.kcol>h3 .s small{font-size:var(--t-micro);font-weight:600;color:var(--ink-3)}
.klist{flex:1;overflow-y:auto;padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.opp{background:var(--s-1);border:1px solid var(--line);border-left:3px solid var(--ink-4);
     border-radius:var(--r-md);padding:var(--sp-2) 10px;cursor:grab;box-shadow:var(--e-1);
     transition:var(--m-fast)}
.opp:hover{box-shadow:var(--e-2);transform:translateY(-1px)}
.opp.drag{opacity:.4}
.opp .n{font-size:var(--t-sm);font-weight:700;line-height:1.3}
.opp .c{font-size:var(--t-mini);color:var(--ink-3);font-weight:600;margin-bottom:6px}
.opp .f{display:flex;align-items:center;gap:6px}
.opp .m{font-size:var(--t-md);font-weight:700;font-variant-numeric:tabular-nums}
.opp .p{margin-left:auto;font-size:var(--t-micro);font-weight:700;color:var(--ink-2);
        background:var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 6px}

/* ================================================================
   Modale et formulaires
   ================================================================ */
.voile{position:fixed;inset:0;background:rgba(28,34,38,.5);display:none;place-items:center;
       z-index:200;padding:24px;backdrop-filter:blur(2px)}
.voile.on{display:grid}
.modale{background:var(--s-1);border-radius:var(--r-lg);width:min(720px,100%);max-height:88vh;
        display:flex;flex-direction:column;box-shadow:var(--e-4);overflow:hidden}
.modale.large{width:min(1040px,100%)}
.modale>h2{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
           font-size:var(--t-lg);font-weight:700;display:flex;align-items:center;gap:10px}
.modale>h2 .sp{flex:1}
.modale>h2 .x{color:var(--ink-3);font-size:19px;line-height:1;padding:0 4px}
.modale>h2 .x:hover{color:var(--mmd-red)}
.mbody{padding:var(--sp-4);overflow:auto;flex:1;background:var(--s-2)}
/* Onglets d'une fiche : les groupes restent tous dans le DOM, seul
   l'affichage bascule. La validation lit donc les champs des onglets
   jamais ouverts — un prix saisi puis masqué doit partir quand même. */
.mtabs{display:flex;gap:2px;margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
       padding:0 var(--sp-4);background:var(--s-1);border-bottom:1px solid var(--line)}
.mtabs button{background:none;border:0;border-bottom:2px solid transparent;
       padding:var(--sp-3) var(--sp-3);font:inherit;font-size:var(--t-sm);
       color:var(--ink-2);cursor:pointer}
.mtabs button:hover{color:var(--ink-1);background:var(--s-2)}
.mtabs button.on{color:var(--mmd-red);border-bottom-color:var(--mmd-red);font-weight:700}
.mtab{display:none}
.mtab.on{display:block}
.mfoot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);background:var(--s-1);
       display:flex;gap:var(--sp-2);justify-content:flex-end}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.champ{display:flex;flex-direction:column}
.champ.large{grid-column:1/-1}
.champ label{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
             color:var(--ink-4);margin-bottom:4px}
.champ input,.champ select,.champ textarea{height:30px;border:1px solid var(--line-2);
       border-radius:var(--r-md);padding:0 9px;outline:none;background:var(--s-1);
       transition:var(--m-fast)}
.champ textarea{height:70px;padding:7px 9px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--mmd-red);
       box-shadow:0 0 0 3px rgba(222,24,47,.1)}
/* Précision secondaire dans une cellule ou une phrase — la classe était
   déjà employée dans les tableaux (« aucune », « jamais relancé ») sans
   qu'aucune règle ne la porte : elle s'y affichait à la taille du texte
   principal, et n'était donc pas secondaire du tout. */
.aide{font-size:var(--t-mini);color:var(--ink-3)}
.champ .aide{margin-top:3px}

/* ---------------- Éditeur de devis (feuille de document) ---------------- */
.feuille{background:var(--s-1);border:1px solid var(--line);border-radius:var(--r-md);
         overflow:hidden;box-shadow:var(--e-1)}
.f-tete{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
        display:flex;align-items:flex-start;gap:var(--sp-3)}
.f-tete h3{font-size:var(--t-lg);font-weight:700;letter-spacing:-.2px}
.f-tete .rf{font-size:var(--t-mini);color:var(--ink-3);font-weight:600;margin-top:2px}
.f-tete .sp{flex:1}
.f-tete .em{text-align:right}
.f-tete .em .l{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
               color:var(--ink-4)}
.f-tete .em .v{font-size:var(--t-md);font-weight:700}
.f-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
          border-bottom:1px solid var(--line)}
.f-champ{background:var(--s-1);padding:7px var(--sp-3)}
.f-champ label{display:block;font-size:9px;font-weight:800;letter-spacing:.5px;
               text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.f-champ input,.f-champ select{width:100%;border:0;border-bottom:1px solid transparent;
       background:transparent;font-size:var(--t-md);font-weight:600;padding:1px 0;outline:none}
.f-champ input:hover,.f-champ select:hover{border-bottom-color:var(--line-2)}
.f-champ input:focus,.f-champ select:focus{border-bottom-color:var(--mmd-red)}

.ed-lignes{width:100%;border-collapse:separate;border-spacing:0}
.ed-lignes th{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
              color:var(--ink-4);text-align:left;padding:6px 8px;
              border-bottom:1px solid var(--line-2);background:var(--s-2)}
.ed-lignes th.num{text-align:right}
.ed-lignes td{padding:3px 8px;border-bottom:1px solid var(--line)}
.ed-lignes input{width:100%;height:26px;border:1px solid transparent;border-radius:var(--r-sm);
                 padding:0 6px;background:transparent;outline:none;font-variant-numeric:tabular-nums}
.ed-lignes input:hover{border-color:var(--line)}
.ed-lignes input:focus{border-color:var(--mmd-red);background:var(--s-1)}
.ed-lignes input.num{text-align:right}
.ed-lignes .tot{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
                white-space:nowrap;padding-right:10px}
.ed-lignes .sup{color:var(--ink-3);font-size:15px;line-height:1;padding:2px 6px;
                border-radius:var(--r-sm)}
.ed-lignes .sup:hover{color:var(--mmd-red);background:var(--crit-bg)}
.ed-vide{padding:22px;text-align:center;color:var(--ink-3);font-size:var(--t-sm);
         border-bottom:1px solid var(--line)}
.ed-ajout{padding:var(--sp-2) var(--sp-3);display:flex;gap:var(--sp-2);align-items:center;
          background:var(--s-2);border-bottom:1px solid var(--line)}
.ed-ajout select{flex:1;height:var(--btn);border:1px solid var(--line-2);border-radius:var(--r-md);
                 padding:0 9px;background:var(--s-1)}
.ed-totaux{display:flex;justify-content:flex-end;gap:var(--sp-6);padding:var(--sp-3) var(--sp-4);
           background:var(--s-2)}
.ed-tot{text-align:right}
.ed-tot .l{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
           color:var(--ink-4)}
.ed-tot .v{font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums;
           letter-spacing:-.3px}
.ed-tot.fort .v{font-size:var(--t-2xl);color:var(--mmd-red)}
/* Une MENTION n'est pas un total : l'AIB est compris dans le hors-taxe,
   il ne s'ajoute à rien. Il se lit donc en retrait, pour qu'on ne le
   compte pas deux fois du regard. */
.ed-tot.mention .l,.ed-tot.mention .v{color:var(--ink-3);font-style:italic}
.ed-tot.mention .v{font-size:var(--t-md);font-weight:600}

/* Désignation et unité viennent du catalogue : elles s'affichent, elles
   ne se saisissent pas. Depuis le 24 août 2026, une pièce ne porte plus
   de ligne libre. */
.ed-lignes td.fige{color:var(--ink);font-weight:600}

/* ================================================================
   Alertes, barre d'état, notifications
   ================================================================ */
.alerte{display:flex;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);
        border:1px solid;align-items:flex-start;transition:var(--m-fast)}
.alerte+.alerte{margin-top:var(--sp-2)}
.alerte .ic{width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-md);display:grid;
            place-items:center}
.alerte .t{font-size:var(--t-sm);font-weight:700;line-height:1.35}
.alerte .d{font-size:var(--t-mini);margin-top:3px;line-height:1.45;opacity:.92}
.a-crit{background:var(--crit-bg);border-color:var(--crit-bd);color:var(--crit)}
.a-crit .ic{background:var(--crit);color:#fff}
.a-warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.a-warn .ic{background:var(--warn);color:#fff}
.a-info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info)}
.a-info .ic{background:var(--info);color:#fff}
/* L'heure d'émission d'un avis : présente, jamais au premier plan.
   Elle sert à juger l'attente, pas à la lire en premier. */
.alerte .mut{opacity:.72;font-weight:500}
/* « Marquer lu » : un geste mineur, à l'échelle d'un geste mineur. */
.alerte .btn.mini{height:22px;padding:0 8px;margin-top:var(--sp-2);
                  font-size:var(--t-micro);border-radius:var(--r-sm)}

.statusbar{background:var(--s-inv-2);color:rgba(255,255,255,.5);display:flex;align-items:center;
           gap:var(--sp-4);padding:0 var(--sp-5);font-size:var(--t-mini);font-weight:500;
           border-top:1px solid #12181B}
.statusbar b{color:rgba(255,255,255,.82);font-weight:600}
.statusbar .sp{flex:1}
.statusbar .item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.pt-live{width:6px;height:6px;border-radius:50%;background:var(--mmd-celadon);
         box-shadow:0 0 0 3px rgba(46,142,142,.2)}

#notif{position:fixed;bottom:38px;left:50%;transform:translateX(-50%) translateY(14px);
       background:var(--ink-1);color:#fff;font-size:var(--t-sm);font-weight:600;padding:10px 16px;
       border-radius:var(--r-md);box-shadow:var(--e-4);opacity:0;pointer-events:none;
       transition:var(--m-med);z-index:400;border-left:3px solid var(--mmd-red);max-width:70vw}
#notif.on{opacity:1;transform:translateX(-50%) translateY(0)}
#notif.ok{border-left-color:var(--mmd-celadon)}
#notif.err{border-left-color:var(--mmd-red);background:#3A1E23}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9CEC6;border-radius:6px;border:3px solid var(--s-app)}
::-webkit-scrollbar-thumb:hover{background:#AEB4AB}
.nav-corps::-webkit-scrollbar-thumb,.tbl-zone::-webkit-scrollbar-thumb,
.defile::-webkit-scrollbar-thumb,.d-corps::-webkit-scrollbar-thumb{border-color:var(--s-1)}

@keyframes monte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.corps>*{animation:monte var(--m-slow) both}
.corps>*:nth-child(1){animation-delay:0ms}.corps>*:nth-child(2){animation-delay:40ms}
.corps>*:nth-child(3){animation-delay:80ms}.corps>*:nth-child(4){animation-delay:120ms}
.corps>*:nth-child(5){animation-delay:160ms}.corps>*:nth-child(6){animation-delay:200ms}

/* ============================================================
   Administration — comptes, profils, groupes
   ============================================================ */
.barre-outils{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* Le catalogue des droits. Une colonne par module, cases à cocher
   serrées : à 65 droits, un formulaire aéré devient un défilement. */
.grille-droits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;max-height:52vh;overflow:auto;padding:2px}
.module-droits{border:1px solid var(--bord);border-radius:6px;padding:8px 10px 10px;margin:0}
.module-droits legend{font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);padding:0 4px}
.case-droit{display:flex;align-items:flex-start;gap:7px;padding:3px 2px;
  font-size:13px;line-height:1.3;cursor:pointer}
.case-droit input{margin-top:2px;flex:none}
/* Un droit non accordable reste visible, grisé, avec sa raison en
   infobulle : une case absente laisserait croire à un oubli. */
.case-droit.grisee{color:var(--ink-3);cursor:not-allowed}
.grille-membres{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:6px;max-height:48vh;overflow:auto}

.avertissement{background:var(--attn-fond,#fdf3e3);border-left:3px solid var(--attn,#b8860b);
  padding:8px 11px;margin-bottom:10px;font-size:13px;border-radius:0 4px 4px 0}

.fiche-admin dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;
  gap:6px 16px;margin:0 0 14px}
.fiche-admin dt{color:var(--ink-3);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em}
.fiche-admin dd{margin:0}
.fiche-admin h4{margin:12px 0 6px;font-size:13px}
.historique{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto;
  border:1px solid var(--bord);border-radius:6px}
.historique li{padding:6px 10px;border-bottom:1px solid var(--bord);font-size:13px}
.historique li:last-child{border-bottom:none}

/* Refus d'accès à un module — un écran qui explique, pas une page vide. */
.refus{padding:48px 32px;text-align:center;background:var(--surf,#fff);
  border:1px solid var(--bord);border-radius:8px}
.refus h2{margin:0 0 8px;font-size:20px}
.refus p{margin:0 0 6px}

/* Sélection multiple — listes de membres, de familles, d'articles. */
.champ select[multiple]{width:100%;padding:4px;font:inherit;
  border:1px solid var(--bord);border-radius:4px;background:var(--surf,#fff)}
.champ select[multiple] option{padding:3px 6px;border-radius:3px}
.champ select[multiple] option:checked{background:var(--acc,#c8102e);color:#fff}


/* ============================================================
   Domaine Magasin — filtres de période, liens de justificatif
   et jetons de visa du circuit des sorties.
   ============================================================ */

/* Un filtre de période dans une barre de jetons : l'étiquette et le
   champ de date restent sur la même ligne, sinon la barre double de
   hauteur dès qu'on ajoute une borne. */
.barre .filtre{display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.barre .filtre input[type=date]{border:1px solid var(--line-2);border-radius:6px;
  padding:4px 7px;font:inherit;font-size:11.5px;color:var(--ink-1);background:var(--s-1)}

/* Sélecteur ou champ posé dans une barre ou un en-tête de panneau. */
.rech-inline{border:1px solid var(--line-2);border-radius:6px;padding:4px 8px;
  font:inherit;font-size:11.5px;color:var(--ink-1);background:var(--s-1);max-width:220px}

/* Le justificatif d'un mouvement s'OUVRE. Un numéro qu'on ne peut pas
   suivre n'est pas une preuve : le lien doit se voir comme un lien. */
td .lien{color:var(--mmd-red);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
td .lien:hover{opacity:.75}

/* Les deux visas du circuit, posés ou en attente. */
.jeton-visa{display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--line-2);border-radius:99px;padding:1px 8px;
  font-size:10.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.jeton-visa.ok{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}


/* ============================================================
   Mode démonstration — le bandeau.

   Il ne se ferme pas, et sa couleur ne sert à rien d'autre dans
   l'application : une session de formation prise pour la réalité est
   exactement l'accident que ce mode existe pour empêcher.
   ============================================================ */
.bandeau-demo{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:12px;
  height:30px;padding:0 14px;
  background:repeating-linear-gradient(135deg,#8A5200,#8A5200 14px,#7A4900 14px,#7A4900 28px);
  color:#fff;font-size:11px;letter-spacing:.3px}
.bandeau-demo b{font-size:11px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.bandeau-demo span{opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* L'application descend d'autant : le bandeau se superpose au lieu de
   pousser, sinon la grille en hauteur pleine déborde d'un cran. */
.app.avec-bandeau{padding-top:30px;box-sizing:border-box}


/* ============================================================
   Groupes de taxation — le formulaire d'une règle.

   Chaque prélèvement occupe son propre encadré : la case et le taux
   qu'elle commande se lisent ensemble. Le taux N'EXISTE PAS tant que
   la case n'est pas cochée — pas grisé, absent — pour la même raison
   qu'ailleurs dans le portail : un champ visible mais sans effet
   apprend à ignorer l'interface.
   ============================================================ */
.tx-bloc{border:1px solid var(--line);border-radius:var(--r-md);
         background:var(--s-2);padding:12px 14px;margin-top:10px}
.tx-coche{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.tx-coche input[type=checkbox]{width:16px;height:16px;margin-top:3px;
                               accent-color:var(--mmd-red);cursor:pointer}
.tx-coche b{font-size:var(--t-sm)}
.tx-coche .aide{display:block;margin-top:2px}
.tx-taux{margin-top:10px;padding-left:26px;max-width:280px}

/* L'aperçu chiffré : une règle en pourcentages reste abstraite tant
   qu'on ne l'a pas appliquée à un montant. */
.tx-apercu{margin-top:14px;padding:10px 12px;line-height:1.75;
           border:1px dashed var(--line-2);border-radius:var(--r-md);
           background:var(--s-3);font-size:var(--t-mini)}

/* Barre de filtres — Approche 1 */
.filter-bar{background:var(--s-1);border-bottom:2px solid #1D3C57;padding:12px 20px;
             box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.filter-bar-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
                     align-items:end;max-width:100%;margin:0 auto}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
              color:var(--ink-1)}
.filter-select{padding:8px 10px;border:1px solid var(--line);border-radius:4px;
               background:var(--s-1);font-size:12px;cursor:pointer;transition:all 0.2s}
.filter-select:hover{border-color:#1D3C57;box-shadow:0 1px 2px rgba(29,60,87,0.1)}
.filter-select:focus{outline:none;border-color:#1D3C57;box-shadow:0 0 0 2px rgba(29,60,87,0.1)}
.filter-actions{display:flex;gap:6px}
.filter-btn{padding:8px 12px;border:none;border-radius:4px;font-size:12px;font-weight:600;
            cursor:pointer;transition:all 0.2s}
.filter-btn-secondary{background:transparent;color:#888;border:1px solid var(--line)}
.filter-btn-secondary:hover{background:var(--s-2);color:var(--ink-1)}
.filter-btn-indigo{background:#1D3C57;color:white}
.filter-btn-indigo:hover{background:#15284a;box-shadow:0 1px 3px rgba(29,60,87,0.2)}
.filter-status{font-size:11px;color:#7B868D;margin-top:8px;padding:6px 10px;
               background:rgba(29,60,87,0.04);border-radius:4px;border-left:3px solid #1D3C57}