/* =====================================================================
   RELIABLE (cPanel) – NOUVEAU LOOK
   Bleu de Reliable partout ; dégradé (rouge → rose → violet → bleu) pour les soldes et les statistiques ;
   mode sombre noir ; barre de navigation flottante ; tuiles 3D ; cartes de solde.
   ===================================================================== */
:root{
  --grad:linear-gradient(90deg,#EB5E5C 0%,#D44F9C 34%,#7B47E6 68%,#4B63EE 100%);
  --grad2:linear-gradient(135deg,#EB5E5C 0%,#D44F9C 30%,#7B47E6 65%,#4B63EE 100%);
}
/* ---------- Mode sombre : noir ---------- */
[data-theme="dark"]{--bg:#000;--card:#111113;--line:#26262B;--line2:rgba(255,255,255,.07);--mut:#9A9AA3;--pri-soft:#0E1E3D;--shadow:0 8px 28px rgba(0,0,0,.6)}
[data-theme="dark"] body,[data-theme="dark"] #app{background:#000}
[data-theme="dark"] .chero{background:#000;border-bottom:1px solid #1E1E22}
[data-theme="dark"] .sheet{box-shadow:0 -10px 34px rgba(0,0,0,.7)}

/* ---------- Bouton jour / nuit (uniquement dans les espaces) ---------- */
.ib[onclick="toggleTheme()"]{display:none!important}
.daynight{display:inline-flex;align-items:center;background:#ECECEF;border-radius:99px;padding:4px;gap:2px;flex:none}
.daynight button{width:36px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;color:#111}
.daynight button.on{background:#111;color:#fff}
.daynight .i{width:17px;height:17px}
[data-theme="dark"] .daynight{background:#2A2A30}
[data-theme="dark"] .daynight button{color:#E6EAF2}
[data-theme="dark"] .daynight button.on{background:#fff;color:#111}

/* ---------- Écran de démarrage (3 secondes) ---------- */
.splash2{position:absolute;inset:0;background:#1463F3;display:flex;align-items:center;justify-content:center;z-index:5}
.splash2 .wm{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-style:italic;color:#fff;font-size:64px;letter-spacing:-2px;transform:skewX(-9deg);text-shadow:0 10px 30px rgba(0,30,90,.25);animation:pop .7s ease both}

/* ---------- Barre de navigation flottante ---------- */
#app.hasnav #screen{bottom:0;padding-bottom:96px}
#app.hasnav #screen.nomscroll{padding-bottom:0}
#app #nav{left:14px;right:14px;bottom:14px;height:66px;border-radius:40px;border:0;background:#1463F3;box-shadow:0 18px 40px -14px rgba(20,70,200,.75);padding:7px;gap:4px;align-items:center;justify-content:space-between;z-index:700}
#app #nav button{flex:0 0 auto;width:52px;height:52px;border-radius:30px;flex-direction:row;gap:8px;color:rgba(255,255,255,.92);font-size:14px;font-weight:600}
#app #nav button span{display:none}
#app #nav button.on{flex:1 1 auto;width:auto;background:#fff;color:#1463F3;font-weight:800;padding:0 18px}
#app #nav button.on span{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app #nav button.on::before{display:none}
#app #nav button .i{width:23px;height:23px}
.hasnav .sheet .sheet-body{padding-bottom:96px}
/* La barre passe au-dessus du formulaire de la carte et du menu « Mon profil » (qui garde de la place en bas pour elle),
   mais SOUS les fenêtres et les messages */
.dbg{z-index:650}
.dpanel{z-index:660}
#app.hasnav .dpanel{padding-bottom:110px}
.mbg{z-index:950}
#toast{z-index:1000}
#app.hasnav #toast{bottom:96px}
.offline-bar{z-index:1100}
@media (min-width:640px){
  #app #nav{left:50%;right:auto;width:420px;margin-left:-210px}
  #app #nav button{flex:0 0 auto}
  #app #nav button.on{flex:1 1 auto}
  #app.hasnav .sheet{bottom:96px;max-height:calc(100% - 176px)}
  .hasnav .sheet .sheet-body{padding-bottom:18px}
}

/* ---------- Cartes de solde ---------- */
.chero{padding-bottom:16px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.wc{border-radius:26px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;min-height:200px;position:relative;overflow:hidden;text-align:left}
.wc.sol{background:var(--grad2);color:#fff;box-shadow:0 18px 36px -18px rgba(123,71,230,.9)}
.wc .whead{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}
.wc .sq{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none}
.wc .sq .i{width:22px;height:22px}
.wc .lab{margin-top:14px;font-size:13.5px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.wc .lab span{background:rgba(255,255,255,.22);padding:3px 8px;border-radius:8px;font-weight:700}
.wc .lab em{font-style:normal;opacity:.75}
.wc .amt{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:6px 0 14px;white-space:nowrap}
.wc .amt.hid{letter-spacing:3px}
.wc.neg .amt{color:#FFE1E1}
.wc .wbtn{margin-top:auto;width:100%;height:44px;border-radius:15px;background:#fff;color:#6A4FE8;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px}
.wc .wbtn .i{width:19px;height:19px}
.wc .wbtn.pay{color:#DC2626}
.wc.ref{background:var(--card);border:1px solid var(--line2);color:var(--txt);box-shadow:0 12px 28px -18px rgba(15,27,45,.45)}
.wc.ref .sq{background:var(--pri-soft);color:var(--pri)}
.wc.ref .lab span{background:var(--pri-soft);color:var(--pri)}
.wc.ref .code{font-size:19px;font-weight:800;letter-spacing:1.5px;margin:6px 0 2px;color:var(--pri);word-break:break-all}
.wc.ref .n{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.wc.ref .wbtn{background:var(--pri);color:#fff}
/* Masquer le solde */
.hidep{display:inline-flex;align-items:center;gap:6px;height:38px;padding:4px 10px 4px 4px;border-radius:99px;background:#fff;color:#111;font-weight:800;font-size:13px;box-shadow:0 6px 16px -8px rgba(0,0,0,.4);flex:none}
.hidep .c{width:30px;height:30px;border-radius:50%;background:#111;color:#C8F04B;display:flex;align-items:center;justify-content:center}
.hidep .c .i{width:16px;height:16px}
.hidep .ar{letter-spacing:-3px;opacity:.75}
.hidep .ar b{opacity:.4}
.wgrid .hidep{padding:4px;gap:0}
.wgrid .hidep span:not(.c){display:none}
/* Cartes virtuelles qui défilent (livreur, administration) */
.bal2{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 6px;padding:2px 16px 8px;scrollbar-width:none}
.bal2::-webkit-scrollbar{display:none}
.bal2 .wc{flex:0 0 82%;max-width:340px;scroll-snap-align:center;min-height:196px}
.bal2 .wc.bonus{background:linear-gradient(135deg,#7B47E6,#4B63EE)}
.dots2{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.dots2 i{width:7px;height:7px;border-radius:9px;background:var(--line);transition:width .2s}
.dots2 i.on{width:20px;background:var(--pri)}

/* ---------- Tuiles 3D de « Mon espace » ---------- */
.tiles3d{display:grid;grid-template-columns:1.08fr 1fr;gap:12px;margin-bottom:14px}
.t3{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(160deg,#FFFFFF,#F1EEFF);border:1px solid #ECE8FB;padding:16px;text-align:left;min-height:128px;color:var(--txt);box-shadow:0 12px 28px -18px rgba(76,40,170,.45);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.t3 b{display:block;font-size:17px;line-height:1.2;font-weight:800;position:relative;z-index:1}
.t3 small{display:block;color:var(--mut);font-size:12.5px;margin-top:6px;line-height:1.35;position:relative;z-index:1;max-width:62%}
.t3 img{position:absolute;pointer-events:none}
.t3.big{grid-row:span 2;min-height:270px}
.t3.big small{max-width:100%}
.t3.big img{width:150px;right:-14px;bottom:-12px}
.t3.sm img{width:54px;right:-2px;bottom:-10px}
.t3.wide{grid-column:span 2;min-height:112px}
.t3.wide img{width:86px;right:14px;bottom:-12px}
.t3 .cnt{position:absolute;left:16px;bottom:14px;background:var(--pri);color:#fff;font-weight:800;font-size:12px;padding:5px 10px;border-radius:99px;z-index:1}
[data-theme="dark"] .t3,[data-theme="dark"] .podium{background:linear-gradient(160deg,#17171B,#0C0C0E);border-color:#26262B}

/* ---------- Top 3 des livreurs ---------- */
.podium{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;gap:6px;padding:40px 6px 18px;margin-bottom:14px;border-radius:26px;background:linear-gradient(180deg,#F4F1FF,#FFFFFF);border:1px solid #ECE8FB;text-align:center}
.podium .p{display:flex;flex-direction:column;align-items:center;min-width:0}
.podium .ph{position:relative;border-radius:50%;padding:5px;background:var(--grad2)}
.podium .ph .av{display:flex;border:4px solid #fff;border-radius:50%;box-sizing:content-box}
.podium .rk{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:#1463F3;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;border:3px solid #fff;font-size:15px}
.podium .crown{position:absolute;left:50%;top:-38px;transform:translateX(-50%);width:54px}
.podium .nm{margin-top:24px;font-weight:800;font-size:14px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.podium .st{margin-top:4px;font-size:13px;color:var(--mut);display:flex;align-items:center;gap:4px;justify-content:center}
.podium .st .i{color:#F5B301}
.podium .me .nm::after{content:" (vous)";color:var(--pri);font-weight:700}

/* ---------- Tutoriel vidéo (Service client) ---------- */
.tuto{position:relative;border-radius:20px;overflow:hidden;background:#000;margin-top:10px}
.tuto video{display:block;width:100%;max-height:70vh;background:#000}

/* ---------- Véhicule sur la carte (vu du dessus) ---------- */
.mkveh{position:absolute;left:50%;top:50%;transform-origin:50% 50%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));transition:transform .6s ease;pointer-events:none}
.mkveh img{display:block}

/* ---------- Administration : retirer l'argent d'un compte ---------- */
.wdacc{width:100%;margin-top:8px}

/* ---------- Déconnexion à côté du jour / nuit ---------- */
.ib.rflogout{color:var(--bad)}
/* ---------- Fenêtres (confirmations…) : au milieu de l'écran, jamais cachées en bas ---------- */
.mbg{align-items:center;justify-content:center;padding:16px}
.mbox{border-radius:24px;max-height:86%;animation:pop .25s ease}
/* Fenêtre ouverte : pas de barre de navigation */
#app.modal-open #nav,#app:has(#modal .mbg) #nav{display:none!important}
/* Panneau de la carte descendu : il s'arrête au-dessus de la barre (la poignée reste visible pour le remonter) */
@media (max-width:639px){ #app.hasnav .sheet.closed{transform:translateY(calc(100% - 150px))} }