/* ════════════════════════════════════════════════
 *  BANGO WALLET — feuille de style
 *
 *  Extraite du bloc <style> de public/index.html.
 *  C'est LA CSS appliquée : ne pas éditer src/css/bango.css, qui est une
 *  copie morte antérieure à l'extraction.
 * ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   BANGO WALLET v5 — DESIGN SYSTEM
   Multi-platform: Android · iOS · Windows PWA
════════════════════════════════════════════════════ */

/* ── THEME VARIABLES ── */
:root,[data-theme="dark"]{
  --bg:#06080f; --bg2:#0b0d17; --bg3:#0f1220;
  --card:#101524; --card2:#151a2c; --card3:#1b2038; --card4:#212640;
  --border:rgba(255,255,255,0.055); --border2:rgba(255,255,255,0.095); --border3:rgba(255,255,255,0.15);
  --text:#eceff8; --text2:#97a0be; --text3:#4f5975; --text4:#313850;
  --input-bg:#0c0f1c;
  --shadow:0 2px 16px rgba(0,0,0,.55); --shadow-lg:0 8px 40px rgba(0,0,0,.7);
  --overlay:rgba(0,0,0,.82);
  --scrollbar:#1e2438;
  --mode:dark;
}
[data-theme="light"]{
  --bg:#f2f4fc; --bg2:#e8ecf7; --bg3:#dde3f5;
  --card:#ffffff; --card2:#f5f7fe; --card3:#ebeef8; --card4:#e0e5f5;
  --border:rgba(0,0,0,0.065); --border2:rgba(0,0,0,0.10); --border3:rgba(0,0,0,0.16);
  --text:#0c0f1e; --text2:#454d6a; --text3:#8891aa; --text4:#b2bad0;
  --input-bg:#edf0fb;
  --shadow:0 2px 16px rgba(0,0,0,.08); --shadow-lg:0 8px 40px rgba(0,0,0,.14);
  --overlay:rgba(0,0,0,.56);
  --scrollbar:#d8ddf0;
  --mode:light;
}
/* Accents. Les teintes ci-dessous valent pour le theme SOMBRE ; le theme
   clair les redefinit plus bas, car un accent regle sur fond noir est trop
   clair sur fond blanc (mesure : 1,58:1 au lieu des 4,5 exiges). */
:root{
  --gold:#f4b731; --gold2:#c99218; --gold3:#fdd270; --gold-bg:rgba(244,183,49,.12); --gold-bd:rgba(244,183,49,.24);
  --green:#05c98e; --green2:#04a472; --green-bg:rgba(5,201,142,.11);
  --red:#ef4444; --red-bg:rgba(239,68,68,.11);
  --blue:#3b82f6; --blue2:#1d4ed8; --blue-bg:rgba(59,130,246,.11);
  --purple:#8b5cf6; --purple-bg:rgba(139,92,246,.11);
  --teal:#06b6d4; --teal-bg:rgba(6,182,212,.11);
  --orange:#f97316; --orange-bg:rgba(249,115,22,.11);
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:14px; --r-sm:10px; --r-xs:6px; --r-lg:20px; --r-xl:26px;
  --t:.2s ease; --t-md:.32s cubic-bezier(.4,0,.2,1); --t-spring:.4s cubic-bezier(.34,1.56,.64,1);
  /* layout */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --sidebar-w:62px; --sidebar-ow:224px;
  --nav-h:62px; --topbar-h:54px; --ticker-h:26px;

  /* ══ SYSTEME DE DESIGN BANGO ══════════════════════════════
     Ajoute en phase 1 : rien ne change tant que les composants ne s'y
     referent pas. Chaque groupe remplace une dispersion mesuree. */

  /* ── Surfaces : quatre niveaux, et non un noir unique. C'est ce qui
     donne au theme sombre sa profondeur. ── */
  --bg-0:#0b0d0c;   /* fond de scene */
  --bg-1:#131615;   /* surface */
  --bg-2:#1b1f1d;   /* surface elevee */
  --bg-3:#242926;   /* surface la plus haute */

  /* ── Marque ── */
  --primary:var(--gold);
  --primary-dark:var(--gold2);
  --primary-light:var(--gold3);

  /* ── Signaux financiers.
     Distincts des couleurs d'accent : une hausse n'est pas un lien. ── */
  --profit:#05c98e;
  --loss:#ef4444;
  --pending:#e0a93b;
  --confirmed:#0e9f6e;
  --failed:#b3261e;

  /* ── Echelle typographique : 8 pas, contre 83 valeurs mesurees. ── */
  --fs-display:2.5rem;   /* 40px — solde principal */
  --fs-h1:1.75rem;       /* 28px */
  --fs-h2:1.3125rem;     /* 21px */
  --fs-h3:1.0625rem;     /* 17px */
  --fs-body:.9375rem;    /* 15px */
  --fs-small:.8125rem;   /* 13px */
  --fs-caption:.6875rem; /* 11px — etiquettes en capitales */
  --fs-micro:.625rem;    /* 10px — mentions denses */

  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:900;
  --lh-tight:1.15; --lh-normal:1.5; --lh-loose:1.7;

  /* ── Espacement : progression de 4, contre 14 valeurs inline. ── */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;

  /* ── Rayons : 4 pas, contre 20 valeurs de 1px a 99px. Les alias
     historiques --r, --r-sm… restent en place le temps de la migration. ── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-full:999px;

  /* ── Cible tactile.
     L'audit a releve 10 a 16 zones sous ce seuil par ecran. En faire un
     jeton rend la regle applicable, et surtout verifiable. ── */
  --touch-min:44px;

  /* ── Elevation ── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow-md:0 4px 14px -4px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px -10px rgba(0,0,0,.6);

  /* ── Focus : trace unique pour toute l'application (phase 2). ── */
  --focus-ring:2px solid var(--gold);
  --focus-offset:2px;
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button{font-family:var(--font);cursor:pointer;border:none;outline:none;background:none}
input,select,textarea{font-family:var(--font);outline:none;border:none;background:transparent;color:var(--text)}
input::placeholder{color:var(--text4)}


/* ── PLATFORM LAYOUT ──
   Mobile (≤768px): Full screen app
   Tablet (769-1024px): Phone shell centered
   Desktop (≥1025px): Wide shell with info panel
*/

/* MOBILE FIRST */
.stage{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.phone{
  width:100%; height:100%;
  background:var(--bg);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

/* TABLET */
@media(min-width:769px) and (max-width:1279px){
  body{background:radial-gradient(ellipse 80% 60% at 25% 20%,rgba(244,183,49,.05),transparent 55%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(5,201,142,.04),transparent 55%),#020307}
  .stage{padding:24px}
  .phone{
    width:390px; height:844px;
    border-radius:44px; flex-shrink:0;
    box-shadow:0 0 0 1px var(--border3),0 0 0 9px rgba(255,255,255,.02),var(--shadow-lg);
  }
}

/* DESKTOP */
@media(min-width:1280px){
  body{background:radial-gradient(ellipse 70% 55% at 20% 15%,rgba(244,183,49,.06),transparent 50%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(5,201,142,.04),transparent 50%),#010205}
  .stage{padding:32px; gap:32px; align-items:flex-start; padding-top:48px}
  .phone{
    width:390px; height:844px;
    border-radius:48px; flex-shrink:0;
    box-shadow:0 0 0 1px var(--border3),0 0 0 10px rgba(255,255,255,.015),0 60px 160px rgba(0,0,0,.9),0 0 80px rgba(244,183,49,.05);
    margin-top:0;
  }
  .desktop-panel{
    display:flex; flex-direction:column; gap:16px;
    width:340px; padding-top:8px;
    animation:fadeUp .5s ease .2s both;
    /* Les cinq cartes mesurent ~1050 px pour ~800 px disponibles : sans
       defilement propre, les deux dernieres (« Recevoir », « Installer »)
       etaient coupees par l'overflow:hidden du body. */
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
    /* La barre de defilement ne doit pas decaler la colonne au survol. */
    scrollbar-width:thin;
  }
  .desktop-panel::-webkit-scrollbar{width:3px}
  .desktop-panel::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .dp-card{
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--r-lg); padding:18px;
  }
  .dp-title{font-size:.72rem;font-weight:700;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
  .dp-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dp-stat{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;text-align:center}
  .dp-stat-val{font-size:1.1rem;font-weight:800;color:var(--text)}
  .dp-stat-lbl{font-size:.6rem;color:var(--text3);margin-top:2px}
  .dp-market-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
  .dp-market-row:last-child{border-bottom:none}
  .dp-m-name{font-size:.8rem;font-weight:700;color:var(--text)}
  .dp-m-price{font-size:.78rem;font-family:var(--mono);color:var(--text2)}
  .dp-m-chg{font-size:.68rem;font-weight:700}
  .dp-qr{width:100%;height:140px;background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;cursor:pointer;transition:border-color var(--t)}
  .dp-qr:hover{border-color:var(--gold-bd)}
  .dp-news-item{padding:10px 0;border-bottom:1px solid var(--border)}
  .dp-news-item:last-child{border-bottom:none}
  .dp-news-title{font-size:.76rem;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.4}
  .dp-news-meta{font-size:.62rem;color:var(--text3);font-family:var(--mono)}
}
@media(max-width:1279px){.desktop-panel{display:none!important}}

/* ── NOTCH / STATUS ── */
.notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:0 0 20px 20px;z-index:998;
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
}
.ni-dot{width:11px;height:11px;border-radius:50%;background:#1a1a1a;border:2px solid #222}
.ni-bar{width:40px;height:5px;background:#1a1a1a;border-radius:99px}
/* hide notch on mobile full-screen */
@media(max-width:768px){.notch{display:none}}

.statusbar{
  padding:calc(var(--safe-top) + 10px) 20px 0;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;font-weight:600;color:var(--text3);
  flex-shrink:0; height:calc(var(--safe-top) + 32px);
}
@media(min-width:769px){.statusbar{padding:8px 24px 0;height:40px}}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:var(--bg);border-bottom:1px solid var(--border);
  flex-shrink:0;height:var(--topbar-h);
  position:relative;z-index:100;
}
.tb-title{
  font-size:.88rem;font-weight:800;color:var(--text);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* `margin-left:auto` pousse le reseau et les notifications tout a droite.
   Sans lui, ils se collaient au selecteur de wallet et laissaient un vide a
   droite de la barre — l'en-tete paraissait deséquilibré. */
.tb-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.ic-btn{
  width:34px;height:34px;border-radius:10px;
  background:var(--card2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;transition:all var(--t);
  color:var(--text2);position:relative;flex-shrink:0;
  -webkit-user-select:none;user-select:none;
}
.ic-btn:hover{background:var(--card3);color:var(--text)}
.ic-btn:active{transform:scale(.92)}
.ic-badge{
  position:absolute;top:-4px;right:-4px;
  width:15px;height:15px;background:var(--red);border-radius:50%;
  border:2px solid var(--bg);font-size:.45rem;font-weight:800;
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.net-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--card2);border:1px solid var(--border2);
  border-radius:99px;padding:5px 10px;
  font-family:var(--mono);font-size:.6rem;color:var(--green);font-weight:600;
  cursor:pointer;transition:all var(--t);white-space:nowrap;
}
.net-chip:hover{border-color:var(--green)}
.net-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 2.2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.18}}

/* ── TICKER ── */
.ticker{
  height:var(--ticker-h);overflow:hidden;flex-shrink:0;
  border-bottom:1px solid var(--border);background:var(--bg2);
  display:flex;align-items:center;
}
.ticker-track{
  display:flex;white-space:nowrap;
  animation:tick 38s linear infinite;
  font-family:var(--mono);font-size:.58rem;
}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{padding:0 18px;color:var(--text3)}
.ti b{color:var(--text);font-weight:600}
.ti-u{color:var(--green)}.ti-d{color:var(--red)}

/* ── SIDEBAR ── */
.sidebar{
  position:absolute;left:0;top:0;bottom:0;
  width:var(--sidebar-w);background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:300;overflow:hidden;
  transition:width var(--t-md);
  flex-shrink:0;
}
.sidebar.open{width:var(--sidebar-ow)}
.sb-toggle{
  height:50px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;color:var(--text3);
  border-bottom:1px solid var(--border);font-size:17px;
  transition:color var(--t),background var(--t);
  -webkit-user-select:none;user-select:none;
}
.sb-toggle:hover{color:var(--gold);background:var(--gold-bg)}
.sidebar.open .sb-toggle{justify-content:flex-end;padding-right:14px}
.sb-profile{
  display:flex;align-items:center;gap:10px;
  padding:12px 10px;border-bottom:1px solid var(--border);
  flex-shrink:0;overflow:hidden;
}
.sb-av{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#8b5cf6,#3b82f6);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
}
.sb-info{overflow:hidden;opacity:0;transition:opacity var(--t-md);min-width:0}
.sidebar.open .sb-info{opacity:1}
.sb-name{font-size:.76rem;font-weight:700;color:var(--text);white-space:nowrap}
.sb-sub{font-size:.58rem;color:var(--gold);white-space:nowrap;margin-top:1px;font-weight:600}

.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 6px}
.sb-nav::-webkit-scrollbar{display:none}
.sb-sec{font-size:.55rem;font-weight:700;color:var(--text4);letter-spacing:1.5px;text-transform:uppercase;padding:8px 9px 3px;white-space:nowrap;opacity:0;transition:opacity var(--t-md)}
.sidebar.open .sb-sec{opacity:1}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-radius:11px;cursor:pointer;
  transition:background var(--t);margin-bottom:1px;overflow:hidden;white-space:nowrap;
  position:relative;
}
.sb-item:hover{background:var(--gold-bg)}
.sb-item.on{background:var(--gold-bg);border:1px solid var(--gold-bd)}
.sb-item:active{transform:scale(.97)}
.sb-ico{font-size:17px;flex-shrink:0;width:20px;text-align:center;line-height:1}
.sb-lbl{font-size:.76rem;font-weight:600;color:var(--text);opacity:0;transition:opacity var(--t-md);white-space:nowrap;flex:1}
.sb-item.on .sb-lbl{color:var(--gold)}
.sidebar.open .sb-lbl{opacity:1}
.sb-dot{width:4px;height:4px;border-radius:99px;background:var(--gold);opacity:0;flex-shrink:0;transition:opacity var(--t-md)}
.sidebar.open .sb-item.on .sb-dot{opacity:1}
.sb-badge{background:var(--red);color:#fff;font-size:.48rem;font-weight:800;padding:1px 5px;border-radius:99px;opacity:0;transition:opacity var(--t-md);flex-shrink:0}
.sidebar.open .sb-badge{opacity:1}
.sb-sep{height:1px;background:var(--border);margin:6px}
.sb-bog{
  padding:9px 8px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:10px;overflow:hidden;cursor:pointer;
  transition:background var(--t);
}
.sb-bog:hover{background:var(--gold-bg)}
.sb-bog-ico{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#000;
}
.sb-bog-inf{opacity:0;transition:opacity var(--t-md);overflow:hidden;min-width:0}
.sidebar.open .sb-bog-inf{opacity:1}
.sb-bog-v{font-size:.74rem;font-weight:800;color:var(--gold);white-space:nowrap}
.sb-bog-s{font-size:.57rem;color:var(--text3);white-space:nowrap;margin-top:1px}
.sb-theme{
  padding:9px 8px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:10px;cursor:pointer;overflow:hidden;
  transition:background var(--t);
}
.sb-theme:hover{background:var(--gold-bg)}
.sb-th-ico{font-size:17px;width:20px;text-align:center;flex-shrink:0}
.sb-th-lbl{font-size:.76rem;font-weight:600;color:var(--text2);opacity:0;transition:opacity var(--t-md);white-space:nowrap}
.sidebar.open .sb-th-lbl{opacity:1}

/* ── MAIN ── */
.main{
  /* Le rail lateral est parti : le contenu part du bord gauche. */
  position:absolute;left:0;top:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  transition:left var(--t-md);
}
.sidebar.open~.main{left:var(--sidebar-ow)}

/* ── SCROLL ── */
.scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-bottom:calc(var(--nav-h) + var(--safe-bot) + 12px);
}
.scroll::-webkit-scrollbar{width:3px}
.scroll::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}
.pg{display:none;padding:13px 13px 0;animation:pgIn .24s ease}
.pg.on{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── BOTTOM NAV ── */
.bnav{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--bg);border-top:1px solid var(--border2);
  transition:transform var(--t-md);
  z-index:200;
  padding-bottom:var(--safe-bot);
}
.bnav.up{transform:translateY(calc(100% - 10px))}
.bn-handle{
  height:10px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:var(--bg2);border-bottom:1px solid var(--border);
}
.bn-pip{width:36px;height:3px;background:var(--text4);border-radius:99px;transition:background var(--t)}
.bn-handle:hover .bn-pip{background:var(--gold)}
.bn-row{display:flex;align-items:flex-start;padding:8px 4px 0;height:var(--nav-h)}
.nt{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 1px;cursor:pointer;border-radius:10px;margin:0 1px;
  transition:all var(--t);-webkit-user-select:none;user-select:none;
}
.nt:active{transform:scale(.9)}
.nt-ico{font-size:18px;line-height:1;transition:transform var(--t)}
.nt-lbl{font-size:.51rem;font-weight:700;color:var(--text3);transition:color var(--t);letter-spacing:.1px}
.nt-dot{width:4px;height:4px;border-radius:99px;background:transparent;transition:background var(--t)}
.nt.on .nt-ico{transform:scale(1.14)}
.nt.on .nt-lbl{color:var(--gold)}
.nt.on .nt-dot{background:var(--gold)}

/* ── OVERLAYS ── */
.overlay{
  position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:flex-end;z-index:800;
  /* "visibility" et non seulement "opacity" : pointer-events bloque la
     souris, pas le clavier. Sans cette ligne, les 31 modales fermees
     restaient dans l'ordre de tabulation, et un utilisateur au clavier
     tabulait a l'aveugle dans des ecrans invisibles.
     Le delai sur visibility la laisse changer APRES le fondu. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,visibility 0s linear .22s;
}
.overlay.on{opacity:1;visibility:visible;pointer-events:all;transition:opacity .22s}
.sheet{
  width:100%;background:var(--card);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:1px solid var(--border2);
  padding:0 16px calc(var(--safe-bot) + 24px);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.3,1);
  max-height:92%;overflow-y:auto;
}
.sheet::-webkit-scrollbar{display:none}
.overlay.on .sheet{transform:none}
.sh-pip{width:38px;height:4px;background:var(--card4);border-radius:2px;margin:13px auto 18px}
.sh-title{font-size:.98rem;font-weight:800;color:var(--text);margin-bottom:4px}
.sh-sub{font-size:.7rem;color:var(--text2);margin-bottom:15px;line-height:1.55}

/* ── TOAST ── */
.toast{
  position:absolute;top:calc(var(--safe-top) + 56px);left:50%;
  transform:translateX(-50%) translateY(-72px);
  background:var(--card);border:1px solid var(--green);
  border-radius:99px;padding:10px 18px;
  display:flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:700;color:var(--text);
  white-space:nowrap;z-index:9999;
  /* Sans opacity/visibility, le toast reste partiellement visible au repos :
     translateY(-72px) depuis top:56px place son bord haut a -16px, soit une
     tranche du bandeau affichee en permanence par-dessus la topbar. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform var(--t-spring), opacity .2s ease, visibility .2s;
  box-shadow:var(--shadow-lg);max-width:calc(100% - 32px);
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1; visibility:visible}
.toast.err{border-color:var(--red)}
.toast.warn{border-color:var(--gold)}

/* L'icone du toast etait un emoji : rendu par la police systeme, il changeait
   de dessin et de chasse d'une plateforme a l'autre, au milieu d'une interface
   dont tout le reste est trace sur la meme grille. Sa couleur suit le type du
   message, seul endroit ou l'information est portee. */
#t-i{display:flex;align-items:center;flex:none}
#t-i svg{width:16px;height:16px;stroke-width:2.2}
.toast #t-i{color:var(--green)}
.toast.err #t-i{color:var(--red)}
.toast.warn #t-i{color:var(--gold)}

/* ── SPLASH ── */
#splash{
  position:absolute;inset:0;background:var(--bg);z-index:9998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:splFade .5s ease 3.4s forwards;
}
@keyframes splFade{to{opacity:0;pointer-events:none}}
.spl-aura{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(244,183,49,.14),transparent 70%);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.spl-logo{width:88px;height:88px;border-radius:26px;background:linear-gradient(145deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:42px;animation:logoBeat 1.8s ease infinite;position:relative;z-index:1;margin-bottom:20px;box-shadow:0 0 0 0 rgba(244,183,49,.4)}
@keyframes logoBeat{0%{box-shadow:0 0 0 0 rgba(244,183,49,.5)}70%{box-shadow:0 0 0 22px rgba(244,183,49,0)}100%{box-shadow:0 0 0 0 rgba(244,183,49,0)}}
.spl-name{font-size:2rem;font-weight:900;letter-spacing:-.5px;position:relative;z-index:1;background:linear-gradient(135deg,var(--text) 30%,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.spl-sub{font-size:.67rem;color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-top:6px;position:relative;z-index:1}
.spl-prog{width:160px;height:2px;background:var(--card3);border-radius:99px;margin-top:52px;overflow:hidden;position:relative;z-index:1}
.spl-bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold3));animation:splProg 3.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes splProg{to{width:100%}}
.spl-badge{position:relative;z-index:1;margin-top:16px;font-size:.62rem;color:var(--text4);font-family:var(--mono)}

/* ════════════════════════════════════════════
   COMPONENT LIBRARY
════════════════════════════════════════════ */

/* Buttons */
.btn{width:100%;padding:14px;border-radius:var(--r);font-family:var(--font);font-weight:800;font-size:.86rem;cursor:pointer;transition:all var(--t);border:none;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.btn-g{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000}
.btn-g:hover{box-shadow:0 8px 24px rgba(244,183,49,.32)}
.btn-ghost{background:var(--card2);border:1px solid var(--border2);color:var(--text)}
.btn-ghost:hover{background:var(--card3)}
.btn-green{background:var(--green-bg);border:1px solid rgba(5,201,142,.28);color:var(--green)}
.btn-red{background:var(--red-bg);border:1px solid rgba(239,68,68,.28);color:var(--red)}
.btn-sm{padding:9px 14px;width:auto;font-size:.74rem;border-radius:var(--r-sm)}
.btn-2c{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn-3c{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}

/* Section */
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sh-t{font-size:.83rem;font-weight:700;color:var(--text)}
.sh-a{font-size:.68rem;color:var(--gold);cursor:pointer;font-weight:600;transition:color var(--t)}
.sh-a:hover{color:var(--gold3)}
.gap{height:18px}
.dv{height:1px;background:var(--border);margin:14px 0}
.page-title{font-size:1.04rem;font-weight:800;color:var(--text);margin-bottom:3px}
.page-sub{font-size:.7rem;color:var(--text2);margin-bottom:13px;line-height:1.55}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.card2{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm)}
.card-p{padding:14px}

/* Forms */
.fg{margin-bottom:12px}
.fl{font-size:.61rem;font-weight:700;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px;display:block}
.fi{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;color:var(--text);font-family:var(--mono);font-size:.79rem;transition:border-color var(--t)}
.fi:focus{border-color:rgba(244,183,49,.5)}
.fiw{display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;transition:border-color var(--t)}
.fiw:focus-within{border-color:rgba(244,183,49,.4)}
.fiw input{flex:1;color:var(--text);font-family:var(--mono);font-size:.79rem;min-width:0}

/* Tabs */
.tabs{display:flex;gap:3px;background:var(--card2);border-radius:var(--r-sm);padding:3px;margin-bottom:13px}
/* min-width:0 : sans lui, la base automatique d'un element flex refuse de
   se comprimer sous la largeur de son texte, et la rangee deborde a 320 px. */
.tab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px;border-radius:8px;border:none;font-family:var(--font);font-weight:700;font-size:.7rem;cursor:pointer;transition:all var(--t);background:transparent;color:var(--text3)}
.tab:active{transform:scale(.95)}
.tab.on{background:var(--gold);color:#000}

/* Un canvas s'affiche a sa taille intrinseque — celle de son attribut width,
   exprimee en pixels de peripherique. Sur un ecran a forte densite, ou si le
   script de dessin echoue avant de poser la largeur CSS, il deborde. La garde
   appartient donc a la feuille de style, ou elle vaut en toutes circonstances. */
canvas{max-width:100%;display:block}


/* Info box */
.ib{background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:12px}
.ir{display:flex;justify-content:space-between;font-size:.68rem;padding:3px 0}
.ik{color:var(--text3)}
.iv{font-family:var(--mono);font-weight:600;color:var(--text)}
.iv-g{color:var(--green)}.iv-gold{color:var(--gold)}.iv-b{color:var(--blue)}.iv-r{color:var(--red)}

/* Badges */
.bdg{display:inline-block;font-size:.56rem;padding:2px 7px;border-radius:99px;font-weight:700;white-space:nowrap}
.bdg-g{background:var(--green-bg);color:var(--green)}
.bdg-r{background:var(--red-bg);color:var(--red)}
.bdg-gold{background:var(--gold-bg);color:var(--gold)}
.bdg-b{background:var(--blue-bg);color:var(--blue)}
.bdg-p{background:var(--purple-bg);color:var(--purple)}

/* Balance Card */
.bal-card{
  background:linear-gradient(155deg,#111d38,#0a1421 60%,#07101c);
  border:1px solid rgba(244,183,49,.2);border-radius:var(--r-xl);
  padding:19px 17px 17px;position:relative;overflow:hidden;margin-bottom:12px;
}

.bal-card::before{content:'';position:absolute;top:-70px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(244,183,49,.13),transparent 70%);pointer-events:none}
.bal-card::after{content:'◈';position:absolute;bottom:-25px;right:6px;font-size:115px;color:rgba(244,183,49,.04);line-height:1;pointer-events:none}
.bal-eye{font-size:.6rem;color:rgba(255,255,255,.72);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.bal-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;opacity:.55;animation:blink 2.2s infinite}
.bal-hide-btn{margin-left:auto;cursor:pointer;font-size:15px;opacity:.5;transition:opacity var(--t)}
.bal-hide-btn:hover{opacity:1}
.bal-amt{font-size:2.4rem;font-weight:900;letter-spacing:-2px;line-height:1;background:linear-gradient(135deg,#fff 30%,var(--gold) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.bal-masked{font-size:2rem;font-weight:900;color:rgba(255,255,255,.66);letter-spacing:8px}
.bal-local{color:rgba(255,255,255,.62);font-size:.7rem;margin-top:4px;font-family:var(--mono)}
.bal-chg{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:.7rem;font-weight:700;color:var(--green);background:rgba(5,201,142,.14);padding:3px 9px;border-radius:99px}
.bal-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:17px}
.ba{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all var(--t);-webkit-user-select:none;user-select:none}
.ba:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.ba:active{transform:scale(.93)}
.ba-ico{width:33px;height:33px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px}
.ba-l{font-size:.52rem;color:rgba(255,255,255,.75);font-weight:700;text-align:center}

/* BOG Banner */
.bog-banner{
  background:linear-gradient(135deg,rgba(244,183,49,.1),rgba(244,183,49,.05));
  border:1px solid var(--gold-bd);border-radius:var(--r);
  padding:11px 13px;margin-bottom:12px;
  display:flex;align-items:center;gap:11px;cursor:pointer;transition:all var(--t);
}
.bog-banner:hover{border-color:rgba(244,183,49,.4)}
.bog-ico{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#000;box-shadow:0 4px 14px rgba(244,183,49,.4)}
.bog-inf{flex:1;min-width:0}
.bog-nm{font-size:.79rem;font-weight:800;color:var(--text)}
.bog-addr{font-size:.54rem;color:var(--text3);font-family:var(--mono);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bog-pr{text-align:right;flex-shrink:0}
.bog-pv{font-size:.86rem;font-weight:800;color:var(--gold);font-family:var(--mono)}
.bog-pc{font-size:.6rem;font-weight:700;color:var(--green);margin-top:2px}

/* Stats row */
.stats-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:12px}
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 8px;text-align:center}
.sc-ico{font-size:14px;margin-bottom:4px}
.sc-v{font-size:.86rem;font-weight:800;color:var(--text)}
.sc-l{font-size:.57rem;color:var(--text3);margin-top:1px}

/* Chart */
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:13px 12px 8px;margin-bottom:12px}
.chart-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.chart-lbl{font-size:.79rem;font-weight:700;color:var(--text)}
.fp-grp{display:flex;gap:3px}
.fp{padding:3px 8px;border-radius:99px;font-size:.58rem;font-weight:700;cursor:pointer;background:transparent;border:1px solid var(--border2);color:var(--text3);font-family:var(--font);transition:all var(--t)}
.fp.on{background:var(--gold);color:#000;border-color:var(--gold)}

/* Assets */
.arow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;transition:all var(--t)}
.arow:hover{border-color:var(--gold-bd);background:var(--card2)}
.arow:active{transform:scale(.98)}
.aico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex-shrink:0}
.ainf{flex:1;min-width:0}
.anm{font-size:.8rem;font-weight:700;color:var(--text)}
.asub{font-size:.6rem;color:var(--text3);font-family:var(--mono);margin-top:1px}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px;margin:0 7px;flex-shrink:0}
.sb2{width:3px;border-radius:2px;min-height:3px}
.av{text-align:right;flex-shrink:0}
.avl{font-size:.8rem;font-weight:700;font-family:var(--mono);color:var(--text)}
.ach{font-size:.61rem;font-weight:700;margin-top:2px}

/* Tx rows */
.txrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:6px}
.txic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.txin{flex:1;min-width:0}
.txty{font-size:.79rem;font-weight:700;color:var(--text)}
.txmt{font-size:.6rem;color:var(--text3);font-family:var(--mono);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txr{text-align:right;flex-shrink:0}
.txam{font-size:.79rem;font-weight:700;font-family:var(--mono)}

/* Swap */
.sw-box{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px}
.sw-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.sw-l{font-size:.59rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.sw-max{font-size:.59rem;color:var(--gold);cursor:pointer;font-weight:700;transition:color var(--t)}
.sw-max:hover{color:var(--gold3)}
.sw-b{display:flex;align-items:center;gap:9px}
.sw-in{flex:1;font-size:1.65rem;font-weight:900;color:var(--text);font-family:var(--font);min-width:0;background:transparent}
.sw-in::placeholder{color:var(--text4)}
.tok-btn{display:flex;align-items:center;gap:6px;background:var(--card3);border:1px solid var(--border2);border-radius:99px;padding:6px 11px;font-size:.74rem;font-weight:700;color:var(--text);cursor:pointer;flex-shrink:0;transition:all var(--t);white-space:nowrap}
.tok-btn:hover{border-color:var(--gold)}
.sw-s{font-size:.59rem;color:var(--text3);margin-top:5px;font-family:var(--mono)}
/* Symbole du jeton a droite du montant, dans les boites de saisie */
.sw-sym{flex-shrink:0;font-size:.82rem;font-weight:800;color:var(--text2);letter-spacing:.02em;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-flip{width:36px;height:36px;border-radius:11px;background:var(--card3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .26s;color:var(--text3)}
.sw-flip:hover{background:var(--gold);color:#000;transform:rotate(180deg)}
.sw-flip:active{transform:rotate(180deg) scale(.9)}

/* Pool items */
.pool-i{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:7px;cursor:pointer;transition:all var(--t)}
.pool-i:hover{border-color:var(--gold-bd)}
.pool-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px}
.pool-pr{font-weight:800;font-size:.82rem;color:var(--text);display:flex;align-items:center;gap:6px}
.pool-apy{font-size:.84rem;font-weight:800;color:var(--green)}
.pool-bg{height:4px;background:var(--card3);border-radius:99px;margin-bottom:9px;overflow:hidden}
.pool-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold3))}
.pool-st{display:flex;gap:12px;font-size:.6rem;color:var(--text3)}
.pool-st b{color:var(--text);font-family:var(--mono)}

/* DeFi */
.defi-c{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;margin-bottom:7px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all var(--t)}
.defi-c:hover{border-color:var(--gold-bd)}
.defi-ico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.defi-inf{flex:1}
.defi-nm{font-size:.79rem;font-weight:700;color:var(--text)}
.defi-sub{font-size:.6rem;color:var(--text3);margin-top:1px}
.defi-r{text-align:right;flex-shrink:0}
.defi-apy{font-size:.79rem;font-weight:800;color:var(--green)}
.defi-tvl{font-size:.59rem;color:var(--text3);font-family:var(--mono);margin-top:2px}

/* Staking card */
.stake-c{border-radius:var(--r-lg);padding:14px;margin-bottom:9px}
.stake-c.blue{background:linear-gradient(135deg,#0e1e32,#08151f);border:1px solid rgba(59,130,246,.22)}
.stake-c.purple{background:linear-gradient(135deg,#18102a,#100c1e);border:1px solid rgba(139,92,246,.22)}
[data-theme="light"] .stake-c.blue{background:linear-gradient(135deg,#ddeeff,#c8e4ff)}
[data-theme="light"] .stake-c.purple{background:linear-gradient(135deg,#e8d8ff,#d4c0ff)}
.stake-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.stake-title{font-size:.82rem;font-weight:800;color:var(--text)}
.stake-apy{font-size:.98rem;font-weight:900;color:var(--green)}
.stake-bg{height:5px;background:rgba(255,255,255,.07);border-radius:99px;margin-bottom:7px;overflow:hidden}
[data-theme="light"] .stake-bg{background:rgba(0,0,0,.09)}
.stake-fill{height:100%;border-radius:99px}

/* NFT */
.nft-g{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.nft-c{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all var(--t)}
.nft-c:hover{border-color:var(--gold-bd);transform:translateY(-2px)}
.nft-img{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:50px}
.nft-inf{padding:9px 10px}
.nft-nm{font-size:.72rem;font-weight:700;color:var(--text)}
.nft-pr{font-size:.61rem;color:var(--gold);font-family:var(--mono);margin-top:2px}

/* P2P */
.p2p-offer{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:7px;cursor:pointer;transition:all var(--t)}
.p2p-offer:hover{border-color:var(--gold-bd)}
.p2p-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px}
.p2p-u{display:flex;align-items:center;gap:8px}
.p2p-av{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.p2p-un{font-size:.76rem;font-weight:700;color:var(--text)}
.p2p-rp{font-size:.6rem;color:var(--text3);margin-top:1px}
.p2p-pr{text-align:right}
.p2p-rate{font-size:.88rem;font-weight:800;color:var(--gold);font-family:var(--mono)}
.p2p-lim{font-size:.59rem;color:var(--text3);font-family:var(--mono);margin-top:2px}
.p2p-f{display:flex;justify-content:space-between;align-items:center}
.p2p-ms{display:flex;gap:4px}
.p2p-m{font-size:.57rem;padding:2px 7px;border-radius:99px;background:var(--card2);border:1px solid var(--border);color:var(--text3)}
.p2p-t{font-size:.6rem;color:var(--text3);font-family:var(--mono)}

/* AI */
.ai-chip{display:inline-flex;align-items:center;gap:5px;background:var(--purple-bg);border:1px solid rgba(139,92,246,.22);border-radius:99px;padding:4px 10px;font-size:.59rem;color:var(--purple);font-weight:700;letter-spacing:.5px;margin-bottom:12px}
.ins-c{background:linear-gradient(135deg,rgba(139,92,246,.07),rgba(59,130,246,.04));border:1px solid rgba(139,92,246,.14);border-radius:var(--r-sm);padding:12px;margin-bottom:8px}
.ins-h{display:flex;gap:9px;align-items:flex-start;margin-bottom:5px}
.ins-em{font-size:18px;flex-shrink:0}
.ins-ti{font-size:.79rem;font-weight:700;color:var(--text)}
.ins-tg{font-size:.56rem;padding:1px 7px;border-radius:99px;font-weight:700;background:var(--purple-bg);color:var(--purple);display:inline-block;margin-top:2px}
.ins-bd{font-size:.71rem;color:var(--text2);line-height:1.62;padding-left:27px}

/* Settings */
.prof-c{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:16px}
.prof-av{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;flex-shrink:0}
.prof-nm{font-size:.9rem;font-weight:800;color:var(--text)}
.prof-addr{font-size:.58rem;color:var(--text3);font-family:var(--mono);margin-top:2px}
.pro-bdg{margin-left:auto;background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:8px;padding:5px 10px;font-size:.66rem;font-weight:800;color:var(--gold)}
.ssg{margin-bottom:17px}
.ssg-t{font-size:.58rem;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.sr{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px;cursor:pointer;transition:background var(--t)}
.sr:hover{background:var(--card2)}
.sr:active{transform:scale(.98)}
.sr-ico{font-size:16px;flex-shrink:0;width:20px;text-align:center}
.sr-inf{flex:1}
.sr-nm{font-size:.79rem;font-weight:700;color:var(--text)}
.sr-sub{font-size:.59rem;color:var(--text3);margin-top:1px}
.sr-r{color:var(--text3);font-size:13px;flex-shrink:0}
.tgl{width:40px;height:22px;background:var(--card4);border-radius:11px;position:relative;cursor:pointer;transition:background var(--t);flex-shrink:0}
.tgl.on{background:var(--green)}
.tgl::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left var(--t);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tgl.on::after{left:21px}

/* MM */
.mm-g{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.mm-c{background:var(--card);border:2px solid var(--border);border-radius:var(--r-sm);padding:10px 8px;cursor:pointer;transition:all var(--t);text-align:center}
.mm-c.on{border-color:var(--gold);background:var(--gold-bg)}
.mm-c:hover{border-color:rgba(244,183,49,.4)}
.mm-ic{font-size:22px;margin-bottom:5px}
.mm-nm{font-size:.7rem;font-weight:700;color:var(--text)}
.mm-sb{font-size:.57rem;color:var(--text3);margin-top:1px}

/* Token picker */
.tok-g{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:11px}
.tok-p{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 3px;border-radius:var(--r-sm);background:var(--card2);border:1.5px solid var(--border);cursor:pointer;transition:all var(--t)}
.tok-p.on{border-color:var(--gold);background:var(--gold-bg)}
.tok-pi{font-size:17px}
.tok-pn{font-size:.57rem;font-weight:700;color:var(--text)}

/* Net grid */
.net-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:13px}
.net-c{background:var(--card);border:2px solid var(--border);border-radius:var(--r-sm);padding:10px 7px;text-align:center;cursor:pointer;transition:all var(--t)}
.net-c.on{border-color:var(--gold);background:var(--gold-bg)}
.net-c:hover{border-color:rgba(244,183,49,.4)}
.net-ic{font-size:20px;margin-bottom:4px}
.net-nm{font-size:.63rem;font-weight:700;color:var(--text)}

/* History filters */
.hf-bar{display:flex;gap:5px;margin-bottom:11px;overflow-x:auto;padding-bottom:1px;-webkit-overflow-scrolling:touch}
.hf-bar::-webkit-scrollbar{display:none}
.hf{padding:4px 11px;border-radius:99px;font-size:.61rem;font-weight:700;cursor:pointer;background:var(--card2);border:1px solid var(--border);color:var(--text3);white-space:nowrap;transition:all var(--t)}
.hf.on{background:var(--gold);color:#000;border-color:var(--gold)}

/* Score */
.score-c{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(59,130,246,.05));border:1px solid rgba(139,92,246,.2);border-radius:var(--r);padding:14px;margin-bottom:12px}
.score-bar-bg{height:5px;background:var(--card3);border-radius:99px;overflow:hidden;margin-top:10px}
.score-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue2),var(--purple))}

/* Security bio */
.bio-card-wrap{background:linear-gradient(135deg,var(--green-bg),rgba(5,201,142,.04));border:1px solid rgba(5,201,142,.22);border-radius:var(--r);padding:13px;margin-bottom:8px}
.bio-orb{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green2));display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;flex-shrink:0;animation:bioOrb 2.5s ease infinite}
@keyframes bioOrb{0%{box-shadow:0 0 0 0 rgba(5,201,142,.5)}70%{box-shadow:0 0 0 16px rgba(5,201,142,0)}100%{box-shadow:0 0 0 0 rgba(5,201,142,0)}}
.bio-meth-g{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.bio-meth{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 8px;text-align:center;cursor:pointer;transition:all var(--t)}
.bio-meth.fp-on{border-color:rgba(5,201,142,.35)}
.bio-meth.fid-on{border-color:rgba(59,130,246,.35)}
.bio-meth-ico{font-size:22px;margin-bottom:4px}
.bio-meth-nm{font-size:.69rem;font-weight:700;color:var(--text)}
.bio-meth-st{font-size:.58rem;margin-top:2px}

/* ── BIOMETRIC MODAL ── */
@keyframes bioRing{0%{box-shadow:0 0 0 0 rgba(5,201,142,.55)}70%{box-shadow:0 0 0 20px rgba(5,201,142,0)}100%{box-shadow:0 0 0 0 rgba(5,201,142,0)}}
@keyframes bioScan{0%{top:10px}50%{top:100px}100%{top:10px}}
@keyframes faceScan{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.bio-scanner{width:120px;height:120px;border-radius:50%;margin:0 auto 15px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bio-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(5,201,142,.5);animation:bioRing 2s ease infinite}
.bio-ring2{position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(5,201,142,.2)}
.bio-sl{position:absolute;left:13px;right:13px;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);border-radius:99px;animation:bioScan 2.2s ease-in-out infinite}
.bio-em{font-size:50px;position:relative;z-index:2;line-height:1;transition:all .2s}
.bio-chip-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.bio-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1.5px solid var(--border2);background:var(--card2);font-size:.7rem;font-weight:700;color:var(--text);cursor:pointer;transition:all var(--t)}
.bio-chip.fp-a{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.bio-chip.fid-a{border-color:var(--blue);background:var(--blue-bg);color:var(--blue)}
.bio-fb{display:none;padding:10px;border-radius:var(--r-sm);text-align:center;font-size:.77rem;font-weight:700;margin-bottom:12px}
.bio-fb.ok{display:block;background:var(--green-bg);border:1px solid rgba(5,201,142,.26);color:var(--green)}
.bio-fb.fail{display:block;background:var(--red-bg);border:1px solid rgba(239,68,68,.26);color:var(--red)}
.face-box{width:100px;height:118px;border-radius:20px;margin:0 auto 12px;position:relative;border:2px solid rgba(59,130,246,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(59,130,246,.04)}
.face-box::before,.face-box::after{content:'';position:absolute;width:14px;height:14px;border-color:var(--blue);border-style:solid}
.face-box::before{top:-1px;left:-1px;border-width:3px 0 0 3px;border-radius:3px 0 0 0}
.face-box::after{top:-1px;right:-1px;border-width:3px 3px 0 0;border-radius:0 3px 0 0}
.face-scan-h{position:absolute;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:faceScan 1.5s ease infinite;top:50%}

/* PIN */
.pin-dots{display:flex;gap:12px;justify-content:center;margin:14px 0}
.pdot{width:16px;height:16px;border-radius:50%;background:var(--card4);border:2px solid var(--border2);transition:all var(--t)}
.pdot.filled{background:var(--gold);border-color:var(--gold);transform:scale(1.14)}
.pdot.err{background:var(--red);border-color:var(--red)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}
.pkey{padding:13px;border-radius:var(--r-sm);background:var(--card2);border:1px solid var(--border);font-size:.98rem;font-weight:700;cursor:pointer;transition:all var(--t);text-align:center;color:var(--text);font-family:var(--font)}
.pkey:hover{background:var(--card3)}
.pkey:active{transform:scale(.92)}
.pkey-del{background:var(--red-bg);border-color:rgba(239,68,68,.2);color:var(--red)}
.pkey-ok{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)}

/* ── SWAP ROUTE CARD ── */
.sw-route{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;transition:all var(--t);
}
.sw-route:hover{border-color:var(--gold-bd)}
.sw-route.best{border-color:rgba(5,201,142,.35);background:rgba(5,201,142,.04)}
.sw-route.selected{border-color:var(--gold);background:var(--gold-bg)}
.sw-route-ico{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.sw-route-info{flex:1;min-width:0}
.sw-route-name{font-size:.76rem;font-weight:700;color:var(--text)}
.sw-route-path{font-size:.59rem;color:var(--text3);font-family:var(--mono);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-route-out{text-align:right;flex-shrink:0}
.sw-route-val{font-size:.8rem;font-weight:800;color:var(--text);font-family:var(--mono)}
.sw-route-fee{font-size:.59rem;color:var(--text3);margin-top:2px}
.sw-route-tag{font-size:.52rem;display:block;margin-top:2px}
/* ── ECOSYSTEM ── */
.eco-hero{
  background:linear-gradient(155deg,#071a10,#041210 60%,#030d0a);
  border:1px solid rgba(5,201,142,.22);border-radius:var(--r-xl);
  padding:20px 17px 18px;position:relative;overflow:hidden;margin-bottom:12px;
}

.eco-hero::before{content:'';position:absolute;top:-60px;right:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(5,201,142,.14),transparent 70%);pointer-events:none}
.eco-hero::after{content:'🌿';position:absolute;bottom:-20px;right:8px;font-size:100px;opacity:.07;line-height:1;pointer-events:none}
.eco-hero-label{font-size:.58rem;color:rgba(255,255,255,.68);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.eco-hero-label::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 2s infinite}
.eco-hero-total{font-size:2.2rem;font-weight:900;letter-spacing:-1.5px;line-height:1;background:linear-gradient(135deg,#fff 30%,var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.eco-hero-sub{color:rgba(255,255,255,.62);font-size:.68rem;margin-top:4px;font-family:var(--mono)}
.eco-hero-gains{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:.7rem;font-weight:700;color:var(--green);background:rgba(5,201,142,.15);padding:3px 9px;border-radius:99px}
.eco-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:16px}
.eco-act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 5px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all var(--t)}
.eco-act:hover{background:rgba(5,201,142,.12);border-color:rgba(5,201,142,.25)}
.eco-act:active{transform:scale(.94)}
.eco-act-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.eco-act-lbl{font-size:.52rem;color:rgba(255,255,255,.74);font-weight:700;text-align:center}

/* Project cards */
.eco-proj{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:0;margin-bottom:10px;
  overflow:hidden;cursor:pointer;transition:all var(--t);
}
.eco-proj:hover{border-color:rgba(5,201,142,.35);transform:translateY(-2px);box-shadow:0 8px 28px rgba(5,201,142,.08)}
.eco-proj:active{transform:scale(.98)}
.eco-proj-banner{width:100%;height:72px;position:relative;display:flex;align-items:center;padding:0 16px;gap:13px}
.eco-proj-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.eco-proj-head{flex:1;min-width:0}
.eco-proj-name{font-size:.88rem;font-weight:800;color:#fff}
.eco-proj-tag{font-size:.56rem;color:rgba(255,255,255,.55);margin-top:1px;letter-spacing:.5px;text-transform:uppercase}
.eco-proj-roi{text-align:right;flex-shrink:0}
.eco-proj-roi-val{font-size:1.1rem;font-weight:900;color:var(--green)}
.eco-proj-roi-lbl{font-size:.55rem;color:rgba(255,255,255,.70);text-align:right;margin-top:1px}
.eco-proj-body{padding:13px 16px}
.eco-proj-desc{font-size:.7rem;color:var(--text2);line-height:1.65;margin-bottom:11px}
.eco-proj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.eco-ps{background:var(--card2);border-radius:var(--r-sm);padding:8px;text-align:center}
.eco-ps-v{font-size:.82rem;font-weight:800;color:var(--text)}
.eco-ps-l{font-size:.56rem;color:var(--text3);margin-top:1px}
.eco-proj-bar-bg{height:5px;background:var(--card3);border-radius:99px;overflow:hidden;margin-bottom:9px}
.eco-proj-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green2),var(--green))}
.eco-proj-footer{display:flex;align-items:center;justify-content:space-between}
.eco-proj-invested{font-size:.62rem;color:var(--text3)}
.eco-proj-invested b{color:var(--gold);font-family:var(--mono)}

/* Stat chips for eco header */
.eco-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:12px}

/* Category filter */
.eco-cat{display:flex;gap:5px;margin-bottom:12px;overflow-x:auto;padding-bottom:1px}
.eco-cat::-webkit-scrollbar{display:none}

/* My investments table */
.eco-inv-row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:6px;transition:all var(--t)}
.eco-inv-row:hover{border-color:rgba(5,201,142,.25);background:var(--card2)}
.eco-inv-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.eco-inv-inf{flex:1;min-width:0}
.eco-inv-nm{font-size:.79rem;font-weight:700;color:var(--text)}
.eco-inv-sub{font-size:.6rem;color:var(--text3);font-family:var(--mono);margin-top:1px}
.eco-inv-r{text-align:right;flex-shrink:0}
.eco-inv-gain{font-size:.78rem;font-weight:700;color:var(--green);font-family:var(--mono)}
.eco-inv-bog{font-size:.62rem;color:var(--gold);margin-top:2px;font-family:var(--mono)}

/* Risk badge */
.risk-chip{display:inline-block;font-size:.54rem;padding:2px 8px;border-radius:99px;font-weight:700}
.risk-low{background:var(--green-bg);color:var(--green)}
.risk-med{background:var(--gold-bg);color:var(--gold)}
.risk-high{background:var(--red-bg);color:var(--red)}
/* ── P2P STEP INDICATOR ── */
.p2p-step{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:1}
.p2p-step>span{font-size:.52rem;color:var(--text4);font-weight:600;white-space:nowrap}
.p2p-step::before{content:attr(data-n);width:26px;height:26px;border-radius:50%;background:var(--card3);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:var(--text3);transition:all var(--t)}
.p2p-step.on::before{background:var(--gold);border-color:var(--gold);color:#000}
.p2p-step.done::before{background:var(--green);border-color:var(--green);color:#fff;content:'✓'}
.p2p-step-line{flex:1;height:2px;background:var(--border2);margin:0 4px;margin-bottom:14px;transition:background var(--t)}
.p2p-step-line.done{background:var(--green)}
/* Fix: steps need data-n */
#pst-1{--step-n:'1'}#pst-2{--step-n:'2'}#pst-3{--step-n:'3'}#pst-4{--step-n:'4'}
#p2p-steps-bar{display:flex;align-items:center;gap:2px;margin-bottom:16px}
/* ── FIAT PROCESSING ── */
/* ── RECEIVE / SEND PICKER ── */
#rcv-step1,#rcv-step2{animation:pgIn .22s ease}
#rcv-all-list::-webkit-scrollbar{width:3px}
#rcv-all-list::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}
#snd-coin-list::-webkit-scrollbar{width:3px}
#snd-coin-list::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:99px}
.rcv-net-btn{padding:6px 14px;border-radius:99px;font-size:.67rem;font-weight:700;cursor:pointer;transition:all var(--t);border:1.5px solid var(--border2);background:var(--card2);color:var(--text2)}
.rcv-net-btn.on{background:var(--gold);color:#000;border-color:var(--gold)}

/* ── DAPP CARD ── */
.dapp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:13px 11px;cursor:pointer;transition:all var(--t);text-align:center}
.dapp-card:hover{border-color:var(--gold-bd);transform:translateY(-2px)}
.dapp-card:active{transform:scale(.96)}
.dapp-ico{width:48px;height:48px;border-radius:15px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden}
/* Logo de DApp : image locale (public/img/dapps), repli sur l emoji d origine. */
.dapp-logo{width:74%;height:74%;object-fit:contain;display:block}
.dapp-nm{font-size:.74rem;font-weight:700;color:var(--text)}
.dapp-cat{font-size:.58rem;color:var(--text3);margin-top:2px}
.dapp-users{font-size:.56rem;color:var(--green);margin-top:3px;font-family:var(--mono)}
/* ── CRYPTO ROW ── */
.cryrow{display:flex;align-items:center;gap:10px;padding:10px 11px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px;cursor:pointer;transition:all var(--t)}
.cryrow:hover{border-color:var(--gold-bd);background:var(--card2)}
.cryrow:active{transform:scale(.98)}
.cry-rank{font-size:.58rem;color:var(--text4);font-family:var(--mono);width:16px;text-align:center;flex-shrink:0}
.cry-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0;overflow:hidden}
/* Logo de jeton : image reelle (public/img/coins, jeu CC0) posee dans la
   pastille. Le caractere d'origine reste en secours si le fichier manque. */
.jeton-logo{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
.jeton-mini{width:17px;height:17px;object-fit:contain;display:inline-block;vertical-align:-3px;border-radius:50%}
.cry-inf{flex:1;min-width:0}
.cry-nm{font-size:.8rem;font-weight:700;color:var(--text)}
.cry-sym{font-size:.6rem;color:var(--text3);font-family:var(--mono);margin-top:1px}
.cry-r{text-align:right;flex-shrink:0}
.cry-pr{font-size:.8rem;font-weight:700;font-family:var(--mono);color:var(--text)}
.cry-chg{font-size:.62rem;font-weight:700;margin-top:2px}
.cry-spark{display:flex;align-items:flex-end;gap:2px;height:24px;margin:0 7px;flex-shrink:0}
.cry-sb{width:3px;border-radius:2px;min-height:3px}
/* Trust Wallet style coin detail */
.coin-detail-bar{display:flex;gap:6px;justify-content:space-between;margin-top:4px}
.cdb-item{font-size:.57rem;color:var(--text3);font-family:var(--mono)}
.cdb-item span{color:var(--text2);font-weight:600}
.cc-btc{background:rgba(247,147,26,.13)}
.cc-eth{background:rgba(98,126,234,.13)}
.cc-bog{background:rgba(244,183,49,.13)}
.cc-usdt{background:rgba(38,161,123,.13)}
.cc-bnb{background:rgba(243,186,47,.13)}
.cc-sol{background:rgba(153,69,255,.13)}
.cc-trx{background:rgba(229,57,53,.13)}

/* Scroll label */
.tx-dt{font-size:.6rem;color:var(--text3);font-weight:700;letter-spacing:.5px;margin-bottom:7px;padding-left:2px}

/* Mobile Money quick amount */
.quick-amts{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.qa{padding:5px 12px;border-radius:99px;background:var(--card2);border:1px solid var(--border);font-size:.68rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all var(--t)}
.qa:hover{border-color:var(--gold);color:var(--gold)}

/* Risk indicator */
.risk-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;border:1px solid var(--border);background:var(--card);transition:all var(--t)}
.risk-row:hover{border-color:var(--gold-bd)}
.risk-ico{font-size:20px;flex-shrink:0}
.risk-inf{flex:1}
.risk-nm{font-size:.78rem;font-weight:700;color:var(--text)}
.risk-sub{font-size:.6rem;color:var(--text3);margin-top:1px}

/* ── LANGUAGE & CURRENCY SELECTOR ── */
.lang-flag{font-size:18px;cursor:pointer;padding:4px;border-radius:6px;transition:background var(--t)}
.lang-flag:hover{background:var(--card2)}
.lang-flag.on{background:var(--gold-bg);outline:2px solid var(--gold-bd)}
.cur-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;background:var(--card2);border:1px solid var(--border);font-size:.68rem;font-weight:700;color:var(--text);cursor:pointer;transition:all var(--t)}
.cur-badge:hover{border-color:var(--gold-bd)}
.cur-badge.on{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)}

/* ── P2P SELLER PANEL ── */
.offer-step{display:flex;gap:10px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border)}
.offer-step:last-child{border-bottom:none}
.offer-step-num{width:28px;height:28px;border-radius:50%;background:var(--gold-bg);border:1.5px solid var(--gold-bd);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:var(--gold);flex-shrink:0}
.offer-step-body{flex:1;min-width:0}
.offer-step-title{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:6px}
.spread-btn{padding:5px 12px;border-radius:99px;background:var(--card2);border:1px solid var(--border);font-size:.66rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all var(--t)}
.spread-btn.on{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)}
.method-toggle{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px;cursor:pointer;transition:all var(--t)}
.method-toggle.on{background:var(--green-bg);border-color:rgba(5,201,142,.3)}
.method-toggle-ico{font-size:18px;flex-shrink:0}
.method-toggle-inf{flex:1}
.method-toggle-nm{font-size:.76rem;font-weight:700;color:var(--text)}
.method-toggle-sub{font-size:.59rem;color:var(--text3);margin-top:1px}


/* ── GLASSMORPHISM ── */
.glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);
}
/* ── PREMIUM GLOW EFFECTS ── */
.glow-gold{box-shadow:0 0 20px rgba(244,183,49,.2),0 4px 16px rgba(0,0,0,.3);}
.glow-green{box-shadow:0 0 20px rgba(5,201,142,.18),0 4px 16px rgba(0,0,0,.3);}
.glow-blue{box-shadow:0 0 20px rgba(59,130,246,.18),0 4px 16px rgba(0,0,0,.3);}
/* ── SHIMMER LOADING ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{
  background:linear-gradient(90deg,var(--card2) 25%,var(--card3) 50%,var(--card2) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm);
}
/* ── FLOAT ANIMATION ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:float 3s ease-in-out infinite;}
/* ── GRADIENT TEXT ── */
.grad-text{background:linear-gradient(135deg,#f4b731,#05c98e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
/* ── CARD HOVER PREMIUM ── */
.card-hover{transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.25);}
.card-hover:active{transform:scale(.97);}
/* ── PULSE DOT ── */
@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(5,201,142,.5)}70%{transform:scale(1);box-shadow:0 0 0 8px rgba(5,201,142,0)}100%{transform:scale(.95)}}
.pulse-ring{animation:pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite;}
/* ── REWARDS/VIP ── */
.reward-card{
  background:linear-gradient(135deg,rgba(244,183,49,.08),rgba(244,183,49,.03));
  border:1px solid rgba(244,183,49,.2);border-radius:var(--r-lg);padding:14px;
  cursor:pointer;transition:all var(--t);
}
.reward-card:hover{border-color:var(--gold-bd);transform:translateY(-2px);}
/* ── STRIPE CARD ── */
.stripe-hero{
  background:linear-gradient(135deg,#635bff 0%,#0073e6 100%);
  border-radius:var(--r-lg);padding:18px 16px;margin-bottom:14px;
  position:relative;overflow:hidden;
}
.stripe-hero::before{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;background:rgba(255,255,255,.08);border-radius:50%;}
.stripe-hero::after{content:'';position:absolute;bottom:-30px;left:-20px;width:100px;height:100px;background:rgba(255,255,255,.05);border-radius:50%;}
.card-visual{
  width:100%;height:168px;border-radius:18px;
  background:linear-gradient(135deg,#1a1f36 0%,#2d3361 60%,#3d4494 100%);
  border:1px solid rgba(255,255,255,.15);
  padding:20px;position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  margin-bottom:0;
}
.card-visual::before{content:'';position:absolute;top:-20px;right:-20px;width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);border-radius:50%;}
.card-chip{width:42px;height:32px;border-radius:6px;background:linear-gradient(135deg,#f4b731,#c99218);border:1px solid rgba(255,255,255,.3);margin-bottom:18px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.card-chip::after{content:'';position:absolute;width:60%;height:1px;background:rgba(0,0,0,.25);}
.card-chip-lines{display:flex;flex-direction:column;gap:3px;width:70%;height:60%;}
.card-chip-line{height:2px;background:rgba(0,0,0,.3);border-radius:1px;}
.card-number{font-family:var(--mono);font-size:.95rem;letter-spacing:4px;color:rgba(255,255,255,.9);margin-bottom:16px;position:relative;z-index:1;}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;}
.card-holder-lbl{font-size:.5rem;color:rgba(255,255,255,.70);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;}
.card-holder-name{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:1px;text-transform:uppercase;}
.card-expiry-lbl{font-size:.5rem;color:rgba(255,255,255,.70);letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;text-align:right;}
.card-expiry{font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.9);text-align:right;}
.card-network{position:absolute;bottom:18px;right:18px;display:flex;gap:-4px;z-index:1;}
.card-net-circle{width:30px;height:30px;border-radius:50%;opacity:.9;}
/* Input style for card fields */
.card-input{
  width:100%;background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--text);
  font-family:var(--mono);font-size:.88rem;transition:all var(--t);
  letter-spacing:1px;
}
.card-input:focus{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,.15);}
.stripe-secure-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(99,91,255,.08);border:1px solid rgba(99,91,255,.22);
  border-radius:var(--r-sm);padding:9px 12px;margin-bottom:14px;
}
.stripe-secure-text{font-size:.64rem;color:var(--text2);line-height:1.55;}
.stripe-btn{
  width:100%;padding:15px;border-radius:var(--r);
  background:linear-gradient(135deg,#635bff,#0073e6);
  border:none;font-family:var(--font);font-weight:800;
  font-size:.9rem;color:#fff;cursor:pointer;
  transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 24px rgba(99,91,255,.38);
}
.stripe-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(99,91,255,.48);}
.stripe-btn:active{transform:scale(.97);}
.stripe-processing{background:linear-gradient(135deg,#635bff,#0073e6);animation:pulse 1.5s ease infinite;}
/* ── ADMIN PANEL ── */
.admin-hero{background:linear-gradient(135deg,#0a0f1e,#050810);border:1px solid rgba(59,130,246,.22);border-radius:var(--r-xl);padding:18px 16px;margin-bottom:13px;position:relative;overflow:hidden}
.admin-hero::before{content:'';position:absolute;top:-50px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);pointer-events:none}
.admin-hero::after{content:'🛡️';position:absolute;bottom:-20px;right:6px;font-size:90px;opacity:.06;pointer-events:none}
.admin-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:99px;padding:3px 10px;font-size:.57rem;font-weight:700;color:var(--red);margin-bottom:8px}
.admin-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.admin-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;text-align:center}
.admin-stat-v{font-size:1.1rem;font-weight:800;color:var(--text)}
.admin-stat-l{font-size:.57rem;color:var(--text3);margin-top:2px}
.admin-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px;cursor:pointer;transition:all var(--t)}
.admin-row:hover{border-color:rgba(59,130,246,.25);background:var(--card2)}
.admin-row-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.admin-row-inf{flex:1;min-width:0}
.admin-row-nm{font-size:.78rem;font-weight:700;color:var(--text)}
.admin-row-sub{font-size:.59rem;color:var(--text3);margin-top:1px}
.admin-row-r{flex-shrink:0;text-align:right}
.admin-kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:12px}
.admin-kpi{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px;text-align:center}
.admin-kpi-v{font-size:.86rem;font-weight:800;color:var(--text)}
.admin-kpi-l{font-size:.55rem;color:var(--text3);margin-top:1px}
.admin-chart-bar{display:flex;align-items:flex-end;gap:4px;height:56px;padding:0 4px}
.admin-bar{flex:1;border-radius:3px 3px 0 0;min-height:4px;transition:height .3s ease}
.admin-alert-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);margin-bottom:6px}
.admin-alert-ico{font-size:16px;flex-shrink:0}
.admin-alert-inf{flex:1;min-width:0}
.admin-alert-nm{font-size:.74rem;font-weight:700}
.admin-alert-sub{font-size:.58rem;color:var(--text3);margin-top:1px}

/* ════════════════════════════════════════
   OKX-INSPIRED PREMIUM REDESIGN v5.0
   ════════════════════════════════════════ */

/* Override root colors to OKX-style pure black */
:root {
  --bg:     #000000;
  --bg2:    #0a0a0a;
  --card:   #111111;
  --card2:  #161616;
  --card3:  #1e1e1e;
  --border: rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.12);
  --text:   #ffffff;
  --text2:  rgba(255,255,255,.72);
  /* Opacite relevee apres mesure : .38 donnait 3,4:1 et .2 donnait 1,8:1,
     pour 4,5 exiges. Ces deux jetons portent les libelles secondaires de
     toute l'application — ils ne sont pas decoratifs, ce sont des textes.

     L'audit ne le voyait pas : il jugeait le texte comme s'il etait opaque,
     ce qui gonflait le rapport. Un blanc a 38 % sur fond noir n'est pas du
     blanc, c'est un gris moyen. */
  --text3:  rgba(255,255,255,.55);
  --text4:  rgba(255,255,255,.47);
  --green:  #00d4a3;
  --green2: #00b890;
  --green-bg: rgba(0,212,163,.1);
  --red:    #f74f5e;
  --red-bg: rgba(247,79,94,.1);
  --gold:   #f4b731;
  --gold2:  #e5a420;
  --gold-bg:rgba(244,183,49,.08);
  --gold-bd:rgba(244,183,49,.2);
  --blue:   #3a7bff;
  --blue-bg:rgba(58,123,255,.1);
  --orange: #ff8c00;
  --orange-bg:rgba(255,140,0,.1);
  --purple: #7c4dff;
  --purple-bg:rgba(124,77,255,.1);
  --input-bg:rgba(255,255,255,.04);
  --r:    10px;
  --r-sm: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --t:    .18s ease;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --scrollbar: rgba(255,255,255,.08);
  --teal: #00d4a3;
  --shadow: 0 1px 12px rgba(0,0,0,.6);
  /* Surfaces de chrome (barre du haut, nav du bas). Elles etaient codees en
     dur en noir : en theme clair on obtenait du texte sombre sur fond noir. */
  --chrome-bg: rgba(0,0,0,.92);
  --chrome-bg-strong: rgba(0,0,0,.95);
}
[data-theme="light"] {
  --bg:#f4f5f7; --bg2:#fff; --card:#fff; --card2:#f0f1f3; --card3:#e8e9eb;
  --chrome-bg: rgba(255,255,255,.92);
  --chrome-bg-strong: rgba(255,255,255,.95);
  --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.12);
  --text:#0d0d0d; --text2:rgba(0,0,0,.7); --text3:rgba(0,0,0,.38); --text4:rgba(0,0,0,.2);
  --scrollbar:rgba(0,0,0,.08); --input-bg:rgba(0,0,0,.04);
}

/* ── Back-office : il ne tient pas dans une coque de 390 px ──
   Réservé au web sur poste (cf. adminAutorise), il déborde volontairement
   de la maquette téléphone pour rester lisible : formulaires de barèmes,
   listes de projets et tableaux ont besoin de largeur. */
@media (min-width: 1024px) {
  .phone:has(#pg-admin.on) {
    width: min(980px, 92vw);
    transition: width .25s ease;
  }
  #pg-admin .ssg { max-width: 900px; }
  #pg-admin #adm-tiers > div,
  #pg-admin #adm-eco > div,
  #pg-admin #adm-referral > div { align-items: center; }
}

/* ── OKX-style topbar ── */
.topbar {
  background: var(--chrome-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── OKX-style bottom nav ── */
.bnav {
  background: var(--chrome-bg-strong) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--border) !important;
}

/* ── OKX balance hero style ── */
.bal-hero {
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* ── OKX price ticker ── */
.ticker-wrap {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-inner {
  display: inline-flex;
  gap: 0;
  animation: ticker 28s linear infinite;
}
.ticker-inner:hover { animation-play-state: paused; }
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: .68rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.tick-sym { font-weight: 700; color: var(--text); font-family: var(--mono); }
.tick-px  { color: var(--text2); font-family: var(--mono); }
.tick-chg.up   { color: var(--green); }
.tick-chg.dn   { color: var(--red);   }

/* ── OKX-style action buttons (square icon + label) ── */
.okx-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px 0;
}
.okx-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all var(--t);
}
.okx-act:active { transform: scale(.92); }
.okx-act-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--card2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all var(--t);
}
.okx-act:hover .okx-act-ico {
  background: var(--card3);
  border-color: var(--border2);
  transform: translateY(-2px);
}
.okx-act-lbl { font-size: .6rem; color: var(--text3); font-weight: 600; text-align: center; }

/* ── OKX Asset Row ── */
.asset-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.asset-row:last-child { border-bottom: none; }
.asset-row:active { background: var(--card2); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: var(--r-sm); }
.asset-logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  background: var(--card2);
  border: 1px solid var(--border);
}
.asset-inf { flex: 1; min-width: 0; }
.asset-sym { font-size: .86rem; font-weight: 700; color: var(--text); font-family: var(--mono); }
.asset-name{ font-size: .6rem; color: var(--text3); margin-top: 2px; }
.asset-r { text-align: right; flex-shrink: 0; }
.asset-bal  { font-size: .86rem; font-weight: 700; color: var(--text); font-family: var(--mono); }
.asset-usd  { font-size: .6rem; color: var(--text3); margin-top: 2px; font-family: var(--mono); }
.asset-chg  { font-size: .64rem; font-weight: 600; font-family: var(--mono); }
.asset-chg.up { color: var(--green); }
.asset-chg.dn { color: var(--red); }

/* ── OKX Market card ── */
.mkt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  transition: all var(--t);
  cursor: pointer;
}
.mkt-card:hover { border-color: var(--border2); background: var(--card2); }
.mkt-pair { font-size: .78rem; font-weight: 700; color: var(--text); }
.mkt-price{ font-size: 1.05rem; font-weight: 800; color: var(--text); font-family: var(--mono); margin: 6px 0 4px; }
.mkt-vol  { font-size: .6rem; color: var(--text3); }

/* ── OKX-style sparkline inline ── */
.sparkline { width: 64px; height: 28px; flex-shrink: 0; }

/* ── OKX Announcement banner ── */
.announce-bar {
  background: linear-gradient(135deg, rgba(244,183,49,.12), rgba(0,212,163,.07));
  border: 1px solid rgba(244,183,49,.18);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  color: var(--text2);
  margin-bottom: 10px;
  cursor: pointer;
}
.announce-bar:hover { border-color: rgba(244,183,49,.28); }

/* ── Stats row (OKX-style compact KPIs) ── */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.stat-cell {
  background: var(--card);
  padding: 10px;
  text-align: center;
}
.stat-v { font-size: .88rem; font-weight: 800; color: var(--text); font-family: var(--mono); }
.stat-l { font-size: .56rem; color: var(--text3); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }

/* ── OKX Tab style (pill) ── */
.tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--card2);
  border-radius: 10px;
  margin-bottom: 12px;
}
.tab {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--text3);
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.tab.on {
  background: var(--card3);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── OKX Section header ── */
.sec-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sec-hd-t { font-size: .82rem; font-weight: 800; color: var(--text); }
.sec-hd-r { font-size: .68rem; color: var(--text3); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.sec-hd-r:hover { color: var(--text2); }

/* ── Bouton principal : aplat plutot que degrade ── */
.btn-g {
  background: var(--gold) !important;
  color: #000 !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.btn-g:hover { background: var(--gold2) !important; }

/* ── OKX Card ── */
.card2 { background: var(--card2) !important; }

/* ── Sidebar OKX-style ── */
.sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}

/* ── Pool card OKX-style ── */
.pool-i {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
}
.pool-i:hover { border-color: var(--border2) !important; }

/* ── P2P OKX-style ── */
.p2p-offer {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}
.p2p-offer:hover { border-color: var(--border2) !important; }

/* ── Sheet modal OKX-style ── */
.sheet {
  background: var(--card) !important;
  border-top: 1px solid var(--border2) !important;
}

/* ── TX row OKX-style ── */
.txrow {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.txrow:last-child { border-bottom: none !important; }
.txrow:hover { background: var(--card2) !important; }

/* ── OKX Scroll bar ultra-slim ── */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Loading skeleton OKX-style ── */
@keyframes skel { 0%{opacity:.4}50%{opacity:.8}100%{opacity:.4} }
.skel { animation: skel 1.6s ease infinite; background: var(--card2) !important; border-radius: var(--r-sm); }

/* ── Price change chip ── */
.chg-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 700;
  font-family: var(--mono);
}
.chg-chip.up { background: rgba(0,212,163,.12); color: var(--green); }
.chg-chip.dn { background: rgba(247,79,94,.12); color: var(--red); }


/* ── MEGA MENU NAV BUTTONS ── */
.mm-nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;transition:all var(--t);text-align:center;
}
.mm-nav-btn:hover{border-color:var(--border2);background:var(--card3);}
.mm-nav-btn:active{transform:scale(.93);}
.mm-nav-ico{font-size:22px}
.mm-nav-lbl{font-size:.58rem;color:var(--text3);font-weight:600}

/* ── CHAIN SELECTOR BUTTONS ── */
.chain-sel-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;background:var(--card2);border:1.5px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;transition:all var(--t);text-align:center;
  font-size:.58rem;color:var(--text3);font-weight:700;
}
.chain-sel-btn span{font-size:16px;line-height:1}
.chain-sel-btn div{font-size:.55rem;margin-top:1px}
.chain-sel-btn.on{
  background:rgba(243,183,49,.12);border-color:rgba(243,183,49,.5);color:var(--gold);
}
.chain-sel-btn:active{transform:scale(.92);}

/* ── WALLET MANAGER ── */
.wallet-item {
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;background:var(--card2);
  border:1.5px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:all var(--t);
}
.wallet-item:hover { border-color:var(--border2); background:var(--card3); }
.wallet-item.active {
  border-color:var(--gold-bd);
  background:var(--gold-bg);
}
.wallet-item-avatar {
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;flex-shrink:0;
}
.wallet-item-info { flex:1;min-width:0; }
.wallet-item-name { font-size:.84rem;font-weight:800;color:var(--text); }
.wallet-item-addr { font-size:.6rem;color:var(--text3);font-family:var(--mono);margin-top:2px; }
.wallet-item-bal  { font-size:.76rem;font-weight:700;color:var(--gold);text-align:right; }
.wallet-item-net  { font-size:.56rem;color:var(--text3);text-align:right;margin-top:1px; }
.wallet-color-opt.on { box-shadow:0 0 0 3px var(--text),0 0 0 5px var(--gold); }

/* ── MENU PLEINE PAGE ──
   Le menu est la navigation principale : il couvre tout l ecran plutot que
   de remonter en feuille basse. `.overlay` aligne ses enfants en bas ; on
   neutralise cet alignement ici. */
.menu-plein{align-items:stretch;background:var(--bg)}
.menu-corps{
  width:100%;height:100%;overflow-y:auto;
  padding:calc(var(--safe-top) + 14px) 16px calc(var(--safe-bot) + 24px);
  /* Le contenu glisse depuis la droite : un menu plein ecran qui monterait
     du bas se confondrait avec les feuilles modales. */
  transform:translateX(14px);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .2s;
}
.overlay.on .menu-corps{transform:none;opacity:1}
.menu-corps::-webkit-scrollbar{display:none}
.menu-entete{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.menu-titre{font-size:1.5rem;font-weight:900;color:var(--text);letter-spacing:-.5px}
.menu-sous{font-size:.68rem;color:var(--text3);margin-top:2px}
.menu-fermer{
  width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:1px solid var(--border);border-radius:50%;
  font-size:15px;color:var(--text2);cursor:pointer;transition:all var(--t);
}
.menu-fermer:hover{border-color:var(--border2);color:var(--text)}
.menu-section{
  font-size:.62rem;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:1.1px;margin:0 0 10px;
}
.menu-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:22px}
.menu-lignes{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}

/* Les tuiles respirent davantage qu en feuille basse : la place ne manque plus. */
.menu-plein .mm-nav-btn{padding:15px 8px}

@media (min-width:520px){
  .menu-grille{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════════
   Ce bloc est volontairement en FIN de feuille : place plus haut, il etait
   ecrase par les definitions de composants, a specificite egale mais
   position plus basse dans la cascade. C'est la zone de surcharge de la
   migration ; les regles y remonteront a mesure que les composants seront
   convertis (phase 3).
   ══════════════════════════════════════════════════════════════════ */
/* ══ ACCESSIBILITE — phase 2 ═══════════════════════════════════════
   Ajoute apres mesure : 0 regle de focus, 0 prise en compte du mouvement
   reduit, et 10 a 16 cibles sous 44 px par ecran. */

/* ── Focus visible ──
   :focus-visible et non :focus : le contour n'apparait qu'au clavier, pas
   au clic a la souris, ou il serait percu comme un defaut. Le reset posait
   outline:none sur boutons et champs sans jamais rien remettre : la cible du
   clavier etait donc introuvable. */
:focus{outline:none}
:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}
/* Les elements rendus cliquables par un attribut onclick ne sont pas
   focalisables par defaut. Tant que la conversion en <button> n'est pas
   faite (phase 3), on rend au moins leur focus visible quand il survient. */
[onclick]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ── Mouvement reduit ──
   Une preference systeme, pas un gout : elle repond a des troubles
   vestibulaires. On neutralise les transitions et animations plutot que de
   les raccourcir, tout en gardant le defilement utilisable. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Cibles tactiles ──
   L'extension par pseudo-element a ete essayee puis abandonnee : les
   controles sont espaces de moins de 44 px, la zone etendue recouvrait donc
   le voisin, et c'est lui qui recevait le pointage. Une zone sensible qu'un
   autre element intercepte n'existe pas. On dimensionne pour de bon. */

.ic-btn{width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius-md)}

/* Les controles a hauteur libre recoivent un plancher et l'espace interieur
   qui va avec : forcer la hauteur sans ajuster le remplissage decalerait le
   texte vers le haut. */
.net-chip,.hf,.fp,.tok-btn,.tab{
  min-height:var(--touch-min);
  /* min-width aussi : « 1J » mesurait 25 x 44 — conforme en hauteur,
     inatteignable en largeur. */
  min-width:var(--touch-min);
  display:inline-flex;align-items:center;justify-content:center;
}

/* La bascule de visibilite du solde et la poignee de la barre du bas sont
   isolees : leur zone peut s'etendre sans rien recouvrir. */
/* .bn-handle est exclue : c'est une barre pleine largeur de 10 px. Lui
   imposer 44 x 44 la transformait en bloc de 44 px, d'ou une barre
   parasite en bas a gauche. Sa largeur la rend deja facile a saisir ;
   l'epaissir mangerait de la place au contenu. */
.bal-hide-btn{
  position:relative;
  min-width:var(--touch-min);min-height:var(--touch-min);
  display:inline-flex;align-items:center;justify-content:center;
}

/* L'interrupteur garde sa taille visuelle — l'agrandir le ferait ressembler
   a un bouton — mais sa ligne entiere est deja cliquable. */
.tgl{position:relative}

/* ── Reste des cibles, releve apres la premiere passe ──
   Les elements sans classe (`div`, `span`, `button` nus) portant un onclick
   sont trop divers pour une regle globale : les convertir en composants est
   le travail de la phase 3. On traite ici ce qui se nomme. */

/* Selecteur de wallet : 130 x 38, la cible la plus frequente de l'app. */
#wallet-topbar-btn{min-height:var(--touch-min)}

/* Boutons de tri des listes (prix, variation, capitalisation, TVL, ROI…) :
   des puces de 22 px de haut, alignees en rangee. */
#sort-price,#sort-chg,#sort-cap,
#psrt-apy,#psrt-tvl,#psrt-vol,
#eco-sort-roi,#eco-sort-tvl,#eco-sort-new{
  min-height:var(--touch-min);
  display:inline-flex;align-items:center;justify-content:center;
}

/* Boutons compacts : le pas `btn-sm` descendait a 35 px. */
.btn-sm{min-height:var(--touch-min)}

/* Interrupteurs : leur taille visuelle est volontaire — l'agrandir les
   ferait passer pour des boutons — mais la zone doit atteindre le seuil.
   Ils sont isoles en fin de ligne : l'extension ne recouvre rien. */
.tgl{
  position:relative;
  min-height:var(--touch-min);
  display:inline-flex;align-items:center;
}

/* Liens d'action de section (« Tout voir → », « + Ajouter → ») et raccourcis
   de montant du swap (MAX, 25 %, 50 %). Ils lisent comme du texte, ce qui
   est voulu, mais restent des commandes : la zone doit suivre. */
.sh-a,.sw-max{
  min-height:var(--touch-min);min-width:var(--touch-min);justify-content:center;
  display:inline-flex;align-items:center;
}
.sw-pct,.sw-quick,.qa{
  min-height:var(--touch-min);min-width:var(--touch-min);
  display:inline-flex;align-items:center;justify-content:center;
}

/* Tout bouton porte le plancher : c'est la classe la plus repandue de
   l'application, et la plus surement destinee au doigt. */
.btn{min-height:var(--touch-min)}

/* ══ UTILITAIRES — phase 3 ══════════════════════════════════════════
   Chaque classe remplace un motif inline releve au moins trois fois. Les
   tailles sont ramenees sur l'echelle de la phase 1 : les ecarts sont
   inferieurs au pixel et vont dans le sens de la lisibilite. */

.tx-titre{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--text)}
.tx-corps{font-size:var(--fs-small);color:var(--text)}
.tx-legende{font-size:var(--fs-caption);color:var(--text3)}
.tx-micro{font-size:var(--fs-micro);color:var(--text3)}
.tx-attenue{color:var(--text3)}

/* Les signaux financiers ne sont jamais portes par la seule couleur : le
   signe et la fleche restent dans le texte (cf. audit, §40). */
.sig-hausse{color:var(--profit)}
.sig-baisse{color:var(--loss)}
.sig-marque{color:var(--primary)}

.u-masque{display:none}
.u-flex1{flex:1}
.u-min0{min-width:0}
.u-m0{margin:0}
.u-centre{text-align:center}
.u-droite{text-align:right}
.u-fixe{flex-shrink:0}

/* ══ COMPOSANTS — phase 3 ════════════════════════════════════════════
   .ligne remplace deux ecritures voisines du meme objet (gap 10 ou 11,
   bordure 1 ou 1,5 px, padding 12 ou 9/12). Une seule definition, un seul
   comportement — c'est precisement ce que le systeme doit absorber. */

.ligne{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  min-height:var(--touch-min);
  cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.ligne:hover{border-color:var(--border2);background:var(--card3)}
.ligne:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* Tailles d'icone. Les emoji tiennent lieu d'icones : les nommer est le
   prealable a leur remplacement par un jeu SVG (phase 4). */
.ico-sm{font-size:16px;line-height:1}
.ico-md{font-size:21px;line-height:1}
.ico-lg{font-size:26px;line-height:1}

.tx-donnee{
  font-size:var(--fs-caption);font-family:var(--mono);
  color:var(--text3);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
}
.tx-montant{
  font-size:var(--fs-h3);font-weight:var(--fw-black);color:var(--primary);
  font-variant-numeric:tabular-nums;
}
.tx-suite{margin-top:1px}
.u-bloc-suite{display:block;margin-top:3px}
.u-tuile{padding:var(--space-3);text-align:center}

.fond-info{background:var(--blue-bg)}
.fond-ok{background:var(--green-bg)}
.fond-marque{background:var(--gold-bg)}
.fond-alerte{background:var(--red-bg)}

/* ══ UTILITAIRES (suite) — phase 3 ═══════════════════════════════════
   Derniere passe mecanique. Les 461 motifs restants n'apparaissent qu'une
   fois chacun : ce sont des ajustements ponctuels, que seule une reecriture
   ecran par ecran peut absorber. */

.tx-titre-fort{font-size:var(--fs-h3);font-weight:var(--fw-black);color:var(--text)}
.tx-section{
  font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2);
}
.sig-info{color:var(--blue)}
.ico-xl{font-size:32px;line-height:1}

.u-rangee{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-1)}
.u-mb1{margin-bottom:var(--space-1)}
.u-mb2{margin-bottom:var(--space-2)}
.u-mb3{margin-bottom:var(--space-3)}
.u-mt2{margin-top:var(--space-2)}
.u-mt3{margin-top:var(--space-3)}
.u-inerte{cursor:default}
.u-etat-vide{text-align:center;padding:var(--space-5)}

/* ══ ICONES — phase 4 ═══════════════════════════════════════════════
   `currentColor` fait tout le travail : une icone suit la couleur de son
   texte, y compris en survol ou en etat d'erreur. C'est ce qu'un emoji ne
   peut pas faire.
   `em` plutot que `px` : l'icone grandit avec le texte qui l'accompagne. */
.ico{
  width:1.15em;height:1.15em;
  display:inline-block;vertical-align:-.16em;
  flex:none;
}
/* Dans les conteneurs de taille nommee, l'icone prend toute la place. */
.ico-sm .ico,.ico-md .ico,.ico-lg .ico,.ico-xl .ico{width:1em;height:1em;vertical-align:-.12em}
.mm-nav-ico .ico{width:24px;height:24px;vertical-align:middle}

/* ══ ATTENTE ET ECHEC — phase 5 ══════════════════════════════════════
   Un squelette montre la FORME de ce qui arrive. « Chargement… » ne dit rien
   de plus que l'absence, et laisse la mise en page sauter a l'arrivee. */

.sq{
  background:linear-gradient(90deg,
    var(--card2) 0%, var(--card3) 40%, var(--card2) 80%);
  background-size:220% 100%;
  border-radius:var(--radius-sm);
  animation:sq-glisse 1.4s ease-in-out infinite;
}
@keyframes sq-glisse{
  0%{background-position:120% 0}
  100%{background-position:-20% 0}
}

/* Le mouvement est un confort, pas une information : sans lui le squelette
   doit rester lisible comme une zone en attente. */
@media (prefers-reduced-motion:reduce){
  .sq{animation:none;background:var(--card2)}
}

.sq-ligne{height:12px;margin-bottom:var(--space-2)}
.sq-ligne:last-child{margin-bottom:0}
.sq-l-70{width:70%}
.sq-l-45{width:45%}
.sq-l-90{width:90%}
.sq-rond{width:38px;height:38px;border-radius:var(--radius-full);flex:none}

/* Rangee type : pastille + deux lignes. Reprend la geometrie de .ligne pour
   que rien ne bouge quand le contenu reel remplace le squelette. */
.sq-rangee{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-2);
  min-height:var(--touch-min);
}
.sq-rangee > div{flex:1;min-width:0}

/* ── Echec ──
   Un message d'erreur doit dire ce qui s'est passe ET proposer une suite.
   « Error 500 » ne fait ni l'un ni l'autre. */
.echec{
  border:1px solid var(--red-bg);
  background:var(--red-bg);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
}
.echec-titre{
  font-size:var(--fs-small);font-weight:var(--fw-bold);
  color:var(--text);margin-bottom:var(--space-1);
}
.echec-texte{
  font-size:var(--fs-caption);color:var(--text3);
  line-height:var(--lh-loose);margin-bottom:var(--space-3);
}

/* ══ SURFACE DESKTOP — phase 6 ═══════════════════════════════════════
   Au-dela de 1280 px, l'application occupait 730 px sur 1920 : une maquette
   de telephone de 390 px dans un cadre biseaute, plus un panneau. Un cadre
   de telephone sur un ecran d'ordinateur est une image du produit, pas le
   produit.

   Aucun rail de navigation n'est reintroduit : toutes les options vivent
   dans le menu, et cette regle prime sur le plan de migration initial. */

@media(min-width:1280px){
  .phone{
    /* 880 px — et 1040 au-dela de 1600 — etiraient une interface qui n'a
       qu'UNE colonne : carte de solde dont les cinq boutons devenaient des
       bannieres, carte « Portefeuille » vide sur toute la largeur, barre de
       navigation etalee, bandeau de prix coupe aux deux bouts.
       La mise en page a deux ou trois colonnes censee justifier cette largeur
       (.grille-desktop) n'a JAMAIS ete posee : le mot n'apparait nulle part
       dans index.html. La largeur etait donc donnee a un contenu qui ne
       savait pas s'en servir.

       560 px est la largeur qu'une colonne unique remplit sans se distendre.
       La fenetre reste une fenetre applicative — coins a 20 px, pas d'encoche,
       panneau lateral a cote — mais ses proportions redeviennent justes. */
    width:min(560px,calc(100vw - 460px));
    height:min(940px,calc(100vh - 96px));
    /* Le biseau de 48 px imitait un chassis ; 20 px lisent comme une
       fenetre applicative. */
    border-radius:20px;
    box-shadow:0 0 0 1px var(--border3),0 40px 120px rgba(0,0,0,.75);
  }

  /* L'encoche n'a de sens que sur un telephone. */
  .notch{display:none}

  /* Un peu plus d'air que sur mobile, sans plus : a 560 px, les 16 px de
     marge mobile suffisent presque. */
  #scroll{padding-left:var(--space-4);padding-right:var(--space-4)}
}

/* ══ CIBLES NOMMEES ═════════════════════════════════════════════════
   Ces elements n'avaient pas de classe : aucune regle ne pouvait les
   atteindre. Les nommer est le premier pas de la reecriture ecran par
   ecran — un element nomme est un element que le systeme peut gouverner. */

/* Boutons-icones isoles (reglages du swap, historique, inversion, edition). */
.btn-ico{
  min-width:var(--touch-min);min-height:var(--touch-min);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
}

/* Lignes qui deplient un contenu : pleine largeur, hauteur au seuil. */
.ligne-repli{min-height:var(--touch-min);display:flex;align-items:center}

/* Boutons de largeur libre en bas de section. */
.btn-large{min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center}

/* L'interrupteur mesurait 40 px de large pour 44 de haut. Quatre pixels
   de plus le rendent conforme sans que la difference se voie. */
.tgl{min-width:var(--touch-min)}

/* Barre du bas et actions rapides : les emoji y etaient dimensionnes par
   leur taille de police. Les SVG prennent une taille explicite. */
.nt-ico .ico{width:22px;height:22px;vertical-align:middle}
.ba-ico .ico{width:20px;height:20px;vertical-align:middle}

.sc-ico .ico{width:19px;height:19px;vertical-align:middle;color:var(--text3)}

/* Back-office : les emoji y etaient dimensionnes par la taille de police.
   Les SVG prennent une taille explicite, et suivent la couleur du texte —
   c'est ce qui fait qu'un onglet actif colore aussi son icone. */
.admin-tab .ico{width:15px;height:15px;vertical-align:-.14em;margin-right:2px}
.admin-row-ico .ico{width:18px;height:18px;vertical-align:middle}
.admin-sec-t .ico,.tx-section .ico{width:14px;height:14px;vertical-align:-.12em;margin-right:4px}

/* ══ ACCENTS DU THEME CLAIR ═════════════════════════════════════════
   Mesure avant correction : 16 textes sous le seuil WCAG AA, le pire a
   1,58:1. Cause : la feuille declarait « Accent – same both themes », donc
   les accents du theme sombre servaient tels quels sur fond blanc.

   Meme famille chromatique, luminosite abaissee jusqu'a franchir le seuil.
   Les fonds translucides ne bougent pas : ils portent la couleur, pas le
   texte, et n'ont donc pas de contraste a respecter. */

[data-theme="light"]{
  /* Dore : #f4b731 donne 1,58:1 sur blanc. */
  --gold:#8a5d0b;
  --gold2:#6f4a08;

  /* Verts : la marque en utilise deux nuances. */
  /* #0b7a56 donnait 4,29:1 sur le fond translucide des pastilles :
     un echec de justesse. Assombri juste ce qu'il faut. */
  --green:#0a6b4b;
  --green2:#095f43;
  --profit:#0b7a56;
  --confirmed:#0b7a56;

  --blue:#1d4ed8;
  --orange:#a14b00;
  --pending:#8a5a08;
  --purple:#6d3fd4;
  --teal:#0b7285;
  --red:#b3261e;
  --loss:#b3261e;
  --failed:#8c1d18;

  /* --primary suit le dore, dont il est l'alias. */
  --primary:#8a5d0b;
  --primary-dark:#6f4a08;
}

/* Un bouton plein doit inverser son texte : sur un dore assombri, du noir
   ne passerait pas. Blanc sur #8a5d0b donne 5,6:1. */
/* La regle de base pose `color:#000 !important` : sans !important ici, aucune
   specificite ne peut la battre. On repond en nature plutot que de retirer le
   !important d'origine, dont d'autres regles pourraient dependre. */
[data-theme="light"] .btn-g,
[data-theme="light"] .btn-p{color:#fff !important}

/* Puce de periode active : meme cas, un aplat dore avec du texte noir. */
[data-theme="light"] .fp.on{color:#fff}

/* Les pastilles de statut posent un texte colore sur un fond translucide de
   la meme teinte : en clair, le fond est presque blanc et le texte doit donc
   etre celui du theme clair, pas celui du sombre. */
[data-theme="light"] .bdg-g{color:var(--green)}
[data-theme="light"] .bdg-gold{color:var(--gold)}
[data-theme="light"] .bdg-b{color:var(--blue)}
[data-theme="light"] .bdg-r{color:var(--red)}

/* ══ EN-TETE SUR ECRAN ETROIT ═══════════════════════════════════════
   Mesure a 320 px : le bouton de notifications finissait a 315 px alors que
   la zone de contenu de la barre s'arrete a 306 — 9 px rognes, invisibles
   pour un controle de debordement qui regarde le defilement horizontal.

   Le nom du wallet est ce qui doit ceder : il porte deja une ellipse, et
   l'adresse tronquee juste en dessous suffit a identifier le wallet actif.
   Une commande rognee, elle, devient inatteignable. */

@media (max-width:360px){
  .topbar{padding-left:10px;padding-right:10px;gap:6px}
  #wallet-topbar-btn{max-width:96px}
}

/* Sous 340 px, l'ecran ne peut plus porter a la fois le nom et l'adresse :
   on garde l'avatar, qui identifie le wallet par sa couleur. */
@media (max-width:339px){
  #wallet-topbar-btn{max-width:64px}
  #wallet-name-top,#wallet-addr-top{display:none}
}

/* ══ CONTRASTE — CORRECTIFS PAR THEME ═══════════════════════════════
   Mesure sur les douze ecrans : six echecs en clair, trois en sombre. */

/* ── Theme clair ──
   Les puces de filtre actives posent du texte noir sur l'aplat dore. En
   clair, ce dore est assombri pour rester lisible comme texte — un noir
   par-dessus ne passe plus (3,65:1). Meme correctif que pour .fp.on. */
[data-theme="light"] .hf.on{color:#fff}

/* ── Theme sombre ──
   Le bleu des pastilles « Prochain » et « Nouveau » donnait 4,45:1 pour 4,5
   exiges : un echec de justesse, mais un echec. Le bleu du theme sombre est
   eclairci juste ce qu'il faut, sans changer de teinte. */
:root{--blue-txt:#5b9bff}
[data-theme="light"]{--blue-txt:#1d4ed8}
.bdg-b{color:var(--blue-txt)}

/* L'emplacement du QR code impose un fond blanc, quel que soit le theme :
   un lecteur optique a besoin du contraste maximal. Son symbole heritait de
   la couleur du texte courant — donc blanc sur blanc en theme sombre, soit
   1:1, parfaitement invisible. */
.qr-zone{color:#111 !important}

/* ── Banniere du palier VIP ──
   Son dégradé était écrit en inline : #1a0f00, un brun quasi noir pensé pour
   le fond sombre. En thème clair il restait tel quel et lisait comme un reste
   du sombre plutôt que comme un choix — lisible, mais terne.

   Une carte de tête peut rester sombre en thème clair, à condition que ce
   soit assumé : on l'enrichit donc au lieu de la subir. */
.vip-hero{
  background:linear-gradient(135deg,#1a0f00,#2d1800,#1a0f00);
  border:1px solid rgba(244,183,49,.25);
  border-radius:var(--r-xl);
  padding:var(--space-5) var(--space-4);
  margin-bottom:var(--space-3);
  position:relative;overflow:hidden;
}

/* En clair : mêmes teintes, plus saturées et plus profondes, avec un liseré
   doré plus affirmé. La carte se lit comme voulue, pas comme oubliée. */
[data-theme="light"] .vip-hero{
  background:linear-gradient(135deg,#33240a,#54400f,#33240a);
  border-color:rgba(244,183,49,.45);
  box-shadow:0 6px 22px -10px rgba(84,64,15,.55);
}

/* ── Textes attenues du theme clair ──
   Meme mesure, meme conclusion : du noir a 38 % sur fond clair donne 2,6:1.
   Le seuil demande environ 55 % pour un fond a #f2f4fc. */
[data-theme="light"]{
  --text3:rgba(0,0,0,.62);
  --text4:rgba(0,0,0,.56);
}

/* ══ CARTES DE TETE SUR FOND SOMBRE ═════════════════════════════════
   Ces trois cartes gardent un fond sombre dans les deux themes. En theme
   clair, leur contenu heritait pourtant des jetons clairs : texte presque
   noir, dore assombri pour tenir sur du blanc. Mesure : 1,14:1.

   Elles redeclarent donc les jetons du theme sombre pour ce qu'elles
   contiennent — une inversion locale, la seule qui vaille quand un fond va a
   contre-courant de son theme. */

/* Seule .vip-hero reste sombre en theme clair : la carte de solde et celle
   de l'ecosysteme sont passees au clair, et leur inversion locale rendait
   desormais leur texte blanc sur blanc. */
[data-theme="light"] .vip-hero{
  --text:#ffffff;
  --text2:rgba(255,255,255,.78);
  --text3:rgba(255,255,255,.62);
  --text4:rgba(255,255,255,.5);
  --gold:#f4b731;
  --gold2:#e5a420;
  --primary:#f4b731;
  --green:#2ee0a8;
  --profit:#2ee0a8;
  --blue:#7cb0ff;
  --blue-txt:#7cb0ff;

  /* Redeclarer un jeton ne suffit pas : `color` est HERITE de l'exterieur de
     la carte, ou var(--text) a deja ete resolu en noir. Rien ne le reevalue
     ici. Il faut donc le poser explicitement pour que l'heritage reparte de
     la valeur locale. */
  color:var(--text);
}

/* Les couleurs posees en dur dans le balisage de ces cartes — blanc a faible
   opacite — restent correctes : c'est le fond qui n'avait pas change. */

/* ── Accents utilises comme TEXTE ──
   Le violet (#8b5cf6) donnait 4,1:1 sur « Dollar Cost Averaging » et le
   bleu 4,41:1 sur « FIDO2 » : deux echecs de justesse, invisibles tant que
   l'audit ecartait les fonds en degrade. Ces jetons servent au texte ;
   les couleurs d'aplat, elles, ne changent pas. */
:root{--purple-txt:#a78bfa}
[data-theme="light"]{--purple-txt:#6d3fd4}

/* ══ CONTRASTE SUR FONDS EN DEGRADE ══════════════════════════════════
   Ces defauts sont restes invisibles tant que l'audit ecartait les degrades.
   Les rendre mesurables en a revele dix-sept en theme sombre et quinze en
   clair — tous sur des cartes dont le fond n'etait jamais evalue. */

/* Initiales du profil : blanc sur violet-bleu donnait 3,85:1. Le meme
   degrade porte tres bien un texte sombre. */
/* Le texte sombre etait la mauvaise reponse : en theme clair, violet et bleu
   sont eux-memes assombris, et le rapport tombait a 2,76. C'est le DEGRADE
   qu'il faut fixer, sans dependre des jetons de theme. */
.prof-av{
  background:linear-gradient(135deg,#4c1d95,#1e3a8a);
  color:#fff;
}

/* Montants et gains des pools : le dore et le vert du theme clair donnaient
   3,49:1 et 3,96:1 sur les cartes. Assombris pour ce role de texte. */
[data-theme="light"] .tx-montant{color:#6f4a08}
[data-theme="light"] #pool-fees-earned{color:#08563c}

/* Pastille « Populaire » : le rouge d'aplat sur la banniere sombre donnait
   4,3:1. La banniere impose deja les accents du theme sombre ; celui-ci
   demande un cran de plus. */
/* La banniere de projet reste SOMBRE en theme clair : c'est un choix assume,
   elle sert d'en-tete a chaque carte et la distingue du corps clair. Son
   contenu garde donc les accents du theme sombre — comme toute surface qui
   va a contre-courant de son theme. */
[data-theme="light"] .eco-proj-banner{
  --green:#05c98e;
  --red:#ff6b61;
  --blue:#3b82f6;
  --gold:#f4b731;
  --blue-txt:#5b9bff;
  --text:#ffffff;
  --text2:rgba(255,255,255,.78);
  --text3:rgba(255,255,255,.64);
  color:#fff;
}
[data-theme="light"] .eco-proj-banner .tx-titre,
[data-theme="light"] .eco-proj-banner .eco-proj-name{color:#fff}
[data-theme="light"] .eco-proj-banner .tx-titre,
[data-theme="light"] .eco-proj-banner .eco-proj-name{color:#fff}

/* ══ DERNIERS CORRECTIFS DE CONTRASTE ════════════════════════════════
   Quatre causes distinctes, chacune verifiee a sa source. */

/* 1. Une SECONDE declaration de --blue (#3a7bff), posee plus bas dans la
      feuille, ecrasait le jeton de texte : la pastille FIDO2 restait a
      4,41:1. On force le jeton dedie sur les pastilles. */
.bdg-b{color:var(--blue-txt) !important}

/* 2. Le montant en dore ne doit pas etre assombri sur les cartes SOMBRES :
      applique partout, il tombait a 1,06:1 sur la banniere VIP, qui reste
      sombre en theme clair. On l'exclut explicitement. */
[data-theme="light"] .vip-hero .tx-montant{color:var(--gold3)}

/* 3. Les gains de pool portent leur couleur en attribut : seule une regle
      !important peut l'atteindre sans reecrire le balisage. */
[data-theme="light"] #pool-fees-earned{color:#08563c !important}

/* 4. La pastille rouge de la banniere de projet : la banniere impose deja
      les accents du theme sombre, mais .bdg-r porte sa propre couleur. */
[data-theme="light"] .eco-proj-banner .risk-high,
[data-theme="light"] .eco-proj-card .risk-high,
[data-theme="light"] .eco-proj-banner .bdg-r,
[data-theme="light"] .eco-proj-card .bdg-r{color:#ff8a80}

/* ══ CARTES DE TETE EN THEME CLAIR ═══════════════════════════════════
   La carte de solde et celle de l'ecosysteme restaient sombres sur un fond
   clair : lisibles, mais elles lisaient comme des cadres poses par-dessus
   l'ecran plutot que comme des elements de la page.

   Leur contenu porte du blanc a diverses opacites, ecrit en dur. Convertir la
   surface sans convertir le texte le rendrait invisible : les deux vont
   ensemble. */

/* ── Theme clair : indigo lumineux ──
   Le bleu profond porte la carte sans l'assombrir : il se lit comme une
   surface de marque, pas comme un bloc rapporte. */
[data-theme="light"] .bal-card{
  background:linear-gradient(150deg,#0046bf 0%,#0036a4 48%,#002878 100%);
  border:1px solid rgba(0,40,120,.30);
  box-shadow:0 12px 32px -14px rgba(0,40,120,.55);

  --text:#ffffff;
  --text2:rgba(255,255,255,.88);
  --text3:rgba(255,255,255,.76);
  --primary:#a9c7ff;
}

/* ── Theme sombre : vert profond ── */
/* ── Theme sombre : le meme bleu, assombri ──
   Meme famille chromatique, luminosite abaissee : la carte reste une surface
   de marque sans eclairer la page autour d'elle. */
:root:not([data-theme="light"]) .bal-card,
[data-theme="dark"] .bal-card{
  background:linear-gradient(150deg,#00337a 0%,#00214f 52%,#00132e 100%);
  border:1px solid rgba(0,70,191,.30);
  box-shadow:0 14px 36px -18px rgba(0,0,0,.75);

  --text:#ffffff;
  --text2:rgba(255,255,255,.84);
  --text3:rgba(255,255,255,.70);
  --primary:#8fb4ff;
}

/* Le montant reprend la couleur du texte de la carte : un degrade applique
   au texte se lisait mal sur un aplat colore. */
.bal-amt{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--text);
  font-weight:var(--fw-black);
}

/* Typographie a deux niveaux : les centimes passent au second plan, la
   grandeur reste lisible d'un coup d'oeil. Emprunte aux references, ou
   c'est le seul detail typographique vraiment transposable. */
.bal-dec{
  font-size:.52em;
  font-weight:var(--fw-bold);
  opacity:.68;
  letter-spacing:0;
}

/* Les actions rapides deviennent des pastilles posees SUR l'aplat : elles
   empruntent leur fond a la carte plutot que d'apporter le leur. */
.ba{
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.14);
}
.ba:hover{background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.24)}
/* La carte est foncee dans les deux themes : les pastilles gardent donc
   partout le meme blanc translucide. */

/* La pastille d'icone n'a plus besoin de sa couleur propre : sur un aplat,
   elle ferait tache. L'icone seule porte la distinction. */
.ba-ico{background:transparent !important}
.ba-ico .ico{width:19px;height:19px;color:var(--text)}

/* Le point du libelle prend la couleur d'accent locale. */
.bal-dot{background:var(--primary)}

/* ══ CORRECTIFS DE SURFACE ═══════════════════════════════════════════
   Place en fin de feuille : un SECOND bloc de jetons clairs existe plus haut
   (--text:#0d0d0d), et il gagne sur le premier. Les surcharges de surface
   doivent donc venir apres lui, sinon elles sont muettes.

   Les couleurs sont ecrites en clair et non en jetons : ces cartes portent
   leur propre fond, elles ne doivent rien heriter de la page. */

/* ── Carte du solde : indigo dans les deux themes ── */
/* La carte porte elle-meme du texte : sans couleur propre, elle herite du
   --text de la page — noir sur indigo, 2,12:1. */
.bal-card{color:#ffffff}

/* Sur l'arret le plus clair de l'indigo (#0046bf), un blanc a 92 % ne donne
   que 3,77:1. Les libelles d'action passent au blanc plein. */
.bal-card .ba-l{color:#ffffff !important}

.bal-card .bal-eye,
.bal-card .bal-eye *{color:rgba(255,255,255,.88) !important}
.bal-card .bal-amt,
.bal-card .bal-vide{color:#ffffff !important}
.bal-card .bal-vide-sous,
.bal-card .bal-local{color:rgba(255,255,255,.78) !important}
.bal-card .ba-l{color:rgba(255,255,255,.92) !important}
.bal-card .ba-ico .ico{color:#ffffff}
.bal-card .bal-hide-btn{color:rgba(255,255,255,.78)}
.bal-card .bal-hide-btn:hover{color:#fff;background:rgba(255,255,255,.16)}

/* ── Carte Ecosysteme : meme indigo que la carte de solde ──
   Elle etait vert tres sombre en theme sombre, blanc-verdatre en theme clair.
   Depuis que la carte de solde porte l'indigo de marque, deux cartes de tete
   sans parente commune donnaient l'impression de deux applications cousues
   ensemble. Meme degrade, meme texte blanc, memes pastilles sombres. */
[data-theme="light"] .eco-hero{
  background:linear-gradient(150deg,#0046bf 0%,#0036a4 48%,#002878 100%) !important;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 14px 34px -18px rgba(0,40,120,.6);
}
:root:not([data-theme="light"]) .eco-hero,
[data-theme="dark"] .eco-hero{
  background:linear-gradient(150deg,#00337a 0%,#00214f 52%,#00132e 100%) !important;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.7);
}

/* Le halo et la feuille etaient verts : sur l'indigo ils tiraient la carte vers
   une seconde teinte. Un losange blanc tres discret, comme sur la page de
   presentation, tient le meme role decoratif sans introduire de couleur. */
.eco-hero::before{
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);
}
.eco-hero::after{
  content:'';
  bottom:-110px;right:-70px;width:230px;height:230px;
  background:rgba(255,255,255,.05);
  border-radius:46px;transform:rotate(45deg);
  opacity:1;
}

.eco-hero{color:#ffffff}
.eco-hero .eco-hero-label{color:rgba(255,255,255,.94) !important}
.eco-hero .eco-hero-label::before{background:#8ef0cc}
.eco-hero .eco-hero-sub{color:rgba(255,255,255,.92) !important}

/* Chiffres alignes en colonne, comme sur la carte de solde : un montant qui
   change de largeur a chaque rafraichissement fait sautiller la carte. */
.eco-hero-total,
[data-theme="light"] .eco-hero-total{
  background:none;
  -webkit-text-fill-color:#ffffff;
  color:#ffffff;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Le vert sur indigo tombe sous le seuil de lisibilite : la pastille garde son
   role d'accent par le fond, pas par la couleur du texte. */
.eco-hero .eco-hero-gains{
  color:#ffffff;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.14);
}
.eco-hero .eco-gain{color:#ffffff !important}

/* Pastilles d'action : fond assombri plutot qu'eclairci. Un voile blanc sur
   l'indigo l'eclaircit et fait chuter le contraste du libelle blanc. */
.eco-hero .eco-act,
[data-theme="light"] .eco-hero .eco-act{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
}
.eco-hero .eco-act:hover,
[data-theme="light"] .eco-hero .eco-act:hover{
  background:rgba(0,0,0,.26);
  border-color:rgba(255,255,255,.26);
}
.eco-hero .eco-act-lbl,
[data-theme="light"] .eco-hero .eco-act-lbl{color:#ffffff !important}

/* ── Cartes dApps ──
   Elles reprenaient l'accent or au survol, seul reste d'une palette anterieure,
   et affichaient le domaine en vert — une couleur qui, dans un portefeuille,
   se lit comme « verifie ». Le domaine est une information neutre : il doit
   etre lisible, pas rassurant. */
.dapp-card{
  padding:15px 12px 13px;
  border-radius:var(--r-lg);
  transition:transform .14s ease,border-color .2s,box-shadow .2s;
}
.dapp-card:hover{
  border-color:rgba(0,70,191,.45);
  box-shadow:0 12px 26px -18px rgba(0,40,120,.8);
  transform:translateY(-2px);
}
.dapp-card:focus-visible{
  outline:2px solid #0046bf;
  outline-offset:2px;
}
.dapp-ico{
  box-shadow:0 6px 16px -10px rgba(0,0,0,.55);
}
.dapp-nm{letter-spacing:-.01em}
.dapp-users{
  color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Etat vide de la carte ──
   Le message remplace le montant : sans echelle propre, il heritait du corps
   de 40 px prevu pour le solde et occupait toute la carte. */
.bal-amt-vide{
  background:none;
  -webkit-text-fill-color:currentColor;
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  letter-spacing:normal;
}
.bal-card .bal-vide{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  margin-bottom:var(--space-1);
}
/* 78 % de blanc sur l arret le plus clair de l indigo ne donnent que 3,92:1.
   Le sous-titre passe au blanc plein — il porte une consigne, pas un detail. */
.bal-card .bal-vide-sous{
  color:rgba(255,255,255,.94) !important;
  font-size:var(--fs-caption);
  line-height:var(--lh-normal);
  max-width:34ch;
}

/* Le bouton « masquer » se pose en haut a droite de la carte. */
.bal-card{position:relative}
.bal-card .bal-hide-btn{
  position:absolute;top:var(--space-2);right:var(--space-2);
}

/* La pastille de variation ne parait que si elle porte une variation.
   Vide, elle laissait une petite barre coloree sous le message d'etat vide —
   un residu que rien n'expliquait a l'ecran. Meme regle pour la
   contre-valeur en devise locale. */
.bal-chg:empty,.bal-chg.vide,
.bal-local:empty{display:none}

/* ── Icones des onglets et des chips de categorie ──
   Les libelles etaient prefixes d'un emoji. Rendu par la police systeme, il
   change de dessin, de chasse et de couleur selon la plateforme : l'onglet NFT
   etait bleu sur Android et gris sur Windows, sans que rien dans le code ne le
   dise. Le jeu trace suit la couleur du texte, donc l'etat actif comme le
   theme.

   Les deux controles deviennent des boites flex : sans cela l'icone se posait
   sur la ligne de base du texte et le libelle sautait de deux pixels. */
.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hf{display:inline-flex;align-items:center;gap:6px}

.tab svg.ico,
.hf svg.ico{width:14px;height:14px;flex:none;stroke-width:2.2}

/* Le libelle porte le rognage, plus le bouton : `text-overflow` sur un
   conteneur flex n'ecourte rien, et l'onglet coupait net au lieu de poser des
   points de suspension. */
.tab > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Les pastilles d'action de la carte Ecosysteme portent desormais des icones
   tracees : elles doivent etre centrees et prendre la couleur du texte de la
   carte, qui est blanc sur l'indigo. */
.eco-act-ico svg.ico{width:17px;height:17px}
.eco-hero .eco-act-ico{color:#ffffff}

/* ── Puce de filtre active : bleu, pas or ──
   Les onglets etaient deja neutres, mais la puce active restait doree — seul
   etat de selection a ne pas suivre la direction bleue. Le systeme se lit
   desormais en deux temps : le bleu marque ce qui est SELECTIONNE, l'or reste
   reserve aux VALEURS monetaires. Deux accents pour deux roles, plutot qu'un
   accent employe pour les deux. */
.hf.on{
  background:#0036a4;
  border-color:#0036a4;
  color:#ffffff;
}
:root:not([data-theme="light"]) .hf.on,
[data-theme="dark"] .hf.on{
  background:#0046bf;
  border-color:#0046bf;
}

/* ── Bouton d'action principal : bleu ──
   `.btn-g` porte les actions qui engagent — Investir en BOG, Exécuter le swap,
   Confirmer l'envoi, Révéler la clé privée. Il etait dore, comme les montants :
   la couleur qui signale « voici une valeur » servait aussi a dire « appuyez
   ici ». Deux roles pour un seul accent, donc aucun des deux n'etait lisible.

   Le partage retenu vaut pour toute l'application : le BLEU porte l'action et
   la selection, l'OR reste aux valeurs monetaires. La teinte ne change pas
   avec le theme — un bouton qui change de couleur selon le theme se lit comme
   un autre bouton.

   Texte blanc sur #0036a4 : 6,6:1, bien au-dela du seuil exige. */
.btn-g{
  background:var(--action) !important;
  color:var(--action-txt) !important;
}
.btn-g:hover{
  background:var(--action-survol) !important;
  box-shadow:0 8px 24px -10px rgba(0,40,120,.55);
}

/* ── Jeton d'action ──
   La couleur de l'action principale vivait ecrite en dur : `var(--gold)` dans
   cinq attributs style du balisage, plus la regle `.btn-g`. Six endroits a
   changer pour une seule decision — c'est exactement ce que l'audit reprochait
   au balisage, et la raison pour laquelle l'application comptait 68 couleurs
   distinctes pour 47 jetons definis.

   Une seule declaration desormais, et le theme la decline. */
:root{
  --action:#0036a4;
  --action-survol:#002878;
  --action-txt:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --action:#0046bf;
    --action-survol:#6d64ff;
  }
}
[data-theme="dark"]{
  --action:#0046bf;
  --action-survol:#6d64ff;
}

/* Le selecteur de periode est un etat de SELECTION, comme les puces de filtre :
   il suit donc le jeton d'action, et non l'or reserve aux valeurs. */
.fp.on{
  background:var(--action);
  border-color:var(--action);
  color:var(--action-txt);
}

/* ── Logo de l'ecran d'accueil ──
   La pastille portait un degrade dore et un emoji de banque en 42 px. Elle
   accueille maintenant le vrai logo, qui a deja sa propre tuile blanche : un
   fond dore par-dessous ferait une tuile dans une tuile. On garde la
   pulsation, qui signale le chargement, et on retire la matiere. */
.spl-logo{
  background:none;
  box-shadow:0 10px 30px -12px rgba(18,20,40,.45);
  overflow:hidden;
}
.spl-logo img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  border-radius:inherit;
}