:root{ --bg:#0b1c26; --panel:#102a38; --panel2:#12303f; --line:#234255; --ink:#e8f0f4; --dim:#8fa9b6; --amber:#F2A104; --red:#E4572E; --green:#2f9e6e; --blue:#2b8fd0; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 'Segoe UI',Arial,sans-serif; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:'Arial Narrow',Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; }
.top{ display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; position:sticky; top:0; z-index:5; }
.top .brand{ font-family:'Arial Narrow',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; font-weight:700; } .top .brand b{ color:var(--amber); }
.spacer{ flex:1; }
.btn{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer; }
.btn:hover{ border-color:var(--amber); } .btn.primary{ background:var(--amber); color:#2a1b00; border-color:var(--amber); font-weight:700; }
.btn.danger{ border-color:var(--red); color:#ffb4a0; } .btn:disabled{ opacity:.45; cursor:not-allowed; }
.chip{ display:inline-block; padding:1px 9px; border-radius:11px; font-size:12px; border:1px solid var(--line); background:var(--panel2); }
.chip.ok{ background:#17493a; border-color:var(--green); } .chip.warn{ background:#4a3a0e; border-color:var(--amber); } .chip.bad{ background:#4d2216; border-color:var(--red); } .chip.info{ background:#12384f; border-color:var(--blue); }
main{ padding:16px; max-width:1300px; margin:0 auto; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; } .card small{ color:var(--dim); text-transform:uppercase; letter-spacing:.06em; font-size:11px; display:block; }
.card b{ font-size:26px; font-family:'Arial Narrow',Arial,sans-serif; } .card.red b{ color:var(--red); } .card.amber b{ color:var(--amber); }
table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th,td{ padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); } th{ color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.06em; background:var(--panel2); }
tr.row{ cursor:pointer; } tr.row:hover td{ background:#15384a; } tr.late td{ background:#3a1a12; } tr.urgent td{ background:#3a2c0c; }
.timer{ font-variant-numeric:tabular-nums; font-weight:700; } .timer.late{ color:var(--red); } .timer.urgent{ color:var(--amber); }
.empty{ text-align:center; padding:30px; color:var(--dim); }
.login{ max-width:360px; margin:12vh auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; }
.login label, .field label{ display:block; color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin:10px 0 3px; }
input[type=text],input[type=password],select,textarea{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.err{ color:#ffb4a0; margin-top:8px; min-height:1.2em; }
.tabs{ display:flex; gap:6px; margin-bottom:14px; } .tabs .btn.on{ border-color:var(--amber); color:var(--amber); }
.detail{ position:fixed; inset:0; background:rgba(4,12,17,.78); z-index:20; display:flex; justify-content:flex-end; }
.detail .panel{ width:min(980px,100%); background:var(--bg); height:100%; overflow:auto; border-left:1px solid var(--line); padding:16px; }
.head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; margin-bottom:12px; }
.grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:zoom-in; background:#000; }
.folder{ margin:12px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.box{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; }
.msg{ border-left:3px solid var(--line); padding:4px 10px; margin:6px 0; } .msg.cc{ border-color:var(--amber); } .msg small{ color:var(--dim); }
.decisions label{ display:flex; gap:8px; align-items:flex-start; padding:7px 10px; border:1px solid var(--line); border-radius:8px; margin:6px 0; cursor:pointer; }
.decisions label:has(input:checked){ border-color:var(--amber); background:#2b2410; }
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:40; display:flex; align-items:center; justify-content:center; } .lightbox img{ max-width:96vw; max-height:94vh; }
.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#0E2836; border:1px solid var(--amber); border-radius:10px; padding:10px 16px; z-index:50; }
.live{ width:9px; height:9px; border-radius:50%; background:var(--red); display:inline-block; } .live.on{ background:var(--green); }
.testbanner{ background:#4a3a0e; border-bottom:1px solid var(--amber); padding:6px 16px; text-align:center; font-size:13px; }
@media (max-width:700px){ th:nth-child(n+5), td:nth-child(n+5){ display:none; } }

/* phase 3 : contrôles de clôture et téléchargements */
.checks{ list-style:none; padding:0; margin:6px 0 10px; } .checks li{ padding:7px 10px; margin:4px 0; border-radius:8px; border:1px solid var(--line); background:var(--panel2); } .checks li.bad{ border-color:var(--red); background:#3a1a12; } .checks li.warn{ border-color:var(--amber); background:#3a2f0c; }
a.btn{ color:var(--ink); text-decoration:none; display:inline-block; margin:2px 0; } button.btn[disabled]{ opacity:.45; cursor:not-allowed; }