:root{
  --feu:#e04020; --flamme:#f75534; --ambre:#ffb25c;
  --bg:#f7f5f3; --carte:#ffffff; --texte:#1c1917; --doux:#6b625c;
  --bord:#e7e2dd; --ok:#137a4a; --alerte:#b45309; --grave:#c0261a;
  --grille:#efeae5;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#17140f; --carte:#221d18; --texte:#f5f0ea; --doux:#a49a91;
         --bord:#352d26; --grille:#2b241e;
         --ok:#37b077; --alerte:#e0a458; --grave:#f0644f; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texte);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:20px 18px 60px}
a{color:inherit}

/* ---------- entete ---------- */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.logo{width:34px;height:34px;flex:none}
h1{font-size:20px;margin:0;font-weight:650;letter-spacing:-.01em}
h1 small{display:block;font-size:12px;color:var(--doux);font-weight:400;letter-spacing:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--bord);background:var(--carte);color:var(--texte);
  padding:7px 13px;border-radius:8px;text-decoration:none;font-size:13px;cursor:pointer;
  display:inline-block;white-space:nowrap}
.btn:hover{border-color:var(--feu)}
.btn.primaire{background:var(--feu);border-color:var(--feu);color:#fff;font-weight:550}
.btn.primaire:hover{background:var(--flamme)}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
select{border:1px solid var(--bord);background:var(--carte);color:var(--texte);
  padding:7px 10px;border-radius:8px;font-size:13px}

/* ---------- cartes KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:16px 18px}
.kpi .t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);font-weight:600}
.kpi .st{font-size:11px;color:var(--doux);margin-top:1px}
.kpi .v{font-size:31px;font-weight:660;letter-spacing:-.02em;margin-top:9px;
  font-variant-numeric:tabular-nums;line-height:1.05}
.kpi .v span{font-size:14px;font-weight:500;color:var(--doux);margin-left:3px}
.kpi .d{font-size:12px;margin-top:5px;font-variant-numeric:tabular-nums}
.up{color:var(--ok)} .dn{color:var(--grave)} .flat{color:var(--doux)}

/* ---------- sections ---------- */
section{background:var(--carte);border:1px solid var(--bord);border-radius:12px;
  padding:18px 20px;margin-bottom:18px}
h2{font-size:14px;margin:0 0 3px;font-weight:640}
.sous{font-size:12px;color:var(--doux);margin:0 0 16px}

/* ---------- tableau de mouvement ---------- */
.tbl-wrap{overflow-x:auto;margin:0 -4px}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:760px}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--grille);
  font-variant-numeric:tabular-nums;white-space:nowrap}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);
  font-weight:600;border-bottom:1px solid var(--bord)}
th:first-child,td:first-child{text-align:left;white-space:normal}
tbody tr:last-child td{border-bottom:none}
.cat{font-weight:560}
.u{color:var(--doux);font-weight:400;font-size:11px}
.z{color:var(--doux);opacity:.45}
.plus{color:var(--ok)} .moins{color:var(--feu)}
.ferm{font-weight:640}
.chk{text-align:center;font-size:14px}

/* ---------- flux ---------- */
.flux{display:flex;align-items:stretch;gap:0;margin-top:6px;flex-wrap:wrap}
.etape{flex:1 1 130px;min-width:120px;position:relative;padding:0 4px}
.etape .nom{font-size:11px;color:var(--doux);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;margin-bottom:7px}
.barre{border-radius:6px;min-height:8px}
.etape .val{font-size:17px;font-weight:620;margin-top:8px;font-variant-numeric:tabular-nums}
.etape .val span{font-size:11px;color:var(--doux);font-weight:500}
.etape .sub{font-size:11px;color:var(--doux);margin-top:2px}
.fleche{align-self:center;color:var(--doux);font-size:17px;padding:0 2px;flex:none}
.perte{margin-top:11px;padding:8px 11px;border-left:3px solid var(--ambre);
  background:color-mix(in srgb,var(--ambre) 11%,transparent);border-radius:0 6px 6px 0;
  font-size:12px}

/* ---------- tendance ---------- */
.chart{width:100%;height:220px;display:block}
.leg{display:flex;gap:16px;font-size:12px;color:var(--doux);margin-top:10px;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;
  vertical-align:-1px}

/* ---------- rendements ---------- */
.rends{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rend{border:1px solid var(--bord);border-radius:10px;padding:13px 15px}
.rend .n{font-size:11.5px;color:var(--doux);font-weight:550}
.rend .v{font-size:23px;font-weight:640;margin-top:5px;font-variant-numeric:tabular-nums}
.rend .v span{font-size:12px;color:var(--doux);font-weight:500}
.rend .c{font-size:11px;color:var(--doux);margin-top:2px}
.rend.no{border-color:var(--alerte)}
.rend.no .v{color:var(--alerte)}

/* ---------- anomalies ---------- */
.anos{display:flex;flex-direction:column;gap:9px}
.ano{display:flex;gap:11px;padding:11px 13px;border-radius:9px;font-size:13px;
  border:1px solid var(--bord)}
.ano.critique{border-color:var(--grave);
  background:color-mix(in srgb,var(--grave) 7%,transparent)}
.ano.avertissement{border-color:var(--alerte);
  background:color-mix(in srgb,var(--alerte) 8%,transparent)}
.ano .ic{flex:none;font-size:15px;line-height:1.35}
.ano .code{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--doux);font-weight:600;margin-top:3px}
.rasok{display:flex;align-items:center;gap:10px;color:var(--ok);font-size:13.5px;font-weight:550}

.note{font-size:12px;color:var(--doux);margin-top:14px;padding-top:13px;
  border-top:1px solid var(--grille)}
.demo{background:color-mix(in srgb,var(--ambre) 18%,transparent);
  border:1px solid var(--ambre);border-radius:10px;padding:11px 15px;
  font-size:13px;margin-bottom:18px}

/* ---------- navigation ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;
  padding-bottom:0}
.tabs a{padding:7px 14px;font-size:13px;text-decoration:none;color:var(--texte);
  white-space:nowrap;border:1px solid var(--bord);border-radius:8px;
  background:var(--carte);transition:background .12s,border-color .12s,color .12s}
.tabs a:hover{border-color:var(--feu);color:var(--feu)}
.tabs a.on{background:var(--feu);border-color:var(--feu);color:#fff;font-weight:640;
  box-shadow:0 1px 4px color-mix(in srgb,var(--feu) 35%,transparent)}
.tabs a:focus-visible{outline:2px solid var(--feu);outline-offset:2px}

/* ---------- explorateur ---------- */
.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filtres label{font-size:11px;color:var(--doux);display:block;margin-bottom:3px;font-weight:600}
.filtres input{border:1px solid var(--bord);background:var(--carte);color:var(--texte);
  padding:7px 10px;border-radius:8px;font-size:13px}
.expl{font-size:12px;color:var(--doux);background:color-mix(in srgb,var(--ambre) 10%,transparent);
  border-left:3px solid var(--ambre);padding:9px 12px;border-radius:0 6px 6px 0;margin-bottom:14px}
.tot{background:color-mix(in srgb,var(--feu) 7%,transparent);font-weight:600}
.neg{color:var(--feu)}
.pos{color:var(--ok)}
.pill{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;
  background:var(--grille);color:var(--doux);font-weight:600}
.cnt{font-size:12px;color:var(--doux);margin-bottom:10px}

/* ---------- salles ---------- */
.salles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.salle{border:1px solid var(--bord);border-radius:11px;padding:15px;text-align:center}
.salle .n{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);
  font-weight:650}
.salle .q{font-size:30px;font-weight:660;margin:7px 0 2px;font-variant-numeric:tabular-nums}
.salle .s{font-size:11px;color:var(--doux)}
.salle.vide{opacity:.45}
.salle.veg{border-color:var(--ok)} .salle.flo{border-color:var(--feu)}

/* ---------- lot ---------- */
.etapes{position:relative;padding-left:26px}
.etapes:before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:var(--grille)}
.et{position:relative;padding:0 0 18px}
.et:before{content:'';position:absolute;left:-23px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--feu);border:2px solid var(--carte)}
.et.fut:before{background:var(--grille)}
.et .d{font-size:11px;color:var(--doux);font-variant-numeric:tabular-nums}
.et .t{font-weight:600;font-size:14px}
.et .x{font-size:12.5px;color:var(--doux);margin-top:2px}
.manque{border:1px dashed var(--grave);border-radius:9px;padding:12px 14px;
  background:color-mix(in srgb,var(--grave) 6%,transparent);margin:10px 0}
form.inline{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:9px}
form.inline input,form.inline select{border:1px solid var(--bord);background:var(--carte);
  color:var(--texte);padding:7px 10px;border-radius:8px;font-size:13px}

/* ---------- saisie contextuelle ---------- */
.barre-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  margin:0 0 16px;padding:11px 13px;border:1px dashed var(--bord);border-radius:11px;
  background:color-mix(in srgb,var(--feu) 3%,transparent)}
.ba-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);
  font-weight:650;margin-right:3px}
.ba-d{position:relative}
.ba-d summary{list-style:none;cursor:pointer;user-select:none}
.ba-d summary::-webkit-details-marker{display:none}
.ba-d summary:before{content:'+ ';font-weight:700;color:var(--feu)}
.ba-d[open] summary{background:var(--feu);border-color:var(--feu);color:#fff}
.ba-d[open] summary:before{content:'× ';color:#fff}
.ba-p{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:min(660px,88vw);
  background:var(--carte);border:1px solid var(--feu);border-radius:11px;
  padding:15px 17px;box-shadow:0 12px 32px rgba(0,0,0,.16)}
@media (max-width:640px){.ba-p{position:static;min-width:0;margin-top:8px}}

/* ---------- correction en ligne ---------- */
.lg-b{padding:3px 9px;font-size:11px}
.lg-d summary:before{content:''}
.lg-d[open] summary:before{content:'× ';color:#fff}
.lg-p{right:0;left:auto;min-width:min(740px,90vw)}
td .ba-d{position:relative;display:inline-block}

/* ---------- navigation par mois ---------- */
.mois-nav{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:0 0 16px;
  padding:10px 12px;border:1px solid var(--bord);border-radius:11px;background:var(--carte)}
.mois-nav .btn{padding:4px 10px;font-size:12px}
.inv-vide{opacity:.42}
.salle{max-height:none}

/* ---------- inventaire affiche dans le formulaire ---------- */
.inv-dispo{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 11px;
  padding:8px 11px;border-radius:8px;background:color-mix(in srgb,var(--ok) 9%,transparent);
  border-left:3px solid var(--ok)}
.inv-dispo-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--doux);font-weight:650}
.inv-dispo-s{font-size:12px}
.inv-dispo-s b{font-variant-numeric:tabular-nums;font-size:14px;margin:0 3px}
.inv-dispo-s i{font-style:normal;color:var(--doux);font-size:10.5px}

/* ---------- detail brut repliable ---------- */
.detail-brut summary{cursor:pointer;list-style:none;user-select:none;
  padding:2px 0 6px}
.detail-brut summary::-webkit-details-marker{display:none}
.detail-brut summary:before{content:'▸ ';color:var(--doux);font-size:12px}
.detail-brut[open] summary:before{content:'▾ '}
.detail-brut summary h2{font-size:14px;margin:0}
.detail-brut:not([open]) + *{margin-top:0}

/* ---------- panneau de saisie : dans le flux, jamais rogne ----------
   Le panneau vivait en position absolue au-dessus du tableau. Le tableau
   defile (overflow:auto), donc tout debordement etait COUPE : le formulaire
   se retrouvait dans une boite minuscule avec sa propre barre de defilement.
   En le posant dans le flux, plus rien ne le rogne. */
/* Le conteneur du tableau defile pour les grands registres, mais son
   overflow COUPE le panneau. On le neutralise seulement pendant la saisie :
   le defilement revient des que le panneau se referme. */
.tbl-wrap:has(.ba-d[open]){overflow:visible}
/* Le panneau reprend sa place au-dessus du tableau, assez large pour que les
   champs tiennent sur une rangee. */
.ba-p, .lg-p{min-width:min(820px,92vw);max-height:76vh;overflow:auto}
/* Ancre a droite pour les panneaux de fin de rangee, sinon ils sortent de
   l'ecran. */
.lg-p{right:0;left:auto}
/* Les champs du formulaire ont de quoi s'etaler plutot que de s'empiler. */
.ba-p .filtres{gap:12px}
.ba-p .filtres input, .ba-p .filtres select{min-width:8.5em}