:root{
  --nuit:#141B3C;
  --nuit-2:#0C1230;
  --nuit-3:#1E285A;
  --or:#E7B24C;
  --or-fonce:#b5852c;
  --menthe:#33C6A0;
  --surface:#EEF0F7;
  --carte:#FFFFFF;
  --encre:#141627;
  --gris:#71768F;
  --ligne:rgba(20,27,60,.10);
  --rouge:#D64C4C;
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--encre);
  background:
    radial-gradient(120% 80% at 15% -10%, #1c2758 0%, transparent 55%),
    radial-gradient(120% 80% at 95% 0%, #241a3f 0%, transparent 50%),
    var(--nuit-2);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.page{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 18px;
}
.carte{
  width:100%;max-width:410px;
  background:var(--carte);
  border-radius:26px;
  padding:30px 26px 28px;
  box-shadow:0 30px 70px -30px rgba(8,12,40,.7);
}
.marque{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:22px;letter-spacing:-.4px;
  color:var(--nuit);text-decoration:none;margin-bottom:22px;
}
.marque b{color:var(--or-fonce)}
.coin{
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F4D690, var(--or) 62%, var(--or-fonce) 100%);
  color:#5a4212;display:grid;place-items:center;font-weight:700;font-size:14px;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25);
}
.titre{font-size:24px;letter-spacing:-.5px;margin-bottom:6px}
.sous{color:var(--gris);font-size:14px;line-height:1.55;margin-bottom:22px}

/* alertes / flash */
.alerte{
  border-radius:13px;padding:12px 14px;font-size:13.5px;font-weight:500;
  margin-bottom:16px;line-height:1.45;border:1px solid transparent;
}
.alerte--succes{background:rgba(51,198,160,.12);color:#137a5f;border-color:rgba(51,198,160,.3)}
.alerte--erreur{background:rgba(214,76,76,.10);color:#a72f2f;border-color:rgba(214,76,76,.28)}
.alerte--info{background:rgba(20,27,60,.06);color:var(--nuit);border-color:var(--ligne)}

/* formulaires */
form{display:block}
.groupe{margin-bottom:16px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:13px;font-weight:600;color:var(--encre);margin-bottom:7px}
.opt{color:var(--gris);font-weight:400}
.label-ligne{display:flex;justify-content:space-between;align-items:baseline}
.mini-lien{font-size:12.5px;color:var(--or-fonce);text-decoration:none;font-weight:600}
input{
  width:100%;font-family:inherit;font-size:15px;color:var(--encre);
  background:var(--surface);border:1px solid var(--ligne);border-radius:13px;
  padding:13px 14px;transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:#9a9fb8}
input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(231,178,76,.18);background:#fff}
.code-otp{text-align:center;letter-spacing:10px;font-size:22px;font-weight:600}

.bouton{
  width:100%;border:none;cursor:pointer;font-family:inherit;
  background:var(--or);color:#3d2c08;font-weight:700;font-size:15px;
  border-radius:14px;padding:15px;margin-top:6px;
  transition:transform .12s, filter .15s;
}
.bouton:hover{filter:brightness(1.03)}
.bouton:active{transform:translateY(1px)}
.bouton--sombre{background:var(--nuit);color:#fff}

.lien-bas{margin-top:20px;text-align:center;font-size:13.5px;color:var(--gris)}
.lien-bas a{color:var(--nuit);font-weight:600;text-decoration:none}
.lien-bas a:hover{text-decoration:underline}
.pied{margin-top:20px;color:#8288aa;font-size:12px;text-align:center}

/* tableau de bord */
.tb-entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.tb-bonjour{color:var(--gris);font-size:13px}
.tb-nom{font-size:21px;letter-spacing:-.3px}
.tb-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--nuit);color:var(--or);
  display:grid;place-items:center;font-weight:700;font-size:18px;
}
.tb-solde{
  background:linear-gradient(160deg,var(--nuit),var(--nuit-3));color:#fff;
  border-radius:20px;padding:20px 22px;margin-bottom:18px;
}
.tb-solde span{font-size:12.5px;color:#aab0d4}
.tb-solde strong{display:block;font-size:34px;font-weight:700;letter-spacing:-1px;margin-top:6px}
.tb-solde small{font-size:17px;color:var(--or);font-weight:500}
.tb-infos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.tb-info{background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:12px 14px}
.tb-info span{display:block;font-size:11.5px;color:var(--gris);margin-bottom:3px}
.tb-info b{font-size:14px;font-weight:600}
.tb-info b.ok{color:#137a5f}
.tb-note{font-size:12.5px;color:var(--gris);line-height:1.5;margin-bottom:18px}

@media (max-width:380px){
  .carte{padding:24px 20px}
  .duo{grid-template-columns:1fr}
}

/* ============ Historique client (tableau) ============ */
.tb-qr{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:linear-gradient(120deg,var(--or),var(--or-fonce));color:#3d2c08;
  border-radius:16px;padding:14px 16px;margin-bottom:18px;
}
.tb-qr span{font-size:12px;display:block;opacity:.85;line-height:1.3}
.tb-qr b{font-size:18px;letter-spacing:1px}
.tb-qr .tb-grat{background:rgba(255,255,255,.85);border-radius:10px;padding:6px 11px;font-size:12px;font-weight:700;flex:none}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.tb-ops{margin-bottom:18px}
.tb-ops h3{font-size:14px;font-weight:700;margin-bottom:8px}
.vide{color:var(--gris);font-size:13px;padding:10px 0;line-height:1.5}
.op{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ligne)}
.op:last-child{border-bottom:none}
.op-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:16px;font-weight:700}
.op-ic.in{background:rgba(51,198,160,.14);color:#137a5f}
.op-ic.out{background:rgba(20,27,60,.07);color:var(--nuit)}
.op-c{flex:1;min-width:0}
.op-c b{font-size:13.5px;font-weight:600;display:block}
.op-c span{font-size:11.5px;color:var(--gris)}
.op-m{font-weight:700;font-size:14px;white-space:nowrap}
.op-m.p{color:var(--menthe)}
.op-m.n{color:var(--encre)}

/* ============ Ecrans agent ============ */
.ag-tete{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.ag-bonjour{color:var(--gris);font-size:12.5px}
.ag-tete .titre{font-size:20px;margin-top:2px}
.ag-quit{margin:0}
.ag-quit button{background:var(--surface);border:1px solid var(--ligne);color:var(--gris);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:10px}
.ag-flotte{background:linear-gradient(160deg,var(--nuit),var(--nuit-3));color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:18px}
.ag-flotte span{font-size:12px;color:#aab0d4}
.ag-flotte strong{display:block;font-size:28px;font-weight:700;letter-spacing:-.6px;margin-top:4px}
.ag-flotte small{font-size:15px;color:var(--or);font-weight:500}
.ag-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.type-opt{position:relative;cursor:pointer}
.type-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.type-opt span{display:block;text-align:center;border:1.5px solid var(--ligne);border-radius:14px;padding:13px;font-weight:700;font-size:14px;color:var(--encre)}
.type-opt span small{display:block;font-weight:400;font-size:11px;color:var(--gris);margin-top:2px}
.type-opt input:checked + span{border-color:var(--or);background:rgba(231,178,76,.08)}

/* ============ Confirmation / recu ============ */
.confirm{background:var(--surface);border:1px solid var(--ligne);border-radius:16px;padding:8px 16px;margin-bottom:18px}

.om-qr-carte{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:24px;display:flex;justify-content:center;margin-bottom:16px}
.om-qr-img{width:220px;height:220px;image-rendering:pixelated}
.om-liens{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.om-ou{text-align:center;font-size:12px;color:var(--gris);margin:4px 0 18px}
.om-ussd{background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:14px 16px;text-align:center;margin-bottom:20px}
.om-ussd span{display:block;font-size:12px;color:var(--gris)}
.om-ussd b{display:block;font-size:18px;color:var(--nuit);margin-top:4px;letter-spacing:.5px}

.tb-commerce-bandeau{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--or),var(--or-fonce));border:none;border-radius:14px;padding:15px 16px;text-decoration:none;color:#3d2c0e;margin:16px 0;box-shadow:0 8px 18px -8px rgba(181,133,44,.55)}
.tb-commerce-ic{font-size:22px;flex:none;width:38px;height:38px;background:rgba(255,255,255,.35);border-radius:11px;display:flex;align-items:center;justify-content:center}
.tb-commerce-txt{flex:1;min-width:0}
.tb-commerce-txt b{display:block;font-size:14.5px;color:#2d2007;font-weight:800}
.tb-commerce-txt small{display:block;font-size:12px;color:#5a4212;margin-top:1px}
.tb-commerce-fleche{font-size:20px;color:#3d2c0e;flex:none;font-weight:700}
.confirm-succes{text-align:center;margin-bottom:22px}
.confirm-succes-ic{width:60px;height:60px;border-radius:50%;background:rgba(51,198,160,.14);color:#1f8a6c;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;margin:0 auto 16px}
.confirm-l,.confirm-t,.confirm-c{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13.5px;border-bottom:1px solid var(--ligne)}
.confirm-l:last-child{border-bottom:none}
.confirm-l span,.confirm-t span,.confirm-c span{color:var(--gris)}
.confirm-l b{font-weight:600}
.confirm-t{border-bottom:1px solid var(--ligne)}
.confirm-t b{font-size:18px;font-weight:700;color:var(--nuit)}
.confirm-c b{color:var(--menthe);font-weight:700}
.recu-ok{text-align:center;margin-bottom:18px}
.recu-check{width:60px;height:60px;border-radius:50%;background:rgba(51,198,160,.14);display:grid;place-items:center;margin:0 auto 12px}
.recu-check svg{width:30px;height:30px}
a.bouton{display:block;text-align:center;text-decoration:none}

/* bouton envoyer sur l'accueil client */
.tb-envoyer{display:block;text-align:center;text-decoration:none;margin:0 0 18px}
.chip{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:12px;border:1px solid var(--ligne);background:var(--surface);cursor:pointer;color:var(--nuit);font-family:inherit}
.chip:hover{border-color:var(--or)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

/* actions rapides tableau client */
.tb-actions{display:flex;gap:8px;margin-bottom:18px}
.tb-act{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:12px 4px;color:var(--encre);font-size:11.5px;font-weight:600}
.tb-act:hover{border-color:var(--or)}
.tb-act-ic{width:34px;height:34px;border-radius:11px;background:var(--nuit);color:var(--or);display:grid;place-items:center;font-size:16px;font-weight:700}
/* operateurs en 3 colonnes */
.ag-type--3{grid-template-columns:repeat(3,1fr)}
.ag-type--3 .type-opt span{padding:12px 6px;font-size:13px}

/* badges operateurs (recharge/retrait) : couleur de marque + logo si dispo, sinon initiales */
.type-opt--logo span{padding:16px 8px 12px}
.op-logo{position:relative;width:52px;height:52px;border-radius:14px;margin:0 auto 8px;overflow:hidden;box-shadow:0 3px 8px -3px rgba(0,0,0,.35)}
.op-logo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;letter-spacing:.3px}
.op-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:9px;box-sizing:border-box}
.op-logo--orange{background:linear-gradient(135deg,#FF9142,#E86800)}
.op-logo--wave{background:linear-gradient(135deg,#3DD5FF,#0EA5D9)}
.op-logo--yas{background:linear-gradient(135deg,#FF4D5E,#C8102E)}

/* ===== QR fixe (tableau client) ===== */
.tb-qr-bloc{display:flex;align-items:center;gap:14px;background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:14px;margin-bottom:16px}
.tb-qr-img{width:96px;height:96px;flex:none;background:#fff;border-radius:10px;padding:4px}
.tb-qr-img svg{width:100%;height:100%;display:block}
.tb-qr-txt span{font-size:12.5px;color:var(--gris);line-height:1.4;display:block;margin-bottom:8px}
.tb-qr-txt b.mono{font-size:15px;letter-spacing:1px;color:var(--nuit)}
.tb-lien-sec{text-align:center;margin:-6px 0 16px}
.tb-lien-sec a{font-size:12.5px;color:var(--or-fonce);font-weight:600;text-decoration:none}

/* ===== QR de retrait (client) ===== */
.qr-cadre{background:#fff;border:1px solid var(--ligne);border-radius:20px;padding:18px;max-width:260px;margin:6px auto 14px}
.qr-cadre svg{width:100%;height:auto;display:block}
.qr-compte{text-align:center;font-size:13px;color:var(--nuit);font-weight:600;margin-bottom:6px}
.qr-compte span{color:var(--or-fonce)}

/* ===== Scanner agent ===== */
.scan-reader{border-radius:16px;overflow:hidden;margin-bottom:16px;border:1px solid var(--ligne)}
.ag-scan{display:block;text-align:center;text-decoration:none;margin-bottom:4px}
.ag-sep{display:flex;align-items:center;gap:12px;color:var(--gris);font-size:12px;margin:16px 0}
.ag-sep::before,.ag-sep::after{content:"";height:1px;background:var(--ligne);flex:1}
.scan-manuel{margin-top:16px;border-top:1px solid var(--ligne);padding-top:12px}
.scan-manuel summary{cursor:pointer;font-size:13px;color:var(--gris);font-weight:600}

/* video du scanner : remplir le cadre */
.scan-reader video{width:100%!important;height:auto!important;display:block;border-radius:16px}
.scan-reader{min-height:60px}
.scan-msg{font-size:13px;color:var(--gris);text-align:center;margin:10px 0 4px}

/* lignes d'operations cliquables + entete */
.tb-ops-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tb-ops-tete h3{font-size:14px;font-weight:700}
.tb-ops-tete a{font-size:12.5px;color:var(--or-fonce);font-weight:600;text-decoration:none}
.op-lien{text-decoration:none;color:inherit}
.op-lien:hover{background:var(--surface);border-radius:12px;margin:0 -8px;padding-left:8px;padding-right:8px}
.op-chev{color:#b6bace;font-size:20px;font-weight:400;margin-left:4px;flex:none}
.op-plus{display:block;text-align:center;text-decoration:none;color:var(--nuit);font-weight:600;font-size:13px;background:var(--surface);border:1px solid var(--ligne);border-radius:12px;padding:12px;margin-top:12px}
.op-plus:hover{border-color:var(--or)}

/* ===== Profil / parametres ===== */
.tb-avatar{text-decoration:none}
.pf-carte{display:flex;align-items:center;gap:14px;background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:16px;margin-bottom:20px}
.pf-avatar{width:56px;height:56px;flex:none;border-radius:50%;background:var(--nuit);color:var(--or);display:grid;place-items:center;font-weight:700;font-size:20px}
.pf-id{display:flex;flex-direction:column;gap:3px}
.pf-id b{font-size:16px}
.pf-id span{font-size:13px;color:var(--gris)}
.pf-badge{font-size:11.5px!important;color:var(--or-fonce)!important;font-weight:600}
.pf-titre{font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;margin:22px 0 8px}
.pf-bloc{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:16px}
.pf-lig{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.pf-lig b{font-weight:700}
.pf-barre{height:8px;border-radius:6px;background:var(--surface);overflow:hidden;margin:10px 0 8px}
.pf-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-fonce))}
.pf-sous{display:flex;justify-content:space-between;font-size:12.5px;color:var(--gris)}
.pf-wa{display:flex;align-items:center;gap:14px;text-decoration:none;background:#25D366;border-radius:16px;padding:14px 16px}
.pf-wa-ic{width:40px;height:40px;flex:none;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;color:#fff}
.pf-wa-ic svg{width:24px;height:24px}
.pf-wa-txt{display:flex;flex-direction:column;color:#fff}
.pf-wa-txt b{font-size:15px}
.pf-wa-txt small{font-size:12.5px;opacity:.9}
/* engrenages en-tetes */
.ag-tete-actions{display:flex;align-items:center;gap:10px}
.ag-gear{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--ligne);display:grid;place-items:center;text-decoration:none;color:var(--nuit);font-size:18px}
.adm-user a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}

/* ===== Ecran de verrou PIN ===== */
.vr{padding:10px 0}
.vr-avatar{width:64px;height:64px;border-radius:50%;background:var(--nuit);color:var(--or);display:grid;place-items:center;font-weight:700;font-size:24px;margin:6px auto 18px}
.vr-pin{text-align:center;letter-spacing:10px;font-size:22px}
.vr-quit{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:18px;color:var(--gris);font-size:13px}
.lien-bouton{background:none;border:0;color:var(--or-fonce);font-weight:700;cursor:pointer;font-size:13px;padding:2px}

/* ===== Cloche notifications + liste ===== */
.tb-entete-actions{display:flex;align-items:center;gap:10px}
.tb-cloche{position:relative;width:42px;height:42px;border-radius:50%;background:var(--carte);border:1px solid var(--ligne);display:grid;place-items:center;text-decoration:none;font-size:18px}
.tb-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e23b3b;color:#fff;font-size:11px;font-weight:700;font-style:normal;display:grid;place-items:center;line-height:1}
.nt-liste{display:flex;flex-direction:column;gap:10px}
.nt{display:flex;gap:12px;background:var(--carte);border:1px solid var(--ligne);border-radius:14px;padding:13px}
.nt--neuf{border-color:var(--or);background:#fffaf0}
.nt-ic{font-size:20px;flex:none}
.nt-c{display:flex;flex-direction:column;gap:3px}
.nt-c b{font-size:14px}
.nt-c span{font-size:13px;color:var(--encre)}
.nt-c small{font-size:11.5px;color:var(--gris);margin-top:2px}