/* ===========================================================================
   Nooance — thème Bootstrap 5 (par défaut) appliqué au design system maison.
   Chargé APRÈS bootstrap.min.css : toutes les règles ci-dessous priment.
   On conserve tous les sélecteurs existants (app.js/index.html inchangés) et
   on remappe le look sur le langage visuel Bootstrap (palette, police, rayons,
   ombres, focus-ring). Mode sombre via [data-theme="dark"] + prefers-color.
   ========================================================================== */
:root{
  /* Palette Bootstrap 5.3 — clair */
  --bg:#f8f9fa; --surface:#ffffff; --surface-2:#f1f3f5; --surface-3:#e9ecef;
  --border:#dee2e6; --border-strong:#ced4da;
  --ink:#212529; --muted:#6c757d;
  --accent:#0d6efd; --accent-weak:#cfe2ff; --accent-ink:#084298;
  --good:#198754; --good-weak:#d1e7dd;
  --warn:#997404; --warn-weak:#fff3cd;
  --crit:#dc3545; --crit-weak:#f8d7da;
  --shadow:0 .125rem .25rem rgba(0,0,0,.075);
  --shadow-lg:0 .5rem 1rem rgba(0,0,0,.15);
  --focus:0 0 0 .25rem rgba(13,110,253,.25);
  --r:.5rem; --r-sm:.375rem;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --font-display:var(--font-ui);
}
:root[data-theme="dark"]{
  --bg:#212529; --surface:#2b3035; --surface-2:#343a40; --surface-3:#3b4248;
  --border:#495057; --border-strong:#5c636a;
  --ink:#dee2e6; --muted:#adb5bd;
  --accent:#6ea8fe; --accent-weak:#031633; --accent-ink:#9ec5fe;
  --good:#75b798; --good-weak:#051b11;
  --warn:#ffda6a; --warn-weak:#332701;
  --crit:#ea868f; --crit-weak:#2c0b0e;
  --shadow:0 .125rem .25rem rgba(0,0,0,.3);
  --shadow-lg:0 .5rem 1rem rgba(0,0,0,.45);
  --focus:0 0 0 .25rem rgba(110,168,254,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#212529; --surface:#2b3035; --surface-2:#343a40; --surface-3:#3b4248;
    --border:#495057; --border-strong:#5c636a;
    --ink:#dee2e6; --muted:#adb5bd;
    --accent:#6ea8fe; --accent-weak:#031633; --accent-ink:#9ec5fe;
    --good:#75b798; --good-weak:#051b11;
    --warn:#ffda6a; --warn-weak:#332701;
    --crit:#ea868f; --crit-weak:#2c0b0e;
    --shadow:0 .125rem .25rem rgba(0,0,0,.3);
    --shadow-lg:0 .5rem 1rem rgba(0,0,0,.45);
    --focus:0 0 0 .25rem rgba(110,168,254,.35);
  }
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--bs-font-monospace,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- structure : barre latérale + main ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;padding:16px 12px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.brand .mark{width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.brand b{font-weight:700;letter-spacing:.12em;font-size:12px}
.brand small{display:block;color:var(--muted);font-weight:500;font-size:10.5px;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:2px;padding-left:0;list-style:none}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--ink);font:inherit;font-weight:500;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer}
.nav button svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.nav button:hover{background:var(--surface-2)}
.nav button.active{background:var(--accent);color:#fff}
.nav button.active svg{stroke:#fff}
.side .spacer{flex:1}
.side .foot{padding:10px 8px 2px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}
.themebtn,.logout{margin-top:8px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-weight:500;font-size:12.5px;cursor:pointer;width:100%;text-decoration:none;justify-content:center}
.themebtn:hover,.logout:hover{background:var(--surface-2)}
.logout{color:var(--crit);border-color:var(--crit)}
.logout:hover{background:var(--crit);color:#fff}

/* `min-width:0` : `.main` est un item de GRILLE, et la valeur par défaut `auto` le
   laisse s'élargir à son contenu au lieu de suivre sa colonne. Un tableau un peu large
   poussait donc la page entière en défilement horizontal, et les derniers boutons
   sortaient de l'écran — constaté sur la Corbeille puis sur Stock & arrivages le
   13/09. Avec min-width:0, c'est `.tbl-wrap` qui reprend son rôle : lui seul défile. */
.main{padding:28px 32px 72px;max-width:1180px;min-width:0}
@media (max-width:760px){.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow-x:auto}.main{padding:20px 16px 60px}}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topbar h1{margin:0;font-family:var(--font-display);font-size:1.875rem;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.topbar p{margin:6px 0 0;color:var(--muted);font-size:.875rem;max-width:64ch}

/* pastille d'état + badges */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-sm);font-weight:600;font-size:12.5px;border:1px solid var(--border-strong);background:var(--surface)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.pill.closed{color:var(--good);border-color:var(--good);background:var(--good-weak)}
.pill.closed .dot{background:var(--good)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:.34em .6em;border-radius:var(--r-sm);font-size:.75rem;font-weight:600;line-height:1}
.b-b2c{background:var(--accent-weak);color:var(--accent-ink)}
.b-b2b{background:var(--surface-3);color:var(--ink)}
.b-dot{background:var(--warn-weak);color:var(--warn)}
.b-adj{background:var(--crit-weak);color:var(--crit)}
.b-ret{background:var(--good-weak);color:var(--good)}

/* vues */
.view{display:none}
.view.show{display:block;animation:viewIn .2s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.show{animation:none}}
.nav button,.btn,.chip,.kpi,tr.clickable{transition:background .14s,color .14s,box-shadow .14s,border-color .14s,filter .14s}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:16px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 19px;box-shadow:var(--shadow)}
.kpi .lbl{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-family:var(--font-display);font-size:1.7rem;font-weight:600;letter-spacing:-.01em;margin-top:10px}
.kpi .sub{color:var(--muted);font-size:12px;margin-top:4px}
.kpi.accent{border-color:var(--accent);background:var(--accent-weak)}
.kpi.accent .val{color:var(--accent-ink)}

/* cartes */
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media (max-width:880px){.grid2{grid-template-columns:1fr}}
.card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card>header{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card>header h2{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:600}
.card>header .hint{color:var(--muted);font-size:11.5px;font-weight:500}
.card .body{padding:16px 18px}
.card+.card,section.block{margin-top:18px}

/* barres par canal */
.canal{display:flex;flex-direction:column;gap:14px;padding:16px}
.canal .row{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;margin:0}
.canal .name{font-weight:600}
.canal .track{height:22px;background:var(--surface-2);border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.canal .fill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;color:#fff;font-size:11px;font-weight:700;min-width:34px}
.canal .amt{font-weight:700;text-align:right;min-width:112px}
.canal .amt small{display:block;color:var(--muted);font-weight:500;font-size:11px}

/* tableaux — style Bootstrap */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.8125rem}
thead th{text-align:left;color:var(--ink);font-weight:600;font-size:.75rem;padding:10px 13px;border-bottom:2px solid var(--border-strong);white-space:nowrap;background:transparent}
tbody td{padding:10px 13px;border-bottom:1px solid var(--border);white-space:nowrap}
/* Une cellule qui porte une PHRASE, pas un chiffre : elle passe à la ligne plutôt que
   d'imposer sa largeur au tableau, à la carte, puis à la page entière. */
tbody td.td-libre{white-space:normal;min-width:280px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
.sku{font-weight:600}.muted{color:var(--muted)}
.pos{color:var(--good);font-weight:600}.neg{color:var(--crit);font-weight:600}
.lotchip{display:inline-block;background:var(--surface-3);color:var(--ink);border-radius:var(--r-sm);padding:1px 7px;font-size:11px;font-weight:600;margin:1px 3px 1px 0;font-variant-numeric:tabular-nums}
.lotchip.fifo{background:var(--accent-weak);color:var(--accent-ink)}

/* piles de lots (jauges FIFO) */
.pile{display:flex;flex-direction:column;gap:9px}
.pile .lot{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:6px}
.pile .lot .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pile .lot .meta{color:var(--muted);font-size:11.5px}
.pile .gauge{grid-column:1/-1;height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.pile .gauge i{display:block;height:100%;background:var(--accent)}
.pile .lot.empty{opacity:.55}.pile .lot.empty .gauge i{background:var(--muted)}

/* boutons — style Bootstrap */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--r-sm);padding:.4rem .85rem;font:inherit;font-weight:500;font-size:.875rem;line-height:1.4;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(.93);color:#fff;text-decoration:none}
.btn:focus-visible{outline:0;box-shadow:var(--focus)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.danger{background:var(--crit);border-color:var(--crit)}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1}

/* formulaires — style Bootstrap form-control */
.field{display:flex;flex-direction:column;gap:5px}
/* Sans ça, `el.hidden = true` ne cache rien sur un bloc qui pose son propre display
   (.field est en flex) : le navigateur applique display:none avec la spécificité la
   plus faible et n'importe quelle règle de classe la bat. */
[hidden]{display:none!important}
/* Une ligne d'envoi qui annonce plus que la commande. Visible, jamais bloquante :
   c'est le serveur qui refuse, l'écran ne fait que prévenir avant la fin de la saisie. */
.cmdline.depasse input{border-color:var(--warn)}
.field label{font-size:12px;font-weight:600;color:var(--ink)}
select,input{font:inherit;font-size:.875rem;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.4rem .7rem;line-height:1.4}
select{appearance:auto}
select:focus,input:focus{outline:0;border-color:#86b7fe;box-shadow:var(--focus)}
:root[data-theme="dark"] select:focus,:root[data-theme="dark"] input:focus{border-color:var(--accent)}
button:focus-visible,a:focus-visible{outline:0;box-shadow:var(--focus)}
.addrow{display:grid;grid-template-columns:1.6fr 1fr .8fr .9fr auto;gap:10px;align-items:end;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:14px}
@media (max-width:760px){.addrow{grid-template-columns:1fr 1fr}}

/* encarts note */
.note{display:flex;gap:10px;background:var(--accent-weak);border:1px solid transparent;border-radius:var(--r);padding:12px 14px;color:var(--accent-ink);font-size:.8125rem;margin-bottom:16px}
.note svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;margin-top:1px}
.note.warn{background:var(--warn-weak);color:var(--warn)}
.note.crit{background:var(--crit-weak);color:var(--crit)}
.eq{font-variant-numeric:tabular-nums;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font-size:.8125rem;margin:2px 0 0}

/* toast (id ciblé pour battre le .toast de Bootstrap) */
#toast.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);width:auto;max-width:90vw;background:var(--ink);color:var(--surface);padding:11px 18px;border:0;border-radius:999px;font-weight:600;font-size:13px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:1090}
#toast.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.toast.err{background:var(--crit);color:#fff}

/* Imports */
.imports{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.impcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.impcard h3{margin:0;font-size:14px;font-weight:600}
.impcard p{margin:0;color:var(--muted);font-size:12px}
.impcard .status{font-size:12px;font-weight:600}
.impcard .status.ok{color:var(--good)}
.drop{border:1.5px dashed var(--border-strong);border-radius:var(--r-sm);padding:14px;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer;background:var(--surface-2)}
.drop:hover,.drop.drag{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-weak)}
.drop input{display:none}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:30px;width:100%;max-width:360px}
.login-card .mark{width:44px;height:44px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;margin-bottom:16px}
.login-card h1{margin:0 0 4px;font-size:19px}
.login-card p{margin:0 0 18px;color:var(--muted);font-size:13px}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-card .err{color:var(--crit);font-size:12.5px;font-weight:600}
h3.sec{font-size:13px;font-weight:600;margin:0 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* lignes cliquables + drawer d'édition (glisse depuis la droite) */
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--accent-weak)}
/* Une fenêtre modale domine TOUTE surface plein écran : .formpage (1060) et
   .homepage (1070). À 1055, la confirmation de suppression s'ouvrait DERRIÈRE la fiche
   de commande, sous son fond opaque — construite, remplie, et invisible (13/09).
   Elle reste sous .returnbanner (1080) et #toast (1090), qui doivent rester lisibles. */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;justify-content:flex-end;z-index:1075;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal.show{display:flex;animation:ovIn .2s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--surface);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-lg);width:100%;max-width:520px;height:100vh;display:flex;flex-direction:column;overflow-y:auto;border-radius:0;animation:drwIn .26s ease}
@keyframes drwIn{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.modal.show,.modal-card{animation:none}}
.modal-card>header{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.modal-card>header h3{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.modal-card .x{background:none;border:0;color:var(--muted);font-size:19px;cursor:pointer;padding:5px 10px;border-radius:var(--r-sm);line-height:1}
.modal-card .x:hover{background:var(--surface-2);color:var(--ink)}
.modal-card .mbody{padding:20px 22px}
@media (max-width:560px){.modal-card{max-width:100%}}

/* actions icônes (✎ / ✕) */
.ia{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0}
.ia+.ia{margin-left:5px}
.ia:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-weak)}
.ia.del:hover{color:var(--crit);border-color:var(--crit);background:var(--crit-weak)}
.rowact{white-space:nowrap;text-align:right}

/* chips de filtre — style pill Bootstrap */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:999px;padding:.35rem .85rem;font:inherit;font-weight:500;font-size:12.5px;cursor:pointer}
.chip:hover{background:var(--surface-2)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* rangées d'actions + listes clé/valeur en drawer */
.actions{display:flex;gap:10px;flex-wrap:wrap}
.lines{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.lines .l{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border);font-size:.8125rem}
.lines .l:last-child{border-bottom:0}
.modal-card h4.sec{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
.brk{display:flex;flex-direction:column;gap:2px}
.brk>div{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid var(--border)}
.brk>div span{color:var(--muted);font-weight:500}
.brk>div b{font-weight:600}
.brk .ecart{border-bottom:0;border-top:2px solid var(--border-strong);margin-top:2px;padding-top:10px}
.brk .ecart span{color:var(--ink);font-weight:600}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini th{background:var(--surface-2);text-align:left;padding:7px 9px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border)}
table.mini td{padding:7px 9px;border-bottom:1px solid var(--border)}
table.mini td.r,table.mini th.r{text-align:right}
.mform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.mform .field{gap:5px}
.mform select,.mform input{width:100%}
@media(max-width:520px){.mform{grid-template-columns:1fr}}

/* sélecteur de mois */
.periodnav{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:2px}
.periodnav button{background:none;border:0;color:var(--muted);font-size:16px;font-weight:700;cursor:pointer;padding:2px 9px;border-radius:var(--r-sm);line-height:1}
.periodnav button:hover{background:var(--surface-2);color:var(--ink)}
.periodnav input[type=month]{border:0;background:none;color:var(--ink);font:inherit;font-weight:600;font-size:13px;padding:4px 2px;color-scheme:light dark;box-shadow:none}
.periodnav input[type=month]:focus{box-shadow:none;border:0}

/* pastille de suivi compacte */
.tmini{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--border-strong);background:var(--surface-2)}
.tmini .dot{width:7px;height:7px;border-radius:50%;flex:none}
.tmini.good{background:var(--good-weak);color:var(--good);border-color:var(--good)}.tmini.good .dot{background:var(--good)}
.tmini.accent{background:var(--accent-weak);color:var(--accent-ink);border-color:var(--accent)}.tmini.accent .dot{background:var(--accent)}
.tmini.warn{background:var(--warn-weak);color:var(--warn);border-color:var(--warn)}.tmini.warn .dot{background:var(--warn)}
.tmini.crit{background:var(--crit-weak);color:var(--crit);border-color:var(--crit)}.tmini.crit .dot{background:var(--crit)}

/* suivi transporteur (DHL) */
.btrk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.btrk-meta{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.btrk .btrk-more{white-space:nowrap}
.trkw{--tc:var(--accent);margin:4px 0 10px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.trkw.good{--tc:var(--good)}.trkw.warn{--tc:var(--warn)}.trkw.crit{--tc:var(--crit)}
.trkhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.tstatus2{font-weight:600;font-size:13px}
.trkhd .btrk-more{margin-left:auto;white-space:nowrap}
.tsteps{display:flex}
.tstep{flex:1;position:relative;text-align:center;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.tstep i{display:block;width:13px;height:13px;border-radius:50%;background:var(--border-strong);margin:0 auto 6px;position:relative;z-index:1}
.tstep:not(:first-child)::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--border-strong)}
.tstep.done i,.tstep.now i{background:var(--tc)}
.tstep.done::before,.tstep.now::before{background:var(--tc)}
.tstep.now i{box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 22%,transparent)}
.tstep.done span,.tstep.now span{color:var(--tc)}
.bkids{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 9px}
.kv{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 9px}
.kv b{color:var(--ink);font-weight:600}
.kv.ok b{color:var(--good)}
.cdsum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;margin-bottom:18px}
.cdsum .fig{display:flex;flex-direction:column;gap:2px}
.cdsum .fig .l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.cdsum .fig .v{font-weight:600;font-size:15.5px;font-variant-numeric:tabular-nums}
.cdsum .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.tcard{border:1px solid var(--border-strong);border-radius:var(--r);padding:13px 14px;background:var(--surface-2);border-left-width:4px}
.tcard.good{border-left-color:var(--good)}.tcard.accent{border-left-color:var(--accent)}.tcard.warn{border-left-color:var(--warn)}.tcard.crit{border-left-color:var(--crit)}
.tcard .thead{display:flex;align-items:center;gap:11px}
.tcard .tico{font-size:22px;line-height:1}
.tcard.accent .tico{animation:bob 1.6s ease-in-out infinite}
.tcard .tstatus{font-weight:600;font-size:14px}
.tcard .tnum{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-top:1px}
.teta{margin-top:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);font-size:12.5px}
.ttl{margin-top:11px;display:flex;flex-direction:column;gap:0}
.tev{display:flex;gap:10px;padding:5px 0;position:relative}
.tev-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);margin-top:4px;flex:none;position:relative}
.tev:not(:last-child) .tev-dot::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:2px;height:22px;background:var(--border)}
.tev.now .tev-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.tev-st{font-weight:600;font-size:12.5px}
.tev-meta{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.tfoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tcard.accent .tico{animation:none}}

/* pages de formulaire plein écran */
.formpage{position:fixed;inset:0;background:var(--surface);z-index:1060;display:none;flex-direction:column}
.formpage.show{display:flex;animation:viewIn .2s ease}
@media (prefers-reduced-motion:reduce){.formpage.show{animation:none}}
.formpage>header{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border)}
.formpage>header h3{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.formpage .fp-body{flex:1;overflow-y:auto;padding:22px;width:100%;max-width:900px;margin:0 auto}
.formpage .fp-actions{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:14px 22px;display:flex;gap:10px;justify-content:flex-end}
.fp-back{background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;padding:6px 10px;border-radius:var(--r-sm)}
.fp-back:hover{background:var(--surface-2);color:var(--ink)}
.manage-link{background:none;border:0;color:var(--accent);font-size:11px;cursor:pointer;padding:0 4px;text-decoration:underline}
.returnbanner{position:fixed;top:0;left:0;right:0;z-index:1080;background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;gap:14px;padding:10px 16px;box-shadow:var(--shadow-lg);font-size:13px}
.returnbanner.show{display:flex}

/* sélecteur de module */
.modsel{display:flex;flex-direction:column;gap:2px;padding:4px 6px 10px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.modsel button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--r-sm);cursor:pointer;text-align:left}
.modsel button svg{width:16px;height:16px;flex:none}
.modsel button:hover{background:var(--surface-2);color:var(--ink)}
.modsel button.active{background:var(--accent-weak);color:var(--accent-ink)}

/* ===== Commandes : cartes de suivi ===== */
.ocards{display:flex;flex-direction:column;gap:12px}
.ocard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.ocard:hover{border-color:var(--border-strong)}
.ochead{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;padding:15px 17px;cursor:pointer}
.ochead:focus-visible{outline:0;box-shadow:var(--focus)}
.octop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.octitle{font-weight:600;font-size:15.5px}
.ocright{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ocmoney{font-weight:600;font-size:15px}
.occhev{color:var(--muted);font-size:12px;transition:transform .15s}
.ocard.open .occhev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.occhev{transition:none}}
.ocbody{display:none;border-top:1px solid var(--border);background:var(--surface-2);padding:15px 17px}
.ocard.open .ocbody{display:block}
.ockv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.ockv div span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.ockv div b{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.oclots{margin-top:14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);overflow-x:auto}
.ocacts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ===== Formulaire en assistant (étapes) ===== */
.fp-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.fp-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);color:var(--muted);border-radius:999px;padding:5px 13px 5px 6px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.fp-pill i{width:20px;height:20px;border-radius:50%;background:var(--surface-3);color:var(--muted);display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:600;flex:none}
.fp-pill:hover{background:var(--surface-2);color:var(--ink)}
.fp-pill.done{color:var(--good);border-color:var(--good)}
.fp-pill.done i{background:var(--good);color:#fff}
.fp-pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fp-pill.on i{background:rgba(255,255,255,.25);color:#fff}
.fp-pill:focus-visible{outline:0;box-shadow:var(--focus)}
.fp-step{display:none}
.fp-step.on{display:block}
.fp-step-t{margin:0 0 2px;font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.fp-step-h{margin:0 0 16px;color:var(--muted);font-size:.8125rem}
.field small.muted{font-size:11.5px;line-height:1.35;font-weight:400}
.warn-txt{color:var(--warn,#b45309)}
.fp-count{color:var(--muted);font-size:12.5px;font-weight:500}

/* Lignes commandées (SKU, qté, prix, lot, n° de série) */
.artline{display:grid;grid-template-columns:2fr .8fr 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.artline .ar-tot{text-align:right;font-weight:600;color:var(--muted);font-size:12.5px;white-space:nowrap}
.artline.arthead{margin-bottom:6px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.artline.arthead span{padding:0 2px}
.artline.arthead .num{text-align:right}
.arttotal{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.arttotal b{font-size:1.15rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.artline{grid-template-columns:1fr 1fr}.artline.arthead{display:none}}

/* Sans min-width:0, un input en grille refuse de descendre sous sa largeur par défaut :
   les lignes débordaient et ne s'alignaient plus avec leurs en-têtes de colonnes. */
.cmdline input, .cmdline select, .artline input, .artline select{min-width:0;width:100%}
.cmdline input[type=date]{padding-left:6px;padding-right:6px}

/* En-tête des lignes d'envoi (SKU / lot / libéré / reçu / prix / SN / date) */
.cmdline.clhead{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.cmdline.clhead span{padding:0 2px}
.kv.warn{background:var(--warn-weak);color:var(--warn)}
@media (max-width:900px){.cmdline{grid-template-columns:1fr 1fr!important}.cmdline.clhead{display:none}}

/* ===== Pages de formulaire plein écran — mise en forme ===== */
/* Le fond de la page reste neutre pour que la carte des champs se détache. */
.formpage{background:var(--bg)}
.formpage>header{padding:14px 20px}
.formpage>header h3{font-size:1.05rem;letter-spacing:-.01em}
.formpage .fp-body{max-width:980px;padding:26px 22px 48px}

/* Barre d'étapes : toujours sur une seule ligne. Quand la place manque,
   seul le libellé de l'étape courante reste affiché. */
.fp-steps{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:16px;margin-bottom:24px}
.fp-steps::-webkit-scrollbar{display:none}
.fp-pill{flex:none;padding:5px 13px 5px 5px;gap:8px;transition:background .15s,border-color .15s,color .15s}
.fp-pill i{width:22px;height:22px;font-size:11.5px}
@media (max-width:680px){
  .fp-pill span{display:none}
  .fp-pill.on span{display:inline}
  .fp-pill{padding:5px}
  .fp-pill.on{padding:5px 13px 5px 5px}
}

/* Titre de l'étape au-dessus, champs dans une carte. */
.fp-step-t{font-size:1.3rem;margin-bottom:5px;letter-spacing:-.01em}
.fp-step-h{margin-bottom:16px;font-size:.8438rem;line-height:1.5;max-width:62ch}
.fp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.fp-card>.note:last-child,.fp-card>.arttotal:last-child{margin-bottom:0}

/* Champs : deux colonnes dès que la largeur le permet, une seule sinon. */
.formpage .mform{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px 18px;margin-top:0}
.formpage .field label{font-size:12.5px}
.formpage .field input,.formpage .field select{padding:.5rem .75rem}
.formpage .field small.muted{margin-top:2px}

/* Lignes de saisie (articles commandés, lots d'un envoi) : sur écran étroit,
   les en-têtes de colonnes disparaissent — on encadre chaque ligne pour qu'on
   voie où elle commence et où elle finit. */
@media (max-width:900px){
  .artline:not(.arthead),.cmdline:not(.clhead){border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;background:var(--surface-2)}
}

/* Pied de page d'action. */
.formpage .fp-actions{padding:12px 20px;gap:8px;align-items:center}
.formpage .fp-actions .btn{padding:.45rem 1.05rem}

/* Écran étroit : les en-têtes de colonnes disparaissent, on redispose chaque ligne
   en blocs lisibles. Les placeholders portent alors le libellé du champ. */
@media (max-width:900px){
  .artline:not(.arthead){
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"sku sku" "qte prix" "tot del";
    gap:8px}
  .artline .ar-sku{grid-area:sku}
  .artline .ar-qte{grid-area:qte}
  .artline .ar-prix{grid-area:prix}
  .artline .ar-tot{grid-area:tot;text-align:left;align-self:center}
  .artline .ar-del{grid-area:del;justify-self:end}

  .cmdline:not(.clhead){
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"sku sku" "lot prod" "lib recu" "prix del" "snd snf";
    gap:8px}
  .cmdline .cl-sku{grid-area:sku}
  .cmdline .cl-lot{grid-area:lot}
  .cmdline .cl-prod{grid-area:prod}
  .cmdline .cl-qte{grid-area:lib}
  .cmdline .cl-cout{grid-area:prix}
  .cmdline .cl-del{grid-area:del;justify-self:end}
  .cmdline .cl-snd{grid-area:snd}
  .cmdline .cl-snf{grid-area:snf}
}

/* Frise d'une commande : chaque étape est jugée pour elle-même.
   « fait » = acquis · « partiel » = commencé mais pas terminé · sinon à venir. */

/* ===== Accueil : le hub des modules ===== */
.homepage{position:fixed;inset:0;background:var(--bg);z-index:1070;display:none;overflow-y:auto}
.homepage.show{display:block;animation:viewIn .2s ease}
@media (prefers-reduced-motion:reduce){.homepage.show{animation:none}}
.hp-inner{max-width:1040px;margin:0 auto;padding:44px 22px 40px}
/* « Le projet expliqué » — un document long, fait pour être LU : une colonne étroite,
   du texte aéré, et des blocs qui séparent les idées. Un pavé pleine largeur ne se lit
   pas, et personne n'ouvrirait la page une seconde fois. */
.pr-sec{margin:26px 0 0;max-width:760px}
.pr-sec h3{margin:0 0 9px;font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.pr-sec p{margin:0 0 10px;line-height:1.65;font-size:14px}
.pr-sec code,.pr-regle code,.pr-dettes code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--surface-3);padding:1px 5px;border-radius:4px}
.pr-chaine{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pr-chaine li{display:flex;gap:13px;align-items:flex-start}
.pr-n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:999px;
  background:var(--accent-weak);color:var(--accent-ink);font-weight:700;font-size:12.5px}
.pr-chaine li>div{display:flex;flex-direction:column;gap:2px}
.pr-chaine li span:last-child{color:var(--muted);font-size:13px;line-height:1.55}
.pr-regles{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pr-regle{border-left:3px solid var(--accent);padding:9px 0 9px 14px}
.pr-regle b{display:block;margin-bottom:3px;font-size:14px}
.pr-regle span{color:var(--muted);font-size:13px;line-height:1.6}
.pr-dettes{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.75}
.pr-mots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:14px}
.pr-mot{border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;background:var(--surface-2)}
.pr-mot b{font-family:var(--font-display);font-size:1rem}
.pr-mot i{display:block;color:var(--accent-ink);font-size:12px;font-style:normal;margin:1px 0 6px}
.pr-mot span{color:var(--muted);font-size:12.5px;line-height:1.55}

/* Stock & arrivages — le panneau latéral d'une référence : trois chiffres en tête, les
   lots, puis les envois en route. Un envoi se clique pour ouvrir sa commande. */
.arr-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.arr-ch{display:flex;flex-direction:column;gap:2px;padding:13px 15px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2)}
.arr-ch>span:last-child{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.arr-cv{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.arr-cv.neg{color:var(--crit)}
.arr-env{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:9px;
  cursor:pointer;transition:border-color .15s,transform .15s}
.arr-env:hover{border-color:var(--accent);transform:translateY(-1px)}
.arr-env-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.arr-env-h .badge{font-size:10px}
.arr-env-d{display:flex;gap:7px;flex-wrap:wrap}

/* L'ACCUEIL — il répond avant qu'on clique, et il ne ressemble pas au reste de l'app :
   c'est la seule page qu'on ouvre pour SAVOIR, pas pour faire. Les sept rectangles gris
   identiques d'avant ne disaient rien ; ici la phrase du haut résume, les points
   d'attention portent leur gravité en couleur pleine, et chaque module a sa teinte pour
   être reconnu de loin sans lire. */
.hp-head{display:flex;align-items:center;gap:16px;margin-bottom:24px;
  padding:20px 22px;border-radius:var(--r);border:1px solid var(--border);
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%)}
.hp-head.urgent{border-color:var(--crit);
  background:linear-gradient(135deg,var(--surface) 0%,var(--crit-weak) 160%)}
.hp-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.hp-head .mark{width:44px;height:44px;border-radius:var(--r);background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.hp-sur{margin:0 0 3px;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted)}
.hp-head h1{margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.2}
.hp-meta{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;
  color:var(--muted);flex:none}
.hp-sec{margin:30px 0 13px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted)}

.hp-att{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.hp-att-vide{padding:20px 22px;border:1px dashed var(--border-strong);border-radius:var(--r);
  color:var(--muted);font-size:13.5px}
.hp-att-ok{display:flex;align-items:center;gap:15px;padding:20px 22px;border-radius:var(--r);
  border:1px solid var(--good);background:var(--good-weak);color:var(--good);font-size:13.5px;line-height:1.5}
.hp-ok-ico{font-size:26px;line-height:1;flex:none}

/* Le chiffre d'abord, gros ; le libellé ensuite ; la raison en petit. Fond PLEIN teinté
   par gravité — une bordure de 3 px ne se voit pas d'un coup d'œil, et c'est justement
   ce qu'on demande à cet écran. */
.hp-pt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:17px 18px 16px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.hp-pt:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.hp-pt:focus-visible{outline:0;box-shadow:var(--focus)}
.hp-pv{font-family:var(--font-display);font-size:1.9rem;font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
.hp-pt-t{display:flex;align-items:center;gap:6px;width:100%;font-size:13px;font-weight:600}
.hp-fl{margin-left:auto;opacity:0;transform:translateX(-4px);transition:.15s}
.hp-pt:hover .hp-fl{opacity:1;transform:none}
.hp-pd{font-size:11.5px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-pt.t-critique{background:var(--crit-weak);border-color:var(--crit)}
.hp-pt.t-critique .hp-pv,.hp-pt.t-critique .hp-pt-t{color:var(--crit)}
.hp-pt.t-attention{background:var(--warn-weak);border-color:var(--warn)}
.hp-pt.t-attention .hp-pv,.hp-pt.t-attention .hp-pt-t{color:var(--warn)}
.hp-pt.t-calme{background:var(--accent-weak);border-color:var(--accent)}
.hp-pt.t-calme .hp-pv,.hp-pt.t-calme .hp-pt-t{color:var(--accent-ink)}

/* Les modules : format HORIZONTAL (icône à gauche, texte à droite). Sept blocs verticaux
   identiques se lisaient comme une liste de dossiers ; là on reconnaît une ligne. */
.hp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.hp-tile{display:flex;align-items:flex-start;gap:14px;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;
  font:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.hp-tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.hp-tile:focus-visible{outline:0;box-shadow:var(--focus)}
.hp-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--accent-weak);color:var(--accent-ink);flex:none}
.hp-ico svg{width:21px;height:21px}
.hp-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.hp-t{font-family:var(--font-display);font-size:1rem;font-weight:600}
.hp-d{color:var(--muted);font-size:.8125rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Une teinte par module : on reconnaît « Commandes » à sa couleur avant d'avoir lu. */
.hp-tile.m-achats-mod .hp-ico{background:var(--accent-weak);color:var(--accent-ink)}
.hp-tile.m-catalogue .hp-ico{background:var(--good-weak);color:var(--good)}
.hp-tile.m-finance .hp-ico{background:var(--warn-weak);color:var(--warn)}
.hp-tile.m-donnees .hp-ico{background:var(--surface-3);color:var(--ink)}
.hp-tile.m-export-compta .hp-ico{background:var(--crit-weak);color:var(--crit)}
.hp-tile.m-admin-mod .hp-ico{background:var(--surface-3);color:var(--muted)}
@media (max-width:600px){.hp-inner{padding:32px 16px}.hp-grid{grid-template-columns:1fr}}

/* Barre latérale : retour au hub + module courant, à la place du sélecteur */
.btn-accueil{display:block;width:100%;text-align:left;background:none;border:0;color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer}
.btn-accueil:hover{background:var(--surface-2);color:var(--ink)}
.modnow{display:flex;align-items:center;gap:9px;padding:6px 10px;color:var(--ink);font-weight:600;font-size:13px}
.modnow svg{width:17px;height:17px;flex:none;color:var(--accent-ink)}

/* Coûts par lot : une ligne en conflit (coût saisi ignoré au profit de la réception) */
.ligne-conflit{background:var(--warn-weak)}
.ligne-conflit td{border-left:0}
.ligne-conflit .mono{font-weight:700}

/* ===== Calendrier des arrivées : grille mensuelle ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cal-dow{background:var(--surface-2);padding:8px 4px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);text-align:center}
.cal-cell{background:var(--surface);min-height:106px;padding:6px;display:flex;flex-direction:column;gap:4px;
  align-items:stretch;text-align:left;border:0;font:inherit;color:inherit}
.cal-cell.hors{background:var(--surface-2);opacity:.5}
.cal-cell.a-arrivee{cursor:pointer}
.cal-cell.a-arrivee:hover{background:var(--surface-2)}
.cal-cell.actif{outline:2px solid var(--accent);outline-offset:-2px}
.cal-cell:focus-visible{outline:0;box-shadow:var(--focus)}
.cal-num{align-self:flex-start;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-cell.auj .cal-num{background:var(--accent);color:#fff}
.cal-chips{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-chip{display:block;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:var(--r-sm);
  background:var(--accent-weak);color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip.s-reception{background:var(--good-weak);color:var(--good)}
.cal-chip.s-report{background:var(--warn-weak);color:var(--warn)}
.cal-chip.s-commande{background:var(--surface-3);color:var(--muted)}
.cal-plus{font-size:10px;color:var(--muted);font-weight:600;padding-left:2px}
/* Sous 760 px les pastilles ne tiennent plus : on ne garde que le compteur du jour. */
/* Sur écran étroit on garde les pastilles — c'est la seule information de la case —
   mais en plus compact. */
@media (max-width:760px){
  .cal-cell{min-height:64px;padding:4px;gap:2px}
  .cal-chip{font-size:9px;padding:1px 4px}
  .cal-num{min-width:18px;height:18px;font-size:11px}
}

.cal-chip.s-livraison{background:var(--accent-weak);color:var(--accent-ink)}
.cal-chip.s-livraison-reportee{background:var(--warn-weak);color:var(--warn)}

/* Module mis en sommeil : visible mais inaccessible, pour qu'on sache qu'il existe. */
.hp-tile.off{opacity:.5;cursor:not-allowed;box-shadow:none}
.hp-tile.off:hover{border-color:var(--border);transform:none;box-shadow:none}
.hp-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface-3);color:var(--muted);padding:2px 7px;border-radius:999px;vertical-align:middle}

/* ===== Coûts par lot ===== */
.ct-head{margin-bottom:12px}
.ct-top{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center}
.ct-pct b{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1;display:block}
.ct-pct b span{font-size:1rem;font-weight:500;color:var(--muted);margin-left:2px}
.ct-pct small{color:var(--muted);font-size:11.5px}
.ct-bar{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden;min-width:90px}
.ct-bar i{display:block;height:100%;background:var(--good);border-radius:999px;transition:width .3s}
.ct-chiffres{display:flex;gap:20px}
.ct-chiffres div{text-align:right}
.ct-chiffres span{display:block;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.ct-chiffres small{color:var(--muted);font-size:11px}
.ct-chiffres .alerte span{color:var(--warn)}
.ct-save{white-space:nowrap}
@media (max-width:900px){.ct-top{grid-template-columns:1fr;gap:12px}.ct-chiffres{flex-wrap:wrap;gap:14px}.ct-chiffres div{text-align:left}}
.ct-outils{margin-bottom:12px}
.ct-tbl td{vertical-align:middle}
.ct-sku{font-weight:600;font-size:13px}
.ct-des{color:var(--muted);font-size:11.5px}
.ct-lot{font-weight:700;font-size:13px}
.ct-tbl .cout-in{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.ct-tbl .cout-all{padding:4px 9px;font-size:11.5px;white-space:nowrap}
.ligne-modifiee{background:var(--accent-weak)}
.ligne-modifiee .cout-in{border-color:var(--accent)}

/* ===== Arrêté : chaîne de valorisation et contrôle de cohérence ===== */
.valo-suite{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.valo-l{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:var(--r-sm)}
.valo-l:nth-child(odd){background:var(--surface-2)}
.valo-l b{font-weight:600;font-size:13.5px;display:block}
.valo-l small{color:var(--muted);font-size:11.5px}
.valo-l .num{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.valo-l.fort{background:var(--accent-weak);color:var(--accent-ink)}
.valo-l.fort b,.valo-l.fort .num{font-size:15px}
.valo-l.fort small{color:inherit;opacity:.8}
.valo-ctrl{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r);margin-bottom:14px}
.valo-ctrl.ok{background:var(--good-weak);color:var(--good)}
.valo-ctrl.ko{background:var(--warn-weak);color:var(--warn)}
.valo-ctrl b{font-size:13.5px;display:block}
.valo-ctrl small{font-size:11.5px;opacity:.9}
.valo-aide{font-style:italic}
.valo-chiffres{display:flex;flex-wrap:wrap;gap:22px}
.valo-chiffres div{min-width:120px}
.valo-chiffres span{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.valo-chiffres small{color:var(--muted);font-size:11.5px}
.valo-chiffres .alerte span{color:var(--warn)}

/* Saisie du coût en trois parts : le COGS doit rester décomposable. */
.ct-tot{min-width:74px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}

/* Décomposition du COGS dans l'arrêté */
.valo-vent{display:flex;flex-wrap:wrap;align-items:baseline;gap:22px;padding:12px 14px;margin-bottom:14px;
  background:var(--surface-2);border-radius:var(--r)}
.valo-vent>b{font-size:12.5px}
.valo-vent div{min-width:100px}
.valo-vent span{display:block;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.valo-vent small{color:var(--muted);font-size:11px}
.valo-vent .alerte span{color:var(--warn)}

/* ===== Prévisionnel de trésorerie ===== */
.tr-tot{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline}
.tr-tot div{min-width:130px}
.tr-tot span{display:block;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.tr-tot small{color:var(--muted);font-size:11.5px}
.tr-tot .fort span{font-family:var(--font-display);font-size:1.7rem;color:var(--warn)}
.tr-mois{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding-bottom:4px}
.tr-m{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:72px;flex:1}
.tr-v{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-col{display:flex;flex-direction:column;justify-content:flex-end;height:120px;width:38px;
  background:var(--surface-3);border-radius:var(--r-sm);overflow:hidden}
.tr-col i{display:block;width:100%}
.tr-col .plan{background:var(--good)}
.tr-col .est{background:var(--warn)}
.tr-l{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.tr-c{font-size:10px;color:var(--muted);white-space:nowrap}

/* ===== Page d'activation d'un compte ===== */
.act-card{max-width:520px;text-align:left}
.act-card h1{text-align:center}
.act-champ{padding:14px 0;border-top:1px solid var(--border)}
.act-champ>label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.act-champ input[type=text]{flex:1;font-size:15px;font-weight:600;letter-spacing:.03em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.act-champ .btn{white-space:nowrap}
  display:grid;place-items:center;font-weight:700;font-size:13px;margin-top:2px}
.act-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 0 10px}
.act-mdp{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.act-mdp code{flex:1;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:9px 12px;font-size:15px;font-weight:600;letter-spacing:.04em;word-break:break-all}
.act-qr{background:#fff;border-radius:var(--r-sm);padding:8px;width:max-content;margin:0 0 10px}
.act-qr svg{display:block}
.code-2fa{font-size:22px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
  font-size:26px;margin:0 auto 14px}
.login-aide{color:var(--muted);font-size:12.5px;margin-top:14px;text-align:center}
.lien{background:none;border:0;color:var(--accent);font:inherit;font-size:inherit;cursor:pointer;padding:0;text-decoration:underline}
.hp-qui{color:var(--muted);font-size:12.5px;margin:-14px 0 20px}
.hp-qui.hp-alerte{color:var(--warn)}

/* Catalogue : bandeau de chargement de fichier */
.cat-fichier{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.cat-fichier>div:first-child{flex:1;min-width:260px}
.cat-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Signaler un problème */
.btn-signal{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-bottom:8px;
  background:none;border:1px dashed var(--border-strong);color:var(--muted);border-radius:var(--r-sm);
  padding:8px 10px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.btn-signal:hover{background:var(--surface-2);color:var(--ink);border-style:solid}
.sig-types{display:flex;gap:8px;flex-wrap:wrap}
.sig-types .btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sig-detail{margin-top:14px;font-size:12.5px}
.sig-detail summary{cursor:pointer;color:var(--muted)}
.sig-ctx{margin-top:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;font-size:11.5px;line-height:1.5;white-space:pre-wrap;max-height:220px;overflow:auto}

/* ===== Mode audit ===== */
.btn-audit{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:8px;background:none;
  border:1px solid var(--border-strong);color:var(--muted);border-radius:var(--r-sm);
  padding:8px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.btn-audit:hover{background:var(--surface-2);color:var(--ink)}
.au-inter{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:var(--surface-3);transition:background .15s}
.au-inter::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.btn-audit.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-weak)}
.btn-audit.on .au-inter{background:var(--accent)}
.btn-audit.on .au-inter::after{transform:translateX(13px)}
/* Un chiffre explicable devient visiblement cliquable, mais seulement en mode audit. */
.mode-audit .auditable{cursor:help;position:relative;outline:1px dashed var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.mode-audit .auditable:hover{background:var(--accent-weak)}
h4.sec{font-size:13px;font-weight:600;margin:18px 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.au-vers{cursor:pointer}
.au-vers:hover{background:var(--surface-2)}
.au-fleche{margin-left:8px;font-size:11px;font-weight:600;color:var(--accent-ink);opacity:0;transition:opacity .12s}
.au-vers:hover .au-fleche{opacity:1}
.au-valeur{font-family:var(--font-display);font-size:2rem;font-weight:600;margin-bottom:14px;font-variant-numeric:tabular-nums}
.au-formule{font-size:14px;margin:0 0 12px}
.au-calcul{margin:12px 0 0;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600}
.au-signe{color:var(--warn)}
.au-liste{margin:0;padding-left:20px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.au-pieges li{color:var(--warn)}
.au-verif{font-size:12.5px;color:var(--muted);margin:0}
.sig-item{border-bottom:1px solid var(--border);padding:10px 2px}
.sig-item:last-child{border-bottom:0}
.sig-item.fait{opacity:.55}
.sig-item summary{cursor:pointer;font-size:.8125rem;line-height:1.5}
.sig-item pre.sig-ctx{white-space:pre-wrap;margin:8px 0 0}

/* ===== Export comptable ===== */
.rap-cherche{position:relative;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r);padding:0 14px;margin-bottom:10px}
.rap-cherche:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.rap-cherche svg{width:19px;height:19px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.8}
.rap-cherche input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
  font:inherit;font-size:1rem;padding:14px 0}
.rap-cherche input::placeholder{color:var(--muted)}
.rap-x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:6px 2px;line-height:1}
.rap-x:hover{color:var(--ink)}
.rap-aide{font-size:12.5px;color:var(--muted);margin:0 2px 20px}
.rap-liste{display:flex;flex-direction:column;gap:8px}
.rap{display:flex;align-items:center;flex-wrap:wrap;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px}
.rap:hover{border-color:var(--border-strong)}
.rap-txt{flex:1;min-width:0}
.rap-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rap-h b{font-size:.9375rem}
.rap-r{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.rap-act{display:flex;align-items:center;gap:8px;flex:none}
.rap-mois{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--ink);
  border-radius:var(--r-sm);padding:7px 9px;font:inherit;font-size:12.5px}
.rap-perm{font-size:11.5px;color:var(--muted);white-space:nowrap}
@media (max-width:720px){
  .rap{flex-direction:column;align-items:stretch}
  .rap-act{justify-content:flex-end}
}

/* ===== Champs : autocomplétion et choix en boutons ===== */
.auto{position:relative}
.auto>input{width:100%}
.auto-liste{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);padding:4px}
.auto-item{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:0;
  color:var(--ink);font:inherit;font-size:.8125rem;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.auto-item b{font-weight:600}
.auto-item.sur,.auto-item:hover{background:var(--accent-weak);color:var(--accent-ink)}
.auto-aide{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-item.sur .auto-aide,.auto-item:hover .auto-aide{color:var(--accent-ink);opacity:.75}
.auto-rien{padding:9px 10px;font-size:12.5px;color:var(--muted)}

.chx{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chx-b{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--muted);
  border-radius:var(--r-sm);padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.chx-b:hover{color:var(--ink);border-color:var(--muted)}
.chx-b.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* Le taux habituel du fournisseur se signale sans se sélectionner tout seul :
   pré-cocher créerait un acompte que personne n'a versé. */
.chx-b.habituel:not(.on){border-style:dashed;border-color:var(--accent);color:var(--accent-ink)}
.chx-b.habituel:not(.on)::after{content:" ·  habituel";font-weight:500;opacity:.8}
.chx-libre{flex:1;min-width:130px}
.chx.mini .chx-b{padding:4px 9px;font-size:11.5px;font-weight:500}

/* Une ligne commandée : la référence au-dessus, le réglementaire en dessous. */
.artbloc{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 10px 8px;margin-bottom:8px;background:var(--surface)}
.artbloc .artline{margin-bottom:0}
/* Le volet réglementaire d'une ligne : signalé par un liseré, pas noyé dans la ligne. */
.artreg{display:flex;gap:14px;margin-top:10px;padding:10px 0 2px;border-top:1px solid var(--border)}
.artreg-tag{display:flex;align-items:center;gap:5px;flex:none;align-self:flex-start;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  background:var(--surface-2);border-radius:999px;padding:5px 10px 5px 8px;margin-top:16px}
.artreg-tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.artreg-c{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:10px 18px;flex:1;min-width:0}
.artreg-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.artreg-f>span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.artreg-f input{font-size:12.5px;padding:7px 10px;width:100%}
/* Trois états lisibles d'un coup d'œil : validé, refusé, pas encore regardé. */
.chx.conf .chx-b,.chx.offert .chx-b{padding:6px 11px;font-size:11.5px}
/* Barre de filtres partagée par les deux calendriers. Les puces restent petites :
   c'est un réglage, pas le contenu de l'écran. */
.filtres .filtre-tete{display:flex;align-items:center;gap:10px}
.filtres #filtreCorps{margin-top:10px}
/* Le chevron tourne pour dire si la zone est dépliée — le mot « Filtres » ne le dit pas. */
.filtre-chev{display:inline-block;transition:transform .15s ease;font-weight:700}
.filtre-chev.ouvert{transform:rotate(90deg)}
.filtre-bloc{display:flex;align-items:baseline;gap:10px;padding:5px 0;flex-wrap:wrap}
.filtre-lib{font-size:11.5px;font-weight:600;color:var(--muted);min-width:130px}
.filtres .chx{flex-wrap:wrap}
.filtres .chx-b{padding:4px 10px;font-size:11.5px}
@media (max-width:700px){.filtre-bloc{flex-direction:column;gap:5px}.filtre-lib{min-width:0}}
/* Courbe du coût unitaire — SVG tracé à la main, pas de bibliothèque pour une polyligne. */
.histgraph{position:relative;margin:10px 0 4px}
.histgraph svg{display:block;width:100%;height:120px;overflow:visible}
.histgraph .trait{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.histgraph .aire{fill:var(--accent);opacity:.10;stroke:none}
.histgraph circle{fill:var(--accent);stroke:var(--card);stroke-width:1.5;vector-effect:non-scaling-stroke}
.histbornes{display:flex;flex-direction:column;justify-content:space-between;position:absolute;
  top:0;right:0;height:120px;font-size:10.5px;color:var(--muted);pointer-events:none;padding:2px 0}
/* Les trois réponses en tête du prévisionnel : le premier chiffre est celui qu'on
   cherche en ouvrant l'écran, il doit se lire sans être cherché. */
.trq .tr-tot .fort span{font-size:1.35em}
/* Les filtres d'un rapport, dépliés sous sa carte. Discrets : c'est un réglage
   avant téléchargement, pas le contenu de l'écran. */
.rap-filtres{flex:0 0 100%;border-top:1px solid var(--border);margin-top:4px;padding-top:10px}
.rap-filtres .filtre-bloc{padding:4px 0}
.rap-filtres .chx{flex-wrap:wrap}
.rap-filtres .chx-b{padding:3px 9px;font-size:11px}
.chx.conf .chx-b.oui.on{background:var(--good-weak);border-color:var(--good);color:var(--good)}
.chx.conf .chx-b.non.on{background:var(--crit-weak);border-color:var(--crit);color:var(--crit)}
.chx.conf .chx-b.nc.on{background:var(--surface-3);border-color:var(--border-strong);color:var(--ink)}
.acc-taux{margin-top:4px}
@media (max-width:760px){
  .artreg{flex-direction:column;gap:8px}
  .artreg-tag{margin-top:0;align-self:flex-start}
  .artreg-c{grid-template-columns:1fr}
}

/* Prévision d'envoi : SKU, quantité, rappel du reste à annoncer. */
.cmdline.prevline{display:grid;grid-template-columns:2fr 1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
.prevline .pv-reste{font-size:11.5px;white-space:nowrap;align-self:center}
@media (max-width:900px){
  .cmdline.prevline{grid-template-columns:1fr auto auto!important}
  .cmdline.clhead.prevline{display:none}
  .prevline .pv-reste{display:none}
}

/* Calendrier de trésorerie : une pastille de montant par jour, d'autant plus marquée
   que la sortie est lourde dans le mois affiché. */
.cal-cell.a-sortie{background:var(--warn-weak)}
.cal-cell.a-sortie:hover{border-color:var(--warn)}
.tr-jour{display:block;font-size:12px;font-weight:700;color:var(--warn);font-variant-numeric:tabular-nums;line-height:1.3}
.tr-jour.plan{color:var(--accent-ink)}
.tr-jn{display:block;font-size:10px;color:var(--muted)}

/* ---- La page d'une commande ---- */
/* Même cadre que les formulaires plein écran, mais plus large : il y a des tableaux
   d'envois et de paiements, pas un formulaire en colonne. */
.cmdpage .fp-body{max-width:1060px;padding-bottom:48px}
.cmdpage>header .grow{flex:1}
.cmdpage>header h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Les intertitres gardaient leur taille grâce à `.modal-card h4.sec` ; la page n'est
   plus une modale, il faut la reprendre ici sinon ils grossissent. */
.cmdpage h4.sec{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
@media (max-width:720px){
  .cmdpage>header{flex-wrap:wrap;gap:8px}
  .cmdpage>header h3{white-space:normal;flex:1 0 100%;order:3}
}

/* ---- Récapitulatif d'une commande : prochaine action, envois, jauge ---- */
/* L'ancienne frise à 4 perles écrasait deux cycles de vie. Ici la commande n'a plus
   qu'une phrase — ce qu'il faut faire — et chaque envoi porte ses trois temps. */
.ojauge{display:flex;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin:8px 0 0}
.ojauge .jp{background:var(--good)}
.ojauge .jv{background:var(--accent)}
.oaction{display:block;margin-top:9px;font-size:12.5px;color:var(--ink);text-align:left}
.oaction.urgent{color:var(--warn);font-weight:600}
.oaction.fini,.oaction.calme{color:var(--muted)}
.oenvois{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.oenvoi{display:flex;align-items:center;gap:9px;font-size:12px;text-align:left}
.oenvoi>b{min-width:88px;font-weight:600}
.oenvoi .muted{font-size:11.5px}
.ofrise{display:inline-flex;gap:4px;align-items:center;flex:none}
.ofrise .bead{width:9px;height:9px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);display:inline-block}
.ofrise .bead.on{background:var(--accent);border-color:var(--accent)}
@media (max-width:640px){
  .oenvoi{flex-wrap:wrap}
  .oenvoi>b{min-width:0}
}

/* ---- Regroupement repliable de la liste des commandes ---- */
.cgrp{margin-bottom:10px}
.cgrp-tete{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.cgrp-tete:hover{background:var(--surface-2)}
.cgrp-tete .grow{flex:1}
.cgrp-tete .num{font-variant-numeric:tabular-nums;font-weight:600}
.cgrp-tete .muted{font-size:12px}

/* ---- Réclamations : un fil daté, pas une messagerie ---- */
.recl.close{opacity:.72}
.rmsg{border-left:2px solid var(--border-strong);padding:6px 0 6px 11px;margin:6px 0}
.rmsg-t{font-size:11.5px;margin-bottom:3px}
.rmsg-c{font-size:12.5px;white-space:pre-wrap;line-height:1.5}

/* ---- Reports d'expédition, sur la carte de l'envoi ---- */
/* Un retard est un événement d'ENVOI : il se note là où il se produit. Replié tant
   qu'il n'y en a pas — la carte d'un envoi qui part à l'heure n'a rien à en dire. */
.retbloc{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.retbloc>summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600;list-style:none;display:flex;align-items:center;gap:7px}
.retbloc>summary::-webkit-details-marker{display:none}
.retbloc>summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:14px}
.retbloc[open]>summary::before{transform:rotate(90deg)}
.retbloc>summary:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.retbloc>summary::before{transition:none}}

/* ---- Plusieurs départs annoncés d'un coup ---- */
/* L'usine expédie rarement une commande en une fois : une carte par départ, et le
   sous-total de chacune — sinon on ne sait pas ce que porte lequel. */
.pvenvoi{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.pvenvoi-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.pvenvoi-tete .pv-titre{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);flex:none}
.pvenvoi-tete .pv-nom{flex:1;min-width:130px;padding:5px 9px}
.pvenvoi-tete .pv-exp{padding:5px 9px}
.pvenvoi-tete .grow{flex:1}
.pv-soustotal{font-size:12px;text-align:right;margin-top:6px;font-variant-numeric:tabular-nums}
/* Le transport et le règlement vivent DANS la carte du départ : chacun a sa date
   d'arrivée estimée et ses propres échéances. */
.pvenvoi .field{margin-top:0}
.pvenvoi .pv-livr,.pvenvoi .pv-ech{display:block;margin-top:5px;font-size:12px}
/* Une ligne de calendrier mène à sa commande : on le montre au survol. */
.lines .l.clickable{cursor:pointer;border-radius:var(--r-sm);margin:0 -6px;padding-left:6px;padding-right:6px}
.lines .l.clickable:hover{background:var(--surface-2)}

/* ---- Légende du code couleur des calendriers ---- */
/* Les pastilles étaient colorées depuis toujours, mais rien ne disait ce que chaque
   couleur voulait dire. Sur le calendrier des arrivées elle classe la FIABILITÉ de la
   date : du constaté au déduit. */
.cal-legende{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.cal-leg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cal-leg-note{flex:1 1 100%;font-size:11px;font-style:italic;opacity:.85}
.cal-pastille{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none;background:var(--surface-3);border:1px solid var(--border-strong);margin-right:5px;vertical-align:-1px}
.cal-pastille.s-reception{background:var(--good);border-color:var(--good)}
.cal-pastille.s-livraison{background:var(--accent);border-color:var(--accent)}
.cal-pastille.s-expedition{background:var(--accent-ink);border-color:var(--accent-ink)}
.cal-pastille.s-livraison-reportee{background:var(--warn-weak);border-color:var(--warn)}
.cal-pastille.s-report{background:var(--warn);border-color:var(--warn)}
.cal-pastille.s-commande{background:var(--surface-3);border-color:var(--border-strong)}
/* La pastille « déduite de l'expédition » n'avait pas de couleur sur la grille : elle
   tombait dans le gris par défaut, indistinguable d'une date de commande. */
.cal-chip.s-expedition{background:var(--accent-weak);color:var(--accent-ink);opacity:.8}

/* ---------- Mode bac à sable ----------
   Demandé par Théo le 12/09 : « en bac à sable tu me grises tous les boutons sauf ceux
   du bac à sable et un bouton pour en ressortir ».

   On grise ET on rend inerte : un bouton pâle qui répond quand même laisse sortir du
   bac à sable sans s'en rendre compte, ce qui est exactement ce qu'on veut empêcher.
   La sortie se fait par le bouton dédié, qui est le seul chemin. */
body.bac-actif .modsel,
body.bac-actif .nav button:not([data-view="bac-a-sable"]),
body.bac-actif .periodnav,
body.bac-actif #statePill { opacity: .3; pointer-events: none; filter: grayscale(1); }
body.bac-actif .nav button[data-view="bac-a-sable"] { box-shadow: inset 0 0 0 2px var(--warn); }
/* Un liseré sur toute la page : on doit voir au premier coup d'œil qu'on n'est pas
   dans les vraies données, même après avoir fait défiler. */
body.bac-actif .main { box-shadow: inset 0 0 0 3px var(--warn-weak); }
.bac-bandeau { position: sticky; top: 0; z-index: 20; background: var(--warn-weak); color: var(--warn);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; }