:root{
  --bg:#EDF3F9; --surface:#FFFFFF; --surface-2:#F5F8FC; --ink:#0A1F45; --ink-2:#4A5672; --line:#D7E0EB;
  --brand:#015E9D; --brand-deep:#013672; --on-brand:#FFFFFF; --pale:#E1EEF9; --hover:#F1F6FC; --sel:#E1EEF9;
  --danger:#B42318; --warn:#8A5300; --focus:#0193C4; --shade:rgba(1,54,114,.10);
  --st-a:#E4EAF2; --st-a-ink:#36425C; --st-v:#CFE7F8; --st-v-ink:#014C7A; --st-i:#013672; --st-i-ink:#FFFFFF; --st-r:#E5D502; --st-r-ink:#2B2900;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07111E; --surface:#0E1B2E; --surface-2:#12223A; --ink:#E6EEF8; --ink-2:#A3B5CC; --line:#25384F;
    --brand:#6CC2EE; --brand-deep:#6CC2EE; --on-brand:#04203D; --pale:#15304E; --hover:#12253D; --sel:#173556;
    --danger:#FF9A8F; --warn:#F2C14E; --focus:#6CC2EE; --shade:rgba(0,0,0,.35);
    --st-a:#22344C; --st-a-ink:#CCD8E8; --st-v:#123E62; --st-v-ink:#B3E0F9; --st-i:#6CC2EE; --st-i-ink:#04203D; --st-r:#E5D502; --st-r-ink:#2B2900;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07111E; --surface:#0E1B2E; --surface-2:#12223A; --ink:#E6EEF8; --ink-2:#A3B5CC; --line:#25384F;
  --brand:#6CC2EE; --brand-deep:#6CC2EE; --on-brand:#04203D; --pale:#15304E; --hover:#12253D; --sel:#173556;
  --danger:#FF9A8F; --warn:#F2C14E; --focus:#6CC2EE; --shade:rgba(0,0,0,.35);
  --st-a:#22344C; --st-a-ink:#CCD8E8; --st-v:#123E62; --st-v-ink:#B3E0F9; --st-i:#6CC2EE; --st-i-ink:#04203D; --st-r:#E5D502; --st-r-ink:#2B2900;
  color-scheme: dark;
}
html{scroll-padding-top:env(safe-area-inset-top, 0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1380px;margin:0 auto;padding:28px clamp(14px,3vw,36px) 56px}
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-logo{width:37px;height:62px;flex-shrink:0}
.brand h1{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.brand p{margin:2px 0 0;color:var(--ink-2);font-size:14.5px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--brand-deep);border-color:transparent;color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{color:var(--danger)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex-shrink:0}

.banner{margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--pale);color:var(--ink);font-size:14.5px}
.banner.err{background:#FDECEA;color:#7A1A12}

.pipeline{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr);gap:0;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:16px 20px;border:0;border-right:1px solid var(--line);background:transparent;cursor:pointer;min-height:76px}
.step:last-child{border-right:0}
.step:hover{background:var(--hover)}
.step.on{background:var(--sel)}
.step.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-deep)}
.step-n{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px}
.step[data-filter="a_faire"] .step-n{background:var(--st-a);color:var(--st-a-ink)}
.step[data-filter="valide"] .step-n{background:var(--st-v);color:var(--st-v-ink)}
.step[data-filter="imprime"] .step-n{background:var(--st-i);color:var(--st-i-ink)}
.step[data-filter="remis"] .step-n{background:var(--st-r);color:var(--st-r-ink)}
.step-l{font-size:14px;color:var(--ink-2);font-weight:600}
.step-c{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.step.all{grid-template-columns:1fr}
.step.all .step-l,.step.all .step-c{grid-column:1}

.layout{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:24px;align-items:start}
.listbox{background:var(--surface);border-radius:18px;box-shadow:0 1px 0 var(--line);min-width:0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:16px}
.field{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface);font-size:15px}
.toolbar .search{flex:1 1 240px}
.toolbar select.field{flex:0 1 260px}
.bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 16px 14px;padding:10px 12px 10px 18px;border-radius:14px;background:var(--brand-deep);color:var(--on-brand)}
.bulk[hidden]{display:none}
.bulk strong{margin-right:auto;font-weight:700}
.bulk .field{background:var(--surface);color:var(--ink);border-color:transparent}
.bulk .btn{background:transparent;color:var(--on-brand);border-color:rgba(255,255,255,.35)}
.bulk .btn:hover{background:rgba(255,255,255,.12)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-weight:650;color:var(--ink-2);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.row{cursor:pointer}
tr.row:hover td{background:var(--hover)}
tr.row.on td{background:var(--sel)}
td.ck,th.ck{width:44px;padding-left:18px}
.ck input{width:20px;height:20px;accent-color:var(--brand-deep);cursor:pointer}
.thumb{width:38px;height:49px;border-radius:7px;object-fit:cover;display:block;background:var(--pale)}
.who b{display:block;font-weight:700;white-space:nowrap}
.who span{color:var(--ink-2);font-size:13px}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
select.st{min-height:36px;border-radius:999px;border:0;padding:0 30px 0 14px;font-weight:700;font-size:13.5px;cursor:pointer;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667' stroke-width='1.6'/%3E%3C/svg%3E")}
select.st[data-st="a_faire"]{background-color:var(--st-a);color:var(--st-a-ink)}
select.st[data-st="valide"]{background-color:var(--st-v);color:var(--st-v-ink)}
select.st[data-st="imprime"]{background-color:var(--st-i);color:var(--st-i-ink)}
select.st[data-st="remis"]{background-color:var(--st-r);color:var(--st-r-ink)}
td.todo{font-size:13px;color:var(--warn);min-width:160px}
td.todo .ok{color:var(--ink-2)}
.empty{padding:48px 24px;text-align:center;color:var(--ink-2)}
.empty h2{margin:0 0 6px;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-.01em}
.empty .actions{justify-content:center;margin-top:18px}

.side{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 16px);display:flex;flex-direction:column;gap:16px;min-width:0}
.stage{background:var(--brand-deep);border-radius:22px;padding:22px 22px 18px;color:#fff}
:root[data-theme="dark"] .stage{background:#0A2747}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stage{background:#0A2747}}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.stage-top p{margin:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:inline-flex;background:rgba(255,255,255,.12);border-radius:12px;padding:3px}
.seg button{min-height:38px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#fff;font-weight:650;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:#013672}
#pv-card{width:100%}
.c-wrap{position:relative;width:100%;aspect-ratio:970/612;border-radius:calc(36px * var(--s,.44));overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.c-wrap>.c-card{position:absolute;left:0;top:0;transform:scale(var(--s,.44));transform-origin:0 0}
.stage-note{margin:14px 2px 0;font-size:13px;color:rgba(255,255,255,.78)}

.formbox{background:var(--surface);border-radius:18px;padding:20px;box-shadow:0 1px 0 var(--line)}
.formbox h2{margin:0 0 14px;font-size:19px;font-weight:800;letter-spacing:-.015em}
.formbox .hint{margin:0;color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fgrid .wide{grid-column:span 2}
.fgrid label,.dlg label.lbl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.fgrid input,.fgrid select,.dlg input.field{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:500;width:100%}
.photo-field{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.photo-field .thumb{width:58px;height:75px;border-radius:9px}
.photo-field p{margin:0;font-size:13px;color:var(--ink-2);flex:1 1 160px}
.ferr{margin:12px 0 0;color:var(--danger);font-weight:600;font-size:14px}
.ferr:empty{display:none}
.factions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.overlay{position:fixed;inset:0;z-index:40;background:rgba(3,14,30,.58);display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:calc(env(safe-area-inset-top, 0px) + 24px) 14px calc(env(safe-area-inset-bottom, 0px) + 24px)}
.overlay[hidden]{display:none}
.dlg{width:100%;max-width:1040px;background:var(--surface);border-radius:22px;padding:26px clamp(18px,3vw,32px) 28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.dlg.narrow{max-width:760px}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.dlg-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.dlg-head p{margin:4px 0 0;color:var(--ink-2)}
.dlg section{padding:18px 0;border-top:1px solid var(--line)}
.dlg section h3{margin:0 0 6px;font-size:17px;font-weight:750}
.dlg section p{margin:0 0 12px;color:var(--ink-2);font-size:14.5px;max-width:70ch}
.cols{font-size:14px;color:var(--ink);background:var(--surface-2);border-radius:12px;padding:12px 14px;margin:0 0 12px;line-height:1.7}
.cols code{font-family:inherit;font-weight:700}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.log{margin-top:12px;font-size:14px;white-space:pre-line;color:var(--ink)}
.log:empty{display:none}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:750;font-size:15px;margin-bottom:8px;padding:0}
.choice{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14.5px;cursor:pointer}
.choice input{width:19px;height:19px;accent-color:var(--brand-deep);flex-shrink:0}
.sum{margin:18px 0 0;font-weight:700;font-size:16px}
.sheets{margin-top:18px;display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px}
.pv-page{flex-shrink:0;width:calc(210mm * .36);height:calc(297mm * .36);overflow:hidden;background:#fff;border-radius:4px;box-shadow:0 3px 14px var(--shade);position:relative}
.pv-page>.sheet{transform:scale(.36);transform-origin:0 0}
.pv-cap{margin-top:6px;font-size:12.5px;color:var(--ink-2);text-align:center}
.more{align-self:center;color:var(--ink-2);font-size:14px;flex-shrink:0;padding:0 10px}
.tips{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);max-width:80ch}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);transform:translateX(-50%);z-index:60;background:#0A1F45;color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}
#print-root{display:none}

@media (max-width:1180px){
  .layout{grid-template-columns:1fr}
  .side{position:static;order:-1}
  .stage{max-width:560px}
}
@media (max-width:760px){
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{border-bottom:1px solid var(--line)}
  .step.all{grid-column:span 2}
  .opts{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fgrid .wide{grid-column:auto}
  td.todo{display:none}
}
@media print{
  @page{size:A4 portrait;margin:0}
  :root{padding:0 !important}
  html,body{background:#fff !important}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wrap,.overlay,.toast{display:none !important}
  #print-root{display:block !important}
}

/* ---------- Compte ---------- */
.account{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px;font-size:14px;color:var(--ink-2)}
.account strong{color:var(--ink);font-weight:700;margin-right:6px}
.account form{margin:0;display:inline}
.linkish{min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--brand);font-weight:650;font-size:14px;cursor:pointer}
.linkish:hover{background:var(--hover)}
.top-right{display:flex;flex-direction:column;align-items:flex-end}
@media (max-width:760px){.top-right{align-items:flex-start}.account{justify-content:flex-start}}
.utable{width:100%;border-collapse:collapse;font-size:14.5px}
.utable td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.utable tr:last-child td{border-bottom:0}
.utable .u-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.utable .u-reset{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.utable .u-reset input{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);flex:1 1 200px}
.role{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--st-a);color:var(--st-a-ink)}
.role.admin{background:var(--st-v);color:var(--st-v-ink)}
.muted{color:var(--ink-2);font-size:13px}
.dlg form.fgrid{margin-top:4px}
.dlg .factions{margin-top:14px}

/* ---------- Connexion ---------- */
.login-body{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:400px;background:var(--surface);border-radius:22px;padding:36px 32px 32px;box-shadow:0 20px 60px var(--shade)}
.login .brand-logo{width:44px;height:74px;margin-bottom:18px}
.login h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.025em}
.login-sub{margin:4px 0 24px;color:var(--ink-2)}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.login-form input{min-height:46px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);font-size:15px}
.login-form .btn{margin-top:6px}
.install-list{padding-left:18px;margin:14px 0 22px;line-height:1.7}
.brand-logo{background:url("logo-escc.png") center/contain no-repeat}