/* panneau-v2.css — backoffice HONO RECHARGE : design de la nouvelle interface (Inter, bleu #0E7C66, cartes 24 px, theme clair/sombre) */
:root{
  /* bleu d'origine du demandeur (#0E7C66) + or (#FF6B4A) en accent */
  --brand-50:#EAFBF6; --brand-100:#CFF5EC; --brand-200:#A0E9DA; --brand-300:#6BD9C4;
  --brand-400:#33C4AC; --brand-500:#14A78F; --brand-600:#0F766E; --brand-700:#0B5F58;
  --gold:#FF6B4A; --gold-soft:#FFE3DB;
  --ink-300:#93A6A0; --ink-400:#6B7C77; --ink-500:#4A5955; --ink-700:#26323A;
  --ink-800:#141B20; --ink-900:#0C1115; --ink-950:#080B0E;
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-800:#1E293B; --slate-900:#0F172A;
  --ok:#059669; --ok-bg:#ECFDF5; --warn:#B45309; --warn-bg:#FFFBEB; --bad:#E11D48; --bad-bg:#FFF1F2;
  /* 12/11/2026 — PALETTE A « LAGON » : accent vif du backoffice (turquoise sur
     ardoise) + feux du relais. --brand-600 reste le fond des boutons (texte
     blanc oblige), --accent sert aux TEXTES et marqueurs sur fond sombre. */
  --accent:#2DD4A7; --accent-2:#FF6B4A; --live:#22D3EE;
  --radius:24px; --shadow:0 1px 2px 0 rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.12);
  --sidebar:264px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--ink-900); color:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}

/* ---------- coquille ---------- */
.shell{min-height:100vh}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar); z-index:40;
  background:var(--ink-950); border-right:1px solid var(--ink-800);
  padding:16px; display:flex; flex-direction:column; overflow-y:auto;
  transition:transform .2s ease;
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(140deg,#0E7C66,#0F766E 62%,#FF6B4A 140%);
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.5px;color:#fff}
.brand-name{font-size:14px;font-weight:700;letter-spacing:.2px}
.brand-sub{font-size:11px;color:var(--ink-400)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;color:var(--ink-300);font-size:13px;font-weight:500;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 4px 4px 0;background:var(--gold)}
.nav-item svg{width:17px;height:17px;flex:0 0 auto}
.nav-lock{margin-left:auto;font-size:10px;color:var(--ink-500)}
.nav-sep{margin:12px 4px 6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.side-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-300)}
.who-avatar{position:relative;width:30px;height:30px;border-radius:999px;background:var(--brand-600);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.main{min-height:100vh;display:flex;flex-direction:column;margin-left:var(--sidebar)}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--ink-800);
  background:rgba(4,4,5,.92);backdrop-filter:blur(8px);
}
.topbar h2{font-size:13px;font-weight:600;color:var(--ink-300);letter-spacing:.2px}
.topbar .spacer{flex:1}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--ink-800);background:transparent;color:var(--ink-300);cursor:pointer}
.icon-btn:hover{color:#fff;border-color:var(--ink-700)}
.content{flex:1;padding:20px 16px 96px}
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.page-title{font-size:20px;font-weight:700;letter-spacing:-.2px;color:#fff}
.page-sub{margin-top:4px;font-size:12px;color:var(--ink-400);max-width:60ch}
.page-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- cartes ---------- */
/* MODE SOMBRE (defaut) : surface elevee sur fond quasi-noir, cerne subtil 7 % blanc */
.card{background:var(--ink-800);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);
  padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.6);color:#fff}
.card.dark{background:var(--ink-900);border-color:var(--ink-800);color:#fff}
/* EMPILEMENT DES CARTES D'UN ECRAN (05/11/2026). Les ecrans rendent leurs cartes
   a la suite dans `#screen`, sans conteneur : elles se touchaient (retour du
   proprietaire sur « Depot classique » : « separe les choses, mets de l'espace
   entre eux, c'est trop colle »). Un ecart explicite suffit, et il vaut pour
   TOUS les ecrans du panneau. */
#screen{display:flex;flex-direction:column;gap:16px}
.card-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff;margin-bottom:16px}
.card-title svg{width:17px;height:17px;color:var(--ink-400)}
.card-hint{font-size:11px;font-weight:500;color:var(--ink-400)}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--ink-300);font-size:12px}
.app-foot{padding:0 20px 26px;font-size:11px;letter-spacing:.03em;color:var(--ink-500)}
.topbar-brand{display:none;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff}
.num{font-variant-numeric:tabular-nums}

/* KPI */
.kpi{background:var(--ink-800);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:6px}
.kpi .k-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(61,99,150,.22);color:#6FD0B8;box-shadow:inset 0 0 0 1px rgba(78,123,184,.30)}
.kpi:hover .k-ico{background:rgba(255,107,74,.18);color:#FF8A6E;box-shadow:inset 0 0 0 1px rgba(255,107,74,.35)}
.kpi .k-ico svg{width:17px;height:17px}
.kpi .k-val{font-size:19px;font-weight:700;color:#fff}
.kpi .k-lab{font-size:11px;line-height:1.25;color:var(--ink-400)}

/* ---------- form / boutons ---------- */
.label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:5px}
.input,.select,textarea.input{
  width:100%;padding:9px 11px;font-size:13px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;outline:none;
}
.input:focus,.select:focus{border-color:#14A78F;box-shadow:0 0 0 3px rgba(61,99,150,.28)}
.input::placeholder{color:var(--ink-400)}
.field{margin-bottom:12px}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  font-size:13px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all .15s;
}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
/* ghost : translucide sur fond sombre, border 10 % blanc */
.btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--ink-300)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-dark{background:rgba(255,255,255,.06);border-color:var(--ink-700);color:#fff}
/* danger : fond rose sombre, texte pastel */
.btn-danger{background:rgba(225,29,72,.14);border-color:rgba(225,29,72,.30);color:#FDA4AF}
.btn-danger:hover{background:rgba(225,29,72,.22)}
.btn-ok{background:var(--ok);color:#fff}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border-radius:18px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{
  text-align:left;padding:12px 12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);font-weight:700;background:rgba(255,255,255,.04);white-space:nowrap;
}
table.t td{padding:15px 12px;border-top:1px solid rgba(255,255,255,.06);color:var(--ink-300);vertical-align:middle}
table.t tr:hover td{background:rgba(255,255,255,.04)}
table.t td.num{font-weight:600;color:#fff;white-space:nowrap}
.cell-main{font-weight:600;color:#fff}
.cell-sub{font-size:11px;color:var(--ink-400);margin-top:2px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor}
/* fonds semi-transparents sur surface sombre : contraste garanti */
.b-wait{background:rgba(180,83,9,.22);color:#FF8A6E;border-color:rgba(180,83,9,.38)}
.b-admin{background:rgba(18,161,131,.22);color:#6FD0B8;border-color:rgba(18,161,131,.38)}
.b-review{background:rgba(109,40,217,.22);color:#C4B5FD;border-color:rgba(109,40,217,.38)}
.b-ok{background:rgba(5,150,105,.22);color:#34D399;border-color:rgba(5,150,105,.38)}
.b-bad{background:rgba(225,29,72,.20);color:#FDA4AF;border-color:rgba(225,29,72,.35)}
.b-off{background:rgba(255,255,255,.08);color:var(--ink-300);border-color:rgba(255,255,255,.13)}
/* etats du RELAIS SMS : en attente (ambre) et connecte (cyan) manquaient */
.b-warn{background:rgba(245,158,11,.16);color:#FCD34D;border-color:rgba(245,158,11,.34)}
.b-live{background:rgba(34,211,238,.16);color:#67E8F9;border-color:rgba(34,211,238,.34)}
body.light .b-warn{background:var(--warn-bg);color:var(--warn);border-color:#FDE68A}
body.light .b-live{background:#ECFEFF;color:#0E7490;border-color:#A5F3FC}
.b-brand{background:rgba(14,124,102,.32);color:#6FD0B8;border-color:rgba(61,99,150,.40)}

/* ---------- divers ---------- */
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#14A78F,var(--brand-600))}
.spark{display:flex;align-items:flex-end;gap:4px;height:96px}
.spark>i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#14A78F,var(--brand-600));min-height:4px}
.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.list-row:first-child{border-top:0}
.empty{padding:34px 12px;text-align:center;font-size:13px;color:var(--ink-400)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
/* onglets inactifs : translucides sur fond sombre ; actif = plein de marque */
.tab,.tab-btn{padding:7px 12px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--ink-300)}
.tab.on,.tab-btn.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.toolbar .field{margin:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:12.5px}
.kv dt{color:var(--ink-400)}
.kv dd{margin:0;font-weight:600;color:#fff}
/* warnbox sombre : fond ambre tres fonce, texte jaune clair */
.warnbox{background:rgba(180,83,9,.18);border:1px solid rgba(180,83,9,.38);color:#FFA78F;border-radius:14px;
  padding:11px 13px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start}
.warnbox svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}

/* ---------- chat ---------- */
.chat{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--ink-800);border-radius:var(--radius);
  overflow:hidden;border:1px solid rgba(255,255,255,.07);min-height:540px;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.6)}
.conv-list{border-right:0;max-height:none}
.conv{display:flex;gap:10px;width:100%;padding:11px 13px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.06)}
.conv:hover{background:rgba(255,255,255,.05)}
.conv.on{background:rgba(14,124,102,.30)}
.conv .av{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.10);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--ink-300);flex:0 0 auto}
.conv .nm{font-size:13px;font-weight:600;color:#fff}
.conv .ls{font-size:11px;color:var(--ink-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* liste de messagerie du TELEPHONE (04/11/2026) */
.conv-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.conv-haut{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.conv-haut .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-quand{flex:none;font-size:11px;color:var(--ink-400)}
.conv-bas{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.conv-fleche{flex:none;align-self:center;color:var(--ink-400);display:grid;place-items:center}
.conv-fleche svg{width:16px;height:16px}
.chat-main{display:flex;flex-direction:column;min-width:0}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--ink-900)}
.msg{max-width:min(520px,78%);padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4}
.msg.them{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  color:var(--ink-300);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--brand-600);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .tm{display:block;margin-top:3px;font-size:10px;opacity:.65}
.chat-foot{border-top:1px solid rgba(255,255,255,.07);padding:10px;display:flex;gap:8px;
  align-items:center;background:var(--ink-800)}

/* ---------- discussion en FENETRE (Conversations) --------------------------
   Demande du 04/11/2026 : la fenetre d'un fil prend la forme du tchat de
   l'espace client. Le corps de la fenetre EST le fil (il defile seul, avec le
   separateur de jour et les bulles .msg deja dessinees ci-dessus) ; la barre de
   reponse reste au pied. Les jetons du panneau suivent tout seuls le theme. */
.modal.modal-chat{max-width:720px;height:min(78vh,760px);display:flex;flex-direction:column}
.modal-chat .modal-body{padding:0;max-height:none;flex:1;min-height:0;overflow:hidden;display:flex}
.modal-chat .chat-main{flex:1;min-height:0}
.modal-chat .chat-body{padding:14px 16px;gap:5px}
/* Peu de messages : le fil se pose AU BAS, comme dans l'espace client (la
   marge auto du premier enfant ne casse pas le defilement, contrairement a
   justify-content:flex-end sur un conteneur qui defile). */
.modal-chat .chat-body > :first-child{margin-top:auto}
.modal-chat .msg{max-width:82%;padding:8px 12px 6px;border-radius:16px}
/* Appui long sur une bulle = actions du message, comme dans l'application
   cliente. Sans ces proprietes la WebView selectionne le texte et ouvre sa
   propre feuille (selection / partage) par-dessus la barre #ch-geste. Le texte
   se copie par le bouton « Copier » de la barre. */
.modal-chat .msg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.modal-chat .msg .tm{text-align:right;font-size:10.5px}
.msg-texte{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-auteur{display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:var(--ink-300)}
.msg.me .msg-auteur{color:rgba(255,255,255,.78)}
.chat-jour{align-self:center;margin:7px 0 3px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--ink-300);background:rgba(255,255,255,.06)}
.chat-vide{margin:auto;padding:20px;font-size:12.5px;color:var(--ink-400)}
/* Le pied de la fenetre est, par defaut, une RANGEE (justify-content:flex-end) :
   la citation, la palette d'emojis, les reponses rapides, la saisie et la barre
   vocale y devenaient des voisins cote a cote — la palette s'affichait en une
   colonne geante a gauche et le champ s'ecrasait en pastille (capture 17 h 23).
   Ici le pied empile ses blocs, chacun sur toute la largeur. */
.modal-chat .modal-foot{padding:10px 12px;display:block}
.modal-chat .modal-foot > *{width:100%}
.modal-chat .modal-head h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-saisie{display:flex;align-items:flex-end;gap:8px;width:100%}
.chat-champ{flex:1;min-height:42px;max-height:120px;padding:10px 12px;line-height:1.35;
  border-radius:14px;resize:none}
.chat-envoyer{flex:none;width:42px;height:42px;padding:0;border-radius:50%;
  display:grid;place-items:center}
.chat-envoyer svg{width:17px;height:17px}
/* image et vocal dans le compositeur (04/11/2026) */
.chat-rond{flex:none;width:38px;height:38px;padding:0;border-radius:50%;
  display:grid;place-items:center}
.chat-rond svg{width:17px;height:17px}
.chat-champ{min-width:0}
.chat-saisie[hidden],.chat-rec-bar[hidden]{display:none}
.chat-rec-bar{display:flex;align-items:center;gap:9px;width:100%}
.chat-rec-point{flex:none;width:9px;height:9px;border-radius:50%;background:var(--bad);
  animation:rec-pulse 1s infinite}
@keyframes rec-pulse{50%{opacity:.3}}
.chat-rec-temps{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:#fff}
.chat-rec-aide{flex:1;font-size:12px;color:var(--ink-300)}
.chat-rec-bar .btn{flex:none}
/* medias dans les bulles */
.msg-photo{display:block;line-height:0}
.msg-photo img{display:block;max-width:260px;max-height:320px;border-radius:10px}
.msg-audio{width:230px;max-width:100%;height:36px}
.msg-video{display:block;max-width:260px;max-height:320px;border-radius:10px}
@media (max-width:640px){
  .modal.modal-chat{max-width:100%;height:calc(100vh - 32px);height:calc(100dvh - 32px)}
}

/* ---------- modale / toast ---------- */
.backdrop{position:fixed;inset:0;z-index:80;background:rgba(4,4,5,.7);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.modal{width:100%;max-width:520px;background:var(--ink-800);border-radius:20px;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.8);
  overflow:hidden;color:#fff}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-head h3{font-size:15px;font-weight:700}
.modal-body{padding:16px 18px;max-height:62vh;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;
  border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.toast{position:fixed;right:16px;bottom:88px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast>div{background:var(--ink-950);color:#fff;border:1px solid var(--ink-700);border-radius:12px;
  padding:10px 14px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,.4);animation:up .18s ease}
@keyframes up{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1000px 600px at 50% -10%, #0A1626 0%, var(--ink-950) 60%)}
.login-card{width:100%;max-width:390px;background:var(--ink-800);border-radius:24px;padding:26px;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.login-card h1{font-size:19px;font-weight:800;color:#fff}
.login-card p{margin:6px 0 18px;font-size:12.5px;color:var(--ink-400)}
.login-foot{margin-top:14px;font-size:12px;color:var(--ink-400);text-align:center}
.link{color:#6FD0B8;font-weight:600;cursor:pointer}

/* ---------- barre mobile ---------- */
.tabbar{display:none}
@media (max-width:1023px){
  .topbar-brand{display:inline}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  /* LE PIED DU TIROIR PASSAIT SOUS LA BARRE D'ONGLETS (08/11/2026,
     « impossible de defiler vers le bas apres le super admin pour acceder au
     bouton deconnexion » — signale sur les DEUX backoffices, FRANCKO et HONO RECHARGE).
     La barre `.tabbar` est FIXE en bas (z-index 50) et le tiroir a `inset:0` : son
     contenu finissait au bord bas de l'ecran, le pied du tiroir etait peint
     DESSOUS, et le defilement n'avait aucune marge a offrir. On reserve la hauteur
     de la barre (plus l'inset du bas sur iPhone) pour que le pied — et le bouton
     « Se deconnecter » — repasse au-dessus d'elle. Le z-index du tiroir n'est PAS
     touche : la barre du bas reste visible tiroir ouvert. */
  .sidebar{ padding-bottom: calc(16px + 58px + env(safe-area-inset-bottom)); }
  .nav{ flex: 0 0 auto; }
  .main{margin-left:0}
  .content{padding:16px 12px 92px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
  .chat{grid-template-columns:1fr}
  /* .conv-list : l'ancienne maquette a deux colonnes la bornait a 220 px sur
     telephone. Cette liste est desormais la liste de conversations de la carte :
     elle doit grandir avec la page (sinon les lignes debordent de la carte). */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    border-top:1px solid var(--ink-800);background:rgba(4,4,5,.96);backdrop-filter:blur(10px);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;
    font-size:9.5px;font-weight:600;color:var(--ink-400)}
  .tb-item.on{color:#fff}
  .tb-item svg{width:20px;height:20px}
  .tb-fab{width:54px;height:54px;margin-top:-22px;border-radius:999px;background:var(--brand-600);
    display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(14,124,102,.45)}
  .tb-fab svg{width:24px;height:24px}
}
@media (max-width:640px){
  .g2{grid-template-columns:1fr}
  .page-title{font-size:18px}
  .modal{max-width:100%}
  /* Tableau « Pays et modes » : six colonnes ne tiennent pas sur un telephone et
     le bouton « Basculer » sortait de l'ecran (05/11/2026). La devise est une
     evidence ici (le pays est le Togo, la monnaie le FCFA) : on masque cette
     colonne et on resserre les cellules, les quatre colonnes utiles tiennent
     alors sans defilement horizontal. Les autres tableaux ne sont pas touches. */
  .table-wrap.t-pays th:nth-child(2), .table-wrap.t-pays td:nth-child(2){display:none}
  .table-wrap.t-pays th, .table-wrap.t-pays td{padding-left:8px;padding-right:8px}
}

/* =====================================================================
   THEME CLAIR (body.light) — surcharges sur les regles sombres ci-dessus
   ===================================================================== */
body.light{background:var(--slate-100);color:var(--slate-900)}
/* coquille */
body.light .sidebar{background:#fff;border-right-color:var(--slate-200)}
body.light .brand-name{color:var(--slate-900)}
body.light .nav-item{color:var(--slate-600)}
body.light .nav-item:hover{background:var(--slate-100);color:var(--slate-900)}
body.light .nav-item.active{background:var(--brand-50);color:var(--brand-700)}
body.light .nav-item.active::before{background:var(--brand-600)}
body.light .topbar{background:rgba(255,255,255,.94);border-bottom-color:var(--slate-200)}
body.light .topbar h2{color:var(--slate-600)}
body.light .icon-btn{border-color:var(--slate-200);color:var(--slate-600)}
body.light .icon-btn:hover{color:var(--slate-900);border-color:var(--slate-400)}
body.light .page-title{color:var(--slate-900)}
body.light .page-sub{color:var(--slate-500)}
body.light .tabbar{background:rgba(255,255,255,.97);border-top-color:var(--slate-200)}
body.light .tb-item{color:var(--slate-500)}
body.light .tb-item.on{color:var(--brand-600)}
body.light .who{color:var(--slate-600)}
body.light .app-foot{color:var(--slate-400)}
body.light .topbar-brand{color:var(--slate-800)}
/* cartes */
body.light .card{background:#fff;border-color:rgba(226,232,240,.7);color:var(--slate-900);
  box-shadow:0 1px 2px 0 rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.12)}
body.light .card-title{color:var(--slate-900)}
body.light .card-title svg{color:var(--slate-500)}
body.light .card-hint{color:var(--slate-500)}
body.light .muted{color:var(--slate-500)}
/* KPI */
body.light .kpi{background:#fff;border-color:rgba(226,232,240,.7);
  box-shadow:0 1px 2px 0 rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.12)}
body.light .kpi .k-ico{background:var(--brand-50);color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--brand-200)}
body.light .kpi:hover .k-ico{background:var(--gold-soft);color:#B45309;box-shadow:inset 0 0 0 1px #FFE3DB}
body.light .kpi .k-val{color:var(--slate-900)}
body.light .kpi .k-lab{color:var(--slate-500)}
/* formulaires */
body.light .label{color:var(--slate-500)}
body.light .input,body.light .select,body.light textarea.input{
  border-color:var(--slate-200);background:#fff;color:var(--slate-900)}
body.light .input::placeholder{color:var(--slate-400)}
body.light .input:focus,body.light .select:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
/* boutons */
body.light .btn-ghost{background:#fff;border-color:var(--slate-200);color:var(--slate-800)}
body.light .btn-ghost:hover{background:var(--slate-50);color:var(--slate-900)}
body.light .btn-danger{background:#fff;border-color:#FECDD3;color:var(--bad)}
body.light .btn-danger:hover{background:var(--bad-bg)}
/* onglets */
body.light .tab,body.light .tab-btn{background:#fff;border-color:var(--slate-200);color:var(--slate-600)}
body.light .tab.on,body.light .tab-btn.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
/* tables */
body.light table.t th{background:var(--slate-50);color:var(--slate-500)}
body.light table.t td{border-top-color:var(--slate-100);color:var(--slate-800)}
body.light table.t tr:hover td{background:rgba(241,245,249,.55)}
body.light table.t td.num{color:var(--slate-900)}
body.light .cell-main{color:var(--slate-900)}
body.light .cell-sub{color:var(--slate-500)}
/* badges */
body.light .b-wait{background:var(--warn-bg);color:var(--warn);border-color:#FFE3DB}
body.light .b-admin{background:#EAFBF6;color:#12A183;border-color:#A5E3D2}
body.light .b-review{background:#F5F3FF;color:#6D28D9;border-color:#DDD6FE}
body.light .b-ok{background:var(--ok-bg);color:var(--ok);border-color:#A7F3D0}
body.light .b-bad{background:var(--bad-bg);color:var(--bad);border-color:#FECDD3}
body.light .b-off{background:var(--slate-100);color:var(--slate-500);border-color:var(--slate-200)}
body.light .b-brand{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-200)}
/* divers */
body.light .bar{background:var(--slate-100)}
body.light .bar>i{background:linear-gradient(90deg,var(--brand-500),var(--brand-600))}
body.light .spark>i{background:linear-gradient(180deg,var(--brand-400),var(--brand-600))}
body.light .list-row{border-top-color:var(--slate-100)}
body.light .kv dt{color:var(--slate-500)}
body.light .kv dd{color:var(--slate-800)}
body.light .warnbox{background:var(--warn-bg);border-color:#FFE3DB;color:#92400E}
/* chat */
body.light .chat{background:#fff;border-color:rgba(226,232,240,.7);
  box-shadow:0 1px 2px 0 rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.12)}
body.light .conv-list{border-right-color:var(--slate-100)}
body.light .conv{border-bottom-color:var(--slate-100)}
body.light .conv:hover{background:var(--slate-50)}
body.light .conv.on{background:var(--brand-50)}
body.light .conv .av{background:var(--slate-200);color:var(--slate-600)}
body.light .conv .nm{color:var(--slate-900)}
body.light .conv .ls{color:var(--slate-500)}
body.light .conv-quand{color:var(--slate-500)}
body.light .conv-fleche{color:var(--slate-400)}
body.light .chat-head{border-bottom-color:var(--slate-100)}
body.light .chat-body{background:var(--slate-50)}
body.light .msg.them{background:#fff;border-color:var(--slate-200);color:var(--slate-800)}
body.light .chat-foot{background:#fff;border-top-color:var(--slate-100)}
/* discussion en fenetre (les .msg.them / .msg.me du theme clair sont deja posees) */
body.light .chat-jour{background:var(--slate-200);color:var(--slate-600)}
body.light .msg-auteur{color:var(--slate-500)}
body.light .msg.me .msg-auteur{color:rgba(255,255,255,.85)}
body.light .chat-vide{color:var(--slate-500)}
body.light .chat-rec-temps{color:var(--slate-900)}
body.light .chat-rec-aide{color:var(--slate-500)}
/* modal */
body.light .modal{background:#fff;border:0;color:var(--slate-900)}
body.light .modal-head{border-bottom-color:var(--slate-100)}
body.light .modal-foot{background:var(--slate-50);border-top-color:var(--slate-100)}
/* login */
body.light .login-card{background:#fff;border:0;box-shadow:0 30px 80px rgba(0,0,0,.12)}
body.light .login-card h1{color:var(--slate-900)}
body.light .login-card p{color:var(--slate-500)}
body.light .login-foot{color:var(--slate-500)}
body.light .link{color:var(--brand-600)}

/* ---------- bandeau mise a jour ---------- */
.adm-maj{
  position:fixed;bottom:16px;right:16px;z-index:70;
  display:flex;align-items:center;gap:10px;
  background:var(--ink-800);border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--gold);border-radius:14px;
  padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:adm-maj-in .25s ease both;
}
@keyframes adm-maj-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.adm-maj-txt{display:flex;flex-direction:column;gap:2px}
.adm-maj-txt b{font-size:12.5px;font-weight:700;color:#fff}
.adm-maj-txt span{font-size:11px;color:var(--ink-300)}
body.light .adm-maj{background:#fff;border-color:rgba(0,0,0,.10);border-left-color:var(--gold);
  box-shadow:0 8px 30px rgba(0,0,0,.14)}
body.light .adm-maj-txt b{color:var(--slate-900)}
body.light .adm-maj-txt span{color:var(--slate-500)}

/* ---------- complements v2 (donnees reelles) ---------- */
.banner{display:flex;gap:9px;align-items:flex-start;background:#0F2A26;border:1px solid #1E4A42;color:#CFF5EC;
  border-radius:14px;padding:11px 13px;font-size:12.5px;margin-bottom:14px}
.banner b{color:#fff}
body.light .banner{background:#EAFBF6;border-color:#CFE9E1;color:#0A3B31}
body.light .banner b{color:var(--brand-700)}
/* b-info : variante informative (clair: bleu vif, sombre: bleu pastel) */
.b-info{background:rgba(18,161,131,.20);color:#6FD0B8;border-color:rgba(18,161,131,.35)}
body.light .b-info{background:#EAFBF6;color:#12A183;border-color:#A5E3D2}
.bars{display:flex;align-items:flex-end;gap:3px;height:110px}
.bars>i{flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#14A78F,var(--brand-600));min-height:3px}
.bars>i.g{background:linear-gradient(180deg,#FF8A6E,var(--gold))}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
/* err : fond rouge sombre, texte pastel rose */
.err{background:rgba(225,29,72,.14);border:1px solid rgba(225,29,72,.28);color:#FDA4AF;
  border-radius:10px;padding:9px 11px;font-size:12.5px;margin-bottom:12px}
body.light .err{background:var(--bad-bg);border-color:#FECDD3;color:var(--bad)}
.center{padding:60px 12px;text-align:center;color:var(--ink-400);font-size:13px}
.off-note{opacity:.55;pointer-events:none}


/* ---------- correctifs du 04/11/2026 : icone geante + classes utilitaires ------
   .b-info ne definissait que des couleurs : sans display:flex ni taille sur le
   <svg>, le triangle d'alerte prenait toute la largeur de la carte (vu en
   production sur le tableau de bord). Les six classes ci-dessous sont utilisees
   par les ecrans mais n'existaient nulle part dans cette feuille. */
.b-info{display:flex;gap:9px;align-items:flex-start;background:rgba(18,161,131,.20);
  color:#6FD0B8;border:1px solid rgba(18,161,131,.35);border-radius:14px;
  padding:11px 13px;font-size:12.5px;line-height:1.45}
.b-info svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
/* .off-note : meme piege, vu le 04/11/2026 sur « PayGate / LigdiCash » du Depôt
   classique — l'icone <svg> sans taille prenait toute la largeur du bloc. Le
   bloc est parti ; la regle reste pour les blocs « en attente » (Cashback). */
.off-note svg{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}
body.light .b-info{background:#EAFBF6;color:#12A183;border-color:#A5E3D2}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.small{font-size:12px;line-height:1.45}
.mt3{margin-top:12px}
.row-link{cursor:pointer}
.row-link:hover{background:rgba(37,99,235,.10)}
body.light .row-link:hover{background:#EAFBF6}
/* .btn-dark n'avait AUCUNE variante claire : texte blanc sur fond quasi blanc
   (bouton « Générer un token d'appareil » illisible en thème clair). */
body.light .btn-dark{background:var(--slate-900);border-color:var(--slate-900);color:#fff}
body.light .btn-dark:hover{background:var(--slate-800)}

/* ---------- tableaux DENSES (04/11/2026) --------------------------------------
   Le proprietaire voulait « beaucoup de transactions sur une seule page » : les
   lignes de .t gardent 11 px de marge haute/basse, ce qui plafonne a ~8 lignes
   sur un telephone. .dense divise la hauteur par deux sans changer la lisibilite. */
table.t.dense th{padding:6px 8px}
table.t.dense td{padding:6px 8px;font-size:12px;line-height:1.35;border-top:none;
  border-bottom:1px solid rgba(255,255,255,.07)}
body.light table.t.dense td{border-bottom-color:var(--slate-200)}
/* un PETIT espace entre deux lignes (04/11/2026), sans revenir aux cartes :
   border-spacing vertical de 6 px sur un tableau a bordures separees. */
table.t.dense{border-collapse:separate;border-spacing:0 6px}
table.t.dense td .badge{font-size:10px;padding:2px 7px}


/* ================================================================ CHAT (04/11/2026)
   Discussion de l'agent : bandeau de drapeaux, citation, emojis, reponses
   rapides, gestes sur les bulles, pave « nouveaux messages » et animations
   (bulle qui se pose, bouton d'envoi qui tourne puis se coche, barre vocale
   qui respire au rythme du micro). */

@keyframes chatBulle { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes chatPoint { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }
@keyframes chatVague { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
@keyframes chatTourne { to { transform: rotate(360deg); } }
@keyframes chatCoche { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes chatPave { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.chat-main { position: relative; display: flex; flex-direction: column; min-height: 0; }

/* --- bandeau de drapeaux (prise en charge, VIP, silence, surveillance) --- */
.chat-drapeaux { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.chat-drapeaux .btn-sm { padding: 3px 9px; font-size: 11.5px; }

/* --- bulle : arrivee, citation, gestes --- */
.msg.neuf { animation: chatBulle .2s ease-out; }
.msg-cite { margin: 2px 0 6px; padding: 5px 8px; border-left: 3px solid currentColor;
  border-radius: 6px; background: rgba(0, 0, 0, .16); font-size: 11.5px; opacity: .9; }
.msg-cite b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .85; }
.msg.me .msg-cite { background: rgba(0, 0, 0, .18); }
/* Les trois icones par message (repondre / modifier / supprimer) ont ete
   RETIREES de sous les bulles le 09/11/2026 a la demande du proprietaire (sur
   telephone elles s'affichaient en permanence et encombraient le fil). Elles
   ne sont pas perdues pour autant : un APPUI sur une bulle ouvre la barre
   `#ch-geste` au-dessus du champ (copier / repondre / modifier / supprimer). Ne
   pas remettre de rangee sous les bulles.
   `flex-wrap` : quatre boutons (copier ajoute le 10/11/2026) ne tiennent pas sur
   une seule ligne d'un telephone de 424 px ; ils passent a la ligne. */
.chat-geste { z-index: 4; flex-wrap: wrap; }
.chat-geste[hidden] { display: none; }
/* `.btn` est en inline-flex : sans cette regle, l'attribut [hidden] d'un bouton
   (crayon sur le message d'un client, corbeille sur un message recu) ne le
   masque PAS et on propose une action qui repondra 403. */
.chat-geste .btn[hidden] { display: none; }
.chat-geste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-geste span b { margin-right: 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--brand-400, #2FA98D); }
@media (max-width:720px){ .chat-geste span { display: none; } }

/* --- pave « nouveaux messages » --- */
.chat-pave { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; font-size: 12px;
  font-weight: 700; color: #fff; background: var(--brand-600); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  animation: chatPave .18s ease-out; }

/* --- barre de citation, au-dessus du champ --- */
.chat-cite { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.chat-cite[hidden] { display: none; }
.chat-cite-barre { width: 3px; align-self: stretch; border-radius: 2px; background: var(--brand-500, #14A78F); }
.chat-cite-txt { flex: 1; min-width: 0; font-size: 11.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.chat-cite-txt b { margin-right: 6px; color: var(--brand-400, #2FA98D); }

/* --- panneaux emojis / reponses rapides --- */
.chat-panneau { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px; max-height: 148px; overflow-y: auto; padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); }
.chat-panneau[hidden] { display: none; }
.chat-emoji { border: 0; background: transparent; font-size: 19px; line-height: 1;
  padding: 5px 0; cursor: pointer; border-radius: 6px; }
.chat-emoji:hover { background: rgba(255, 255, 255, .10); }
#ch-rapides { display: block; }
#ch-rapides[hidden] { display: none; }
.chat-rapide { display: block; width: 100%; text-align: left; padding: 7px 8px;
  border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer;
  font-size: 12px; line-height: 1.35; }
.chat-rapide:hover { background: rgba(255, 255, 255, .08); }
.chat-rapide b { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--brand-400, #2FA98D); }

/* --- bouton d'envoi : tourne pendant l'envoi, se coche ensuite --- */
.chat-envoyer { position: relative; }
.chat-envoyer.envoi svg, .chat-envoyer.fait svg { opacity: 0; }
.chat-envoyer.envoi::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: chatTourne .65s linear infinite; }
.chat-envoyer.fait::after { content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; animation: chatCoche .26s ease-out; }
.chat-envoyer.fait { background: #16a34a; }

/* --- enregistrement vocal : point qui pulse + barres qui suivent le micro --- */
.chat-rec-point { animation: chatPoint 1s ease-in-out infinite; }
.chat-rec-vague { display: inline-flex; align-items: center; gap: 2px; height: 22px; flex: 1;
  justify-content: center; color: var(--brand-400, #2FA98D); }
.chat-rec-vague span { width: 3px; height: 100%; border-radius: 2px; background: currentColor;
  transform: scaleY(.12); transform-origin: center; transition: transform .07s linear; }
.chat-rec-vague.anime span { animation: chatVague 1s ease-in-out infinite; }
.chat-rec-vague.anime span:nth-child(2n) { animation-delay: .12s; }
.chat-rec-vague.anime span:nth-child(3n) { animation-delay: .24s; }
.chat-rec-vague.anime span:nth-child(5n) { animation-delay: .36s; }

/* Confirmation DANS le fil (suppression d'un message) : une seconde fenetre
   appellerait modal() -> close(), et la conversation se fermerait. */
.chat-confirme { position: static; margin: 0 10px 8px; z-index: 3;
  /* DANS LE FLUX, sous le fil : colle au bas du fil (absolu), la bande — et la
     barre d'actions #ch-geste qui partage ce bloc — recouvrait le dernier
     message (capture du 10/11/2026 : « cette affichage bloque la vu »). En flux
     le fil se reduit de la hauteur de la bande, rien n'est cache. */
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(20, 22, 30, .97); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45); animation: chatPave .16s ease-out; }
.chat-confirme[hidden] { display: none; }
.chat-confirme span { flex: 1; font-size: 12px; line-height: 1.35; }
.chat-confirme .btn { flex: 0 0 auto; }

/* Telephone : six boutons ronds + le champ doivent tenir sur une seule ligne. */
@media (max-width:720px){
  .chat-saisie{gap:5px}
  .chat-rond{width:34px;height:34px}
  .chat-rond svg{width:15px;height:15px}
  .chat-champ{padding:15px 14px;min-height:58px;font-size:14px}
  .chat-panneau{grid-template-columns:repeat(8,minmax(0,1fr));max-height:132px}
  .chat-emoji{font-size:18px}
  .chat-confirme span{font-size:11.5px}
}

/* Barre d'outils du chat : deux lignes, jamais ecrasees.
   Avant, six boutons ronds et le champ se partageaient une seule rangee : sur un
   telephone de 424 px le champ tombait a ~60 px et les boutons se chevauchaient.
   Le champ occupe desormais toute la premiere ligne (order:-1, base 100 %), les
   boutons passent en dessous ; Envoyer reste colle a droite. */
.chat-saisie{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.chat-saisie .chat-champ{order:-1;flex:1 1 100%;width:100%;min-height:54px;padding:13px 14px;line-height:1.45}
.chat-saisie .chat-envoyer{margin-left:auto}
.chat-saisie .chat-rond{flex:0 0 auto}

/* Bulle « envoi… » : le message part a l'ecran avant la relecture du fil. */
.msg.envoi{opacity:.78}
.msg.envoi .tm{font-style:italic}

/* « Le client écrit dans un autre salon » : bandeau d'avertissement, sous les
   drapeaux. Une reponse posee dans le mauvais fil ne parvient pas au client. */
.chat-ailleurs{display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:rgba(255,107,74,.14);border-bottom:1px solid rgba(255,107,74,.35);
  font-size:12px;line-height:1.35;color:var(--ink-100)}
.chat-ailleurs[hidden]{display:none}
.chat-ailleurs span{flex:1;min-width:0}
.chat-ailleurs .btn{flex:0 0 auto}

/* Compteur de messages clients sur l'icone du tchat (veille de 20 s). */
.icon-btn{position:relative}
.icon-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:#DC2626;color:#fff;font-size:10px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--ink-900)}
.icon-badge[hidden]{display:none}
body.light .icon-badge{box-shadow:0 0 0 2px #fff}

/* Pastille de non-lus dans la LISTE des conversations : le badge du haut dit
   combien, celle-ci dit OU. */
.conv-nonlus{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#DC2626;
  color:#fff;font-size:10.5px;font-weight:800}
.badge.b-bad{background:#DC2626;color:#fff}

/* Deux interrupteurs de service (Dépôt / Retrait) dans Réglages. */
.svc-ligne{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.svc-ligne:last-of-type{border-bottom:0}
.svc-ligne .btn{flex:0 0 auto;min-width:92px;justify-content:center}
body.light .svc-ligne{border-bottom-color:var(--slate-200)}

/* Appareils relais sur telephone : une carte par appareil (pas de tableau a
   defilement horizontal). */
.relais-liste{display:flex;flex-direction:column;gap:8px}
.relais-carte{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08)}
.relais-haut{display:flex;align-items:center;gap:8px;justify-content:space-between}
.relais-num{margin:4px 0 2px;font-size:14px;font-weight:700}
body.light .relais-carte{background:var(--slate-50);border-color:var(--slate-200)}

/* ---------- tirer l'ecran vers le bas = actualiser (telephone) ----------
   Chrome Android rechargeait la PAGE entiere (retour en haut, filtres perdus)
   et une WebView ne faisait RIEN : le panneau n'avait donc aucun geste
   d'actualisation. Le geste est pris a notre compte : la feuille coupe le
   rafraichissement natif, la coquille relance render() sur l'ecran courant. */
html,body{overscroll-behavior-y:contain}
.ptr{
  position:fixed;top:0;left:50%;z-index:60;display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:0 0 14px 14px;
  background:rgba(24,24,27,.96);border:1px solid rgba(255,255,255,.10);border-top:0;
  color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
  transform:translate(-50%,-56px);opacity:0;pointer-events:none;
  transition:transform .18s ease,opacity .18s ease;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
}
.ptr.suit{transition:none}
.ptr .ptr-ico{display:grid;place-items:center;width:16px;height:16px;color:var(--ink-300)}
.ptr .ptr-ico svg{width:16px;height:16px}
.ptr.pret .ptr-ico{color:var(--gold)}
.ptr.charge .ptr-ico{color:var(--gold);animation:ptr-tour .9s linear infinite}
@keyframes ptr-tour{to{transform:rotate(360deg)}}
body.light .ptr{background:#fff;border-color:rgba(0,0,0,.10);color:var(--slate-900);
  box-shadow:0 8px 24px -12px rgba(15,23,42,.35)}
body.light .ptr .ptr-ico{color:var(--slate-500)}

/* TUILE CLIQUABLE (aperçu Relais SMS) : « SMS libres », « Rapprochés »,
   « Ignorés » ouvrent la liste déjà filtrée. Une tuile qui reagit a l'appui
   mais ne le DIT pas se lit comme un bouton mort : curseur, fleche discrete
   et etat presse. */
.kpi-lien{position:relative;cursor:pointer;transition:border-color .15s,background .15s}
.kpi-lien::after{content:"\203A";position:absolute;top:12px;right:14px;font-size:18px;
  line-height:1;color:var(--ink-500)}
.kpi-lien:hover{border-color:rgba(255,107,74,.35)}
.kpi-lien:active{background:rgba(255,107,74,.08)}
body.light .kpi-lien::after{color:var(--slate-400)}
body.light .kpi-lien:hover{border-color:var(--brand-200);background:#FFFDF7}
body.light .kpi-lien:active{background:var(--gold-soft)}

/* ---------- PARRAINAGE : cartes « parrain » (recopie de l'ecran sbbservices) ---------- */
.pr-champ{position:relative;margin-bottom:14px}
.pr-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-400);display:grid;place-items:center}
.pr-ico svg{width:17px;height:17px}
.pr-recherche{padding-left:42px;width:100%}
.pr-carte{background:var(--ink-800);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:16px 18px;margin-bottom:12px}
.pr-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pr-nom{font-size:16px;font-weight:700;color:#fff;line-height:1.3}
.pr-droite{display:flex;align-items:center;gap:10px}
.pr-palier{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.pr-palier.bronze{background:rgba(180,83,9,.20);color:#FFA78F;box-shadow:inset 0 0 0 1px rgba(255,107,74,.30)}
.pr-palier.argent{background:rgba(148,163,184,.16);color:#E2E8F0;box-shadow:inset 0 0 0 1px rgba(148,163,184,.30)}
.pr-palier.or{background:rgba(255,107,74,.24);color:#FFE3DB;box-shadow:inset 0 0 0 1px rgba(255,107,74,.45)}
.pr-palier.diamant{background:rgba(61,99,150,.35);color:#CFF5EC;box-shadow:inset 0 0 0 1px rgba(143,166,201,.40)}
.pr-palier.rejete{background:rgba(225,29,72,.16);color:#FDA4AF;box-shadow:inset 0 0 0 1px rgba(225,29,72,.35)}
.pr-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:800;letter-spacing:.08em;color:#fff}
.pr-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.pr-lab{font-size:11px;color:var(--ink-400);line-height:1.2}
.pr-val{font-size:15px;font-weight:700;color:#fff;margin-top:3px}
.pr-bareme{margin-top:12px;font-size:11px;color:var(--ink-400)}
.pr-retrait{margin-top:10px;font-size:14px;color:var(--ink-300)}
.pr-retrait strong{color:#fff;font-weight:700}
.pr-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:0 16px}
.pr-aide{font-size:11px;color:var(--ink-400);margin-top:4px;line-height:1.35}
.pr-apercu{font-size:12px;color:var(--ink-300);background:rgba(14,124,102,.30);border:1px solid rgba(143,166,201,.25);border-radius:12px;padding:10px 12px;margin:6px 0 0}
.pr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:600px){.pr-chiffres{grid-template-columns:repeat(2,1fr)}}

body.light .pr-carte{background:#fff;border-color:var(--slate-200);box-shadow:var(--shadow)}
body.light .pr-nom,body.light .pr-val,body.light .pr-code,body.light .pr-retrait strong{color:var(--slate-900)}
body.light .pr-lab,body.light .pr-bareme,body.light .pr-aide{color:var(--slate-500)}
body.light .pr-retrait{color:var(--slate-700)}
body.light .pr-apercu{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-700)}
body.light .pr-palier.bronze{background:var(--gold-soft);color:#92400E;box-shadow:inset 0 0 0 1px #FFA78F}
body.light .pr-palier.argent{background:var(--slate-100);color:var(--slate-600);box-shadow:inset 0 0 0 1px var(--slate-300)}
body.light .pr-palier.or{background:#FEF9C3;color:#854D0E;box-shadow:inset 0 0 0 1px #FFE3DB}
body.light .pr-palier.diamant{background:var(--brand-50);color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--brand-200)}
body.light .pr-palier.rejete{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px #FECDD3}


/* ==========================================================================
   DEUX CLASSES ECRITES PAR LE PANNEAU SANS AUCUNE REGLE (09/11/2026)
   - .ptr-txt : libelle de l'indicateur « Tirez pour actualiser ». Sans regle il
     heritait de body et pouvait passer sur deux lignes dans une barre etroite.
   - .tx-etat : entete de la fiche d'une transaction (pastille + libelle + n0 de
     SMS). Pose en flex pour que la pastille et son libelle restent sur la meme
     ligne, et se replient proprement sur un telephone.
   Aucune couleur nouvelle : les deux suivent les jetons du theme.
   ========================================================================== */
.ptr .ptr-txt{display:inline-block;max-width:70vw;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tx-etat{display:flex;align-items:center;flex-wrap:wrap}

/* =====================================================================
   12/11/2026 — HONO RECHARGE · BACKOFFICE « ARDOISE » (palette A)
   Couche de refonte : KPI en grille auto, tableaux a en-tete collant et
   survol lagon, fenetres en 22 px sur fond floute, marqueur d'onglet
   actif turquoise, cartes du relais avec filet d'etat.
   ===================================================================== */
.shell { --hono-line: rgba(255,255,255,.08); }
body.light .shell { --hono-line: rgba(16,37,31,.12); }

/* --- KPI : grille qui s'adapte, filet d'accent, valeur en gros -------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.kpi { position: relative; border-radius: 18px; border: 1px solid var(--hono-line); padding: 15px 16px 14px; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: .85; }
.kpi .k-val { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .k-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); }
.kpi .k-ico { background: rgba(45,212,167,.12); color: var(--accent); border: 1px solid rgba(45,212,167,.22); }
.kpi:hover .k-ico { background: rgba(45,212,167,.18); color: var(--accent); }

/* --- tableaux : en-tete collant, lignes respirees, survol lagon ------- */
table.t thead th, table.t th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ink-800);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px;
  color: var(--ink-400); border-bottom: 1px solid var(--hono-line);
}
body.light table.t thead th, body.light table.t th { background: #fff; }
table.t td { border-bottom: 1px solid var(--hono-line); padding-top: 11px; padding-bottom: 11px; }
table.t tbody tr:hover { background: rgba(45,212,167,.06); }

/* --- fenetres : 22 px, fond floute, tete separee ---------------------- */
.modal-bg, .modal-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { border-radius: 22px; border: 1px solid var(--hono-line); }
.modal-head { border-bottom: 1px solid var(--hono-line); padding-bottom: 12px; }
.modal-foot { border-top: 1px solid var(--hono-line); }

/* --- navigation : marqueur turquoise de l'entree active --------------- */
.nav-item.active::before { background: var(--accent); width: 3px; }
.nav-item.active { background: rgba(45,212,167,.10); }

/* --- relais SMS : carte d'appareil avec filet d'etat ------------------ */
.relais-carte { position: relative; border-radius: 16px; border: 1px solid var(--hono-line); padding-left: 16px; }
.relais-carte::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }
.relais-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.relais-carte .badge { letter-spacing: .03em; }
body.light .relais-carte { background: #fff; }

/* --- 12/11/2026 · TABLEAU DE BORD : bande de tuiles, barre de periode, deux
   colonnes (volume + bookmakers / file de validation + repartition). Sous
   1000 px, une seule colonne : la file de validation remonte juste apres la
   bande, avant les graphiques — c'est ce qu'on traite en premier. -------- */
.adm-tb { display: flex; flex-direction: column; gap: 14px; }
.adm-tb-tuiles .grid { gap: 10px; }
.adm-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--hono-line); border-radius: 14px;
  background: rgba(255,255,255,.03);
}
body.light .adm-barre { background: #fff; }
.adm-barre-titres { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-barre-info { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-400); }
.adm-tb-corps {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.adm-tb-principal, .adm-tb-cote { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) {
  .adm-tb-corps { grid-template-columns: 1fr; }
  .adm-tb-cote { order: -1; }
}

/* --- RELAIS SMS : bandeau d'alertes (passerelle muette, SMS a rapprocher) --- */
.relais-alertes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.relais-alerte {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 14px; font-size: 12.5px;
  background: rgba(255,255,255,.04); border: 1px solid var(--hono-line);
}
.relais-alerte .badge { flex: 0 0 auto; }
body.light .relais-alerte { background: #fff; }