:root {
  --bg:       #f4f6f9;
  --s1:       #ffffff;
  --s2:       #eef1f6;
  --s3:       #e4e8f0;
  --border:   #d0d7e3;
  --border2:  #b8c3d6;
  --gold:     #1e5bb5;
  --gold2:    #164a96;
  --gold-dim: rgba(30,91,181,0.10);
  --red:      #c0392b;
  --red-dim:  rgba(192,57,43,0.10);
  --green:    #1a8a6e;
  --green-dim:rgba(26,138,110,0.10);
  --blue:     #1e5bb5;
  --blue-dim: rgba(30,91,181,0.10);
  --text:     #1a2133;
  --text2:    #3d4f6b;
  --text3:    #6b7d9a;
  --mill:     #1e5bb5;
  --tour:     #4a6fa5;
  --mono:     'JetBrains Mono', 'Consolas', monospace;
  --sans:     'Inter', system-ui, sans-serif;
  --syne:     'Plus Jakarta Sans', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── TOPBAR ── */
.topbar {
  background: var(--s1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top:0; z-index:100;
  flex-shrink: 0;
}

.logo {
  display: flex; align-items: center; gap: 12px;
}

.logo-mark {
  width: 34px; height: 34px;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.logo-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold);
  opacity: 0.4;
}

.logo-mark svg { width:16px; height:16px; fill: var(--gold); }

.logo-text {
  font-family: var(--syne);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.logo-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px;
  gap: 2px;
}

.nav-btn {
  padding: 6px 18px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: var(--syne);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}

.nav-btn:hover { color: var(--text); }
.nav-btn.active {
  background: var(--gold);
  color: #ffffff;
}

.topbar-right {
  display: flex; align-items: center; gap: 14px;
}

.date-chip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 10px;
}

.btn-add {
  background: var(--gold);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  font-family: var(--syne);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.btn-add:hover { background: var(--gold2); }

/* ── VIEWS ── */
.view { display:none; padding:24px; flex:1; overflow-y:auto; }
.view.active { display:block; }
#view-ordo { padding:0; overflow:hidden; }
#view-ordo.active { display:flex; flex-direction:column; }

/* ── PAGE HEADER ── */
.page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-family: var(--syne);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.page-title em {
  color: var(--gold);
  font-style: normal;
}

/* ── STATS ── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.stat {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}

.stat-n {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
}

.stat-n.red { color: var(--red); }
.stat-n.blue { color: var(--blue); }
.stat-n.green { color: var(--green); }

.stat-l {
  font-size: 11px;
  color: var(--text2);
  font-family: var(--syne);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── SLIDE-DOWN FORM ── */
.form-wrap {
  display: none;
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 20px;
  margin-bottom: 20px;
}
.form-wrap.open { display: block; }

.form-heading {
  font-family: var(--syne);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.fg { display:flex; flex-direction:column; gap:4px; }
.fg label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fg input, .fg select, .fg textarea {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.fg input:focus, .fg select:focus { border-color: var(--gold); }
.fg select option { background: var(--bg); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }

.form-actions { display:flex; gap:10px; align-items:center; }

.btn { padding: 8px 18px; font-family: var(--syne); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; border: none; transition: all 0.15s; }
.btn-gold { background: var(--gold); color: #ffffff; }
.btn-gold:hover { background: var(--gold2); }
.btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border2); }
.btn-outline:hover { color: var(--text); border-color: var(--text2); }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }

/* ── TABLE ── */
.tbl-wrap {
  background: var(--s1);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tbl-head {
  display: grid;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  gap: 10px;
}

.tbl-head.cmd-grid {
  grid-template-columns: 88px 1fr 110px 80px 80px 95px 110px;
}

.th {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tbl-row {
  display: grid;
  padding: 9px 14px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.1s;
}
.tbl-row:hover { background: var(--s2); }
.tbl-row:last-child { border-bottom: none; }
.tbl-row.cmd-grid { grid-template-columns: 88px 1fr 110px 80px 80px 95px 110px; }

.cmd-id { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.cmd-client { font-weight: 600; font-size: 13px; }
.cmd-piece { font-size: 12px; color: var(--text2); }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-family: var(--syne);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid;
}
.b-urgent { background: var(--red-dim); color: #e74c3c; border-color: rgba(231,76,60,0.3); }
.b-normal { background: var(--green-dim); color: #2ecc71; border-color: rgba(46,204,113,0.25); }
.b-planif { background: var(--gold-dim); color: var(--gold); border-color: rgba(30,91,181,0.3); }
.b-prod { background: var(--blue-dim); color: #5dade2; border-color: rgba(93,173,226,0.3); }
.b-livr { background: var(--green-dim); color: #2ecc71; border-color: rgba(46,204,113,0.25); }
.b-oui { background: var(--green-dim); color: #2ecc71; border-color: rgba(46,204,113,0.25); }
.b-non { background: var(--red-dim); color: #e74c3c; border-color: rgba(231,76,60,0.3); }
.b-dispo { background: var(--green-dim); color: #2ecc71; border-color: rgba(46,204,113,0.25); }
.b-cmd { background: var(--gold-dim); color: var(--gold); border-color: rgba(212,168,67,0.3); }

.row-actions { display:flex; gap:5px; }
.ic-btn {
  width: 26px; height: 26px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.ic-btn:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.ic-btn.del:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── COLUMN FILTERS (Excel-style) ── */
.th-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.th-filter:hover .col-filter-btn { opacity: 1; }
.col-filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
  color: var(--text3);
  opacity: 0.5;
  transition: all 0.15s;
  line-height: 1;
}
.col-filter-btn.active {
  opacity: 1;
  color: var(--gold);
}
.col-filter-dropdown {
  display: none;
  position: fixed;
  background: var(--s1);
  border: 1px solid var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  z-index: 9999;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
}
.col-filter-dropdown.open { display: block; }
.col-filter-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 12px;
  background: var(--s2);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.col-filter-search::placeholder { color: var(--text3); }
.col-filter-all {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.col-filter-all:hover { background: var(--s2); }
.col-filter-item {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.col-filter-item:hover { background: var(--s2); }
.col-filter-item input[type=checkbox] {
  accent-color: var(--gold);
  width: 14px; height: 14px;
  cursor: pointer;
}
.col-filter-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.col-filter-footer button {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border2);
  background: none;
  cursor: pointer;
  font-family: var(--syne);
  font-weight: 600;
  color: var(--text2);
}
.col-filter-footer button.apply {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.col-filter-footer button:hover { opacity: 0.85; }

/* ── SCHEDULING ── */
.sched-wrap {
  display: flex;
  gap: 0;
  height: calc(100vh - 115px); /* topbar + page-hdr */
  overflow: hidden;
}

/* SIDEBAR — file d'attente */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--s1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.sidebar-hdr {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
#queueList {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
}

.q-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  padding: 7px 9px;
  margin-bottom: 5px;
  cursor: grab;
  user-select: none;
  transition: all 0.15s;
}
.q-card:active { cursor: grabbing; opacity: 0.5; }
.q-card.urgent { border-left-color: var(--red); }
.q-card.normal { border-left-color: var(--green); }
.q-card:hover { border-color: var(--gold); background: var(--s2); }

/* Hiérarchie cartes cédule (refonte 26 avril 2026, raffinée) :
   - Client : seul élément avec typo distinctive (12px gras)
   - PO + Article + Matériel + Qté + Date : tous au même niveau visuel (11px text2)
   - Op : monospace 10px (info technique pour l'opérateur)
   Mises en flex pour mettre Client/PO et Qté/Matériel sur la même ligne (gain d'espace). */
.q-row-top, .q-row-mid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.q-row-mid { margin-top: 3px; }
.q-client { font-weight: 600; font-size: 12px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-po     { font-family: var(--mono); font-size: 11px; color: var(--text2); flex-shrink: 0; }
.q-piece  { font-size: 11px; color: var(--text2); margin-top: 3px; }
.q-mat    { font-size: 11px; color: var(--text2); font-style: italic; flex-shrink: 0; }
.q-qty    { font-family: var(--mono); font-size: 11px; color: var(--text2); flex-shrink: 0; }
.q-op     { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 1px; }
.q-date   { font-size: 11px; color: var(--text2); margin-top: 3px; }

/* BOARD — table layout */
.board { flex: 1; overflow: auto; height: 100%; }
#boardInner { min-width: 100%; }

.sched-table {
  border-collapse: collapse;
  min-width: 100%;
  table-layout: fixed;
}

/* Header row */
.sched-th-machine {
  position: sticky; left: 0; z-index: 6;
  width: 130px; min-width: 130px;
  background: var(--bg);
  border-bottom: 2px solid var(--border2);
  border-right: 2px solid var(--border2);
  font-family: var(--mono); font-size: 9px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 0 10px; height: 50px; text-align: left; vertical-align: middle;
}
.sched-th-day {
  width: 210px; min-width: 210px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 6px 10px; vertical-align: middle;
  position: sticky; top: 0; z-index: 3;
}
.sched-th-day.sched-th-today {
  border-bottom-color: var(--gold);
  background: var(--gold-dim);
}
.sched-th-day.sched-th-past { opacity: 0.7; }
.sched-th-day.sched-th-weekend { background: rgba(255,255,255,0.02); }
.sched-td-day.sched-td-weekend { background: rgba(255,255,255,0.02); }
.day-label.weekend-lbl { color: var(--text3); }
.sched-th-add {
  width: 44px; min-width: 44px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  border-left: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3;
  text-align: center; vertical-align: middle;
}

.day-label { font-family: var(--syne); font-size: 12px; font-weight: 700; color: var(--text); }
.day-label.today-lbl { color: var(--gold); }
.day-label.past-lbl  { color: var(--text3); }
.day-date { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Group label rows */
.sched-group-row td { background: var(--bg); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.sched-group-cell {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg) !important;
  font-family: var(--syne); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-right: 2px solid var(--border2) !important;
}
.sched-group-spacer { border-left: 1px solid var(--border); }

/* Machine rows */
.sched-td-machine {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-right: 2px solid var(--border2);
  width: 130px; min-width: 130px;
  padding: 0; vertical-align: middle;
}
.m-cell-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 8px 6px;
  min-height: 90px;
}
.m-cell-inner .mi { font-size: 15px; margin-bottom: 3px; }
.m-cell-inner .ml { font-family: var(--syne); font-size: 11px; font-weight: 700; line-height: 1.2; }
.m-cell-inner .mt { font-family: var(--mono); font-size: 8px; color: var(--text3); margin-top: 2px; }

/* Drop cells */
.sched-td-day {
  vertical-align: top;
  min-width: 210px; width: 210px;
  min-height: 90px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 5px;
  background: var(--s1);
  transition: background 0.12s;
  position: relative; /* nécessaire pour que .lock-toggle (absolute) se cale dans la cellule (chantier 7c) */
}
.sched-td-day.sched-td-today { background: rgba(58,123,213,0.05); }
.sched-td-day.sched-td-weekend { background: rgba(255,255,255,0.02); }
.sched-td-day.over { background: var(--gold-dim) !important; outline: 1px dashed var(--gold); }
.sched-th-day.sched-th-weekend { background: rgba(255,255,255,0.02); opacity: 0.8; }
.day-label.weekend-lbl { color: var(--text3); }

/* ──────────────────────────────────────────────────────────────────────
   Cases bloquées (chantier 7c, session v16, 04 mai 2026)
   POURQUOI : marquage visuel rouge d'une cellule pour signaler à l'équipe
   "ne PAS céduler de production ici" (panne, jour férié, etc.).
   Purement visuel — drag-drop reste autorisé sur les cellules rouges.

   .lock-toggle      : cadenas 12-16px en haut-droite, discret au repos.
   .sched-td-locked  : applique le fond rouge clair quand la case est bloquée.
   ────────────────────────────────────────────────────────────────────── */
.lock-toggle {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: var(--text3);
  opacity: 0.35;
  border-radius: 3px;
  user-select: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  z-index: 3; /* au-dessus des sc-card pour rester cliquable même cellule pleine */
}
.lock-toggle:hover {
  opacity: 1;
  background: var(--s2);
  color: var(--text2);
}
.sched-td-day.sched-td-locked {
  background: var(--red-dim) !important; /* override sched-td-today aussi */
}
.sched-td-day.sched-td-locked .lock-toggle {
  opacity: 1;
  color: var(--red);
  background: rgba(192,57,43,0.15);
}
.sched-td-day.sched-td-locked .lock-toggle:hover {
  background: rgba(192,57,43,0.25);
}

/* Add day button */
.sched-add-btn {
  background: none; border: none; color: var(--text3);
  font-size: 22px; cursor: pointer; width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.sched-add-btn:hover { color: var(--gold); background: var(--gold-dim); }

.sc-card {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--border2);
  padding: 5px 7px;
  cursor: grab;
  user-select: none;
  transition: all 0.15s;
  display: flex;
  gap: 5px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.sc-card:active { cursor: grabbing; }
.sc-card.urgent { border-left-color: var(--red); }
.sc-card.normal { border-left-color: var(--green); }
.sc-card:hover { border-color: var(--gold); }
.sc-body { flex: 1; min-width: 0; }
/* Hiérarchie identique à .q-* (refonte 26 avril 2026, raffinée) — cohérence queue/board */
.sc-row-top, .sc-row-mid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.sc-row-mid { margin-top: 3px; }
.sc-card .sc-cl    { font-weight: 600; font-size: 12px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .sc-po    { font-family: var(--mono); font-size: 11px; color: var(--text2); flex-shrink: 0; white-space: nowrap; }
.sc-card .sc-pc    { font-size: 11px; color: var(--text2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .sc-mat   { font-size: 11px; color: var(--text2); font-style: italic; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .sc-qty   { font-family: var(--mono); font-size: 11px; color: var(--text2); flex-shrink: 0; }
.sc-card .sc-op    { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .sc-date  { font-size: 11px; color: var(--text2); margin-top: 3px; }
.sc-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
}
.sc-rm {
  background: none; border: none;
  color: var(--text3); cursor: pointer;
  font-size: 12px; padding: 1px 3px; line-height: 1;
  transition: color 0.1s;
}
.sc-rm:hover { color: var(--red); }
.empty-hint { font-family: var(--mono); font-size: 10px; color: var(--text3); padding: 6px; align-self: center; text-align: center; opacity: 0.5; }

/* Add day button */


/* ── BON DE LIVRAISON ── */
.doc-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }

.doc-list-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 16px;
}

.doc-item {
  padding: 9px 10px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  cursor: pointer;
  background: var(--bg);
  transition: all 0.15s;
}
.doc-item:hover, .doc-item.sel { border-color: var(--gold); background: var(--gold-dim); }
.doc-item .di-id { font-family: var(--mono); font-size: 10px; color: var(--gold); }
.doc-item .di-cl { font-weight: 600; font-size: 13px; }
.doc-item .di-inf { font-size: 11px; color: var(--text2); }

.doc-preview-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 20px;
}

/* ── PDF PREVIEW ── */
.pdf {
  background: #fff;
  color: #1a1a1a;
  padding: 28px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  min-height: 900px;
}
.pdf-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 3px solid #3a7bd5;
  margin-bottom: 18px;
}
.pdf-co-name { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; color: #111318; }
.pdf-co-name em { color: #3a7bd5; font-style: normal; }
.pdf-co-sub { font-size: 11px; color: #888; margin-top: 3px; line-height: 1.5; }
.pdf-dtype { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; color: #111; text-align: right; }
.pdf-dnum { font-family: 'DM Mono', monospace; font-size: 13px; color: #3a7bd5; text-align: right; margin-top: 2px; }
.pdf-ddate { font-size: 11px; color: #888; text-align: right; }
.pdf-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pdf-info-blk .lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 3px; }
.pdf-info-blk .val { font-size: 13px; font-weight: 600; }
.pdf-info-blk .sub { font-size: 11px; color: #555; }
table.pdf-tbl { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 12px; }
table.pdf-tbl th { background: #111318; color: #fff; padding: 7px 10px; font-family: 'Syne', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; text-align: left; }
table.pdf-tbl td { padding: 7px 10px; border-bottom: 1px solid #ececec; }
table.pdf-tbl tr:nth-child(even) td { background: #f9f9f9; }
.pdf-totals { text-align: right; font-size: 12px; margin-bottom: 16px; border-top: 1px solid #e0e0e0; padding-top: 10px; }
.pdf-totals .tot-line { margin-bottom: 3px; color: #555; font-variant-numeric: tabular-nums; }
.pdf-totals .tot-line strong { font-variant-numeric: tabular-nums; }
.pdf-totals .tot-final { font-size: 16px; font-weight: 900; font-family: 'Inter', sans-serif; color: #111; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.pdf-spacer { flex: 1; min-height: 16px; }
.pdf-footer { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #e0e0e0; padding-top: 12px; margin-top: auto; }
.pdf-note { font-size: 10px; color: #888; max-width: 240px; line-height: 1.5; }
.pdf-copy-badge-wrap { display: flex; justify-content: center; align-items: flex-end; flex: 1; }
.sig-box { text-align: right; }
.sig-line { width: 225px; border-bottom: 1px solid #999; height: 28px; margin-left: auto; }
.sig-lbl { font-size: 9px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ── TAMPON ANNULÉ ── */
.cancelled-stamp-wrap {
  position: relative;
  pointer-events: none;
}
.cancelled-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: 'Syne', sans-serif;
  font-size: 72px;
  font-weight: 900;
  color: rgba(214, 48, 49, 0.22);
  border: 8px solid rgba(214, 48, 49, 0.22);
  padding: 6px 18px;
  letter-spacing: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* ── LOGIN SCREEN ── */
#loginScreen {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
}

.login-box {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 40px 44px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.login-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}

.login-logo-mark {
  width: 42px; height: 42px;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.login-logo-mark::after {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid var(--gold);
  opacity: 0.35;
}
.login-logo-mark svg { width: 20px; height: 20px; fill: var(--gold); }

.login-title { font-family: var(--syne); font-size: 20px; font-weight: 800; }
.login-title em { color: var(--gold); font-style: normal; }
.login-subtitle { font-family: var(--mono); font-size: 10px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; }

.login-label {
  font-family: var(--mono); font-size: 10px;
  color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
  display: block; margin-bottom: 5px;
}

.login-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 11px 14px;
  font-family: var(--sans); font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 16px;
}
.login-input:focus { border-color: var(--gold); }

.login-btn {
  width: 100%;
  background: var(--gold);
  color: var(--bg);
  border: none;
  padding: 12px;
  font-family: var(--syne);
  font-weight: 800; font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.login-btn:hover { background: var(--gold2); }

.login-error {
  background: var(--red-dim);
  border: 1px solid rgba(192,57,43,0.3);
  color: #e74c3c;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--mono);
  margin-bottom: 14px;
  display: none;
}
.login-error.show { display: block; }

.login-version {
  position: absolute; bottom: -24px; right: 0;
  font-family: var(--mono); font-size: 9px; color: var(--text3);
  letter-spacing: 1px;
}

/* ── USER BADGE (topbar) ── */
.user-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.user-badge:hover { border-color: var(--gold); }
.user-badge .ub-name { font-family: var(--syne); font-size: 12px; font-weight: 600; }
.user-badge .ub-icon { font-size: 14px; }

.logout-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 12px;
  font-family: var(--syne);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.logout-btn:hover { border-color: var(--red); color: var(--red); }

/* ── SETTINGS MODAL ── */
.settings-user-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  background: var(--bg);
}
.sur-info .sur-name { font-weight: 600; }
.sur-info .sur-user { font-family: var(--mono); font-size: 11px; color: var(--text2); }
.sur-badge { font-family: var(--mono); font-size: 10px; color: var(--gold); background: var(--gold-dim); padding: 2px 7px; border: 1px solid rgba(212,168,67,0.3); }

/* ── EDIT ORDER MODAL ── */
#editOrderModal .modal {
  /* Bloc 4b-1 (2026-06-06) : elargi 960px -> 1500px. POURQUOI : la grille
     partagee .art-line-grid passe a 13 colonnes (ajout Prix+Total) ; dans ce
     modal contraint, les colonnes en fr (Description, Materiel, Op1/2/3)
     devenaient illisibles. On elargit SON conteneur sans toucher a la grille
     partagee (lecon §9.39). La borne vw plafonne sur petits ecrans atelier. */
  width: min(1500px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-section-lbl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  margin-top: 18px;
}
.modal-section-lbl:first-of-type { margin-top: 0; }

.edit-row-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}
/* ── Bouton "Marquer prêt à livrer" (NEW-5, 2026-05-24) ──
 * Remplace l'ancien status-selector à 3 boutons radio (planif/prod/livraison)
 * qui étaient purement décoratifs (toute valeur écrasée par updateOrderStatus
 * dans schedule.js). Le statut commande est désormais 100% auto-calculé.
 * Couleur verte cohérente avec l'ancien active-livraison pour ne pas dérouter
 * l'utilisateur. État disabled = greyed-out + tooltip explicatif au survol.
 */
.ready-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--green);
  background: var(--green-dim);
  color: var(--green);
  font-family: var(--syne);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.ready-btn:hover {
  background: rgba(26, 138, 110, 0.20);
}
.ready-btn[disabled],
.ready-btn.disabled {
  border-color: var(--border2);
  background: var(--s2);
  color: var(--text3);
  cursor: not-allowed;
}

/* Tooltip explicatif au survol du bouton désactivé.
 * Pourquoi un tooltip-wrap : un bouton désactivé ne reçoit pas
 * d'événement :hover dans tous les navigateurs, donc on encapsule
 * le bouton dans un wrapper qui déclenche l'affichage du tooltip. */
.tooltip-wrap {
  position: relative;
  display: inline-block;
}
.tooltip-wrap .tip {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--sans);
  white-space: nowrap;
  z-index: 10;
}
.tooltip-wrap .tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.tooltip-wrap:hover .tip { visibility: visible; }

/* ── TERMINÉ BUTTON on sc-card ── */
.sc-done {
  background: none; border: 1px solid var(--green);
  color: var(--green); cursor: pointer;
  font-size: 9px; font-family: var(--syne); font-weight: 700;
  padding: 2px 5px; letter-spacing: 0.5px;
  transition: all 0.15s; opacity: 0.75;
  white-space: nowrap;
}
.sc-done:hover { background: var(--green); color: #fff; opacity: 1; }

/* ── DRAG INSERT INDICATOR ── */
.sc-card.insert-before { border-top: 2px solid var(--gold); }
.sc-card.insert-after  { border-bottom: 2px solid var(--gold); }

/* ── URGENCY DELIVERY INDICATOR ── */
.sc-card.due-soon {
  border-top: 2px solid var(--red);
}
.sc-card.op-blocked {
  background: #fffde7;
  border-left-color: #ffc107 !important;
  opacity: 0.88;
}
.due-badge {
  display: inline-block;
  background: var(--red-dim);
  color: #e74c3c;
  border: 1px solid rgba(231,76,60,0.3);
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 5px;
  margin-top: 2px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── BL REVISED BADGE (QW5 étape 4 — 26 avril 2026) ──
   Affiché dans la liste des archives BL quand un BL Rapide a été révisé.
   Couleur jaune/orange pour le distinguer du badge ⚡ RAPIDE (doré). */
.bl-revised-badge {
  display: inline-block;
  background: rgba(255,193,7,0.15);
  color: #856404;
  border: 1px solid #ffc107;
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 5px;
}

/* ── BL HISTORY MODAL (QW5 étape 5 — 26 avril 2026) ──
   Chaque révision est présentée comme un bloc avec en-tête (numéro, date, user),
   raison, puis liste des changements. Les changements montrent les valeurs
   avant/après côte-à-côte avec une flèche, comme un mini-diff visuel. */
.bl-rev-entry {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid #ffc107;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.bl-rev-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.bl-rev-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #856404;
}
.bl-rev-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
}
.bl-rev-reason {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 8px;
}
.bl-rev-changes-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.bl-rev-change {
  background: var(--s2);
  padding: 5px 9px;
  margin-bottom: 3px;
  border-radius: 2px;
}
.bl-rev-change-label {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 2px;
}
.bl-rev-change-vals {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
}
.bl-rev-before {
  color: var(--red);
  text-decoration: line-through;
  opacity: 0.85;
}
.bl-rev-arrow {
  color: var(--text3);
  font-weight: 600;
}
.bl-rev-after {
  color: var(--green);
  font-weight: 600;
}

/* ── CLIENT EDIT ── */
.client-list-item { position: relative; }
.client-expanded {
  display: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  padding: 12px;
  margin-bottom: 5px;
  margin-top: -5px;
}
.client-expanded.open { display: block; }
.client-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* ── ORDER ARTICLES LINES ── */
/* MODIF v26 NEW-6a (24 mai 2026 soir) : extraction de la grille en classe
   .art-line-grid PARTAGÉE entre les en-têtes (index.html L151 et L733) et
   les lignes d'articles (.art-line dans commandes.js L441 et L925).
   POURQUOI : avant ce refactor, l'en-tête et les lignes utilisaient deux
     grilles DIFFÉRENTES (en-tête : `3fr 80px 1fr 1fr 1fr 1fr 120px 100px 80px 24px 24px`
     en attribut style="" inline ; lignes : la grille ci-dessous). Désalignement
     visuel constant. En centralisant ici, on a une SOURCE UNIQUE DE VÉRITÉ —
     quand on ajoutera la colonne Prix au Bloc 4, on modifiera UNIQUEMENT
     cette règle et les 4 endroits qui consomment (2 en-têtes HTML + 2
     contextes JS .art-line) resteront automatiquement synchronisés.
     Cf. §11.6 du TRANSFERT_SESSION_v25.md. */
.art-line-grid {
  display: grid;
  /* Bloc 4b-1 (2026-06-06) : +2 colonnes Prix (92px) + Total (100px) insérées
     ENTRE CAM (105px) et Statut (80px). 11 -> 13 colonnes. Total ligne = qté x prix,
     affiché en lecture seule (.art-total). Cf. maquettes v3/v4 figées (TRANSFERT v37). */
  grid-template-columns: 2fr 80px 1.2fr 1fr 1fr 1fr 130px 105px 92px 100px 80px 24px 24px;
  gap: 6px;
}
.art-line {
  /* Hérite des 3 propriétés de .art-line-grid via composition de classes
     dans le HTML/JS (class="art-line-grid art-line"). Ici uniquement les
     propriétés propres aux LIGNES (pas aux en-têtes). */
  align-items: center;
  margin-bottom: 5px;
}
.art-input {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 5px 8px;
  font-family: var(--sans); font-size: 12px;
  outline: none; width: 100%;
}
.art-input:focus { border-color: var(--gold); }
.art-add {
  background: var(--s2);
  border: 1px dashed var(--border2);
  color: var(--text2);
  padding: 5px;
  text-align: center;
  cursor: pointer;
  font-family: var(--syne); font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.15s; margin-bottom: 10px;
}
.art-add:hover { border-color: var(--gold); color: var(--gold); }

.art-select {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 5px 4px;
  font-family: var(--sans); font-size: 11px;
  outline: none; width: 100%;
  cursor: pointer;
}
.art-select:focus { border-color: var(--gold); }
.art-select option { background: var(--bg); }

/* ── Bloc 4b-1 (2026-06-06) : Prix dans les commandes ──
   .art-total : cellule "Total ligne" (qte x prix) en LECTURE SEULE dans la
     grille d'articles (rendue par commandes.js). Pas un input : le total est
     toujours calcule, jamais saisi (decision figee §11). Mono + aligne a droite
     pour lire les montants en colonne. .empty = ligne sans prix -> affiche "—".
   .form-totals : pied de totaux du FORMULAIRE de commande (sous-total + TPS +
     TVQ + grand total), present dans #addForm ET dans le modal d'edition. Style
     propre au formulaire (distinct de .pdf-totals qui sert au PDF imprime). */
.art-total {
  font-family: var(--mono); font-size: 12px;
  color: var(--gold); text-align: right;
  padding: 5px 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-total.empty { color: var(--text3); }
.form-totals {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.form-totals .tot-line { margin-bottom: 4px; color: var(--text2); font-size: 13px; }
.form-totals .tot-line strong { color: var(--text); }
.form-totals .tot-final {
  font-size: 18px; font-weight: 900; color: var(--text);
  margin-top: 8px; letter-spacing: -0.3px;
}
.form-totals .lbl { display: inline-block; min-width: 110px; text-align: left; }
.form-totals .amt { display: inline-block; min-width: 140px; }

.art-count {
  font-family: var(--mono); font-size: 10px;
  color: var(--gold); background: var(--gold-dim);
  padding: 1px 6px; border: 1px solid rgba(212,168,67,0.3);
  display: inline-block;
}

/* ── ORDER ARTICLES ACCORDION ── */
.art-expand-row {
  display: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px 10px 120px;
}
.art-expand-row.open { display: block; }
.art-expand-inner { border-left: 2px solid var(--border2); padding-left: 12px; }
.art-expand-hdr {
  display: grid;
  grid-template-columns: 2fr 80px 1fr 1fr 90px 70px 70px;
  gap: 8px; padding: 3px 0 4px;
  font-family: var(--mono); font-size: 9px;
  color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
}
.art-expand-line {
  display: grid;
  grid-template-columns: 2fr 80px 1fr 1fr 90px 70px 70px;
  gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px; align-items: center;
}
.art-expand-line:last-child { border-bottom: none; }
.expand-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--gold); cursor: pointer;
  font-size: 9px; padding: 1px 5px;
  font-family: var(--mono); font-weight: 700;
  transition: all 0.15s;
}
.expand-btn:hover { background: var(--gold-dim); }
.expand-btn.open { background: var(--gold-dim); }

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.filter-btn {
  padding: 4px 10px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-family: var(--syne);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.12s;
}
.filter-btn:hover { border-color: var(--text2); color: var(--text); }
.filter-btn.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.filter-btn.active-red { background: var(--red); color: #fff; border-color: var(--red); }
.filter-btn.active-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-btn.active-green { background: var(--green); color: #fff; border-color: var(--green); }

.filter-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

.sort-select {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 4px 8px;
  font-family: var(--syne);
  font-size: 11px; font-weight: 600;
  outline: none; cursor: pointer;
}
.sort-select option { background: var(--bg); }

.filter-reset {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  background: none; border: none;
  cursor: pointer; text-decoration: underline;
  transition: color 0.12s;
}
.filter-reset:hover { color: var(--gold); }

/* ── ARCHIVE TABS ── */
.archive-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.archive-tab {
  padding: 7px 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-family: var(--syne);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.archive-tab:hover { border-color: var(--text2); color: var(--text); }
.archive-tab.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.archive-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

/* ── BL ARTICLE CHECKLIST ── */
.bl-art-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
  background: var(--bg);
  transition: border-color 0.15s;
}
.bl-art-item.selectable { cursor: pointer; }
.bl-art-item.selectable:hover { border-color: var(--gold); }
.bl-art-item.checked { border-color: var(--gold); background: var(--gold-dim); }
.bl-art-item.delivered { opacity: 0.4; }
.bl-art-item.not-ready { opacity: 0.4; }

.bl-art-item input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.bl-art-desc { font-weight: 600; font-size: 12px; }
.bl-art-meta { font-size: 10px; color: var(--text2); font-family: var(--mono); }
.bl-art-status { font-size: 9px; margin-top: 2px; }

.qbl-line {
  display: grid;
  grid-template-columns: 2fr 80px 1fr 1fr 90px 24px;
  gap: 6px; align-items: center;
  margin-bottom: 5px;
}

.results-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.doc-btns { display: flex; gap: 10px; margin-top: 14px; }

/* ── SOUMISSIONS ── */
.soum-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }

.soum-form-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 18px;
}

.soum-list-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 18px;
}

.soum-item {
  padding: 9px 10px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  cursor: pointer;
  background: var(--bg);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.soum-item:hover, .soum-item.sel { border-color: var(--gold); background: var(--gold-dim); }
.si-left .si-id { font-family: var(--mono); font-size: 10px; color: var(--gold); }
.si-left .si-cl { font-weight: 600; }
.si-left .si-inf { font-size: 11px; color: var(--text2); }
.si-right { font-family: var(--mono); font-size: 12px; color: var(--green); }

.line-item {
  display: grid;
  grid-template-columns: 1fr 100px 60px 100px 100px 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

/* POURQUOI : les lignes de soumission ont 3 selects op (op1/op2/op3) au lieu
   d'un input op unique — grille élargie pour accueillir la colonne en plus. */
.soum-line-item {
  grid-template-columns: 1fr 100px 60px 70px 70px 70px 100px 28px;
}

.li-input {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 12px;
  outline: none;
  width: 100%;
}
.li-input:focus { border-color: var(--gold); }
.li-input.total { color: var(--green); font-family: var(--mono); }

.li-add {
  background: var(--s2);
  border: 1px dashed var(--border2);
  color: var(--text2);
  padding: 6px;
  text-align: center;
  cursor: pointer;
  font-family: var(--syne);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  margin-bottom: 12px;
}
.li-add:hover { border-color: var(--gold); color: var(--gold); }

.soum-preview-panel {
  margin-top: 20px;
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 20px;
}

/* ── CLIENT MODAL ── */
.modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px;
  width: 500px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-title {
  font-family: var(--syne);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--gold);
  margin-bottom: 18px;
}
.client-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
}
.client-list-item:hover { border-color: var(--gold); background: var(--gold-dim); }
.cli-name { font-weight: 600; }
.cli-email { font-size: 11px; color: var(--text2); }

/* ── NOTIF ── */
.notif {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--green);
  color: #fff;
  padding: 10px 18px;
  font-family: var(--syne);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  z-index: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s;
}
.notif.show { opacity: 1; transform: translateY(0); }

/* ── MISC ── */
.divider-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 12px;
}

.radio-group { display: flex; gap: 8px; align-items: center; }
.radio-opt {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--border2);
  background: var(--bg);
  font-size: 12px;
  transition: all 0.15s;
}
.radio-opt input { accent-color: var(--gold); }
.radio-opt.checked { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.section-lbl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── LOADING OVERLAY ── */
#loadingOverlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
#loadingOverlay.show { display: flex; }
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   CALCULATEUR DE MATIÈRE PREMIÈRE
   Outil interne d'aide à la cotation, situé dans la page
   Soumissions. Le résultat reste à l'écran et n'apparaît
   jamais sur les documents envoyés aux clients.
   ───────────────────────────────────────────────────────────── */

.calc-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 18px 22px;
}

.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-subtitle {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 14px;
  margin-top: -4px;
}

.calc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.calc-result-zone {
  background: var(--s2);
  border: 1px solid var(--border);
  padding: 14px;
  min-height: 50px;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.calc-result-item {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.calc-result-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.calc-result-value {
  font-family: var(--syne);
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

/* Mise en évidence du coût final — c'est l'info la plus importante */
.calc-result-cost {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.calc-result-cost .calc-result-value {
  color: var(--gold);
  font-size: 18px;
}

/* ── Modal "Modifier les prix" ── */

.mat-prices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.mat-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.mat-price-name {
  font-size: 13px;
  color: var(--text);
}

.mat-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mat-price-input-wrap input {
  width: 90px;
  background: var(--s1);
  border: 1px solid var(--border2);
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
}

.mat-price-input-wrap input:focus {
  border-color: var(--gold);
}

.mat-price-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

/* Responsive : sur petit écran, le résultat empile en colonne */
@media (max-width: 600px) {
  .calc-result-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════
   CALCULATEUR DE JOB (extension du calculateur matière)
   Ajouté 2026-05-03 (Session B1).
   POURQUOI : le panneau calculateur héberge maintenant 2 blocs
   (matière + job). Ces classes assurent la séparation visuelle
   et l'indicateur de taux horaire (placement B = bandeau pleine
   largeur entre les 2 blocs).
   ═══════════════════════════════════════════════════════════════ */

/* Séparateur horizontal entre le bloc matière et le bloc job. */
.calc-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0 14px 0;
}

/* Bandeau pleine largeur affichant le taux horaire courant.
   Fond gris neutre (s2) — le taux varie légitimement selon les jobs,
   donc PAS de coloration d'alerte. Discret par choix (validé maquette
   placement B, voir transfert v11 §7.6). */
.calc-hourly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--s2);
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.calc-hourly-banner-text {
  font-size: 12px;
  color: var(--text2);
}

.calc-hourly-banner-text strong {
  font-family: var(--syne);
  font-size: 14px;
  color: var(--text);
  margin-left: 4px;
}

.calc-hourly-banner-link {
  font-size: 12px;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

.calc-hourly-banner-link:hover {
  color: var(--gold2);
}


/* ═══════════════════════════════════════════════════════════════
   MODAL "PRIX & TAUX" — sections taux horaire / prix matière
   Ajouté 2026-05-03 (Session B1).
   POURQUOI : le modal contient 2 catégories (taux + prix matière).
   On réutilise .mat-price-row (déjà défini plus haut) pour les
   rangées, et on ajoute juste un label de section + un séparateur.
   ═══════════════════════════════════════════════════════════════ */

.mat-prices-section-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.mat-prices-section-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTRES ORDONNANCEMENT (Session 7a — 03 mai 2026)
   POURQUOI : permettre à chaque utilisateur (Phil, Michael, Caroline) de
   filtrer indépendamment les machines visibles sur le board et les
   opérations visibles dans la file d'attente. Pas de persistance : chaque
   onglet/utilisateur a son propre filtre, pas de conflit possible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bloc gauche du header view-ordo : titre + bouton filtre côte-à-côte */
.ordo-hdr-left {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Wrapper du bouton + panneau dépliable (position:relative pour que le
   panneau se positionne sous le bouton avec position:absolute) */
.machine-filter-wrap {
  position: relative;
}

/* Bouton "🔧 Filtre machines (N/11)" : style sobre, devient bleu quand
   un filtre est actif (= au moins une machine décochée) */
.btn-filter {
  background: var(--s1);
  color: var(--text2);
  border: 1px solid var(--border2);
  padding: 6px 12px;
  font-family: var(--syne);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-filter:hover { background: var(--s2); }
.btn-filter.active {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: var(--gold);
}
.btn-filter .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-left: 4px;
}
.btn-filter.active .count { color: var(--gold); }

/* Panneau dépliable des cases à cocher machines.
   Caché par défaut (display:none), visible quand .open est ajouté. */
.machine-filter-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--s1);
  border: 1px solid var(--border2);
  padding: 12px 14px;
  min-width: 280px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: none;
}
.machine-filter-panel.open { display: block; }

/* Ligne du haut : "Tout afficher · Tout décocher" */
.machine-filter-panel .reset-row {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
}
.machine-filter-panel .reset-link {
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
}
.machine-filter-panel .reset-link:hover { color: var(--gold2); }
.machine-filter-panel .reset-sep {
  color: var(--text3);
  margin: 0 8px;
}

/* Groupe de machines (un par catégorie : mill3, mill5, tour, conv, posttr.) */
.mfp-group { margin-bottom: 10px; }
.mfp-group:last-child { margin-bottom: 0; }

/* Label du groupe : cliquable pour cocher/décocher tout le groupe d'un coup */
.mfp-group-label {
  font-family: var(--syne);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  padding: 3px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mfp-group-label:hover { color: var(--gold); }
.mfp-group-label .group-toggle {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  font-weight: 400;
}

/* Ligne d'une machine : checkbox + label, indenté sous le groupe */
.mfp-machine-row {
  padding: 3px 0 3px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mfp-machine-row:hover { color: var(--gold); }
.mfp-machine-row input[type=checkbox] {
  cursor: pointer;
  margin: 0;
}

/* ── Modale d'impression de la cédule (sous-chantier A) ───────────────────
   POURQUOI : la modale réutilise les classes GLOBALES du filtre 7a (.mfp-group,
   .mfp-group-label, .group-toggle, .mfp-machine-row) et des modals (.modal-title,
   .modal-section-lbl, .btn-gold, .btn-outline). Les classes .reset-* étant
   SCOPÉES à .machine-filter-panel, on les redéfinit ici scopées à
   #printScheduleModal (mêmes valeurs). Les styles propres aux lignes de
   semaines / encadré récap / avertissement sont aussi scopés à la modale pour
   éviter toute collision de noms génériques (.summary, .warn) ailleurs. */
#printScheduleModal .reset-row {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
}
#printScheduleModal .reset-link {
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
}
#printScheduleModal .reset-link:hover { color: var(--gold2); }
#printScheduleModal .reset-sep {
  color: var(--text3);
  margin: 0 8px;
}
#printScheduleModal .wk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
#printScheduleModal .wk-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  cursor: pointer;
}
#printScheduleModal .wk-row .rg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  margin-left: auto;
}
#printScheduleModal .summary {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--gold-dim);
  border-left: 3px solid var(--gold);
  font-size: 13px;
  color: var(--text);
}
#printScheduleModal .summary b { color: var(--gold); }
#printScheduleModal .warn {
  margin-top: 10px;
  font-size: 12px;
  color: var(--red);
  display: none;
}

/* Filtre opérations dans la sidebar (chips Milling/Tournage/Anodisation) */
.op-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.op-filter-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--s2);
  border: 1px solid var(--border2);
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  user-select: none;
}
.op-filter-chip:hover { background: var(--s3); }
.op-filter-chip.checked {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}
.op-filter-chip input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECHERCHE ORDONNANCEMENT (Session 7b — 03 mai 2026)
   POURQUOI : permettre une recherche "Ctrl+F like" sur la cédule pour
   répondre vite au téléphone à un client qui demande où en est sa commande.
   La recherche override les filtres 7a tant que du texte est saisi : on voit
   uniquement les cellules (jour×machine) qui contiennent une carte qui
   match, le reste est caché. Aucune persistance, pur affichage côté client.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper de la barre de recherche (icône + input + bouton effacer) */
.ordo-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ordo-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 12px;
  pointer-events: none;
}
.ordo-search-input {
  width: 280px;
  padding: 6px 28px 6px 28px;
  border: 1px solid var(--border2);
  background: var(--s1);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  box-sizing: border-box;
  outline: none;
}
.ordo-search-input:focus {
  border-color: var(--gold);
}

/* Bouton ✕ : visible uniquement quand l'input contient du texte (.has-value) */
.ordo-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  display: none;
}
.ordo-search-clear:hover { color: var(--gold); }
.ordo-search-wrap.has-value .ordo-search-clear { display: block; }

/* Quand recherche active, l'input prend une bordure dorée pour signaler
   l'état "focus mode" (cohérent avec l'override des filtres 7a) */
.ordo-search-wrap.has-value .ordo-search-input {
  border-color: var(--gold);
  background: var(--gold-dim);
}

/* État du bouton filtre quand la recherche override : visuellement
   désactivé/grisé pour qu'on comprenne qu'il n'a plus d'effet temporairement.
   On garde le compteur pour qu'on voit ce que sera l'état au retour. */
.btn-filter.search-override {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto; /* on permet le hover pour le tooltip natif (title) */
}
.btn-filter.search-override:hover {
  background: var(--s1); /* annule l'effet hover normal */
}