/* Portail VSP Group — barre latérale anthracite + espace de travail ivoire. */
:root{
  color-scheme: light;
  --night:#1B1D23;      /* fond sombre VSP */
  --night-2:#24272F;
  --night-3:#30343D;
  --ivory:#ECE7DD;      /* beige VSP */
  --paper:#F7F4EE;      /* surface de travail */
  --card:#FFFDF9;
  --line:#DDD6C8;
  --line-soft:#E9E3D7;
  --gold:#A98B5D;       /* doré VSP */
  --gold-ink:#8A6E45;
  --gold-soft:#EFE6D6;
  --text:#22242B;
  --muted:#6E695F;
  --faint:#9A9488;
  --on-night:#F3EFE7;
  --on-night-muted:#A9A69F;
  --alert:#8A2F2F;      /* rouge : alertes uniquement */
  --alert-soft:#F4E4E1;
  --ok:#4C6552;
  --ok-soft:#E4EBE3;
  --info:#4F5D6E;
  --info-soft:#E3E7EC;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--text);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.serif{font-family:var(--serif)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Connexion ---------- */
#login{min-height:100%;background:var(--night);color:var(--on-night);display:grid;grid-template-columns:1.1fr 1fr}
.login-brand{padding:56px clamp(24px,6vw,88px);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(243,239,231,.08)}
.logo{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.32em;font-size:13px;text-transform:uppercase}
.logo .plus{color:var(--gold);font-size:20px;font-weight:500;letter-spacing:0}
.login-brand h1{font-size:clamp(34px,4.4vw,56px);line-height:1.06;font-weight:300;max-width:12ch}
.login-brand h1 em{font-style:italic;color:var(--gold)}
.login-brand p{color:var(--on-night-muted);max-width:42ch}
.login-foot{font-size:12.5px;color:var(--on-night-muted);letter-spacing:.04em}
.login-panel{display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}
.login-card h2{font-size:28px;font-weight:300}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;letter-spacing:.06em;color:var(--on-night-muted)}
.login-card input,.login-card select{background:var(--night-2);border:1px solid var(--night-3);border-radius:8px;padding:12px 14px;color:var(--on-night)}
.login-card input:focus,.login-card select:focus{border-color:var(--gold);outline:none}
.btn-gold{background:var(--gold);color:#1B1D23;border:0;border-radius:8px;padding:13px 18px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.btn-gold:hover{background:#B89A6A}
.secure-note{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--on-night-muted);border-top:1px solid var(--night-3);padding-top:16px}
.secure-note svg{flex:none;margin-top:2px}
.demo-flag{font-size:12px;border:1px solid rgba(169,139,93,.45);color:#D9C29A;border-radius:6px;padding:8px 10px;line-height:1.45}
.login-error{font-size:13px;color:#E3A49A;min-height:1em}
@media (max-width:860px){#login{grid-template-columns:1fr}.login-brand{border-right:0;border-bottom:1px solid rgba(243,239,231,.08);padding:32px 20px;gap:28px}.login-brand h1{font-size:34px}}

/* ---------- Application ---------- */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100%;background:linear-gradient(90deg,var(--night) 248px,var(--paper) 248px)}
.side{background:var(--night);color:var(--on-night);padding:28px 18px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.side .logo{padding:0 10px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:var(--on-night-muted);padding:10px 12px;border-radius:8px;font-size:14px}
.nav a:hover{color:var(--on-night);background:var(--night-2)}
.nav a.active{color:var(--on-night);background:var(--night-2);box-shadow:inset 2px 0 0 var(--gold)}
.nav .count{font-size:12px;color:var(--on-night-muted);font-variant-numeric:tabular-nums}
.nav .count.alert{color:#E3A49A}
.nav-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6F6C66;padding:14px 12px 6px}
.side-user{margin-top:auto;border-top:1px solid var(--night-3);padding:16px 10px 0;display:flex;flex-direction:column;gap:10px;font-size:13px}
.side-user .who{color:var(--on-night)}
.side-user .role{color:var(--gold);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.btn-ghost-night{background:transparent;border:1px solid var(--night-3);color:var(--on-night-muted);border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left}
.btn-ghost-night:hover{color:var(--on-night);border-color:var(--gold)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.crumbs{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.demo-pill .long{display:none}.demo-pill{text-transform:none;letter-spacing:.02em}}
.crumbs b{color:var(--text);font-weight:500}
.demo-pill{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--gold);border-radius:999px;padding:4px 10px;white-space:nowrap}
.menu-btn{display:none;background:var(--night);color:var(--on-night);border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
.content{padding:28px clamp(16px,3vw,40px) 64px;display:flex;flex-direction:column;gap:28px;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:clamp(28px,3vw,38px);font-weight:300;line-height:1.1}
.page-head p{margin:6px 0 0;color:var(--muted);max-width:60ch}

@media (max-width:960px){
  #app{grid-template-columns:1fr;background:var(--paper)}
  .side{position:fixed;inset:0 auto 0 0;width:264px;z-index:20;transform:translateX(-100%);transition:transform .2s ease;padding-top:calc(28px + env(safe-area-inset-top,0px))}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .menu-btn{display:inline-block}
}

/* Cartes de synthèse */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1280px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-width:0}
.kpi:hover{border-color:var(--gold)}
.kpi .k-label{font-size:12.5px;color:var(--muted)}
.kpi .k-val{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:12px;color:var(--faint)}
.kpi.is-alert{border-color:#D9B9B3;background:linear-gradient(var(--card),var(--card)) padding-box}
.kpi.is-alert .k-val{color:var(--alert)}
.kpi.is-alert .k-label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--alert);margin-right:7px;vertical-align:1px}

.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line-soft)}
.panel-head h2{font-size:20px}
.panel-head .link{font-size:13px;color:var(--gold-ink);text-decoration:none;cursor:pointer;background:none;border:0}
.panel-body{padding:8px 20px 18px}
.panel-body.flush{padding:0}

/* Tableaux */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--text)}
th .arrow{color:var(--gold);margin-left:4px}
td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:#FBF8F2}
.client-cell .name{font-weight:500}
.client-cell .ref{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;white-space:nowrap;border:1px solid transparent}
.b-nouveau{background:var(--info-soft);color:var(--info)}
.b-analyse{background:var(--gold-soft);color:var(--gold-ink)}
.b-manquants{background:#F3EBDD;color:#7A5A2A;border-color:#E2D2B5}
.b-verifier{background:transparent;color:var(--gold-ink);border-color:var(--gold)}
.b-complet{background:var(--ok-soft);color:var(--ok)}
.b-suspendue{background:#ECEAE6;color:#6B6862}
.b-erreur{background:var(--alert-soft);color:var(--alert)}
.urg{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.urg i{width:8px;height:8px;border-radius:50%;display:inline-block}
.u-critique i{background:var(--alert)} .u-critique{color:var(--alert);font-weight:600}
.u-haute i{background:var(--gold-ink)}
.u-moyenne i{background:#B9B3A6}
.u-basse i{background:transparent;border:1px solid #B9B3A6}
.chip{display:inline-block;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin:2px 4px 2px 0;white-space:nowrap}
.chip.missing{border-color:#E2D2B5;background:#FBF5EA}

/* Listes */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .title{font-weight:500}
.row .meta{font-size:12.5px;color:var(--muted)}
.row button.link-row{all:unset;cursor:pointer;display:block}
.row button.link-row:focus-visible{outline:2px solid var(--gold)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px;background:var(--gold)}
.dot.alert{background:var(--alert)}
.dot.muted{background:#C9C3B6}
.today-list .row .when{font-size:12px;color:var(--gold-ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Filtres */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{flex:1 1 260px;min-width:0;position:relative}
.search input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px 10px 36px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.toolbar select{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-width:100%}
.toolbar input:focus,.toolbar select:focus{border-color:var(--gold);outline:none}
.btn{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:500;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--night);color:var(--on-night);border-color:var(--night)}
.btn.primary:hover{background:var(--night-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1B1D23}
.btn.danger{color:var(--alert);border-color:#D9B9B3}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{padding:6px 10px;font-size:13px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted);flex-wrap:wrap}
.pager .btns{display:flex;gap:6px}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}

/* Fiche dossier */
.dossier-head{background:var(--night);color:var(--on-night);border-radius:var(--r);padding:24px clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.dossier-head .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.dossier-head h1{font-size:clamp(28px,3vw,38px);font-weight:300}
.dossier-head .ref{color:var(--on-night-muted);font-size:13px;font-variant-numeric:tabular-nums}
.dossier-head .facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;border-top:1px solid var(--night-3);padding-top:16px}
@media (max-width:900px){.dossier-head .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-muted)}
.fact .v{margin-top:4px}
.dossier-head .badge.b-verifier{color:#D9C29A;border-color:var(--gold)}
.dossier-head .u-critique{color:#E3A49A}
.dossier-head .u-moyenne i,.dossier-head .u-basse i{border-color:#77736C}
.score{font-family:var(--serif);font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}
.score small{font-family:var(--sans);font-size:12px;color:var(--on-night-muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions .btn{background:transparent;color:var(--on-night);border-color:var(--night-3)}
.actions .btn:hover{border-color:var(--gold)}
.actions .btn.gold{background:var(--gold);color:#1B1D23;border-color:var(--gold)}
.actions .btn[disabled]{opacity:.5}
.kv{display:grid;grid-template-columns:minmax(90px,120px) minmax(0,1fr);gap:8px 16px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:break-word}
.doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.doc-row:last-child{border-bottom:0}
.doc-row .n{font-weight:500}
.next-action{border-left:2px solid var(--gold);padding:4px 0 4px 14px}
.next-action .t{font-family:var(--serif);font-size:19px}
.note{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.note:last-child{border-bottom:0}
.note .by{font-size:12px;color:var(--muted)}
textarea{width:100%;min-height:84px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;resize:vertical}
textarea:focus{border-color:var(--gold);outline:none}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}

/* Chronologie */
.timeline{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.ev::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:1px;background:var(--line)}
.ev:last-child::before{display:none}
.ev .mk{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);margin-top:1px}
.ev .mk svg{width:11px;height:11px}
.ev .box{min-width:0}
.ev .hd{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.ev .kind{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ev .when{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ev .subj{font-weight:500;margin-top:2px}
.ev .body{font-size:13.5px;color:var(--muted);margin-top:4px;white-space:pre-line;overflow-wrap:anywhere}
.ev.in .mk{color:var(--info)} .ev.in .kind{color:var(--info)}
.ev.out .mk{color:var(--ok);border-color:#C8D5C7} .ev.out .kind{color:var(--ok)}
.ev.relance .mk{color:var(--gold-ink);border-color:var(--gold)} .ev.relance .kind{color:var(--gold-ink)}
.ev.notif .mk{color:var(--muted)} .ev.notif .kind{color:var(--muted)}
.ev.err .mk{color:var(--alert);border-color:#D9B9B3;background:var(--alert-soft)} .ev.err .kind{color:var(--alert)}
.ev.draft .mk{border-style:dashed;color:var(--faint)}
.ev.draft .kind{color:var(--faint)}
.ev.draft .box{border:1px dashed #CFC7B8;border-radius:8px;padding:10px 12px;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(169,139,93,.05) 10px 20px)}
.draft-tag{font-size:11.5px;font-weight:600;color:var(--gold-ink);border:1px dashed var(--gold);border-radius:999px;padding:1px 8px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* Admin */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.grid-3{grid-template-columns:minmax(0,1fr)}}
.integ{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.integ .nm{font-family:var(--serif);font-size:19px}
.integ .st{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.integ .st i{width:8px;height:8px;border-radius:50%;background:#C9C3B6}
.integ code{font-size:12px;background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.check:last-child{border-bottom:0}
.check .box{width:18px;height:18px;border:1px solid var(--line);border-radius:4px;flex:none;margin-top:2px;display:grid;place-items:center}
.check.done .box{background:var(--ok);border-color:var(--ok);color:#fff}
.check .st{margin-left:auto;font-size:12px;white-space:nowrap;color:var(--muted)}
.check.done .st{color:var(--ok)}

/* Modale et toast */
.toast{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--night);color:var(--on-night);border-left:2px solid var(--gold);border-radius:8px;padding:12px 16px;max-width:min(420px,calc(100vw - 32px));font-size:14px;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.modal-back{position:fixed;inset:0;background:rgba(20,21,26,.55);display:grid;place-items:center;padding:16px;z-index:40}
.modal{background:var(--card);border-radius:12px;max-width:460px;width:100%;padding:24px;display:flex;flex-direction:column;gap:14px}
.modal h3{font-size:22px}
.modal .btns{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---------- Ajouts version serveur ---------- */
.flash{border-radius:8px;padding:12px 16px;font-size:14px;border:1px solid var(--line);background:var(--card)}
.flash.ok{border-color:#C8D5C7;background:var(--ok-soft);color:var(--ok)}
.flash.err{border-color:#D9B9B3;background:var(--alert-soft);color:var(--alert)}
.flash ul{margin:0;padding-left:18px}
.field-error{font-size:12.5px;color:var(--alert)}
.login-card .field-error{color:#E3A49A}
.login-status{font-size:13px;color:#C9D8C6;border:1px solid #4C6552;border-radius:6px;padding:8px 10px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field label{font-size:12.5px;color:var(--muted)}
.form-field input,.form-field select{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.form-field input:focus,.form-field select:focus{border-color:var(--gold);outline:none}
.form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.inline-form{display:inline}
.nav-form{margin:0}
.btn-link{background:none;border:0;color:var(--gold-ink);cursor:pointer;padding:0;font:inherit;font-size:13px;text-decoration:none}
.btn-link:hover{text-decoration:underline}
a.btn{text-decoration:none;display:inline-block;color:inherit}
a.btn.primary{color:var(--on-night)}
.secret-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;letter-spacing:.08em;background:var(--paper);border:1px dashed var(--gold);border-radius:8px;padding:14px 16px;overflow-wrap:anywhere}
.uri-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pager a,.pager span.cur{padding:6px 10px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:inherit;background:var(--card)}
.pager span.disabled{padding:6px 10px;border:1px solid var(--line-soft);border-radius:6px;color:var(--faint)}
.sort-link{color:inherit;text-decoration:none}
.sort-link:hover{color:var(--text)}
.err-page{min-height:100%;display:grid;place-items:center;background:var(--night);color:var(--on-night);padding:24px 16px}
.err-page .box{max-width:520px;display:flex;flex-direction:column;gap:14px}
.err-page h1{font-size:40px;font-weight:300}
.err-page p{color:var(--on-night-muted);margin:0}
.err-page a{color:var(--gold)}
.mb0{margin-bottom:0}.mt0{margin-top:0}
.row-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.user-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.user-form select{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:13px}

/* =====================================================================
   Cockpit (v2) : cartes d'action, indicateurs, graphiques, vues métier
   ===================================================================== */
.plain-link{color:inherit;text-decoration:none}
.plain-link:hover{color:var(--gold-ink)}
.block{display:block}
.nowrap{white-space:nowrap}
.txt-alert{color:var(--alert)}
.txt-gold{color:var(--gold-ink)}
.ok-txt{color:var(--ok)}
.hello-name{font-style:italic;color:var(--gold-ink)}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Cartes d'action */
.action-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1200px){.action-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.action-cards{grid-template-columns:minmax(0,1fr)}}
.acard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.acard:first-child{background:var(--night);color:var(--on-night);border-color:var(--night)}
.acard:first-child .acard-label,.acard:first-child .acard-sub{color:var(--on-night-muted)}
.acard:first-child .acard-num{color:var(--on-night)}
.acard:first-child .acard-list li{border-color:var(--night-3)}
.acard:first-child .acard-list li.is-zero{color:#6F6C66}
.acard:first-child .link{color:var(--gold)}
.acard-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.acard-label{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.acard .link{font-size:12.5px;color:var(--gold-ink);text-decoration:none}
.acard-num{font-family:var(--serif);font-weight:300;font-size:46px;line-height:1;margin-top:6px}
.acard-sub{font-size:12.5px;color:var(--faint);min-height:2.6em}
.acard-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.acard-list li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13.5px;min-width:0}
.acard-list li a{color:inherit;text-decoration:none;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-list li a:hover{color:var(--gold-ink)}
.acard-list li .small{white-space:nowrap}
.acard-list li.stack-li{flex-direction:column;align-items:flex-start;gap:2px}
.acard-list li.is-zero{color:var(--faint)}
.acard-list .ok-line{color:var(--ok);font-size:13px}
.acard.is-alert{border-color:#D9B9B3}
.acard.is-alert .acard-num{color:var(--alert)}
.acard.is-alert .acard-label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--alert);margin-right:7px;vertical-align:1px}
.dot-s{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.dot-s.alert{background:#E3A49A}

/* Bande d'indicateurs */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
@media (max-width:1100px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metric{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;min-width:0}
a.metric:hover{background:#FBF8F2}
.m-label{font-size:12px;color:var(--muted)}
.m-val{font-family:var(--serif);font-size:28px;font-weight:300;line-height:1.1}
.m-sub{font-size:11.5px;color:var(--faint)}
.metric.is-alert .m-val{color:var(--alert)}
.grid-2.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid-2.even{grid-template-columns:minmax(0,1fr)}}

/* Barres horizontales (une série, une couleur) */
.hbars{display:flex;flex-direction:column;gap:2px}
.hbar-row{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 6px;border-radius:6px;text-decoration:none;color:inherit}
a.hbar-row:hover{background:#FBF8F2}
.hbar-label{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{height:10px;background:transparent;position:relative}
.hbar-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-soft)}
.hbar-fill{position:relative;display:block;height:10px;border-radius:0 4px 4px 0;background:var(--gold)}
.hbar-fill.t-alert{background:var(--alert)}
.hbar-fill.t-muted{background:#B9B3A6}
.hbar-val{font-size:14px;font-weight:600;min-width:2ch;text-align:right;white-space:nowrap}
.hbar-val small{font-weight:400;color:var(--muted);font-size:12px;margin-left:8px}
.hbar-row.is-zero .hbar-label,.hbar-row.is-zero .hbar-val{color:var(--faint);font-weight:400}

/* Courbe */
.trend{margin:0}
.trend svg{width:100%;height:auto;display:block;overflow:visible}
.trend .grid{stroke:var(--line-soft);stroke-width:1}
.trend .grid.base{stroke:var(--line)}
.trend .ytick{font:11px var(--sans);fill:var(--faint);text-anchor:end}
.trend .xtick{font:11px var(--sans);fill:var(--faint);text-anchor:middle}
.trend .area{fill:rgba(169,139,93,.14)}
.trend .line{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend .hit{fill:transparent}
.trend .dot{fill:var(--card);stroke:var(--gold-ink);stroke-width:2;opacity:0}
.trend .pt:hover .dot{opacity:1}
.trend .pt:hover .hit{fill:rgba(169,139,93,.06)}
.trend .end{fill:var(--gold-ink);stroke:var(--card);stroke-width:2}
.chart-table{margin-top:10px;font-size:12.5px;color:var(--muted)}
.chart-table summary{cursor:pointer;color:var(--gold-ink)}
.chart-table table{margin-top:8px;max-width:320px}
.chart-table td,.chart-table th{padding:4px 8px}

/* Score de priorité */
.score-v{display:inline-flex;align-items:center;gap:8px;min-width:96px}
.score-track{width:64px;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;display:inline-block}
.score-fill{display:block;height:100%;background:var(--gold);border-radius:0 3px 3px 0}
.score-fill.is-high{background:var(--gold-ink)}
.score-v b{font-weight:600;font-size:13px}

/* Onglets */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text);border-bottom-color:var(--gold);font-weight:500}
.tabs .num{color:var(--faint);margin-left:4px}

/* Vue Aujourd'hui */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-decoration:none;color:inherit;min-width:0}
.step:hover{border-color:var(--gold)}
.step-n{font-family:var(--serif);font-size:28px;font-weight:300;line-height:1;min-width:1.4ch}
.step-t{font-size:13px;line-height:1.3}
.step.is-done{opacity:.55}
.step.is-done .step-n{color:var(--ok)}
.step.is-alert{border-color:#D9B9B3}
.step.is-alert .step-n{color:var(--alert)}
.task-group{scroll-margin-top:80px}
.task{display:grid;grid-template-columns:16px minmax(0,1fr) minmax(150px,auto) 110px auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0}
.task-title{font-weight:500}
.task-meta{display:flex;flex-direction:column;gap:2px;text-align:right}
@media (max-width:820px){.task{grid-template-columns:16px minmax(0,1fr) auto}.task-meta,.task-score{display:none}}

/* Vue Urgent */
.urgent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.ucard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ucard.is-critical{border-color:#D9B9B3;box-shadow:inset 0 2px 0 var(--alert)}
.ucard-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ucard-name{font-family:var(--serif);font-size:22px;line-height:1.15}
.ucard-facts{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;margin:4px 0 4px;font-size:13px}
.ucard-facts dt{color:var(--muted)}
.ucard-facts dd{margin:0;min-width:0;overflow-wrap:break-word}
.ucard .btn.primary{margin-top:auto;text-align:center}

/* Documents : progression par dossier */
.prog-row{display:grid;grid-template-columns:minmax(160px,230px) minmax(120px,1fr) 64px minmax(0,1.3fr);gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line-soft)}
.prog-row:last-child{border-bottom:0}
.prog-who .name{font-weight:500}
.prog-bar{display:flex;gap:2px;height:12px;min-width:0}
.seg{display:block;height:100%;border-radius:3px;min-width:6px}
.seg-ok{background:var(--ok)}
.seg-gold{background:var(--gold)}
.seg-alert{background:var(--alert)}
.seg-empty{background:transparent;border:1px dashed #C9C3B6}
.prog-num{font-size:13px;color:var(--muted);text-align:right}
.prog-num b{color:var(--text);font-size:15px}
.prog-todo{min-width:0}
.chip-gold{border-color:var(--gold);color:var(--gold-ink)}
.chip-alert{border-color:#D9B9B3;background:var(--alert-soft);color:var(--alert)}
@media (max-width:900px){.prog-row{grid-template-columns:minmax(0,1fr) 64px}.prog-bar{grid-column:1 / -1;order:3}.prog-todo{grid-column:1 / -1;order:4}}
.legend i.lg{width:14px;height:10px;border-radius:3px}
.lg-ok{background:var(--ok)}.lg-gold{background:var(--gold)}.lg-alert{background:var(--alert)}
.lg-empty{border:1px dashed #B9B3A6}
.lg-next{border:2px solid var(--gold-ink);background:var(--card)}

/* Relances : chronologie */
.rel-row{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr) 150px auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.rel-row:last-child{border-bottom:0}
.rel-who .name{font-weight:500}
.rel-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.rel-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:6px;height:1px;background:var(--line)}
.rel-step{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative;min-width:0}
.rel-dot{width:13px;height:13px;border-radius:50%;background:var(--card);border:1px dashed #B9B3A6;position:relative}
.rel-step.is-start .rel-dot{background:var(--muted);border:0}
.rel-step.is-sent .rel-dot{background:var(--gold);border:0}
.rel-step.is-next .rel-dot{border:2px solid var(--gold-ink)}
.rel-step.is-late .rel-dot{border-color:var(--alert)}
.rel-step.is-late .rel-d{color:var(--alert);font-weight:600}
.rel-l{font-size:12px;color:var(--muted)}
.rel-d{font-size:12px}
.rel-state{text-align:right}
@media (max-width:900px){.rel-row{grid-template-columns:minmax(0,1fr) auto}.rel-track{grid-column:1 / -1;order:3}.rel-state{text-align:left}}

/* Erreurs n8n actionnables */
.err-list{display:flex;flex-direction:column;gap:14px}
.ecard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ecard.sev-critique{border-color:#D9B9B3;box-shadow:inset 3px 0 0 var(--alert)}
.ecard.sev-haute{box-shadow:inset 3px 0 0 var(--gold-ink)}
.ecard.is-resolved{opacity:.7;box-shadow:none}
.ecard-head{display:flex;flex-direction:column;gap:6px;padding:16px 20px 12px;border-bottom:1px solid var(--line-soft)}
.ecard-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ecard-head code{font-size:12px;background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px}
.ecard-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:900px){.ecard-body{grid-template-columns:minmax(0,1fr)}}
.ecard-col{padding:14px 20px;border-right:1px solid var(--line-soft);min-width:0}
.ecard-col:last-child{border-right:0}
.ecard-col p{margin:6px 0 0;font-size:14px;overflow-wrap:anywhere}
.ecard-col.todo{background:#FBF8F2}
.ecard-col.todo p{font-weight:500}
.ecard-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line-soft);flex-wrap:wrap;align-items:center}
.ecard-foot form{margin:0}
.acard-list li.stack-li .small{white-space:normal;overflow-wrap:anywhere}
.acard-list li > *{min-width:0}
.panel .client-cell{min-width:170px}
.rel-d{white-space:nowrap}
@media (max-width:900px){
  .rel-act{grid-column:1 / -1;order:4;justify-self:end}
  .rel-d,.rel-l{font-size:11px}
  .trend{overflow-x:auto}
  .trend svg{min-width:520px}
}