/* Gestion Courrier DAJ -Design system institutionnel */
/* @font-face : voir fonts.css (chargé avant ce fichier) */

:root{
  --ink:#16233d;
  --ink-soft:#2c3a58;
  --paper:#f3f2ee;
  --card:#fff;
  --line:#dcdad2;
  --line-soft:#e8e6df;
  --muted:#6a7180;
  --accent:#1f5f8b;
  --accent-ink:#123c5a;
  --ok:#2e7d5b; --ok-bg:#e5f1ea;
  --wait:#8a6d1f; --wait-bg:#f6efd9;
  --cours:#1f5f8b; --cours-bg:#e2eef5;
  --late:#b23b3b; --late-bg:#f7e5e3;
  --rejet:#7a4fa3; --rejet-bg:#efe6f5;
  /* Survol des lignes cliquables — source unique, partagée par les tableaux et le panneau priorité */
  --row-hover:#f7fafb;
  --row-link-hover:#eef5fa;
  --row-late:#fffaf9;
  --row-late-hover:#fdf3f1;
  --radius:12px;
  --shadow:0 1px 2px rgba(22,35,61,.06), 0 8px 28px rgba(22,35,61,.07);
  --shadow-lg:0 18px 50px rgba(22,35,61,.16);
  --font: "Public Sans", "Spectral", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Spectral", "Public Sans", Georgia, "Times New Roman", serif;
  --side-w: 260px;
  --focus: 0 0 0 3px rgba(31,95,139,.16);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-family:var(--font)}
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(31,95,139,.08), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(22,35,61,.05), transparent 50%),
    linear-gradient(180deg, #eef1f4 0%, var(--paper) 38%, #ebe8e0 100%);
  background-attachment:fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:14.5px;
  line-height:1.5;
}
a{color:inherit;font-family:inherit}
button,input,select,textarea,optgroup{font:inherit;font-family:var(--font)}
/* Force Public Sans partout (boutons, nav, tableaux, badges…) — aucune exception UI */
button,.btn,a.btn,.nav,.nav a,.act,.actwrap,.amenu,.amenu a,.badge,.tag,.toast,
.pagination,.pager,.pager-meta,.pager-btn,.pager-num,.toggle,.tbar,.cnt,.sub2,.legend,.legend .li,
.stat-row,.stat-meta,.empty,.alert,.upload-zone,.uz-text,.meta-chip,.kv,.k,
.formactions,.m-body,.m-head,.m-foot,.topbar,.topbar-title,.burger-float,.who,
.who-meta,.filters,.fld,.ff,.field,.form-row,.tabs,.panel,.pbody,.tablewrap,
table,thead,tbody,th,td,.prio,.kpi,.kpi .lab,.kpi .sub,.sel,.searchwrap,
.doc-meta,.doc-row,.ft,.fb,.ci,.req,.num,.obj,.ech,.uname,.section-title,
.back-card,.error-message,.error-hint,.error-actions,.error-sub,.error-brand,
.daj-loading-msg,.daj-loading-card{
  font-family:var(--font);
}
/* Spectral : titres et grandes lignes uniquement */
h1,h2,h3,h4,.head h2,.brand h1,.kpi .val,.panel > h3,.section-title,
.profile-hero h3,.m-head h3,.login-card h2,.empty .big,.error-title,
.error-app,.error-code,.ft{
  font-family:var(--display);
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}

/* ========== Sidebar ========== */
.side{
  background:
    linear-gradient(180deg, rgba(31,95,139,.22), transparent 28%),
    linear-gradient(165deg, #10192c 0%, var(--ink) 48%, #0e1728 100%);
  color:#c8cfdd;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  border-right:1px solid rgba(255,255,255,.05);
  z-index:30;
}
.brand{
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;gap:12px;align-items:center;
}
.seal{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(145deg,#2a7ab0,#123c5a);
  display:grid;place-items:center;color:#fff;
  font-family:var(--display);font-weight:700;font-size:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2);
  letter-spacing:.5px;
}
.brand-logo{
  width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:#0b3d91;box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.brand-logo-lg{width:88px;height:88px;display:block;margin:0 auto 16px}
.brand h1{font-size:15.5px;color:#fff;font-weight:600;letter-spacing:.1px;text-transform:uppercase}
.brand small{display:block;color:#8b93a6;font-size:11px;margin-top:2px;line-height:1.35;text-transform:uppercase}
.nav{padding:14px 12px;flex:1;overflow:auto}
.nav .grp{
  color:#6b7488;font-size:10px;text-transform:uppercase;
  letter-spacing:1.25px;padding:16px 12px 7px;font-weight:600;
}
.nav a{
  display:flex;align-items:center;gap:11px;
  color:#c8cfdd;text-decoration:none;
  padding:10px 12px;border-radius:9px;font-size:13.5px;
  margin-bottom:2px;transition:background .15s, color .15s, transform .15s;
}
.nav a .ic{width:18px;text-align:center;opacity:.8}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav a.active{
  background:linear-gradient(90deg, var(--accent), #245f86);
  color:#fff;box-shadow:0 6px 16px rgba(31,95,139,.35);
}
.nav a .cnt{
  margin-left:auto;background:rgba(255,255,255,.14);color:#fff;
  font-size:11px;padding:1px 7px;border-radius:20px;font-weight:600;
}
.who{
  padding:16px 18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;color:#8b93a6;background:rgba(0,0,0,.12);
}
.who-user{display:flex;align-items:center;gap:12px}
.who-avatar{
  width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.18);background:#1f5f8b;
}
.who-avatar-init{
  display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
}
.who-meta{min-width:0;line-height:1.45}
.who-meta b{color:#e6e9f0;display:block;font-size:13px;margin-bottom:2px}
.who-meta .hab{color:#8fd4ad;font-weight:600;display:block;margin-top:2px}
.who b{color:#e6e9f0;display:block;font-size:13px;margin-bottom:3px}
.who .hab{color:#8fd4ad;font-weight:600}

/* ========== Crédit développeurs (login uniquement) ========== */
.credit-dev{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-transform:none;
}
.credit-dev-label{
  font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;opacity:.78;line-height:1;
}
.credit-dev-logo{
  display:block;width:auto;height:auto;
  object-fit:contain;
}
.credit-dev--login{
  margin-top:28px;padding:0 12px;gap:8px;
  width:min(300px,82vw);
}
.credit-dev--login .credit-dev-label{color:var(--muted);font-size:11px;opacity:.8;letter-spacing:.6px}
.credit-dev--login .credit-dev-logo{width:100%;height:auto;max-height:48px}

/* ========== Main ========== */
.main{padding:22px 26px 48px;min-width:0;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.topbar{display:none}
.side-backdrop{display:none}
.burger-float{
  display:none;border:1px solid var(--line);background:#fff;border-radius:10px;
  width:40px;height:40px;font-size:18px;cursor:pointer;flex-shrink:0;
  position:static;
}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.formactions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.formactions .btn{text-decoration:none}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5}
.drop{
  position:relative;display:block;border:1.5px dashed var(--line);border-radius:9px;
  padding:20px;text-align:center;color:var(--muted);font-size:13px;background:#fafaf8;
  cursor:pointer;overflow:hidden
}
.drop:hover{border-color:var(--accent);color:var(--ink)}
.ff .two{display:grid;grid-template-columns:1fr 150px;gap:8px}
.fcard.full{grid-column:1/-1}
.alert.ok{background:var(--ok-bg);border-color:#b9d8c8;color:var(--ok)}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head h2{
  font-family:var(--display);font-size:28px;font-weight:700;
  letter-spacing:-.4px;line-height:1.15;
}
.head p{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:min(50vw,640px)}
.period-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-row-cloture .ff input,
.form-row-cloture .ff select{
  min-height:44px;height:44px;box-sizing:border-box;padding-top:10px;padding-bottom:10px;
}
.form-row-cloture .ff input[type="file"]{
  padding:9px 10px;line-height:1.2;
}
.stack-track{
  display:flex;height:10px;border-radius:999px;overflow:hidden;background:#eceae4;margin-top:6px;
}
.stack-seg{display:block;height:100%;min-width:0}
.stack-cours{background:#1f5f8b}
.stack-soon{background:#c98a1f}
.stack-late{background:#c44b4b}
.stack-clot{background:#2e7d5b}
.stack-cell{min-width:140px;padding:8px 10px}
.stack-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.stack-legend span{display:inline-flex;align-items:center;gap:6px}
.stack-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.stack-dot.stack-cours{background:#1f5f8b}
.stack-dot.stack-soon{background:#c98a1f}
.stack-dot.stack-late{background:#c44b4b}
.stack-dot.stack-clot{background:#2e7d5b}
.head .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Fiche courrier uniquement : garder les actions sur une seule rangée. Les
   autres `.head .tools` (liste, annuaire…) restent libres de se replier. */
.head .tools.tools-actions{
  flex-wrap:nowrap;overflow-x:auto;max-width:100%;min-width:0;
}
.head .tools.tools-actions > *{flex:0 0 auto}
.head-left{display:flex;align-items:center;gap:14px;min-width:0}
.back-card{
  flex-shrink:0;
  width:38px;height:38px;
  display:inline-grid;place-items:center;
  border-radius:11px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  color:var(--accent-ink);
  text-decoration:none;
  transition:transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.back-card:hover{
  border-color:rgba(31,95,139,.35);
  box-shadow:0 2px 10px rgba(31,95,139,.12);
  transform:translateY(-1px);
}
.back-card:active{transform:translateY(0)}
.back-card-icon{display:block}

/* ========== Buttons ========== */
.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:9px 14px;border-radius:10px;font-size:13px;cursor:pointer;
  font-weight:600;display:inline-flex;align-items:center;gap:7px;
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s, color .12s;
  text-decoration:none;
}
.btn:hover{border-color:#b9c8d6;color:var(--accent-ink);transform:translateY(-1px);box-shadow:0 6px 14px rgba(22,35,61,.08)}
.btn.primary{
  background:linear-gradient(180deg,#2773a3,#1f5f8b);
  border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(31,95,139,.28);
}
.btn.primary:hover{background:linear-gradient(180deg,#1f5f8b,#123c5a);color:#fff}
.btn.ok{background:linear-gradient(180deg,#3a9170,#2e7d5b);border-color:transparent;color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* `:disabled` ne s'applique ni à un <a> ni à un <span> : une action indisponible
   se rend donc en <span class="btn is-disabled" aria-disabled="true">, comme le
   fait déjà la pagination. `pointer-events:none` neutralise aussi les handlers
   globaux de app.js (téléchargement, loader). */
.btn.is-disabled,.act.is-disabled{
  opacity:.38;pointer-events:none;cursor:default;box-shadow:none;
  transform:none;background:#f3f2ee;
}
select.sel{border:1px solid var(--line);background:var(--card);padding:8px 11px;border-radius:10px;font-size:13px;color:var(--ink)}

/* ========== KPI ========== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.kpis-dept{grid-template-columns:repeat(5,1fr)}
/* Une colonne de plus quand la carte « En instance » s'ajoute : sans cela la
   dernière carte passe seule à la ligne. Posée par views/dashboard/index.php,
   donc uniquement lorsqu'au moins un dossier est suspendu. */
.kpis-inst{grid-template-columns:repeat(7,1fr)}
.kpis-dept.kpis-inst{grid-template-columns:repeat(6,1fr)}
.kpi{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:16px 16px 14px;cursor:pointer;position:relative;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .16s, border-color .16s, box-shadow .16s;
  box-shadow:0 1px 2px rgba(22,35,61,.03);
}
.kpi::after{
  content:"";position:absolute;inset:auto -20% -40% auto;width:90px;height:90px;
  background:radial-gradient(circle, rgba(31,95,139,.08), transparent 70%);
  pointer-events:none;
}
.kpi:hover{border-color:#c5d7e6;box-shadow:var(--shadow);transform:translateY(-2px)}
.kpi .lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.55px;font-weight:700;min-height:28px}
.kpi .val{font-family:var(--display);font-size:32px;font-weight:700;line-height:1;margin:8px 0 4px;letter-spacing:-1px}
.kpi .sub{font-size:11.5px;color:var(--muted)}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.k-total .bar{background:var(--ink)}.k-wait .bar{background:var(--wait)}.k-cours .bar{background:var(--cours)}
.k-clot .bar{background:var(--ok)}.k-late .bar{background:var(--late)}.k-soon .bar{background:#c98a1f}
/* Dossiers mis en instance : même violet que le badge d'état et l'arc du donut. */
.k-inst .bar{background:var(--rejet)}
.k-late .val{color:var(--late)}

/* Pilotage — périmètre explicite */
.scope-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.scope-pill{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;
  padding:5px 10px;border-radius:999px;
  background:#eef3f8;color:var(--accent-ink);border:1px solid #c5d7e6;
}
.scope-pill.scope-daj{background:#f3f0e8;color:#5a4a1f;border-color:#d9cc9e}
.scope-pill.scope-dept{background:#eef6f1;color:#1f5a3d;border-color:#b7d4c4}
.scope-tabs{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.scope-tab{
  padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted);
  text-decoration:none;border-right:1px solid var(--line);
}
.scope-tab:last-child{border-right:0}
.scope-tab:hover{background:#f5f8fb;color:var(--ink)}
.scope-tab.active{background:var(--accent);color:#fff}
.dash-search{
  display:flex;align-items:center;gap:0;
  max-width:560px;width:100%;margin:0 auto 16px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(22,35,61,.04);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.dash-search:focus-within{
  border-color:#9bb8d0;box-shadow:0 0 0 3px rgba(31,95,139,.12);
}
.dash-search-ico{
  display:grid;place-items:center;width:42px;color:var(--muted);font-size:15px;flex-shrink:0;
}
.dash-search input[type="search"]{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  padding:11px 4px 11px 0;font-size:13.5px;color:var(--ink);
}
.dash-search input[type="search"]::placeholder{color:#9aa3b2;text-transform:none}
.dash-search .btn{
  margin:4px;border-radius:9px;padding:8px 14px;font-size:12px;flex-shrink:0;
  box-shadow:none;
}
.dash-search-panel{margin:0 0 14px}
.dash-search-wrap{margin-bottom:0}
.dash-search-table.courriers-table td.obj .cell-clip{font-weight:500}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.muted{color:var(--muted);font-size:12.5px;line-height:1.45}
.stat-late{color:var(--late);font-weight:600;font-size:11px;margin-left:0}
.stat-count{font-variant-numeric:tabular-nums}
.stat-fig-detail{
  font-size:11.5px;color:var(--muted);margin:-2px 0 6px;line-height:1.35;
  display:flex;flex-wrap:wrap;gap:0 2px;
}
.stat-fig-detail .stat-late{margin-left:0}
.agent-load{width:100%;border-collapse:collapse;font-size:12.5px}
.agent-load th,.agent-load td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:left}
.agent-load th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;background:#fafaf8}
.agent-load td.num,.agent-load th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.agent-load-wide{table-layout:fixed}
.agent-load-wide th:nth-child(1),.agent-load-wide td:nth-child(1){width:28%}
.agent-load-wide th:nth-child(2),.agent-load-wide td:nth-child(2){width:16%}
.agent-load-wide th:nth-child(3),.agent-load-wide td:nth-child(3){width:12%}
.agent-load-wide th.num,.agent-load-wide td.num{width:8.5%;padding-left:6px;padding-right:8px}
.agent-load .agent-name{font-weight:600}
.agent-load a.num-link{
  color:inherit;text-decoration:none!important;font-weight:700;font-variant-numeric:tabular-nums;
  border-radius:6px;padding:3px 7px;margin:-3px -7px;
  transition:background .12s,color .12s;
}
.agent-load a.num-link:hover{background:rgba(31,95,139,.1);color:var(--accent-ink)}
.agent-load a.num-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.agent-load tr.row-heavy{background:#fff6f4}
.agent-load .is-late{color:var(--late);font-weight:700}
.agent-load .is-soon{color:#c98a1f;font-weight:700}
.chip-warn{
  display:inline-block;margin-left:6px;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:6px;background:#fde8e4;color:var(--late);
}
.chip-you{
  display:inline-block;margin-left:6px;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:6px;background:#e8f1f8;color:var(--accent-ink);
}
.chip-role{
  display:inline-block;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;
  letter-spacing:.2px;white-space:nowrap;
}
.chip-chef{background:#e8f5ee;color:#1f5a3d}
.chip-agent{background:#f3f1ea;color:#5a5346}
.chip-lecture{background:#f0f0f0;color:#6a7180}
.agent-load tr.row-self{background:#f7fbfe}
.scope-help{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.scope-help p{margin:0 0 10px}
.scope-help p:last-child{margin-bottom:0}
.scope-help strong{color:var(--ink)}

.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:14px}
.grid-dept-pilotage{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
.pbody-table{padding:0;overflow-x:auto}
.panel{
  background:rgba(255,255,255,.92);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.panel h3{
  font-size:13.5px;font-weight:700;padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fcfcfb,#f7f6f2);
}
.panel h3 small{color:var(--muted);font-weight:500;font-size:11.5px}
/* Action dans l'en-tête d'un panneau (ex. Joindre complément) : `.act` n'a pas
   de display déclaré sur un <button>, et même sur un <a> on force l'alignement
   ici pour rester indépendant du style global des liens de panneau. */
.panel h3 .act{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.pbody{padding:18px}

/* Charts / stats */
.bars{display:flex;align-items:flex-end;gap:8px;height:180px;padding:6px 2px 0}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0;text-decoration:none;color:inherit;border-radius:8px;padding:4px 2px;transition:background .12s}
.bars a.b:hover{background:rgba(31,95,139,.08)}
.bars a.b:hover .col{filter:brightness(1.12);transform:scaleY(1.04);transform-origin:bottom}
.bars a.b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bars .b .col{width:100%;max-width:36px;background:linear-gradient(180deg,#2f7bab,#1f5f8b);border-radius:5px 5px 0 0;transition:filter .12s, transform .12s}
.bars .b .n{font-size:10.5px;color:var(--muted)}
.bars .b .v{font-size:11px;font-weight:700;color:var(--ink);min-height:14px}
.stat-row{margin-bottom:10px}
.stat-row-link{
  display:block;text-decoration:none!important;color:inherit;border-radius:8px;padding:6px 8px;margin:0 -8px 8px;
  transition:background .12s;
}
.stat-row-link:hover{background:rgba(31,95,139,.08)}
.stat-row-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.stat-row-link .stat-meta span,
.stat-row-link .stat-meta b,
.stat-row-link .num{text-decoration:none!important;color:inherit}
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut svg a{cursor:pointer}
.donut svg a:hover circle{filter:brightness(1.1);opacity:.9}
.donut svg a:focus{outline:none}
.donut svg a:focus-visible circle{filter:drop-shadow(0 0 3px rgba(31,95,139,.55))}
.legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px;flex:1;min-width:140px}
.legend .li{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:8px;padding:4px 6px;margin:0 -6px;transition:background .12s}
.legend a.li{cursor:pointer}
.legend a.li:hover{background:rgba(31,95,139,.08)}
.legend .li b{margin-left:auto;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.stat-meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:4px}
.stat-track{height:8px;background:#eee;border-radius:5px;overflow:hidden}
.stat-fill{height:100%;border-radius:5px}
.stat-fill.accent{background:linear-gradient(90deg,#2f7bab,#1f5f8b)}
.stat-fill.ok{background:linear-gradient(90deg,#5aa06f,#2e7d5b)}

.prio .row{
  display:flex;align-items:center;gap:10px;padding:11px 16px 11px 18px;
  border-bottom:1px solid var(--line-soft);transition:background .12s;
  box-shadow: inset 6px 0 0 0 var(--etat-color, #1f5f8b);
}
.prio .row:hover{background:var(--row-hover)}
.prio .row.row-link{cursor:pointer}
.prio .row.row-link:hover{background:var(--row-link-hover)}
.prio .row.row-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.prio .row:last-child{border-bottom:0}
.prio .row .num{font-weight:700;color:var(--accent-ink);font-size:12.5px}
.prio .row .ob{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prio .row .tag{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.prio .row .tag.r{color:var(--late)}
.prio .row .tag.s{color:#b5811f}
.prio .row.late{background:var(--row-late)}
.prio .row.late:hover{background:var(--row-late-hover)}
.prio .row .impute{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.prio .row .nat{display:flex;align-items:center}
.prio .row .nat .badge{font-size:10px;padding:2px 7px}
.prio .row .traitant{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prio .prio-head{
  display:flex;align-items:center;gap:10px;padding:10px 16px 10px 18px;
  border-bottom:1px solid var(--line);background:#fafaf8;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;
}
/* Le panneau porte `.panel{overflow:hidden}` et n'avait aucune zone défilable :
   à 430 px, 612 px de contenu étaient coupés net et la colonne Échéance — la
   seule information de priorité — devenait invisible. `.prio-scroll` englobe
   l'en-tête ET les lignes dans un conteneur unique : deux zones séparées se
   désaligneraient au premier défilement.
   Le plancher de largeur vaut à toutes les tailles, et n'a d'effet que là où il
   manque de place : les colonnes fixes réclament 628 px, donc sans lui l'objet
   (seule colonne élastique) tomberait à 0 px de large sur un écran étroit.
   Au-delà, le panneau est plus large que ce plancher et rien ne change. */
.prio .prio-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prio .prio-head,.prio .prio-body{min-width:var(--prio-min-w)}
/* ---------------------------------------------------------------------------
   LES SIX LARGEURS DU PANNEAU — DÉCLARÉES ICI, ET NULLE PART AILLEURS
   L'en-tête et les lignes lisent les mêmes variables et les appliquent en
   `flex:0 0`. C'est ce que le <colgroup> fait pour la liste des courriers :
   une divergence entre les deux blocs devient structurellement impossible.
   Les `min-width` d'avant laissaient deux défauts : l'en-tête, seul à porter un
   padding horizontal, occupait 10 px de moins que sa cellule de ligne (écarts
   mesurés : objet 15 px, nature 41, imputé à 31, traitant 21, échéance 5) ; et
   les cellules de ligne, sans base fixe, décalaient la colonne Échéance dès
   qu'un nom de traitant était long.
   Contrepartie assumée : un libellé plus long que sa colonne est désormais
   coupé (ellipse) au lieu de pousser ses voisins.
   --------------------------------------------------------------------------- */
.prio{
  --prio-min-w:52rem;
  --prio-num:7.5rem;
  --prio-nat:6.5rem;
  --prio-impute:5.5rem;
  /* 9rem, pas 8 : « JOSEPHINE COULIBALY » demande 134 px et les 128 px d'avant la
     coupaient dès que la colonne a cessé de s'élargir. Les 16 px viennent de
     l'objet, qui garde 498 px pour un besoin maximal mesuré de 393. */
  --prio-traitant:9rem;
  --prio-ech:5.5rem;
}
.prio .prio-head .num,.prio .row .num{flex:0 0 var(--prio-num)}
.prio .prio-head .ob,.prio .row .ob{flex:1 1 0}
.prio .prio-head .nat,.prio .row .nat{flex:0 0 var(--prio-nat)}
.prio .prio-head .impute,.prio .row .impute{flex:0 0 var(--prio-impute)}
.prio .prio-head .traitant,.prio .row .traitant{flex:0 0 var(--prio-traitant)}
.prio .prio-head .ech,.prio .row .ech{flex:0 0 var(--prio-ech)}
/* Base fixe + `min-width:0` : le contenu se coupe dans sa colonne au lieu de
   l'élargir. Sans le `nowrap`, N° DAJ et Imputé à repasseraient à la ligne. */
.prio .prio-head > span,.prio .row > *{
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.prio .prio-head .prio-sort{
  cursor:pointer !important;
  user-select:none;
  border-radius:4px;
  /* Padding vertical seul : l'horizontal entrait dans le calcul des largeurs
     (box-sizing:border-box) et rétrécissait chaque en-tête de 10 px face à sa
     cellule de ligne. La zone cliquable perd 5 px de part et d'autre, sans
     conséquence sur un en-tête qui occupe déjà toute sa colonne. */
  padding:3px 0;
  margin:-3px 0;
  transition:color .12s,background .12s,box-shadow .12s;
}
.prio .prio-head .prio-sort:hover{
  color:var(--accent-ink);
  background:rgba(31,95,139,.12);
  text-decoration:underline;
  text-underline-offset:3px;
  box-shadow:inset 0 -2px 0 0 var(--accent);
}
.prio .prio-head .prio-sort.is-active{color:var(--accent-ink)}
.prio .prio-head .prio-sort:hover .prio-ind:empty::after{content:"⇅";opacity:.7}
.prio .prio-head .prio-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Place réservée en permanence : le chevron n'apparaît qu'au survol ou sur la
   colonne active, et sans cette réserve il rognait le libellé de sa colonne —
   « ÉCHÉANCE » ne dispose que de 88 px. */
.prio .prio-ind{
  font-size:9px;font-weight:700;margin-left:3px;letter-spacing:0;text-transform:none;
  display:inline-block;min-width:10px;
}

/* ========== Filters / tabs ========== */
.filters{
  background:rgba(255,255,255,.92);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);
}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:10px}
.fld label,.ff label,.form-row label,.field label{
  font-size:11px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.45px;
  margin-bottom:2px;
}
.fld input,.fld select,.fld textarea,
.ff input,.ff select,.ff textarea,
.form-row input,.form-row select,.form-row textarea,
.field input,.field select,.field textarea,
.m-body .form-row input,.m-body .form-row select,.m-body .form-row textarea{
  border:1px solid var(--line);background:#fff;
  padding:11px 13px;border-radius:10px;font-size:14px;color:var(--ink);
  min-width:150px;width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s;
  box-shadow:inset 0 1px 2px rgba(22,35,61,.03);
}
.fld input:hover,.ff input:hover,.form-row input:hover,.field input:hover,
.fld select:hover,.ff select:hover,.form-row select:hover,.field select:hover,
.fld textarea:hover,.ff textarea:hover,.form-row textarea:hover,.field textarea:hover{
  border-color:#c5c3b8;
}
.fld input:focus,.fld select:focus,.fld textarea:focus,
.ff input:focus,.ff select:focus,.ff textarea:focus,
.form-row input:focus,.form-row select:focus,.form-row textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus,
.m-body .form-row input:focus,.m-body .form-row select:focus,.m-body .form-row textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--focus);background:#fff;
}
.fld.search{flex:1;min-width:230px}.fld.search input{width:100%}
.filters-group{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft)}
.filters-group-title{
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.45px;margin-bottom:10px;
}
/* Multi Structure / Nature — même hauteur qu’un <select>, panneau au clic */
.msel{position:relative;min-width:150px;width:100%}
.msel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-width:150px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:#fff;
  padding:11px 13px;border-radius:10px;font-size:14px;color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(22,35,61,.03);
  transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
}
.msel-btn:hover{border-color:#c5c3b8}
.msel.is-open .msel-btn,.msel-btn:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--focus);
}
.msel-label{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msel-caret{flex:none;opacity:.55;font-size:11px}
.msel-panel{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  max-height:220px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(22,35,61,.12);padding:6px;
}
.msel-opt{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--ink);text-transform:none;font-weight:500;
  letter-spacing:0;margin:0;
}
.msel-opt:hover{background:#f3f5f7}
.msel-opt input{accent-color:var(--accent);width:auto;min-width:0;margin:0;box-shadow:none}
/* Agent / traitant — mono + recherche (même coquille visuelle) */
.asel-panel{padding-top:8px}
.asel-search{padding:0 6px 8px;position:sticky;top:0;background:#fff;z-index:1}
.asel-search input{
  width:100%;min-width:0;padding:9px 11px;font-size:13.5px;
  border:1px solid var(--line);border-radius:8px;background:#fafaf8;
  box-shadow:none;
}
.asel-search input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus);background:#fff}
button.msel-opt.asel-opt{
  width:100%;border:0;background:transparent;font:inherit;text-align:left;
  display:block;padding:9px 10px;
}
button.msel-opt.asel-opt.is-selected{
  background:rgba(31,95,139,.1);color:var(--accent-ink);font-weight:600;
}
.asel-empty{margin:8px 10px 6px;font-size:12.5px;color:var(--muted)}
.asel-empty.hide{display:none!important}
.searchwrap{position:relative}
.searchwrap .mag{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchwrap input{padding-left:34px}
.toggle{
  display:flex;align-items:center;gap:8px;font-size:13px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;user-select:none;background:#fff;font-weight:600;
}
.toggle.on{background:var(--late-bg);border-color:var(--late);color:var(--late)}
.tabs{display:inline-flex;background:#e7e5dd;border-radius:11px;padding:4px;margin-bottom:14px;gap:2px}
.tabs .btn,.tabs a.btn{border:0;background:transparent;box-shadow:none;transform:none}
.tabs .btn.primary,.tabs a.btn.primary{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.filter-chips{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 12px;padding:10px 12px;border-radius:10px;
  background:#f3f7fb;border:1px solid #d7e4ef;
}
.filter-chip{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  background:#fff;border:1px solid #c5d7e6;font-size:11.5px;font-weight:700;color:var(--accent-ink);
}
.filter-chip-hint{font-size:11.5px;color:var(--muted);font-weight:500}

/* ========== Table ========== */
.tablewrap{
  background:rgba(255,255,255,.95);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.tbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line-soft);gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,#fcfcfb,#f7f6f2);
}
.tbar .cnt{font-size:13px;color:var(--muted)}.tbar .cnt b{color:var(--ink)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
/* Liste courriers : grille fixe — ne jamais mettre display:-webkit-box sur un <td> */
table.courriers-table{
  table-layout:fixed;
  width:100%;
  min-width:1080px;
}
/* Centrage vertical : la cellule correspondants fait plusieurs lignes, les badges
   et dates des colonnes voisines doivent rester centrés en face, pas collés en haut. */
table.courriers-table thead th,
table.courriers-table tbody td{
  vertical-align:middle;
  padding:8px 7px;
}
/* ---------------------------------------------------------------------------
   BUDGET DE LARGEUR DES 9 COLONNES — NE PAS MODIFIER À L'AVEUGLE
   Largeur réellement disponible sur poste de bureau : 1126 px (conteneur 1128).
   `col-obj` est la seule colonne en `auto` : elle absorbe le reste, donc
   TOUTE largeur ajoutée ailleurs est prise sur l'objet.

     col-num     7 rem  = 112 px   « DAJ/2026/105 » mesure 84 px
     col-date    7 rem  = 112 px   « SORTIE 2025-08-24 » mesure 90 px, sur une ligne
     col-corr   15 rem  = 240 px   expéditeur sur 3 lignes + destinataire sur 2
     col-obj    auto    = 134 px   5 lignes ; l'objet le plus long mesure 377 px
     col-nat     6.25rem= 100 px   badge « CONFIDENTIEL » mesure 86 px
     col-imput   9.25rem= 148 px   l'en-tête « IMPUTÉ À / AGENT » exige 132 px
     col-etat    5.75rem=  92 px
     col-ech     5.75rem=  92 px
     col-act     6 rem  =  96 px
                          -------
                          1126 px

   Hauteur de ligne obtenue : 68 px (min) à 98 px (objet ou expéditeur très long).
   Le minimum mesurait 60 px avant le Lot 7 — et non 52 comme l'annonçait ce
   commentaire, valeur d'un rendu de police antérieur. La cellule Expéditeur /
   Destinataire respire depuis (4 px entre les deux blocs, padding vertical
   10 px). Le maximum ne bouge pas : seules les lignes courtes s'aèrent.
   Les seuls N° DAJ tronqués sont les identifiants de tests de fumée
   (« TEST-SMOKE-CLOT-…-SOUCHE », 40 caractères) : aucune donnée métier réelle.

   Sous 820 px, ces largeurs ne changent pas — la table garde ses 1126 px et le
   `.scroll` défile — mais la première colonne (N° DAJ) passe en `position:sticky`
   avec un fond opaque pour rester lisible au swipe. Voir la media query en fin de
   fichier et le commentaire de `tbody td.num-daj` pour le compromis de teinte.

   Après toute retouche, revérifier qu'aucun contenu ne se tronque :
   `scrollHeight > clientHeight` sur `.cell-clip`, `.corr-v`, `.imput-code`,
   `.imput-agent`, et `scrollWidth > clientWidth` sur les `th`.
   --------------------------------------------------------------------------- */
table.courriers-table .col-num{width:7rem}
table.courriers-table .col-date{width:7rem}
/* « orig. 2025-07-15 » se coupait en deux : la date reste d'un bloc.
   Attention : `white-space` sur un <col> est inopérant, il faut la classe sur le <td>. */
table.courriers-table td.col-date,
table.courriers-table td.col-date .sub2{white-space:nowrap}
table.courriers-table .col-corr{width:15rem}
table.courriers-table .col-obj{width:auto}
table.courriers-table td.col-corr,
table.courriers-table td.obj{
  overflow:hidden;
}
table.courriers-table .col-nat{width:6.25rem}
table.courriers-table .col-imput{width:9.25rem}
table.courriers-table .col-etat{width:5.75rem}
table.courriers-table .col-ech{width:5.75rem;white-space:nowrap}
table.courriers-table .col-act{width:6rem;text-align:right}
/* Colonnes fusionnées : même hiérarchie que la cellule N° DAJ (valeur forte + rappel discret) */
table.courriers-table td.col-corr .corr-row{
  display:flex;align-items:baseline;gap:5px;min-width:0;
}
/* Respiration de la cellule — EN HAUTEUR SEULEMENT.
   Les blocs « De » et « À » étaient collés (0 px entre le bas de l'un et le haut
   de l'autre) et le texte touchait la colonne Objet. La largeur de colonne ne
   bouge pas : `col-corr` reste à 15rem, seul le padding interne change, ce qui
   laisse 221 px utiles au lieu de 226 — assez pour garder l'expéditeur sur
   2 lignes (411 px au pire, clamp à 3) et le destinataire sur 2 (252 px). */
table.courriers-table td.col-corr .corr-row + .corr-row{margin-top:4px}
table.courriers-table td.col-corr{padding:10px 12px 10px 7px}
table.courriers-table td.col-corr .corr-k{
  flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;width:1.1rem;
}
table.courriers-table td.col-corr .corr-v{
  min-width:0;flex:1 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Expéditeur et destinataire sur 2 lignes chacun : tronqués sur une seule ligne,
   « AMBASSADE DE LA REPUBLIQ… » et « DIRECTION DES AFFAIRES JURIDIQ… » ne permettent
   pas d'identifier le correspondant. Le destinataire type demande 252 px pour 193 px
   disponibles, d'où le passage à 2 lignes. */
table.courriers-table td.col-corr .corr-v{
  white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-height:1.25;max-height:calc(1.25em * 2);overflow-wrap:anywhere;
}
/* 3ᵉ ligne pour l'expéditeur : « PROGRAMME DES NATIONS UNIES POUR LE DEVELOPPEMENT
   (PNUD) » mesure 411 px et ne tient pas sur 2 lignes. Gratuit en hauteur : la cellule
   objet autorise déjà 5 lignes, donc 3 + 2 lignes ici ne rallongent pas le maximum. */
table.courriers-table td.col-corr .corr-from .corr-v{
  color:var(--ink);font-weight:600;font-size:12px;
  -webkit-line-clamp:3;max-height:calc(1.25em * 3);
}
table.courriers-table td.col-corr .corr-to .corr-v{color:var(--muted);font-weight:500;font-size:11px}
table.courriers-table td.col-imput .imput-code{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;
}
table.courriers-table td.col-imput .imput-agent{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--muted);font-weight:500;font-size:11px;
}
/* La cellule correspondants fait 4 lignes (expéditeur + destinataire sur 2 lignes
   chacun) : l'objet dispose d'une ligne de plus pour ne jamais se tronquer.
   `max-height` ne force pas la hauteur : les objets courts (médiane 36 caractères)
   tiennent sur 2-3 lignes, seuls les plus longs allongent leur ligne. */
table.courriers-table td.obj .cell-clip{
  -webkit-line-clamp:5;max-height:calc(1.3em * 5);
}
table.courriers-table tbody td .sub2{font-size:10.5px}
/* En-tête portant deux clés de tri (Expéditeur / Destinataire, Imputé à / Agent).
   Le `nowrap` est indispensable : en repassant à la ligne, la paire décrochait
   de la ligne de base des autres en-têtes. */
table.courriers-table th.th-sort-pair{vertical-align:middle}
table.courriers-table th.th-sort-pair .th-pair{
  display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:0;
}
table.courriers-table th.th-sort-pair .th-sort-link{margin:-3px 0;padding:3px 4px}
table.courriers-table th.th-sort-pair .th-pair-sep{
  color:var(--muted);opacity:.45;font-weight:400;padding:0 1px;
}
table.courriers-table td.col-nat{
  overflow:hidden;
  white-space:nowrap;
}
table.courriers-table tbody td .badge{
  max-width:100%;
  box-sizing:border-box;
  padding:3px 7px;
  font-size:10.5px;
  letter-spacing:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
table.courriers-table tbody td .act{padding:5px 8px;font-size:11.5px}
table.courriers-table td.num-daj{
  width:6.5rem;
  max-width:6.5rem;
  white-space:normal;
}
table.courriers-table td.num-daj .num-daj-body{max-width:100%}
table.courriers-table td.num-daj .num,
table.courriers-table td.num-daj .sub2{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Clamp 2 lignes sur un wrapper — le <td> reste table-cell */
.cell-clip{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;line-height:1.3;max-height:calc(1.3em * 2);
  overflow-wrap:anywhere;word-break:break-word;
}
.cell-clip.one{
  -webkit-line-clamp:1;max-height:1.3em;white-space:nowrap;
  display:block;text-overflow:ellipsis;
}
thead th{
  text-align:left;padding:7px 8px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--line);background:#fafaf8;white-space:nowrap;
}
tbody td{padding:7px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle;text-transform:uppercase}
.app,.login-wrap,.nav a,.btn,.head h2,.head p,.tabs,.filters label,.ff label,.field label,.amenu a,.formactions,.who{
  text-transform:uppercase;
}
input.no-upper,input[type=password],input[type=email],input[autocomplete=username],
textarea.no-upper,code,.login-card input[type=password],.login-card input[name=login]{
  text-transform:none!important;
}
.amenu .mi,.act{text-transform:uppercase}
.kv .up{text-transform:uppercase}
/* Phrases rédigées : les capitales nuisent à la lecture (les libellés d'UI les gardent) */
.hint,.alert,.empty,.muted,.pick-empty,.help,small,
.hint *,.alert *,.empty *,.muted *,.pick-empty *,.help *{
  text-transform:none;
}
/* N° DAJ : bandeau état (box-shadow = fiable avec border-collapse) */
tbody td.num-daj{
  position:relative;
  vertical-align:middle;
  padding-left:14px;
  /* Transparent : un fond de cellule l'emporte sur le fond de ligne et couperait
     la bande de survol / de retard sur la première colonne.
     Sous 820 px la media query repasse cette cellule en `sticky`, qui exige un
     fond opaque. Elle le prend en `background:inherit` sur un `<tr>` rendu blanc
     par défaut : toutes les teintes de ligne — survol, retard, charge élevée —
     restent donc visibles jusque sur la colonne figée. */
  background:transparent;
  box-shadow: inset 5px 0 0 0 var(--etat-color, #1f5f8b);
  width:1%;
  white-space:nowrap;
  max-width:11rem;
}
tbody td.num-daj .etat-rail-bar{display:none} /* legacy : remplacé par box-shadow */
tbody td.num-daj .num-daj-body{min-width:0;max-width:10.5rem}
tbody td.num-daj .num{
  color:var(--ink);font-weight:700;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;
}
tbody td.num-daj .sub2{
  color:var(--muted);font-weight:500;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;
}
/* Liste courriers : écrase le shrink-to-fit (width:1% / nowrap) qui casse la grille fixe */
table.courriers-table tbody td.num-daj{
  width:6.5rem;max-width:6.5rem;white-space:normal;vertical-align:middle;
  padding-left:11px;
}
table.courriers-table tbody td.num-daj .num-daj-body{max-width:100%}
table.courriers-table tbody td.num-daj .num,
table.courriers-table tbody td.num-daj .sub2{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
table.courriers-table .cell-clip.one{
  max-width:100%;
}
.doc-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.doc-row:last-child{border-bottom:0}
.doc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.doc-meta > span:last-child{word-break:break-word}
.doc-name{word-break:break-word}
/* Date de dépôt et déposant : une information de contexte, pas le sujet de la
   ligne — même registre typographique que .hint, sans les capitales. */
.doc-sub{
  font-size:11.5px;color:var(--muted);text-transform:none;
  white-space:nowrap;flex-shrink:0;
}
.doc-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Refus d'une demande : le motif est obligatoire, le formulaire s'ouvre donc dans
   la cellule plutôt que de poster à l'aveugle. */
.refus-form{margin-top:8px;min-width:240px}
.refus-form[hidden]{display:none}
.refus-form textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  font-size:12.5px;text-transform:none;resize:vertical;
}
.refus-form textarea:focus{border-color:var(--accent);box-shadow:var(--focus);outline:0}
/* Tableau Demandes — la ligne n'est PAS cliquable : seuls le N° DAJ, le fichier
   proposé et les deux boutons le sont. Le survol global `tbody tr:hover` teintait
   pourtant la ligne entière, ce que l'œil lit comme une promesse de clic. Il est
   neutralisé ici seulement : la règle globale sert dix autres tableaux, et les
   couleurs de survol restent celles de `:root`.
   Restreint à un pointeur fin : au tactile, `:hover` peut rester collé après un
   tap, et une ligne transparente rendrait la colonne figée du mobile
   transparente avec elle — exactement le défaut corrigé au Lot 7. */
@media (hover:hover) and (pointer:fine){
  .demandes-table tbody tr:hover{background:transparent}
}
/* L'affordance passe donc aux seules cibles : pastille identique à celle des
   en-têtes triables. Pas de soulignement, `.tablewrap a` l'interdit en
   `!important` pour que les lignes cliquables des listes ne le portent pas. */
.demandes-table tbody a{
  display:inline-block;border-radius:5px;padding:2px 5px;margin:-2px -5px;
  color:var(--accent-ink);transition:background .12s,color .12s;
}
.demandes-table tbody a:hover{background:rgba(31,95,139,.12)}
.demandes-table tbody a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.avatar{
  width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;
  color:#fff;font-weight:700;font-size:12px;flex-shrink:0;text-transform:none;
  box-shadow:0 4px 10px rgba(31,95,139,.25);
}
.avatar.lg{width:88px;height:88px;font-size:28px}
img.avatar{object-fit:cover;padding:0;display:inline-block}
.uname{display:flex;align-items:center;gap:10px}
/* Pied de tableau — même famille que .tbar */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 18px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fcfcfb,#f7f6f2);
}
.pager-meta{
  margin:0;font-size:12.5px;color:var(--muted);font-weight:500;
  letter-spacing:.01em;text-transform:none;
}
.pager-range{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pager-sep{margin:0 .35em}
.pager-total{font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.pager-controls{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager-pages{
  display:inline-flex;align-items:center;gap:2px;
  background:#e7e5dd;border-radius:10px;padding:3px;
}
.pager-btn{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  text-decoration:none;transition:border-color .15s, color .15s, background .15s, box-shadow .15s;
  box-shadow:0 1px 2px rgba(22,35,61,.04);
}
.pager-btn:hover{
  border-color:var(--accent);color:var(--accent);background:var(--cours-bg);
  box-shadow:var(--focus);
}
.pager-btn.is-disabled{
  opacity:.38;pointer-events:none;cursor:default;box-shadow:none;background:#f3f2ee;
}
.pager-num{
  display:inline-grid;place-items:center;
  min-width:32px;height:28px;padding:0 8px;border-radius:8px;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-soft);text-decoration:none;text-transform:none;
  transition:background .12s, color .12s, box-shadow .12s;
}
a.pager-num:hover{background:rgba(255,255,255,.72);color:var(--accent-ink)}
.pager-num.is-current{
  background:#fff;color:var(--accent-ink);
  box-shadow:var(--shadow);
}
.pager-ellipsis{
  display:inline-grid;place-items:center;
  min-width:22px;height:28px;color:var(--muted);font-size:13px;font-weight:600;
  user-select:none;
}
@media (max-width:640px){
  .pager{justify-content:center}
  .pager-meta{width:100%;text-align:center}
  .pager-controls{margin-left:0}
}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--row-hover)}
tbody tr.late{background:var(--row-late)}
tbody tr.row-link{cursor:pointer}
tbody tr.row-link:hover{background:var(--row-link-hover)}
tbody tr.row-link.late:hover{background:var(--row-late-hover)}
tbody tr.row-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
tbody tr.row-link td.row-actions,
tbody tr.row-link td.row-actions:hover{cursor:default}
.obj{color:var(--ink-soft);line-height:1.3}
.obj .cell-clip{font-weight:500}
/* En-têtes triables : même pastille compacte que le panneau « À traiter en priorité ».
   La police et l'interlettrage sont hérités de `thead th` pour rester alignés sur les
   en-têtes non triables voisins. */
.th-sort{vertical-align:middle}
.th-sort-link{
  display:inline-flex;align-items:center;width:auto;
  padding:3px 5px;margin:-3px -5px;border-radius:4px;
  color:inherit;font:inherit;cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .12s,background .12s,box-shadow .12s;
}
.th-sort-link:hover{
  color:var(--accent-ink);
  background:rgba(31,95,139,.12);
  text-decoration:underline;
  text-underline-offset:3px;
  box-shadow:inset 0 -2px 0 0 var(--accent);
}
.th-sort-link:hover .prio-ind:empty::after{content:"⇅";opacity:.7}
.th-sort-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.th-sort.is-active .th-sort-link,
.th-sort-link.is-active{color:var(--accent-ink)}
.th-sort .prio-ind{font-size:9px;font-weight:700;margin-left:3px;letter-spacing:0;text-transform:none}
.num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-ink)}
.main a,.tablewrap a,.prio a,.panel a{text-decoration:none!important}
.main a:hover,.tablewrap a:hover{text-decoration:none!important}
.sub2{color:var(--muted);font-size:12px}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;letter-spacing:.2px;
}
/* Un badge par état de CourrierEtat::badgeClass(), plus b-rejet réutilisé par
   les pastilles INACTIF des écrans utilisateurs et structures. */
.b-wait{background:var(--wait-bg);color:var(--wait)}
.b-cours{background:var(--cours-bg);color:var(--cours)}
.b-clot{background:var(--ok-bg);color:var(--ok)}
.b-rejet{background:var(--rejet-bg);color:var(--rejet)}
/* Refus d'une demande de remplacement (DemandeStatut::badgeClass) : le rouge de
   la palette « retard », le violet .b-rejet servant déjà à l'état En instance. */
.b-late{background:var(--late-bg);color:var(--late)}
/* Natures : puce contournée, famille visuelle distincte des états (pastilles pleines) */
.badge[class*="n-nat"]{background:#fff;border:1px solid currentColor;font-weight:600}
.n-nat-ord{color:#5b6472}
.n-nat-urg{color:#b06a12}
.n-nat-tres{color:#b23b3b;background:var(--late-bg)!important;border-color:#e0a9a4}
.n-nat-conf{color:#7a4fa3}
.ech .tag{font-size:11px;font-weight:700}.ech .r{color:var(--late)}.ech .s{color:#b5811f}.ech .n{color:var(--muted)}
.act{
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;font-weight:600;
}
.act:hover{border-color:var(--accent);color:var(--accent)}
/* Porté par un <a> (panneau Documents) et non par un <button> : sans display,
   les paddings d'un élément inline ne réservent pas leur hauteur. */
a.act{display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
/* Marqueur des dossiers reçus en partage : occupe la place du bouton Actions,
   qui serait vide. Volontairement sans bordure ni fond, pour ne pas ressembler
   à un bouton cliquable — le dossier reste consultable par son N° DAJ. */
.ro-tag{
  display:inline-block;padding:5px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.45px;text-transform:uppercase;color:var(--muted);
  border:1px dashed var(--line);border-radius:8px;white-space:nowrap;cursor:help;
}
.empty{padding:48px;text-align:center;color:var(--muted)}
.empty .big{font-size:16px;color:var(--ink);font-weight:700;margin-bottom:6px;font-family:var(--display)}

.actwrap{position:relative;display:inline-block}
.amenu{
  position:fixed;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  min-width:190px;z-index:90;overflow:hidden;display:none;animation:pop .14s ease;
}
.amenu.open{display:block}
.amenu a{
  display:flex;align-items:center;gap:9px;padding:10px 13px;font-size:13px;
  color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-soft);
}
.amenu a:last-child{border-bottom:0}
.amenu a:hover{background:var(--cours-bg);color:var(--accent-ink)}
.amenu a.danger:hover{background:var(--late-bg);color:var(--late)}
.amenu-empty{display:block;padding:10px 12px;font-size:12px}

/* ========== Forms / fields enterprise ========== */
.field,.form-row,.ff{
  display:flex;flex-direction:column;gap:12px;margin-bottom:18px;
}
.field:last-child,.form-row:last-child,.ff:last-child{margin-bottom:0}
.fcard .fb > .ff,.fcard .fb > .field,.fcard .fb > .form-row{margin-bottom:4px}
.field{position:relative}
.field-shell{
  display:flex;align-items:stretch;border:1px solid var(--line);
  border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(22,35,61,.03);
  transition:border-color .15s, box-shadow .15s;
}
.field-shell:focus-within{border-color:var(--accent);box-shadow:var(--focus)}
.field-shell .ico{
  display:grid;place-items:center;width:42px;color:var(--muted);
  background:linear-gradient(180deg,#fafaf8,#f3f2ee);border-right:1px solid var(--line-soft);
  font-size:14px;flex-shrink:0;
}
.field-shell input,.field-shell select,.field-shell textarea{
  border:0!important;box-shadow:none!important;border-radius:0!important;
  background:transparent;padding:12px 14px;min-width:0;width:100%;
}
.field-shell input:focus,.field-shell select:focus,.field-shell textarea:focus{outline:none}
.field .hint,.ff .hint,.form-row .hint{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.field label .req,.ff label .req,.form-row label .req{color:var(--late)}
.readonly,.field input.readonly,input.readonly{
  background:linear-gradient(180deg,#f7f7f4,#f1f0ea)!important;
  color:var(--ink-soft)!important;cursor:default;
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formactions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;width:100%}
.formgrid .full{grid-column:1 / -1;width:100%;min-width:0}
.full{grid-column:1/-1}
.section-title{
  font-family:var(--display);font-size:18px;font-weight:700;
  margin:22px 0 12px;padding-top:8px;border-top:1px solid var(--line-soft);
}
.section-title:first-child{border-top:0;margin-top:0;padding-top:0}

/* ========== Profile page ========== */
.profile-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.profile-card{
  background:rgba(255,255,255,.96);border:1px solid var(--line-soft);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
}
.profile-hero{
  background:
    linear-gradient(135deg, rgba(31,95,139,.95), rgba(18,60,90,.98)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 45%);
  color:#fff;padding:28px 22px 22px;text-align:center;position:relative;
}
.profile-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:28px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.08));
}
.profile-photo{
  width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 12px;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(0,0,0,.25);
  display:block;background:#fff;
}
.profile-hero h3{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:4px}
.profile-hero p{font-size:12.5px;opacity:.88}
.profile-meta{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.meta-chip{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;
  border:1px solid var(--line-soft);border-radius:10px;background:#fafaf8;
}
.meta-chip span{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.meta-chip b{font-size:13px;color:var(--ink);font-weight:600}
.profile-form{padding:22px}
.upload-zone{
  border:1.5px dashed #c9c5b8;border-radius:12px;padding:16px;
  background:linear-gradient(180deg,#fcfcfb,#f6f5f0);
  display:flex;align-items:center;gap:14px;transition:border-color .15s, background .15s;
}
.upload-zone:hover{border-color:var(--accent);background:var(--cours-bg)}
.upload-zone input[type=file]{font-size:13px}
.upload-zone .uz-text b{display:block;font-size:13.5px;margin-bottom:2px}
.upload-zone .uz-text span{font-size:12px;color:var(--muted)}

/* ========== Modal ========== */
.overlay{
  position:fixed;inset:0;background:rgba(12,18,30,.55);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;z-index:100;
  padding:48px 16px;overflow:auto;
}
.overlay.open{display:flex}
.modal{
  background:#fff;border-radius:16px;width:100%;max-width:560px;
  box-shadow:var(--shadow-lg);animation:pop .18s ease;border:1px solid rgba(255,255,255,.4);
  overflow:hidden; /* coins arrondis visibles (évite le header carré) */
}
.modal.lg{max-width:720px}
.modal.xl{max-width:920px}
.modal.modal-sm{max-width:440px}
.period-filter-wrap{display:inline-flex;align-items:center}
.period-filter-btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;
}
.period-chip{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--cours-bg,#e8f1f8);color:var(--accent-ink);max-width:11rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.period-filter-modal .mb{padding:16px 18px 18px}
.period-filter-modal .ff{margin-bottom:12px}
.period-filter-modal .sel{width:100%}
.period-filter-modal .period-field[hidden]{display:none!important}
.confirm-msg{
  margin:0;font-size:14px;line-height:1.5;color:var(--ink);text-transform:none;font-weight:500;
}
.btn.warn{
  background:linear-gradient(180deg,#c45a4a,#a94438);border-color:transparent;color:#fff;
}
.btn.warn:hover{filter:brightness(1.05)}

/* Cartes Expéditeur / Destinataire */
.party-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.party-ac-wrap{position:relative}
.party-ac-list{
  position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);
  background:#fff;border:1px solid #d5dee8;border-radius:12px;
  box-shadow:0 10px 28px rgba(22,35,61,.12), 0 2px 6px rgba(22,35,61,.06);
  max-height:240px;overflow:auto;padding:6px;
}
.party-ac-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;padding:10px 12px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--ink);text-decoration:none;
}
.party-ac-item b{font-weight:700;letter-spacing:.01em}
.party-ac-item:hover,.party-ac-item:focus{background:rgba(31,95,139,.08);outline:none}
.party-ac-item .muted{font-size:11.5px;color:var(--muted);text-transform:none;font-weight:500}
.party-ac-clear{
  margin-top:8px;padding:0;border:0;background:none;color:var(--accent-ink);font-size:11.5px;font-weight:700;
  cursor:pointer;text-decoration:none!important;letter-spacing:.02em;
}
.party-ac-clear:hover{color:var(--accent)}
input.is-locked{
  background:#f1f4f8!important;color:var(--ink-soft);cursor:default;border-color:#d7dde6;
}
/* Pas d'`overflow:hidden` ici : il découpait la liste d'autocomplétion du dernier
   champ de la carte (Destination finale perdait 170 de ses 240 px, Expéditeur et
   Destinataire 32 px chacun). L'arrondi est donc porté par les enfants qui touchent
   les bords — en pratique le seul `.ft`, dont le dégradé dépasserait sinon des coins
   arrondis. `.fb` n'a ni fond ni bordure et son padding écarte ses enfants du bord. */
.fcard{
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:0 1px 2px rgba(22,35,61,.04);
}
.fcard .ft{
  padding:13px 16px;border-bottom:1px solid var(--line-soft);
  font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#fcfcfb,#f7f6f2);
  border-radius:14px 14px 0 0;
}
.fcard .ft .ci{
  width:30px;height:30px;border-radius:9px;background:var(--cours-bg);color:var(--accent);
  display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0;
}
.fcard .fb{padding:18px 16px;display:flex;flex-direction:column;gap:18px}
.fcard .field{margin:0}
.fcard .field input,.fcard .field textarea,.fcard .field select{
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;
  background:#fff;box-shadow:inset 0 1px 2px rgba(22,35,61,.03);
}
.fcard .field input:focus,.fcard .field textarea:focus,.fcard .field select:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--focus);
}
@media(max-width:820px){
  .party-grid{grid-template-columns:1fr}
  .modal.xl{max-width:100%}
}
@keyframes pop{from{transform:translateY(10px) scale(.985);opacity:.5}to{transform:none;opacity:1}}
.m-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fcfcfb,#f7f6f2);
}
.m-head h3{font-family:var(--display);font-size:18px;font-weight:700}
.m-head .x{
  cursor:pointer;font-size:22px;color:var(--muted);line-height:1;
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:0;background:transparent;padding:0;font-family:inherit;
}
.m-head .x:hover{background:var(--paper);color:var(--ink)}
.m-body{padding:20px}
.m-body .form-row{margin-bottom:14px}
.m-body .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-foot{
  padding:14px 20px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:flex-end;gap:10px;
  background:#fafaf8;
}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 14px;font-size:13.5px;align-items:start}
.kv .k{
  color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px;
  line-height:1.35;
}
.kv > .up,.kv > div:not(.k){min-width:0;text-align:left;justify-self:start}
/* Action discrète sur une ligne de champ (ex. Échéance) — pas un bouton bordé,
   qui casserait le rythme de lecture du kv. `.panel a` interdit le soulignement
   en `!important` : il faut le rétablir ici. */
.kv-act{
  display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  color:var(--accent-ink);font-size:12.5px;font-weight:600;white-space:nowrap;
  vertical-align:baseline;
}
.panel a.kv-act:hover{
  text-decoration:underline!important;text-underline-offset:3px;color:var(--accent);
}
.kv-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.hide{display:none!important}
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl{position:relative;padding:0 0 16px 8px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--accent);
}
.tl .t-act{font-size:13.5px;color:var(--ink);font-weight:600;text-transform:uppercase}
.tl .t-meta{font-size:11.5px;color:var(--muted);margin-top:2px;text-transform:none}
.tl .t-detail{font-size:12.5px;color:var(--ink);margin-top:4px;line-height:1.35;opacity:.92;text-transform:none}

/* ========== Login ========== */
.login-wrap{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:32px 24px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(31,95,139,.08), transparent),
    linear-gradient(180deg, #f7f6f2, #efece4);
}
.login-card{
  width:100%;max-width:420px;background:rgba(255,255,255,.96);
  border:1px solid rgba(220,218,210,.9);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:32px 30px 28px;animation:pop .22s ease;
}
.login-card h1{
  font-family:var(--display);font-size:22px;margin-bottom:6px;font-weight:700;
  text-align:center;text-transform:uppercase;letter-spacing:.3px;
}
.login-card > p{color:var(--muted);margin-bottom:22px;font-size:13.5px;text-align:center;text-transform:uppercase}
.login-card .field{margin-bottom:18px;gap:12px}
.login-card .btn.primary{width:100%;justify-content:center;padding:12px;margin-top:6px;font-size:14px}
.alert{
  background:var(--late-bg);color:var(--late);border:1px solid #efc4c1;
  padding:11px 13px;border-radius:10px;margin-bottom:14px;font-size:13px;font-weight:500;
}
.alert.info{background:var(--cours-bg);color:var(--accent-ink);border-color:#cadeeb}

.note{
  margin-top:16px;font-size:12.5px;color:var(--muted);background:#fff;
  border:1px dashed var(--line);border-radius:12px;padding:13px 16px;line-height:1.6;
}
.note b{color:var(--ink)}
a.link{color:var(--accent);text-decoration:none;font-weight:600}
a.link:hover{text-decoration:underline}

.toast{
  position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;
  padding:13px 16px;border-radius:12px;z-index:200;display:none;
  box-shadow:var(--shadow-lg);font-weight:500;max-width:360px;
}
.toast.on{display:block;animation:pop .18s ease}

/* ========== Loading global (nav + soumissions) ========== */
.daj-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;
  pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:transparent;
}
body.is-loading .daj-progress{opacity:1}
.daj-progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,#1f5f8b,#3a8fc4,#1f5f8b);
  background-size:200% 100%;
  box-shadow:0 0 10px rgba(31,95,139,.4);
  animation:daj-progress-run 10s cubic-bezier(.2,.7,.2,1) forwards, daj-progress-shimmer 1.2s linear infinite;
}
@keyframes daj-progress-run{
  0%{width:0}
  12%{width:28%}
  40%{width:58%}
  70%{width:78%}
  100%{width:92%}
}
@keyframes daj-progress-shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}
.daj-loading{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,22,36,.32);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
body.is-loading .daj-loading{
  opacity:1;visibility:visible;pointer-events:auto;
}
.daj-loading-card{
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:16px;padding:22px 26px;min-width:180px;max-width:min(320px,88vw);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;animation:pop .16s ease;
}
.daj-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid #d7e4ee;border-top-color:var(--accent);
  animation:daj-spin .65s linear infinite;
}
@keyframes daj-spin{to{transform:rotate(360deg)}}
.daj-loading-msg{
  margin:0;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  text-transform:none;letter-spacing:.01em;line-height:1.35;
}
button.is-busy,a.btn.is-busy,.btn.is-busy{
  pointer-events:none;opacity:.7;cursor:wait;
}
body.is-loading{cursor:progress}
body.is-loading .main{pointer-events:none}
.burger{
  display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;
}

@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid2,.profile-layout{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .topbar{
    display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
    position:fixed;top:0;left:0;right:0;
    height:calc(52px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 12px 0;
    background:#fff;border-bottom:1px solid var(--line);z-index:80;
    box-sizing:border-box;
  }
  .topbar-title{
    font-weight:700;font-size:13px;letter-spacing:.3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .topbar .burger-float{
    display:grid;place-items:center;
    position:static!important;top:auto;left:auto;
    flex-shrink:0;
  }
  .side{
    display:none;position:fixed;
    top:calc(52px + env(safe-area-inset-top, 0px));left:0;bottom:0;
    width:min(280px,86vw);height:auto;z-index:70;
  }
  .side.open{display:flex}
  .side-backdrop{
    display:block;position:fixed;
    inset:calc(52px + env(safe-area-inset-top, 0px)) 0 0 0;
    background:rgba(16,25,44,.45);z-index:65;
  }
  .side-backdrop[hidden]{display:none}
  body.menu-open{overflow:hidden}
  .main{padding:calc(66px + env(safe-area-inset-top, 0px)) 14px 40px}
  .head{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:16px}
  .head-left{align-items:center}
  .head h2{
    font-size:18px;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;
  }
  .head p{max-width:none;font-size:12.5px}
  .head .tools{width:100%;justify-content:flex-start}
  .head .tools .btn,.head .tools .btn.primary{justify-content:center}
  .form-row-3,.ff .two{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis-dept{grid-template-columns:repeat(2,1fr)}
  /* `.kpis-inst` et `.kpis-dept.kpis-inst` comptent deux classes : sans ces deux
     sélecteurs aussi spécifiques, la grille restait à 6 ou 7 colonnes dès qu'un
     dossier était suspendu, soit des cartes de 60 px où les libellés se
     lisaient à la verticale. */
  .kpis-inst,
  .kpis-dept.kpis-inst{grid-template-columns:repeat(2,1fr)}
  .two,.m-body .two{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .fcard .ft{font-size:13px}
  input[type=file]{max-width:100%}
  .formactions{justify-content:stretch}
  .formactions .btn{flex:1;justify-content:center}

  /* --- Tous les tableaux : première colonne figée au swipe ------------------
     Dix tableaux dépassent la largeur d'un téléphone (mesures à 430 px : liste
     des courriers 1080 px, utilisateurs 693, équipe du chef de département 645,
     équipe de section 642, équipe DAJ 604, structures 628, annuaire 556, et
     jusqu'à 483 px pour les tableaux de statistiques). Sans repère fixe, on ne
     sait plus quelle ligne on lit dès qu'on a fait défiler.
     Les deux conteneurs de défilement sont `.scroll` (listes) et `.pbody`
     (panneaux du tableau de bord et des statistiques) ; `main` et `body` sont en
     overflow visible, et les `overflow:hidden` de la chaîne — `.tablewrap`,
     `.panel` — sont au-dessus d'eux : le sticky se cale donc bien sur le bon
     conteneur.
     Le fond opaque exigé par `position:sticky` est pris en `background:inherit`
     sur un `<tr>` rendu blanc juste en dessous. Comme toutes les teintes de
     ligne (survol, retard, charge élevée, « vous ») sont déclarées sur le
     `<tr>`, la colonne figée les hérite au lieu de les masquer. Ne pas revenir à
     un `background:#fff` en dur : c'est ce qui coupait la bande de survol et de
     retard sur la première colonne.
     `position:relative` de `td.num-daj` (voir « bandeau état ») est écrasé ici ;
     son rail de couleur, peint en `box-shadow` inset, survit au sticky. */
  .scroll tbody tr,
  .pbody tbody tr{background:#fff}

  /* `thead th` porte déjà son propre fond opaque (#fafaf8) : seul le calage
     manque. */
  .scroll table thead th:first-child,
  .pbody table thead th:first-child{
    position:sticky;left:0;z-index:3;
  }
  /* `:not([colspan])` écarte la ligne « Aucune entrée », qui occupe toute la
     largeur du tableau et n'a rien à figer. */
  .scroll table tbody td:first-child:not([colspan]),
  .pbody table tbody td:first-child:not([colspan]){
    position:sticky;left:0;z-index:2;background:inherit;
  }

  /* --- Panneau « À traiter en priorité » : même repère fixe -----------------
     Ce n'est pas un tableau mais deux blocs flex ; `position:sticky` s'applique
     de la même façon à un enfant flex, et le conteneur de défilement est le
     `.prio-scroll` posé au Lot 7. Aucun markup à changer.
     Le rail de couleur d'état est déplacé de la ligne vers la cellule figée :
     peint sur la ligne, il défilerait hors de vue avec elle alors que le N° DAJ,
     lui, resterait en place.
     Le retrait de gauche passe lui aussi de la ligne à la cellule : laissé sur
     la ligne, il décalait le N° DAJ de 18 px au repos pour le ramener à 0 dès le
     premier défilement — la colonne figée sautait sous le doigt. */
  .prio .row{background:#fff;box-shadow:none;padding-left:0}
  .prio .prio-head{padding-left:0}
  .prio .prio-head .num,
  .prio .row .num{position:sticky;left:0;z-index:2;background:inherit;padding-left:16px}
  .prio .row .num{box-shadow: inset 6px 0 0 0 var(--etat-color, #1f5f8b)}

  /* --- Tableau Équipe : rendre le défilement horizontal réel ----------------
     `table-layout:fixed` + largeurs en pourcentage empêchaient la table de
     dépasser son conteneur : l'overflow-x:auto du `.pbody` ne se déclenchait
     jamais et le texte se peignait par-dessus la colonne voisine (jusqu'à 90 px
     de débordement mesurés à 430 px). En layout auto avec un plancher de
     largeur, la table dépasse vraiment et le conteneur défile. */
  .agent-load-wide{table-layout:auto;min-width:640px}
  .agent-load-wide th:nth-child(1),.agent-load-wide td:nth-child(1),
  .agent-load-wide th:nth-child(2),.agent-load-wide td:nth-child(2),
  .agent-load-wide th:nth-child(3),.agent-load-wide td:nth-child(3),
  .agent-load-wide th.num,.agent-load-wide td.num{width:auto}
}

/* ---- Maquette: largeur, scrollbar, sans ombres ---- */
:root{
  --shadow:none;
  --shadow-lg:none;
}
.side,.nav a.active,.btn,.btn:hover,.btn.primary,.kpi,.kpi:hover,.panel,.filters,.tablewrap,
.fcard,.modal,.login-card,.toast,.amenu,.burger-float,.badge,.tabs .btn.primary{
  box-shadow:none!important;
}
.nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(200,207,221,.35) transparent;
}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.nav::-webkit-scrollbar-thumb{
  background:rgba(200,207,221,.28);
  border-radius:20px;
  border:1px solid transparent;
  background-clip:padding-box;
}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(200,207,221,.45)}
.nav a.nav-cta{
  margin-top:6px;
  border:0;
  font-weight:600;
}
.nav a.nav-cta:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.nav a.nav-cta.active{
  background:var(--accent);
  color:#fff!important;
}
.nav a.nav-cta.active:hover{
  background:var(--accent-ink);
}
.formgrid > .full,.formgrid > .party-grid{grid-column:1 / -1;width:100%}
.party-grid{width:100%}
.fcard{box-shadow:none}

/* ========== Error pages ========== */
.error-body{
  min-height:100vh;display:grid;place-items:center;padding:24px 16px;
}
.error-shell{width:100%;max-width:520px;margin:0 auto}
.error-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px 24px;
}
.error-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.error-logo{width:42px;height:42px;object-fit:contain;border-radius:8px}
.error-app{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em}
.error-sub{font-size:12px;color:var(--muted);margin-top:2px}
.error-code{
  font-family:var(--display);font-size:42px;font-weight:700;line-height:1;
  color:rgba(31,95,139,.18);margin:0 0 8px;
}
.error-title{
  font-family:var(--display);font-size:26px;font-weight:700;line-height:1.2;
  margin:0 0 12px;letter-spacing:-.02em;
}
.error-message{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 10px}
.error-hint{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 22px}
.error-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){
  .error-title{font-size:22px}
  .error-actions .btn{flex:1;justify-content:center}
}


/* ========== Imputation progressive (form main + pickers) ========== */
.impute-card{max-width:1100px}
.impute-form{margin:0}
.impute-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.impute-native{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  border:0!important;
}
.impute-field,
.impute-col,
.impute-dest,
.pick-list,
.pick-row,
.impute-filter{box-sizing:border-box}

/* Actif */
.impute-field:not(.is-locked){
  opacity:1;pointer-events:auto;filter:none;position:relative;
  padding:14px 14px 12px;border-radius:12px;background:#fff;
  border:1.5px solid #c5d8e6;box-shadow:0 1px 0 rgba(31,95,139,.04);
  min-width:0;overflow:hidden;
}
.impute-field:not(.is-locked) > label:first-child,
.impute-field:not(.is-locked) .impute-col-head label{
  color:var(--accent-ink,#123c5a);
}
.impute-field:not(.is-locked) select,
.impute-field:not(.is-locked) input[type="date"],
.impute-field:not(.is-locked) input[type="search"]{
  background:#fff;border-color:#9bb4c9;color:var(--ink);
}

/* Cascade : pas de double cadre */
#wrapCascade.impute-field:not(.is-locked){padding:12px;overflow:visible}
#wrapCascade .impute-dest{min-width:0;width:100%}
#wrapCascade .impute-col:not(.is-locked){
  opacity:1;pointer-events:auto;padding:10px;border-radius:10px;
  background:#f7fafc;border:1px solid #d5e2ec;min-width:0;overflow:hidden;
}
#wrapCascade .impute-col:not(.is-locked) .impute-col-head h4{color:var(--accent-ink,#123c5a)}
#wrapCascade .impute-col:not(.is-locked) .impute-filter{
  background:#fff;border-color:#9bb4c9;color:var(--ink);
}

/* Verrouillé */
.impute-field.is-locked,
.impute-col.is-locked{
  opacity:1;pointer-events:none;filter:none;position:relative;
  padding:14px 14px 12px;border-radius:12px;background:#eef1f4;
  border:1.5px dashed #c3ccd6;box-shadow:none;min-width:0;overflow:hidden;
}
.impute-field.is-locked::after{
  content:"Verrouillé — complétez l’étape précédente";
  display:inline-block;margin-top:8px;padding:3px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:#6b7c8c;background:#dde3e9;
}
.impute-col.is-locked::before{
  content:"En attente";align-self:flex-start;margin-bottom:2px;padding:2px 7px;
  border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#6b7c8c;background:#dde3e9;
}
.impute-field.is-locked > label,
.impute-field.is-locked .impute-col-head label,
.impute-field.is-locked .impute-col-head h4,
.impute-col.is-locked .impute-col-head h4,
.impute-field.is-locked .hint,
.impute-col.is-locked .hint{color:#8a97a5!important}
.impute-field.is-locked select,
.impute-field.is-locked input,
.impute-col.is-locked .impute-filter,
.impute-col.is-locked .pick-list{
  background:#e4e9ee!important;border-color:#c3ccd6!important;
  color:#9aa6b2!important;box-shadow:none!important;
}
.impute-field.is-locked .pick-list,
.impute-col.is-locked .pick-list{
  min-height:72px;max-height:120px;background:#e4e9ee;
  border:1px solid #d0d7df;border-radius:8px;
}
.impute-field.is-locked .pick-empty,
.impute-col.is-locked .pick-empty{color:#9aa6b2}

.impute-self-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;
}
.impute-self-row:not(.is-locked){background:rgba(31,95,139,.06);border:1.5px solid #c5d8e6}
.impute-self-row.is-locked{background:#eef1f4;border:1.5px dashed #c3ccd6}

/* Titre puis filtre pleine largeur */
.impute-col-head{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:0 0 6px;min-width:0;
}
.impute-col-head h4,
.impute-col-head label{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);flex:none;
}
.impute-col-head label{font-size:13px;color:var(--ink);letter-spacing:.02em}
.impute-filter{
  width:100%;min-width:0;max-width:none;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px;
  background:#fff;color:var(--ink);
}
.impute-dest{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.05fr) minmax(0,1.25fr);
  gap:12px;align-items:stretch;min-height:280px;width:100%;min-width:0;
}
.impute-col{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;min-height:0;border-radius:12px;
}
.impute-col-wide{background:#fff}
#cascadeHint{margin-top:10px;line-height:1.4}
.pick-list{
  flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px;
  min-height:200px;max-height:min(42vh,380px);padding:2px;min-width:0;
}
.pick-empty{
  margin:auto;padding:24px 12px;text-align:center;
  color:var(--muted);font-size:13.5px;line-height:1.4;
}
.pick-row{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;background:#fff;border-radius:10px;
  padding:9px 10px;color:var(--ink);min-width:0;
  transition:border-color .1s, background .1s, box-shadow .1s;
}
.pick-row:hover{border-color:var(--line);box-shadow:0 2px 8px rgba(22,35,61,.05)}
.pick-row.is-selected{border-color:var(--accent);background:rgba(31,95,139,.07)}
.pick-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.pick-code{
  font-weight:700;font-size:13px;color:var(--accent-ink);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick-label{
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pick-row-person .pick-label{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  -webkit-line-clamp:unset;-webkit-box-orient:unset;
}
.pick-chef-badge{flex-shrink:0;vertical-align:middle}
.pick-meta{
  font-size:11.5px;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:inline-grid;place-items:center;
  background:linear-gradient(145deg,#2a7ab0,#123c5a);
  color:#fff;font-size:11px;font-weight:700;
}
.pick-check{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
  flex-shrink:0;position:relative;
}
.pick-row.is-selected .pick-check{border-color:var(--accent);background:var(--accent)}
.pick-row.is-selected .pick-check::after{
  content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

@media (max-width:1100px){
  .impute-dest{grid-template-columns:1fr;min-height:0}
  .pick-list{max-height:220px;min-height:140px}
  .impute-card{max-width:100%}
  .impute-field.is-locked::after{font-size:10px}
}