:root {
  --ink:#0B2545; --night:#061528; --red:#C8102E; --gold:#C9A227; --gold-soft:#F5EBC8;
  --bg:#F4F6F9; --card:#fff; --line:rgba(11,37,69,.10); --fog:#5A667B; --muted:#8A95A6;
  --ok:#1E8E5A; --ok-bg:#E3F4EC; --bad:#C8102E; --bad-bg:#FBE7EA; --wait:#9A7A12; --wait-bg:#FBF3D9;
  --display:"Archivo", "Arial Narrow", Arial, sans-serif; --body:"Source Sans 3", "Segoe UI", Arial, sans-serif; --mono:"IBM Plex Mono", Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:#1c2638; font:16px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
a { color:var(--ink); }
button, input, select, textarea { font:inherit; }
.boot { min-height:100vh; display:grid; place-items:center; }
.spin { width:28px; height:28px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--gold); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Logo ---------- */
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.logo svg { flex:none; }
.logo-word { font:800 21px/1 var(--display); font-stretch:92%; letter-spacing:-.3px; color:var(--ink); }
.logo-word b { color:var(--red); font-weight:800; }
.logo-hub { font:600 11px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--wait); background:var(--gold-soft); border-radius:999px; padding:4px 9px; }
.dark .logo-word { color:#fff; }

/* ---------- Écrans de connexion ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.auth-side { background:radial-gradient(ellipse at 20% 0%, #163b6b 0%, var(--night) 60%); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-side h1 { font:900 clamp(34px,4vw,54px)/1 var(--display); font-stretch:74%; margin:0 0 16px; letter-spacing:-1px; }
.auth-side h1 em { font-style:normal; color:var(--gold); }
.auth-side p { color:#C9D3E0; max-width:440px; font-size:17px; }
.auth-side ul { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; color:#E3E9F1; }
.auth-side li::before { content:"✓"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--gold); color:var(--night); font-size:11px; font-weight:800; margin-right:10px; }
.auth-side small { color:#7F8DA3; font-size:13px; }
.auth-main { display:grid; place-items:center; padding:40px 22px; }
.auth-card { width:100%; max-width:400px; }
.auth-card h2 { font:900 30px/1.1 var(--display); font-stretch:80%; color:var(--ink); margin:26px 0 6px; }
.auth-card .sub { color:var(--fog); margin:0 0 22px; }
.field { display:grid; gap:6px; margin-bottom:14px; }
.field label { font:600 12px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--fog); }
.field input, .field select, .field textarea { width:100%; border:1.5px solid #D5DCE5; border-radius:12px; padding:12px 14px; background:#fff; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; }
.field textarea { min-height:90px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--ink); box-shadow:0 0 0 4px rgba(11,37,69,.08); }
.code-input { font:600 26px var(--mono) !important; letter-spacing:10px; text-align:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:12px 22px; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .15s, background .2s; }
.btn:active { transform:scale(.98); }
.btn-gold { background:var(--gold); color:var(--night); }
.btn-gold:hover { background:#D6B03A; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid rgba(11,37,69,.18); }
.btn-red { background:var(--bad-bg); color:var(--bad); }
.btn-ok { background:var(--ok); color:#fff; }
.btn-sm { padding:8px 14px; font-size:14px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.55; pointer-events:none; }
.form-err { color:var(--bad); background:var(--bad-bg); border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:14px; }
.lang-switch { display:inline-flex; gap:4px; background:rgba(11,37,69,.06); border-radius:999px; padding:3px; }
.lang-switch button { border:0; background:none; border-radius:999px; padding:4px 10px; font:600 12px var(--mono); color:var(--fog); cursor:pointer; }
.lang-switch button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.dark .lang-switch { background:rgba(255,255,255,.08); } .dark .lang-switch button { color:#B9C4D3; } .dark .lang-switch button.on { background:#fff; color:var(--ink); }
.qr { display:grid; place-items:center; background:#fff; border:1.5px solid #D5DCE5; border-radius:14px; padding:14px; margin:10px 0; }
.secret { font:600 13px var(--mono); word-break:break-all; background:var(--bg); border-radius:10px; padding:10px 12px; color:var(--ink); }
.steps-mini { color:var(--fog); font-size:14px; padding-left:18px; margin:6px 0 14px; }

/* ---------- Application ---------- */
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.side { background:var(--night); color:#fff; padding:22px 16px; display:flex; flex-direction:column; gap:24px; position:sticky; top:0; height:100vh; }
.side nav { display:grid; gap:4px; }
.side nav a { display:flex; align-items:center; gap:10px; color:#B9C4D3; text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600; }
.side nav a:hover { background:rgba(255,255,255,.05); color:#fff; }
.side nav a.on { background:rgba(201,162,39,.14); color:var(--gold); }
.side nav svg { width:18px; height:18px; flex:none; }
.side .who { margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding-top:16px; font-size:14px; }
.side .who b { display:block; color:#fff; } .side .who span { color:#8A95A6; font-size:13px; }
.side .who .row { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:8px; }
.linkbtn { border:0; background:none; color:#B9C4D3; cursor:pointer; padding:0; font-size:14px; text-decoration:underline; }
.main { padding:34px 40px 60px; min-width:0; }
.top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.top h1 { font:900 clamp(28px,3vw,40px)/1.05 var(--display); font-stretch:78%; color:var(--ink); margin:0; letter-spacing:-.5px; }
.top p { margin:6px 0 0; color:var(--fog); }
.eyebrow { font:600 12px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin:0 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 14px 30px -26px rgba(11,37,69,.5); }
.card + .card { margin-top:18px; }
.card h3 { font:800 20px/1.2 var(--display); font-stretch:86%; color:var(--ink); margin:0 0 14px; }
.grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.stat b { display:block; font:900 34px/1 var(--display); font-stretch:72%; color:var(--ink); }
.stat span { color:var(--fog); font-size:14px; }
.empty { text-align:center; color:var(--fog); padding:36px 16px; }
.empty b { display:block; color:var(--ink); font-size:18px; margin-bottom:6px; }

/* liste de commandes */
.olist { display:grid; gap:10px; }
.orow { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; background:#fff; transition:border-color .2s, transform .15s; }
.orow:hover { border-color:rgba(201,162,39,.7); transform:translateY(-1px); }
.orow .ref { font:600 12px var(--mono); color:var(--muted); letter-spacing:.5px; }
.orow .t { font-weight:700; color:var(--ink); }
.orow .meta { color:var(--fog); font-size:14px; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; font:600 12px var(--mono); letter-spacing:.3px; white-space:nowrap; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.b-brief, .b-sample { background:#EEF1F6; color:#4A5A75; }
.b-production { background:var(--wait-bg); color:var(--wait); }
.b-inspection { background:#EDE7FA; color:#5B3FB0; }
.b-shipped { background:#E3EEFB; color:#1D5FB5; }
.b-delivered { background:var(--ok-bg); color:var(--ok); }
.b-on_hold { background:var(--bad-bg); color:var(--bad); }
.b-pass { background:var(--ok-bg); color:var(--ok); } .b-fail { background:var(--bad-bg); color:var(--bad); } .b-pending { background:var(--wait-bg); color:var(--wait); }

/* frise des étapes */
.track { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:6px 0 4px; }
.track div { position:relative; text-align:center; font-size:12.5px; color:var(--muted); padding-top:30px; }
.track div::before { content:""; position:absolute; top:9px; left:-50%; right:50%; height:3px; background:#E1E6ED; }
.track div:first-child::before { display:none; }
.track div i { position:absolute; top:0; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:#E1E6ED; display:grid; place-items:center; font-style:normal; font-size:11px; color:#fff; z-index:1; }
.track div.done { color:var(--ink); } .track div.done i, .track div.done::before { background:var(--gold); }
.track div.cur { color:var(--ink); font-weight:700; } .track div.cur i { background:var(--ink); box-shadow:0 0 0 5px rgba(11,37,69,.12); }
.track div.cur::before { background:var(--gold); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:15px; margin:0; }
.kv dt { color:var(--fog); } .kv dd { margin:0; color:var(--ink); font-weight:600; }
.timeline { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.timeline li { display:grid; grid-template-columns:14px 1fr; gap:12px; }
.timeline li::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--gold); margin-top:7px; box-shadow:0 0 0 4px var(--gold-soft); }
.timeline time { display:block; font:500 12px var(--mono); color:var(--muted); }
.report { border:1px solid var(--line); border-radius:16px; padding:18px; }
.report + .report { margin-top:14px; }
.report-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.report-head h4 { margin:0; font:800 18px var(--display); font-stretch:88%; color:var(--ink); }
.photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin:14px 0; }
.photos a { position:relative; display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--bg); }
.photos img { width:100%; height:100%; object-fit:cover; display:block; }
.photos .del { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(6,21,40,.75); color:#fff; cursor:pointer; }
.decision { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; align-items:flex-start; }
.decision textarea { flex:1 1 240px; border:1.5px solid #D5DCE5; border-radius:12px; padding:10px 12px; min-height:44px; }
.decided { margin-top:12px; padding:10px 14px; border-radius:12px; font-size:14px; }
.docs { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.docs li { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:12px; }
.docs a { font-weight:600; text-decoration:none; }
.docs small { color:var(--muted); }
.alert { display:flex; gap:12px; align-items:center; justify-content:space-between; background:var(--gold-soft); border:1px solid #E7D493; border-radius:14px; padding:14px 16px; margin-bottom:18px; color:#5E4A0C; flex-wrap:wrap; }

/* tableaux admin */
table.tbl { width:100%; border-collapse:collapse; font-size:15px; }
.tbl th { text-align:left; font:600 11.5px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
.tbl td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl-wrap { overflow-x:auto; }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.copybox { display:flex; gap:8px; margin-top:10px; } .copybox input { flex:1; font:500 13px var(--mono); border:1.5px solid #D5DCE5; border-radius:10px; padding:10px; }

/* fenêtre modale */
.modal-bg { position:fixed; inset:0; background:rgba(6,21,40,.55); display:grid; place-items:center; padding:20px; z-index:50; animation:fade .2s; }
.modal { background:#fff; border-radius:20px; width:100%; max-width:520px; max-height:90vh; overflow:auto; padding:26px; box-shadow:0 30px 80px -20px rgba(0,0,0,.4); }
.modal h3 { font:900 24px var(--display); font-stretch:82%; color:var(--ink); margin:0 0 16px; }
.modal .actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@keyframes fade { from { opacity:0; } }
#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--night); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; transition:transform .3s; z-index:60; max-width:90vw; }
#toast.on { transform:translateX(-50%) translateY(0); }

/* ---------- Mobile ---------- */
.mtop { display:none; }
@media (max-width:860px) {
  .auth { grid-template-columns:1fr; } .auth-side { padding:28px 22px; } .auth-side ul, .auth-side small { display:none; } .auth-side h1 { font-size:32px; }
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 30% 0 0; transform:translateX(-105%); transition:transform .25s; z-index:40; height:auto; }
  .side.open { transform:none; box-shadow:20px 0 60px rgba(0,0,0,.4); }
  .mtop { display:flex; justify-content:space-between; align-items:center; background:var(--night); padding:12px 16px; position:sticky; top:0; z-index:30; }
  .burger { border:0; background:rgba(255,255,255,.08); color:#fff; border-radius:10px; width:40px; height:40px; font-size:20px; cursor:pointer; }
  .main { padding:22px 16px 50px; }
  .grid2, .two { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(3,1fr); gap:8px; } .stat { padding:12px; } .stat b { font-size:26px; } .stat span { font-size:12.5px; }
  .track { grid-template-columns:repeat(6,1fr); } .track div { font-size:10.5px; }
  .orow { grid-template-columns:1fr; }
}
.side .logo { flex-wrap:wrap; row-gap:10px; }
.side .logo-hub { margin-left:44px; }
.two .span2 { grid-column:1 / -1; }
@media (max-width:860px) { .two .span2 { grid-column:auto; } }

/* ---------- Navigation : compteur de messages ---------- */
.side nav a > span:not(.nav-badge) { flex:1; white-space:nowrap; }
.nav-badge { flex:none; min-width:20px; height:20px; border-radius:999px; background:var(--red); color:#fff; font:700 11.5px var(--body); display:grid; place-items:center; padding:0 6px; }
.burger { position:relative; } .burger .dot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--red); }

/* ---------- Tableau de bord ---------- */
.todo { background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:16px; padding:8px 8px 8px 16px; margin-bottom:18px; }
.todo-h { font:600 11.5px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin:8px 0 4px; }
.todo-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; text-decoration:none; color:var(--ink); }
.todo-row:hover { background:var(--bg); }
.todo-row span:nth-child(2) { flex:1; } .todo-row b { font-size:14px; color:var(--wait); white-space:nowrap; }
.todo-i { width:34px; height:34px; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center; flex:none; }
.card-h { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; } .card-h h3 { margin:0; }
.more { font-size:14px; font-weight:600; color:var(--fog); text-decoration:none; } .more:hover { color:var(--ink); }
.tlist { display:grid; gap:6px; }
.trow { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; text-decoration:none; color:inherit; }
.trow:hover { background:var(--bg); } .trow b { color:var(--ink); font-size:14.5px; } .trow small { color:var(--muted); }
.trow p { margin:3px 0 0; color:var(--fog); font-size:14px; } .trow time { font:500 11.5px var(--mono); color:var(--muted); white-space:nowrap; }
.trow.unread { background:var(--gold-soft); } .trow.unread b::before { content:"● "; color:var(--red); }
.backlink { text-decoration:none; color:var(--fog); }

/* ---------- Onglets de la page commande ---------- */
.tabs { display:flex; gap:4px; margin:18px 0 14px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs a { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; text-decoration:none; color:var(--fog); font-weight:600; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs a.on { color:var(--ink); border-bottom-color:var(--gold); }
.tn, .tnew { min-width:20px; height:20px; border-radius:999px; font:700 11.5px var(--body); display:inline-grid; place-items:center; padding:0 6px; }
.tn { background:#EEF1F6; color:#4A5A75; } .tnew { background:var(--red); color:#fff; }
.photos a .cap { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(6,21,40,.8)); color:#fff; font-size:12px; padding:14px 8px 6px; }

/* ---------- Échanges & assistance ---------- */
.acts { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:18px; }
.act { display:grid; gap:4px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; text-decoration:none; color:inherit; font:inherit; transition:border-color .2s, transform .15s, box-shadow .2s; }
.act:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 30px -22px rgba(11,37,69,.5); }
.act-i { font-size:22px; } .act b { color:var(--ink); } .act small { color:var(--fog); }
.inbox { display:grid; grid-template-columns:300px 1fr; padding:0; overflow:hidden; min-height:460px; }
.ilist { border-right:1px solid var(--line); max-height:620px; overflow-y:auto; padding:10px; background:#FAFBFC; }
.ilist-h { font:600 11.5px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:6px 8px 8px; }
.irow { position:relative; display:block; width:100%; text-align:left; background:none; border:0; border-radius:12px; padding:10px 12px; cursor:pointer; font:inherit; color:inherit; margin-bottom:2px; }
.irow:hover { background:#fff; } .irow.on { background:#fff; box-shadow:0 0 0 1.5px var(--gold) inset; }
.irow b { display:block; color:var(--ink); font-size:14.5px; padding-right:28px; } .irow small { color:var(--muted); font-size:12.5px; }
.irow p { margin:3px 0 0; color:var(--fog); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.irow .tnew { position:absolute; top:10px; right:10px; } .irow.unread b { font-weight:800; }
.ipane { display:flex; flex-direction:column; min-width:0; }
.ipane-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); } .ipane-h b { color:var(--ink); } .ipane-h small { color:var(--muted); } .ipane-h .more { margin-left:auto; }
#ithr { flex:1; display:flex; flex-direction:column; }
.thread { display:flex; flex-direction:column; gap:10px; padding:16px 18px; max-height:440px; min-height:220px; overflow-y:auto; flex:1; }
#othread .thread { padding:4px 0 14px; }
.thread-empty { color:var(--fog); text-align:center; margin:auto; padding:30px 10px; }
.bubble { max-width:78%; border-radius:16px; padding:10px 14px; font-size:15px; }
.bubble.them { background:var(--bg); border-top-left-radius:4px; align-self:flex-start; }
.bubble.me { background:var(--ink); color:#fff; border-top-right-radius:4px; align-self:flex-end; }
.bubble .who { font:600 11px var(--mono); letter-spacing:.5px; text-transform:uppercase; opacity:.7; margin-bottom:3px; }
.bubble .txt { white-space:pre-line; word-wrap:break-word; } .bubble time { display:block; font-size:11.5px; opacity:.6; margin-top:4px; text-align:right; }
.att { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .att img { width:110px; height:110px; object-fit:cover; border-radius:10px; display:block; }
.attdoc { display:inline-block; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.15); color:inherit; font-size:13.5px; text-decoration:none; }
.bubble.them .attdoc, .modal .attdoc { background:#fff; border:1px solid var(--line); }
.sysmsg { align-self:center; text-align:center; background:var(--gold-soft); color:#5E4A0C; border-radius:12px; padding:8px 14px; font-size:13.5px; max-width:90%; } .sysmsg time { display:block; font-size:11px; opacity:.7; }
.composer { border-top:1px solid var(--line); padding:12px 14px; display:grid; gap:8px; }
#othread .composer { padding:12px 0 0; }
.composer textarea { width:100%; border:1.5px solid #D5DCE5; border-radius:12px; padding:10px 12px; resize:vertical; min-height:48px; outline:none; }
.composer textarea:focus { border-color:var(--ink); }
.composer-bar { display:flex; align-items:center; gap:10px; } .composer-bar .btn-gold { margin-left:auto; } .cmpn { color:var(--fog); font-size:13px; }
.c-open { background:var(--bad-bg); color:var(--bad); } .c-in_progress { background:var(--wait-bg); color:var(--wait); } .c-resolved { background:var(--ok-bg); color:var(--ok); } .c-rejected { background:#EEF1F6; color:#4A5A75; }
@media (max-width:860px) {
  .inbox { grid-template-columns:1fr; } .ilist { border-right:0; border-bottom:1px solid var(--line); max-height:260px; }
  .bubble { max-width:90%; } .acts { grid-template-columns:1fr 1fr; } .todo-row b { display:none; }
}


/* ---------- Échanges & assistance : en-tête humain et actions rapides ---------- */
.assist-top { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:14px; margin-bottom:18px; align-items:stretch; }
.agent { display:flex; gap:14px; align-items:center; margin:0 !important; background:linear-gradient(135deg, #0B2545, #163b6b); color:#fff; border:0; }
.agent-av { position:relative; flex:none; width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.agent-av i { position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; background:#8A95A6; border:3px solid #0F2D52; }
.agent-av i.on { background:#2ECC71; }
.agent-txt { display:grid; gap:3px; min-width:0; } .agent-txt b { font:800 17px var(--display); font-stretch:90%; }
.agent-st { font-size:13.5px; color:#B9C4D3; } .agent-st.on { color:#7DE3A8; font-weight:600; }
.agent-txt small { display:flex; align-items:center; gap:6px; color:#B9C4D3; font-size:12.5px; } .agent-txt small svg { width:14px; height:14px; flex:none; }
.qacts { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.qact { display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; cursor:pointer; text-decoration:none; color:inherit; font:inherit; transition:border-color .2s, transform .15s, box-shadow .2s; }
.qact:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 30px -22px rgba(11,37,69,.5); }
.qact b { display:block; color:var(--ink); font-size:15px; } .qact small { display:block; color:var(--fog); font-size:13px; margin-top:1px; }
.qi { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; } .qi svg { width:21px; height:21px; }
.qi-gold { background:var(--gold-soft); color:#8A6A10; } .qi-ink { background:#E3EAF5; color:var(--ink); } .qi-red { background:var(--bad-bg); color:var(--bad); } .qi-wa { background:#DDF7E7; color:#128C4B; }
.inbox.single { grid-template-columns:1fr; min-height:0; }
.thread-empty p { margin:0 0 14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip { border:1.5px solid rgba(201,162,39,.55); background:var(--gold-soft); color:#5E4A0C; border-radius:999px; padding:8px 14px; font:600 14px var(--body); cursor:pointer; transition:background .2s; }
.chip:hover { background:#F0E0A8; }
.sysmsg.meet { background:#E3EAF5; color:var(--ink); }
.muted-p { color:var(--fog); margin:0; }
@media (max-width:860px) { .assist-top { grid-template-columns:1fr; } .qacts { grid-template-columns:1fr; } }

/* ---------- Calendrier de rendez-vous (identique à la vitrine, version claire) ---------- */
.modal-bg.wide .modal { max-width:640px; }
.cal-hint { font-size:14.5px; color:var(--fog); margin:0; }
.cal-tz { display:flex; align-items:center; gap:10px; margin:12px 0; flex-wrap:wrap; font-size:14px; color:var(--fog); }
.cal-tz select { width:auto; max-width:100%; padding:8px 12px; font-size:15px; border:1.5px solid #D5DCE5; border-radius:10px; background:#fff; color:var(--ink); }
.cal-month { border:1px solid rgba(11,37,69,.12); border-radius:16px; padding:14px; background:#F7F8FA; }
.cm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cm-head b { font:800 20px var(--display); font-stretch:85%; text-transform:capitalize; color:var(--ink); }
.cm-nav { width:38px; height:38px; border-radius:50%; border:1px solid rgba(11,37,69,.18); background:none; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.cm-nav:disabled { opacity:.3; cursor:default; }
.cm-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.cm-wd { text-align:center; font:600 11px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--fog); padding-bottom:4px; }
.cm-day { aspect-ratio:1 / .9; border-radius:12px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px; min-width:0; font:inherit; }
.cm-day b { font:700 16px var(--body); }
.cm-day small { font:600 10px var(--mono); color:#9A7614; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cm-day.open { background:rgba(201,162,39,.14); border-color:rgba(176,138,23,.45); }
.cm-day.open:hover { background:rgba(201,162,39,.24); }
.cm-day.full { border-color:rgba(11,37,69,.12); background:#fff; } .cm-day.full small { color:#8A95A6; }
.cm-day.off { color:#B5BECB; cursor:default; }
.cm-day.today b { text-decoration:underline; text-underline-offset:3px; }
.cm-day.on { background:var(--gold); border-color:var(--gold); color:var(--night); } .cm-day.on small { color:var(--night); }
.cal-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; margin-top:12px; min-height:60px; }
.cal-slot { padding:10px 8px; border-radius:12px; border:1px solid rgba(176,138,23,.5); background:rgba(201,162,39,.1); color:var(--ink); cursor:pointer; text-align:center; font:700 16px var(--body); line-height:1.2; transition:background .15s, transform .15s; }
.cal-slot small { display:block; font:500 11px var(--mono); color:var(--fog); margin-top:3px; }
.cal-slot:hover { transform:translateY(-1px); background:rgba(201,162,39,.2); }
.cal-slot.sel { background:var(--gold); color:var(--night); border-color:var(--gold); } .cal-slot.sel small { color:var(--night); }
.cal-slot.taken { cursor:not-allowed; color:#9AA3B1; background:#F1F3F6; border-color:rgba(11,37,69,.1); text-decoration:line-through; }
.cal-slot.taken small { text-decoration:none; color:#9AA3B1; }
.cal-slot.night:not(.taken):not(.sel) { border-style:dashed; color:#33405A; }
.cal-msg { grid-column:1 / -1; color:var(--fog); font-size:15px; margin:0; }
.cal-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--fog); }
.cal-legend i { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:6px; vertical-align:-2px; font-style:normal; font-size:11px; line-height:14px; text-align:center; }
.lg-free { background:rgba(201,162,39,.25); border:1px solid rgba(176,138,23,.6); } .lg-taken { background:#F1F3F6; border:1px solid rgba(11,37,69,.15); }
.cal-sel { margin-top:12px; padding:12px 14px; border-radius:12px; background:rgba(201,162,39,.16); color:#7A5E0E; font-weight:700; }
@media (max-width:760px) { .cm-day small { display:none; } .cm-day.open::after { content:""; width:5px; height:5px; border-radius:50%; background:#9A7614; } .cm-day.on::after { background:var(--night); } .cm-grid { gap:4px; } }

/* ---------- Factures ---------- */
.tbl .num { text-align:right; white-space:nowrap; }
.tbl.inv small { color:var(--muted); } .tbl.inv tr.late td { background:#FFF7F8; }
.i-unpaid { background:var(--wait-bg); color:var(--wait); } .i-overdue { background:var(--bad-bg); color:var(--bad); } .i-paid { background:var(--ok-bg); color:var(--ok); } .i-cancelled { background:#EEF1F6; color:#4A5A75; }
.stat-bad b { color:var(--bad); }
.stats .stat b { font-size:clamp(22px, 2.4vw, 32px); }
.safe { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:4px solid var(--ink); border-radius:16px; padding:16px 18px; margin-bottom:18px; }
.safe b { color:var(--ink); } .safe p { margin:4px 0 6px; color:var(--fog); font-size:14.5px; } .safe a { font-weight:600; font-size:14px; }

/* ---------- Demandes de sourcing & devis ---------- */
.r-submitted { background:var(--bad-bg); color:var(--bad); } .r-sourcing { background:var(--wait-bg); color:var(--wait); } .r-proposals { background:#EDE7FA; color:#5B3FB0; }
.r-quote { background:#E3EEFB; color:#1D5FB5; } .r-accepted { background:var(--ok-bg); color:var(--ok); } .r-declined, .r-cancelled { background:#EEF1F6; color:#4A5A75; }
.q-sent { background:var(--wait-bg); color:var(--wait); } .q-accepted { background:var(--ok-bg); color:var(--ok); } .q-declined, .q-withdrawn, .q-expired { background:#EEF1F6; color:#4A5A75; }
.track.track5 { grid-template-columns:repeat(5,1fr); }
.how3 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.how3 div { display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:14px; color:var(--ink); }
.how3 b { flex:none; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:800 13px var(--body); }
.props { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.prop { position:relative; border:1.5px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.prop.chosen { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18); }
.prop-flag { position:absolute; top:10px; left:10px; z-index:1; background:var(--gold); color:var(--night); font:700 12px var(--body); padding:4px 10px; border-radius:999px; }
.prop-img { aspect-ratio:4/3; background:var(--bg); display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
.prop-img a { flex:none; width:100%; scroll-snap-align:start; } .prop-img img { width:100%; height:100%; object-fit:cover; display:block; }
.prop-img > span { margin:auto; color:var(--muted); } .prop-img > span svg { width:40px; height:40px; }
.prop-b { padding:14px; display:grid; gap:8px; flex:1; align-content:start; } .prop-b h4 { margin:0; font:800 17px var(--display); font-stretch:88%; color:var(--ink); }
.prop-b p { margin:0; color:var(--fog); font-size:14px; white-space:pre-line; }
.prop-kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:14px; } .prop-kv dt { color:var(--fog); } .prop-kv dd { margin:0; font-weight:700; color:var(--ink); }
.quote { border:1.5px solid var(--line); border-radius:16px; padding:18px; }
.quote-h { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; } .quote-h b { display:block; color:var(--ink); font-size:16px; } .quote-h small { color:var(--muted); }
.qlines { width:100%; border-collapse:collapse; font-size:15px; } .qlines td { padding:9px 0; border-bottom:1px dashed var(--line); } .qlines td:last-child { text-align:right; font-weight:600; white-space:nowrap; }
.qlines small { color:var(--muted); } .qlines tr.tot td { border-bottom:0; border-top:2px solid var(--ink); font:900 20px var(--display); font-stretch:85%; color:var(--ink); padding-top:12px; }
.qmeta { margin:10px 0 0; color:var(--fog); font-size:14.5px; } .qtrans { margin:12px 0 0; font-size:13px; color:var(--ok); background:var(--ok-bg); border-radius:10px; padding:8px 12px; }
#rthread .thread { padding:4px 0 14px; max-height:360px; } #rthread .composer { padding:12px 0 0; }
@media (max-width:860px) { .how3 { grid-template-columns:1fr 1fr; } .track.track5 div { font-size:10.5px; } }

/* ---------- Expédition sur carte ---------- */
.shipmap { width:100%; height:auto; max-height:240px; display:block; background:linear-gradient(180deg, #0B2545, #13365f); border-radius:14px; margin-bottom:12px; }
.shipmap .grid line { stroke:rgba(255,255,255,.06); stroke-width:.6; }
.shipmap .route { fill:none; stroke:rgba(255,255,255,.25); stroke-width:2; stroke-dasharray:4 4; }
.shipmap .route-done { fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; }
.shipmap .pt-a { fill:var(--red); } .shipmap .pt-b { fill:var(--gold); }
.shipmap .lbl { fill:#fff; font:600 9px var(--body); text-anchor:middle; }
.shipmap .veh { text-anchor:middle; dominant-baseline:middle; }
.shipbar { height:6px; background:var(--bg); border-radius:99px; overflow:hidden; margin-bottom:14px; } .shipbar span { display:block; height:100%; background:linear-gradient(90deg, var(--red), var(--gold)); border-radius:99px; }
.shipkv { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:12px; }
.shipkv small { display:block; font:600 11px var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--muted); } .shipkv b { color:var(--ink); } .shipkv em { display:block; font-style:normal; font-size:12.5px; color:var(--ok); }
.unitcost { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:14px; background:var(--gold-soft); border-radius:12px; padding:12px 14px; }
.unitcost small { font:600 11px var(--mono); letter-spacing:.8px; text-transform:uppercase; color:#8A6A10; } .unitcost b { font:900 26px var(--display); font-stretch:80%; color:var(--ink); } .unitcost span { color:var(--fog); font-size:14px; }
.mini-sel { border:1.5px solid #D5DCE5; border-radius:999px; padding:6px 10px; font-size:13.5px; background:#fff; color:var(--ink); }

/* ---------- Bibliothèque & filtres ---------- */
.fchips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.fchip { border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:7px 14px; font:600 14px var(--body); cursor:pointer; }
.fchip span { color:var(--muted); font-weight:500; margin-left:4px; } .fchip.on { background:var(--ink); color:#fff; border-color:var(--ink); } .fchip.on span { color:#B9C4D3; }
.docline { display:flex; gap:12px; align-items:center; min-width:0; }
.dtag { flex:none; font:600 11px var(--mono); letter-spacing:.5px; text-transform:uppercase; padding:5px 8px; border-radius:8px; background:#EEF1F6; color:#4A5A75; min-width:96px; text-align:center; }
.dt-invoice { background:var(--wait-bg); color:var(--wait); } .dt-transport { background:#E3EEFB; color:#1D5FB5; } .dt-customs { background:#EDE7FA; color:#5B3FB0; } .dt-certificate, .dt-test { background:var(--ok-bg); color:var(--ok); } .dt-label { background:var(--bad-bg); color:var(--bad); }

/* ---------- Nouveautés ---------- */
.nav-badge.gold { background:var(--gold); color:var(--night); }
.nichebox { display:grid; gap:4px; } .nichebox b { color:var(--ink); } .nichebox small { color:var(--fog); } .nichebox .fchips { margin:8px 0 4px; }
.showall { font-size:14px; color:var(--fog); display:flex; gap:8px; align-items:center; }
.novs { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.nov { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .2s; }
.nov:hover { transform:translateY(-2px); box-shadow:0 18px 36px -26px rgba(11,37,69,.6); } .nov.fresh { border-color:var(--gold); } .nov.off { opacity:.5; }
.nov-img { position:relative; aspect-ratio:4/3; background:var(--bg); display:grid; place-items:center; } .nov-img img { width:100%; height:100%; object-fit:cover; } .nov-img > span { color:var(--muted); } .nov-img > span svg { width:40px; height:40px; }
.nov-img em { position:absolute; top:10px; left:10px; background:var(--red); color:#fff; font:700 11.5px var(--body); font-style:normal; padding:4px 10px; border-radius:999px; }
.nov-b { padding:14px; display:grid; gap:8px; flex:1; align-content:start; } .nov-b small { color:var(--muted); font-size:12.5px; } .nov-b h4 { margin:0; font:800 17px var(--display); font-stretch:88%; color:var(--ink); } .nov-b p { margin:0; color:var(--fog); font-size:14px; }
@media (max-width:860px) { .shipkv { grid-template-columns:1fr 1fr; } .dtag { min-width:0; } }

/* ---------- Menu regroupé ---------- */
.side { overflow-y:auto; }
.side nav { gap:2px; }
.nav-h { font:600 10.5px var(--mono); letter-spacing:1.8px; text-transform:uppercase; color:#5E6E86; margin:16px 12px 6px; }
.nav-badge.warn { background:#E8A23A; color:var(--night); }
.who-link { display:flex; align-items:center; gap:10px; color:#B9C4D3; text-decoration:none; padding:9px 10px; border-radius:10px; font-weight:600; margin:0 -2px 12px; }
.who-link svg { width:18px; height:18px; } .who-link:hover { background:rgba(255,255,255,.05); color:#fff; } .who-link.on { background:rgba(201,162,39,.14); color:var(--gold); }
.btn-lg { padding:14px 26px; font-size:16px; box-shadow:0 12px 26px -14px rgba(201,162,39,.9); }

/* ---------- Icônes des conversations ---------- */
.ti { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; } .ti svg { width:17px; height:17px; }
.ti-gold { background:var(--gold-soft); color:#8A6A10; } .ti-blue { background:#E3EEFB; color:#1D5FB5; } .ti-violet { background:#EDE7FA; color:#5B3FB0; } .ti-red { background:var(--bad-bg); color:var(--bad); }
.trow { align-items:flex-start; } .trow > div { flex:1; min-width:0; }
.irow { display:grid; grid-template-columns:32px 1fr; column-gap:10px; align-items:start; } .irow .ti { grid-row:span 3; }
.irow b, .irow small, .irow p { grid-column:2; }
.todo-i svg { width:18px; height:18px; color:#8A6A10; }

/* ---------- Barre d'onglets mobile ---------- */
.tabbar, .scrim { display:none; }
@media (max-width:860px) {
  .mtop { justify-content:center; }
  .main { padding-bottom:96px; }
  .tabbar { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:45; background:#fff; border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 24px -16px rgba(11,37,69,.35); }
  .tabbar a, .tabbar button { position:relative; display:grid; justify-items:center; gap:3px; padding:6px 2px; border:0; background:none; color:var(--muted); text-decoration:none; font:600 11px var(--body); cursor:pointer; border-radius:12px; }
  .tabbar svg { width:22px; height:22px; } .tabbar .on { color:var(--ink); } .tabbar .on svg { color:var(--gold); }
  .tabbar i { position:absolute; top:2px; left:calc(50% + 6px); min-width:17px; height:17px; border-radius:99px; background:var(--red); color:#fff; font:700 10px var(--body); font-style:normal; display:grid; place-items:center; padding:0 4px; }
  .tabbar i.dot { min-width:9px; width:9px; height:9px; padding:0; top:5px; left:calc(50% + 8px); }
  .side { inset:0 22% 0 0; z-index:60; }
  .scrim { display:block; position:fixed; inset:0; background:rgba(6,21,40,.5); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s; } .scrim.on { opacity:1; pointer-events:auto; }
  #toast { bottom:86px; }
}

/* ---------- Recherche et filtres ---------- */
.ltools { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:14px; }
.ltools .fchips { margin:0; }
.lsearch { flex:1 1 240px; display:flex; align-items:center; gap:8px; border:1.5px solid #D5DCE5; border-radius:999px; padding:0 14px; background:#fff; }
.lsearch:focus-within { border-color:var(--ink); }
.lsearch svg { width:17px; height:17px; color:var(--muted); flex:none; }
.lsearch input { border:0; outline:none; padding:10px 0; width:100%; background:none; color:var(--ink); }

/* ---------- Bandeau « prochaine étape » ---------- */
.nextstep { display:flex; align-items:center; gap:14px; border-radius:16px; padding:14px 18px; margin-bottom:16px; border:1px solid var(--line); background:#fff; }
.nextstep > div { flex:1; min-width:0; } .nextstep small { display:block; font:600 11px var(--mono); letter-spacing:1.2px; text-transform:uppercase; }
.nextstep b { display:block; color:var(--ink); font-size:16px; } .nextstep p { margin:2px 0 0; color:var(--fog); font-size:14px; }
.ns-i { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; } .ns-i svg { width:21px; height:21px; }
.ns-act { border-color:#E7C46A; background:linear-gradient(90deg, #FFF8E4, #fff 70%); box-shadow:0 12px 28px -22px rgba(201,162,39,.9); }
.ns-act small { color:#B07A10; } .ns-act .ns-i { background:var(--gold); color:var(--night); }
.ns-info small { color:var(--muted); } .ns-info .ns-i { background:#E3EAF5; color:var(--ink); }

/* ---------- Guide de démarrage ---------- */
.onboard { border:1.5px solid rgba(201,162,39,.5); }
.ob-bar { height:6px; background:var(--bg); border-radius:99px; overflow:hidden; margin:-4px 0 14px; } .ob-bar span { display:block; height:100%; background:linear-gradient(90deg, var(--gold), #E8C25A); }
.ob-steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ob-step { display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff; color:inherit; text-decoration:none; font:inherit; cursor:pointer; transition:border-color .2s, transform .15s; }
.ob-step:hover { border-color:var(--gold); transform:translateY(-1px); } .ob-step.ok { cursor:default; background:var(--ok-bg); border-color:transparent; } .ob-step.ok:hover { transform:none; }
.ob-n { flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:800 13px var(--body); } .ob-step.ok .ob-n { background:var(--ok); }
.ob-t { flex:1; min-width:0; } .ob-t b { display:block; color:var(--ink); font-size:14.5px; } .ob-t small { color:var(--fog); font-size:13px; } .ob-step em { font-style:normal; color:var(--wait); font-weight:700; }
@media (max-width:860px) { .ob-steps { grid-template-columns:1fr; } .nextstep { flex-wrap:wrap; } .nextstep .btn { margin-left:56px; } }

/* ---------- Contrôle mobile : rien ne doit élargir la page ---------- */
.grid2 > *, .two > *, .card, .pane { min-width:0; }
.docs li > span { min-width:0; overflow-wrap:anywhere; }
.shipcard .btn { white-space:normal; text-align:center; overflow-wrap:anywhere; max-width:100%; }
.kv dd, .prop-b p, .nov-b p { overflow-wrap:anywhere; }.badge { white-space:normal; line-height:1.3; max-width:100%; }
.docs li { flex-wrap:wrap; }
.bi { display:inline-grid; } .bi svg { width:16px; height:16px; }

/* =================================================================== Passe de design */
/* Contraste : les gris clairs passent au-dessus du seuil de lisibilité (WCAG AA) */
:root { --muted:#667185; --fog:#4F5B70; }

/* Icônes en ligne dans les boutons et les textes */
.bi { display:inline-grid; place-items:center; vertical-align:-3px; margin-right:6px; } .bi svg { width:16px; height:16px; }
.btn .bi:last-child { margin:0 0 0 6px; } .btn .bi:only-child { margin:0; }
.btn-red svg, .photos .del svg { width:14px; height:14px; } .photos .del { display:grid; place-items:center; }
.cal-slot .bi svg { width:13px; height:13px; } .lg-night svg { width:12px; height:12px; color:#33405A; } .cal-legend i.lg-night { background:none; }

/* 4 couleurs de statut au sens constant :
   vert = terminé / validé · or = action requise · bleu = en cours · rouge = problème / retard · gris = clos */
.badge.b-brief, .badge.b-sample, .badge.b-production, .badge.b-inspection, .badge.b-shipped,
.badge.r-submitted, .badge.r-sourcing, .badge.c-in_progress, .badge.b-pending, .badge.i-unpaid { background:#E3EEFB; color:#1D5FB5; }
.badge.r-proposals, .badge.r-quote, .badge.q-sent { background:var(--gold-soft); color:#7A5A06; }
.badge.b-delivered, .badge.b-pass, .badge.r-accepted, .badge.q-accepted, .badge.i-paid, .badge.c-resolved { background:var(--ok-bg); color:#16704A; }
.badge.b-on_hold, .badge.b-fail, .badge.i-overdue, .badge.c-open { background:var(--bad-bg); color:#A90E26; }
.badge.r-declined, .badge.r-cancelled, .badge.q-declined, .badge.q-withdrawn, .badge.q-expired, .badge.i-cancelled, .badge.c-rejected { background:#EEF1F6; color:#4A5A75; }

/* Listes enrichies : miniature + mini-barre d'avancement */
.orow.rich { grid-template-columns:52px 1fr auto; align-items:center; gap:4px 14px; }
.thumb { width:52px; height:52px; border-radius:12px; background:var(--bg); display:grid; place-items:center; overflow:hidden; color:var(--muted); }
.thumb img { width:100%; height:100%; object-fit:cover; } .thumb svg { width:22px; height:22px; }
.ocore { min-width:0; } .ocore .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini { height:4px; border-radius:99px; background:#EEF1F6; margin-top:8px; overflow:hidden; max-width:260px; }
.mini span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold), #E2B93B); }
@media (max-width:860px) { .orow.rich { grid-template-columns:44px 1fr; } .thumb { width:44px; height:44px; } .obadge { grid-column:2; } }

/* Chiffres du tableau de bord */
.stat-link { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; text-decoration:none; color:inherit; transition:border-color .2s, transform .15s, box-shadow .2s; }
.stat-link:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 30px -24px rgba(11,37,69,.6); }
.stat-link .st-i { grid-row:span 2; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; } .st-i svg { width:22px; height:22px; }
.st-blue { background:#E3EEFB; color:#1D5FB5; } .st-gold { background:var(--gold-soft); color:#8A6A10; } .st-green { background:var(--ok-bg); color:var(--ok); } .st-red { background:var(--bad-bg); color:var(--bad); }
@media (max-width:860px) { .stat-link { grid-template-columns:1fr; text-align:left; } .stat-link .st-i { grid-row:auto; width:32px; height:32px; margin-bottom:6px; } .st-i svg { width:17px; height:17px; } }

/* Chargement en squelette */
.skel { display:grid; gap:14px; }
.sk { display:block; border-radius:12px; background:linear-gradient(90deg, #E9EDF2 0%, #F5F7FA 50%, #E9EDF2 100%); background-size:200% 100%; animation:skel 1.2s ease-in-out infinite; }
.sk-eyebrow { width:90px; height:12px; } .sk-title { width:min(340px, 70%); height:34px; } .sk-line { width:min(480px, 90%); height:14px; }
.sk-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .sk-card { height:86px; border-radius:16px; } .sk-block { height:180px; border-radius:18px; } .sk-block.short { height:110px; }
@keyframes skel { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce) { .sk { animation:none; } }

/* Écrans vides illustrés avec le pont Sourcetrium */
.empty::before { content:""; display:block; width:74px; height:74px; margin:0 auto 12px; border-radius:50%;
  background:#F1F4F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50'%3E%3Cpath d='M6 44 Q32 8 58 44' fill='none' stroke='%230B2545' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='3' y1='44' x2='61' y2='44' stroke='%230B2545' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M19 30.5V44M45 30.5V44M32 32V44' stroke='%230B2545' stroke-width='3'/%3E%3Ccircle cx='6' cy='44' r='6' fill='%23C8102E'/%3E%3Ccircle cx='58' cy='44' r='6' fill='%23C9A227'/%3E%3Ccircle cx='32' cy='26' r='6.5' fill='%230B2545'/%3E%3Ccircle cx='32' cy='26' r='2.6' fill='%23fff'/%3E%3C/svg%3E") center / 42px no-repeat; }
.empty { display:grid; justify-items:center; }

/* =================================================================== Espace administrateur */
/* Vue d'ensemble en colonnes */
.pipe-card { padding-bottom:16px; }
.pipe { display:grid; grid-template-columns:repeat(6, minmax(190px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
.pcol { background:var(--bg); border-radius:14px; padding:10px; min-height:140px; scroll-snap-align:start; }
.pcol header { display:flex; align-items:center; gap:8px; font:700 13.5px var(--body); color:var(--ink); margin-bottom:10px; }
.pcol header em { margin-left:auto; font-style:normal; background:#fff; border-radius:99px; padding:1px 8px; font-size:12px; color:var(--fog); }
.pc-i { width:26px; height:26px; border-radius:8px; background:#fff; display:grid; place-items:center; color:var(--ink); } .pc-i svg { width:15px; height:15px; }
.pcol-b { display:grid; gap:8px; }
.pcard { display:grid; gap:4px; background:#fff; border:1px solid var(--line); border-left:3px solid transparent; border-radius:12px; padding:10px 11px; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .2s; }
.pcard:hover { transform:translateY(-1px); box-shadow:0 10px 22px -18px rgba(11,37,69,.7); }
.pcard small { color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pcard b { color:var(--ink); font-size:14px; line-height:1.3; }
.pc-foot { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; } .pc-foot .badge { font-size:11px; padding:3px 8px; }
.pcard.pc-red { border-left-color:var(--bad); } .pcard.pc-orange { border-left-color:#E8A23A; } .pcard.pc-blue { border-left-color:#1D5FB5; }
.pc-empty { color:var(--muted); text-align:center; margin:18px 0; }

/* Alertes de retard */
.uchip { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:3px 9px; font:700 11.5px var(--body); white-space:nowrap; margin-top:6px; }
.uchip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.u-red { background:var(--bad-bg); color:#A90E26; } .u-orange { background:#FDF0DC; color:#9A5B06; } .u-blue { background:#E3EEFB; color:#1D5FB5; }
.pc-foot .uchip { margin-top:0; font-size:11px; padding:3px 8px; }

/* Actions rapides */
.qbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.qbar-strip { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:16px; }
.qbar-strip .uchip { margin:0 6px 0 0; }
@media (max-width:860px) { .pipe { grid-template-columns:repeat(6, 78%); } .qbar .btn { flex:1 1 auto; } }