:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --ink:#1c2024; --mute:#6b7280;
  --accent:#5b3df5;
  /* Seuils de la colonne J du sheet des marges, valeurs RGB à l'identique. */
  --vert-fonce:rgb(147,196,125);
  --vert-clair:rgb(217,234,211);
  --orange:rgb(249,203,156);
  --rouge:rgb(255,120,120);
}
*{box-sizing:border-box}
body{margin:0;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink)}

.bar,.subbar{display:flex;gap:10px;align-items:center;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar{position:sticky;top:0;z-index:20}
.brand{font-weight:650;font-size:14px;margin-right:6px}
.ctl{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  background:#fff;color:inherit}
.ctl.grow{flex:1;min-width:180px}
button.ctl{cursor:pointer}
button.ctl:hover{border-color:#c3c8ce}
.ghost{background:none;border:none;cursor:pointer;color:var(--mute);font-size:15px;padding:4px 7px}
.toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;color:var(--mute)}
.dates{display:flex;align-items:center;gap:6px}
.lbl{color:var(--mute)}
.chip{background:#eef0f4;border-radius:20px;padding:4px 10px;color:var(--mute);font-size:12px}
.count{margin-left:auto;color:var(--mute)}

.legend{display:flex;gap:14px;padding:7px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);flex-wrap:wrap;color:var(--mute);font-size:12px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;
  vertical-align:-1px}

.tablewrap{overflow:auto;max-height:calc(100vh - 190px);background:var(--panel)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
th,td{padding:6px 8px;white-space:nowrap;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:#fbfcfd;text-align:left;font-weight:600;
  cursor:pointer;user-select:none;z-index:5;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.02em;color:#4b5563}
th:hover{background:#f2f4f7}
th .arrow{color:var(--accent);margin-left:3px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer}
tbody tr:hover{outline:2px solid var(--accent);outline-offset:-2px}
td.name{white-space:normal;min-width:250px;max-width:420px}
.sub{color:var(--mute);font-size:11px}

tr.vert_fonce{background:var(--vert-fonce)}
tr.vert_clair{background:var(--vert-clair)}
tr.orange{background:var(--orange)}
tr.rouge{background:var(--rouge)}
tr.blanche{background:#fff}

.badge{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10.5px;
  background:#eceff3;color:#4b5563}
.badge.hors_zone{background:#fde2c8;color:#8a4b00}
.badge.inconnu{background:#e9ecef;color:#6b7280}
.badge.ancien{background:#e5e9ff;color:#3b4bb5}
.badge.manuel{background:#dcf5e4;color:#1d6b38}
.badge.exclu{background:#ffe0e0;color:#a11}

.pager{display:flex;gap:8px;align-items:center;padding:10px 14px;color:var(--mute)}
.pager button{font:inherit;padding:5px 11px;border:1px solid var(--line);
  border-radius:7px;background:#fff;cursor:pointer}
.pager button[disabled]{opacity:.4;cursor:default}

.dropdown{position:relative}
.menu{position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:9px;box-shadow:0 12px 32px rgba(0,0,0,.13);z-index:40;
  max-height:340px;overflow:auto;min-width:240px}
.menu label{display:flex;gap:7px;align-items:center;padding:3px 4px;cursor:pointer;border-radius:5px}
.menu label:hover{background:#f3f5f8}
.hidden{display:none}
/* `.hidden` doit gagner sur `.modal{display:flex}` : même spécificité, donc on l'explicite. */
.modal.hidden,.menu.hidden{display:none !important}

.modal{position:fixed;inset:0;background:rgba(15,18,22,.45);display:flex;
  align-items:flex-start;justify-content:center;padding:36px 16px;z-index:60;overflow:auto}
.modal-card{background:#fff;border-radius:13px;width:min(680px,100%);
  box-shadow:0 24px 64px rgba(0,0,0,.3);
  /* En-tête figé et corps qui défile SOUS lui, dans sa propre zone. Avec un
     en-tête simplement collant, le titre recouvrait les premiers champs et les
     rendait inatteignables. */
  display:flex;flex-direction:column;max-height:calc(100vh - 72px)}
.modal-head{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);font-weight:620;background:#fff;
  border-radius:13px 13px 0 0;flex:0 0 auto}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1 1 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.field label{display:block;color:var(--mute);font-size:11.5px;margin-bottom:3px}
.field .val{font-size:15px;font-variant-numeric:tabular-nums}
.field .was{color:var(--mute);font-size:11px;margin-top:2px}
.sect{margin:16px 0 8px;font-weight:620;font-size:12px;color:#4b5563;
  border-top:1px solid var(--line);padding-top:12px}
.note{color:var(--mute);font-size:11.5px;margin-top:6px}

/* ---- modale d'édition ---- */
.inputline{display:flex;align-items:center;gap:6px}
.minput{font:inherit;font-size:15px;padding:6px 9px;border:1px solid var(--line);
  border-radius:7px;width:100%;font-variant-numeric:tabular-nums}
.minput:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.unit{color:var(--mute)}
.actions{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.btn{font:inherit;padding:7px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer}
.btn:hover{border-color:#b9bec6}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{background:#d1274b;color:#fff;border-color:#d1274b;font-weight:600}
.btn.ghost2{color:var(--mute)}
.btn[disabled]{opacity:.55;cursor:default}
.calcstate{color:var(--mute);font-size:11.5px}
.val.bucket{border-radius:6px;padding:2px 8px;display:inline-block}
.val.bucket.vert_fonce{background:var(--vert-fonce)}
.val.bucket.vert_clair{background:var(--vert-clair)}
.val.bucket.orange{background:var(--orange)}
.val.bucket.rouge{background:var(--rouge)}
.warn{background:#fff5e0;border:1px solid #f0d69a;color:#7a5200;border-radius:8px;
  padding:8px 11px;margin-top:7px;font-size:12px}
.variants{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:4px}
.vrow{display:grid;grid-template-columns:20px minmax(80px,1fr) 86px 86px 86px 80px;gap:9px;
  align-items:center;padding:6px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.vprice{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.vbarre{color:var(--mute);font-size:10.5px;text-decoration:line-through}
.vpaid{font-variant-numeric:tabular-nums;font-size:12px}
.vrow:last-child{border-bottom:none}
.vrow:hover{background:#f6f8fb}
.vrow.self{background:#f2effe}
.vname{font-size:12px}
.vprice{font-variant-numeric:tabular-nums;font-size:12px}
.vmargin{font-size:11px;border-radius:5px;padding:1px 7px;color:#333;text-align:center}
.vnew input.vinput{font:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--line);
  border-radius:6px;width:100%;text-align:right;font-variant-numeric:tabular-nums;cursor:text}
.vnew input.vinput:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.vmarginhead{text-align:center}
.vmargin.vert_fonce{background:var(--vert-fonce)}
.vmargin.vert_clair{background:var(--vert-clair)}
.vmargin.orange{background:var(--orange)}
.vmargin.rouge{background:var(--rouge)}
.footer{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line);flex-wrap:wrap}

/* ---- navigation et panneaux ---- */
.tabs{display:flex;gap:2px;background:#eef0f4;border-radius:9px;padding:3px}
.tab{font:inherit;font-size:12.5px;padding:5px 13px;border:none;background:none;
  border-radius:7px;cursor:pointer;color:var(--mute)}
.tab:hover{color:var(--ink)}
.tab.active{background:#fff;color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.panel{padding:16px 18px;max-width:1100px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;margin-bottom:14px}
.card h3{margin:0 0 3px;font-size:13.5px}
.card .hint{color:var(--mute);font-size:11.5px;margin-bottom:12px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 14px}
.formgrid label{display:block;color:var(--mute);font-size:11.5px;margin-bottom:3px}
.formgrid input,.formgrid select{font:inherit;padding:6px 9px;border:1px solid var(--line);
  border-radius:7px;width:100%;background:#fff}
.lights{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 2px}
.light{font-size:11px;padding:2px 9px;border-radius:20px;background:#eceff3;color:#4b5563}
.light.on{background:#dcf5e4;color:#1d6b38}
.light.off{background:#ffe0e0;color:#a11}
.saved{color:#1d6b38;font-size:11.5px;margin-left:8px}
.hrow{display:grid;grid-template-columns:70px 1fr auto auto auto;gap:12px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:none}
.hstatus{font-size:11px;padding:2px 8px;border-radius:5px;background:#eceff3;color:#4b5563}
.hstatus.applique{background:#dcf5e4;color:#1d6b38}
.hstatus.brouillon,.hstatus.simule{background:#e5e9ff;color:#3b4bb5}
.hstatus.annule{background:#eceff3;color:#6b7280}
.hstatus.echec,.hstatus.partiel{background:#ffe0e0;color:#a11}
.vrow.vhead{background:#fbfcfd;border-bottom:1px solid var(--line)}
.vrow.vhead:hover{background:#f2f4f7}
.plinks{display:flex;gap:8px;margin-top:6px}
.plink{font-size:11.5px;text-decoration:none;color:var(--accent);border:1px solid #d8d3fb;
  background:#f4f2ff;border-radius:6px;padding:2px 9px;font-weight:500}
.plink:hover{background:#eae5ff}
.banner{background:#fff1f2;border:1px solid #f5c2c7;color:#8a1c2b;border-radius:9px;
  padding:10px 13px;margin-bottom:14px;font-size:12px;line-height:1.5}
.paliers{display:flex;flex-direction:column;gap:3px;margin:8px 0}
.palier{display:grid;grid-template-columns:80px 1fr auto;gap:10px;align-items:center;
  padding:5px 10px;background:#f6f8fb;border-radius:7px;font-size:12px}
.pcost{font-weight:640;font-variant-numeric:tabular-nums}
.pdate{color:var(--mute)}
.pn{color:var(--mute);font-size:11px}
.hobs{display:grid;grid-template-columns:82px 58px 78px 1fr;gap:8px;align-items:center;
  padding:4px 10px;font-size:11.5px;border-bottom:1px solid var(--line)}
.hobs:last-child{border-bottom:none}
.hdate,.horder{color:var(--mute)}
.hcost{font-variant-numeric:tabular-nums}
.badge.ok2{background:#dcf5e4;color:#1d6b38}
#hist-detail{border:1px solid var(--line);border-radius:8px;margin-top:6px;overflow:hidden}

/* ---- colonnes redimensionnables ---- */
/* `fixed` est indispensable : sans lui, le navigateur ignore les largeurs
   posées sur les en-têtes et réétale les colonnes textuelles. */
table{table-layout:fixed}
th{position:sticky;top:0;overflow:hidden}
th .thlabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:6px}
th .resizer{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;
  user-select:none}
th .resizer::after{content:"";position:absolute;top:22%;right:4px;width:1px;height:56%;
  background:#c9ced6}
th .resizer:hover::after{background:var(--accent);width:2px;right:3px}
td{overflow:hidden;text-overflow:ellipsis}
td.name{white-space:normal;min-width:0;max-width:none}
body.resizing{cursor:col-resize;user-select:none}
body.resizing th .resizer::after{background:var(--accent);width:2px}
.note.drift{background:#eef4ff;border:1px solid #c7d8f5;color:#1f4b8f;border-radius:8px;
  padding:8px 11px;margin-bottom:12px}
/* Ligne cochée : le filigrane indique le prix qu'elle recevra. */
.vrow.vpending .vinput::placeholder{color:var(--accent);opacity:.75}
.vrow.vpending{background:#faf9ff}
.vrow.vpending.self{background:#f2effe}

/* ---- prix d'achat fixé à la main, dans la modale ---- */
.actions.coutmanuel { flex-wrap: wrap; gap: 8px; align-items: center; }
.mcinput { width: 130px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.mcunit { margin-left: -4px; color: var(--mute); }
.mcnote { flex: 1; min-width: 220px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* Motif de la décision prise sur une commande, sous la ligne d'observation. */
.hnote { grid-column: 1 / -1; color: var(--mute); font-size: 12px; padding: 2px 0 4px 0; line-height: 1.35; }

/* Message affiché à la place des lignes quand le tableau est vide. */
tr.vide td { padding: 28px 18px; color: var(--mute); text-align: center; font-size: 14px; line-height: 1.5; }
tr.vide a { color: var(--accent); }
/* Marge calculée sur un coût ESTIMÉ (server/estimation.js) : visible, jamais confondue. */
.vmargin.estime{outline:1.5px dashed #666;outline-offset:-2px;font-style:italic;cursor:help}
.estimnote{margin-top:8px}