/* panneau-v2.css — backoffice FRANCKO RECHARGE : design de la nouvelle interface (Inter, bleu maison #143C72 + or, cartes 24 px, theme clair/sombre) */
:root{
  /* bleu de la marque Francko Recharge — la MEME rampe que l'espace client
     (static/css/app.css) : une seule identite dans tout le produit. */
  --brand-50:#EFF4FB; --brand-100:#D8E4F3; --brand-200:#B3C9E6; --brand-300:#7FA6D4;
  --brand-400:#4A7CBE; --brand-500:#21589C; --brand-600:#143C72; --brand-700:#113160;
  --gold:#F59E0B; --gold-soft:#FEF3C7;
  --ink-300:#9D9DA6; --ink-400:#71717A; --ink-500:#52525B; --ink-700:#0d1c3a;
  --ink-800:#0b1329; --ink-900:#080e1e; --ink-950:#060b18;
  --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;
  --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(135deg,#143C72,#4A7CBE);
  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:#6FA3E8;box-shadow:inset 0 0 0 1px rgba(78,123,184,.30)}
.kpi:hover .k-ico{background:rgba(245,158,11,.18);color:#FBBF24;box-shadow:inset 0 0 0 1px rgba(245,158,11,.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:#4A7CBE;box-shadow:0 0 0 3px rgba(20,60,114,.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:#FBBF24;border-color:rgba(180,83,9,.38)}
.b-admin{background:rgba(29,78,216,.22);color:#93C5FD;border-color:rgba(29,78,216,.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)}
.b-brand{background:rgba(20,60,114,.32);color:#6FA3E8;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,#4A7CBE,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,#4A7CBE,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:#FCD34D;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(20,60,114,.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}
.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:#6FA3E8;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)}
  .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(20,60,114,.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 #FDE68A}
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:#FDE68A}
body.light .b-admin{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
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:#FDE68A;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:#1B2A44;border:1px solid #2B4470;color:#C9D8EF;
  border-radius:14px;padding:11px 13px;font-size:12.5px;margin-bottom:14px}
.banner b{color:#fff}
body.light .banner{background:#EFF3F9;border-color:#D6E0EE;color:#274466}
body.light .banner b{color:var(--brand-700)}
/* b-info : variante informative (clair: bleu vif, sombre: bleu pastel) */
.b-info{background:rgba(29,78,216,.20);color:#93C5FD;border-color:rgba(29,78,216,.35)}
body.light .b-info{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.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,#2C5C94,var(--brand-600));min-height:3px}
.bars>i.g{background:linear-gradient(180deg,#FBBF24,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(29,78,216,.20);
  color:#93C5FD;border:1px solid rgba(29,78,216,.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:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.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:#EFF6FF}
/* .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); }
.msg-actions { display: flex; justify-content: flex-end; gap: 2px; margin-top: 2px;
  opacity: 0; transition: opacity .14s ease; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
.msg-actions button { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: inherit; opacity: .62; }
.msg-actions button:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.msg-actions svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .msg-actions { opacity: .6; } }

/* --- 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, #3b82f6); }
.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, #60a5fa); }

/* --- 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, #60a5fa); }

/* --- 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, #60a5fa); }
.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: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  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(245,158,11,.14);border-bottom:1px solid rgba(245,158,11,.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(245,158,11,.35)}
.kpi-lien:active{background:rgba(245,158,11,.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:#FCD34D;box-shadow:inset 0 0 0 1px rgba(245,158,11,.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(245,158,11,.24);color:#FDE68A;box-shadow:inset 0 0 0 1px rgba(245,158,11,.45)}
.pr-palier.diamant{background:rgba(61,99,150,.35);color:#DCE4F1;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(20,60,114,.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 #FCD34D}
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 #FDE68A}
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}