:root{
  /* ===== palette neutre (sobre) ===== */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --border:#E3E6EA; --border-2:#EDEFF2;
  --ink:#1F2530; --ink-2:#4A5361; --muted:#8B94A1;
  /* charte BND : bleu primaire + orange secondaire (échantillonnés du logo) */
  --accent:#247BC0; --accent-d:#1B5E93; --accent-weak:#E6F1FA;
  --brand-orange:#F58126; --brand-orange-weak:#FCEEE0;
  --ok:#4E7A61; --ok-weak:#E9F1EC;
  --warn:#8E7638; --warn-weak:#F3EEE1;
  --danger:#9E4A40; --danger-weak:#F3E8E6;
  --info:#4A6076; --info-weak:#EAEEF2;
  /* catégories — teintes désaturées */
  --c-charge:#8A7A57;   --c-charge-w:#F1EFE8;
  --c-projet:#5C7B6B;   --c-projet-w:#E9EFEB;
  --c-invest:#556E88;   --c-invest-w:#E9EEF3;
  --c-stock:#3E7C89;    --c-stock-w:#E4EFF1;
  --c-div:#7C6A83;      --c-div-w:#EFEBF1;
  --radius:10px; --shadow:0 1px 2px rgba(28,38,54,.06),0 1px 3px rgba(28,38,54,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);margin:0 0 .5em}
h1{font-size:23px;font-weight:800}h2{font-size:17px;font-weight:700}h3{font-size:14px;font-weight:700;color:var(--ink-2)}

/* layout — coquille en carte flottante (modèle Floating Slim) */
.app{display:flex;height:calc(100vh - 28px);margin:14px;border-radius:18px;background:var(--surface);box-shadow:0 16px 46px -18px rgba(17,23,34,.30), 0 0 0 1px var(--border);overflow:hidden}
.sidebar{width:242px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex:0 0 auto;height:100%;overflow-y:auto;transition:width .18s ease}
.sidebar .brand{height:58px;padding:0 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);overflow:hidden;flex:0 0 auto}
.sidebar .brand img{width:84px;display:block;flex:0 0 auto}
.sidebar .brand .code{display:none}
/* bouton de réduction de la barre (dans la barre du haut) */
.collapse-btn{flex:0 0 auto;width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink-2);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.collapse-btn:hover{border-color:var(--accent);color:var(--accent-d)}
/* état réduit : rail d'icônes seul (libellés masqués), persisté via localStorage */
html.nav-collapsed .sidebar{width:64px}
html.nav-collapsed .sidebar .brand{padding:0;justify-content:center}
html.nav-collapsed .sidebar .brand img{width:34px}
html.nav-collapsed .sidebar .brand .brand-name{display:none}
html.nav-collapsed .nav a,html.nav-collapsed .nav-soon{justify-content:center;padding:9px 0;font-size:0;gap:0}
html.nav-collapsed .nav a .ico,html.nav-collapsed .nav-soon .ico{font-size:16px;opacity:.9}
html.nav-collapsed .nav .sep{font-size:0;padding:6px 0}
html.nav-collapsed .nav a .badge,html.nav-collapsed .soon-tag{display:none}
.nav{padding:12px 10px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-weight:600;margin-bottom:1px;font-size:13.5px}
.nav a:hover{background:var(--bg);text-decoration:none}
.nav a.active{background:var(--accent-weak);color:var(--accent-d);position:relative}
.nav a.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-orange)}
.ico{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav a .ico,.nav-soon .ico{opacity:.9}
.nav a .badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:700}
.nav .sep{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:14px 12px 6px;font-weight:700}
/* mention « bientôt » : ce n'est pas un lien, on ne fait pas croire qu'on peut cliquer */
.nav-soon{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--muted);font-size:13px;font-weight:600;cursor:default}
.nav-soon .ico{width:18px;text-align:center;opacity:.6}
.soon-tag{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 5px}

.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;background:var(--bg)}
/* position:relative pour que le z-index prenne effet : la barre du haut (et son
   menu déroulant) doit passer au-dessus du contenu, y compris des titres figés
   (.pagehead sticky, z-index:20). */
.topbar{height:58px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 26px;gap:16px;flex:0 0 auto;position:relative;z-index:40}
.topbar .title{font-weight:700;color:var(--ink-2);font-family:var(--font);font-size:15px}
.topbar .spacer{flex:1}
.who{position:relative;display:flex;align-items:center}
.who-btn{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:10px;padding:4px 8px;cursor:pointer;font:inherit;color:inherit}
.who-btn:hover{background:var(--bg);border-color:var(--border)}
.who-btn[aria-expanded=true]{background:var(--bg);border-color:var(--border)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.who .meta{line-height:1.2;text-align:left}.who .meta .n{font-weight:700;font-size:13px}.who .meta .r{font-size:11px;color:var(--muted)}
.who-btn .caret{width:16px;height:16px;color:var(--muted)}
.usermenu,.helpmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);padding:6px;z-index:60}
.usermenu .um-head,.helpmenu .um-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;font-weight:800;font-size:13px}
.usermenu .um-head .n{font-weight:800;font-size:13px}.usermenu .um-head .r{font-size:11px;color:var(--muted);margin-top:1px}
.usermenu .um-item,.helpmenu .um-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.usermenu .um-item:hover,.helpmenu .um-item:hover{background:var(--bg)}
.usermenu .um-item .ico,.helpmenu .um-item .ico{width:16px;height:16px;color:var(--muted)}
/* Bouton d'aide (?) */
.help{position:relative;display:flex;align-items:center}
.help-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer}
.help-btn:hover,.help-btn[aria-expanded=true]{background:var(--bg);color:var(--ink-2)}
.help-btn .ico{width:18px;height:18px}
@media(max-width:560px){.who .meta{display:none}}

/* Aide en ligne : rendu des documents markdown */
.doc{font-size:14px;line-height:1.62;color:var(--ink-2);max-width:820px}
.doc h1{font-size:24px;letter-spacing:-.02em;color:var(--ink-strong);margin:0 0 4px}
.doc h2{font-size:18px;color:var(--ink-strong);margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.doc h3{font-size:15px;color:var(--ink-strong);margin:20px 0 8px}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 12px;padding-left:22px}
.doc li{margin:3px 0}
.doc a{color:var(--accent-d);text-decoration:underline}
.doc strong{color:var(--ink);font-weight:700}
.doc code{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:12.5px}
.doc pre{background:var(--surface-2, var(--bg));border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:0 0 16px;line-height:1.45}
.doc pre code{background:none;border:0;padding:0;font-size:12.5px;white-space:pre;color:var(--ink-2)}
.doc blockquote{margin:0 0 14px;padding:10px 14px;background:var(--accent-weak);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;color:var(--ink-2)}
.doc blockquote p:last-child{margin:0}
.doc hr{border:0;border-top:1px solid var(--border);margin:22px 0}
.doc table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:13px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--bg);font-weight:700;color:var(--ink);white-space:nowrap}
.content{padding:24px 26px;width:100%;flex:1;overflow-y:auto}

/* cards / stats */
.grid{display:grid;gap:16px}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.c2{grid-template-columns:1fr 1fr}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card .hd h2,.card .hd h3{margin:0}
.card .bd{padding:16px 18px}
.stat{padding:16px 18px}
.stat .lbl{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:26px;font-weight:800;color:var(--ink);font-family:var(--font);margin-top:3px}
.stat .sub{font-size:12px;color:var(--muted);margin-top:2px}
.stat.b{border-left:3px solid var(--accent)}.stat.o{border-left:3px solid var(--warn)}
.stat.r{border-left:3px solid var(--danger)}.stat.v{border-left:3px solid var(--ok)}

/* tables */
table{width:100%;border-collapse:collapse}
th{background:var(--surface-2);color:var(--ink-2);text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:9px 12px;border-bottom:1px solid var(--border)}
td{padding:10px 12px;border-bottom:1px solid var(--border-2);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.mono{font-variant-numeric:tabular-nums;font-weight:600}.right{text-align:right}

/* badges statut (neutres) */
.badge-s{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.s-a_instruire{background:var(--warn-weak);color:var(--warn);border-color:#e6dcc2}
.s-en_validation{background:var(--warn-weak);color:var(--warn);border-color:#e6dcc2}
.s-a_payer{background:var(--info-weak);color:var(--info);border-color:#d5dee6}
.s-paye{background:var(--ok-weak);color:var(--ok);border-color:#cfe3d7}
.s-cloturee{background:#eceef1;color:var(--ink-2);border-color:var(--border)}
.s-refusee{background:var(--danger-weak);color:var(--danger);border-color:#e6cfcb}
.s-po_cree{background:var(--ok-weak);color:var(--ok);border-color:#cfe3d7}

/* pills catégorie (désaturées) */
.pill{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;background:#eef0f2;color:var(--ink-2);border:1px solid var(--border)}
.pill.charge{background:var(--c-charge-w);color:var(--c-charge);border-color:#e4ddcd}
.pill.projet{background:var(--c-projet-w);color:var(--c-projet);border-color:#d3e0d8}
.pill.investissement{background:var(--c-invest-w);color:var(--c-invest);border-color:#d3dde7}
.pill.stock{background:var(--c-stock-w);color:var(--c-stock);border-color:#cfe1e4}
.pill.dividende{background:var(--c-div-w);color:var(--c-div);border-color:#ddd2e0}
.cat-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:middle}
.cat-dot.charge{background:var(--c-charge)}.cat-dot.projet{background:var(--c-projet)}
.cat-dot.investissement{background:var(--c-invest)}.cat-dot.stock{background:var(--c-stock)}.cat-dot.dividende{background:var(--c-div)}
.leftbar.charge{border-left:3px solid var(--c-charge)}.leftbar.projet{border-left:3px solid var(--c-projet)}
.leftbar.investissement{border-left:3px solid var(--c-invest)}.leftbar.stock{border-left:3px solid var(--c-stock)}.leftbar.dividende{border-left:3px solid var(--c-div)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;border:1px solid transparent;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:.12s}
.btn:hover{text-decoration:none;filter:brightness(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-orange{background:var(--accent);color:#fff}
.btn-green{background:var(--ok);color:#fff}
.btn-danger{background:#fff;color:var(--danger);border-color:#e0c4bf}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--border)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* forms */
.form-row{margin-bottom:15px}
label.fl{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink-2)}
label.fl .req{color:var(--danger)}
input[type=text],input[type=number],input[type=date],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
textarea{min-height:76px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* misc */
.flash{padding:11px 15px;border-radius:8px;margin-bottom:18px;font-weight:600;font-size:13px}
.flash.ok{background:var(--ok-weak);color:var(--ok);border:1px solid #cfe3d7}
.flash.err{background:var(--danger-weak);color:var(--danger);border:1px solid #e6cfcb}
.flash.info{background:var(--info-weak);color:var(--info);border:1px solid #d5dee6}
.muted{color:var(--muted)}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.tl{list-style:none;padding:0;margin:0}
.tl li{position:relative;padding:0 0 15px 24px;border-left:2px solid var(--border);margin-left:6px}
.tl li:last-child{border-left-color:transparent}
.tl li .dot{position:absolute;left:-8px;top:1px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.tl li.done .dot{background:var(--ok);border-color:var(--ok)}
.tl li.reject .dot{background:var(--danger);border-color:var(--danger)}
.tl li .t{font-weight:700;font-size:13px}.tl li .m{font-size:12px;color:var(--muted)}
.kv{display:grid;grid-template-columns:168px 1fr;gap:7px 14px;font-size:13px}
.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0;font-weight:600}
.steps{display:flex;gap:7px;flex-wrap:wrap}
.steps .st{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:700;border:1px solid var(--border);background:#fff;color:var(--ink-2)}
.steps .st.done{background:var(--ok-weak);color:var(--ok);border-color:#cfe3d7}
.steps .st.cur{background:var(--warn-weak);color:var(--warn);border-color:#e6dcc2}
.steps .st.rej{background:var(--danger-weak);color:var(--danger);border-color:#e6cfcb}
.empty{text-align:center;padding:38px 20px;color:var(--muted)}.empty .big{font-size:32px;margin-bottom:8px}
.note{background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);padding:10px 14px;border-radius:8px;font-size:12px;margin-top:14px}
.proto-tag{position:fixed;right:-34px;top:16px;transform:rotate(38deg);background:var(--ink-2);color:#fff;font-size:10px;font-weight:800;padding:4px 40px;letter-spacing:.1em;z-index:50;box-shadow:var(--shadow)}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(28,38,54,.10);width:420px;max-width:92vw;overflow:hidden;border:1px solid var(--border)}
.login-card .top{padding:26px 30px 18px;text-align:center;border-bottom:1px solid var(--border)}
.login-card .top img{width:140px}
.login-card .top .code{color:var(--muted);font-weight:800;letter-spacing:.16em;font-size:11px;margin-top:8px}
.login-card .bd{padding:20px 30px 26px}
.login-card p.sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 16px}
.userpick{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow:auto}
.userpick button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;text-align:left;font-family:inherit}
.userpick button:hover{border-color:var(--accent);background:var(--accent-weak)}
.userpick .n{font-weight:700;font-size:13px}.userpick .r{font-size:11px;color:var(--muted)}
/* ═══════════════════════════════════════════════════════════════════════════
   Langage visuel « instrument métier » — registre sobre institutionnel/financier
   Composants réutilisables : montant hiérarchisé, chips de filtre, listrow.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ink-strong:#111722;      /* encre des chiffres — l'information reine */
  /* typo « produit » en polices système (aucune dépendance, D-002) */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --accent2:#F58126;         /* orange de marque BND (secondaire) */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --shadow-card:0 1px 2px rgba(17,23,34,.05), 0 4px 14px -6px rgba(17,23,34,.10);
}

/* Montant : toujours tabulaire, hiérarchisé, en encre profonde */
.amount{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink-strong);white-space:nowrap;letter-spacing:-.01em}
.amount .cur{font-size:.7em;font-weight:700;color:var(--muted);margin-left:4px;letter-spacing:.02em}
.amount.lg{font-size:19px}
.amount.sm{font-size:13px;font-weight:700}

/* En-tête de page : titre + compteur + action, plus d'air */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead .h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pagehead h1{margin:2px 0 0;font-size:24px;letter-spacing:-.02em}
/* Titre de page figé : reste en tête pendant le défilement du contenu (le conteneur
   qui défile est .content). Un fond opaque masque le contenu qui glisse dessous et
   une fine ligne le sépare. Réservé aux titres directs de .content — jamais aux
   .between imbriqués dans une carte. */
.content>.pagehead,.content>.between.stick{position:sticky;top:0;z-index:20;background:var(--bg);
  padding-top:2px;padding-bottom:14px;margin-bottom:16px;box-shadow:0 1px 0 var(--border)}
/* Le conteneur .content a un padding vertical : sans ça, le contenu qui défile
   apparaîtrait dans cette bande au-dessus du titre figé. Ce pseudo-élément peint
   le fond au-dessus du titre pour la masquer, quelle que soit la façon dont le
   navigateur résout l'ancrage sticky. */
.content>.pagehead::before,.content>.between.stick::before{content:"";position:absolute;
  left:0;right:0;bottom:100%;height:28px;background:var(--bg)}

/* Chips de filtre : exploiter les filtres plutôt qu'une page par état */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--border);
  border-radius:999px;background:#fff;color:var(--ink-2);font-weight:700;font-size:12.5px;white-space:nowrap;transition:.12s;cursor:pointer}
.chip:hover{border-color:var(--accent);text-decoration:none;color:var(--accent-d)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .n{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--accent-weak);color:var(--accent-d)}
.chip.on .n{background:rgba(255,255,255,.22);color:#fff}
.chips .sp{flex:1}
.chips form{display:flex}
.chips .search{padding:7px 12px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;width:200px;max-width:46vw}

/* Conteneur des dépenses (tableau ou cartes) */
.listcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}

/* Vue tableau — registre institutionnel : en-têtes, chiffres alignés, pas de pastille */
.tbl-exp td{padding:12px 14px;vertical-align:middle}
.tbl-exp .obj{font-weight:700;color:var(--ink)}
.tbl-exp .obj:hover{color:var(--accent-d)}
.tbl-exp .ref{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.tbl-exp tbody tr:hover{background:var(--surface-2)}

/* Catégorie & état en TEXTE — couleur typographique, sans badge ni pastille */
.cat-txt{font-weight:700;font-size:12.5px;color:var(--ink-2)}
.cat-txt.charge{color:var(--c-charge)}.cat-txt.projet{color:var(--c-projet)}
.cat-txt.investissement{color:var(--c-invest)}.cat-txt.stock{color:var(--c-stock)}.cat-txt.dividende{color:var(--c-div)}
.st-txt{font-size:12px;font-weight:700;color:var(--ink-2)}
.st-txt.a_instruire,.st-txt.en_validation{color:var(--warn)}
.st-txt.a_payer{color:var(--info)}.st-txt.paye,.st-txt.cloturee{color:var(--ok)}
.st-txt.refusee{color:var(--danger)}
.conf-txt{font-size:11.5px;font-weight:700}.conf-txt.no{color:var(--danger)}.conf-txt.ok{color:var(--ok)}
.age-txt{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--muted);white-space:nowrap}
.age-txt.late{color:var(--danger)}.age-txt.soon{color:var(--warn)}

/* Vue cartes — sobre, sans filet coloré */
.exp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.exp-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:16px 18px;text-decoration:none;color:inherit}
.exp-card:hover{border-color:var(--accent);text-decoration:none}
.exp-card .ec-obj{font-weight:700;font-size:15px;color:var(--ink)}
.exp-card .ec-ref{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.exp-card .ec-amt{margin:12px 0 10px}
.exp-card .ec-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--border-2);padding-top:10px}
/* Filtres d'ÉTAT en onglets — visuellement distincts des facettes de catégorie */
.tabbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:14px}
.tabs{display:flex;flex-wrap:wrap;gap:2px}
.tab{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;font-weight:700;font-size:13px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;border-radius:6px 6px 0 0}
.tab:hover{color:var(--accent-d);text-decoration:none;background:var(--surface-2)}
.tab.on{color:var(--accent-d);border-bottom-color:var(--accent)}
.tab .n{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--accent-weak);color:var(--accent-d)}
.tab.on .n{background:var(--accent);color:#fff}
/* bascule de vue tableau / kanban */
.seg2{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:6px;flex:0 0 auto}
.seg2 a{padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff}
.seg2 a:hover{text-decoration:none;color:var(--accent-d)}
.seg2 a.on{background:var(--accent);color:#fff}
.seg2 a+a{border-left:1px solid var(--border)}
/* rangée de facettes (catégorie) */
.facets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.facet-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Barre d'outils sur UNE seule ligne : recherche · État · Catégorie (défilable) · vue */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-bottom:16px}
.toolbar .searchf{flex:0 0 auto}
.searchf .search{width:190px;max-width:44vw;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px}
.toolbar .msel{flex:0 0 auto}
.toolbar>.facet-lbl{flex:0 0 auto;white-space:nowrap}
/* seules les facettes catégorie défilent si trop nombreuses — le menu État
   (et son panneau déroulant) reste hors de tout conteneur à overflow */
.cat-scroll{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{height:0}
.toolbar .chip{flex:0 0 auto;padding:6px 12px}
.toolbar .seg2{flex:0 0 auto;margin:0}
.facet-sep{width:1px;height:22px;background:var(--border);margin:0 4px}

/* État en menu déroulant à cases (multi-sélection, registre ERP) */
.msel{position:relative;display:inline-flex}
.msel-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:700;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.msel-btn:hover{border-color:var(--accent);color:var(--accent-d)}
.msel-btn .facet-lbl{margin:0}
.msel-caret{font-size:10px;color:var(--muted)}
.msel-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-card);padding:8px;min-width:230px}
.msel-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.msel-opt:hover{background:var(--surface-2)}
.msel-opt input{width:auto;margin:0}
.msel-opt span{flex:1}
.msel-n{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:0 8px}
.msel-foot{border-top:1px solid var(--border-2);margin-top:6px;padding-top:8px;text-align:right}

/* En-têtes de table triables (façon Jira) */
th.sort{cursor:pointer;user-select:none}
th.sort a{color:inherit;display:inline-flex;align-items:center;gap:5px}
th.sort a:hover{color:var(--accent-d);text-decoration:none}
th.sort:hover{background:var(--border-2)}
th.sort.right{text-align:right}
th.sort.right a{flex-direction:row-reverse}
th .arr{font-size:8px;color:var(--accent)}
/* indice de tri révélé au survol de l'en-tête (affordance) */
th.sort .arr-hint{font-size:9px;color:var(--muted);opacity:0;transition:opacity .12s}
th.sort:hover .arr-hint{opacity:.75}

/* Vue Kanban — colonnes par étape du circuit */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.kan-col{flex:0 0 288px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px}
.kan-col .kh{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:4px 6px 10px}
.kan-col .kh .n{background:#fff;border:1px solid var(--border);border-radius:999px;padding:0 8px;font-size:11px;color:var(--ink-2)}
.kan-card{display:block;background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.kan-card:last-child{margin-bottom:0}
.kan-card:hover{border-color:var(--accent);text-decoration:none}
.kan-card .kc-obj{font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.3}
.kan-card .kc-ref{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:3px}
.kan-card .kc-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}
.kan-card .kc-meta{font-size:11.5px;color:var(--muted);margin-top:6px}
.kan-empty{font-size:12px;color:var(--muted);padding:8px 6px}

@media(max-width:820px){.chips .search{width:100%;max-width:none}}

/* ═══════════ Tableau de bord — tuiles KPI & cartes aérées (modèle validé) ═══════════ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);padding:15px 16px;min-height:130px;display:flex;flex-direction:column}
.kpi .k-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kpi .k-lbl{font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.25;min-height:2.5em}
.kpi .k-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex:0 0 auto}
.kpi .k-ico.a{background:var(--accent)}.kpi .k-ico.w{background:var(--warn)}.kpi .k-ico.o{background:var(--ok)}.kpi .k-ico.d{background:var(--danger)}
.kpi .k-ico .ico{width:20px;height:20px}
.kpi .k-val{font-size:24px;font-weight:800;color:var(--ink-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .k-val.sm{font-size:19px}
.kpi .k-sub{margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted)}
.kpi .k-sub b{color:var(--ink);font-weight:700}
/* contenu hors tuiles : deux colonnes asymétriques (gauche large, droite étroite) */
.dboard{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.dcol{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:900px){.dboard{grid-template-columns:1fr}}

/* cartes du tableau de bord : plus d'air, coins doux */
.dcard{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);padding:22px;display:flex;flex-direction:column}
.dcard .dh{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dcard .dh h2{margin:0;font-size:18px}
.dcard .dh .sp{flex:1}
/* liste type « feed » : entrées séparées par un filet fin */
.feed{display:flex;flex-direction:column}
.feed .fi{display:block;text-decoration:none;color:inherit;padding:14px 0;border-top:1px solid var(--border-2)}
.feed .fi:first-child{border-top:none;padding-top:8px}
.feed a.fi:hover .fi-t{color:var(--accent-d)}
.fi-t{font-weight:700;font-size:14.5px;color:var(--ink)}
.fi-m{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.fi-r{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.dfoot{display:flex;gap:10px;margin-top:18px}
.dfoot .btn{flex:1;justify-content:center}
.dempty{text-align:center;color:var(--muted);padding:24px 12px}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}}

/* ═══════════ Page de connexion — split-screen (modèle PJ) ═══════════ */
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh;background:#fff}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-inner{width:100%;max-width:400px}
.auth-logo{width:150px;display:block;margin-bottom:26px}
.auth-h{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.auth-sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 24px}
.auth-inner .flash{margin-bottom:16px}
.auth-inner label.fl{margin-bottom:7px}
.auth-input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.auth-row{margin:14px 0 20px}
.auth-btn{width:100%;justify-content:center;padding:12px;font-size:14px}
.auth-art{position:relative;overflow:hidden;background:radial-gradient(120% 85% at 12% 94%, rgba(245,129,38,.32), transparent 52%), linear-gradient(140deg,var(--accent) 0%,#1c5f95 55%,#10233a 100%)}
.auth-art::before{content:"";position:absolute;inset:-20% -10% auto auto;width:75%;height:130%;
  background:radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);transform:rotate(18deg)}
.auth-art .art-cap{position:absolute;left:44px;bottom:40px;right:44px;color:#fff}
.auth-art .art-cap .t{font-family:var(--font);font-weight:800;font-size:22px;letter-spacing:-.01em}
.auth-art .art-cap .s{opacity:.8;font-size:13.5px;margin-top:6px;line-height:1.5}
@media(max-width:820px){.auth{grid-template-columns:1fr}.auth-art{display:none}}

/* Zone de marque de la barre latérale : logo + nom du produit */
.sidebar .brand .brand-name{font-family:var(--font);font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em;margin:0;line-height:1;white-space:nowrap}

@media print{.sidebar,.topbar,.proto-tag,.noprint{display:none!important}.main{margin:0}.content{max-width:none;padding:0}}

/* ===== écrans étroits (téléphone, validation en mobilité) =====
   Volontairement sans JavaScript (D-002) : la barre latérale devient un bandeau
   au-dessus du contenu plutôt qu'un tiroir repliable à câbler et à maintenir. */
@media (max-width:820px){
  .app{display:block;margin:0;border-radius:0;height:auto;overflow:visible;box-shadow:none}
  .sidebar{position:static;width:auto;height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--border)}
  .sidebar .brand{padding:14px 16px}
  .nav{display:flex;flex-wrap:wrap;gap:2px;padding:8px}
  .nav .sep{width:100%;padding:8px 8px 2px}
  .nav a,.nav-soon{flex:0 0 auto}
  .main{margin-left:0;height:auto}
  .content{padding:16px 14px;overflow:visible}
  .topbar{padding:0 14px;position:static}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .catseg{grid-template-columns:1fr 1fr}
  .proto-tag{display:none}
  /* tables de données : défiler dans leur carte plutôt qu'écraser les colonnes */
  .card .bd{overflow-x:auto}
  .content table{min-width:560px}
}

/* ===== catégories : sélecteur ===== */
.catseg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.catseg label{border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;background:#fff;transition:.12s}
.catseg label .cn{font-weight:800;font-size:13px;font-family:var(--font);color:var(--ink)}
.catseg label .cd{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}
.catseg input{display:none}
.catseg label.charge.on{border-color:var(--c-charge);background:var(--c-charge-w)}
.catseg label.projet.on{border-color:var(--c-projet);background:var(--c-projet-w)}
.catseg label.investissement.on{border-color:var(--c-invest);background:var(--c-invest-w)}
.catseg label.dividende.on{border-color:var(--c-div);background:var(--c-div-w)}
/* La destination est une question unique, pas une taxonomie de couleurs : surbrillance neutre à l'accent. */
.catseg label.dest.on{border-color:var(--accent);background:var(--accent-weak)}
.catseg label.disabled{opacity:.45;cursor:not-allowed}

/* canal chips */
.canal-pick{display:flex;gap:8px;flex-wrap:wrap}
.canal-pick label{border:1px solid var(--border);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:13px;background:#fff}
.canal-pick input{display:none}
.canal-pick label.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* gauges */
.gauge{height:8px;border-radius:5px;background:#e9ebee;overflow:hidden;margin:6px 0}
.gauge .fill{height:100%;border-radius:5px;background:var(--ok)}
.gauge .fill.warn{background:var(--warn)}.gauge .fill.over{background:var(--danger)}
.bl-row{padding:11px 0;border-bottom:1px solid var(--border-2)}.bl-row:last-child{border-bottom:none}
.bl-row .top{display:flex;justify-content:space-between;font-size:13px}
.bl-row .top .lib{font-weight:700}.bl-row .top .num{font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* articles */
.artline{display:grid;grid-template-columns:1fr 66px 120px 160px 26px;gap:8px;align-items:center;margin-bottom:8px}
.artline .rm{cursor:pointer;color:var(--danger);font-weight:800;text-align:center}
.arthead{display:grid;grid-template-columns:1fr 66px 120px 160px 26px;gap:8px;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.chan-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;background:#eef0f2;color:var(--ink-2);border:1px solid var(--border)}

/* bannette « À traiter » : badge du type d'action attendu */
.act-badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.act-badge.instruire{background:var(--warn-weak);color:var(--warn);border-color:#e6dcc2}
.act-badge.valider{background:var(--info-weak);color:var(--info);border-color:#d5dee6}
.act-badge.payer{background:var(--ok-weak);color:var(--ok);border-color:#cfe3d7}

/* barre d'action épinglée en tête de fiche : ce que l'utilisateur doit faire */
.actionbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--accent-weak);border:1px solid #d5dee6;border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:13px 18px;margin-bottom:16px}
.actionbar .ab-t{font-weight:800;font-family:var(--font);color:var(--accent-d);font-size:15px}
.actionbar .ab-s{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.actionbar .btn{white-space:nowrap;flex:0 0 auto}
/* l'ancre ne doit pas disparaître sous la barre supérieure collante */
[id^="act-"]{scroll-margin-top:16px}
@media(max-width:820px){.actionbar{flex-direction:column;align-items:stretch}.actionbar .btn{width:100%;justify-content:center}}

/* Fiche détail : poste de travail — surface large à gauche, rail à droite */
.detailgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.detailgrid .rail{display:flex;flex-direction:column}
/* la conformité reste visible (colonne vertébrale) pendant qu'on remplit à gauche */
/* z-index : la carte reste au-dessus de l'Historique qui la suit dans la colonne.
   Sans ça, quand la colonne de gauche est plus haute (fiche instruite + carte de
   modification), l'Historique remonte et se superpose à la carte épinglée. */
.conf-sticky{position:sticky;top:12px;z-index:2}
@media(max-width:900px){.detailgrid{grid-template-columns:1fr}.conf-sticky{position:static;z-index:auto}}

/* carte repliable (ex. Détails en lecture seule pendant l'instruction) */
.foldcard>summary{cursor:pointer;list-style:none}
.foldcard>summary::-webkit-details-marker{display:none}
.foldcard>summary.hd::after{content:"▾";margin-left:auto;color:var(--muted);font-size:11px}
.foldcard[open]>summary.hd::after{content:"▴"}
.foldcard:not([open])>summary.hd{border-bottom:none}

/* conformité */
.conf-head{display:flex;align-items:center;gap:10px}
.conf-badge{padding:4px 12px;border-radius:20px;font-weight:800;font-size:12px}
.conf-badge.ok{background:var(--ok-weak);color:var(--ok)}
.conf-badge.no{background:var(--danger-weak);color:var(--danger)}
.check{list-style:none;padding:0;margin:0}
.check li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-2);font-size:13px}
.check li:last-child{border-bottom:none}
.check li .mk{width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
.check li.ok .mk{background:var(--ok-weak);color:var(--ok)}
.check li.no .mk{background:var(--danger-weak);color:var(--danger)}
.check li.waived .mk{background:var(--warn-weak);color:var(--warn)}
.check li .x .req{color:var(--muted);font-size:11px}
.devis-row{display:grid;grid-template-columns:1fr 120px 90px 90px 30px;gap:8px;align-items:center;margin-bottom:8px}
/* Calendrier des échéances (vue de /depenses & /demandes) */
.cal-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.cal-bar .cal-legend{margin-bottom:0}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-month{font-weight:800;font-size:15px;min-width:130px;text-align:center;text-transform:capitalize}
.cal-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2)}
.cal-key{display:flex;align-items:center;gap:6px}
.cal-key b{color:var(--ink)}
.cal-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.cal-dot.depot{background:var(--muted)}.cal-dot.sla{background:var(--brand-orange)}
.cal-dot.eta{background:var(--accent)}.cal-dot.paiement{background:var(--ok)}
.cal-wrap{overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:1000px}
.cal-head{background:var(--surface);padding:8px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.cal-cell{background:var(--surface);min-height:104px;padding:6px 7px}
.cal-cell.empty{background:var(--bg)}
.cal-cell.today{background:var(--accent-weak)}
.cal-day{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.cal-cell.today .cal-day{color:var(--accent-d)}
.cal-ev{display:block;font-size:11px;line-height:1.25;padding:3px 6px;border-radius:6px;margin-bottom:4px;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--muted);background:var(--bg)}
.cal-ev .cal-ev-l{font-weight:700}
.cal-ev.depot{border-left-color:var(--muted)}
.cal-ev.sla{border-left-color:var(--brand-orange);background:var(--brand-orange-weak)}
.cal-ev.eta{border-left-color:var(--accent);background:var(--accent-weak)}
.cal-ev.paiement{border-left-color:var(--ok);background:var(--ok-weak)}
.cal-ev:hover{filter:brightness(.97)}
.devline{display:grid;grid-template-columns:1fr 120px 90px 26px;gap:8px;align-items:center;margin-bottom:8px}
.devline .rm{cursor:pointer;color:var(--danger);font-weight:800;text-align:center}
.devhead{display:grid;grid-template-columns:1fr 120px 90px 26px;gap:8px;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.devis-tag{font-size:11px;color:var(--muted)}
.badge-retenu{background:var(--ok-weak);color:var(--ok);border:1px solid #cfe3d7;padding:1px 7px;border-radius:5px;font-size:10.5px;font-weight:700}
.fx{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg label{padding:8px 14px;cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink-2);background:#fff}
.seg label:not(:last-child){border-right:1px solid var(--border)}
.seg input{display:none}.seg label.on{background:var(--accent);color:#fff}