/* ============================================================
   BESTMAN ERP CONTROL TOWER — Design System
   Palette : encre / os / or — éditorial COMEX
   ============================================================ */
:root{
  --ink:#14110d; --ink-2:#221d16; --ink-3:#2e2820;
  --bone:#f4efe6; --bone-2:#ece4d6; --bone-3:#e0d6c4;
  --gold:#b08d3f; --gold-2:#c9a85a; --gold-soft:#f0e4c8;
  --paper:#fbf8f1;
  --line:#d8cdb8; --line-2:#cabfa6;
  --green:#4f7a4a; --green-bg:#e9efe4;
  --red:#a8412f; --red-bg:#f5e3df;
  --amber:#a8792f; --amber-bg:#f6ebd6;
  --blue:#3a5a78; --blue-bg:#e2ebf1;
  --airtel:#e2231a;
  --txt:#2a2419; --txt-soft:#6b6253; --txt-mute:#938a78;
  --shadow:0 1px 2px rgba(20,17,13,.06),0 8px 24px rgba(20,17,13,.06);
  --shadow-lg:0 4px 12px rgba(20,17,13,.10),0 24px 60px rgba(20,17,13,.12);
  --r:10px; --r-sm:7px; --r-lg:16px;
  --serif:"Palatino Linotype","Palatino","Book Antiqua",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono","Consolas",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bone);color:var(--txt);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-soft)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ===== App mobile acteur terrain (Mobile Money style) ===== */
.cashapp{max-width:460px;margin:0 auto;padding:4px 4px 8px;animation:appIn .35s ease}
@keyframes appIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cashapp .balcard{background:linear-gradient(150deg,#1a1812 0%,#272014 55%,#3a2e15 100%);border-radius:26px;padding:30px 26px;color:var(--bone);box-shadow:0 16px 44px rgba(0,0,0,.30);position:relative;overflow:hidden}
.cashapp .balcard::after{content:'';position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,77,.24),transparent 70%)}
.cashapp .balcard::before{content:'';position:absolute;left:-30px;bottom:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,77,.10),transparent 70%)}
.cashapp .bal-lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.cashapp .bal-val{font-family:var(--serif);font-size:44px;font-weight:700;line-height:1.1;margin-top:6px;letter-spacing:-.5px}
.cashapp .bal-val small{font-size:18px;color:var(--gold-2)}
.cashapp .bal-who{margin-top:14px;font-size:13px;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cashapp .bal-who .pill{background:rgba(201,162,77,.18);color:var(--gold)}
.cashapp .bal-dispo{margin-top:10px;font-size:12px;color:var(--gold-2);background:rgba(201,162,77,.10);display:inline-block;padding:4px 10px;border-radius:20px}
/* mini stats */
.cashapp .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.cashapp .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.cashapp .stat .sl{font-size:11px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.cashapp .stat .sv{font-family:var(--serif);font-size:22px;font-weight:700;margin-top:4px}
.cashapp .stat.in .sv{color:#2f7a3e}
.cashapp .stat.out .sv{color:#a8412f}
/* graphique 7 jours */
.cashapp .chartcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-top:16px}
.cashapp .chartcard .ct{font-size:12px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.cashapp .bars{display:flex;align-items:flex-end;gap:8px;height:90px}
.cashapp .barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.cashapp .barwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.cashapp .bar{width:9px;border-radius:5px 5px 0 0;min-height:3px;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.cashapp .bar.in{background:linear-gradient(180deg,#5bb06b,#2f7a3e)}
.cashapp .bar.out{background:linear-gradient(180deg,#e0795f,#a8412f)}
.cashapp .barlb{font-size:9px;color:var(--txt-mute);font-family:var(--mono)}
.cashapp .leg{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--txt-soft)}
.cashapp .leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
/* gros boutons d'action tactiles */
.cashapp .actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 6px}
.cashapp .act{border:none;border-radius:22px;padding:26px 14px;cursor:pointer;text-align:center;transition:transform .12s ease,box-shadow .2s ease;font-family:var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cashapp .act:active{transform:scale(.95)}
.cashapp .act:hover{box-shadow:0 8px 22px rgba(0,0,0,.12)}
.cashapp .act .ic{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.cashapp .act .t{font-weight:700;font-size:16px}
.cashapp .act .s{font-size:12px;opacity:.72;margin-top:3px}
.cashapp .act.appro{background:linear-gradient(160deg,#f7f0e0,#efe4cb);color:#5c4a1c}
.cashapp .act.appro .ic{background:#e3d2a4;color:#7a5e18}
.cashapp .act.retour{background:linear-gradient(160deg,#ecf3e7,#dcebd2);color:#33522a}
.cashapp .act.retour .ic{background:#cfe2c2;color:#3d6b2e}
.cashapp .act:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.cashapp .sec{margin-top:24px}
.cashapp .sec-t{font-family:var(--serif);font-size:18px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.cashapp .mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:10px;transition:transform .1s ease}
.cashapp .mrow:active{transform:scale(.99)}
.cashapp .mrow .mt{font-weight:600;font-size:14px}
.cashapp .mrow .ms{font-size:11px;color:var(--txt-mute);margin-top:2px}
.cashapp .mrow .mv{font-family:var(--mono);font-weight:700;white-space:nowrap;font-size:15px}
.cashapp .mico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.cashapp .mico.in{background:#e8f0e3;color:#2f7a3e}
.cashapp .mico.out{background:#f3e3de;color:#a8412f}
.cashapp .pinpad{display:flex;gap:8px;align-items:center;margin-top:10px}
.cashapp .pinpad input{flex:1;text-align:center;font-size:18px;letter-spacing:.3em;font-family:var(--mono)}
.cashapp .empty-sm{text-align:center;padding:24px;color:var(--txt-mute);font-size:13px;background:#fff;border:1px dashed var(--line);border-radius:16px}
/* barre d'onglets en bas */
.cashtabs{position:sticky;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-radius:18px 18px 0 0;display:flex;justify-content:space-around;padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px));z-index:50;max-width:460px;margin:14px auto 0;box-shadow:0 -6px 20px rgba(0,0,0,.05)}
.cashtabs a{flex:1;text-align:center;text-decoration:none;color:var(--txt-mute);font-size:10px;padding:4px 0;cursor:pointer;transition:color .15s ease}
.cashtabs a .ti{font-size:21px;display:block;line-height:1.1;margin-bottom:2px}
.cashtabs a.on{color:var(--gold-2)}
.cashtabs a.act-center .ti{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:linear-gradient(160deg,var(--gold),var(--gold-2));color:#fff;margin:-18px auto 2px;box-shadow:0 6px 16px rgba(201,162,77,.4)}
.cashsheet .field label{font-size:12px}
.cashsheet .bigamt{width:100%;font-size:28px;text-align:center;font-family:var(--mono);font-weight:700;padding:16px;border-radius:16px}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:1000;display:flex;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 60%,#3a3225 100%)}
#login .brand-side{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:7vw;color:var(--bone);position:relative;overflow:hidden}
#login .brand-side::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(176,141,63,.14) 1px,transparent 0);
  background-size:26px 26px;opacity:.6}
#login .mark{font-family:var(--serif);font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-2);position:relative;margin-bottom:28px}
#login h1{font-size:clamp(34px,4.4vw,60px);line-height:1.04;color:var(--bone);
  position:relative;margin-bottom:22px}
#login h1 em{font-style:italic;color:var(--gold-2)}
#login .tag{font-size:15px;color:#cbc1ad;max-width:440px;position:relative;line-height:1.65}
#login .ribbon{position:relative;margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
#login .ribbon span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(201,168,90,.4);color:var(--gold-2);padding:5px 11px;border-radius:20px}
#login .form-side{width:430px;background:var(--paper);display:flex;flex-direction:column;
  justify-content:center;padding:54px 50px;box-shadow:-30px 0 80px rgba(0,0,0,.3)}
#login .form-side h2{font-size:24px;margin-bottom:6px}
#login .form-side p.sub{color:var(--txt-soft);font-size:13px;margin-bottom:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-soft);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--txt);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
/* Aide de saisie sous un champ : dire la regle AVANT l'erreur. Le gabarit du
   parametrage posait deja des <small> a cet endroit, sans style — ils
   heritaient de la casse et de l'interlettrage du label. */
.field small{display:block;margin-top:6px;font-size:11px;line-height:1.45;
  color:var(--txt-mute);text-transform:none;letter-spacing:0;font-weight:400}
/* Filtre de recherche au-dessus d'un menu deroulant : discret, il ne doit pas
   se confondre avec le champ qui porte reellement la valeur. */
.field .filtre-select{margin-bottom:6px;padding:7px 11px;font-size:12px;
  background:var(--bone-2);border-style:dashed}
.field .filtre-select::placeholder{color:var(--txt-mute);font-size:12px}
/* Compteur de resultats : dit combien de comptes correspondent, et si le
   premier a ete selectionne. Sans lui, un menu ferme ne montre rien. */
.field .filtre-info{margin:-2px 0 6px;min-height:14px;color:var(--gold-2)}
.field .filtre-info.vide{color:var(--amber)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;letter-spacing:.02em;transition:.15s;background:var(--bone-2);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--bone)}
.btn-primary:hover{background:var(--ink-2)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-2)}
.btn-block{width:100%}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--bone-2)}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:#e8c9c2}
.btn-ok{background:var(--green-bg);color:var(--green);border-color:#cfe0c8}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.role-pick button{padding:9px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  font-size:12px;text-align:left;transition:.15s}
.role-pick button:hover{border-color:var(--gold)}
.role-pick button.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 2px var(--gold-soft)}
.role-pick button b{display:block;font-size:13px;color:var(--ink)}
.role-pick button small{color:var(--txt-soft)}

/* ---------- APP SHELL ---------- */
#app{display:none;height:100vh;grid-template-columns:248px 1fr;grid-template-rows:58px 1fr}
#app.show{display:grid}
.topbar{grid-column:1/3;background:var(--ink);display:flex;align-items:center;
  padding:0 22px;gap:18px;color:var(--bone);z-index:30}
.topbar .logo{font-family:var(--serif);font-size:16px;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
.topbar .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 3px rgba(201,168,90,.25)}
.topbar .logo b{color:var(--gold-2);font-weight:600}
.topbar .sep{width:1px;height:24px;background:rgba(255,255,255,.12)}
.topbar .crumb{font-size:13px;color:#cbc1ad;letter-spacing:.02em}
.topbar .spacer{flex:1}
.topbar .period{font-size:11px;letter-spacing:.06em;color:var(--gold-2);border:1px solid rgba(201,168,90,.35);
  padding:5px 11px;border-radius:18px}
.topbar .who{display:flex;align-items:center;gap:10px;font-size:13px}
.topbar .who .av{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.topbar .who small{display:block;color:#a99f8c;font-size:11px}
.topbar .who .logout{color:#a99f8c;cursor:pointer;font-size:16px;margin-left:6px}
.topbar .who .logout:hover{color:var(--bone)}

/* ---------- SIDEBAR ---------- */
.side{background:var(--ink-2);overflow-y:auto;padding:14px 0 30px}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#4a4234;border-radius:3px}
.side .grp{padding:14px 22px 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7d745f}
.side a{display:flex;align-items:center;gap:11px;padding:9px 22px;color:#cbc1ad;font-size:13px;
  cursor:pointer;border-left:3px solid transparent;transition:.12s}
.side a:hover{background:rgba(255,255,255,.04);color:var(--bone)}
.side a.on{background:linear-gradient(90deg,rgba(176,141,63,.16),transparent);
  color:#fff;border-left-color:var(--gold)}
.side a .ic{width:18px;text-align:center;opacity:.85;font-size:15px}
.side a .badge{margin-left:auto;background:var(--airtel);color:#fff;font-size:10px;
  font-weight:700;padding:1px 7px;border-radius:10px;font-family:var(--mono)}

/* ---------- MAIN ---------- */
.main{overflow-y:auto;background:var(--bone);padding:26px clamp(30px,3vw,60px) 60px;max-width:1200px}
.main::-webkit-scrollbar{width:9px}.main::-webkit-scrollbar-thumb{background:#cabfa6;border-radius:5px}
.view{display:none;animation:fade .3s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:14px}
.page-head>div:first-child{display:flex;flex-direction:column;gap:4px}
.page-head h1{font-size:25px;display:flex;align-items:center;gap:11px}
.page-head h1 .kicker{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-soft);padding:3px 9px;border-radius:5px;font-weight:700}
.page-head p{color:var(--txt-soft);font-size:13px;margin-top:4px}
.page-head .actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- CARDS ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.card-h h3{font-size:16px}.card-h .sub{font-size:12px;color:var(--txt-mute)}
.card-b{padding:20px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.pill-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.pill-row .pill-lab{color:var(--txt-soft)}
.pill-row+.pill-row{border-top:1px dotted var(--line)}
@media(max-width:1100px){.g3,.g4{grid-template-columns:1fr 1fr}}

/* KPI */
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.kpi::after{content:"";position:absolute;top:0;right:0;width:64px;height:64px;
  background:radial-gradient(circle at top right,var(--gold-soft),transparent 70%);opacity:.7}
.kpi .lab{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-mute);font-weight:600}
.kpi .val{font-family:var(--mono);font-size:25px;font-weight:600;color:var(--ink);margin:8px 0 3px;
  font-variant-numeric:tabular-nums}
.kpi .val small{font-size:13px;color:var(--txt-soft);font-weight:400}
.kpi .meta{font-size:11px;color:var(--txt-soft)}
.kpi .meta .up{color:var(--green)}.kpi .meta .dn{color:var(--red)}
.kpi.accent{background:linear-gradient(135deg,var(--ink),var(--ink-3));border-color:var(--ink)}
.kpi.accent .lab{color:var(--gold-2)}.kpi.accent .val{color:var(--bone)}.kpi.accent .meta{color:#a99f8c}
.kpi.accent::after{background:radial-gradient(circle at top right,rgba(201,168,90,.3),transparent 70%)}

/* ---------- TABLE ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:10px 14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-mute);font-weight:700;border-bottom:1.5px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--bone-3);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.1s}.tbl tbody tr:hover{background:var(--bone)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .acct{font-family:var(--mono);font-size:12px;color:var(--blue)}
.scroll-x{overflow-x:auto}

/* CHIP / STATUS */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-draft{background:var(--bone-2);color:var(--txt-soft)}
.c-sub{background:var(--blue-bg);color:var(--blue)}
.c-ctrl{background:var(--amber-bg);color:var(--amber)}
.c-fix{background:var(--amber-bg);color:var(--amber)}
.c-rej{background:var(--red-bg);color:var(--red)}
.c-val{background:var(--green-bg);color:var(--green)}
.c-post{background:var(--ink);color:var(--gold-2)}
.c-rev{background:var(--red-bg);color:var(--red)}
.risk{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600}
.risk .bar{width:42px;height:5px;border-radius:3px;background:var(--bone-3);overflow:hidden}
.risk .bar i{display:block;height:100%}
.r-low{color:var(--green)}.r-low .bar i{background:var(--green)}
.r-mid{color:var(--amber)}.r-mid .bar i{background:var(--amber)}
.r-high{color:var(--airtel)}.r-high .bar i{background:var(--airtel)}
.r-crit{color:var(--red)}.r-crit .bar i{background:var(--red)}

/* TREE trésorerie */
.tree{font-size:13px}
.tree .node{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-radius:var(--r-sm);transition:.12s}
.tree .node:hover{background:var(--bone)}
.tree .n0{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:600;
  background:var(--bone-2);margin-top:6px}
.tree .n1{padding-left:34px}.tree .n2{padding-left:58px;color:var(--txt-soft)}
.tree .node .lbl{display:flex;align-items:center;gap:9px}
.tree .node .lbl .acct{font-family:var(--mono);font-size:11px;color:var(--txt-mute)}
.tree .node .amt{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.tree .twig{color:var(--line);margin-right:4px}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(20,17,13,.55);backdrop-filter:blur(3px);
  z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:640px;animation:pop .25s ease}
.modal.wide{max-width:880px}
.modal.xwide{max-width:1040px}
.modal.xwide .modal-b{max-height:74vh}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
.modal-h{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-h h3{font-size:19px}.modal-h .x{font-size:22px;color:var(--txt-mute);cursor:pointer;line-height:1}
.modal-h .x:hover{color:var(--ink)}
.modal-b{padding:24px;max-height:64vh;overflow-y:auto}
.modal-f{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--bone)}
.form-row{display:grid;gap:14px;margin-bottom:14px}
.form-row.c2{grid-template-columns:1fr 1fr}.form-row.c3{grid-template-columns:1fr 1fr 1fr}

/* posting preview */
.posting{background:var(--ink);border-radius:var(--r);padding:16px 18px;font-family:var(--mono);font-size:12px;color:var(--bone)}
.posting .hd{color:var(--gold-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-family:var(--sans);font-weight:700}
.posting .ln{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.posting .ln:last-child{border:none}
.posting .ln .deb{color:#e2c98a}.posting .ln .cre{color:#9cc0d8}
.posting .ln.cr{padding-left:22px}
.posting .tot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(201,168,90,.3);color:var(--gold-2);font-weight:700;font-family:var(--sans);font-size:12px}
.bal-ok{color:#9ec98f}.bal-no{color:#e08878}

/* misc */
.hint{font-size:12px;color:var(--txt-soft);background:var(--bone-2);border-left:3px solid var(--gold);
  padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:16px}
.empty{text-align:center;padding:50px 20px;color:var(--txt-mute)}
.empty .ic{font-size:38px;opacity:.4;margin-bottom:10px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.tabs button{padding:9px 16px;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--txt-soft);font-size:13px;font-weight:600;transition:.12s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.toast{position:fixed;bottom:24px;right:24px;z-index:500;display:flex;flex-direction:column;gap:10px}
.toast .t{background:var(--ink);color:var(--bone);padding:13px 18px;border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);font-size:13px;display:flex;align-items:center;gap:10px;
  border-left:3px solid var(--gold);animation:slidein .3s ease;max-width:360px}
.toast .t.ok{border-left-color:var(--green)}.toast .t.err{border-left-color:var(--red)}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.req{color:var(--airtel)}
.pill{display:inline-block;font-size:10px;padding:2px 8px;border-radius:10px;background:var(--bone-2);
  color:var(--txt-soft);font-weight:600;letter-spacing:.04em}
.split{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
.def{display:flex;flex-direction:column;gap:2px}.def small{color:var(--txt-mute);font-size:11px}
.def b{font-family:var(--mono);font-size:14px}

/* — compléments templates Django — */
.eyebrow{font-family:var(--mono,'Courier New',monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-2,#B8860B);font-weight:700;background:var(--bone-2,#F8F5EE);
  padding:4px 10px;border-radius:6px;display:inline-block;margin-bottom:8px}
.lead{color:var(--txt-mute,#6B6456);font-size:14px;margin-top:6px}
.tbl td.r,.tbl th.r{text-align:right}

/* ═══════════════════════════════════════════════════════════════
   ESPACE ACTEUR TERRAIN SUR MOBILE — « en-tête fusionné »
   Le prototype n'a pas de reponse mobile : la sidebar de 248px et la
   topbar non repliable ecrasaient la colonne .cashapp de 460px (il
   restait 142px sur un ecran de 390px). Sur petit ecran, l'identite
   entre dans la carte du solde, qui monte jusqu'en haut, et la barre
   d'onglets basse assure seule la navigation.
   Tout est borne a body.terrain : le back-office n'est pas touche.
   ═══════════════════════════════════════════════════════════════ */

/* Ligne d'identite, invisible tant que la topbar est la */
.tid{display:none;align-items:center;gap:11px}
.tid .tid-av{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.tid .tid-who{flex:1;min-width:0}
.tid .tid-name{display:block;font-size:14px;font-weight:600;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tid .tid-meta{display:block;font-size:11px;color:#a99f8c;font-family:var(--mono)}
.tid .tid-out{color:#a99f8c;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;flex-shrink:0}
.tid .tid-out:hover,.tid .tid-out:focus-visible{color:var(--bone)}
/* variante autonome : les vues sans carte solde portent leur propre bandeau */
.tid.tid-solo{background:var(--ink-2);border-radius:0 0 22px 22px;padding:16px 18px}

/* Les flux remontent dans la carte : deux cartes blanches en moins */
.cashapp .bal-flux{display:none;gap:22px;margin-top:18px}
.cashapp .bal-flux .f{display:flex;align-items:center;gap:8px}
.cashapp .bal-flux .fl{font-size:10px;color:#a99f8c;text-transform:uppercase;letter-spacing:.08em}
.cashapp .bal-flux .fv{font-family:var(--mono);font-size:14px;font-weight:700}
.cashapp .bal-flux .f.in .fv{color:#7fbf85}
.cashapp .bal-flux .f.out .fv{color:#e0795f}

@media (max-width:900px){
  body.terrain .topbar,
  body.terrain .side{display:none}
  body.terrain #app.show{grid-template-columns:1fr;grid-template-rows:1fr;height:100dvh}
  body.terrain .main{padding:0;max-width:none}

  body.terrain .tid{display:flex}
  body.terrain .cashapp{max-width:none;margin:0;padding:0 16px 8px}
  /* bandeau autonome : pleine largeur, comme la carte solde */
  body.terrain .cashapp > .tid-solo{margin:0 -16px 4px}

  /* la carte solde : pleine largeur, collee au haut de l'ecran */
  body.terrain .cashapp .balcard{margin:0 -16px;border-radius:0 0 30px 30px;padding:20px 22px 26px}
  body.terrain .cashapp .balcard .bal-lab{margin-top:24px}
  body.terrain .cashapp .bal-val{font-size:50px}
  body.terrain .cashapp .bal-flux{display:flex}
  body.terrain .cashapp .stats{display:none}   /* remplacees par .bal-flux */

  body.terrain .cashapp .sec:first-of-type,
  body.terrain .cashapp .chartcard{margin-top:18px}

  /* barre d'onglets : pleine largeur, marge d'encoche conservee */
  body.terrain .cashtabs{max-width:none;margin:16px -16px 0;border-radius:18px 18px 0 0}

  /* un flash s'insere au-dessus sans casser le plein bord */
  body.terrain .main > .card{margin:14px 16px}
}

/* Tres petits ecrans : les deux gros boutons passent l'un sous l'autre */
@media (max-width:340px){
  body.terrain .cashapp .actions{grid-template-columns:1fr}
  body.terrain .cashapp .bal-val{font-size:42px}
}