/* ═══════════════════════════════════════════════════════════════════
   BLOCKX DESIGN SYSTEM — « Obsidian Violet »
   Chargé APRÈS le CSS legacy : ce fichier gagne.
   Règle : le noir est le produit, le violet est la marque,
   la couleur est la donnée. Zéro glow, zéro néon, zéro emoji.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* Fonds */
  --bx-bg:#08080c;
  --bx-surface:#0e0e14;
  --bx-raised:#14141c;
  --bx-inset:#0a0a10;
  /* Lignes */
  --bx-line:rgba(255,255,255,.07);
  --bx-line-strong:rgba(255,255,255,.12);
  /* Texte */
  --bx-text:#f2f2f7;
  --bx-text-2:#9b9ba8;
  --bx-text-3:#5f5f6e;
  /* Marque — seule couleur d'interface */
  --bx-violet:#9945FF;
  --bx-violet-hover:#a962ff;
  --bx-violet-soft:rgba(153,69,255,.12);
  --bx-violet-line:rgba(153,69,255,.35);
  /* Données — réservées aux valeurs */
  --bx-up:#2ee27a;
  --bx-up-soft:rgba(46,226,122,.1);
  --bx-down:#ff5c5c;
  --bx-down-soft:rgba(255,92,92,.1);
  --bx-warn:#f5a623;
  --bx-warn-soft:rgba(245,166,35,.1);
  /* Prestige — gamification uniquement, mat */
  --bx-gold:#e8c15a;
  --bx-silver:#aab4c4;
  --bx-bronze:#c08a5a;
  /* Typo */
  --bx-font:'Inter',-apple-system,'Segoe UI',sans-serif;
  /* Police de titrage de la LANDING uniquement (l'app reste en Inter).
     Les titres de section de la page de vente sont tous en Space Grotesk
     800 : une section qui s'en ecarte se lit comme un autre site. */
  --bx-font-display:'Space Grotesk','Bricolage Grotesque',var(--bx-font);
  --bx-mono:'JetBrains Mono','Space Mono',monospace;
  /* Espacement (grille 4px) */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:2.5rem;--sp-8:3rem;
  /* Radius */
  --r-s:8px;--r-m:12px;--r-l:16px;--r-pill:999px;
  /* Ombre unique (menus, modales) */
  --bx-shadow:0 12px 32px rgba(0,0,0,.5);
}

/* ── Remap des tokens legacy --sx-* (app connectée v2) sur la palette
   Obsidian Violet : tout ce qui consomme ces variables bascule d'un coup.
   Le mode clair (body.bx-light) garde ses valeurs d'origine. ── */
body{
  --sx-bg:#08080c; --sx-bg2:#0a0a10; --sx-card:#0e0e14; --sx-card2:#14141c;
  --sx-border:rgba(255,255,255,.07); --sx-border2:rgba(255,255,255,.12);
  --sx-text:#f2f2f7; --sx-text2:#c4c4cf; --sx-muted:#9b9ba8; --sx-faint:#5f5f6e;
  --sx-acc:#9945FF; --sx-acc2:#c9a2ff; --sx-acc-soft:rgba(153,69,255,.12);
  --sx-good:#2ee27a; --sx-warn:#f5a623; --sx-bad:#ff5c5c;
  --sx-shadow:none;
  --sx-shadow-lg:0 12px 32px rgba(0,0,0,.5);
}
#bot-section{
  --sx-bg:#08080c; --sx-bg2:#0a0a10; --sx-card:#0e0e14; --sx-card2:#14141c;
  --sx-border:rgba(255,255,255,.07); --sx-border2:rgba(255,255,255,.12);
  --sx-acc:#9945FF; --sx-acc2:#c9a2ff; --sx-acc-soft:rgba(153,69,255,.12);
}
/* ── THÈME CLAIR (body.bx-light, Paramètres → Apparence) ───────────
   Le même produit, sur blanc. Les DEUX jeux de tokens basculent ici :
   --bx-* (écrans refaits) et --sx-* (app v2 legacy) — tout ce qui
   consomme des variables suit d'un coup. Le violet s'assombrit
   (#7c3aed) : le #9945FF ne tient pas 4.5:1 sur blanc. Le Bot garde
   sa palette sombre scopée (#bot-section redéfinit ses --sx-*). */
body.bx-light{
  /* bx — Obsidian Violet, version claire */
  --bx-bg:#f4f4f8;
  --bx-surface:#ffffff;
  --bx-raised:#f6f6fa;
  --bx-inset:#ececf2;
  --bx-line:rgba(16,16,38,.09);
  --bx-line-strong:rgba(16,16,38,.16);
  --bx-text:#15151f;
  --bx-text-2:#4c4c60;
  --bx-text-3:#84848f;
  --bx-violet:#7c3aed;
  --bx-violet-hover:#6d28d9;
  --bx-violet-soft:rgba(124,58,237,.09);
  --bx-violet-line:rgba(124,58,237,.32);
  --bx-up:#0d9b5c; --bx-up-soft:rgba(13,155,92,.1);
  --bx-down:#d92d3a; --bx-down-soft:rgba(217,45,58,.09);
  --bx-warn:#b26a05; --bx-warn-soft:rgba(178,106,5,.1);
  --bx-gold:#96700f; --bx-silver:#5e6b7d; --bx-bronze:#8a5433;
  --bx-shadow:0 12px 32px rgba(22,22,48,.12);
  /* sx — remappés sur la même palette claire */
  --sx-bg:#f4f4f8; --sx-bg2:#fafafd; --sx-card:#ffffff; --sx-card2:#f4f4f9;
  --sx-border:rgba(16,16,38,.1); --sx-border2:rgba(16,16,38,.18);
  --sx-text:#15151f; --sx-text2:#3e3e52; --sx-muted:#6e6e7e; --sx-faint:#a0a0b0;
  --sx-acc:#7c3aed; --sx-acc2:#6d28d9; --sx-acc-soft:rgba(124,58,237,.09);
  --sx-good:#0d9b5c; --sx-warn:#b26a05; --sx-bad:#d92d3a;
  --sx-shadow:0 1px 2px rgba(22,22,48,.05),0 10px 30px -14px rgba(22,22,48,.1);
  --sx-shadow-lg:0 2px 6px rgba(22,22,48,.06),0 24px 60px -24px rgba(22,22,48,.16);
}
/* `body{color:#f0f0f0}` (styles de la landing) est hérité par tout ce qui
   n'impose pas sa couleur : en clair ces textes devenaient blanc sur blanc.
   On bascule l'encre héritée — uniquement dans les vues de l'app, la
   landing restant sombre par design. */
body.bx-light[class*="view-"]{color:var(--sx-text);}

/* ═══ 1. COMPOSANTS BX — le vocabulaire du nouveau site ════════════ */

/* ── Boutons ── */
.bx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--bx-font);font-size:.82rem;font-weight:600;line-height:1;
  padding:.62rem 1.05rem;border-radius:var(--r-s);border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;text-decoration:none;user-select:none}
.bx-btn svg{width:15px;height:15px;stroke-width:1.8}
.bx-btn:active{transform:translateY(1px)}
.bx-btn-primary{background:var(--bx-violet);color:#fff}
.bx-btn-primary:hover{background:var(--bx-violet-hover)}
.bx-btn-ghost{background:transparent;color:var(--bx-text);border-color:var(--bx-line-strong)}
.bx-btn-ghost:hover{border-color:var(--bx-violet-line);color:#fff}
.bx-btn-subtle{background:rgba(255,255,255,.05);color:var(--bx-text-2)}
.bx-btn-subtle:hover{background:rgba(255,255,255,.09);color:var(--bx-text)}
.bx-btn-danger{background:var(--bx-down-soft);color:var(--bx-down);border-color:rgba(255,92,92,.25)}
.bx-btn-danger:hover{background:rgba(255,92,92,.18)}
.bx-btn-sm{font-size:.74rem;padding:.4rem .7rem}
.bx-btn-lg{font-size:.92rem;padding:.8rem 1.5rem;border-radius:var(--r-m)}
.bx-btn:disabled{opacity:.45;cursor:not-allowed}

/* ── Cards & panels ── */
.bx-card{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-m)}
.bx-card-pad{padding:var(--sp-5)}
.bx-panel{background:var(--bx-raised);border:1px solid var(--bx-line);border-radius:var(--r-m)}
.bx-panel-hd{display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;border-bottom:1px solid var(--bx-line);
  font-size:.78rem;font-weight:600;color:var(--bx-text)}

/* ── Inputs ── */
.bx-input{background:var(--bx-inset);border:1px solid var(--bx-line);border-radius:var(--r-s);
  color:var(--bx-text);font-family:var(--bx-font);font-size:.82rem;padding:.6rem .8rem;
  outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
.bx-input:focus{border-color:var(--bx-violet-line)}
.bx-input::placeholder{color:var(--bx-text-3)}
.bx-input-mono{font-family:var(--bx-mono);font-size:.78rem}

/* ── Tabs (soulignement, pas des blocs) ── */
.bx-tabs{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--bx-line)}
.bx-tab{background:none;border:none;color:var(--bx-text-2);font-family:var(--bx-font);
  font-size:.84rem;font-weight:600;padding:.6rem 0 .75rem;cursor:pointer;position:relative;
  transition:color .15s}
.bx-tab:hover{color:var(--bx-text)}
.bx-tab.active{color:var(--bx-text)}
.bx-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--bx-violet);border-radius:2px}
.bx-tab .bx-tab-count{color:var(--bx-text-3);font-weight:500;margin-left:.3rem;font-size:.74rem}

/* ── Chips (filtres) ── */
.bx-chip{display:inline-flex;align-items:center;gap:.35rem;background:transparent;
  border:1px solid var(--bx-line);border-radius:var(--r-pill);color:var(--bx-text-2);
  font-family:var(--bx-font);font-size:.74rem;font-weight:600;padding:.34rem .75rem;
  cursor:pointer;transition:all .15s}
.bx-chip:hover{border-color:var(--bx-line-strong);color:var(--bx-text)}
.bx-chip.active{background:var(--bx-violet-soft);border-color:var(--bx-violet-line);color:#c9a2ff}

/* ── Badges (12px, mats, discrets) ── */
.bx-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;
  letter-spacing:.03em;padding:.22rem .5rem;border-radius:6px;line-height:1;
  background:rgba(255,255,255,.06);color:var(--bx-text-2);text-transform:uppercase}
.bx-badge-up{background:var(--bx-up-soft);color:var(--bx-up)}
.bx-badge-down{background:var(--bx-down-soft);color:var(--bx-down)}
.bx-badge-warn{background:var(--bx-warn-soft);color:var(--bx-warn)}
.bx-badge-violet{background:var(--bx-violet-soft);color:#c9a2ff}
.bx-badge-gold{background:rgba(232,193,90,.12);color:var(--bx-gold)}

/* ── Tables (lignes denses, avatars, hover) ── */
.bx-table{width:100%;border-collapse:collapse;font-size:.82rem}
.bx-table th{text-align:left;font-size:.7rem;font-weight:600;color:var(--bx-text-3);
  text-transform:none;letter-spacing:0;padding:.5rem .75rem;border-bottom:1px solid var(--bx-line)}
.bx-table td{padding:.65rem .75rem;border-bottom:1px solid var(--bx-line);color:var(--bx-text)}
.bx-table tbody tr{transition:background .1s;cursor:pointer}
.bx-table tbody tr:hover{background:rgba(255,255,255,.025)}
.bx-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.bx-up-txt{color:var(--bx-up)}
.bx-down-txt{color:var(--bx-down)}

/* ── Stat KPI ── */
.bx-stat{display:flex;flex-direction:column;gap:.3rem}
.bx-stat b{font-size:1.35rem;font-weight:700;color:var(--bx-text);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.bx-stat span{font-size:.72rem;color:var(--bx-text-3);font-weight:500}

/* ── Meter (jauge linéaire fine — remplace les anneaux néon) ── */
.bx-meter{height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.bx-meter>i{display:block;height:100%;background:var(--bx-violet);border-radius:2px;
  transition:width .6s cubic-bezier(.16,1,.3,1)}
.bx-meter.up>i{background:var(--bx-up)}
.bx-meter.down>i{background:var(--bx-down)}
.bx-meter.warn>i{background:var(--bx-warn)}

/* ── Score (lecture en 1 seconde : chiffre + segments) ── */
.bx-score{display:inline-flex;align-items:center;gap:.5rem}
.bx-score b{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bx-score-segs{display:flex;gap:2px}
.bx-score-segs i{width:8px;height:4px;border-radius:1px;background:rgba(255,255,255,.1)}
.bx-score.s-low b{color:var(--bx-text-2)}
.bx-score.s-mid b{color:var(--bx-warn)}
.bx-score.s-high b{color:var(--bx-up)}
.bx-score.s-low .bx-score-segs i.on{background:var(--bx-text-2)}
.bx-score.s-mid .bx-score-segs i.on{background:var(--bx-warn)}
.bx-score.s-high .bx-score-segs i.on{background:var(--bx-up)}

/* ── États vides / chargement / erreur ── */
.bx-empty{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:3.5rem 1.5rem;text-align:center}
.bx-empty svg{width:26px;height:26px;stroke:var(--bx-text-3);stroke-width:1.6}
.bx-empty b{font-size:.88rem;font-weight:600;color:var(--bx-text-2)}
.bx-empty span{font-size:.76rem;color:var(--bx-text-3);max-width:340px;line-height:1.5}
.bx-skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:bx-shimmer 1.4s infinite;border-radius:var(--r-s)}
@keyframes bx-shimmer{to{background-position:-200% 0}}

/* ── Avatar ── */
.bx-avatar{width:28px;height:28px;border-radius:50%;background:var(--bx-raised);
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;
  font-weight:700;color:var(--bx-text-2);overflow:hidden;flex-shrink:0}
.bx-avatar img{width:100%;height:100%;object-fit:cover}
.bx-avatar-lg{width:64px;height:64px;font-size:1.3rem}

/* ── Menu dropdown ── */
.bx-menu{background:var(--bx-raised);border:1px solid var(--bx-line-strong);
  border-radius:var(--r-m);box-shadow:var(--bx-shadow);padding:.35rem;min-width:190px}
.bx-menu-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  border-radius:var(--r-s);font-size:.8rem;font-weight:500;color:var(--bx-text-2);
  cursor:pointer;transition:background .1s,color .1s}
.bx-menu-item:hover{background:rgba(255,255,255,.05);color:var(--bx-text)}
.bx-menu-item svg{width:15px;height:15px;stroke-width:1.8}
.bx-menu-sep{height:1px;background:var(--bx-line);margin:.35rem .3rem}

/* ── Kbd ── */
.bx-kbd{font-family:var(--bx-mono);font-size:.64rem;background:rgba(255,255,255,.06);
  border:1px solid var(--bx-line);border-radius:5px;padding:.15rem .38rem;color:var(--bx-text-3)}

/* ═══ 2. RE-SKIN DU LEGACY — l'app change de peau ══════════════════
   Scopé aux écrans app + nav connectée + modales.
   La landing (lp-*, px-*, bxr-*, sxc-*, tsw-*…) n'est pas touchée. ═ */

/* ── Nav connectée ──
   Rien ici : toute la barre est écrite en §3 (« NAV CONNECTÉE v4 »).
   Ce bloc contenait une couche de correctifs `!important` empilés au fil
   des sessions (hauteurs forcées, avatar re-peint, libellés rattrapés
   sous 1150px…) qui se battait avec §3 — d'où les trois tailles de
   police et les trois rayons dans une même rangée. Une seule source. */
body[class*="view-"] #mainNav .logo-text{font-size:1.45rem!important;line-height:1!important}

/* ── Racines des écrans app : fond unifié ── */
#scanner .scanner-section,#rugsnip .rugsnip-section,
#dashboard-section,#formation-section,
#leaderboard-section,#profile-section,#settings-section,#pubprofile-section{
  font-family:var(--bx-font)}

/* ── Scanner ── */
.scanner-section .scanner-title-pro{font-family:var(--bx-font)!important;
  font-size:1.25rem!important;font-weight:700!important;letter-spacing:-.02em!important;
  color:var(--bx-text)!important;text-shadow:none!important;background:none!important;
  -webkit-text-fill-color:var(--bx-text)!important}
.scanner-section .scanner-meta-line{font-family:var(--bx-font)!important;
  font-size:.74rem!important;color:var(--bx-text-3)!important}
.s-tabs-pill{background:none!important;border:none!important;border-bottom:1px solid var(--bx-line)!important;
  border-radius:0!important;padding:0!important;gap:1.4rem!important;box-shadow:none!important}
.s-tab{background:none!important;border:none!important;border-radius:0!important;
  font-family:var(--bx-font)!important;font-size:.84rem!important;font-weight:600!important;
  color:var(--bx-text-2)!important;padding:.55rem 0 .7rem!important;position:relative!important;
  box-shadow:none!important;text-shadow:none!important}
.s-tab:hover{color:var(--bx-text)!important}
.s-tab.active{color:var(--bx-text)!important;background:none!important}
.s-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--bx-violet);border-radius:2px}
.s-tab .s-tab-dot{width:6px!important;height:6px!important;background:var(--bx-up)!important;
  box-shadow:none!important;border-radius:50%!important}
.hist-count{background:rgba(255,255,255,.07)!important;color:var(--bx-text-3)!important;
  border:none!important;font-size:.66rem!important;font-family:var(--bx-font)!important;
  border-radius:var(--r-pill)!important;padding:.12rem .45rem!important}
.scanner-filters{border:none!important;background:none!important;padding:.4rem 0!important}
.sf-label{font-family:var(--bx-font)!important;font-size:.7rem!important;
  color:var(--bx-text-3)!important;font-weight:600!important;letter-spacing:0!important;
  text-transform:none!important}
.sf-chip{background:transparent!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-pill)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.72rem!important;font-weight:600!important;
  padding:.32rem .7rem!important;box-shadow:none!important;text-shadow:none!important}
.sf-chip:hover{border-color:var(--bx-line-strong)!important;color:var(--bx-text)!important}
.sf-chip.active{background:var(--bx-violet-soft)!important;border-color:var(--bx-violet-line)!important;
  color:#c9a2ff!important}
.scn-refresh,.hist-act,.rg-tool-btn,.btn-reset{
  background:rgba(255,255,255,.05)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.74rem!important;font-weight:600!important;
  box-shadow:none!important;text-shadow:none!important;transition:all .15s!important}
.scn-refresh:hover,.hist-act:hover,.rg-tool-btn:hover{
  background:rgba(255,255,255,.09)!important;color:var(--bx-text)!important}
.rg-tool-danger,.btn-reset{color:var(--bx-down)!important;background:var(--bx-down-soft)!important;
  border-color:rgba(255,92,92,.2)!important}

/* Bannière winrate historique */
.wrb,.wrb4{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important}
.wrb-lbl{font-family:var(--bx-font)!important;font-size:.68rem!important;
  color:var(--bx-text-3)!important;text-transform:none!important;letter-spacing:0!important}
.wrb-val{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-weight:700!important;letter-spacing:-.01em!important;text-shadow:none!important}
.wr-btn{background:none!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.7rem!important;font-weight:600!important;
  box-shadow:none!important}
.wr-btn.active{background:var(--bx-violet-soft)!important;border-color:var(--bx-violet-line)!important;
  color:#c9a2ff!important}
.wrb-input{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text)!important;font-family:var(--bx-font)!important}
.wrb-ok{background:var(--bx-violet)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-s)!important;font-weight:600!important}
.rug-sort-opt{font-family:var(--bx-font)!important;font-size:.76rem!important;
  color:var(--bx-text-2)!important;padding:.5rem .8rem!important}
.rug-sort-opt:hover{background:rgba(255,255,255,.05)!important;color:var(--bx-text)!important}

/* États vides scanner/historique */
.hist-empty,.empty-state,.rs-empty,.rgb-empty{
  font-family:var(--bx-font)!important;color:var(--bx-text-3)!important;
  font-size:.8rem!important;text-shadow:none!important}
.hist-empty-icon,.empty-icon{display:none!important}
.empty-title{color:var(--bx-text-2)!important;font-weight:600!important;font-size:.85rem!important}

/* ── Rug Sniping ── */
.rg-eyebrow{font-family:var(--bx-font)!important;font-size:.68rem!important;
  font-weight:600!important;letter-spacing:.06em!important;color:var(--bx-text-3)!important;
  text-transform:uppercase!important;background:none!important;border:none!important}
.rg-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.02em!important;color:var(--bx-text)!important;background:none!important;
  -webkit-text-fill-color:var(--bx-text)!important;text-shadow:none!important}
.rg-updated{font-family:var(--bx-font)!important;font-size:.72rem!important;color:var(--bx-text-3)!important}
.rg-seg{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;padding:3px!important;box-shadow:none!important}
.rg-seg-btn{background:none!important;border:none!important;border-radius:6px!important;
  font-family:var(--bx-font)!important;font-size:.76rem!important;font-weight:600!important;
  color:var(--bx-text-2)!important;box-shadow:none!important}
.rg-seg-btn.active{background:var(--bx-violet-soft)!important;color:#c9a2ff!important}
.rg-stat{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important}
.rg-stat-val{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-weight:700!important;color:var(--bx-text)!important;text-shadow:none!important;
  background:none!important;-webkit-text-fill-color:var(--bx-text)!important}
.rg-stat-lbl{font-family:var(--bx-font)!important;font-size:.7rem!important;
  color:var(--bx-text-3)!important;text-transform:none!important;letter-spacing:0!important}
.rg-search{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important}
.rg-search input{font-family:var(--bx-font)!important;color:var(--bx-text)!important}
.rg-count{font-family:var(--bx-font)!important;font-size:.72rem!important;color:var(--bx-text-3)!important}
.rg-datefilter input{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text)!important;font-family:var(--bx-font)!important}

/* Bot admin (rgb-*) */
.rgb-wrap .rgb-card{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important}
.rgb-card-title{font-family:var(--bx-font)!important;font-weight:600!important;
  font-size:.82rem!important;color:var(--bx-text)!important;letter-spacing:0!important;
  text-transform:none!important}
.rgb-stat{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important}
.rgb-stat-val{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-weight:700!important;text-shadow:none!important}
.rgb-stat-lbl{font-family:var(--bx-font)!important;font-size:.7rem!important;color:var(--bx-text-3)!important}
.rgb-field label{font-family:var(--bx-font)!important;font-size:.72rem!important;
  font-weight:600!important;color:var(--bx-text-2)!important}
.rgb-field input,.rgb-field select{background:var(--bx-inset)!important;
  border:1px solid var(--bx-line)!important;border-radius:var(--r-s)!important;
  color:var(--bx-text)!important;font-family:var(--bx-font)!important}
.rgb-hint{font-family:var(--bx-font)!important;font-size:.68rem!important;color:var(--bx-text-3)!important}
.rg-btn-ink{background:var(--bx-violet)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-s)!important;font-family:var(--bx-font)!important;font-weight:600!important;
  box-shadow:none!important}
.rg-btn-ink:hover{background:var(--bx-violet-hover)!important}
.rg-lock-icon,.rgb-lock .rg-lock-icon{display:none!important}
.rg-lock-title{font-family:var(--bx-font)!important;font-weight:700!important;color:var(--bx-text)!important}
.rg-lock-sub{font-family:var(--bx-font)!important;color:var(--bx-text-3)!important}


/* ── Debug CA ── */
.dca-inp{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text)!important;font-family:var(--bx-mono)!important}
.dca-btn{background:var(--bx-violet)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-s)!important;font-family:var(--bx-font)!important;font-weight:600!important}

/* ── Classement ── */
.lb-wrap{font-family:var(--bx-font)!important}
.lb-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.02em!important;color:var(--bx-text)!important;background:none!important;
  -webkit-text-fill-color:var(--bx-text)!important;text-shadow:none!important}
.lb-sub{font-family:var(--bx-font)!important;font-size:.76rem!important;color:var(--bx-text-3)!important}
.lb-back-btn{background:rgba(255,255,255,.05)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.76rem!important;font-weight:600!important;
  box-shadow:none!important}
.lb-modal-card{background:var(--bx-raised)!important;border:1px solid var(--bx-line-strong)!important;
  border-radius:var(--r-l)!important;box-shadow:var(--bx-shadow)!important;
  font-family:var(--bx-font)!important}

/* ── Academy ── */
#formation-section{font-family:var(--bx-font)!important}
.form-sidebar{background:var(--bx-surface)!important;border-right:1px solid var(--bx-line)!important}
.form-sidebar-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.01em!important;color:var(--bx-text)!important;text-shadow:none!important}
.form-sidebar-back{font-family:var(--bx-font)!important;color:var(--bx-text-3)!important;font-size:.76rem!important}
.form-global-bar{background:rgba(255,255,255,.07)!important;border-radius:2px!important;height:4px!important}
.form-global-fill{background:var(--bx-violet)!important;border-radius:2px!important;box-shadow:none!important}
.form-global-pct{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-2)!important}
.form-level-badge{background:var(--bx-violet-soft)!important;color:#c9a2ff!important;
  border:none!important;border-radius:6px!important;font-family:var(--bx-font)!important;
  font-size:.66rem!important;font-weight:700!important;text-shadow:none!important;box-shadow:none!important}
.form-xp-total{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important}
.form-welcome-title{font-family:var(--bx-font)!important;font-weight:800!important;
  letter-spacing:-.02em!important;color:var(--bx-text)!important;background:none!important;
  -webkit-text-fill-color:var(--bx-text)!important}
.form-welcome-sub{font-family:var(--bx-font)!important;color:var(--bx-text-2)!important}
.form-stat{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important}
.form-stat-num{font-family:var(--bx-font)!important;font-weight:700!important;
  font-variant-numeric:tabular-nums!important;color:var(--bx-text)!important;
  background:none!important;-webkit-text-fill-color:var(--bx-text)!important}
.form-stat-lbl{font-family:var(--bx-font)!important;color:var(--bx-text-3)!important}
.form-start-btn{background:var(--bx-violet)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-m)!important;font-family:var(--bx-font)!important;font-weight:600!important;
  box-shadow:none!important;text-shadow:none!important}
.form-start-btn:hover{background:var(--bx-violet-hover)!important;transform:none!important}

/* ── Modales globales ── */
.modal-box{background:var(--bx-raised)!important;border:1px solid var(--bx-line-strong)!important;
  border-radius:var(--r-l)!important;box-shadow:var(--bx-shadow)!important;
  font-family:var(--bx-font)!important}
.modal-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.01em!important;color:var(--bx-text)!important;text-shadow:none!important}
.modal-sub{font-family:var(--bx-font)!important;color:var(--bx-text-2)!important}
.code-input{background:var(--bx-inset)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text)!important;font-family:var(--bx-mono)!important}
.code-input:focus{border-color:var(--bx-violet-line)!important;box-shadow:none!important}
.code-submit{background:var(--bx-violet)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-s)!important;font-family:var(--bx-font)!important;font-weight:600!important;
  box-shadow:none!important}
.code-submit:hover{background:var(--bx-violet-hover)!important}
.modal-close{color:var(--bx-text-3)!important;background:none!important;border:none!important}
.modal-close:hover{color:var(--bx-text)!important}

/* ── Toasts ── */
.toast,.bx-toast{font-family:var(--bx-font)!important;background:var(--bx-raised)!important;
  border:1px solid var(--bx-line-strong)!important;border-radius:var(--r-m)!important;
  box-shadow:var(--bx-shadow)!important;color:var(--bx-text)!important;text-shadow:none!important}

/* ═══ 3. NAV CONNECTÉE v4 — une rangée, un seul rythme ════════════
   Trois règles qui tiennent toute la barre :
   1. UNE hauteur de contrôle (34px), UN rayon (--r-s), UNE taille de
      texte (13px). Avant : 12.16 / 12.48 / 12.8px et 8px / 10px / 50%.
   2. AUCUNE icône sur les libellés de premier niveau. Quatre liens en
      portaient une, « Outils » et « Communauté » non : c'est ce
      demi-rythme qui faisait « décalé ». Les icônes restent dans les
      menus déroulants, là où elles aident à choisir.
   3. La barre s'aligne sur la gouttière du contenu (32px), pas sur
      40px : le logo tombait 8px à droite de la page.               ═ */

/* Gouttière commune nav / contenu. Les écrans app vivent dans une colonne
   de 1280px centrée avec 32px de marge minimale (.bx-hub & co). La barre
   prend EXACTEMENT la même : le wordmark tombe pile sur le bord gauche du
   contenu qu'il surplombe, à toutes les largeurs. Avant : 40px fixes,
   soit 8px de décalage permanent avec la page.
   La HAUTEUR ne bouge pas (68px) : plusieurs écrans calent leur
   `padding-top` dessus (#profile-section, #leaderboard-section…). */
body.bx-auth #mainNav{padding:0 max(32px,calc((100% - 1280px) / 2))}
body.bx-auth #mainNav .nav-logo{display:inline-flex;align-items:center;height:34px}

#navAuth{flex:1;align-items:center;justify-content:flex-start;gap:0;min-width:0}

/* Filet logo | navigation : sépare la marque des destinations. */
.bxnav-sep{width:1px;height:20px;flex-shrink:0;background:var(--bx-line-strong);
  margin:0 .9rem 0 1.15rem}

.bxnav-links{display:flex;align-items:center;gap:2px;margin:0 auto 0 0;min-width:0}
.bxnav-link{display:inline-flex;align-items:center;gap:.32rem;height:34px;padding:0 .7rem;
  border:0;border-radius:var(--r-s);background:none;cursor:pointer;
  font-family:var(--bx-font);font-size:13px;font-weight:500;letter-spacing:-.005em;
  color:var(--bx-text-2);white-space:nowrap;
  transition:color .15s ease,background-color .15s ease}
.bxnav-link:hover{color:var(--bx-text);background:rgba(255,255,255,.05)}
.bxnav-link.active{color:#c9a2ff;background:var(--bx-violet-soft);font-weight:600}
body.bx-light .bxnav-link:hover{background:rgba(18,22,43,.05)}
body.bx-light .bxnav-link.active{color:var(--bx-violet)}

.bxnav-group{position:relative;display:inline-flex}
.bxnav-group.open>.bxnav-link{color:var(--bx-text);background:rgba(255,255,255,.05)}
body.bx-light .bxnav-group.open>.bxnav-link{background:rgba(18,22,43,.05)}
.bxnav-chev{flex-shrink:0;opacity:.5;transition:transform .18s ease}
.bxnav-group.open .bxnav-chev{transform:rotate(180deg)}
.bxnav-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:600;display:none;
  min-width:250px;padding:.4rem}
.bxnav-group.open .bxnav-menu{display:block;animation:bxs-pop .14s cubic-bezier(.16,1,.3,1)}
.bxnav-menu .bx-menu-item{width:100%;background:none;border:none;text-align:left;
  font-family:var(--bx-font)}
.bxnav-menu .bx-menu-item svg{width:16px;height:16px;stroke-width:1.7;flex-shrink:0;
  color:var(--bx-text-3)}
.bxnav-menu .bx-menu-item:hover svg{color:#c9a2ff}
.bxnav-menu .bx-menu-item span:last-child{display:flex;flex-direction:column;gap:.1rem}
.bxnav-menu .bx-menu-item span:last-child i{font-style:normal;font-size:.68rem;
  color:var(--bx-text-3);font-weight:400}
.bxnav-menu .bx-menu-item.active{background:var(--bx-violet-soft);color:#c9a2ff}
.bxnav-menu .bx-menu-item.active svg{color:#c9a2ff}
.bxnav-menu .bx-menu-item.is-soon{opacity:.45;cursor:default}
.bxnav-menu .bx-menu-item.is-soon:hover{background:none;color:var(--bx-text-2)}

/* ── Bloc de droite : recherche + réglages + compte ── */
.bxnav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.bxnav-search{display:inline-flex;align-items:center;gap:.5rem;height:34px;width:210px;
  padding:0 .5rem 0 .68rem;background:var(--bx-inset);
  border:1px solid var(--bx-line);border-radius:var(--r-s);color:var(--bx-text-3);
  font-family:var(--bx-font);font-size:13px;font-weight:400;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.bxnav-search:hover{border-color:var(--bx-line-strong);color:var(--bx-text-2)}
.bxnav-search svg{flex-shrink:0;opacity:.85}
.bxnav-search-txt{flex:1;text-align:left}
.bxnav-search .bx-kbd{flex-shrink:0}

.bxnav-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:var(--r-s);
  border:1px solid var(--bx-line);background:var(--bx-inset);color:var(--bx-text-2);
  cursor:pointer;box-shadow:none;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.bxnav-icon:hover{color:var(--bx-text);border-color:var(--bx-line-strong);transform:none}
.bxnav-icon.active{color:#c9a2ff;background:var(--bx-violet-soft);
  border-color:var(--bx-violet-line)}
.bxnav-icon svg{width:16px;height:16px}

.bxnav-profile{position:relative;width:34px;height:34px;padding:0;overflow:hidden;
  border-radius:50%;border:1px solid var(--bx-line-strong);
  background:var(--bx-violet-soft);color:#c9a2ff;cursor:pointer;box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,background-color .15s ease}
.bxnav-profile:hover{border-color:var(--bx-violet-line);
  background:rgba(153,69,255,.2);transform:none}
.bxnav-profile img{width:100%;height:100%;object-fit:cover;display:block}
.bxnav-profile .app-nav-profile-avatar{color:inherit;font-family:var(--bx-font);
  font-weight:700;font-size:13px;line-height:1;background:none;text-shadow:none}

/* Le violet clair (#c9a2ff) est lisible sur le noir, pas sur la barre
   blanche : en clair tout ce qui est « actif » passe au violet sombre. */
body.bx-light .bxnav-profile,
body.bx-light .bxnav-icon.active,
body.bx-light .bxnav-menu .bx-menu-item.active,
body.bx-light .bxnav-menu .bx-menu-item.active svg,
body.bx-light .bxnav-menu .bx-menu-item:hover svg{color:var(--bx-violet)}

/* Étroit : on resserre la gouttière et la recherche, JAMAIS les libellés —
   les masquer laissait « Outils » et « Communauté » en boutons vides. */
@media(max-width:1240px){.bxnav-search{width:150px}}
@media(max-width:1120px){
  .bxnav-sep{margin:0 .65rem 0 .8rem}
  .bxnav-link{padding:0 .5rem}
  .bxnav-search{width:34px;padding:0;justify-content:center}
  .bxnav-search-txt,.bxnav-search .bx-kbd{display:none}
}

/* ── Overlay recherche globale ── */
.bxs-overlay{position:fixed;inset:0;z-index:1400;display:none;
  background:rgba(4,4,8,.72);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:12vh 1rem 0}
.bxs-overlay.open{display:flex}
.bxs-box{width:100%;max-width:560px;background:var(--bx-raised);
  border:1px solid var(--bx-line-strong);border-radius:var(--r-l);
  box-shadow:var(--bx-shadow);overflow:hidden;
  animation:bxs-pop .16s cubic-bezier(.16,1,.3,1)}
@keyframes bxs-pop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.bxs-input-row{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--bx-line);color:var(--bx-text-3)}
.bxs-input-row input{flex:1;background:none;border:none;outline:none;
  color:var(--bx-text);font-family:var(--bx-font);font-size:.92rem}
.bxs-input-row input::placeholder{color:var(--bx-text-3)}
.bxs-results{max-height:52vh;overflow-y:auto;padding:.45rem}
.bxs-sec{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bx-text-3);padding:.6rem .6rem .3rem}
.bxs-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;
  border-radius:var(--r-s);cursor:pointer}
.bxs-item:hover,.bxs-item.sel{background:rgba(255,255,255,.05)}
.bxs-ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;color:var(--bx-text-3);flex-shrink:0}
.bxs-ico svg{width:15px;height:15px}
.bxs-ico.v{background:var(--bx-violet-soft);color:#c9a2ff}
.bxs-ava{width:30px;height:30px;border-radius:50%;background:var(--bx-surface);
  display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;
  color:var(--bx-text-2);overflow:hidden;flex-shrink:0}
.bxs-ava img{width:100%;height:100%;object-fit:cover}
.bxs-txt{display:flex;flex-direction:column;gap:.08rem;min-width:0;flex:1}
.bxs-txt b{font-size:.82rem;font-weight:600;color:var(--bx-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxs-txt i{font-style:normal;font-size:.7rem;color:var(--bx-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxs-hint{font-size:.64rem;color:var(--bx-text-3);border:1px solid var(--bx-line);
  border-radius:5px;padding:.14rem .4rem}
.bxs-none{padding:2.2rem 1.2rem;text-align:center;display:flex;flex-direction:column;gap:.35rem}
.bxs-none b{font-size:.86rem;font-weight:600;color:var(--bx-text-2)}
.bxs-none span{font-size:.75rem;color:var(--bx-text-3)}

/* Filtres de portée — la main ne quitte pas le clavier (Tab les fait défiler) */
.bxs-scopes{display:flex;gap:.3rem;padding:.55rem .7rem;border-bottom:1px solid var(--bx-line);
  overflow-x:auto;scrollbar-width:none}
.bxs-scopes::-webkit-scrollbar{display:none}
.bxs-scope{flex:0 0 auto;background:none;border:1px solid transparent;border-radius:999px;
  padding:.26rem .68rem;font-family:var(--bx-font);font-size:.72rem;font-weight:500;
  color:var(--bx-text-3);cursor:pointer;transition:color .14s,background .14s,border-color .14s}
.bxs-scope:hover{color:var(--bx-text-2);background:rgba(255,255,255,.04)}
.bxs-scope.on{color:var(--bx-text);background:var(--bx-violet-soft);border-color:var(--bx-violet)}
.bxs-scope:focus-visible{outline:2px solid var(--bx-violet);outline-offset:1px}

/* Le libellé de section porte son compte : « 7 correspondances » dit
   qu'il y a un choix à faire, sans avoir à compter les lignes. */
.bxs-sec{display:flex;align-items:baseline;gap:.5rem}
.bxs-sec em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;
  font-size:.66rem;color:var(--bx-text-3);opacity:.75}
.bxs-txt .bxs-dim{font-weight:400;color:var(--bx-text-3)}
/* L'adresse départage les relances homonymes — mono, jamais en avant */
.bxs-txt i code{font-family:var(--bx-mono);font-size:.66rem;opacity:.75}
/* Étiquette de provenance : d'où vient ce token, sans lire la ligne meta */
.bxs-tag{flex-shrink:0;font-size:.62rem;font-weight:600;letter-spacing:.03em;
  border-radius:5px;padding:.16rem .38rem;border:1px solid var(--bx-line);
  color:var(--bx-text-3);font-variant-numeric:tabular-nums}
.bxs-tag.scan{color:#c9a2ff;border-color:rgba(153,69,255,.35);background:var(--bx-violet-soft)}
.bxs-tag.rug{color:var(--bx-warn);border-color:rgba(245,158,11,.3)}
.bxs-tag.rk{color:var(--bx-text-2)}
.bxs-load{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;
  font-size:.76rem;color:var(--bx-text-3)}
.bxs-load i{width:11px;height:11px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--bx-line-strong);border-top-color:var(--bx-violet);
  animation:bxs-spin .7s linear infinite}
@keyframes bxs-spin{to{transform:rotate(360deg)}}
.bxs-miss{padding:.5rem .6rem .7rem;font-size:.76rem;line-height:1.45;color:var(--bx-text-3)}
.bxs-miss b{font-family:var(--bx-mono);font-size:.74rem;color:var(--bx-text-2)}
.bxs-foot{display:flex;align-items:center;gap:.9rem;padding:.5rem .8rem;
  border-top:1px solid var(--bx-line);font-size:.66rem;color:var(--bx-text-3)}
.bxs-foot b{display:inline-flex;align-items:center;justify-content:center;min-width:15px;
  height:15px;padding:0 .18rem;margin-right:.18rem;border:1px solid var(--bx-line);
  border-radius:4px;font-size:.62rem;font-weight:500;color:var(--bx-text-2)}
.bxs-foot-src{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){
  .bxs-overlay{padding:6vh .6rem 0}
  .bxs-foot span:not(.bxs-foot-src){display:none}
  .bxs-foot-src{margin-left:0}
}

/* Cible d'une recherche globale : la carte qu'on vient d'ouvrir se signale
   deux secondes, sinon on atterrit dans une liste sans savoir où regarder. */
.bxs-target{position:relative;z-index:2;
  animation:bxs-target 2.6s cubic-bezier(.16,1,.3,1)}
@keyframes bxs-target{
  0%,55%{box-shadow:0 0 0 2px var(--bx-violet)}
  100%{box-shadow:0 0 0 2px transparent}
}
@media(prefers-reduced-motion:reduce){
  .bxs-target{animation:none;box-shadow:0 0 0 2px var(--bx-violet)}
  .bxs-load i{animation:none}
}

/* ═══ 4. CARD TOKEN — l'atome du produit ══════════════════════════ */
.tc-card{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important;overflow:hidden!important;
  font-family:var(--bx-font)!important;transition:border-color .15s,transform .15s!important}
.tc-card:hover{border-color:var(--bx-line-strong)!important;transform:none!important;
  box-shadow:none!important}
.tc-card.pvp-winner,.tc-card.pvp-loser,.tc-card.dip-entry{box-shadow:none!important}
.tc-img-wrap{border-radius:0!important}
.tc-img-overlay{background:linear-gradient(180deg,transparent 30%,rgba(8,8,12,.92))!important}
.tc-img-fallback{background:var(--bx-raised)!important;color:var(--bx-text-3)!important;
  font-family:var(--bx-font)!important;font-weight:700!important;text-shadow:none!important}
.tc-sym{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.01em!important;text-shadow:0 1px 8px rgba(0,0,0,.8)!important}
.tc-ticker{font-family:var(--bx-mono)!important;font-size:.66rem!important;
  color:var(--bx-text-2)!important;background:none!important;text-shadow:0 1px 6px rgba(0,0,0,.8)!important}
.tc-recent-badge{background:rgba(8,8,12,.75)!important;border:1px solid var(--bx-line-strong)!important;
  color:var(--bx-up)!important;font-family:var(--bx-font)!important;font-size:.6rem!important;
  font-weight:700!important;letter-spacing:.05em!important;border-radius:6px!important;
  box-shadow:none!important;text-shadow:none!important;backdrop-filter:blur(4px)}
.tc-mult-badge{background:rgba(8,8,12,.8)!important;border:1px solid var(--bx-line-strong)!important;
  color:var(--bx-up)!important;font-family:var(--bx-font)!important;
  font-variant-numeric:tabular-nums!important;font-weight:700!important;
  border-radius:8px!important;box-shadow:none!important;text-shadow:none!important;
  backdrop-filter:blur(4px)}
.tc-body{font-family:var(--bx-font)!important}
.tc-addr-row{gap:.4rem!important}
.tc-addr-lbl,.tc-signal-lbl,.tc-perf-lbl,.tc-mc-lbl,.tc-sco-lbl{
  font-family:var(--bx-font)!important;font-size:.66rem!important;
  color:var(--bx-text-3)!important;text-transform:none!important;letter-spacing:0!important}
.tc-addr{font-family:var(--bx-mono)!important;font-size:.66rem!important;color:var(--bx-text-2)!important}
.tc-signal-time,.tc-perf-val,.tc-mc-val,.tc-sco-val,.tc-mult-current{
  font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-weight:600!important;text-shadow:none!important}
.tc-copy-btn{background:none!important;border:none!important;color:var(--bx-text-3)!important;
  cursor:pointer!important;padding:.15rem!important;display:inline-flex!important;align-items:center!important}
.tc-copy-btn:hover{color:var(--bx-text)!important}
.tc-score-call-row{background:rgba(255,255,255,.03)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;box-shadow:none!important}
.tc-score-call-row:hover{background:rgba(255,255,255,.05)!important;border-color:var(--bx-line-strong)!important}
.tc-sco-hint{color:var(--bx-text-3)!important;font-size:.62rem!important}
.tc-progress-bg{height:4px!important;background:rgba(255,255,255,.07)!important;
  border-radius:2px!important;border:none!important;box-shadow:none!important}
.tc-progress-fill{background:var(--bx-violet)!important;border-radius:2px!important;
  box-shadow:none!important}
.tc-progress-marks span{font-family:var(--bx-font)!important;font-size:.58rem!important;
  color:var(--bx-text-3)!important}
.tc-mc-cell{background:rgba(255,255,255,.03)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;box-shadow:none!important}
.tc-ev-badge{background:rgba(255,255,255,.04)!important;border:1px solid var(--bx-line)!important;
  border-radius:6px!important;box-shadow:none!important}
.tc-footer{border-top:1px solid var(--bx-line)!important;background:none!important}
.tc-social-btn{background:rgba(255,255,255,.04)!important;border:1px solid var(--bx-line)!important;
  border-radius:6px!important;color:var(--bx-text-2)!important;box-shadow:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important}
.tc-social-btn:hover{color:var(--bx-text)!important;border-color:var(--bx-line-strong)!important}
.tc-pnl-btn{background:rgba(255,255,255,.05)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.7rem!important;font-weight:600!important;
  box-shadow:none!important;text-shadow:none!important}
.tc-pnl-btn:hover{background:rgba(255,255,255,.09)!important;color:var(--bx-text)!important;
  transform:none!important}

/* Chips & badges des cards scanner (sc-*) */
.sc-axiom,.sc-sec-chip,.sc-score-chip{font-family:var(--bx-font)!important;
  font-size:.62rem!important;font-weight:600!important;border-radius:6px!important;
  box-shadow:none!important;text-shadow:none!important;letter-spacing:0!important}
.sc-metrics span{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-size:.68rem!important;font-weight:600!important;text-shadow:none!important}
.sc-wallets{font-family:var(--bx-mono)!important;font-size:.6rem!important;
  color:var(--bx-text-3)!important}
.sc-entry-badge{font-family:var(--bx-font)!important;font-size:.62rem!important;
  font-weight:700!important;letter-spacing:.04em!important;border-radius:6px!important;
  box-shadow:none!important;text-shadow:none!important;animation:none!important}
.sc-entry-badge.entry-good{background:var(--bx-up-soft)!important;color:var(--bx-up)!important;
  border:1px solid rgba(46,226,122,.25)!important}
.sc-entry-badge.entry-risky{background:var(--bx-warn-soft)!important;color:var(--bx-warn)!important;
  border:1px solid rgba(245,166,35,.25)!important}
.sc-entry-badge.entry-dip{background:var(--bx-violet-soft)!important;color:#c9a2ff!important;
  border:1px solid var(--bx-violet-line)!important}
.sc-pvp-badge{font-family:var(--bx-font)!important;font-size:.62rem!important;
  font-weight:700!important;border-radius:6px!important;box-shadow:none!important;
  animation:none!important}

/* Labels de score (badges NUCLEAR / DIAMOND / …) */
.score-god-gem,.score-high-pot,.score-solid{font-family:var(--bx-font)!important;
  font-size:.62rem!important;font-weight:700!important;letter-spacing:.05em!important;
  border-radius:6px!important;box-shadow:none!important;text-shadow:none!important;
  animation:none!important;background:rgba(255,255,255,.06)!important;
  border:1px solid var(--bx-line-strong)!important;color:var(--bx-text-2)!important}
.score-god-gem{background:rgba(232,193,90,.1)!important;
  border-color:rgba(232,193,90,.3)!important;color:var(--bx-gold)!important}
.score-high-pot{background:var(--bx-up-soft)!important;
  border-color:rgba(46,226,122,.25)!important;color:var(--bx-up)!important}

/* ═══ 5. (libre) — l'écran Token Analyse a été supprimé du produit ═ */

/* ═══ 6. HUB v7 — « LE BOARD » ════════════════════════════════════
   Refait le 18/08/2026 contre la DA unifiée (DA.md). Le hub v6 était
   une grille de panneaux équivalents : huit teintes en concurrence,
   une seule animation recopiée sur chaque bloc, aucun objet principal.
   C'est exactement l'écran refusé par DA §10 (« section en blocs
   égaux sans objet principal », « deux accents saturés côte à côte »).

   La recette appliquée ici, c'est DA §7 :
   1. UN objet, grand — le board des calls. Il occupe la largeur, le
      reste lui est subordonné.
   2. De la profondeur — trois plaques empilées, perspective, ombre
      NOIRE. L'objet flotte au-dessus du fond, il n'y est pas collé.
   3. Des étiquettes qui débordent du cadre (meilleur multiple,
      réussite, volume de calls) : elles remplacent toute phrase.
   4. Un panneau qui NOMME la chose, posé par-dessus l'objet : un
      numéro, un nom, un bouton. Trois lignes, pas une de plus.
   5. La couleur vient de l'objet : le bleu de la donnée, l'or de la
      progression. DEUX teintes pour tout l'écran (DA §4.4).
      Les teintes d'outil restent PLEINES mais sur peu de surface
      (la marque, le filet) et ne prennent l'aplat qu'au survol —
      DA §4.4.3, l'éteint garde sa saturation, il perd la surface.

   Signature d'animation (DA §6, registre) : LA DISTRIBUTION. Le
   board se déplie, puis ses lignes sont distribuées une à une depuis
   la pile, derrière la face. Ce geste n'existe nulle part ailleurs
   sur le produit — ne pas le reprendre. Le geste manipulable, lui,
   est la réglette crantée : on l'attrape et le board se re-distribue
   sous les doigts (souris, doigt, molette, flèches).
   Zéro halo, zéro dégradé décoratif, zéro violet : la seule ombre
   est noire, les seuls aplats sont pleins. ═══ */

body.view-dashboard #dashboard-section{background:#0a0b10!important}
.bx-hub{position:relative;max-width:1280px;margin:0 auto;width:100%;
  --hub-bg:#0a0b10;--hub-face:#12151d;--hub-face2:#171b25;--hub-row:#0d1017;
  --hub-slab1:#151924;--hub-slab2:#101420;
  --hub-line:rgba(255,255,255,.08);--hub-line2:rgba(255,255,255,.17);
  --hub-txt:#f4f5f8;--hub-mut:#b9bdca;--hub-faint:#8b90a0;
  --hub-blue:#38bdf8;--hub-blue-ink:#04202e;
  --hub-gold:#f0b429;--hub-gold-ink:#2e1d00;
  --hub-up:#34d399;--hub-up-ink:#03251a;--hub-down:#ff5c5c;
  --hub-shadow:0 42px 70px -34px rgba(0,0,0,.95),0 8px 22px -12px rgba(0,0,0,.7);
  --hub-ease:cubic-bezier(.16,1,.3,1);
  --hub-back:cubic-bezier(.34,1.56,.64,1);
  --hub-head:'Bricolage Grotesque','Space Grotesk',var(--bx-font);
  --hub-mono:'Space Mono',ui-monospace,monospace;
  font-family:var(--bx-font);color:var(--hub-txt);font-size:.9375rem;line-height:1.5}
.bx-hub button{font-family:inherit;cursor:pointer;color:inherit}
.bx-hub :focus-visible{outline:2px solid var(--hub-blue);outline-offset:3px;border-radius:4px}
.bx-hub .bx-num,.bx-hub [data-count]{font-variant-numeric:tabular-nums}
/* Les données chiffrées sont en mono (DA §5) : scores, mcaps, multiples. */
.bx-hub .bx-mono{font-family:var(--hub-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── L'entrée de scène : la tête, puis le board, puis le reste ──
   Un seul mouvement de fond (montée courte), la mise en scène vient
   du dépliage et de la distribution — pas d'un fondu recopié. */
@keyframes bxhRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bxh-in{animation:bxhRise .5s var(--hub-ease) both;animation-delay:var(--d,0s)}

/* ═══ Ligne de tête ═══ */
.bxh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin:0 0 1.6rem}
.bxh-hello{min-width:0}
.bxh-hello h1{font-family:var(--hub-head);font-size:clamp(1.6rem,3.1vw,2.35rem);font-weight:800;
  letter-spacing:-.035em;color:var(--hub-txt);margin:0;line-height:1.05}
.bxh-hello h1 em{font-style:normal;color:var(--hub-blue)}
.bxh-day{display:block;margin-top:.3rem;font-size:.8125rem;font-weight:500;color:var(--hub-faint)}
.bxh-day::first-letter{text-transform:uppercase}

/* Le rang : anneau d'XP qui se remplit, blason au centre. La
   progression se VOIT monter (DA §9, gamification). */
.bxh-rank{display:flex;align-items:center;gap:.85rem;background:none;border:none;padding:.2rem;
  text-align:left}
.bxh-ring{position:relative;width:62px;height:62px;flex-shrink:0}
.bxh-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.bxh-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.bxh-ring .trk{stroke:rgba(255,255,255,.1)}
.bxh-ring .arc{stroke:var(--hub-gold);stroke-dasharray:var(--c);stroke-dashoffset:var(--c);
  transition:stroke-dashoffset 1.1s var(--hub-ease) .25s}
.bx-hub.is-lit .bxh-ring .arc{stroke-dashoffset:var(--o)}
.bxh-ring .bxrank{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  transition:transform .2s var(--hub-back)}
.bxh-rank:hover .bxh-ring .bxrank{transform:translate(-50%,-50%) scale(1.09)}
.bxh-rank-t{min-width:0}
.bxh-rank-t b{display:block;font-family:var(--hub-head);font-size:1.0625rem;font-weight:800;
  letter-spacing:-.02em;color:var(--hub-gold);line-height:1.15}
.bxh-rank-t i{display:block;font-style:normal;font-size:.8125rem;color:var(--hub-mut)}
.bxh-rank-t i b{display:inline;font-family:var(--hub-mono);font-size:.8125rem;font-weight:700;
  color:var(--hub-txt);letter-spacing:-.02em}

/* ═══ L'OBJET — le board ═══════════════════════════════════════
   Trois plaques : deux slabs derrière (l'épaisseur), la face devant.
   Elles sont solides, jamais dégradées : la profondeur vient du
   décalage et de l'ombre noire, pas d'un effet. */
.bxh-board{position:relative;margin:0 0 3.1rem;perspective:1600px}
.bxh-deck{position:relative;transform-style:preserve-3d}
.bxh-deck::before,.bxh-deck::after{content:'';position:absolute;left:0;right:0;
  border:1px solid var(--hub-line);border-radius:18px;z-index:0}
.bxh-deck::before{top:14px;bottom:-11px;left:16px;right:16px;background:var(--hub-slab1)}
.bxh-deck::after{top:26px;bottom:-21px;left:36px;right:36px;background:var(--hub-slab2)}
.bxh-face{position:relative;z-index:2;background:var(--hub-face);border:1px solid var(--hub-line2);
  border-radius:18px;box-shadow:var(--hub-shadow);overflow:hidden}
/* Le filet de teinte : la seule couleur portée par la structure. */
.bxh-face::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:var(--hub-blue)}
@keyframes bxhUnfold{
  from{opacity:0;transform:translateY(26px) rotateX(11deg) scale(.985)}
  to{opacity:1;transform:none}}
.bx-hub.is-anim .bxh-deck{animation:bxhUnfold .82s var(--hub-ease) .06s both;transform-origin:50% 0}

/* Le panneau qui nomme l'objet — posé PAR-DESSUS, pas à côté. */
.bxh-plate{display:flex;align-items:center;gap:.9rem;padding:1.15rem 1.4rem 1.05rem;
  border-bottom:1px solid var(--hub-line)}
.bxh-no{font-family:var(--hub-mono);font-size:.8125rem;font-weight:700;color:var(--hub-blue-ink);
  background:var(--hub-blue);padding:.2rem .45rem;border-radius:6px;letter-spacing:-.02em}
.bxh-plate h2{flex:1;min-width:0;font-family:var(--hub-head);font-size:1.125rem;font-weight:800;
  letter-spacing:-.025em;color:var(--hub-txt);margin:0}
.bxh-open{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:9px;
  border:1px solid var(--hub-line2);background:none;font-size:.8125rem;font-weight:700;
  color:var(--hub-txt);transition:background .16s var(--hub-ease),border-color .16s,color .16s}
.bxh-open:hover{background:var(--hub-blue);border-color:var(--hub-blue);color:var(--hub-blue-ink)}
.bxh-open:active{transform:scale(.97)}
.bxh-open svg{transition:transform .2s var(--hub-back)}
.bxh-open:hover svg{transform:translateX(3px)}

/* ── Les lignes du board : distribuées depuis la pile ──
   Chaque ligne arrive de derrière la face, avec un décalage indexé.
   C'est LA signature de cet écran (DA §6) ; le re-tirage rejoue la
   même distribution quand la réglette bouge. */
.bxh-rows{padding:.5rem .55rem;display:flex;flex-direction:column}
.bxh-rows>.bxh-none{padding:2.6rem 0;text-align:center}
@keyframes bxhDeal{
  from{opacity:0;transform:translate3d(0,-16px,-90px) rotateX(-16deg)}
  to{opacity:1;transform:none}}
.bxh-deal .bxh-row{animation:bxhDeal .5s var(--hub-back) both;
  animation-delay:calc(var(--i,0) * .055s + .34s);transform-origin:50% 0}
.bxh-redeal .bxh-row{animation:bxhDeal .42s var(--hub-back) both;
  animation-delay:calc(var(--i,0) * .04s)}
.bxh-row{display:grid;grid-template-columns:38px minmax(0,1fr) 210px auto auto;align-items:center;
  gap:.85rem;width:100%;text-align:left;background:var(--hub-row);border:1px solid transparent;
  border-radius:11px;padding:.55rem .7rem;margin-bottom:3px;
  transition:border-color .16s,background .16s,transform .16s var(--hub-ease)}
.bxh-pfp{width:38px;height:38px;border-radius:10px;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#1b2030;
  font-family:var(--hub-head);font-size:.875rem;font-weight:800;color:var(--hub-mut)}
.bxh-pfp img{width:100%;height:100%;object-fit:cover;display:block}
.bxh-id{min-width:0}
.bxh-id b{display:block;font-size:.9375rem;font-weight:700;color:var(--hub-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.bxh-id i{display:block;font-style:normal;font-family:var(--hub-mono);font-size:.75rem;
  color:var(--hub-faint);letter-spacing:-.03em}
/* La piste : elle encode le multiple (échelle log) — ce n'est pas un
   décor, c'est la donnée qui prend la largeur de la ligne. */
.bxh-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.07)}
/* La piste est posée à sa valeur par défaut : en mouvement réduit,
   le tableau statique est COMPLET (DA §6). L'animation ne fait que
   la remplir depuis zéro quand la distribution joue. */
.bxh-track>i{display:block;height:100%;width:var(--w);border-radius:2px;background:var(--hub-up);
  transform-origin:0 50%}
@keyframes bxhFill{from{transform:scaleX(0)}to{transform:none}}
.bxh-deal .bxh-track>i{animation:bxhFill .6s var(--hub-ease) both;
  animation-delay:calc(var(--i,0) * .055s + .5s)}
.bxh-redeal .bxh-track>i{animation:bxhFill .5s var(--hub-ease) both;
  animation-delay:calc(var(--i,0) * .04s + .12s)}
/* Score : neutre par défaut. Seul le NUCLEAR (≥130) est peint en or —
   aplat plein + encre (DA §4.4.1). Aucune teinte diluée. */
.bxh-sc{font-family:var(--hub-mono);font-size:.75rem;font-weight:700;letter-spacing:-.03em;
  padding:.24rem .45rem;border-radius:6px;background:rgba(255,255,255,.06);color:var(--hub-mut);
  min-width:34px;text-align:center}
.bxh-sc.hi{background:var(--hub-gold);color:var(--hub-gold-ink)}
/* Multiple : neutre en dessous de ×10, aplat vert au-dessus. Le gain
   se lit d'un coup d'œil, et il n'y a jamais de vert délavé. */
.bxh-x{min-width:74px;text-align:right;font-family:var(--hub-mono);font-size:.9375rem;
  font-weight:700;letter-spacing:-.03em;padding:.26rem .55rem;border-radius:8px;
  background:rgba(255,255,255,.06);color:var(--hub-mut)}
.bxh-x.big{background:var(--hub-up);color:var(--hub-up-ink)}

/* ── La réglette crantée : le geste de cet écran ──
   Pas de libellé qui l'explique (DA §7) : les crans et la valeur
   affichée en grand suffisent. Souris, doigt, molette, flèches. */
.bxh-dial{display:flex;align-items:center;gap:1.1rem;padding:.9rem 1.4rem 1.15rem;
  border-top:1px solid var(--hub-line)}
.bxh-rail{position:relative;flex:1;height:30px;display:flex;align-items:center;
  cursor:grab;touch-action:pan-y}
.bxh-rail.grabbing{cursor:grabbing}
.bxh-rail::before{content:'';position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.11)}
.bxh-rail .fill{position:absolute;left:0;height:3px;border-radius:2px;background:var(--hub-blue);
  transition:width .2s var(--hub-ease)}
.bxh-rail .tick{position:absolute;top:50%;width:2px;height:8px;margin:-4px 0 0 -1px;border-radius:1px;
  background:rgba(255,255,255,.17);transition:background .2s var(--hub-ease)}
.bxh-rail .tick.on{background:var(--hub-blue)}
.bxh-rail .knob{position:absolute;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;
  background:var(--hub-blue);border:3px solid var(--hub-face);
  transition:left .2s var(--hub-ease),transform .16s var(--hub-back)}
.bxh-rail:hover .knob,.bxh-rail:focus-visible .knob,.bxh-rail.grabbing .knob{transform:scale(1.25)}
@keyframes bxhPop{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.bxh-val{font-family:var(--hub-mono);font-size:1.375rem;font-weight:700;letter-spacing:-.04em;
  color:var(--hub-blue);min-width:76px;text-align:right}
.bxh-val.pop{animation:bxhPop .42s var(--hub-back)}
.bxh-count{font-family:var(--hub-mono);font-size:.8125rem;font-weight:700;letter-spacing:-.03em;
  color:var(--hub-faint);min-width:64px}
.bxh-count b{color:var(--hub-txt)}

/* ── Les étiquettes qui débordent du cadre (DA §7.3) ──
   Elles remplacent les phrases : un multiple, une réussite, un
   volume. Elles claquent en place après le dépliage. */
.bxh-tags{position:absolute;left:1.2rem;right:5.5rem;bottom:-2.15rem;display:flex;gap:.6rem;z-index:5;
  flex-wrap:wrap}
.bxh-tag{display:flex;align-items:baseline;gap:.45rem;padding:.5rem .8rem;border-radius:11px;
  background:var(--hub-face2);border:1px solid var(--hub-line2);
  box-shadow:0 14px 26px -16px rgba(0,0,0,.95)}
.bxh-tag b{font-family:var(--hub-mono);font-size:1.0625rem;font-weight:700;letter-spacing:-.04em;
  color:var(--hub-txt);line-height:1}
.bxh-tag i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--hub-faint)}
.bxh-tag.up b{color:var(--hub-up)}
.bxh-tag.gold{background:var(--hub-gold);border-color:var(--hub-gold)}
.bxh-tag.gold b,.bxh-tag.gold i{color:var(--hub-gold-ink)}
@keyframes bxhSnap{from{opacity:0;transform:translateY(12px) scale(.82)}to{opacity:1;transform:none}}
.bx-hub.is-anim .bxh-tag{animation:bxhSnap .46s var(--hub-back) both;
  animation-delay:calc(.72s + var(--i,0) * .07s)}

/* ═══ Les outils — subordonnés à l'objet ═══════════════════════
   Au repos : surface neutre, la teinte tient sur la marque et le
   filet, à SATURATION PLEINE (DA §4.4.3 — jamais « la teinte à
   15 % », qui donne du métal). Au survol, la teinte prend l'aplat
   et le texte passe à l'encre : c'est la récompense du geste. */
.bxh-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-bottom:1.5rem}
.bxh-tool{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  overflow:hidden;text-align:left;padding:.95rem 1rem 1rem;border-radius:13px;
  background:var(--hub-face);border:1px solid var(--hub-line);
  transition:transform .2s var(--hub-ease),background .2s var(--hub-ease),
    border-color .2s,box-shadow .2s}
.bxh-tool::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--tc)}
.bxh-tool-mark{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--tc);color:var(--tk);
  transition:transform .22s var(--hub-back)}
.bxh-tool-name{font-family:var(--hub-head);font-size:.9375rem;font-weight:800;letter-spacing:-.02em;
  color:var(--hub-txt);line-height:1.25;transition:color .2s}
.bxh-tool-state{font-size:.8125rem;font-weight:500;color:var(--hub-mut);font-variant-numeric:tabular-nums;
  transition:color .2s}
.bxh-tool-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.2rem;font-size:.8125rem;
  font-weight:700;color:var(--tc);transition:color .2s}
.bxh-tool-go svg{transition:transform .22s var(--hub-back)}
.bxh-tool:hover{transform:translateY(-4px);background:var(--tc);border-color:var(--tc);
  box-shadow:0 22px 34px -22px rgba(0,0,0,.95)}
.bxh-tool:hover .bxh-tool-name,.bxh-tool:hover .bxh-tool-state,.bxh-tool:hover .bxh-tool-go{color:var(--tk)}
.bxh-tool:hover .bxh-tool-mark{background:var(--tk);color:var(--tc);transform:scale(1.09)}
.bxh-tool:hover .bxh-tool-go svg{transform:translateX(4px)}
.bxh-tool:active{transform:translateY(-1px) scale(.99)}
/* Verrouillé : la teinte reste pleine, elle perd la surface. */
.bxh-tool.locked .bxh-tool-mark{background:transparent;color:var(--tc);
  border:1.5px solid var(--tc)}
.bxh-tool.locked::before{width:2px}
.bxh-tool.locked:hover{transform:translateY(-2px);background:var(--hub-face2);border-color:var(--tc);
  box-shadow:none}
.bxh-tool.locked:hover .bxh-tool-name{color:var(--hub-txt)}
.bxh-tool.locked:hover .bxh-tool-state{color:var(--hub-mut)}
.bxh-tool.locked:hover .bxh-tool-go{color:var(--tc)}
.bxh-tool.locked:hover .bxh-tool-mark{background:var(--tc);color:var(--tk)}

/* ═══ Le rail bas — UNE barre, pas trois cartes ════════════════
   Trois cellules qui partagent la même surface et sont séparées
   par un filet : l'écran garde un seul objet principal. */
.bxh-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hub-line);
  border:1px solid var(--hub-line);border-radius:14px;overflow:hidden}
.bxh-cell{background:var(--hub-face);padding:1rem 1.1rem 1.1rem;min-width:0;display:flex;
  flex-direction:column}
.bxh-cell-hd{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.bxh-cell-ico{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;background:var(--tc);color:var(--tk)}
.bxh-cell-hd h3{flex:1;min-width:0;font-family:var(--hub-head);font-size:.875rem;font-weight:800;
  letter-spacing:-.015em;color:var(--hub-txt);margin:0}
.bxh-more{background:none;border:none;padding:.15rem .1rem;font-size:.8125rem;font-weight:600;
  color:var(--hub-faint);transition:color .16s}
.bxh-more:hover{color:var(--tc)}

/* Classement */
.bxh-pod{display:flex;flex-direction:column;gap:1px}
.bxh-pod-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:.6rem;
  width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:.38rem .35rem;
  transition:background .16s}
.bxh-pod-row:hover{background:rgba(255,255,255,.05)}
.bxh-pod-row.you{background:none;box-shadow:inset 3px 0 0 var(--hub-gold);border-radius:0 8px 8px 0}
.bxh-pod-row.you .bxh-pod-name,.bxh-pod-row.you .bxh-pod-xp{color:var(--hub-txt)}
.bxh-pod-n{font-family:var(--hub-mono);font-size:.8125rem;font-weight:700;color:var(--hub-faint);
  letter-spacing:-.03em}
.bxh-pod-row:nth-child(1) .bxh-pod-n{color:var(--hub-gold)}
.bxh-pod-row:nth-child(2) .bxh-pod-n{color:#b6bdcb}
.bxh-pod-row:nth-child(3) .bxh-pod-n{color:#c08a5a}
.bxh-pod-name{min-width:0;font-size:.875rem;font-weight:600;color:var(--hub-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxh-pod-xp{font-family:var(--hub-mono);font-size:.75rem;font-weight:700;color:var(--hub-mut);
  letter-spacing:-.03em}

/* Défi */
.bxh-ev{display:block;width:100%;text-align:left;background:none;border:none;padding:0}
.bxh-ev-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.bxh-state{font-size:.75rem;font-weight:700;color:var(--tk);background:var(--tc);
  padding:.16rem .42rem;border-radius:5px}
.bxh-state.soon{background:rgba(255,255,255,.08);color:var(--hub-mut)}
.bxh-cd{font-family:var(--hub-mono);font-size:.8125rem;font-weight:700;color:var(--hub-mut);
  letter-spacing:-.03em}
.bxh-ev-title{display:block;font-size:.9375rem;font-weight:600;color:var(--hub-txt);line-height:1.35}
.bxh-ev:hover .bxh-ev-title{text-decoration:underline;text-underline-offset:3px}
.bxh-ev-reward{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;padding:.24rem .55rem;
  border-radius:7px;background:var(--tc);font-size:.8125rem;font-weight:700;color:var(--tk)}

/* Academy */
.bxh-lesson{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:var(--hub-row);border:1px solid var(--hub-line);border-radius:10px;padding:.6rem .7rem;
  margin-bottom:.75rem;transition:border-color .16s,background .16s}
.bxh-lesson:hover{border-color:var(--tc);background:var(--hub-face2)}
.bxh-lesson-t{flex:1;min-width:0}
.bxh-lesson-t i{display:block;font-style:normal;font-size:.75rem;font-weight:700;color:var(--tc);
  margin-bottom:.1rem}
.bxh-lesson-t b{display:block;font-size:.875rem;font-weight:600;color:var(--hub-txt);line-height:1.35}
.bxh-lesson svg{color:var(--hub-faint);flex-shrink:0;transition:transform .2s var(--hub-back)}
.bxh-lesson:hover svg{transform:translateX(4px);color:var(--tc)}
/* ⚠ SCOPÉ `.bx-hub` — obligatoire. `.bxh-bar` existe AUSSI dans le héros de
   la landing (la barre de base sous le titre, avec l'accroche et le CTA).
   Non scopée, cette règle-ci gagnait (blockx.css est chargé après le style
   inline) et transformait ce bloc en jauge de 6 px `overflow:hidden` : la
   phrase d'accroche ET le bouton d'entrée du site disparaissaient, coupés,
   sur TOUS les écrans. Deux composants ne partagent jamais un nom de classe
   sans préfixe de conteneur. */
.bx-hub .bxh-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden;
  margin-top:auto}
.bx-hub .bxh-bar>i{display:block;height:100%;width:0;border-radius:3px;background:var(--tc);
  transition:width 1.1s var(--hub-ease) .3s}
.bxh-barline{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  margin-top:.5rem;font-size:.8125rem;color:var(--hub-faint)}
.bxh-barline b{font-family:var(--hub-mono);font-weight:700;color:var(--hub-txt);letter-spacing:-.03em}

/* ═══ États ═══ */
.bxh-none{font-size:.8125rem;color:var(--hub-faint);line-height:1.5;padding:.4rem 0}
.bxh-wait{display:flex;flex-direction:column;gap:.45rem;padding:.15rem 0}
.bxh-wait .bx-skeleton{height:50px;border-radius:11px}
.bxh-wait.sm .bx-skeleton{height:14px}
.bxh-wait.sm .bx-skeleton:last-child{width:64%}

/* ═══ Thème clair (Paramètres → Apparence) ═════════════════════
   L'inversion est totale : tout l'écran bascule, jamais une dalle
   isolée (post-mortem 18/08, DA §14). */
body.bx-light .bx-hub{--hub-bg:#f3f4f8;--hub-face:#ffffff;--hub-face2:#f2f3f8;--hub-row:#f6f7fa;
  --hub-slab1:#e9ebf2;--hub-slab2:#dfe2ec;
  --hub-line:rgba(12,16,34,.1);--hub-line2:rgba(12,16,34,.19);
  --hub-txt:#0a0f1e;--hub-mut:#4d5566;--hub-faint:#6d7385;
  --hub-blue:#0d76b0;--hub-blue-ink:#ffffff;
  --hub-gold:#b45309;--hub-gold-ink:#ffffff;
  --hub-up:#0e9e64;--hub-up-ink:#ffffff;--hub-down:#b91c1c;
  --hub-shadow:0 34px 56px -34px rgba(13,32,84,.4),0 6px 16px -10px rgba(13,32,84,.25)}
body.bx-light.view-dashboard #dashboard-section{background:#f3f4f8!important}
body.bx-light .bxh-rail::before,body.bx-light .bx-hub .bxh-bar{background:rgba(12,16,34,.12)}
body.bx-light .bxh-pfp{background:#e9eaf0}
body.bx-light .bxh-sc,body.bx-light .bxh-x,body.bx-light .bxh-state.soon,
body.bx-light .bxh-pod-row:hover{background:rgba(12,16,34,.06)}
body.bx-light .bxh-x.big{background:var(--hub-up)}
body.bx-light .bxh-sc.hi{background:var(--hub-gold)}
body.bx-light .bxh-track{background:rgba(12,16,34,.1)}
body.bx-light .bxh-tag{box-shadow:0 14px 24px -18px rgba(13,32,84,.5)}
body.bx-light .bxh-tool:hover,body.bx-light .bxh-face{box-shadow:var(--hub-shadow)}
/* Les teintes d'outil sont réglées pour l'ardoise : sur blanc elles
   passent sous le seuil de lisibilité. On les fonce (même teinte,
   valeur plus basse) — on ne les délave surtout pas. */
body.bx-light .bxh-tool{--tcd:color-mix(in oklab,var(--tc) 74%,#0a0f1e)}
body.bx-light .bxh-tool::before{background:var(--tcd)}
body.bx-light .bxh-tool-mark{background:var(--tcd);color:#fff}
body.bx-light .bxh-tool-go{color:var(--tcd)}
body.bx-light .bxh-tool:hover{background:var(--tcd);border-color:var(--tcd)}
body.bx-light .bxh-tool:hover .bxh-tool-name,body.bx-light .bxh-tool:hover .bxh-tool-state,
body.bx-light .bxh-tool:hover .bxh-tool-go{color:#fff}
body.bx-light .bxh-tool:hover .bxh-tool-mark{background:#fff;color:var(--tcd)}
body.bx-light .bxh-tool.locked .bxh-tool-mark{background:transparent;color:var(--tcd);
  border-color:var(--tcd)}
body.bx-light .bxh-tool.locked:hover{background:var(--hub-face2);border-color:var(--tcd)}
body.bx-light .bxh-tool.locked:hover .bxh-tool-mark{background:var(--tcd);color:#fff}
body.bx-light .bxh-tool.locked:hover .bxh-tool-go{color:var(--tcd)}

/* ═══ Responsive ═══ */
@media(max-width:1180px){
  .bxh-tools{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .bxh-board{margin-bottom:2.8rem}
  .bxh-strip{grid-template-columns:1fr}
  .bxh-deck::after{display:none}
}
@media(max-width:760px){
  .bxh-tools{grid-template-columns:repeat(2,1fr)}
  .bxh-head{align-items:flex-start}
  .bxh-plate{flex-wrap:wrap;padding:1rem 1rem .9rem}
  .bxh-plate h2{flex:1 1 auto}
  .bxh-open{padding:.42rem .6rem}
  .bxh-rows{padding:.45rem .4rem;min-height:0}
  .bxh-row{grid-template-columns:32px minmax(0,1fr) auto;gap:.6rem}
  .bxh-sc,.bxh-track{display:none}
  .bxh-pfp{width:32px;height:32px}
  .bxh-dial{padding:.8rem 1rem 1rem;gap:.7rem}
  .bxh-count{display:none}
  .bxh-val{font-size:1.125rem;min-width:62px}
  .bxh-tags{position:static;margin-top:1rem;justify-content:flex-start}
  .bxh-board{margin-bottom:1.6rem}
  .bxh-deck::before{display:none}
}
/* En colonne unique, la tuile se couche : la marque à gauche, le nom
   et l'état au centre, le geste à droite. Empilée, elle coûtait un
   écran entier de défilement pour cinq outils. */
@media(max-width:520px){
  .bxh-tools{grid-template-columns:1fr;gap:.55rem}
  .bxh-tool{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;gap:.2rem .8rem;padding:.7rem .9rem}
  .bxh-tool-mark{grid-row:1/3}
  .bxh-tool-name{grid-column:2}
  .bxh-tool-state{grid-column:2}
  .bxh-tool-go{grid-column:3;grid-row:1/3;margin-top:0}
  .bxh-tool:hover{transform:none}
}

/* ═══ Filet mouvement réduit : le tableau statique COMPLET ═══
   Rien ne manque, tout est simplement déjà posé (DA §6). */
@media (prefers-reduced-motion:reduce){
  .bxh-in,.bx-hub.is-anim .bxh-deck,.bx-hub.is-anim .bxh-tag,
  .bxh-deal .bxh-row,.bxh-redeal .bxh-row,.bxh-val.pop,
  .bxh-deal .bxh-track>i,.bxh-redeal .bxh-track>i{animation:none!important}
  .bxh-ring .arc,.bx-hub .bxh-bar>i,.bxh-rail .fill,.bxh-rail .knob{transition:none!important}
  .bxh-tool:hover{transform:none}
}

/* ═══ 7. ACADEMY HUB (parcours apx-*) ═════════════════════════════ */
.apx-card{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important;font-family:var(--bx-font)!important;
  transition:border-color .15s!important}
.apx-card:hover{border-color:var(--bx-line-strong)!important;transform:none!important}
.apx-st.next .apx-card{border-color:var(--bx-violet-line)!important}
.apx-kicker{font-family:var(--bx-font)!important;font-size:.64rem!important;font-weight:700!important;
  letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--bx-text-3)!important}
.apx-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.01em!important;color:var(--bx-text)!important}
.apx-tag{font-family:var(--bx-font)!important;font-size:.64rem!important;font-weight:700!important;
  border-radius:6px!important;background:rgba(255,255,255,.06)!important;
  color:var(--bx-text-2)!important;box-shadow:none!important;text-shadow:none!important}
.apx-st.next .apx-tag{background:var(--bx-violet-soft)!important;color:#c9a2ff!important}
.apx-st.done .apx-tag{background:var(--bx-up-soft)!important;color:var(--bx-up)!important}
.apx-desc{font-family:var(--bx-font)!important;color:var(--bx-text-2)!important}
.apx-chap-n{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important}
.apx-chap-t{font-family:var(--bx-font)!important;color:var(--bx-text-2)!important}
.apx-chap-c{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important}
.apx-foot-meta{font-family:var(--bx-font)!important;color:var(--bx-text-3)!important}
.apx-go{font-family:var(--bx-font)!important;color:#c9a2ff!important;font-weight:600!important}
.apx-node{font-family:var(--bx-font)!important;font-weight:700!important;box-shadow:none!important}

/* ═══ 8. PROFIL (pf2-*) ═══════════════════════════════════════════ */
.pf2-wrap{font-family:var(--bx-font)!important}
.pf2-back{background:none!important;border:none!important;color:var(--bx-text-3)!important;
  font-family:var(--bx-font)!important;font-size:.78rem!important;font-weight:600!important;
  cursor:pointer!important}
.pf2-back:hover{color:var(--bx-text)!important}
.pf2-card{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-l)!important;box-shadow:none!important;overflow:hidden!important}
.pf2-banner{border-radius:0!important}
.pf2-banner-edit{background:rgba(8,8,12,.65)!important;border:1px solid var(--bx-line-strong)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text)!important;
  font-family:var(--bx-font)!important;font-size:.7rem!important;font-weight:600!important;
  backdrop-filter:blur(6px);box-shadow:none!important}
.pf2-ava{border:3px solid var(--bx-surface)!important;background:var(--bx-raised)!important;
  box-shadow:none!important}
.pf2-ava-edit{background:var(--bx-raised)!important;border:1px solid var(--bx-line-strong)!important;
  color:var(--bx-text-2)!important;box-shadow:none!important}
.pf2-pseudo{font-family:var(--bx-font)!important;font-weight:800!important;
  letter-spacing:-.02em!important;color:var(--bx-text)!important;text-shadow:none!important}
.pf2-tagline{font-family:var(--bx-font)!important;color:var(--bx-text-3)!important;font-size:.76rem!important}
.pf2-btn{background:rgba(255,255,255,.05)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important;color:var(--bx-text-2)!important;
  font-family:var(--bx-font)!important;font-size:.76rem!important;font-weight:600!important;
  box-shadow:none!important}
.pf2-btn:hover{background:rgba(255,255,255,.09)!important;color:var(--bx-text)!important}
.pf2-btn-acc{background:var(--bx-violet)!important;border-color:transparent!important;color:#fff!important}
.pf2-btn-acc:hover{background:var(--bx-violet-hover)!important;color:#fff!important}
.pf2-rankline{border-top:1px solid var(--bx-line)!important;background:rgba(255,255,255,.015)!important}
.pf2-rank-name{font-family:var(--bx-font)!important;font-weight:700!important}
.pf2-rank-xp{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important}
.pf2-track{height:4px!important;background:rgba(255,255,255,.07)!important;border-radius:2px!important}
.pf2-track-fill{background:var(--bx-violet)!important;border-radius:2px!important;box-shadow:none!important}
.pf2-mile{box-shadow:none!important}
.pf2-mile-name{font-family:var(--bx-font)!important;font-size:.6rem!important;
  color:var(--bx-text-3)!important;text-shadow:none!important}
.pf2-next{font-family:var(--bx-font)!important;font-size:.72rem!important;color:var(--bx-text-3)!important}
.pf2-stat{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;box-shadow:none!important}
.pf2-stat-ico{background:rgba(255,255,255,.05)!important;border:none!important;
  border-radius:8px!important;color:var(--bx-text-2)!important;box-shadow:none!important}
.pf2-stat-val{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  font-weight:700!important;letter-spacing:-.01em!important;color:var(--bx-text)!important;
  text-shadow:none!important}
.pf2-stat-lbl{font-family:var(--bx-font)!important;font-size:.68rem!important;color:var(--bx-text-3)!important}
.pf2-sec{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-l)!important;box-shadow:none!important}
.pf2-sec-title{font-family:var(--bx-font)!important;font-weight:700!important;
  letter-spacing:-.01em!important;color:var(--bx-text)!important}
.pf2-sec-count{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important;font-size:.72rem!important}
.pf2-mod{background:rgba(255,255,255,.03)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-s)!important}
.pf2-mod-name{font-family:var(--bx-font)!important;font-weight:600!important;color:var(--bx-text)!important}
.pf2-mod-bar{height:4px!important;background:rgba(255,255,255,.07)!important;border-radius:2px!important}
.pf2-mod-fill{background:var(--bx-violet)!important;border-radius:2px!important;box-shadow:none!important}
.pf2-mod-pct{font-family:var(--bx-font)!important;font-variant-numeric:tabular-nums!important;
  color:var(--bx-text-3)!important}
.pf2-mod-ico{color:var(--bx-text-2)!important;background:rgba(255,255,255,.05)!important;
  border:none!important;box-shadow:none!important}

/* Les correctifs des médaillons hexagonaux ont disparu avec eux : le
   système de badges est la médaille frappée du §15, écrite directement
   à la bonne DA — plus rien à rattraper au !important. */
/* Le classement lb2 est remplacé par le §16 (.bxlb-), écrit à la
   bonne DA — plus rien à rattraper au !important. */

/* ═══ 9. ACADEMY — lecture éditoriale ═════════════════════════════ */
.thm-card{background:var(--bx-surface)!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-l)!important;box-shadow:none!important}
.thm-head{border-bottom:1px solid var(--bx-line)!important}
.thm-task{font-family:var(--bx-font)!important;font-size:.66rem!important;font-weight:700!important;
  letter-spacing:.07em!important;text-transform:uppercase!important;color:#c9a2ff!important;
  background:var(--bx-violet-soft)!important;border:none!important;border-radius:6px!important;
  box-shadow:none!important}
.thm-title,.form-lesson-h1{font-family:var(--bx-font)!important;font-weight:800!important;
  letter-spacing:-.02em!important;color:var(--bx-text)!important;text-shadow:none!important;
  background:none!important;-webkit-text-fill-color:var(--bx-text)!important}
.form-lesson-breadcrumb{font-family:var(--bx-font)!important;font-size:.72rem!important;
  color:var(--bx-text-3)!important}
/* Corps de leçon : typo de lecture longue */
.form-body{font-family:var(--bx-font)!important;font-size:.92rem!important;
  line-height:1.75!important;color:#c9c9d4!important;max-width:70ch}
.form-body p{margin:.85rem 0!important}
.form-body h3{font-family:var(--bx-font)!important;font-size:1.08rem!important;
  font-weight:700!important;letter-spacing:-.01em!important;color:var(--bx-text)!important;
  margin:1.9rem 0 .6rem!important;padding-top:1.1rem!important;
  border-top:1px solid var(--bx-line)!important}
.form-body h3:first-child{border-top:none!important;padding-top:0!important;margin-top:0!important}
.form-body strong{color:var(--bx-text)!important;font-weight:600!important}
.form-body em{color:#c9a2ff!important;font-style:normal!important}
.form-body blockquote{margin:1.1rem 0!important;padding:.8rem 1.1rem!important;
  background:rgba(255,255,255,.03)!important;border-left:2px solid var(--bx-violet)!important;
  border-radius:0 var(--r-s) var(--r-s) 0!important;color:var(--bx-text-2)!important;
  font-size:.86rem!important;font-style:normal!important}
.form-body ul,.form-body ol{padding-left:1.3rem!important;margin:.85rem 0!important}
.form-body li{margin:.35rem 0!important}
.form-body code{font-family:var(--bx-mono)!important;font-size:.8em!important;
  background:rgba(255,255,255,.06)!important;border:1px solid var(--bx-line)!important;
  border-radius:5px!important;padding:.1rem .35rem!important;color:#c9a2ff!important}
.form-body a{color:#c9a2ff!important;text-decoration:none!important;
  border-bottom:1px solid var(--bx-violet-line)!important}
/* Slot d'image de leçon — composant prêt pour les captures fournies plus tard :
   <figure class="bx-fig"><img src="…" alt="…"><figcaption>Légende</figcaption></figure>
   Sans image : <figure class="bx-fig bx-fig-empty" data-note="Capture à venir"></figure> */
.form-body .bx-fig,.bx-fig{margin:1.4rem 0!important;border:1px solid var(--bx-line)!important;
  border-radius:var(--r-m)!important;overflow:hidden!important;background:var(--bx-inset)!important}
.bx-fig img{display:block;width:100%;height:auto}
.bx-fig figcaption{padding:.6rem .9rem!important;font-size:.72rem!important;
  color:var(--bx-text-3)!important;border-top:1px solid var(--bx-line)!important}
.bx-fig-empty{display:flex;align-items:center;justify-content:center;min-height:180px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.015),rgba(255,255,255,.015) 12px,transparent 12px,transparent 24px)!important}
.bx-fig-empty::after{content:attr(data-note);font-size:.74rem;color:var(--bx-text-3)}
/* Mode clair : les encres codées en dur du corps de leçon s'assombrissent
   (le reste du bloc lit des tokens et bascule tout seul). */
body.bx-light .form-body{color:#33333f!important}
body.bx-light .form-body em{color:#5b21b6!important}
body.bx-light .form-body code{background:rgba(16,16,38,.05)!important;color:#5b21b6!important}
body.bx-light .form-body a{color:#6d28d9!important}
body.bx-light .form-body blockquote{background:rgba(16,16,38,.04)!important}
body.bx-light .bx-fig-empty{background:repeating-linear-gradient(45deg,rgba(16,16,38,.02),rgba(16,16,38,.02) 12px,transparent 12px,transparent 24px)!important}
/* Quiz + navigation de leçon */
#formQuizSection{font-family:var(--bx-font)!important}
.form-nav-bar button,.lsn-nav{font-family:var(--bx-font)!important;font-weight:600!important;
  border-radius:var(--r-s)!important;box-shadow:none!important;text-shadow:none!important}
/* Sidebar : liste des chapitres */
#formModulesList{font-family:var(--bx-font)!important}
.form-lesson-check{font-family:var(--bx-font)!important}
.form-lesson-badges{font-family:var(--bx-font)!important}

/* ── Mouvement réduit : les jauges et squelettes se figent ── */
@media (prefers-reduced-motion:reduce){
  .bx-meter>i{transition:none}
  .bx-skeleton{animation:none}
}

/* ── Scrollbars sobres (app) ── */
#scanner ::-webkit-scrollbar,#rugsnip ::-webkit-scrollbar,
#formation-section ::-webkit-scrollbar{width:8px;height:8px}
#scanner ::-webkit-scrollbar-thumb,#rugsnip ::-webkit-scrollbar-thumb,
#formation-section ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);border-radius:4px}

/* ═══ PnL Cards v2 — collection, création & partage (profil) ═══ */
/* Collection — les cartes auxquelles le compte a accès */
.pnl2-coll-head{font-size:.72rem;color:var(--bx-text-3);margin-bottom:.5rem;
  font-variant-numeric:tabular-nums}
.pnl2-coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.7rem;margin-bottom:1rem}
.pnl2-tile{border:1px solid var(--bx-line);border-radius:var(--r-m);
  background:var(--bx-surface);padding:.6rem;transition:border-color .12s}
.pnl2-tile:hover{border-color:var(--bx-line-strong)}
.pnl2-tile-img{aspect-ratio:1;border-radius:var(--r-s);background-color:#05070c;
  background-size:132%;background-position:center;margin-bottom:.55rem;
  border:1px solid var(--bx-line)}
.pnl2-tile-name{font-size:.78rem;font-weight:600;color:var(--bx-text);
  display:flex;align-items:center;gap:.3rem}
.pnl2-tile-cond{font-size:.66rem;color:var(--bx-text-3);margin-top:.15rem;line-height:1.4}
.pnl2-tile.locked{opacity:.5}
.pnl2-tile.locked .pnl2-tile-img{filter:grayscale(1)}
.pnl2-tile.soon{border-style:dashed}
.pnl2-tile.soon .pnl2-tile-img{background-color:transparent;border-style:dashed}
.pnl2-sec-card{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-l);
  padding:1.15rem 1.25rem;display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.pnl2-sec-txt{flex:1;min-width:220px}
.pnl2-sec-title{font-size:.92rem;font-weight:600;color:var(--bx-text)}
.pnl2-sec-sub{font-size:.76rem;color:var(--bx-text-2);margin-top:.25rem;line-height:1.5}
.pnl2-pub-slot{width:100%;max-width:420px}
.pnl2-pub-slot canvas,.pnl2-pub-slot img{display:block;width:100%;height:auto;border-radius:var(--r-m);
  border:1px solid var(--bx-line)}
.pnl2-pub-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;gap:.6rem}
.pnl2-pub-note{font-size:.7rem;color:var(--bx-text-3)}
/* Overlay + panneau */
.pnl2-ov{position:fixed;inset:0;z-index:9600;display:none;align-items:flex-start;justify-content:center;
  padding:4vh 1rem;background:rgba(4,4,8,.78);backdrop-filter:blur(6px);overflow-y:auto}
.pnl2-ov.show{display:flex}
.pnl2-panel{width:100%;max-width:680px;background:var(--bx-raised);border:1px solid var(--bx-line-strong);
  border-radius:var(--r-l);box-shadow:0 12px 32px rgba(0,0,0,.5);overflow:hidden}
.pnl2-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.95rem 1.15rem;border-bottom:1px solid var(--bx-line)}
.pnl2-head-title{font-size:.95rem;font-weight:600;color:var(--bx-text)}
.pnl2-head-step{font-size:.72rem;color:var(--bx-text-3);font-variant-numeric:tabular-nums}
.pnl2-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--r-s);border:1px solid var(--bx-line);background:transparent;color:var(--bx-text-2);
  cursor:pointer}
.pnl2-x:hover{color:var(--bx-text);border-color:var(--bx-line-strong)}
.pnl2-body{padding:1.05rem 1.15rem 1.25rem}
.pnl2-hint{font-size:.76rem;color:var(--bx-text-2);margin-bottom:.8rem;line-height:1.5}
/* Étape 1 — liste des trades */
.pnl2-trades{display:flex;flex-direction:column;gap:.4rem;max-height:52vh;overflow-y:auto}
.pnl2-trade{display:grid;grid-template-columns:1fr auto auto auto;gap:.9rem;align-items:center;
  padding:.6rem .8rem;border:1px solid var(--bx-line);border-radius:var(--r-s);background:var(--bx-surface);
  cursor:pointer;transition:border-color .12s,background .12s;text-align:left;width:100%;
  font-family:inherit;color:inherit}
.pnl2-trade:hover{border-color:var(--bx-violet);background:var(--bx-raised)}
.pnl2-trade-sym{font-size:.84rem;font-weight:600;color:var(--bx-text)}
.pnl2-trade-sym i{display:block;font-style:normal;font-size:.68rem;font-weight:400;color:var(--bx-text-3);margin-top:.1rem}
.pnl2-trade-pnl{font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.pnl2-trade-pnl.up{color:var(--bx-up)}.pnl2-trade-pnl.down{color:var(--bx-down)}
.pnl2-trade-x{font-size:.76rem;color:var(--bx-text-2);font-variant-numeric:tabular-nums}
.pnl2-trade-date{font-size:.7rem;color:var(--bx-text-3);font-variant-numeric:tabular-nums}
/* Étape 2 — aperçu + actions */
.pnl2-preview{border:1px solid var(--bx-line);border-radius:var(--r-m);overflow:hidden;background:var(--bx-inset)}
.pnl2-preview canvas{display:block;width:100%;height:auto}
.pnl2-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
.pnl2-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.8rem 1.15rem;border-top:1px solid var(--bx-line)}
.pnl2-msg{font-size:.74rem;color:var(--bx-text-2)}
.pnl2-msg.ok{color:var(--bx-up)}
.pnl2-empty{padding:2.2rem 1rem;text-align:center;color:var(--bx-text-2);font-size:.8rem;line-height:1.6}
.pnl2-empty svg{opacity:.5;margin-bottom:.6rem}

/* ═══ Stratégies publiques (ps2) — découverte communautaire + likes ═══ */
.ps2-wrap{max-width:980px;margin:0 auto}
.ps2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.ps2-title{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;color:var(--bx-text);margin:0}
.ps2-sub{font-size:.8rem;color:var(--bx-text-2);margin-top:.3rem;max-width:520px;line-height:1.5}
.bx-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.ps2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem}
.ps2-card{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-m);
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.6rem;transition:border-color .12s}
.ps2-card:hover{border-color:var(--bx-line-strong)}
.ps2-card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ps2-author{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;
  padding:0;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--bx-text-2)}
.ps2-author:hover{color:var(--bx-text)}
.ps2-ava{width:26px;height:26px;border-radius:8px;overflow:hidden;background:var(--bx-violet-soft);
  color:#c9a2ff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;flex-shrink:0}
.ps2-ava img{width:100%;height:100%;object-fit:cover}
.ps2-date{font-size:.68rem;color:var(--bx-text-3);font-variant-numeric:tabular-nums}
.ps2-name{font-size:.95rem;font-weight:600;color:var(--bx-text);letter-spacing:-.01em}
.ps2-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.ps2-tag{display:inline-flex;padding:.2rem .5rem;border-radius:6px;font-size:.68rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--bx-line);color:var(--bx-text-2);
  font-variant-numeric:tabular-nums}
.ps2-tag.up{color:var(--bx-up);border-color:rgba(46,226,122,.25);background:rgba(46,226,122,.07)}
.ps2-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:auto;padding-top:.35rem}
.ps2-like{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;
  border-radius:999px;border:1px solid var(--bx-line);background:transparent;cursor:pointer;
  font-family:inherit;font-size:.74rem;font-weight:600;color:var(--bx-text-2);
  transition:border-color .12s,color .12s;font-variant-numeric:tabular-nums}
.ps2-like:hover{border-color:var(--bx-line-strong);color:var(--bx-text)}
.ps2-like.on{color:var(--bx-violet);border-color:var(--bx-violet-line);background:var(--bx-violet-soft)}
.ps2-like.on svg{fill:currentColor}
/* Bouton publier (page Bot, rangée stratégie) */
.nb-tool.nb-pub-on{color:#c9a2ff!important;border-color:rgba(153,69,255,.45)!important;
  background:rgba(153,69,255,.12)!important}

/* ═══ Parrainage à paliers (rf2) ═══ */
.rf2-wrap{max-width:1040px;margin:0 auto}
.rf2-grid{display:grid;grid-template-columns:1fr 300px;gap:1.6rem;align-items:start}
@media(max-width:860px){.rf2-grid{grid-template-columns:1fr}}
.rf2-stats{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.1rem 0 1.3rem}
.rf2-stat{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-m);
  padding:.85rem 1.1rem;min-width:130px}
.rf2-stat b{display:block;font-size:1.35rem;font-weight:700;color:var(--bx-text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rf2-stat span{font-size:.7rem;color:var(--bx-text-2)}
.rf2-curve{border:1px solid var(--bx-line);border-radius:var(--r-m);background:var(--bx-inset);
  padding:.6rem .4rem .2rem;overflow:hidden}
.rf2-curve svg{display:block;width:100%;height:auto}
.rf2-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-top:.9rem}
.rf2-tier{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-m);
  padding:.8rem .9rem;opacity:.72}
.rf2-tier.got{opacity:1;border-color:var(--bx-violet-line)}
.rf2-tier-at{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;
  color:var(--bx-text-3);font-variant-numeric:tabular-nums}
.rf2-tier.got .rf2-tier-at{color:#c9a2ff}
.rf2-tier-name{font-size:.85rem;font-weight:600;color:var(--bx-text);margin-top:.35rem}
.rf2-tier-desc{font-size:.7rem;color:var(--bx-text-2);margin-top:.25rem;line-height:1.45}
.rf2-side{display:flex;flex-direction:column;gap:.8rem;position:sticky;top:90px}
.rf2-card{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-l);
  padding:1.05rem 1.15rem}
.rf2-code{font-family:var(--bx-mono,monospace);font-size:1.15rem;font-weight:700;color:#c9a2ff;
  background:var(--bx-violet-soft);border:1px solid var(--bx-violet-line);border-radius:var(--r-s);
  padding:.55rem .8rem;margin:.6rem 0 .45rem;letter-spacing:.03em;text-align:center}
.rf2-link{font-size:.7rem;color:var(--bx-text-3);word-break:break-all;font-family:var(--bx-mono,monospace)}

/* Récompense de parrainage : bons à réclamer + accès temporaires en cours */
.rf2-reward{border-color:var(--bx-violet-line)}
.rf2-reward-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:700;
  color:#c9a2ff;background:var(--bx-violet-soft);border:1px solid var(--bx-violet-line);
  border-radius:999px;padding:.16rem .5rem;margin-left:.4rem;font-variant-numeric:tabular-nums}
.rf2-picks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.7rem 0 .55rem}
.rf2-pick{display:flex;align-items:center;gap:.35rem;background:var(--bx-inset);
  border:1px solid var(--bx-line);border-radius:var(--r-s);padding:.45rem .55rem;font-size:.74rem;
  color:var(--bx-text-2);cursor:pointer;transition:border-color .15s,color .15s,background .15s;
  text-align:left;font-family:inherit;width:100%}
.rf2-pick:hover:not(.off){border-color:var(--bx-violet-line);color:var(--bx-text)}
.rf2-pick.on{background:var(--bx-violet-soft);border-color:var(--bx-violet-line);color:#c9a2ff;font-weight:600}
.rf2-pick.off{opacity:.4;cursor:not-allowed}
.rf2-grants{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.rf2-grant{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--bx-inset);border:1px solid var(--bx-line);border-radius:var(--r-s);
  padding:.4rem .55rem;font-size:.73rem;color:var(--bx-text)}
.rf2-grant-left{display:flex;align-items:center;gap:.35rem;font-weight:600}
.rf2-grant-left svg{color:#c9a2ff;flex-shrink:0}
.rf2-left{font-variant-numeric:tabular-nums;color:#c9a2ff;font-weight:600;font-size:.7rem;white-space:nowrap}
@media(max-width:520px){.rf2-picks{grid-template-columns:1fr}}

/* PnL card v2 — aperçu portrait (carte holographique) */
.pnl2-preview{display:flex;justify-content:center;padding:1.1rem;background:var(--bx-inset)}
.pnl2-preview canvas{width:100%;max-width:340px;height:auto}
.pnl2-pub-slot{max-width:300px}

/* ── Hub : neutralise la palette néon legacy du dashboard (l.7112 index) ── */
body.view-dashboard:not(.bx-light){--sx-good:#2ee27a;--sx-bad:#ff5c5c;}

/* ═══ Défis & événements (ev2) ═══ */
.ev2-wrap{max-width:980px;margin:0 auto}
.ev2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.85rem}
.ev2-card{position:relative;background:var(--bx-surface);border:1px solid var(--bx-line);
  border-radius:var(--r-l);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .12s}
.ev2-card:hover{border-color:var(--bx-line-strong)}
.ev2-card.ended{opacity:.55}
.ev2-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ev2-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.ev2-state.on{color:#c9a2ff}
.ev2-state.on i{width:7px;height:7px;border-radius:50%;background:var(--bx-violet)}
.ev2-state.up{color:var(--bx-text-2)}
.ev2-state.off{color:var(--bx-text-3)}
.ev2-cd{font-size:.7rem;color:var(--bx-text-2);font-variant-numeric:tabular-nums}
.ev2-title{font-size:1.05rem;font-weight:600;color:var(--bx-text);letter-spacing:-.01em;line-height:1.3}
.ev2-desc{font-size:.78rem;color:var(--bx-text-2);line-height:1.5}
.ev2-reward{display:inline-flex;align-items:center;gap:.45rem;margin-top:.2rem;
  padding:.4rem .7rem;border-radius:var(--r-s);background:rgba(232,193,90,.08);
  border:1px solid rgba(232,193,90,.25);color:var(--bx-gold);font-size:.76rem;font-weight:600;
  align-self:flex-start}
.ev2-del{align-self:flex-end;margin-top:.3rem}
.ev2-form{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem}
.ev2-form textarea.bx-input{resize:vertical;min-height:56px}
/* Bloc Hub */
.ev2-hub{display:flex;flex-direction:column;gap:.45rem;cursor:pointer;border:1px solid var(--bx-line);
  border-radius:var(--r-m);padding:.8rem .9rem;background:var(--bx-inset);transition:border-color .12s}
.ev2-hub:hover{border-color:var(--bx-violet-line)}
.ev2-hub .ev2-reward{font-size:.7rem;padding:.3rem .55rem}

/* Profil : @handle + bio */
.pf2-handle{font-size:.78rem;font-weight:500;color:var(--bx-text-3)}
.pf2-bio{font-size:.8rem;color:var(--bx-text-2);line-height:1.5;margin-top:.3rem;max-width:520px}

/* ═══ Social — abonnements ═══ */
.soc-counts{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;margin-top:.45rem}
.soc-count{font-size:.76rem;color:var(--bx-text-2);display:inline-flex;align-items:center;gap:.3rem}
.soc-count b{color:var(--bx-text);font-weight:600;font-variant-numeric:tabular-nums}
.soc-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:var(--r-m);
  padding:.85rem 1.05rem;margin:1.15rem 0 0}
.soc-row .soc-counts{margin:0;flex:1;min-width:180px}

/* ── Stratégies publiques : carte cliquable + fiche détaillée ── */
.ps2-card.is-clickable{cursor:pointer}
.ps2-card.is-clickable:hover{border-color:var(--bx-violet-line)}
.ps2-see{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;
  font-size:.7rem;font-weight:600;color:var(--bx-text-3)}
.ps2-card.is-clickable:hover .ps2-see{color:#c9a2ff}
.ps2-see svg{width:13px;height:13px}
.ps2-det-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--bx-line);flex-wrap:wrap}
.ps2-det-block{margin-bottom:.9rem}
.ps2-det-lbl{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bx-text-3);margin-bottom:.45rem}
.ps2-lvls{display:flex;gap:.4rem;flex-wrap:wrap}
.ps2-lvl{display:inline-flex;align-items:baseline;gap:.35rem;padding:.35rem .6rem;
  border-radius:var(--r-s);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid var(--bx-line);background:rgba(255,255,255,.04);color:var(--bx-text)}
.ps2-lvl i{font-style:normal;font-size:.68rem;font-weight:500;color:var(--bx-text-3)}
.ps2-lvl.up{color:var(--bx-up);border-color:rgba(46,226,122,.25);background:rgba(46,226,122,.07)}
.ps2-lvl.down{color:var(--bx-down);border-color:rgba(255,92,92,.25);background:rgba(255,92,92,.07)}
.ps2-dim{font-size:.78rem;color:var(--bx-text-3)}
.ps2-det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 1.4rem;
  border-top:1px solid var(--bx-line);padding-top:.3rem}
.ps2-det-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.52rem 0;border-bottom:1px solid var(--bx-line)}
.ps2-det-row span{font-size:.76rem;color:var(--bx-text-2)}
.ps2-det-row b{font-size:.8rem;font-weight:600;color:var(--bx-text);
  font-variant-numeric:tabular-nums;text-align:right}

/* ═══ LANDING — SECTION TARIFS (#pricing-preview) ══════════════════
   Migration du 9e namespace (--bxp-*) vers les tokens --bx-*.
   C'est l'ecran ou le client sort sa carte : il doit etre le plus CALME
   du site. Une seule couleur d'interface (le violet), une seule famille
   de boutons (bx-btn) pour les CTA ET les segments, l'echelle typo
   unique 12/13/15/18/22/28, la grille de 4px, zero hex en dur.
   Soustrait par rapport a l'ancien bloc : 3 familles de polices -> 1,
   le survol qui souleve les cartes, le filet d'accent, la pastille a
   bordure, les 4 gris hors palette. */
#pricing-preview{font-family:var(--bx-font)}

/* ── En-tete : MEME grammaire que les autres sections de la landing
      (.px-title / .px-sub) — meme police de titrage, meme clamp, meme
      graisse, meme taille de sous-titre. C'est la page de vente : une
      section qui titre 30px au milieu de sections qui titrent 54px se
      lit comme un autre site. ── */
#pricing-preview .bx-pr-head{text-align:center;max-width:620px;margin:0 auto}
#pricing-preview .bx-pr-eyebrow{display:block;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bx-text-3);
  margin-bottom:var(--sp-3)}
#pricing-preview .bx-pr-title{font-family:var(--bx-font-display);
  font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;color:var(--bx-text);margin:0}
#pricing-preview .bx-pr-title em{font-style:normal;color:var(--bx-text-2)}
#pricing-preview .bx-pr-sub{font-size:1.05rem;line-height:1.7;color:var(--bx-text-2);
  margin:var(--sp-4) auto 0;max-width:52ch}

/* ── Bascules : meme bouton que partout (bx-btn), juste plus dense ── */
#pricing-preview .bx-pr-segs{display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--sp-2);margin:var(--sp-6) 0}
#pricing-preview .bx-pr-seg{display:inline-flex;gap:2px;padding:3px;
  background:var(--bx-inset);border:1px solid var(--bx-line);border-radius:var(--r-m)}
#pricing-preview .bx-pr-seg .bx-btn{padding:.4rem .8rem;font-size:13px;font-weight:600;
  background:transparent;border-color:transparent;color:var(--bx-text-3);
  border-radius:var(--r-s);
  transition:background .15s,color .15s,transform .1s}
#pricing-preview .bx-pr-seg .bx-btn:hover{color:var(--bx-text)}
#pricing-preview .bx-pr-seg .bx-btn.active{background:var(--bx-violet-soft);color:var(--bx-text)}
#pricing-preview .bx-pr-seg .bx-btn:active{transform:translateY(1px)}
#pricing-preview .bx-pr-seg .bx-btn:focus-visible{outline:2px solid var(--bx-violet);outline-offset:2px}
#pricing-preview .bx-pr-life{font-size:12px;font-weight:500;color:var(--bx-text-3)}
#pricing-preview .bx-pr-seg .bx-btn.active .bx-pr-life{color:var(--bx-text-2)}
#pricing-preview .bx-pr-rate{font-size:12px;font-weight:500;color:var(--bx-text-3);
  font-variant-numeric:tabular-nums}

/* ── Les deux cartes : memes lignes, meme ordre, meme verticale.
      L'ecart 399/549 se lit sur l'alignement, pas sur deux listes. ── */
#pricing-preview .bx-pr-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);max-width:860px;margin:0 auto;align-items:stretch}
@media(max-width:760px){#pricing-preview .bx-pr-grid{grid-template-columns:1fr;max-width:420px}}
#pricing-preview .bx-pr-card{display:flex;flex-direction:column;
  background:var(--bx-surface);border:1px solid var(--bx-line);
  border-radius:var(--r-l);padding:var(--sp-6) var(--sp-5)}
/* La carte mise en avant se distingue par UN trait : sa bordure. */
#pricing-preview .bx-pr-card.feat{background:var(--bx-raised);border-color:var(--bx-violet-line)}
/* Les deux en-tetes de carte tiennent la MEME hauteur, que la puce
   d'ecart soit la ou non : sans ca, toute la colonne Premium descend
   de 2px et les deux prix ne se comparent plus a l'oeil. */
#pricing-preview .bx-pr-tier{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-2);min-height:20px}
#pricing-preview .bx-pr-tier-n{font-size:12px;font-weight:600;letter-spacing:.12em;
  line-height:20px;text-transform:uppercase;color:var(--bx-text-3)}
#pricing-preview .bx-pr-card.feat .bx-pr-tier-n{color:var(--bx-violet)}
#pricing-preview .bx-pr-delta{font-size:13px;font-weight:600;line-height:20px;
  color:var(--bx-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
#pricing-preview .bx-pr-lede{font-size:15px;line-height:1.55;color:var(--bx-text-2);
  margin:var(--sp-2) 0 0}
/* Le prix est LA donnee de l'ecran : meme police de titrage que le titre
   de section, pour qu'il pese autant. */
#pricing-preview .bx-pr-price{display:flex;align-items:baseline;gap:2px;
  margin:var(--sp-5) 0 0;color:var(--bx-text);font-family:var(--bx-font-display);
  font-variant-numeric:tabular-nums}
#pricing-preview .bx-pr-cur{font-size:1.4rem;font-weight:800;display:inline-flex;align-items:center}
#pricing-preview .bx-pr-cur .sol-mk{width:.8em;height:.8em;border-radius:50%}
#pricing-preview .bx-pr-amt{font-size:clamp(2.4rem,3.4vw,2.9rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
#pricing-preview .bx-pr-per{font-family:var(--bx-font);font-size:15px;font-weight:500;
  color:var(--bx-text-3);margin-left:var(--sp-1)}
#pricing-preview .bx-pr-rule{height:1px;background:var(--bx-line);margin:var(--sp-4) 0}

/* ── Les 4 lignes d'acces : coche = inclus, tiret = absent. ── */
#pricing-preview .bx-pr-list{display:flex;flex-direction:column;gap:var(--sp-3);
  margin:0 0 var(--sp-5);padding:0;list-style:none}
#pricing-preview .bx-pr-item{display:grid;grid-template-columns:16px 1fr;gap:var(--sp-3);
  align-items:start}
#pricing-preview .bx-pr-mark{margin-top:2px;color:var(--bx-violet);display:block}
#pricing-preview .bx-pr-item.off .bx-pr-mark{color:var(--bx-text-3)}
#pricing-preview .bx-pr-n{font-size:15px;font-weight:600;color:var(--bx-text);line-height:1.35}
#pricing-preview .bx-pr-d{display:block;font-size:13px;font-weight:400;color:var(--bx-text-2);
  line-height:1.45;margin-top:2px}
#pricing-preview .bx-pr-item.off .bx-pr-n{color:var(--bx-text-3);font-weight:500}
#pricing-preview .bx-pr-item.off .bx-pr-d{color:var(--bx-text-3)}

/* ── CTA : bx-btn, pleine largeur, avec ses 3 etats (repos /
      chargement / retour). Il part vers le paiement : il ne doit
      jamais rester muet. ── */
#pricing-preview .bx-pr-cta{margin-top:auto;width:100%;font-size:15px;
  padding:.85rem 1.2rem;border-radius:var(--r-m);
  transition:background .15s,border-color .15s,color .15s,transform .1s}
#pricing-preview .bx-pr-cta:active{transform:translateY(1px)}
#pricing-preview .bx-pr-cta:focus-visible{outline:2px solid var(--bx-violet);outline-offset:2px}
#pricing-preview .bx-pr-spin{display:none;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.6;
  animation:bxPrSpin .6s linear infinite}
#pricing-preview .bx-pr-cta.is-loading{pointer-events:none}
#pricing-preview .bx-pr-cta.is-loading .bx-pr-spin{display:block}
#pricing-preview .bx-pr-cta.is-loading .bx-pr-cta-l{opacity:.6}
@keyframes bxPrSpin{to{transform:rotate(360deg)}}

/* ── Rangee de confiance ── */
#pricing-preview .bx-pr-trust{display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--sp-5);margin-top:var(--sp-7)}
#pricing-preview .bx-pr-trust-item{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:13px;font-weight:500;color:var(--bx-text-2)}
#pricing-preview .bx-pr-trust-item svg{width:16px;height:16px;color:var(--bx-up);flex:none}

@media(prefers-reduced-motion:reduce){
  #pricing-preview .bx-pr-cta,#pricing-preview .bx-pr-seg .bx-btn{transition:none}
  #pricing-preview .bx-pr-spin{animation:none;opacity:.35}
}

/* ═══ 12. RUG SNIPING v2 — « Poste de tir » ═══════════════════════
   Optique de visée nocturne : slate profond (famille Hub v4), phosphore
   ÉMERAUDE = identité de l'outil, OR = récompenses/multiplicateurs,
   ROSE = donnée rug. 3D réelle : radar de surveillance en couches,
   cards du feed en perspective (tilt souris, profondeur entre couches),
   lock-on sur les nouveaux calls. Page dark-only, quel que soit le
   thème utilisateur (rg-dark / bx-light neutralisés plus bas). ═══ */

body.view-rugsnip,body.rg-dark.view-rugsnip,body.bx-light.view-rugsnip{background:#0b1120!important}
section#rugsnip,body.rg-dark section#rugsnip{
  /* Re-skin des composants legacy (toolbar, tri, dates, panneau bot rgb-*)
     par les tokens qu'ils consomment déjà — !important pour battre les
     variantes body.rg-dark du legacy. */
  --rg-paper:#0b1120!important;
  --rg-card:#111a2b!important;
  --rg-ink:#eef1fb!important;
  --rg-ink2:#a7b0cc!important;
  --rg-mute:#8189ad!important;
  --rg-line:rgba(148,163,205,.13)!important;
  --rg-line2:rgba(148,163,205,.26)!important;
  --rg-green:#34d399!important;
  --rg-red:#fb7185!important;
  --rg-amber:#f5b93f!important;
  --rg-shd1:rgba(0,0,0,.4)!important;
  --rg-shd2:rgba(0,0,0,.5)!important;
  background:
    radial-gradient(58% 34% at 80% -4%,rgba(52,211,153,.13),transparent 60%),
    radial-gradient(46% 30% at 4% 8%,rgba(139,92,246,.08),transparent 55%),
    radial-gradient(40% 26% at 55% 30%,rgba(245,185,63,.04),transparent 60%),
    #0b1120!important;
}
#rugsnip .rugsnip-section{max-width:1320px;padding:5.2rem 2.4rem 5.5rem}
#rugsnip :focus-visible{outline:2px solid rgba(52,211,153,.7);outline-offset:2px}
#rugsnip button{cursor:pointer}
#rugsnip button:active{transform:scale(.97)}

/* Nav : la page est dark-only, même en thème clair global */
body.bx-light.view-rugsnip #mainNav{background:rgba(8,12,22,.94)!important;
  border-bottom:1px solid rgba(148,163,205,.14)!important}
body.bx-light.view-rugsnip #mainNav .logo-text{color:#fff!important}

/* ── Hero « poste de tir » ──────────────────────────────────────── */
.bxr-hero{position:relative;display:grid;grid-template-columns:auto 1fr 320px;gap:2rem;align-items:center;
  background:linear-gradient(150deg,rgba(52,211,153,.10),rgba(17,24,41,.62) 46%,rgba(245,185,63,.05)),rgba(17,24,41,.72);
  border:1px solid rgba(148,163,205,.22);border-radius:22px;padding:1.7rem 2rem;margin-bottom:1.2rem;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(52,211,153,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.bxr-hero::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 90% at 12% 10%,rgba(52,211,153,.10),transparent 55%)}
/* Vitrine verrouillée : les stats du hero viennent des données d'illustration */
.bxr-hero.bxr-demo::after{content:'APERÇU';position:absolute;top:14px;right:16px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;color:#6ee7b7;
  background:rgba(8,14,26,.85);border:1px solid rgba(52,211,153,.35);border-radius:999px;padding:.26rem .7rem}
.bxr-eyebrow{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6ee7b7;margin-bottom:.5rem}
.bxr-title{font-family:var(--font-head);font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:#eef1fb;margin:0}
.bxr-sub{font-size:.84rem;line-height:1.6;color:#a7b0cc;max-width:520px;margin:.6rem 0 0}
.bxr-status{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.95rem}
.bxr-chase{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.32);
  border-radius:999px;padding:.3rem .75rem}
.bxr-chase i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;
  animation:bxrPulse 1.8s ease-in-out infinite}
@keyframes bxrPulse{0%,100%{opacity:1}50%{opacity:.35}}
.bxr-watch{font-size:.76rem;color:#a7b0cc}
.bxr-watch b{font-family:var(--font-head);font-weight:700;color:#eef1fb;font-variant-numeric:tabular-nums}
.bxr-updated{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:#8189ad;font-variant-numeric:tabular-nums}
.bxr-updated.err{color:#fb7185}
.bxr-micro{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(148,163,205,.12)}
.bxr-micro span{font-size:.7rem;color:#8189ad}
.bxr-micro b{font-family:var(--font-head);font-weight:700;color:#cdd5ec;font-variant-numeric:tabular-nums;margin-left:.3rem}

/* ── Radar 3D — l'élément signature ── */
.bxr-scope{width:212px;height:196px;perspective:620px;flex-shrink:0;position:relative}
.bxr-scope-tilt{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(56deg + var(--hy,0deg))) rotateZ(calc(-10deg + var(--hx,0deg)));
  transition:transform .25s ease-out}
.bxr-disc{position:absolute;left:50%;top:50%;width:206px;height:206px;margin:-103px 0 0 -103px;border-radius:50%;
  transform-style:preserve-3d;
  background:radial-gradient(circle,rgba(52,211,153,.14) 0%,rgba(13,32,28,.5) 42%,rgba(11,17,32,.15) 68%,transparent 72%);
  border:1px solid rgba(52,211,153,.4);
  box-shadow:0 0 70px -16px rgba(52,211,153,.55),inset 0 0 46px -8px rgba(52,211,153,.3)}
.bxr-ring{position:absolute;border-radius:50%;border:1px solid rgba(52,211,153,.3);pointer-events:none}
.bxr-ring.r1{inset:16%;transform:translateZ(6px);border-color:rgba(52,211,153,.38)}
.bxr-ring.r2{inset:32%;transform:translateZ(12px);border-color:rgba(52,211,153,.3)}
.bxr-ring.r3{inset:44%;transform:translateZ(18px);border-color:rgba(52,211,153,.24)}
.bxr-cross{position:absolute;inset:0;pointer-events:none;transform:translateZ(4px);
  background:
    linear-gradient(rgba(52,211,153,.22),rgba(52,211,153,.22)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(52,211,153,.22),rgba(52,211,153,.22)) 0 50%/100% 1px no-repeat}
.bxr-sweep{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(rgba(52,211,153,.5) 0deg,rgba(52,211,153,.12) 46deg,transparent 62deg,transparent 360deg);
  animation:bxrSweep 3.8s linear infinite;mix-blend-mode:screen}
@keyframes bxrSweep{from{transform:translateZ(20px) rotate(0)}to{transform:translateZ(20px) rotate(360deg)}}
.bxr-blip{position:absolute;left:var(--bx);top:var(--by);width:6px;height:6px;border-radius:50%;
  background:#34d399;box-shadow:0 0 10px #34d399;transform:translateZ(14px);
  animation:bxrBlip 3.8s linear infinite;animation-delay:var(--bd,0s);opacity:0}
.bxr-blip.hot{background:#fb7185;box-shadow:0 0 10px #fb7185}
@keyframes bxrBlip{0%,4%{opacity:0}7%{opacity:1}38%{opacity:.9}70%,100%{opacity:0}}
.bxr-core{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle,#7ef0c6,#34d399 60%);box-shadow:0 0 18px 2px rgba(52,211,153,.8);
  transform:translateZ(26px)}
.bxr-scope-shadow{position:absolute;left:50%;bottom:-4px;width:150px;height:30px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 65%);filter:blur(4px)}

/* ── Stats de chasse (compteurs + médailles) ── */
.bxr-stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.bxr-stat{position:relative;display:flex;flex-direction:column;gap:.15rem;overflow:hidden;
  background:rgba(11,17,32,.6);border:1px solid rgba(148,163,205,.14);border-radius:14px;padding:.75rem .9rem;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.bxr-stat:hover{transform:translateY(-2px);border-color:rgba(52,211,153,.4);
  box-shadow:0 16px 36px -22px rgba(52,211,153,.8)}
.bxr-stat-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.bxr-stat b{font-family:var(--font-head);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
  color:#eef1fb;line-height:1.05;font-variant-numeric:tabular-nums}
.bxr-stat b small{font-size:.8rem;font-weight:700;color:#8189ad}
.bxr-stat i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8189ad}
.bxr-stat em{font-style:normal;font-size:.66rem;font-weight:700;color:#6ee7b7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxr-stat svg{color:#34d399;flex-shrink:0}
.bxr-stat.gold{border-color:rgba(245,185,63,.3);
  background:linear-gradient(160deg,rgba(245,185,63,.10),rgba(11,17,32,.6) 55%)}
.bxr-stat.gold b{background:linear-gradient(120deg,#fbd780,#f5b93f);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bxr-stat.gold svg{color:#f5b93f}
.bxr-stat.gold:hover{border-color:rgba(245,185,63,.55);box-shadow:0 16px 36px -22px rgba(245,185,63,.8)}
.bxr-stat.gold em{color:#f5b93f}

/* ── Toolbar & filtres (legacy re-skinné) ───────────────────────── */
.bxr-modes{display:flex;justify-content:flex-end;margin-bottom:1rem}
#rugsnip button.rug-sort-opt{display:block;width:100%;text-align:left;border-left:none!important;
  border-right:none!important;border-top:none!important;font-family:var(--bx-font,'Inter',sans-serif)}
#rugsnip .rg-toolbar{margin-bottom:1.1rem}
#rugsnip .rg-search input{background:rgba(17,24,41,.72)!important;border:1px solid rgba(148,163,205,.2)!important;
  color:#eef1fb!important;border-radius:11px!important}
#rugsnip .rg-search input::placeholder{color:#69719d!important}
#rugsnip .rg-search input:focus{border-color:rgba(52,211,153,.55)!important;
  box-shadow:0 0 0 3px rgba(52,211,153,.12)!important}
#rugsnip .rg-search svg{color:#69719d}
#rugsnip .rg-count{color:#8189ad}
#rugsnip .rg-tool-btn{background:rgba(17,24,41,.72)!important;border:1px solid rgba(148,163,205,.2)!important;
  color:#cdd5ec!important;border-radius:11px!important;transition:border-color .16s,color .16s,transform .12s,box-shadow .16s!important}
#rugsnip .rg-tool-btn:hover{color:#eef1fb!important;border-color:rgba(52,211,153,.5)!important;
  box-shadow:0 10px 26px -16px rgba(52,211,153,.7)}
#rugsnip .rg-tool-danger:hover{color:#fb7185!important;border-color:rgba(251,113,133,.55)!important;
  box-shadow:0 10px 26px -16px rgba(251,113,133,.7)}
#rugsnip #rugSortMenu{background:#121a2e!important;border:1px solid rgba(148,163,205,.24)!important;
  box-shadow:0 24px 54px -18px rgba(0,0,0,.9)!important;border-radius:13px!important}
#rugsnip .rug-sort-opt{color:#a7b0cc!important;border-bottom:1px solid rgba(148,163,205,.1)!important}
#rugsnip .rug-sort-opt:hover{background:rgba(52,211,153,.1)!important;color:#eef1fb!important}
#rugsnip .rug-sort-opt.active{background:rgba(52,211,153,.16)!important;color:#6ee7b7!important}
/* body.rg-dark est posé sur TOUS les comptes (dark-only) : le legacy
   rg-dark d'index.html gagne en spécificité, on le neutralise ici. */
body.rg-dark #rugsnip .rug-sort-opt:hover{background:rgba(52,211,153,.1)!important;color:#eef1fb!important}
body.rg-dark #rugsnip .rug-sort-opt.active{background:rgba(52,211,153,.16)!important;color:#6ee7b7!important}
#rugsnip .rg-datefilter input[type=datetime-local]{background:rgba(17,24,41,.72)!important;
  border:1px solid rgba(148,163,205,.2)!important;color:#cdd5ec!important;color-scheme:dark!important}
#rugsnip .rg-datefilter input[type=datetime-local]:focus{border-color:rgba(52,211,153,.55)!important}
#rugsnip #rugClearFiltersBtn{background:rgba(251,113,133,.12)!important;
  border:1px solid rgba(251,113,133,.35)!important;color:#fda4af!important}
#rugsnip #rugClearFiltersBtn:hover{background:rgba(251,113,133,.2)!important}
/* Mode Algorithme / Bot */
#rugsnip .rg-seg{background:rgba(11,17,32,.7)!important;border:1px solid rgba(148,163,205,.2)!important;
  box-shadow:none!important}
#rugsnip .rg-seg-btn{color:#a7b0cc!important}
#rugsnip .rg-seg-btn:hover:not(.active){color:#eef1fb!important}
#rugsnip .rg-seg-btn.active{background:linear-gradient(120deg,#10b981,#34d399)!important;color:#06241a!important;
  box-shadow:0 6px 18px -8px #34d399!important}
/* Boutons pleins (verrous, load more) */
#rugsnip .rg-btn-ink{background:linear-gradient(120deg,#10b981,#34d399)!important;color:#06241a!important;
  box-shadow:0 12px 30px -12px rgba(52,211,153,.8)!important}
#rugsnip .rg-btn-ink:hover{transform:translateY(-1px);box-shadow:0 16px 36px -12px rgba(52,211,153,.9)!important}
#rugsnip .rg-lock{background:rgba(17,24,41,.72)!important;border:1px solid rgba(148,163,205,.18)!important}
#rugsnip .rg-lock-icon{display:flex;justify-content:center;color:#34d399}
#rugsnip .rs-empty{color:#8189ad}
#rugsnip .rs-empty small{display:block;font-size:.72rem;opacity:.65;margin-top:.35rem}

/* ── Le feed : cards en vraie perspective ───────────────────────── */
#rugsnip .rug-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))!important;gap:1.35rem;perspective:1500px}
.bxr-card{position:relative;display:flex;flex-direction:column;border-radius:18px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out,border-color .2s;
  background:linear-gradient(168deg,rgba(52,211,153,.08),rgba(15,23,40,.94) 42%),#0f1728;
  border:1px solid rgba(148,163,205,.15);
  box-shadow:calc(var(--sx,0px)) calc(12px + var(--sy,0px)) 44px -22px rgba(0,0,0,.85)}
.bxr-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#34d399,transparent);opacity:.45;transition:opacity .2s;
  transform:translateZ(2px)}
.bxr-card:hover{border-color:rgba(52,211,153,.42)}
.bxr-card:hover::before{opacity:.9}
/* Reflet qui suit la souris */
.bxr-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--gl,0);
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(150,255,215,.14),transparent 62%);
  mix-blend-mode:screen;transform:translateZ(1px);transition:opacity .25s}
/* Couches en profondeur */
.bxr-stage{position:relative;margin:10px 10px 0;height:138px;border-radius:12px;overflow:hidden;
  transform:translateZ(26px);
  background:linear-gradient(168deg,#0e2c23 0%,#0b1a2a 92%)}
.bxr-stage::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(52,211,153,.09) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(52,211,153,.07) 27px 28px)}
.bxr-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 14%,rgba(52,211,153,.16) 0%,transparent 55%)}
.bxr-stage .rgc-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.bxr-x{position:absolute;top:19px;right:19px;z-index:3;font-family:var(--font-head);font-size:.78rem;font-weight:700;
  color:#dff7ec;background:rgba(8,14,26,.85);border:1px solid rgba(148,163,205,.22);border-radius:8px;
  padding:.24rem .55rem;font-variant-numeric:tabular-nums;backdrop-filter:blur(3px);
  transform:translateZ(44px);overflow:hidden}
.bxr-x.is-gold{background:linear-gradient(140deg,#fbd780,#f5b93f);border-color:rgba(255,225,150,.7);
  color:#241a05;box-shadow:0 4px 18px -6px rgba(245,185,63,.9)}
.bxr-x.flat{color:#8d96ba}
/* Passage de palier ×2/×5/×10 : matière + mouvement, or en dégradé */
@keyframes bxrMile{0%{transform:translateZ(44px) scale(1)}30%{transform:translateZ(44px) scale(1.28)}55%{transform:translateZ(44px) scale(.96)}100%{transform:translateZ(44px) scale(1)}}
@keyframes bxrMileSweep{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
.bxr-x.bxr-mile{animation:bxrMile .8s cubic-bezier(.34,1.56,.64,1)}
.bxr-x.bxr-mile::after{content:'';position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);
  animation:bxrMileSweep .8s ease-out .1s both}
.bxr-hide{position:absolute;top:19px;left:19px;z-index:3;width:28px;height:28px;border-radius:8px;border:none;
  background:rgba(8,14,26,.6);color:rgba(238,241,251,.55);line-height:1;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:.18s;transform:translateZ(44px)}
.bxr-card:hover .bxr-hide,.bxr-hide:focus-visible,.bxr-card:focus-within .bxr-hide{opacity:1}
.bxr-hide:hover{background:rgba(8,14,26,.9);color:#fff}
.bxr-body{padding:.9rem 1.1rem .8rem;display:flex;flex-direction:column;gap:.5rem;flex:1;transform:translateZ(14px)}
.bxr-toprow{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.bxr-sym{font-family:var(--font-head);font-size:1.1rem;font-weight:700;letter-spacing:-.015em;color:#eef1fb;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxr-when{font-size:.68rem;color:#8189ad;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.bxr-subrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.bxr-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;color:#a7b0cc}
.bxr-state i{width:6px;height:6px;border-radius:50%;background:#8189ad;flex-shrink:0}
.bxr-state.is-crit{color:#fb7185}
.bxr-state.is-crit i{background:#fb7185;box-shadow:0 0 8px #fb7185}
.bxr-state.is-up{color:#34d399}
.bxr-state.is-up i{background:#34d399;box-shadow:0 0 8px #34d399;animation:bxrPulse 1.6s ease-in-out infinite}
.bxr-ca{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.64rem;color:#8189ad}
.bxr-copy{background:transparent;border:none;padding:5px;border-radius:6px;color:#8189ad;display:inline-flex;transition:.15s}
.bxr-copy:hover{color:#eef1fb;background:rgba(148,163,205,.14)}
.bxr-copy.copied{color:#34d399}
/* Ligne ruggeurs : la donnée qui vend l'outil */
.bxr-hunters{display:flex;align-items:center;gap:.45rem;font-size:.68rem;color:#8189ad;flex-wrap:wrap}
.bxr-hunters svg{color:#fb7185;flex-shrink:0}
.bxr-hunters b{color:#cdd5ec;font-weight:700}
.bxr-type{font-family:var(--font-mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;
  color:#fda4af;background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.28);
  border-radius:5px;padding:.1rem .4rem}
.bxr-cells{display:grid;grid-template-columns:1fr 1fr 1fr .85fr;margin-top:auto;
  border-top:1px solid rgba(148,163,205,.12);padding-top:.65rem}
.bxr-cell{padding:0 .6rem;border-left:1px solid rgba(148,163,205,.1)}
.bxr-cell:first-child{padding-left:0;border-left:none}
.bxr-cell i{display:block;font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#69719d;margin-bottom:.22rem}
.bxr-cell b{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:#eef1fb;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bxr-cell b.is-dead{color:#fb7185}
.bxr-cell b.is-x{color:#34d399}
.bxr-cell b.is-x.flat{color:#a7b0cc}
.bxr-cell b.is-x.gold{background:linear-gradient(120deg,#fbd780,#f5b93f);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bxr-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border-top:1px solid rgba(148,163,205,.12);padding:.6rem 1.1rem;transform:translateZ(8px)}
.bxr-link{font-size:.74rem;font-weight:700;color:#a7b0cc;background:none;border:none;padding:.4rem 0;
  text-decoration:none;transition:color .15s;display:inline-flex;align-items:center;gap:.3rem}
.bxr-link:hover{color:#6ee7b7}
.bxr-link svg{width:11px;height:11px;flex-shrink:0}
/* Lien vers la plateforme favorite : accent marque, pas une couleur d'outil */
.bxr-link-plat{color:var(--bx-violet-hover,#a962ff)}
.bxr-link-plat:hover{color:var(--bx-violet,#9945FF)}
/* Tactile : cibles élargies, bouton masquer toujours visible */
@media(pointer:coarse){
  .bxr-copy{padding:9px}
  .bxr-hide{opacity:.9;width:32px;height:32px}
  .bxr-link{padding:.55rem 0}
}

/* ── Entrées : cascade au chargement, lock-on sur un nouveau call ── */
@keyframes bxrDeal{from{opacity:0;transform:rotateX(9deg) rotateY(-13deg) translateY(26px)}
  to{opacity:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0)}}
.bxr-boot .bxr-card{animation:bxrDeal .55s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
@keyframes bxrArrive{0%{opacity:0;transform:rotateY(-72deg) translateZ(-80px)}
  60%{opacity:1;transform:rotateY(9deg) translateZ(0)}
  100%{opacity:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
.bxr-card.bxr-new{animation:bxrArrive .7s cubic-bezier(.16,1,.3,1) both}
.bxr-card.bxr-new{border-color:rgba(52,211,153,.6);
  box-shadow:0 12px 44px -22px rgba(0,0,0,.85),0 0 46px -14px rgba(52,211,153,.7)}
/* Viseur qui se verrouille sur la card */
.bxr-lockon{position:absolute;top:10px;left:10px;right:10px;height:138px;z-index:4;display:none;
  place-items:center;pointer-events:none;transform:translateZ(38px)}
.bxr-new .bxr-lockon{display:grid;animation:bxrLockHide .01s 2.6s forwards}
@keyframes bxrLockHide{to{opacity:0;visibility:hidden}}
.bxr-lockon svg{width:74px;height:74px;color:#34d399;filter:drop-shadow(0 0 10px rgba(52,211,153,.8));
  animation:bxrLockZoom 1s cubic-bezier(.22,1,.36,1) both}
@keyframes bxrLockZoom{0%{opacity:0;transform:scale(2.4) rotate(-70deg)}
  55%{opacity:1;transform:scale(.94) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.bxr-lockon::after{content:'';position:absolute;width:86px;height:86px;border-radius:50%;
  border:2px solid rgba(52,211,153,.8);opacity:0;animation:bxrLockRing .7s ease-out 1s}
@keyframes bxrLockRing{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.bxr-lockon b{position:absolute;bottom:10px;font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.22em;color:#6ee7b7;opacity:0;animation:bxrLockTxt .4s ease-out .9s both}
@keyframes bxrLockTxt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Flash de confirmation sur la scène */
.bxr-new .bxr-stage{animation:bxrFlash 1.2s ease-out .95s}
@keyframes bxrFlash{0%{box-shadow:inset 0 0 0 200px rgba(52,211,153,0)}
  12%{box-shadow:inset 0 0 0 200px rgba(52,211,153,.28)}100%{box-shadow:inset 0 0 0 200px rgba(52,211,153,0)}}
/* Changement d'état (Détecté → Rugué…) : demi-flip */
@keyframes bxrStateFlip{0%{transform:rotateX(0)}45%{transform:rotateX(88deg)}55%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.bxr-card.bxr-flip .bxr-body{animation:bxrStateFlip .55s ease-in-out}

/* ── États réseau : squelettes / erreur ─────────────────────────── */
@keyframes bxrShimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.bxr-sk{border-radius:18px;border:1px solid rgba(148,163,205,.12);overflow:hidden;
  background:rgba(15,23,40,.8);min-height:300px;display:flex;flex-direction:column;padding:10px}
.bxr-sk i{display:block;border-radius:10px;
  background:linear-gradient(100deg,rgba(148,163,205,.07) 40%,rgba(148,163,205,.16) 50%,rgba(148,163,205,.07) 60%);
  background-size:200% 100%;animation:bxrShimmer 1.6s linear infinite}
.bxr-sk i:nth-child(1){height:138px;margin-bottom:.9rem}
.bxr-sk i:nth-child(2){height:16px;width:55%;margin:0 6px .6rem}
.bxr-sk i:nth-child(3){height:11px;width:80%;margin:0 6px .55rem}
.bxr-sk i:nth-child(4){height:11px;width:65%;margin:0 6px auto}
.bxr-sk i:nth-child(5){height:34px;margin:12px 6px 4px}
.bxr-err{grid-column:1/-1;max-width:420px;margin:2.5rem auto;text-align:center;
  background:rgba(17,24,41,.72);border:1px solid rgba(251,113,133,.3);border-radius:18px;padding:2.2rem 2rem}
.bxr-err svg{color:#fb7185;margin-bottom:.9rem}
.bxr-err h3{font-family:var(--font-head);font-size:1.02rem;font-weight:700;color:#eef1fb;margin:0 0 .4rem}
.bxr-err p{font-size:.8rem;color:#a7b0cc;line-height:1.55;margin:0 0 1.2rem}
.bxr-retry{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(120deg,#10b981,#34d399);
  color:#06241a;border:none;border-radius:100px;padding:.62rem 1.5rem;font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.82rem;font-weight:700;box-shadow:0 12px 30px -12px rgba(52,211,153,.8);transition:.18s}
.bxr-retry:hover{transform:translateY(-1px);box-shadow:0 16px 36px -12px rgba(52,211,153,.9)}

/* ── Voile Premium : l'aperçu reste spectaculaire, le CTA est net ── */
#rgModeAlgo{position:relative}
.bxr-veil{position:absolute;inset:-6px;z-index:130;display:none;align-items:center;justify-content:center;
  border-radius:20px;padding:2rem;
  background:linear-gradient(180deg,rgba(8,12,22,.14),rgba(8,12,22,.62) 34%,rgba(8,12,22,.9) 72%);
  backdrop-filter:blur(4px)}
.bxr-veil.on{display:flex}
.bxr-veil-box{max-width:430px;text-align:center;background:rgba(17,24,41,.9);
  border:1px solid rgba(52,211,153,.3);border-radius:22px;padding:2.2rem 2.2rem 2rem;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 70px -30px rgba(52,211,153,.6)}
.bxr-veil-ico{width:52px;height:52px;margin:0 auto 1rem;border-radius:15px;display:flex;align-items:center;
  justify-content:center;color:#34d399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35);
  box-shadow:0 0 28px -8px rgba(52,211,153,.7)}
.bxr-veil-box h3{font-family:var(--font-head);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:#eef1fb;margin:0 0 .5rem}
.bxr-veil-box p{font-size:.84rem;color:#a7b0cc;line-height:1.6;margin:0 0 1.4rem}
.bxr-veil-box p b{color:#f5b93f;font-weight:700}
.bxr-veil-cta{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(120deg,#10b981,#34d399);
  color:#06241a;border:none;border-radius:100px;padding:.78rem 1.9rem;font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.9rem;font-weight:700;box-shadow:0 16px 40px -14px rgba(52,211,153,.9);transition:.18s}
.bxr-veil-cta:hover{transform:translateY(-2px);box-shadow:0 22px 48px -14px rgba(52,211,153,1)}
.bxr-veil-sub{display:block;margin-top:.8rem;font-size:.7rem;color:#69719d}
.bxr-demo-pill{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:41;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;color:#6ee7b7;
  background:rgba(8,14,26,.85);border:1px solid rgba(52,211,153,.35);border-radius:999px;padding:.3rem .8rem}

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:1180px){
  .bxr-hero{grid-template-columns:auto 1fr}
  .bxr-stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  #rugsnip .rugsnip-section{padding:4.6rem 1.2rem 4rem}
  .bxr-hero{grid-template-columns:1fr;gap:1.4rem;padding:1.4rem 1.3rem}
  .bxr-scope{margin:0 auto;width:190px;height:168px}
  .bxr-title{font-size:1.9rem}
  .bxr-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .bxr-title{font-size:1.65rem}
  .bxr-stat b{font-size:1.2rem}
  #rugsnip .rug-grid{grid-template-columns:1fr!important}
  .bxr-micro{gap:.9rem}
  .bxr-veil{inset:0;padding:1rem}
  .bxr-veil-box{padding:1.6rem 1.3rem 1.5rem}
}

/* ── Mouvement réduit : tout se fige, tout reste lisible ────────── */
@media (prefers-reduced-motion:reduce){
  .bxr-scope-tilt{transition:none}
  .bxr-sweep,.bxr-blip,.bxr-chase i,.bxr-state.is-up i{animation:none}
  .bxr-blip{opacity:.8}
  .bxr-card,.bxr-boot .bxr-card,.bxr-card.bxr-new{animation:none;transform:none;transition:none}
  #rugsnip .rug-grid{perspective:none}
  .bxr-stage,.bxr-x,.bxr-hide,.bxr-lockon,.bxr-body,.bxr-foot{transform:none}
  .bxr-card .bxr-lockon{display:none}
  .bxr-new .bxr-stage{animation:none}
  .bxr-card.bxr-flip .bxr-body{animation:none}
  .bxr-x.bxr-mile{animation:none}
  .bxr-x.bxr-mile::after{animation:none;content:none}
  .bxr-sk i{animation:none}
  .bxr-glare{opacity:0}
}

/* ═══ 12bis. RUG SNIPING — MODE CLAIR ═════════════════════════════
   Le poste de tir sur papier. L'identité reste la même : émeraude =
   l'outil, or = la récompense, rose = la donnée rug — mais les trois
   descendent en encres profondes pour tenir sur blanc, et l'optique
   nocturne (slate #0b1120) devient un plan clair. Les valeurs sombres
   codées en dur du §12 sont reprises une à une. */

body.bx-light.view-rugsnip{background:#f2f4f8!important}
body.bx-light section#rugsnip{
  --rg-paper:#f2f4f8!important;
  --rg-card:#ffffff!important;
  --rg-ink:#131a26!important;
  --rg-ink2:#48536b!important;
  --rg-mute:#6a7488!important;
  --rg-line:rgba(19,26,38,.12)!important;
  --rg-line2:rgba(19,26,38,.2)!important;
  --rg-green:#0a7d55!important;
  --rg-red:#c2334f!important;
  --rg-amber:#96700f!important;
  --rg-shd1:rgba(19,26,38,.08)!important;
  --rg-shd2:rgba(19,26,38,.14)!important;
  color:var(--rg-ink)!important;
  background:
    radial-gradient(58% 34% at 80% -4%,rgba(10,125,85,.07),transparent 60%),
    radial-gradient(46% 30% at 4% 8%,rgba(124,58,237,.05),transparent 55%),
    #f2f4f8!important;
}
/* Nav : la page suit le thème, elle n'est plus dark-only */
body.bx-light.view-rugsnip #mainNav{background:rgba(250,251,254,.92)!important;
  border-bottom:1px solid rgba(19,26,38,.12)!important}
body.bx-light.view-rugsnip #mainNav .logo-text{color:#12162b!important}

/* ── Hero « poste de tir » ── */
body.bx-light .bxr-hero{
  background:linear-gradient(150deg,rgba(10,125,85,.07),#fff 46%,rgba(150,112,15,.04)),#fff;
  border-color:rgba(19,26,38,.14);
  box-shadow:0 24px 60px -34px rgba(19,26,38,.28),inset 0 1px 0 #fff}
body.bx-light .bxr-hero::before{background:radial-gradient(70% 90% at 12% 10%,rgba(10,125,85,.06),transparent 55%)}
body.bx-light .bxr-hero.bxr-demo::after{color:#0a6b49;background:rgba(255,255,255,.92);border-color:rgba(10,125,85,.35)}

/* ── Radar ── */
body.bx-light .bxr-radar-sweep,
body.bx-light .bxr-radar::after{background:radial-gradient(circle,rgba(10,125,85,.12) 0%,rgba(214,232,224,.5) 42%,rgba(19,26,38,.06) 68%,transparent 72%)}

/* ── Panneaux, cartes, contrôles ── */
body.bx-light .bxr-stat,
body.bx-light .bxr-panel{background:#fff;border-color:rgba(19,26,38,.12)}
body.bx-light .bxr-stat.bxr-gold{background:linear-gradient(160deg,rgba(150,112,15,.08),#fff 55%)}
body.bx-light #rugsnip .rg-search input,
body.bx-light #rugsnip .rg-tool-btn,
body.bx-light #rugsnip .rg-datefilter input[type=datetime-local],
body.bx-light #rugsnip .rg-lock{background:#fff!important;border-color:rgba(19,26,38,.16)!important;color:var(--rg-ink)!important}
body.bx-light #rugsnip .rg-seg{background:#e9ecf2!important;border-color:rgba(19,26,38,.14)!important}
body.bx-light .bxr-tag{color:#0a6b49;background:rgba(255,255,255,.9);border-color:rgba(19,26,38,.16)}
body.bx-light .bxr-hide{background:rgba(19,26,38,.06);color:#5a6377}
body.bx-light .bxr-hide:hover{background:rgba(19,26,38,.12);color:#131a26}

/* ── Vitrine verrouillée (démo) ── */
body.bx-light .bxr-locked{background:#fff;border-color:rgba(194,51,79,.28)}
body.bx-light .bxr-veil{background:linear-gradient(180deg,rgba(242,244,248,.15),rgba(242,244,248,.7) 34%,rgba(242,244,248,.94) 72%)}
body.bx-light .bxr-veil-box{background:rgba(255,255,255,.96);border-color:rgba(19,26,38,.14);
  box-shadow:0 24px 60px -30px rgba(19,26,38,.3)}

/* Encres claires codees en dur du §12 → encres profondes */
body.bx-light .bxr-hero.bxr-demo::after,
body.bx-light .bxr-eyebrow,
body.bx-light .bxr-stat em,
body.bx-light #rugsnip .rug-sort-opt.active,
body.bx-light .bxr-link:hover,
body.bx-light .bxr-lockon b,
body.bx-light .bxr-demo-pill{color:#0a6b49}
body.bx-light .bxr-title,
body.bx-light .bxr-watch b,
body.bx-light .bxr-stat b,
body.bx-light #rugsnip .rg-search input,
body.bx-light #rugsnip .rg-tool-btn:hover,
body.bx-light #rugsnip .rug-sort-opt:hover,
body.bx-light #rugsnip .rg-seg-btn:hover:not(.active),
body.bx-light .bxr-sym,
body.bx-light .bxr-copy:hover,
body.bx-light .bxr-cell b,
body.bx-light .bxr-err h3,
body.bx-light .bxr-veil-box h3{color:#131a26}
body.bx-light .bxr-sub,
body.bx-light .bxr-watch,
body.bx-light #rugsnip .rug-sort-opt,
body.bx-light #rugsnip .rg-seg-btn,
body.bx-light .bxr-state,
body.bx-light .bxr-cell b.is-x.flat,
body.bx-light .bxr-link,
body.bx-light .bxr-err p,
body.bx-light .bxr-veil-box p{color:#48536b}
body.bx-light .bxr-updated,
body.bx-light .bxr-micro span,
body.bx-light .bxr-stat b small,
body.bx-light .bxr-stat i,
body.bx-light #rugsnip .rg-count,
body.bx-light #rugsnip .rs-empty,
body.bx-light .bxr-when,
body.bx-light .bxr-ca,
body.bx-light .bxr-copy,
body.bx-light .bxr-hunters{color:#6a7488}
body.bx-light .bxr-x{color:#0a6b49}
/* Panneau d'erreur + « en chasse » : surfaces sombres restantes */
body.bx-light .bxr-err{background:#fff;border-color:rgba(194,51,79,.28)}
body.bx-light .bxr-chase{background:rgba(10,125,85,.08);border-color:rgba(10,125,85,.28);color:#0a6b49}
body.bx-light .bxr-chase i{box-shadow:none;background:#0a7d55}
body.bx-light .bxr-updated.err{color:#c2334f}
/* Cartes du feed : la surface passe au papier (les encres foncées
   ci-dessus s'y posent), le filet émeraude et l'or de récompense
   restent — c'est la donnée. */
body.bx-light .bxr-card{
  background:linear-gradient(168deg,rgba(10,125,85,.06),#fff 42%),#fff;
  border-color:rgba(19,26,38,.13);
  box-shadow:calc(var(--sx,0px)) calc(10px + var(--sy,0px)) 36px -24px rgba(19,26,38,.4)}
body.bx-light .bxr-card:hover{border-color:rgba(10,125,85,.4)}
body.bx-light .bxr-card::before{background:linear-gradient(90deg,transparent,#0a7d55,transparent)}
body.bx-light .bxr-card.bxr-new{border-color:rgba(10,125,85,.55)}
body.bx-light .bxr-stage{background:linear-gradient(168deg,#dff0e8 0%,#e8eef6 92%)}
body.bx-light .bxr-stage::after{background:radial-gradient(ellipse at 30% 14%,rgba(10,125,85,.12) 0%,transparent 55%)}
body.bx-light .bxr-glare{background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(10,125,85,.1),transparent 62%)}
body.bx-light .bxr-x{background:rgba(255,255,255,.92);border-color:rgba(19,26,38,.18)}
body.bx-light #rugsnip .rg-seg-btn{color:#48536b!important}
body.bx-light #rugsnip .rg-seg-btn.active{color:#fff!important;background:#0a7d55!important}

/* ═══ 13. PROFIL v3 — « La fiche joueur » ═════════════════════════
   Refonte totale. Une identité en haut, trois onglets en dessous
   (Général · Cards · Gamification), et rien d'autre à l'écran.
   Règles tenues : le noir est le produit, le violet est la marque,
   l'or ne sert QU'à la récompense. Aucune couleur décorative, aucun
   glow, aucun dégradé de texte. Tokens --bx-* exclusivement, donc
   le thème clair suit sans une ligne de plus.
   ═════════════════════════════════════════════════════════════════ */
.pf3{max-width:1080px;margin:0 auto;font-family:var(--bx-font);color:var(--bx-text);
  -webkit-font-smoothing:antialiased}
.pf3 *{box-sizing:border-box}
.pf3 button{font-family:inherit}
@keyframes pf3In{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pf3Bar{from{transform:scaleX(0)}}
.pf3-anim{animation:pf3In .42s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}

/* ── Barre de retour ─────────────────────────────────────────────── */
.pf3-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.pf3-back{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;padding:.3rem 0;
  color:var(--bx-text-3);font-size:.78rem;font-weight:600;cursor:pointer;transition:color .15s}
.pf3-back:hover{color:var(--bx-text)}
.pf3-back svg{transition:transform .18s cubic-bezier(.16,1,.3,1)}
.pf3-back:hover svg{transform:translateX(-3px)}

/* ── Carte d'identité ────────────────────────────────────────────── */
.pf3-id{position:relative;background:var(--bx-surface);border:1px solid var(--bx-line);
  border-radius:20px;overflow:hidden}
.pf3-cover{position:relative;height:116px;background:var(--cv,#16141f)}
.pf3-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bx-surface) 78%,transparent))}
.pf3-cover-edit{position:absolute;right:.8rem;top:.8rem;z-index:2;display:inline-flex;align-items:center;
  gap:.35rem;padding:.36rem .7rem;border-radius:8px;cursor:pointer;
  background:rgba(8,8,12,.5);border:1px solid rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(10px);font-size:.7rem;font-weight:600;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,background .15s}
.pf3-id:hover .pf3-cover-edit,.pf3-cover-edit:focus-visible{opacity:1;transform:none}
.pf3-cover-edit:hover{background:rgba(8,8,12,.72)}
@media(hover:none){.pf3-cover-edit{opacity:1;transform:none}}

.pf3-idmain{position:relative;display:flex;align-items:flex-end;gap:1.15rem;
  padding:0 1.5rem 1.25rem;flex-wrap:wrap}
.pf3-avawrap{position:relative;margin-top:-40px;flex:none}
.pf3-ava{width:92px;height:92px;border-radius:26px;overflow:hidden;display:grid;place-items:center;
  background:var(--bx-raised);border:3px solid var(--bx-surface);
  font-size:2rem;font-weight:800;color:var(--bx-text);letter-spacing:-.02em}
.pf3-ava img{width:100%;height:100%;object-fit:cover}
.pf3-ava-edit{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--bx-raised);border:2px solid var(--bx-surface);color:var(--bx-text-2);
  transition:color .15s,background .15s,transform .15s}
.pf3-ava-edit:hover{color:#fff;background:var(--bx-violet);transform:scale(1.08)}

.pf3-who{flex:1;min-width:210px;padding-bottom:.15rem}
.pf3-nameline{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.pf3-name{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--bx-text)}
.pf3-handle{font-family:var(--bx-mono);font-size:.76rem;color:var(--bx-text-3);
  background:none;border:none;padding:.15rem .3rem;border-radius:6px;cursor:pointer;
  transition:color .15s,background .15s}
.pf3-handle:hover{color:var(--bx-text-2);background:rgba(127,127,150,.1)}
.pf3-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--bx-line-strong);color:var(--bx-text-3)}
.pf3-chip.paid{border-color:var(--bx-violet-line);color:#c9a2ff;background:var(--bx-violet-soft)}
body.bx-light .pf3-chip.paid{color:var(--bx-violet)}
.pf3-chip svg{width:11px;height:11px}
.pf3-bio{font-size:.82rem;line-height:1.5;color:var(--bx-text-2);margin-top:.4rem;max-width:52ch}
.pf3-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.45rem;
  font-size:.75rem;color:var(--bx-text-3)}
.pf3-meta b{color:var(--bx-text-2);font-weight:600;font-variant-numeric:tabular-nums}
.pf3-meta .sep{opacity:.4}
.pf3-meta-lnk{cursor:pointer;transition:color .15s}
.pf3-meta-lnk:hover{color:var(--bx-text)}

.pf3-acts{display:flex;gap:.45rem;flex-wrap:wrap;padding-bottom:.15rem}
.pf3-btn{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  padding:.55rem .9rem;border-radius:10px;font-size:.78rem;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  background:rgba(127,127,150,.08);border:1px solid var(--bx-line);color:var(--bx-text-2);
  transition:background .15s,border-color .15s,color .15s,transform .12s}
.pf3-btn:hover{background:rgba(127,127,150,.14);border-color:var(--bx-line-strong);color:var(--bx-text)}
.pf3-btn:active{transform:translateY(1px)}
.pf3-btn:focus-visible{outline:2px solid var(--bx-violet);outline-offset:2px}
.pf3-btn svg{flex:none;opacity:.85}
.pf3-btn-primary{background:var(--bx-violet);border-color:transparent;color:#fff}
.pf3-btn-primary:hover{background:var(--bx-violet-hover);border-color:transparent;color:#fff}
.pf3-btn-primary svg{opacity:1}
.pf3-btn-ico{padding:.55rem;width:34px}
.pf3-btn.ok{color:var(--bx-up);border-color:color-mix(in srgb,var(--bx-up) 40%,transparent)}

/* ── Bandeau de rang, en pied de la carte d'identité ─────────────── */
.pf3-rank{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;
  border-top:1px solid var(--bx-line);background:rgba(127,127,150,.03);flex-wrap:wrap}
.pf3-rank-badge{display:flex;align-items:center;gap:.6rem;flex:none}
.pf3-rank-name{font-size:.9rem;font-weight:700;letter-spacing:-.01em;color:var(--bx-text);line-height:1.15}
.pf3-rank-xp{font-size:.74rem;color:var(--bx-text-3);font-variant-numeric:tabular-nums}
.pf3-rank-track{position:relative;flex:1;min-width:130px;height:6px;border-radius:99px;
  background:rgba(127,127,150,.16);overflow:hidden}
.pf3-rank-fill{position:absolute;inset:0;border-radius:99px;background:var(--bx-violet);
  transform:scaleX(var(--p,0));transform-origin:left;
  animation:pf3Bar .9s cubic-bezier(.16,1,.3,1)}
.pf3-rank-next{flex:none;text-align:right;font-size:.72rem;color:var(--bx-text-3);line-height:1.35}
.pf3-rank-next b{display:block;font-size:.8rem;font-weight:700;color:var(--bx-text-2)}
.pf3-rank-next .n{font-variant-numeric:tabular-nums;color:var(--bx-text-2)}
@media(max-width:620px){.pf3-rank-next{text-align:left}}

/* ── Onglets ─────────────────────────────────────────────────────── */
.pf3-tabsrow{position:sticky;top:60px;z-index:6;margin:1.15rem 0;
  padding:.4rem 0;background:var(--bx-bg)}
.pf3-tabs{display:inline-flex;gap:.2rem;padding:4px;border-radius:12px;
  background:var(--bx-raised);border:1px solid var(--bx-line)}
.pf3-tab{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:9px;
  border:none;background:none;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--bx-text-3);
  transition:color .15s,background .15s}
.pf3-tab svg{width:14px;height:14px;opacity:.8}
.pf3-tab:hover{color:var(--bx-text)}
.pf3-tab.on{background:var(--bx-violet);color:#fff}
.pf3-tab.on svg{opacity:1}
.pf3-tab-n{font-family:var(--bx-mono);font-size:.66rem;opacity:.65}
@media(max-width:520px){
  .pf3-tabs{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
  .pf3-tab{flex:1;justify-content:center;padding:.5rem .6rem}
  .pf3-tab-n{display:none}
}

/* ── Blocs génériques ────────────────────────────────────────────── */
.pf3-panel{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:16px;
  overflow:hidden}
.pf3-panel-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--bx-line)}
.pf3-panel-t{font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:var(--bx-text)}
.pf3-panel-c{font-family:var(--bx-mono);font-size:.74rem;color:var(--bx-text-3)}
.pf3-panel-lnk{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;
  cursor:pointer;font-size:.74rem;font-weight:600;color:var(--bx-text-3);transition:color .15s}
.pf3-panel-lnk:hover{color:#c9a2ff}
body.bx-light .pf3-panel-lnk:hover{color:var(--bx-violet)}
.pf3-panel-lnk svg{width:13px;height:13px;transition:transform .18s}
.pf3-panel-lnk:hover svg{transform:translateX(2px)}
.pf3-panel-bd{padding:1.1rem 1.15rem}
.pf3-panel-bd.flush{padding:0}
.pf3-empty{padding:1.6rem 1.15rem;text-align:center;font-size:.8rem;color:var(--bx-text-3)}
.pf3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:start}
@media(max-width:840px){.pf3-grid2{grid-template-columns:1fr}}
.pf3-stack{display:flex;flex-direction:column;gap:.85rem}

/* ── KPI ─────────────────────────────────────────────────────────── */
.pf3-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:.85rem}
@media(max-width:760px){.pf3-kpis{grid-template-columns:repeat(2,1fr)}}
.pf3-kpi{position:relative;background:var(--bx-surface);border:1px solid var(--bx-line);
  border-radius:14px;padding:.95rem 1.05rem 1.05rem;overflow:hidden;
  transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.pf3-kpi:hover{border-color:var(--bx-line-strong);transform:translateY(-2px)}
button.pf3-kpi{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit}
button.pf3-kpi:hover{border-color:var(--bx-violet-line)}
button.pf3-kpi:active{transform:translateY(0)}
/* Un anneau de focus visible partout : au clavier, la page reste jouable. */
.pf3-kpi:focus-visible,.pf3-tab:focus-visible,.pf3-todo-i:focus-visible,.pf3-mod:focus-visible,
.pf3-panel-lnk:focus-visible,.pf3-handle:focus-visible,.pf3-back:focus-visible,
.st3-navbtn:focus-visible,.st3-segb:focus-visible,.st3-plat:focus-visible,.st3-av:focus-visible,
.pf3-cover-opt:focus-visible{outline:2px solid var(--bx-violet);outline-offset:2px}
.pf3-kpi-lbl{display:flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;
  color:var(--bx-text-3)}
.pf3-kpi-lbl svg{width:12px;height:12px}
.pf3-kpi-val{display:block;font-size:1.65rem;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--bx-text);margin-top:.55rem}
.pf3-kpi-val small{font-size:.85rem;font-weight:600;color:var(--bx-text-3);letter-spacing:-.01em}
.pf3-kpi-bar{display:block;height:3px;border-radius:2px;background:rgba(127,127,150,.16);margin-top:.7rem;overflow:hidden}
.pf3-kpi-bar i{display:block;height:100%;border-radius:2px;background:var(--bx-violet);
  transform-origin:left;animation:pf3Bar .9s cubic-bezier(.16,1,.3,1)}
.pf3-kpi-bar.gold i{background:var(--bx-gold)}
.pf3-kpi-sub{display:block;font-size:.73rem;color:var(--bx-text-3);margin-top:.5rem;font-variant-numeric:tabular-nums}

/* ── Liste d'actions rapides ─────────────────────────────────────── */
.pf3-todo{display:flex;flex-direction:column}
.pf3-todo-i{display:grid;grid-template-columns:30px 1fr auto;gap:.8rem;align-items:center;
  width:100%;text-align:left;padding:.8rem 1.15rem;border:none;border-top:1px solid var(--bx-line);
  background:none;cursor:pointer;transition:background .15s}
.pf3-todo-i:first-child{border-top:none}
.pf3-todo-i:hover{background:rgba(127,127,150,.05)}
.pf3-todo-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(127,127,150,.09);color:var(--bx-text-2)}
.pf3-todo-i:hover .pf3-todo-ico{background:var(--bx-violet-soft);color:#c9a2ff}
body.bx-light .pf3-todo-i:hover .pf3-todo-ico{color:var(--bx-violet)}
.pf3-todo-txt{display:block;min-width:0}
.pf3-todo-t{display:block;font-size:.82rem;font-weight:600;color:var(--bx-text);line-height:1.3}
.pf3-todo-s{display:block;font-size:.74rem;color:var(--bx-text-3);margin-top:.12rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf3-todo-x{font-family:var(--bx-mono);font-size:.73rem;color:var(--bx-text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pf3-todo-i:hover .pf3-todo-x{color:#c9a2ff}
body.bx-light .pf3-todo-i:hover .pf3-todo-x{color:var(--bx-violet)}
.pf3-todo-i.done .pf3-todo-t{color:var(--bx-text-3)}
.pf3-todo-i.done .pf3-todo-ico{color:var(--bx-up);background:var(--bx-up-soft)}

/* ── Outils du plan ──────────────────────────────────────────────── */
.pf3-tools{display:flex;flex-direction:column;gap:.4rem}
.pf3-tool{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:9px;
  font-size:.78rem;font-weight:600;color:var(--bx-text-2);border:1px solid var(--bx-line)}
.pf3-tool svg{flex:none;width:14px;height:14px}
.pf3-tool.on{color:var(--bx-text)}
.pf3-tool.on svg{color:var(--bx-up)}
.pf3-tool.off{color:var(--bx-text-3);border-style:dashed}

/* ── Échelle des rangs (gamification) ────────────────────────────── */
.pf3-ladder{display:flex;flex-direction:column}
.pf3-rung{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:.9rem;
  align-items:center;padding:.72rem 1.15rem;border-top:1px solid var(--bx-line)}
.pf3-rung:first-child{border-top:none}
.pf3-rung-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(127,127,150,.07);border:1px solid var(--bx-line)}
.pf3-rung.lock .pf3-rung-ico .bxrank{filter:grayscale(1);opacity:.3}
.pf3-rung.lock .pf3-rung-n{color:var(--bx-text-3)}
.pf3-rung.now{background:var(--bx-violet-soft)}
.pf3-rung.now::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--bx-violet)}
.pf3-rung-txt{display:block;min-width:0}
.pf3-rung-n{display:block;font-size:.85rem;font-weight:700;color:var(--bx-text);line-height:1.25}
.pf3-rung-s{display:block;font-size:.73rem;color:var(--bx-text-3);font-variant-numeric:tabular-nums;margin-top:.1rem}
.pf3-rung-r{text-align:right;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--bx-text-3)}
.pf3-rung.done .pf3-rung-r{color:var(--bx-up)}
.pf3-rung.now .pf3-rung-r{color:#c9a2ff;font-weight:700}
body.bx-light .pf3-rung.now .pf3-rung-r{color:var(--bx-violet)}
.pf3-rung-mini{height:4px;border-radius:2px;background:rgba(127,127,150,.18);
  margin-top:.45rem;overflow:hidden;max-width:260px}
.pf3-rung-mini i{display:block;height:100%;background:var(--bx-violet);border-radius:2px;
  transform-origin:left;animation:pf3Bar .9s cubic-bezier(.16,1,.3,1)}

/* ── Badges ──────────────────────────────────────────────────────
   Les lignes plates (.pf3-bdg) sont supprimées : une liste ne récompense
   rien. Le panneau accueille maintenant la vitrine du §15
   (.bx-bdgcat / .bx-bdggrid / .bx-bdg). */

/* ── Progression Academy ─────────────────────────────────────────── */
.pf3-mods{display:flex;flex-direction:column}
.pf3-mod{display:grid;grid-template-columns:1fr 130px 62px;gap:.9rem;align-items:center;
  padding:.65rem 1.15rem;border-top:1px solid var(--bx-line);cursor:pointer;
  border-left:none;border-right:none;border-bottom:none;background:none;text-align:left;
  transition:background .15s;font-family:inherit;width:100%}
.pf3-mod:first-child{border-top:none}
.pf3-mod:hover{background:rgba(127,127,150,.05)}
.pf3-mod-n{font-size:.79rem;font-weight:600;color:var(--bx-text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pf3-mod-bar{height:4px;border-radius:2px;background:rgba(127,127,150,.16);overflow:hidden}
.pf3-mod-bar i{display:block;height:100%;border-radius:2px;background:var(--bx-violet);
  transform-origin:left;animation:pf3Bar .9s cubic-bezier(.16,1,.3,1)}
.pf3-mod-bar.full i{background:var(--bx-up)}
.pf3-mod-p{text-align:right;font-family:var(--bx-mono);font-size:.74rem;color:var(--bx-text-3);
  font-variant-numeric:tabular-nums}
@media(max-width:560px){.pf3-mod{grid-template-columns:1fr 70px}.pf3-mod-bar{display:none}}

/* ── Onglet Cards ────────────────────────────────────────────────── */
.pf3-pub{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:1.15rem;align-items:center;
  padding:1.15rem}
@media(max-width:700px){.pf3-pub{grid-template-columns:1fr}}
.pf3-pub canvas{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--bx-line)}
.pf3-pub-t{font-size:.95rem;font-weight:700;color:var(--bx-text)}
.pf3-pub-s{font-size:.75rem;color:var(--bx-text-3);margin-top:.25rem;font-variant-numeric:tabular-nums}
.pf3-pub-a{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.pf3-ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.7rem;padding:1.15rem}
.pf3-ctile{position:relative;border-radius:14px;border:1px solid var(--bx-line);overflow:hidden;
  background:rgba(127,127,150,.03);transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.pf3-ctile:hover{border-color:var(--bx-line-strong);transform:translateY(-3px)}
.pf3-ctile-img{aspect-ratio:1/1;background-size:cover;background-position:center;
  background-color:var(--bx-inset)}
.pf3-ctile.locked .pf3-ctile-img{filter:grayscale(1) brightness(.42)}
.pf3-ctile.soon .pf3-ctile-img{display:grid;place-items:center;color:var(--bx-text-3);
  background-image:repeating-linear-gradient(45deg,rgba(127,127,150,.05) 0 8px,transparent 8px 16px)}
.pf3-ctile-b{padding:.6rem .7rem .7rem}
.pf3-ctile-n{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:700;color:var(--bx-text)}
.pf3-ctile-c{font-size:.72rem;color:var(--bx-text-3);margin-top:.18rem;line-height:1.4}
.pf3-ctile-tag{position:absolute;top:.55rem;left:.55rem;padding:.16rem .45rem;border-radius:6px;
  font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(8,8,12,.62);border:1px solid rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.pf3-ctile-tag.own{background:var(--bx-violet);border-color:transparent}

/* ── Bannières (sélecteur, réutilisé dans les paramètres) ────────── */
.pf3-covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.55rem}
.pf3-cover-opt{height:52px;border-radius:10px;cursor:pointer;border:1px solid var(--bx-line);
  position:relative;transition:transform .15s,border-color .15s}
.pf3-cover-opt:hover{transform:translateY(-2px);border-color:var(--bx-line-strong)}
.pf3-cover-opt.sel{border-color:var(--bx-violet);box-shadow:0 0 0 2px var(--bx-violet-soft)}
.pf3-cover-opt.sel::after{content:'';position:absolute;right:6px;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--bx-violet)}

@media (prefers-reduced-motion:reduce){
  .pf3-anim,.st3-panel{animation:none}
  .pf3-rank-fill,.pf3-kpi-bar i,.pf3-mod-bar i,.pf3-rung-mini i{animation:none}
  .pf3-kpi:hover,.pf3-ctile:hover,.st3-plat:hover{transform:none}
}

/* ═══ 14. PARAMÈTRES v3 ═══════════════════════════════════════════
   Même grammaire que le profil : une colonne de navigation groupée,
   un panneau qui ne montre qu'une chose à la fois, et un retour
   visible sur chaque action (le bouton confirme lui-même).
   ═════════════════════════════════════════════════════════════════ */
.st3{max-width:1080px;margin:0 auto;font-family:var(--bx-font);color:var(--bx-text)}
.st3 *{box-sizing:border-box}
.st3 button{font-family:inherit}
.st3-hd{margin:0 0 1.3rem}
.st3-h1{font-size:1.6rem;font-weight:800;letter-spacing:-.035em;color:var(--bx-text);line-height:1.1}
.st3-sub{font-size:.8rem;color:var(--bx-text-3);margin-top:.3rem}
.st3-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:1.1rem;align-items:start}
@media(max-width:860px){.st3-layout{grid-template-columns:1fr}}
.st3-nav{position:sticky;top:78px;display:flex;flex-direction:column;gap:.15rem;
  background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:14px;padding:.5rem}
@media(max-width:860px){
  .st3-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:.35rem}
  .st3-navgrp{display:none}
}
.st3-navgrp{padding:.75rem .7rem .3rem;font-size:.72rem;font-weight:600;color:var(--bx-text-3)}
.st3-navgrp:first-child{padding-top:.35rem}
.st3-navbtn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border-radius:9px;
  border:none;background:none;cursor:pointer;text-align:left;white-space:nowrap;
  font-size:.81rem;font-weight:600;color:var(--bx-text-3);
  transition:background .15s,color .15s}
.st3-navbtn svg{flex:none;width:15px;height:15px;opacity:.75}
.st3-navbtn:hover{background:rgba(127,127,150,.07);color:var(--bx-text)}
.st3-navbtn.on{background:var(--bx-violet-soft);color:var(--bx-text)}
.st3-navbtn.on svg{color:var(--bx-violet);opacity:1}

.st3-panel{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:16px;
  overflow:hidden;animation:pf3In .32s cubic-bezier(.16,1,.3,1) both}
.st3-phd{padding:1.15rem 1.35rem;border-bottom:1px solid var(--bx-line)}
.st3-pt{font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--bx-text)}
.st3-ps{font-size:.76rem;color:var(--bx-text-3);margin-top:.22rem;max-width:62ch;line-height:1.5}
.st3-sec{padding:1.15rem 1.35rem;border-top:1px solid var(--bx-line)}
.st3-sec:first-of-type{border-top:none}
.st3-sect{font-size:.82rem;font-weight:700;color:var(--bx-text-2);margin-bottom:.9rem}
.st3-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;flex-wrap:wrap}
.st3-row+.st3-row{border-top:1px solid var(--bx-line)}
.st3-row:first-child{padding-top:0}
.st3-rl{font-size:.83rem;font-weight:600;color:var(--bx-text)}
.st3-rs{font-size:.72rem;color:var(--bx-text-3);margin-top:.15rem;max-width:46ch;line-height:1.45}
.st3-rv{font-size:.8rem;color:var(--bx-text-2);font-weight:600}
.st3-field{margin-bottom:.85rem}
.st3-field:last-child{margin-bottom:0}
.st3-lbl{display:block;font-size:.75rem;font-weight:600;color:var(--bx-text-3);margin-bottom:.4rem}
.st3-input{width:100%;padding:.62rem .8rem;border-radius:10px;font-family:inherit;font-size:.84rem;
  color:var(--bx-text);background:var(--bx-inset);border:1px solid var(--bx-line);outline:none;
  transition:border-color .15s,box-shadow .15s}
.st3-input::placeholder{color:var(--bx-text-3)}
.st3-input:focus{border-color:var(--bx-violet-line);box-shadow:0 0 0 3px var(--bx-violet-soft)}
.st3-input[readonly]{color:var(--bx-text-2);cursor:pointer}
textarea.st3-input{resize:vertical;line-height:1.5}
.st3-inline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.st3-inline .st3-input{flex:1;min-width:170px}
.st3-hint{font-size:.74rem;color:var(--bx-text-3);margin-top:.45rem}
.st3-msg{font-size:.74rem;margin-top:.5rem;display:none}
.st3-msg.err{color:var(--bx-down);display:block}
.st3-msg.ok{color:var(--bx-up);display:block}
.st3-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem;align-items:center}
.st3-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;
  background:var(--bx-inset);border:1px solid var(--bx-line)}
.st3-segb{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .8rem;border-radius:8px;
  border:none;background:none;cursor:pointer;font-size:.77rem;font-weight:600;color:var(--bx-text-3);
  transition:background .15s,color .15s}
.st3-segb:hover{color:var(--bx-text)}
.st3-segb.active{background:var(--bx-violet);color:#fff}
.st3-avatars{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.st3-av{width:44px;height:44px;border-radius:13px;cursor:pointer;display:grid;place-items:center;
  font-weight:800;font-size:1rem;color:#fff;border:1px solid transparent;
  transition:transform .15s,box-shadow .15s}
.st3-av:hover{transform:translateY(-2px)}
.st3-av.sel{box-shadow:0 0 0 2px var(--bx-surface),0 0 0 4px var(--bx-violet)}
.st3-plan{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem;border-radius:14px;
  background:var(--bx-violet-soft);border:1px solid var(--bx-violet-line)}
.st3-plan-n{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--bx-text)}
.st3-plan-s{font-size:.74rem;color:var(--bx-text-3);margin-top:.15rem;max-width:44ch;line-height:1.45}
.st3-plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.55rem}
.st3-plat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  padding:.85rem .9rem;border-radius:12px;text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(127,127,150,.03);border:1px solid var(--bx-line);
  transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.st3-plat:hover{border-color:var(--bx-line-strong);transform:translateY(-2px)}
.st3-plat.sel{border-color:var(--bx-violet-line);background:var(--bx-violet-soft)}
.st3-plat img{width:26px;height:26px;border-radius:7px;object-fit:cover;margin-bottom:.2rem}
.st3-plat-n{font-size:.83rem;font-weight:700;color:var(--bx-text)}
.st3-plat-t{font-size:.7rem;color:var(--bx-text-3);line-height:1.35}
.st3-plat-ok{position:absolute;top:.6rem;right:.65rem;color:var(--bx-violet);display:inline-flex}
.st3-danger{border:1px solid color-mix(in srgb,var(--bx-down) 30%,transparent);border-radius:13px;
  padding:1rem 1.1rem;background:var(--bx-down-soft)}
.st3-danger-t{font-size:.82rem;font-weight:700;color:var(--bx-down)}
.st3-btn-danger{background:transparent;border:1px solid color-mix(in srgb,var(--bx-down) 40%,transparent);
  color:var(--bx-down)}
.st3-btn-danger:hover{background:color-mix(in srgb,var(--bx-down) 14%,transparent);
  border-color:var(--bx-down);color:var(--bx-down)}
.st3-legal{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-top:1px solid var(--bx-line);font-size:.82rem;color:var(--bx-text-2)}
.st3-legal:first-of-type{border-top:none}
.st3-soon{font-size:.68rem;font-weight:600;color:var(--bx-text-3);
  border:1px solid var(--bx-line);border-radius:20px;padding:.22rem .6rem}

/* ═══ 15. BADGES v8 — « La médaille » ═════════════════════════════
   QUATRIÈME système. Historique, pour ne pas refaire les erreurs :
   · v2 médaillons néon (halo, 19 teintes sur noir) — l'anti-modèle.
   · v3 lignes plates : une liste, zéro récompense.
   · v4 « métal gravé » : rejeté ANTIQUAIRE — le tort n'était pas la
     médaille, c'était la gravure terne, le relief d'orfèvre, le sépia.
   · v5-v7 plaques de couleur pleine : propres, mais verdict client du
     18/08 : « ça ne fait PAS badge » — une plaque ne se collectionne
     pas. Références données : Discord Nitro, HackTheBox.
   La v8 assumait l'objet-médaille en anneau conic + tranche crantée.
   Verdict client 19/08 : « entre néon et l'ancien style, trop IA »
   — un conic VIBRE (halo déguisé) et les pictos au trait font
   catalogue d'icônes. v10 « L'ÉCUSSON » — flat et charnu, grammaire
   Duolingo/Discord, la palette franche du panneau algo :
   · la RARETÉ donne la silhouette ET la matière : cercle de bronze,
     écu d'argent, rosette d'or, gemme de diamant (BX_MDL_SIL) ;
   · matière = trois aplats (--bm1 vif / --bm3 tranche dessous /
     --ben émail) — zéro dégradé, l'épaisseur des boutons Academy ;
   · chaque badge a SON dessin plein (BX_BDG_ART, 19 pictos uniques)
     posé en blanc + matière sur l'émail ;
   · verrouillée : acier + dessin éteint (on voit ce qu'on désire),
     la JAUGE garde la teinte pleine de la matière (--bf) ;
   · diamant débloqué : un reflet balaie la gemme (bx-mdl-shim).
   · Le geste reste : on ATTRAPE la médaille et on la RETOURNE.
   ═══════════════════════════════════════════════════════════════ */
.bx-bdg,.bx-bdgm,.bx-bdgt,.bx-bdgrail i{--bm1:#dfe8f4;--bm2:#a2b2c5;
  --bm3:#57647a;--ben:#2e3849;--bf:#dfe8f4}
.bxm-bronze{--bm1:#e8964f;--bm2:#b5671f;--bm3:#6e3608;--ben:#43220a;--bf:#e8964f}
.bxm-silver{--bm1:#dfe8f4;--bm2:#a2b2c5;--bm3:#57647a;--ben:#2e3849;--bf:#dfe8f4}
.bxm-gold{--bm1:#ffd35e;--bm2:#f0b429;--bm3:#8a5a08;--ben:#53370a;--bf:#ffd35e}
.bxm-diamond{--bm1:#a8e8ff;--bm2:#64b6e8;--bm3:#34648f;--ben:#0f2f4d;--bf:#a8e8ff}

/* ── La médaille : un svg plein, le conteneur ne peint plus rien ── */
.bx-bdg-plate{position:relative;flex:none;width:70px;height:79px;
  margin:10px auto 0;display:grid;place-items:center;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  transition:transform .25s cubic-bezier(.2,.86,.24,1);}
.bx-mdl{display:block;width:100%;height:100%;}
.bx-bdg:hover .bx-bdg-plate{transform:translateY(-3px) scale(1.05);}
/* Les aplats de la matière et les encres du dessin */
.bx-mdl-rim{fill:var(--bm3);stroke:var(--bm3);stroke-width:1.3;stroke-linejoin:round}
.bx-mdl-face{fill:var(--bm1);stroke:var(--bm1);stroke-width:1.3;stroke-linejoin:round}
.bx-mdl-en{fill:var(--ben);stroke:var(--ben);stroke-width:1.3;stroke-linejoin:round}
.bx-mdl-art .a1{fill:#fff}
.bx-mdl-art .a2{fill:var(--bm1)}
.bx-mdl-art .k1{fill:var(--ben)}
.bx-mdl-art .s1{stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round}
.bx-mdl-art .s2{stroke:var(--bm1);fill:none;stroke-width:1.4;stroke-linecap:round}
.bx-mdl-art .sk{stroke:var(--ben);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
/* Le reflet du diamant : traverse la gemme, se pose, repart */
.bx-mdl-shim path{opacity:.5;animation:bxMdlShim 3.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bxMdlShim{0%{transform:translateX(-6px)}36%{transform:translateX(30px)}100%{transform:translateX(30px)}}
/* Verrouillée = SILHOUETTE d'acier (v9) : le dessin reste visible mais
   éteint — on voit ce qu'on désire. La jauge garde --bf (la promesse),
   les grilles trient les acquises d'abord. */
.bx-bdg.locked{--bm1:#454b5c;--bm2:#343a49;--bm3:#20242f;--ben:#161923}
.bx-bdg.locked .bx-bdg-plate{filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));}
.bx-bdg.locked .bx-mdl-art .a1{fill:#565b70}
.bx-bdg.locked .bx-mdl-art .k1{fill:#101320}
.bx-bdg.locked .bx-mdl-art .s1{stroke:#565b70}
.bx-bdg.locked .bx-mdl-art .s2{stroke:#565b70}
.bx-bdg.locked .bx-mdl-art .sk{stroke:#101320}
.bx-bdg-lockp{position:absolute;right:-3px;bottom:-3px;z-index:2;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;
  background:#262a37;border:2px solid #0e1018;color:#9aa0b8;}
.bx-bdgm .bx-bdg-lockp{width:16px;height:16px;right:-4px;bottom:-4px;}
.bx-bdg-gauge{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  width:72px;height:3px;border-radius:2px;
  background:color-mix(in oklab,var(--bf) 14%,transparent);}
.bx-bdg-gauge i{display:block;height:100%;border-radius:2px;background:var(--bf);
  transform-origin:left;animation:bxBdgFill .9s cubic-bezier(.2,.86,.24,1)}
@keyframes bxBdgFill{from{transform:scaleX(0)}}

/* ── L'écrin : on retourne la médaille ── */
.bx-bdg{position:relative;display:block;width:100%;height:164px;
  font-family:var(--bx-font);perspective:900px;cursor:grab;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
.bx-bdg:active{cursor:grabbing}
.bx-bdg-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateY(var(--rot,0deg));transition:transform .55s cubic-bezier(.2,.86,.24,1)}
.bx-bdg.grab .bx-bdg-in{transition:none}
.bx-bdg-f,.bx-bdg-b{position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;border:1px solid transparent;background:transparent;
  display:flex;flex-direction:column;align-items:center;
  transition:border-color .18s,background .18s}
.bx-bdg-f{justify-content:flex-start}
.bx-bdg-b{transform:rotateY(180deg);justify-content:center;gap:.5rem;
  text-align:center;padding:.85rem .7rem;
  background:var(--bx-raised);border-color:var(--bx-line)}
.bx-bdg:hover .bx-bdg-f{background:rgba(255,255,255,.025);border-color:var(--bx-line)}
.bx-bdg:focus-visible{outline:none}
.bx-bdg:focus-visible .bx-bdg-f,.bx-bdg:focus-visible .bx-bdg-b{border-color:var(--bm1)}
/* Le cartel, sous la médaille */
.bx-bdg-txt{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:.15rem;padding:.9rem .5rem .7rem;min-width:0}
.bx-bdg-n{font-size:.8125rem;font-weight:700;color:var(--bx-text);line-height:1.25;
  text-align:center}
.bx-bdg.locked .bx-bdg-n{color:var(--bx-text-2)}
.bx-bdg-s{font-size:.75rem;color:var(--bx-text-2);font-variant-numeric:tabular-nums}
/* Affordance : la médaille se retourne */
.bx-bdg-turn{position:absolute;top:.45rem;right:.5rem;display:grid;place-items:center;
  color:var(--bx-text-2);opacity:0;transition:opacity .15s,transform .3s}
.bx-bdg:hover .bx-bdg-turn,.bx-bdg:focus-visible .bx-bdg-turn{opacity:.75}
.bx-bdg:hover .bx-bdg-turn{transform:rotate(-40deg)}
/* Revers : la rareté en pastille de métal */
.bx-bdg-rar{display:inline-flex;align-items:center;font-size:.75rem;font-weight:800;
  background:linear-gradient(135deg,var(--bm1),var(--bm2));color:#0b0d16;
  border-radius:20px;padding:.22rem .65rem;letter-spacing:.02em}
.bx-bdg.locked .bx-bdg-rar{background:none;color:var(--bm1);
  border:1px solid color-mix(in oklab,var(--bm1) 40%,transparent);
  padding:.17rem .6rem}
.bx-bdg-cond{font-size:.8125rem;color:var(--bx-text-2);line-height:1.35;padding:0 .1rem}
.bx-bdg-meta{font-size:.75rem;color:var(--bx-text-2);font-variant-numeric:tabular-nums}

/* ── La vitrine : grille + intercalaires de catégorie ── */
.bx-bdggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));
  gap:.7rem;padding:.8rem 1.15rem .4rem}
.bx-bdggrid.last{padding-bottom:1.15rem}
.bx-bdggrid.bare{padding:0;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.bx-bdgcat{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.15rem 0;
  font-size:.8125rem;font-weight:700;color:var(--bx-text-2)}
.bx-bdgcat::after{content:'';flex:1;height:1px;background:var(--bx-line)}
.bx-bdgcat b{font-family:var(--bx-mono);font-size:.75rem;font-weight:400;
  color:var(--bx-text-2);font-variant-numeric:tabular-nums}

/* ── Réglette de collection ── */
.bx-bdgrail{display:flex;align-items:flex-end;gap:3px;flex:1;min-width:96px;max-width:230px}
.bx-bdgrail i{flex:1;height:8px;border-radius:2px;background:rgba(127,127,150,.16)}
body.bx-light .bx-bdgrail i{background:rgba(22,22,48,.1)}
.bx-bdgrail i.on{background:linear-gradient(135deg,var(--bm1),var(--bm2));
  transform-origin:bottom;animation:bxBdgSeg .38s cubic-bezier(.2,.86,.24,1) both;
  animation-delay:calc(var(--i,0)*.045s)}
@keyframes bxBdgSeg{from{transform:scaleY(.2);opacity:0}}

/* ── Mini (carte de joueur, classement) : la médaille seule ── */
.bx-bdgm{position:relative;display:inline-grid;flex:none}
.bx-bdgm .bx-bdg-plate{width:30px;height:34px;margin:0;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.bx-bdg-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--bx-raised);color:var(--bx-text);border:1px solid var(--bx-line-strong);
  border-radius:8px;padding:.35rem .6rem;font-size:.75rem;font-weight:600;white-space:nowrap;
  box-shadow:var(--bx-shadow);opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.bx-bdgm:hover .bx-bdg-tip,.bx-bdgm:focus-visible .bx-bdg-tip{opacity:1}
.bx-bdgm:focus-visible{outline:none}

/* ── Le gain : la médaille arrive en tournant et se pose ── */
.bx-bdgt{display:grid;place-items:center;perspective:420px}
.bx-bdgt .bx-bdg-plate{width:46px;height:52px;margin:0;
  animation:bxBdgStrike .85s cubic-bezier(.2,.86,.24,1)}
@keyframes bxBdgStrike{
  0%{transform:rotateY(-540deg) scale(.45)}
  72%{transform:rotateY(0) scale(1.1)}
  100%{transform:rotateY(0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .bx-bdg-in{transition:none}
  .bx-bdg-gauge i,.bx-bdgrail i.on,.bx-bdgt .bx-bdg-plate{animation:none}
  .bx-mdl-shim path{animation:none;opacity:0}
  .bx-bdg:hover .bx-bdg-turn{transform:none}
  .bx-bdg-plate{transition:none}
}
@media(max-width:560px){
  .bx-bdggrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));padding:.8rem .9rem .4rem}
  .bx-bdgcat{padding:1rem .9rem 0}
}

/* ═══ 15.1 LE REVEAL — « bam, nouveau badge » ═════════════════════
   L'annonce plein écran d'un badge accordé (bxBadgeReveal, index.html),
   façon carte débloquée dans un jeu : la médaille arrive ÉTEINTE en
   tournant, se pose, FLASH — elle prend ses couleurs — l'anneau part,
   les éclats volent, le cartel se frappe. Une montée de palier
   Winstreak joue la même scène, titrée « Badge amélioré ». */
.bxrev{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;
  background:rgba(8,7,16,.8);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  cursor:pointer;animation:bxrevIn .28s cubic-bezier(.16,1,.3,1)}
@keyframes bxrevIn{from{opacity:0}}
.bxrev.out{opacity:0;transition:opacity .24s}
.bxrev-stage{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2rem 2.4rem;max-width:min(92vw,470px)}
.bxrev-card{position:relative;z-index:1;filter:drop-shadow(0 26px 40px rgba(0,0,0,.7))}
.bxrev-card .bx-bdg-plate,.bxrev-card .bxrev-catplate{width:150px;height:169px;margin:0;filter:none;
  transform-origin:50% 60%;animation:bxrevMedal 1.5s cubic-bezier(.2,.86,.24,1) both}
/* L'écusson de catégorie : la plaque charnue frappée aux couleurs de la
   station (vars posées par bxCatReveal) — même scène, autre héros */
.bxrev-card .bxrev-catplate{position:relative;display:grid;place-items:center;
  width:146px;height:146px;border-radius:36px;color:#fff;
  background:var(--bm1);box-shadow:0 10px 0 var(--bm3)}
.bxrev-catplate::before{content:'';position:absolute;inset:14px;border-radius:25px;background:var(--ben)}
.bxrev-catplate svg{position:relative;z-index:1}
@keyframes bxrevMedal{
  0%{transform:scale(.34) rotate(-14deg) translateY(26px);filter:grayscale(1) brightness(.5)}
  42%{transform:scale(1.04) rotate(2deg) translateY(0);filter:grayscale(1) brightness(.55)}
  58%{transform:scale(1);filter:grayscale(1) brightness(.55)}
  66%{filter:grayscale(.1) brightness(2.1)}
  78%{transform:scale(1.12);filter:grayscale(0) brightness(1.25)}
  100%{transform:scale(1);filter:grayscale(0) brightness(1)}}
/* L'anneau du flash */
.bxrev-ring{position:absolute;left:50%;top:52%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;border:3px solid #fff;opacity:0;pointer-events:none;
  animation:bxrevRing .8s .95s cubic-bezier(.16,1,.3,1)}
@keyframes bxrevRing{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(1.65)}}
/* Les éclats : douze braises de la matière qui partent en étoile */
.bxrev-burst{position:absolute;left:50%;top:52%;width:0;height:0;pointer-events:none}
.bxrev-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;
  background:var(--bm1);opacity:0;transform:rotate(var(--a)) translateY(-14px) scale(.6);
  animation:bxrevSpark .85s 1s cubic-bezier(.16,1,.3,1)}
@keyframes bxrevSpark{
  0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1*var(--d))) scale(.4)}}
/* Le cartel */
.bxrev-kick{margin-top:1.2rem;font-weight:800;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bm1);
  animation:bxrevStamp .55s 1.05s cubic-bezier(.2,.86,.24,1) both}
.bxrev-name{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;
  font-size:2rem;color:#fff;line-height:1.1;margin-top:.35rem;
  animation:bxrevStamp .55s 1.15s cubic-bezier(.2,.86,.24,1) both}
.bxrev-desc{font-size:.95rem;color:#b9bdd1;margin-top:.45rem;line-height:1.45;
  animation:bxrevUp .5s 1.3s cubic-bezier(.16,1,.3,1) both}
.bxrev-xp{margin-top:.85rem;font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-weight:800;font-size:1.05rem;color:#2e1d00;background:#f0b429;
  border-radius:999px;padding:.4rem 1.05rem;box-shadow:0 4px 0 #8a5a08;
  animation:bxrevUp .5s 1.42s cubic-bezier(.16,1,.3,1) both}
.bxrev-hint{margin-top:1.5rem;font-size:.78rem;color:#8b90a8;
  animation:bxrevUp .6s 2s cubic-bezier(.16,1,.3,1) both}
@keyframes bxrevStamp{0%{opacity:0;transform:scale(2.1)}100%{opacity:1;transform:scale(1)}}
@keyframes bxrevUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* Le record Winstreak, au centre de sa médaille */
.bx-mdl text.bxstk-n{fill:#fff;font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-weight:800;font-variant-numeric:tabular-nums}
/* Bêta : la matière du sorcier (améthyste) — prime sur bxm-diamond */
.bx-mdl-beta{--bm1:#c9b3ff;--bm2:#8f6ae8;--bm3:#4b3d99;--ben:#1e1247}
/* …mais l'acier du verrouillage prime sur tout */
.bx-bdg.locked .bx-mdl{--bm1:#454b5c;--bm2:#343a49;--bm3:#20242f;--ben:#161923}

@media (prefers-reduced-motion:reduce){
  .bxrev,.bxrev-card .bx-bdg-plate,.bxrev-card .bxrev-catplate,
  .bxrev-kick,.bxrev-name,.bxrev-desc,.bxrev-xp,.bxrev-hint{animation:none}
  .bxrev-ring,.bxrev-burst{display:none}
}
@media(max-width:560px){
  .bxrev-card .bx-bdg-plate{width:118px;height:133px}
  .bxrev-card .bxrev-catplate{width:116px;height:116px;border-radius:30px}
  .bxrev-name{font-size:1.6rem}
}



/* ═══════════════════════════════════════════════════════════════
   §16 — CLASSEMENT (bxlb-)
   ---------------------------------------------------------------
   L'ancien écran : podium or/argent/bronze avec halo coloré, avatars
   en dégradé violet, cinq pastilles de plan en cinq couleurs, libellés
   à 10px sur fond noir. Du néon posé sur du vide, illisible et sans
   hiérarchie — trois cartes identiques ne disent pas qui gagne.

   Ici, DEUX teintes seulement (DA §3) :
   · AMBRE  #f5cd44 / encre #3a2b00 → le classement, la valeur, la place.
   · VIOLET #b9a3f5 / encre #22103c → TOI. Ta ligne, ta place, ton écart.
   Tout le reste est ardoise. La hiérarchie du podium ne passe pas par
   trois couleurs mais par trois DENSITÉS de la même : aplat plein pour
   le 1er, panneau teinté 8 % + filet 2px pour le 2e et le 3e.

   Le geste (unique au produit) : on ATTRAPE une ligne et on la TIRE
   vers la gauche. La poignée se remplit à mesure ; passé le cran, elle
   déplie le détail du trader sous la ligne. Le badge se retourne (§15),
   la ligne se tire — deux écrans, deux gestes.
   ═══════════════════════════════════════════════════════════════ */

.bxlb{
  --lb-a:#f5cd44;  --lb-ak:#3a2b00;
  --lb-v:#b9a3f5;  --lb-vk:#22103c;
  --lb-e:cubic-bezier(.2,.86,.24,1);
  max-width:1060px;margin:0 auto;padding:2.1rem 1.5rem 4.5rem;
  font-family:var(--bx-font);color:var(--bx-text)}
.bxlb *{box-sizing:border-box}
#leaderboard-section .lb-wrap{max-width:none;padding:0}
#leaderboard-section{background:var(--bx-bg)}

/* ── Bandeau : le titre et l'outil sur la même ligne ── */
.bxlb-top{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem}
.bxlb-t{font-family:var(--bx-font-display);font-size:1.75rem;font-weight:700;
  letter-spacing:-.025em;color:var(--bx-text);margin:0}

/* ── Sélecteur de catégorie : le pouce glisse d'un cran à l'autre ── */
.bxlb-seg{position:relative;display:inline-flex;padding:3px;gap:2px;
  background:var(--bx-inset);border:1px solid var(--bx-line);border-radius:13px}
.bxlb-seg i{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:10px;
  background:var(--bx-surface);border:1px solid var(--bx-line-strong);
  transform:translateX(0);transition:transform .28s var(--lb-e),width .28s var(--lb-e)}
.bxlb-seg button{position:relative;z-index:1;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.8125rem;font-weight:600;color:var(--bx-text-3);
  padding:.46rem .9rem;border-radius:10px;transition:color .2s}
.bxlb-seg button:hover{color:var(--bx-text-2)}
.bxlb-seg button.on{color:var(--bx-text)}

/* ── Le podium ── */
.bxlb-pod{display:grid;grid-template-columns:1.5fr 1fr;gap:.7rem;margin-bottom:.7rem}
.bxlb-pod-side{display:grid;grid-template-rows:1fr 1fr;gap:.7rem}

/* 1re place : aplat plein, encre par-dessus. Le chiffre géant en fond
   est de la matière typographique, pas un dégradé décoratif. */
.bxlb-one{position:relative;overflow:hidden;border:0;border-radius:18px;
  background:var(--lb-a);color:var(--lb-ak);cursor:pointer;text-align:left;
  min-height:196px;padding:1.25rem 1.35rem;display:flex;flex-direction:column;
  justify-content:space-between;font-family:inherit;
  transition:transform .22s var(--lb-e)}
.bxlb-one:hover{transform:translateY(-3px)}
.bxlb-one:active{transform:translateY(-1px)}
.bxlb-one:focus-visible{outline:2px solid var(--lb-ak);outline-offset:3px}
.bxlb-one::after{content:'1';position:absolute;right:.4rem;bottom:-3.6rem;
  font-family:var(--bx-font-display);font-size:11.5rem;font-weight:700;line-height:1;
  color:rgba(0,0,0,.075);pointer-events:none}
.bxlb-one-hd{position:relative;display:flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.bxlb-one-bd{position:relative;display:flex;align-items:center;gap:.85rem;min-width:0}
.bxlb-one-nm{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxlb-one-rk{font-size:.8125rem;font-weight:600;opacity:.72;margin-top:.1rem}
.bxlb-one-ft{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.bxlb-one-v{font-family:var(--bx-font-display);font-size:2.3rem;font-weight:700;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bxlb-one-u{font-size:.8125rem;font-weight:600;opacity:.72;margin-top:.3rem}

/* 2e et 3e : la même teinte, en panneau. Filet plein de 2px. */
.bxlb-two{position:relative;display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1rem;border-radius:16px;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--bx-text);
  background:color-mix(in oklab,var(--lb-a) 8%,var(--bx-raised));
  border:2px solid color-mix(in oklab,var(--lb-a) 28%,transparent);
  transition:border-color .2s var(--lb-e),transform .2s var(--lb-e)}
.bxlb-two:hover{border-color:color-mix(in oklab,var(--lb-a) 56%,transparent);transform:translateX(2px)}
.bxlb-two:focus-visible{outline:2px solid var(--lb-a);outline-offset:2px}
.bxlb-two-n{flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:var(--lb-a);color:var(--lb-ak);
  font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.bxlb-two-tx{min-width:0;flex:1}
.bxlb-two-nm{font-size:.9375rem;font-weight:700;color:var(--bx-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxlb-two-s{font-size:.8125rem;color:var(--bx-text-2);margin-top:.1rem}
.bxlb-two-v{flex:none;font-size:1rem;font-weight:700;color:var(--bx-text);
  font-variant-numeric:tabular-nums}

/* Avatars — jamais de dégradé : l'aplat de la teinte, l'encre par-dessus */
.bxlb-av{flex:none;display:grid;place-items:center;overflow:hidden;border-radius:50%;
  font-weight:700;background:var(--bx-inset);color:var(--bx-text-2);
  border:1px solid var(--bx-line)}
.bxlb-av img{width:100%;height:100%;object-fit:cover}
.bxlb-one .bxlb-av{width:56px;height:56px;font-size:1.25rem;
  background:color-mix(in oklab,var(--lb-ak) 16%,var(--lb-a));
  color:var(--lb-ak);border-color:rgba(0,0,0,.2)}
.bxlb-two .bxlb-av{width:38px;height:38px;font-size:.9375rem}
.bxlb-row .bxlb-av{width:32px;height:32px;font-size:.8125rem}

/* ── Ta place : le seul bloc violet de l'écran ── */
.bxlb-me{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1.2rem;padding:.85rem 1.1rem;border-radius:16px;margin-bottom:.7rem;
  background:color-mix(in oklab,var(--lb-v) 8%,var(--bx-raised));
  border:2px solid color-mix(in oklab,var(--lb-v) 28%,transparent)}
.bxlb-me-p{display:flex;align-items:center;gap:.6rem}
.bxlb-me-n{display:grid;place-items:center;min-width:44px;height:38px;padding:0 .5rem;
  border-radius:11px;background:var(--lb-v);color:var(--lb-vk);
  font-family:var(--bx-font-display);font-size:1.0625rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.bxlb-me-l{font-size:.8125rem;font-weight:600;color:var(--bx-text-2)}
.bxlb-me-g{min-width:0}
.bxlb-me-gh{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-size:.8125rem;color:var(--bx-text-2);margin-bottom:.4rem}
.bxlb-me-gh b{font-size:.875rem;font-weight:700;color:var(--bx-text);
  font-variant-numeric:tabular-nums}
.bxlb-bar{height:8px;border-radius:4px;overflow:hidden;
  background:color-mix(in oklab,var(--lb-v) 14%,transparent)}
.bxlb-bar i{display:block;height:100%;border-radius:4px;background:var(--lb-v);
  width:var(--w,0%);transform-origin:left;
  animation:bxlbGrow .75s var(--lb-e) both}
.bxlb-me-x{text-align:right}
.bxlb-me-x b{display:block;font-family:var(--bx-font-display);font-size:1.25rem;
  font-weight:700;color:var(--bx-text);font-variant-numeric:tabular-nums;line-height:1.1}
.bxlb-me-x span{font-size:.8125rem;color:var(--bx-text-2)}

/* ── La liste ── */
.bxlb-list{border:1px solid var(--bx-line);border-radius:16px;overflow:hidden;
  background:var(--bx-surface)}
.bxlb-hd,.bxlb-row{display:grid;align-items:center;gap:.75rem;
  grid-template-columns:44px minmax(0,1fr) 116px 78px 190px 38px}
.bxlb-hd{padding:.6rem 1.1rem;background:var(--bx-inset);
  font-size:.75rem;font-weight:600;color:var(--bx-text-3)}
.bxlb-hd .r{text-align:right}
/* Le fond de l'élément n'apparaît QUE pendant la traction, dans la bande
   que la ligne libère : c'est ce qui donne la sensation de tirer un tiroir
   plutôt que de faire glisser un bloc dans le vide. */
.bxlb-it{border-top:1px solid var(--bx-line);
  background:color-mix(in oklab,var(--lb-v) 14%,var(--bx-surface));
  animation:bxlbIn .42s var(--lb-e) both;animation-delay:calc(var(--i,0)*.018s)}
.bxlb-it:first-child{border-top:0}
.bxlb-row{position:relative;width:100%;padding:.6rem 1.1rem;cursor:pointer;
  background:var(--bx-surface);color:var(--bx-text);font-family:inherit;
  text-align:left;border:0;border-left:3px solid transparent;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transform:translateX(calc(var(--pull,0px) * -1));
  transition:transform .38s var(--lb-e),background .16s,border-color .16s}
.bxlb-row.grab{transition:background .16s,border-color .16s}
.bxlb-row:hover{background:var(--bx-raised)}
.bxlb-row:focus-visible{outline:none;border-left-color:var(--lb-v)}
.bxlb-it.me .bxlb-row{background:color-mix(in oklab,var(--lb-v) 7%,var(--bx-surface));
  border-left-color:var(--lb-v)}
.bxlb-it.open .bxlb-row{background:var(--bx-raised)}

.bxlb-n{font-size:.875rem;font-weight:700;color:var(--bx-text-3);
  font-variant-numeric:tabular-nums}
.bxlb-it.me .bxlb-n{color:var(--bx-text)}
.bxlb-u{display:flex;align-items:center;gap:.65rem;min-width:0}
.bxlb-nm{font-size:.875rem;font-weight:600;color:var(--bx-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxlb-you{flex:none;padding:.1rem .4rem;border-radius:6px;background:var(--lb-v);
  color:var(--lb-vk);font-size:.75rem;font-weight:700}
.bxlb-rk{display:flex;align-items:center;gap:.45rem;font-size:.8125rem;
  font-weight:600;color:var(--bx-text-2);white-space:nowrap}
/* Paliers du rang : des crans, pas une neuvième couleur */
.bxlb-tier{display:flex;gap:2px;flex:none}
.bxlb-tier i{width:2px;height:11px;border-radius:1px;background:var(--bx-line-strong)}
.bxlb-tier i.on{background:var(--lb-a)}
.bxlb-rkn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bxlb-bd{display:flex;align-items:center;gap:.35rem;font-size:.8125rem;
  color:var(--bx-text-2);font-variant-numeric:tabular-nums}
.bxlb-bd svg{flex:none;opacity:.7}
.bxlb-v{display:flex;align-items:center;gap:.7rem}
.bxlb-vn{flex:none;min-width:72px;text-align:right;font-size:.875rem;font-weight:700;
  color:var(--bx-text);font-variant-numeric:tabular-nums}
.bxlb-vb{flex:1;height:6px;border-radius:3px;overflow:hidden;
  background:color-mix(in oklab,var(--lb-a) 13%,transparent)}
.bxlb-vb i{display:block;height:100%;border-radius:3px;background:var(--lb-a);
  width:var(--w,0%);transform-origin:left;
  animation:bxlbGrow .62s var(--lb-e) both;animation-delay:calc(var(--i,0)*.018s)}

/* La poignée : elle se remplit pendant qu'on tire, elle bascule au cran */
.bxlb-gr{position:relative;display:grid;place-items:center;width:26px;height:30px;
  border-radius:8px;justify-self:end;overflow:hidden;
  background:var(--bx-inset);border:1px solid var(--bx-line);
  color:var(--bx-text-3);transition:color .16s,border-color .16s}
.bxlb-row:hover .bxlb-gr{color:var(--bx-text-2);border-color:var(--bx-line-strong)}
.bxlb-gr::before{content:'';position:absolute;inset:0;background:var(--lb-v);
  transform:scaleY(var(--arm,0));transform-origin:bottom}
.bxlb-gr svg{position:relative;transition:transform .3s var(--lb-e)}
.bxlb-row.armed .bxlb-gr{color:var(--lb-vk);border-color:var(--lb-v)}
.bxlb-it.open .bxlb-gr svg{transform:rotate(-90deg)}

/* ── Le tiroir : ce qui se révèle sous la ligne ── */
.bxlb-dr{max-height:0;overflow:hidden;background:var(--bx-inset);
  transition:max-height .38s var(--lb-e)}
.bxlb-it.open .bxlb-dr{max-height:280px}
.bxlb-dr-in{display:grid;grid-template-columns:1fr 1fr auto;gap:1.4rem;
  align-items:center;padding:.95rem 1.15rem;
  border-top:1px solid var(--bx-line)}
.bxlb-dr-l{font-size:.75rem;font-weight:600;color:var(--bx-text-3);
  margin-bottom:.45rem}
.bxlb-meds{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.bxlb-dr-e{font-size:.8125rem;color:var(--bx-text-2)}
.bxlb-nx{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  font-size:.8125rem;color:var(--bx-text-2);margin-bottom:.4rem}
.bxlb-nx b{font-weight:700;color:var(--bx-text);font-variant-numeric:tabular-nums}
.bxlb-nxb{height:6px;border-radius:3px;overflow:hidden;
  background:color-mix(in oklab,var(--lb-a) 13%,transparent)}
.bxlb-nxb i{display:block;height:100%;border-radius:3px;background:var(--lb-a);width:var(--w,0%)}
.bxlb-acts{display:flex;gap:.5rem;flex:none}
.bxlb-act{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;
  border-radius:10px;font-family:inherit;font-size:.8125rem;font-weight:600;
  cursor:pointer;border:1px solid var(--bx-line-strong);
  background:var(--bx-surface);color:var(--bx-text);
  transition:border-color .16s,background .16s}
.bxlb-act:hover{border-color:var(--bx-text-3)}
.bxlb-act.on{background:var(--lb-v);border-color:var(--lb-v);color:var(--lb-vk)}
.bxlb-act[disabled]{opacity:.5;cursor:default}

/* ── Chargement : la liste s'installe, elle ne clignote pas ── */
.bxlb-sk{display:grid;gap:.7rem}
.bxlb-sk b,.bxlb-sk i{display:block;border-radius:14px;
  background:color-mix(in oklab,var(--lb-a) 9%,var(--bx-raised));
  animation:bxlbSk 1.25s ease-in-out infinite alternate}
.bxlb-sk b{height:196px}
.bxlb-sk i{height:52px;animation-delay:calc(var(--i,0)*.07s)}
.bxlb-note{padding:2.6rem 1rem;text-align:center;font-size:.875rem;color:var(--bx-text-2)}

@keyframes bxlbGrow{from{transform:scaleX(0)}}
@keyframes bxlbIn{from{opacity:0;transform:translateY(7px)}}
@keyframes bxlbSk{to{opacity:.5}}

@media(max-width:980px){
  .bxlb-hd,.bxlb-row{grid-template-columns:40px minmax(0,1fr) 104px 62px 150px 38px}
  .bxlb-vn{min-width:60px}
}
@media(max-width:820px){
  .bxlb-pod{grid-template-columns:1fr}
  .bxlb-dr-in{grid-template-columns:1fr;gap:.9rem}
}
@media(max-width:720px){
  .bxlb{padding:1.5rem 1rem 3.5rem}
  .bxlb-t{font-size:1.5rem}
  .bxlb-hd,.bxlb-row{grid-template-columns:34px minmax(0,1fr) 92px 34px;gap:.6rem;padding:.6rem .8rem}
  .bxlb-c-rk,.bxlb-c-bd{display:none}
  .bxlb-vb{display:none}
  .bxlb-vn{min-width:0;width:100%}
  .bxlb-me{grid-template-columns:auto 1fr;gap:.8rem}
  .bxlb-me-x{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:.5rem}
  .bxlb-seg{width:100%;overflow-x:auto}
  .bxlb-acts{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .bxlb-it,.bxlb-vb i,.bxlb-bar i,.bxlb-sk b,.bxlb-sk i{animation:none}
  .bxlb-row,.bxlb-dr,.bxlb-seg i{transition:none}
  .bxlb-one:hover,.bxlb-two:hover{transform:none}
}


/* ══════════════════════════════════════════════════════════════
   §17 — BOTX, LE BOT D'EXECUTION (bxbot-) — LANDING
   ══════════════════════════════════════════════════════════════
   v2 (18/08) — refonte au niveau de « Choose your algo » (DA §13).
   Ce que la section fait comprendre : le bot ACHETE a ta place, TA
   strategie vend par paliers, coupe la perte — deux moteurs
   (Algorithme rose / Rug Snip vert nuit) qu'on bascule.
   Geste de la section : la strategie SE TIRE (drag des parts
   vendues + stop), la courbe suit tes reglages.
   Signature d'animation : LA COURBE QUI SE TRACE, LES PALIERS QUI
   TOMBENT (unique sur la page — l'algo a le regroupement, le
   carrousel le vent, le hero le froisse).
   Page blanche : tout est native-blanc ici, pas d'override §18. */
.bxbot-sec{padding:5.5rem 2rem 6.5rem;position:relative;
  --bxbE:cubic-bezier(.16,1,.3,1);
  --bt-c:#fb7185; --bt-ck:#340810;
  --bt-g:#34d399; --bt-gk:#03251a;
  --bt-ink:#0a0f1e; --bt-mut:#5b6478; --bt-dim:#8a93a8;
  --bt-line:rgba(10,15,30,.1);}
.bxbot-sec .lp-container{max-width:1180px;}

/* ── Bandeau ── */
.bxbot-head{margin-bottom:2.2rem;}
.bxbot-mark{display:inline-block;background:var(--bt-c);color:var(--bt-ck);
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:.9rem;letter-spacing:.01em;padding:.3rem .65rem;border-radius:9px;}
.bxbot-t{margin:.95rem 0 0;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04;
  letter-spacing:-.03em;color:var(--bt-ink);}
.bxbot-s{margin:.85rem 0 0;max-width:56ch;font-size:1.02rem;line-height:1.6;
  color:var(--bt-mut);}

/* ── Le choix du moteur : deux clés, l'active est un aplat ── */
.bxbot-sw{display:flex;gap:.8rem;margin:0 0 3rem;flex-wrap:wrap;}
.bxbot-key{display:flex;align-items:center;gap:.8rem;text-align:left;
  padding:.85rem 1.2rem;border-radius:16px;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--bt-line);
  box-shadow:0 16px 36px -20px rgba(13,32,84,.3);
  transition:transform .14s var(--bxbE),border-color .2s,background .3s,box-shadow .25s;}
.bxbot-key:hover:not(.on){transform:translateY(-2px);border-color:rgba(10,15,30,.2);}
.bxbot-key:active{transform:translateY(1px) scale(.99);}
.bxbot-key:focus-visible{outline:2px solid var(--bt-c);outline-offset:3px;}
.bxbot-key.on{cursor:default;border-color:transparent;}
.bxbot-key[data-eng="algo"].on{background:linear-gradient(135deg,#ef5d78,#fb7185);
  box-shadow:0 18px 38px -18px rgba(52,7,16,.55);}
.bxbot-key[data-eng="rug"].on{background:linear-gradient(135deg,#2bc18a,#34d399);
  box-shadow:0 18px 38px -18px rgba(3,37,26,.55);}
.bxbot-ki{width:38px;height:38px;flex:none;border-radius:12px;display:grid;
  place-items:center;transition:background .3s,color .3s;}
.bxbot-key[data-eng="algo"] .bxbot-ki{background:rgba(251,113,133,.14);color:#e0435f;}
.bxbot-key[data-eng="rug"] .bxbot-ki{background:rgba(52,211,153,.16);color:#0e9e64;}
.bxbot-key[data-eng="algo"].on .bxbot-ki{background:rgba(52,7,16,.14);color:var(--bt-ck);}
.bxbot-key[data-eng="rug"].on .bxbot-ki{background:rgba(3,37,26,.14);color:var(--bt-gk);}
.bxbot-kt b{display:block;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.08rem;letter-spacing:-.015em;line-height:1.1;
  color:var(--bt-ink);transition:color .3s;}
.bxbot-kt i{display:block;font-style:normal;font-size:13px;font-weight:600;
  color:#6a7488;margin-top:.2rem;transition:color .3s;}
.bxbot-key[data-eng="algo"].on .bxbot-kt b,
.bxbot-key[data-eng="algo"].on .bxbot-kt i{color:var(--bt-ck);}
.bxbot-key[data-eng="rug"].on .bxbot-kt b,
.bxbot-key[data-eng="rug"].on .bxbot-kt i{color:var(--bt-gk);}

/* ── La scène : deux mondes empilés ── */
.bxbot-ready .bxbot-stage{display:grid;}
.bxbot-ready .bxbot-scene{grid-area:1/1;}
.bxbot-ready .bxbot-scene:not(.on){opacity:0;visibility:hidden;pointer-events:none;}
.bxbot-scene{min-width:0;}
.bxbot-scene+.bxbot-scene{margin-top:3rem;}
.bxbot-ready .bxbot-scene+.bxbot-scene{margin-top:0;}

.bxbot-board{position:relative;border-radius:28px;padding:5.2rem 2.4rem 2.4rem;
  background:linear-gradient(138deg,#e04b66 0%,#f9647c 46%,#ff93a4 100%);
  box-shadow:0 60px 110px -42px rgba(52,7,16,.55),inset 0 1px 0 rgba(255,255,255,.22);}
.bxbot-board.rug{background:
  radial-gradient(ellipse 50% 60% at 86% 6%,rgba(52,211,153,.16),transparent 70%),
  linear-gradient(140deg,#03150f 0%,#07281c 55%,#0c3a28 100%);
  box-shadow:0 60px 110px -42px rgba(2,20,13,.75),inset 0 1px 0 rgba(255,255,255,.08);}

/* Panneau flottant qui nomme le moteur */
.bxbot-name{position:absolute;top:-24px;left:26px;z-index:4;max-width:400px;
  background:#fff;border:1px solid var(--bt-line);border-radius:16px;
  padding:.9rem 1.15rem;box-shadow:0 26px 54px -24px rgba(13,32,84,.45);}
.bxbot-name i{font-style:normal;font-family:'Space Mono',monospace;font-size:13px;
  font-weight:700;color:#e0435f;margin-right:.5rem;}
.bxbot-scene[data-eng="rug"] .bxbot-name i{color:#0e9e64;}
.bxbot-name b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:-.015em;color:var(--bt-ink);}
.bxbot-name span{display:block;font-size:14px;line-height:1.5;color:#4a5468;
  margin-top:.35rem;}

/* Étiquettes flottantes */
.bxbot-chip{position:absolute;z-index:4;background:#fff;border:1px solid var(--bt-line);
  border-radius:16px;padding:.75rem 1rem .7rem;
  box-shadow:0 26px 54px -24px rgba(13,32,84,.45);
  transition:transform .16s var(--bxbE);}
.bxbot-chip:hover{transform:translateY(-3px);}
.bxbot-chip b{display:block;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:-.02em;
  color:var(--bt-ink);font-variant-numeric:tabular-nums;}
.bxbot-chip span{display:block;font-size:13px;font-weight:600;color:var(--bt-dim);
  margin-top:.25rem;}
.bxbot-chip.a{top:-26px;right:-14px;}
.bxbot-chip.b{bottom:-20px;left:30px;}

/* ── Deux colonnes : la stratégie | la courbe ── */
.bxbot-wrap{display:grid;grid-template-columns:minmax(250px,320px) 1fr;
  gap:1.3rem;align-items:stretch;}

/* La stratégie — l'objet qui se manipule */
.bxbot-strat{background:#fff;border-radius:18px;padding:1.15rem 1.2rem 1rem;
  box-shadow:0 30px 60px -26px rgba(13,32,84,.4);align-self:start;}
.bxbot-strat-h{font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bt-mut);margin-bottom:.9rem;}
.bxbot-strow{display:grid;grid-template-columns:52px 1fr 56px;align-items:center;
  gap:.7rem;padding:.5rem 0;cursor:grab;border-radius:10px;}
.bxbot-strow:active{cursor:grabbing;}
.bxbot-strow:focus-visible{outline:2px solid var(--bt-c);outline-offset:2px;}
.bxbot-strow b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:15px;color:var(--bt-ink);font-variant-numeric:tabular-nums;}
.bxbot-rail{position:relative;height:8px;border-radius:999px;background:#e8ecf6;}
.bxbot-fill{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:999px;
  background:var(--bt-c);}
.bxbot-scene[data-eng="rug"] .bxbot-fill{background:var(--bt-g);}
.bxbot-strow.stop .bxbot-fill{background:#ff5c5c;}
.bxbot-knob{position:absolute;top:50%;left:50%;width:17px;height:17px;
  border-radius:50%;background:#fff;border:2px solid var(--bt-ink);
  transform:translate(-50%,-50%);transition:transform .12s var(--bxbE);
  box-shadow:0 3px 8px rgba(10,15,30,.25);}
.bxbot-strow:hover .bxbot-knob{transform:translate(-50%,-50%) scale(1.18);}
.bxbot-pct{font-style:normal;text-align:right;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:14px;color:var(--bt-ink);font-variant-numeric:tabular-nums;}
.bxbot-keep{display:flex;align-items:baseline;justify-content:space-between;
  gap:.8rem;margin-top:.7rem;padding-top:.8rem;border-top:1px dashed var(--bt-line);}
.bxbot-keep span{font-size:13px;font-weight:600;color:var(--bt-dim);}
.bxbot-keep b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:15px;color:var(--bt-ink);font-variant-numeric:tabular-nums;}

/* La courbe — l'objet sombre qui raconte */
.bxbot-chart{position:relative;min-height:330px;border-radius:18px;overflow:visible;
  background:#0b101f;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 60px -26px rgba(3,7,18,.9);}
.bxbot-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bxbot-grid line{stroke:rgba(255,255,255,.05);stroke-width:1;}
.bxbot-lvl{stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:5 6;}
.bxbot-lvl.hit{stroke:#fff;stroke-width:2.5;}
.bxbot-sl{stroke:rgba(255,92,92,.55);stroke-width:1.5;stroke-dasharray:3 5;}
.bxbot-lt{fill:rgba(255,255,255,.55);font-family:'Space Mono',monospace;
  font-size:13px;font-weight:700;text-anchor:end;}
.bxbot-line{fill:none;stroke:#3ddc97;stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;}
.bxbot-chart.lose .bxbot-line{stroke:#ff5c5c;}
.bxbot-chart.lose .bxbot-sl{stroke:#ff5c5c;}

/* Les tampons de la courbe */
.bxbot-st{position:absolute;z-index:3;transform:translate(-50%,-130%);
  white-space:nowrap;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.02em;border-radius:10px;
  padding:.3rem .6rem;box-shadow:0 14px 30px -12px rgba(0,0,0,.75);
  font-variant-numeric:tabular-nums;}
.bxbot-st.buy{background:var(--bt-c);color:var(--bt-ck);}
.bxbot-scene[data-eng="rug"] .bxbot-st.buy{background:var(--bt-g);color:var(--bt-gk);}
.bxbot-st.tp{background:#fff;color:var(--bt-ink);opacity:0;}
.bxbot-st.stx{background:#ff5c5c;color:#3a0808;opacity:0;}
.bxbot-st.det{background:#fff;color:var(--bt-ink);opacity:0;
  transform:translate(-50%,55%);}
.bxbot-st.fin{background:#34d399;color:#03251a;font-size:15px;padding:.4rem .75rem;
  transform:translate(-50%,-130%) rotate(-6deg);}
.bxbot-chart.lose .bxbot-st.fin{background:#ff5c5c;color:#3a0808;}
/* Positions par défaut (sans JS : le trade gagnant, posé) */
.bxbot-scene[data-eng="algo"] .bxbot-st.buy{left:6.6%;top:86%;}
.bxbot-scene[data-eng="algo"] .bxbot-st.fin{left:92%;top:15.3%;}
.bxbot-scene[data-eng="rug"] .bxbot-st.det{left:49%;top:87%;opacity:1;}
.bxbot-scene[data-eng="rug"] .bxbot-st.buy{left:53%;top:82%;}
.bxbot-scene[data-eng="rug"] .bxbot-st.fin{left:92%;top:18.6%;}

/* ── CTA ── */
.bxbot-cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:3.2rem;
  padding:.95rem 1.7rem;border-radius:999px;background:var(--bt-c);
  color:var(--bt-ck);font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.02rem;text-decoration:none;
  box-shadow:0 18px 40px -16px rgba(52,7,16,.5);
  transition:transform .14s var(--bxbE),box-shadow .25s,background .2s;}
.bxbot-cta:hover{transform:translateY(-2px);background:#f95f79;
  box-shadow:0 24px 48px -18px rgba(52,7,16,.55);}
.bxbot-cta:active{transform:translateY(0) scale(.98);}
.bxbot-cta svg{transition:transform .25s var(--bxbE);}
.bxbot-cta:hover svg{transform:translateX(4px);}

/* ── Responsive ── */
@media(max-width:1020px){
  .bxbot-wrap{grid-template-columns:minmax(230px,290px) 1fr;gap:1rem;}
  .bxbot-chart{min-height:290px;}
}
@media(max-width:860px){
  .bxbot-board{padding:2rem 1.4rem 1.6rem;}
  .bxbot-name{position:static;margin:0 0 1.4rem;max-width:none;
    box-shadow:0 18px 40px -20px rgba(13,32,84,.4);}
  .bxbot-wrap{grid-template-columns:1fr;}
  .bxbot-chart{min-height:250px;order:-1;}
  .bxbot-chip{position:static;display:inline-block;margin:1.2rem 1rem 0 0;
    box-shadow:0 16px 36px -20px rgba(13,32,84,.35);}
}
@media(max-width:560px){
  .bxbot-sec{padding:4rem 1.1rem 5rem;}
  .bxbot-sw{gap:.6rem;}
  .bxbot-key{padding:.7rem .85rem;gap:.6rem;flex:1;}
  .bxbot-ki{width:32px;height:32px;border-radius:10px;}
  .bxbot-kt b{font-size:.98rem;}
  .bxbot-chart{min-height:210px;}
}
@media(prefers-reduced-motion:reduce){
  .bxbot-key,.bxbot-chip,.bxbot-knob,.bxbot-cta,.bxbot-cta svg{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §18 — LANDING BLANCHE (18/08) — toute la page publique, hero compris
   ═══════════════════════════════════════════════════════════════════
   Demande du 18/08 : après le test « nappe » (showcase + algo), TOUTE
   la landing passe en blanc. Ce bloc est chargé en fin de cascade
   (le <link> blockx.css vit en fin de body) : il contre point par
   point la couche « LANDING DARK PREMIUM » du <head> d'index.html.
   Principes :
   - L'OBJET FONCE, LE FOND S'ÉCLAIRE : les écrans du produit, le
     laptop, la scène Wallet Intelligence, la stage BotX, les pills
     Academy et le hall des calls restent sombres — ce sont eux qui
     portent la couleur (screen 6 de DA-LANDING).
   - Le bleu roi #1d4ed8 remplace les violets décoratifs du thème
     sombre. Le violet #9945FF ne reste que sur le X du wordmark
     (couleur de marque).
   - Le hero est converti DANS son propre bloc (bxv-css + texture JS
     du froissé) — ici on ne traite que ce qui vivait dans la couche
     sombre du head.
   - Les vues APP (#scanner, #wallettracker, #rugsnip en mode
     view-*) ne sont PAS concernées : elles gardent leur DA sombre. */

/* ── Le fond de page ── */
#landing-wrap{
  --lp-bg:#fbfcff; --lp-bg2:#f4f6fc; --lp-bg3:#eef1f9; --lp-card:#ffffff;
  --lp-border:rgba(10,15,30,.1); --lp-text:#12172b; --lp-muted:#5b6478; --lp-subtle:#8a93a8;
  background:
    radial-gradient(1300px 750px at 12% -6%, rgba(37,99,235,.055), transparent 60%),
    radial-gradient(1100px 650px at 92% 10%, rgba(56,189,248,.05), transparent 55%),
    #fbfcff !important;
  color:#12172b !important;
}
#landing-wrap::before{
  background-image:linear-gradient(rgba(10,15,30,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,15,30,.045) 1px,transparent 1px);
}

/* ── Nav : verre clair ── */
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav{
  background:rgba(251,252,255,.8)!important;border-bottom:1px solid rgba(10,15,30,.08)!important;
}
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav.scrolled{
  background:rgba(251,252,255,.94)!important;box-shadow:0 8px 30px rgba(13,32,84,.1)!important;
}
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav .logo-text{color:#0a0f1e!important;}
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav .nav-logo .bx-logo{color:#0a0f1e!important;}
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav .btn-outline{border-color:rgba(10,15,30,.18)!important;color:#12172b!important;background:transparent!important;}
body:not(.view-dashboard):not(.view-outils):not(.view-rugsnip):not(.view-formation):not(.view-profile):not(.view-leaderboard):not(.view-wallet):not(.view-avis) #mainNav .btn-outline:hover{border-color:#1d4ed8!important;color:#1d4ed8!important;}
body:not([class*="view-"]) #mainNav .btn-primary{background:#1d4ed8!important;box-shadow:0 2px 12px rgba(29,78,216,.28)!important;}
body:not([class*="view-"]) #mainNav .btn-primary:hover{background:#1a44be!important;}
#mainNav .bx-logo g{fill:#0a0f1e;stroke:#fbfcff;}
body:not([class*="view-"]) .nav-hamburger span{background:#0a0f1e!important;}

/* ── Communs px- : titres, labels, dégradés ── */
.px-label{color:#1d4ed8!important;background:rgba(29,78,216,.07)!important;border-color:rgba(29,78,216,.22)!important;}
.px-title{color:#0a0f1e!important;}
.px-grad{background:linear-gradient(120deg,#1d4ed8,#2f6bff 55%,#38bdf8)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;}
.px-sub{color:#5b6478!important;}
.px-desc{color:#5b6478!important;}
#landing-wrap .lp-section-title,.hall-hd .lp-section-title{color:#0a0f1e!important;}
#landing-wrap .cs-header-text .cs-big-title{color:#0a0f1e!important;}
#landing-wrap .section-title{color:#0a0f1e!important;}
#landing-wrap .section-label{color:#1d4ed8!important;}
#tools-section::before,.lp-features::before,.lp-smartmoney::before,.lp-scoring::before,
.lp-testimonials::before,.lp-pricing-preview::before,.lp-comparison::before{
  background:linear-gradient(90deg,transparent,rgba(10,15,30,.14),transparent)!important;
}

/* ── Wallet Intelligence (rdb-) : compteurs clairs, scène sombre ── */
.rdb-counter{background:linear-gradient(165deg,rgba(255,68,102,.06),rgba(255,68,102,.015));border-color:rgba(255,68,102,.22);}
.rdb-counter b{color:#0a0f1e;}
.rdb-counter span{color:#5b6478;}

/* ── Academy & communauté (ac2-) : stats claires, pills sombres ── */
.ac2-stat{background:#fff!important;border-color:rgba(10,15,30,.1)!important;box-shadow:0 14px 34px -18px rgba(13,32,84,.16)!important;}
.ac2-stat b{color:#0a0f1e!important;}
.ac2-stat span{color:#5b6478!important;}
.ac2-free{color:#8a93a8!important;}
.ac2-try{color:#1d4ed8!important;}

/* ── Pricing : les tokens bx-* repassent en clair, localement ── */
#pricing-preview{
  --bx-bg:#fbfcff; --bx-surface:#ffffff; --bx-raised:#f7f9ff;
  --bx-inset:#eef1f9; --bx-line:rgba(10,15,30,.1);
  --bx-text:#0a0f1e; --bx-text-2:#5b6478; --bx-text-3:#8a93a8;
  --bx-violet-line:rgba(29,78,216,.4);
}
#pricing-preview .bx-pr-card{box-shadow:0 18px 44px -24px rgba(13,32,84,.18);}
.lp-curr-btn.active{background:rgba(29,78,216,.09)!important;border-color:rgba(29,78,216,.35)!important;color:#12306e!important;}

/* ── Reviews : cartes blanches ── */
.review-card,.rev-card{background:#fff!important;border:1px solid rgba(10,15,30,.1)!important;color:#4a5468!important;box-shadow:0 14px 34px -20px rgba(13,32,84,.14);}
.review-card:hover{border-color:rgba(29,78,216,.3);box-shadow:0 18px 44px -20px rgba(13,32,84,.2);}

/* ── Footer clair ── */
#landing-wrap .lp-footer,#landing-wrap footer,.lp-footer{background:#f2f4fa!important;border-top:1px solid rgba(10,15,30,.08)!important;color:#5b6478!important;}
.lp-footer a,#landing-wrap footer a{color:#5b6478!important;}
.lp-footer a:hover{color:#0a0f1e!important;}
.lp-footer h4,.lp-footer .foot-col-title,.lp-footer b,.lp-footer strong{color:#12172b!important;}
.lp-footer .logo-text,.lp-footer-logo{color:#0a0f1e!important;}
.lp-footer-col-title{color:#8a93a8!important;}
.lp-pc-custom-usd .cpm{background:#fff!important;border:1px solid rgba(10,15,30,.1)!important;}
.lp-pc-custom-usd .cpm-name{color:#12172b!important;}
.lp-pc-custom-usd .cpm-price{color:#5b6478!important;}

/* ── Chrome fixe de la landing : html, barre de scroll, dots ── */
/* Le html porte un #080808 historique : exposé pendant les défilements
   rapides (body zoomé à .8), il faisait flasher du noir derrière la
   page blanche. Blanc sur la landing, sombre dès qu'une vue app est
   active. */
html{background:#fbfcff;}
html:has(body[class*="view-"]){background:#080808;}
#scrollBar{background:linear-gradient(90deg,#1d4ed8,#2f6bff 50%,#38bdf8);}
.sec-dot{background:rgba(10,15,30,.16);border-color:rgba(10,15,30,.12);}
.sec-dot.active{background:#1d4ed8;border-color:#1d4ed8;
  box-shadow:0 0 10px rgba(29,78,216,.35);}
.sec-dot:hover:not(.active){background:rgba(29,78,216,.4);}

/* ── Bandeau CTA Academy (acx-cta) : lilas sombre → clair bleu ── */
.acx-cta{background:linear-gradient(115deg,rgba(29,78,216,.07),rgba(52,211,153,.05) 70%)!important;
  border:1px solid rgba(29,78,216,.22)!important;}
.acx-cta-t{color:#0a0f1e!important;}
.acx-cta-d{color:#5b6478!important;}
.acx-cta-note{color:#8a93a8!important;}
.acx-cta .hx-btn-primary{background:#1d4ed8!important;color:#fff!important;border:0!important;
  box-shadow:0 10px 26px -12px rgba(29,78,216,.55)!important;}
.acx-cta .hx-btn-primary:hover{background:#1a44be!important;}

/* ═══════════════════════════════════════════════════════════════════
   §19 — ACADEMY v6 (ax5- hub/roadmap · axp- test de placement ·
         axr- lecteur en étapes · bxxp- toasts XP)
   ═══════════════════════════════════════════════════════════════════
   Refonte du 18/08 (DA §0, méthode du jour). Verdict client sur le hub
   précédent : néon sur noir, cards serrées (« on étouffe »), « Ta
   voie » (libellé IA), petites mono illisibles, zéro animation
   d'arrivée, badges qui « ne font pas badge ». Ici :
   · Le VIOLET est la teinte de l'Academy — posé en APLAT avec son
     encre, jamais en texte qui brille sur noir. L'OR reste la
     récompense. Le reste est ardoise violette, deux valeurs.
   · La grille de cards devient une ROADMAP verticale : une colonne
     vertébrale qui se remplit, des stations qui s'ouvrent au clic
     sur leur détail (modules, leçons, reprise). Signature de
     l'écran : LE FIL QUI SE REMPLIT et LA STATION QUI S'OUVRE.
   · Un TEST DE PLACEMENT à la première visite : niveau, objectif,
     point faible, plateforme (cartes existantes) → départ conseillé.
   · Le lecteur découpe le pavé en ÉTAPES (rail, Continuer, la
     validation en bout de rail) au lieu d'un long défilement.
   · Chaque gain d'XP passe par un TOAST qui dit combien et pourquoi
     (les toasts existants .bxxp-toast, repeints ici).
   Typo : Bricolage pour les titres et les chiffres, Inter pour tout
   le reste, mono UNIQUEMENT pour les données. Plancher 13px. */

/* v7 (18/08) — le client : « je n'aime pas ce violet, le contraste
   avec le noir ne rend pas ». Le tort n'était pas le violet, c'était
   le NOIR : des accents violets posés sur un fond quasi noir font
   sale. Leçon de la landing : l'inversion, c'est l'écran entier.
   Ici le SOL devient violet (monde #191333), les surfaces sont des
   violets riches et l'action passe à l'iris #7c5cff — harmonie
   Duolingo : le fond porte la teinte, les boutons sont charnus. */
.ax5{
  --av:#7c5cff; --av2:#9d85ff; --avk:#2a1e5c;
  --ag:#f0b429; --agk:#2e1d00;
  --as1:#251d4e; --as2:#1b1540;
  --aline:rgba(170,150,255,.2); --aline2:rgba(185,165,255,.36);
  --atx:#f2efff; --atx2:#c6bde8; --atx3:#8d84b8;
  --aE:cubic-bezier(.16,1,.3,1);
  max-width:1280px;margin:0 auto;
  font-family:var(--bx-font,'Inter',sans-serif);
}
/* Le sol de l'écran : violet, plus jamais noir autour des panneaux */
body.view-formation .form-layout,body.view-formation .form-layout.hub-mode,
body.view-formation .form-main{
  background:
    radial-gradient(1100px 520px at 50% -10%,rgba(124,92,255,.17),transparent 62%),
    #191333;}

/* Entrée en scène commune : chaque bloc porte --d (délai). Les jauges
   (barres, fil, anneau) s'animent par keyframes `from` seul : elles
   partent de zéro et rejoignent la valeur posée en style inline. */
.ax5-in{opacity:0;transform:translateY(18px);
  animation:ax5In .65s var(--aE) forwards;animation-delay:var(--d,0s);}
@keyframes ax5In{to{opacity:1;transform:none}}
@keyframes ax5W{from{width:0}}
@keyframes ax5H{from{height:0}}
@keyframes ax5Ring{from{stroke-dashoffset:311}}

/* ── LE BLASON (hero) ─────────────────────────────────────────── */
.ax5-hero{position:relative;display:flex;align-items:center;gap:1.8rem;
  padding:1.7rem 1.9rem;margin-bottom:1.7rem;border-radius:22px;
  background:
    radial-gradient(520px 220px at 12% 0%,rgba(139,92,246,.16),transparent 70%),
    linear-gradient(160deg,var(--as1),var(--as2) 70%);
  border:1px solid var(--aline);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8);}
.ax5-crest{position:relative;flex:none;width:104px;height:104px;display:grid;place-items:center;}
.ax5-crest svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.ax5-crest svg.ring .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5;}
.ax5-crest svg.ring .fg{fill:none;stroke:var(--av2);stroke-width:5;stroke-linecap:round;
  animation:ax5Ring 1.2s var(--aE) .25s both;}
.ax5-crest-in{position:relative;display:grid;place-items:center;width:74px;height:74px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 32%,#241a44,#151027 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(0,0,0,.9);}
.ax5-who{min-width:0;flex:1;}
.ax5-kicker{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--av2);}
.ax5-rank{margin:.25rem 0 .1rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.ax5-rank b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--atx);}
.ax5-rank i{font-style:normal;font-size:13px;font-weight:700;color:var(--atx3);
  font-variant-numeric:tabular-nums;}
.ax5-next{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.55rem;max-width:430px;font-size:13px;color:var(--atx2);}
.ax5-next b{color:var(--atx);font-weight:700;}
.ax5-next .mono{font-family:'Space Mono',monospace;font-variant-numeric:tabular-nums;color:var(--atx3);}
.ax5-bar{height:9px;max-width:430px;border-radius:999px;background:rgba(255,255,255,.07);
  margin-top:.5rem;overflow:hidden;}
.ax5-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--av),var(--av2));
  animation:ax5W 1.1s var(--aE) .35s both;}
.ax5-heroact{display:flex;gap:.6rem;margin-top:.9rem;}
.ax5-testbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;
  border-radius:10px;border:1px solid var(--aline2);background:transparent;
  color:var(--atx2);font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s,transform .12s;}
.ax5-testbtn:hover{color:var(--atx);border-color:var(--av2);background:rgba(139,92,246,.08);}
.ax5-testbtn:active{transform:translateY(1px);}
.ax5-testbtn svg{color:var(--av2);}
/* Plaques de stats : XP or, série flamme, XP du jour violet */
.ax5-stats{display:grid;grid-template-columns:repeat(2,minmax(122px,1fr));gap:.6rem;flex:none;}
.ax5-stat{position:relative;padding:.7rem .85rem .6rem;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--aline);
  transition:transform .16s var(--aE),border-color .2s;}
.ax5-stat:hover{transform:translateY(-2px);border-color:var(--aline2);}
.ax5-stat b{display:flex;align-items:center;gap:.4rem;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.3rem;letter-spacing:-.02em;line-height:1;color:var(--atx);
  font-variant-numeric:tabular-nums;}
.ax5-stat span{display:block;margin-top:.3rem;font-size:13px;font-weight:600;color:var(--atx3);}
.ax5-stat.gold b{color:var(--ag);}
.ax5-stat.flame b svg{color:#ff8a3d;}
.ax5-stat.flame.off b{color:var(--atx3);}
.ax5-stat.flame.off b svg{color:#4a4762;}
.ax5-stat.day b{color:var(--av2);}

/* ── LA PAGE : parcours + rail latéral ────────────────────────── */
.ax5-main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.7rem;align-items:start;}
.ax5-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 1.2rem;padding:0 .2rem;}
.ax5-h2{margin:0;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.35rem;letter-spacing:-.02em;color:var(--atx);}
.ax5-headmeta{display:flex;align-items:center;gap:.7rem;font-size:13px;font-weight:600;
  color:var(--atx3);font-variant-numeric:tabular-nums;}
.ax5-headmeta .bar{width:120px;height:7px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;}
.ax5-headmeta .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--av),var(--av2));
  border-radius:999px;animation:ax5W 1s var(--aE) .3s both;}
.ax5-headmeta b{color:var(--atx);font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;}
.ax5-side{display:flex;flex-direction:column;gap:1.1rem;position:sticky;top:calc(68px + 1rem);}

/* ── LA ROADMAP : le fil qui se remplit ───────────────────────── */
.ax5-road{position:relative;padding:0 0 .5rem 0;}
.ax5-spine{position:absolute;left:31px;top:10px;bottom:14px;width:3px;
  border-radius:2px;background:rgba(190,170,255,.16);}
.ax5-spine i{position:absolute;left:0;top:0;width:100%;
  border-radius:2px;background:linear-gradient(180deg,var(--av),var(--av2));
  animation:ax5H 1.3s var(--aE) .45s both;}
.ax5-st{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:0 1rem;margin-bottom:1rem;}
/* Le nœud sur le fil */
.ax5-node{position:relative;z-index:2;align-self:start;justify-self:center;margin-top:14px;
  width:40px;height:40px;border-radius:50%;cursor:pointer;border:0;padding:0;
  display:grid;place-items:center;font-family:inherit;
  background:var(--as1);box-shadow:inset 0 0 0 2px rgba(190,170,255,.24);
  color:var(--atx3);transition:transform .16s var(--aE),box-shadow .2s;}
.ax5-node b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:14px;font-variant-numeric:tabular-nums;}
.ax5-node:hover{transform:scale(1.1);}
.ax5-node:focus-visible{outline:2px solid var(--av2);outline-offset:3px;}
.ax5-st.done .ax5-node{background:var(--sc,#8b5cf6);box-shadow:none;color:#0b0d16;}
.ax5-st.cur .ax5-node{box-shadow:inset 0 0 0 2px var(--sc,#a78bfa);color:var(--atx);}
.ax5-st.cur .ax5-node::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--sc,#a78bfa);opacity:.55;
  animation:ax5Ping 2.2s var(--aE) infinite;}
@keyframes ax5Ping{0%{transform:scale(.82);opacity:.55}75%,100%{transform:scale(1.22);opacity:0}}

/* La carte de station */
.ax5-card{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,var(--as1),var(--as2));
  border:1px solid var(--aline);
  transition:border-color .2s,transform .18s var(--aE),box-shadow .25s;}
.ax5-card:hover{border-color:var(--aline2);transform:translateY(-2px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8);}
.ax5-st.cur .ax5-card,.ax5-st.open .ax5-card{
  border-color:color-mix(in oklab,var(--sc,#a78bfa) 45%,transparent);}
.ax5-cardhd{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;cursor:pointer;}
.ax5-cardhd:focus-visible{outline:2px solid var(--av2);outline-offset:-2px;border-radius:18px;}
.ax5-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--sc,#8b5cf6) 16%,transparent);color:var(--sc,#a78bfa);}
.ax5-st.done .ax5-ico{background:var(--sc,#8b5cf6);color:#0b0d16;}
.ax5-hdtxt{min-width:0;flex:1;}
.ax5-cardtitle{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.08rem;letter-spacing:-.015em;color:var(--atx);line-height:1.15;}
.ax5-cardmeta{margin-top:.3rem;font-size:13px;font-weight:600;color:var(--atx3);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.ax5-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;
  border-radius:999px;font-size:13px;font-weight:700;
  background:color-mix(in oklab,var(--sc,#8b5cf6) 15%,transparent);
  color:var(--sc,#a78bfa);}
.ax5-st.done .ax5-chip{background:transparent;
  border:1px solid color-mix(in oklab,var(--sc,#8b5cf6) 40%,transparent);}
.ax5-chip.reco{background:var(--ag);color:var(--agk);}
.ax5-hdright{flex:none;display:flex;align-items:center;gap:.9rem;}
.ax5-count{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1rem;color:var(--atx);font-variant-numeric:tabular-nums;}
.ax5-count u{text-decoration:none;color:var(--atx3);font-size:.8rem;}
.ax5-chev{color:var(--atx3);transition:transform .3s var(--aE);}
.ax5-st.open .ax5-chev{transform:rotate(180deg);}
.ax5-cardbar{height:5px;background:rgba(190,170,255,.12);}
.ax5-cardbar i{display:block;height:100%;background:var(--sc,#8b5cf6);
  animation:ax5W .9s var(--aE) .35s both;}
/* Le détail qui se déplie */
.ax5-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--aE);}
.ax5-st.open .ax5-detail{grid-template-rows:1fr;}
.ax5-detail>div{overflow:hidden;}
.ax5-detin{padding:.35rem 1.15rem 1.1rem;border-top:1px dashed var(--aline);}
.ax5-tag{margin:.8rem 0 .2rem;font-size:13.5px;color:var(--atx2);line-height:1.5;}
.ax5-modname{margin:.85rem 0 .35rem;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--atx3);}
.ax5-les{display:flex;align-items:center;gap:.7rem;width:100%;padding:.5rem .6rem;
  border:0;border-radius:11px;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--atx2);
  transition:background .15s,color .15s,transform .12s;}
.ax5-les:hover{background:rgba(255,255,255,.045);color:var(--atx);}
.ax5-les:active{transform:translateY(1px);}
.ax5-les:focus-visible{outline:2px solid var(--av2);outline-offset:2px;}
.ax5-les i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);color:var(--atx3);}
.ax5-les.done i{background:var(--sc,#8b5cf6);box-shadow:none;color:#0b0d16;}
.ax5-les.next i{box-shadow:inset 0 0 0 1.5px var(--sc,#a78bfa);color:var(--atx);}
.ax5-les span{flex:1;min-width:0;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ax5-les em{font-style:normal;flex:none;font-family:'Space Mono',monospace;
  font-size:13px;color:var(--atx3);font-variant-numeric:tabular-nums;}
.ax5-detcta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  padding:.6rem 1.05rem;border:0;border-radius:11px;cursor:pointer;font-family:inherit;
  background:var(--sc,#8b5cf6);color:#0b0d16;font-size:14px;font-weight:800;
  transition:transform .14s var(--aE),filter .15s;}
.ax5-detcta:hover{transform:translateY(-2px);filter:brightness(1.06);}
.ax5-detcta:active{transform:translateY(0) scale(.98);}

@media(max-width:1060px){
  .ax5-main{grid-template-columns:1fr;}
  .ax5-side{position:static;}
}
@media(max-width:760px){
  .ax5-hero{flex-wrap:wrap;gap:1.1rem;padding:1.25rem 1.15rem;}
  .ax5-crest{width:84px;height:84px;}
  .ax5-crest-in{width:60px;height:60px;}
  .ax5-stats{flex:1 1 100%;grid-template-columns:1fr 1fr;}
  .ax5-rank b{font-size:1.6rem;}
}
@media(max-width:560px){
  .ax5-st{grid-template-columns:50px 1fr;gap:0 .7rem;}
  .ax5-spine{left:24px;}
  .ax5-node{width:36px;height:36px;}
  .ax5-cardhd{padding:.85rem .9rem;gap:.75rem;}
  .ax5-detin{padding:.35rem .9rem 1rem;}
  .ax5-count u{display:inline;}
  .ax5-hdright{gap:.5rem;}
}

/* ── TEST DE PLACEMENT (axp-) ─────────────────────────────────── */
.axp-ov{position:fixed;inset:0;z-index:12000;display:none;align-items:center;
  justify-content:center;padding:4vh 1rem;
  background:rgba(7,5,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.axp-ov.on{display:flex;}
.axp{width:min(680px,100%);max-height:92vh;overflow:auto;border-radius:24px;
  background:
    radial-gradient(480px 200px at 85% -10%,rgba(139,92,246,.2),transparent 70%),
    linear-gradient(165deg,#171230,#0f0c1d 70%);
  border:1px solid rgba(167,139,250,.26);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  animation:axpIn .5s cubic-bezier(.16,1,.3,1);}
@keyframes axpIn{from{opacity:0;transform:translateY(26px) scale(.97)}}
.axp-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem .9rem;}
.axp-steps{display:flex;gap:5px;}
.axp-steps i{width:26px;height:5px;border-radius:999px;background:rgba(255,255,255,.1);
  transition:background .3s;}
.axp-steps i.on{background:#a78bfa;}
.axp-skip{border:0;background:none;color:#7d7799;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;padding:.3rem .5rem;border-radius:8px;
  transition:color .15s;}
.axp-skip:hover{color:#f1eefb;}
.axp-body{padding:.4rem 1.7rem 1.7rem;}
.axp-q{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(1.25rem,3vw,1.6rem);letter-spacing:-.02em;line-height:1.2;
  color:#f1eefb;margin:0 0 .4rem;}
.axp-sub{font-size:14px;color:#a9a3c4;margin:0 0 1.2rem;line-height:1.5;}
.axp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.axp-opt{display:flex;align-items:center;gap:.85rem;padding:.95rem 1rem;text-align:left;
  border-radius:15px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.03);border:1px solid rgba(167,139,250,.16);
  color:#f1eefb;
  transition:transform .14s cubic-bezier(.16,1,.3,1),border-color .15s,background .15s;
  animation:axpOpt .45s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s);}
@keyframes axpOpt{from{opacity:0;transform:translateY(12px)}}
.axp-opt:hover{transform:translateY(-2px);border-color:#a78bfa;background:rgba(139,92,246,.1);}
.axp-opt:active{transform:translateY(0) scale(.985);}
.axp-opt:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;}
.axp-opt.sel{border-color:#a78bfa;background:rgba(139,92,246,.16);}
.axp-opt i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-style:normal;background:rgba(139,92,246,.16);color:#a78bfa;}
.axp-opt b{display:block;font-size:14.5px;font-weight:700;}
.axp-opt small{display:block;margin-top:.15rem;font-size:13px;font-weight:500;color:#a9a3c4;}
/* Étape plateforme : réutilise les cartes existantes, resserrées */
.axp-plats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;}
.axp-plats .form-platform-card{margin:0;}
.axp-later{display:block;margin:.9rem auto 0;border:0;background:none;color:#7d7799;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:.3rem .6rem;
  border-radius:8px;transition:color .15s;}
.axp-later:hover{color:#f1eefb;}
/* Écran de résultat */
.axp-res{text-align:center;padding:.6rem 0 .2rem;}
.axp-res-crest{width:88px;height:88px;margin:0 auto 1rem;border-radius:50%;
  display:grid;place-items:center;color:#221052;
  background:conic-gradient(from 210deg,#c4b5fd,#8b5cf6 30%,#c4b5fd 55%,#8b5cf6 80%,#c4b5fd);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9),inset 0 1px 1px rgba(255,255,255,.3);
  animation:bxBdgStrike .85s cubic-bezier(.2,.86,.24,1);}
.axp-res-k{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#a78bfa;}
.axp-res-lv{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.7rem;letter-spacing:-.02em;color:#f1eefb;margin:.3rem 0 0;}
.axp-res-sub{margin:.55rem auto 1.3rem;max-width:44ch;font-size:14px;color:#a9a3c4;line-height:1.55;}
.axp-res-start{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.4rem;
  border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  background:#8b5cf6;color:#f6f2ff;font-size:15px;font-weight:800;
  box-shadow:0 16px 36px -16px rgba(139,92,246,.7);
  transition:transform .14s cubic-bezier(.16,1,.3,1),filter .15s;}
.axp-res-start:hover{transform:translateY(-2px);filter:brightness(1.07);}
.axp-res-start:active{transform:translateY(0) scale(.98);}
.axp-res-alt{display:block;margin:.8rem auto 0;border:0;background:none;color:#7d7799;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:.3rem .6rem;}
.axp-res-alt:hover{color:#f1eefb;}
@media(max-width:640px){
  .axp-grid{grid-template-columns:1fr;}
  .axp-plats{grid-template-columns:1fr;}
  .axp-body{padding:.4rem 1.1rem 1.3rem;}
}

/* ── LECTEUR EN ÉTAPES (axr-) ─────────────────────────────────── */
.axr-rail{display:flex;align-items:center;gap:6px;margin:0 0 1.1rem;}
.axr-seg{flex:1;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.08);transition:background .25s;}
.axr-seg.done{background:var(--mc,#8b5cf6);}
.axr-seg.cur{background:color-mix(in oklab,var(--mc,#8b5cf6) 55%,#fff 12%);
  box-shadow:0 0 0 1.5px color-mix(in oklab,var(--mc,#8b5cf6) 55%,transparent);}
.axr-seg:focus-visible{outline:2px solid var(--mc,#8b5cf6);outline-offset:3px;}
.axr-count{flex:none;margin-left:.4rem;font-family:'Space Mono',monospace;font-size:13px;
  color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;}
.axr-step{animation:axrIn .4s cubic-bezier(.16,1,.3,1);}
@keyframes axrIn{from{opacity:0;transform:translateY(14px)}}
.axr-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px dashed rgba(255,255,255,.1);}
.axr-prev,.axr-next{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:inherit;border-radius:12px;transition:transform .14s cubic-bezier(.16,1,.3,1),
  background .15s,color .15s,border-color .15s,opacity .15s;}
.axr-prev{padding:.6rem 1rem;background:transparent;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65);font-size:13.5px;font-weight:650;}
.axr-prev:hover{color:#fff;border-color:rgba(255,255,255,.3);}
.axr-prev:disabled{opacity:.35;cursor:default;}
.axr-next{padding:.7rem 1.3rem;border:0;background:var(--mc,#8b5cf6);color:#0b0d16;
  font-size:14.5px;font-weight:800;}
.axr-next:hover{transform:translateY(-2px);filter:brightness(1.06);}
.axr-next:active{transform:translateY(0) scale(.98);}
.axr-all{border:0;background:none;color:rgba(255,255,255,.4);font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;padding:.3rem .5rem;border-radius:8px;}
.axr-all:hover{color:#fff;}

/* ── TOASTS XP — repeinture des .bxxp-toast existants ─────────── */
.bxxp-toast{position:fixed;right:18px;z-index:11000;display:flex;align-items:center;
  gap:.8rem;min-width:230px;padding:.8rem 1rem;border-radius:16px;
  background:linear-gradient(160deg,#1a1433,#120e24);
  border:1px solid rgba(167,139,250,.3);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
  animation:bxxpin .5s cubic-bezier(.16,1,.3,1);}
.bxxp-ico{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 210deg,#c4b5fd,#8b5cf6 30%,#c4b5fd 55%,#8b5cf6 80%,#c4b5fd);
  color:#221052;box-shadow:inset 0 1px 1px rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bxxp-amount{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-size:1.1rem;
  font-weight:800;letter-spacing:-.02em;line-height:1;color:#f0b429;
  font-variant-numeric:tabular-nums;}
.bxxp-amount.bxxp-unlock{color:#a78bfa;font-size:.95rem;}
.bxxp-lbl{margin-top:.2rem;font-size:13px;font-weight:600;color:#a9a3c4;}

@media(prefers-reduced-motion:reduce){
  .ax5-in,.ax5-bar i,.ax5-headmeta .bar i,.ax5-cardbar i,.ax5-spine i,
  .ax5-crest svg.ring .fg,.axp,.axp-opt,.axp-res-crest,.axr-step,.bxxp-toast{
    animation:none;opacity:1;transform:none;}
  .ax5-st.cur .ax5-node::after{animation:none;}
  .ax5-detail{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §20 — PROFIL v4 (pf4-) — « LA CARTE DE JOUEUR »
   ═══════════════════════════════════════════════════════════════════
   Verdict client sur la v3 (18/08) : couleurs moches, grosse page
   qu'on ne comprend pas, boutons perdus en bas, trop d'infos, fade
   avec le noir. La v3 était une PAGE ; la v4 est un OBJET.
   · À l'arrivée : UNE carte de joueur — un objet physique qui se
     FRAPPE (retombe et se pose), puis se PENCHE sous le pointeur,
     le reflet qui suit. C'est la signature de l'écran.
   · La carte prend la couleur de TON rang (--rk) : monter en rang
     change la matière de ta carte. C'est la teinte qui encode une
     donnée (DA §4) — l'or reste la récompense (médailles, place).
   · Autour, quatre satellites, pas un de plus : la place au
     classement (une ligne), la vitrine de médailles, la frise des
     8 rangs, la collection de cards. Plus d'onglets, plus de
     panneau « plan », plus de to-do : un profil, pas un dashboard.
   Le §13 (pf3-) reste servi : les Paramètres utilisent ses boutons.
   ═══════════════════════════════════════════════════════════════ */

.pf4{max-width:1200px;margin:0 auto;font-family:var(--bx-font);color:var(--bx-text);
  -webkit-font-smoothing:antialiased;
  --aE:cubic-bezier(.16,1,.3,1);}
.pf4 *{box-sizing:border-box}
.pf4 button{font-family:inherit}
.pf4-in{opacity:0;transform:translateY(16px);
  animation:pf4In .6s var(--aE) forwards;animation-delay:var(--d,0s)}
@keyframes pf4In{to{opacity:1;transform:none}}
@keyframes pf4W{from{width:0}}

.pf4-main{display:grid;grid-template-columns:400px minmax(0,1fr);gap:1.7rem;align-items:start}
.pf4-left{position:sticky;top:calc(68px + 1rem)}
@media(max-width:1020px){
  .pf4-main{grid-template-columns:minmax(0,1fr)}
  .pf4-left{position:static;max-width:430px;margin:0 auto;width:100%}
}
@media(max-width:480px){
  .pf4-body{padding:0 1.05rem 1rem}
  .pf4-acts{left:.75rem;justify-content:flex-end;flex-wrap:wrap}
}

/* ── LA CARTE ─────────────────────────────────────────────────── */
/* Le socle en perspective : la carte s'y penche sous le pointeur */
.pf4-tilt{perspective:1300px}
.pf4-card{position:relative;border-radius:24px;overflow:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;
  background:linear-gradient(170deg,#15161f,#0c0d14 72%);
  border:1px solid color-mix(in oklab,var(--rk,#38bdf8) 32%,rgba(255,255,255,.09));
  box-shadow:0 40px 80px -36px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s var(--aE);
  /* fill:none — un fill `both` maintiendrait `transform:none` après
     l'entrée et écraserait le tilt au pointeur. */
  animation:pf4Deal .8s var(--aE);}
@keyframes pf4Deal{
  0%{opacity:0;transform:translateY(-48px) rotateX(24deg) scale(.96)}
  62%{opacity:1;transform:translateY(5px) rotateX(-3deg)}
  100%{opacity:1;transform:none}}
/* La tranche : le liseré du rang sur l'arête haute */
.pf4-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--rk,#38bdf8) 22%,var(--rk,#38bdf8) 78%,transparent)}
/* Le reflet qui suit le pointeur */
.pf4-card::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(560px 300px at var(--mx,50%) var(--my,24%),rgba(255,255,255,.09),transparent 62%);
  opacity:0;transition:opacity .25s}
.pf4-tilt:hover .pf4-card::after{opacity:1}

.pf4-cv{position:relative;height:132px;background:var(--cv,#16141f)}
/* Le voile du rang : la carte prend la matière de TON rang */
.pf4-cv::before{content:'';position:absolute;inset:0;
  background:linear-gradient(205deg,color-mix(in oklab,var(--rk,#38bdf8) 30%,transparent),transparent 62%)}
.pf4-cv::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,11,.08),#101018 97%)}
.pf4-acts{position:absolute;top:.75rem;right:.75rem;z-index:5;display:flex;gap:.45rem}
.pf4-act{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;
  border-radius:9px;cursor:pointer;font-size:13px;font-weight:650;
  background:rgba(8,8,14,.55);border:1px solid rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .15s,border-color .15s,transform .12s}
.pf4-act:hover{background:rgba(8,8,14,.8);border-color:rgba(255,255,255,.35)}
.pf4-act:active{transform:translateY(1px)}
.pf4-act.ok{border-color:#34d399;color:#34d399}

.pf4-body{position:relative;padding:0 1.4rem 1.15rem;text-align:center;margin-top:-46px;z-index:2}
.pf4-ava{position:relative;width:92px;height:92px;margin:0 auto;border-radius:28px;overflow:hidden;
  display:grid;place-items:center;font-size:2.1rem;font-weight:800;color:#fff;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--rk,#38bdf8) 75%,#000 10%),0 14px 30px -12px rgba(0,0,0,.9)}
.pf4-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf4-name{margin-top:.75rem;font-family:var(--bx-font-head,'Bricolage Grotesque',sans-serif);
  font-weight:800;font-size:1.6rem;letter-spacing:-.025em;line-height:1.1;color:var(--bx-text,#f2f3f8)}
.pf4-card .pf4-name{color:#f2f3f8}
.pf4-sub{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.4rem;flex-wrap:wrap}
.pf4-handle{border:0;background:none;padding:.1rem .2rem;cursor:pointer;
  font-family:var(--bx-mono,'Space Mono',monospace);font-size:13px;color:#8b90a8;
  transition:color .15s}
.pf4-handle:hover{color:#fff}
.pf4-bio{margin:.6rem auto 0;max-width:32ch;font-size:13.5px;line-height:1.5;color:#a9adc2}

/* La plaque de rang : l'aplat du rang, son encre par-dessus */
.pf4-plate{display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;padding:.75rem .9rem;
  border-radius:15px;text-align:left;
  background:color-mix(in oklab,var(--rk,#38bdf8) 13%,#0c0d14);
  border:1px solid color-mix(in oklab,var(--rk,#38bdf8) 35%,transparent)}
.pf4-plate .bxrank{flex:none}
.pf4-plate-tx{flex:1;min-width:0}
.pf4-plate-n{display:block;font-family:var(--bx-font-head,'Bricolage Grotesque',sans-serif);font-weight:800;
  font-size:1.12rem;letter-spacing:-.02em;color:#f2f3f8;line-height:1.1}
.pf4-plate-s{display:block;margin-top:.2rem;font-size:13px;font-weight:600;color:#9aa0b8;
  font-variant-numeric:tabular-nums}
.pf4-plate-r{flex:none;font-family:var(--bx-mono,'Space Mono',monospace);font-size:13px;
  color:color-mix(in oklab,var(--rk,#38bdf8) 80%,#fff 12%);font-variant-numeric:tabular-nums}
.pf4-xp{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.7rem}
.pf4-xp i{display:block;height:100%;border-radius:999px;background:var(--rk,#38bdf8);
  animation:pf4W 1.1s var(--aE) .45s both}
.pf4-xprow{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.45rem;font-size:13px;color:#9aa0b8;font-variant-numeric:tabular-nums}
.pf4-xprow b{color:#f2f3f8;font-weight:700}
.pf4-xprow .mono{font-family:var(--bx-mono,'Space Mono',monospace);color:#8b90a8}

/* Les médailles embarquées sur la carte */
.pf4-medals{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:1rem;min-height:44px}
.pf4-medals .bx-bdgm .bx-bdg-plate{width:40px;height:45px}
.pf4-medals-more{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.25);background:none;color:#9aa0b8;cursor:pointer;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:color .15s,border-color .15s,transform .13s}
.pf4-medals-more:hover{color:#fff;border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.pf4-nomedal{font-size:13px;color:#8b90a8}

/* Le cartouche : la carte se signe comme un objet imprimé */
.pf4-serial{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.05rem;padding-top:.8rem;border-top:1px dashed rgba(255,255,255,.12);
  font-family:var(--bx-mono,'Space Mono',monospace);font-size:13px;letter-spacing:.06em;
  color:#787d95;text-transform:uppercase;white-space:nowrap}
.pf4-serial b{flex:1;min-width:0;color:#a9adc2;font-weight:400;overflow:hidden;text-overflow:ellipsis}
.pf4-serial span{flex:none}
.pf4-soc{margin-top:.55rem;font-size:13px;color:#9aa0b8;text-align:center}
.pf4-soc b{color:#f2f3f8}
.pf4-soc .soc-row{justify-content:center;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pf4-soc .soc-counts{display:flex;gap:.9rem}

/* ── LES SATELLITES (colonne droite) ──────────────────────────── */
.pf4-panel{background:var(--bx-surface);border:1px solid var(--bx-line);border-radius:18px;
  overflow:hidden;margin-bottom:1.1rem}
.pf4-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.2rem .35rem}
.pf4-hd-t{font-family:var(--bx-font-head,'Bricolage Grotesque',sans-serif);font-weight:800;
  font-size:1.12rem;letter-spacing:-.02em;color:var(--bx-text)}
.pf4-hd-c{font-family:var(--bx-mono);font-size:13px;color:var(--bx-text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pf4-lnk{display:inline-flex;align-items:center;gap:.35rem;border:0;background:none;padding:.2rem 0;
  cursor:pointer;font-size:13px;font-weight:650;color:var(--bx-text-2);transition:color .15s}
.pf4-lnk:hover{color:var(--bx-text)}
.pf4-lnk svg{transition:transform .18s var(--aE)}
.pf4-lnk:hover svg{transform:translateX(3px)}

/* La place au classement : une ligne, pas un panneau */
.pf4-strip{display:flex;align-items:center;gap:1rem;padding:.85rem 1.2rem;margin-bottom:1.1rem;
  border-radius:16px;background:var(--bx-surface);border:1px solid var(--bx-line);cursor:pointer;
  transition:border-color .18s,transform .16s var(--aE)}
.pf4-strip:hover{border-color:var(--bx-line-strong);transform:translateY(-2px)}
.pf4-strip-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in oklab,#f0b429 15%,transparent);color:#f0b429}
.pf4-strip-pos{flex:none;font-family:var(--bx-font-head,'Bricolage Grotesque',sans-serif);
  font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:#f0b429;
  font-variant-numeric:tabular-nums}
.pf4-strip-pos small{font-size:.85rem;color:var(--bx-text-2);font-weight:600}
.pf4-strip-s{flex:1;min-width:0;font-size:13.5px;color:var(--bx-text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf4-strip-s b{color:var(--bx-text)}
.pf4-strip .pf4-lnk{flex:none}

/* La frise des 8 rangs */
.pf4-ranks{display:grid;grid-template-columns:repeat(8,1fr);gap:.45rem;padding:.9rem 1.2rem 1.15rem}
@media(max-width:640px){.pf4-ranks{grid-template-columns:repeat(4,1fr);gap:.6rem .45rem}}
.pf4-rk{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.65rem .25rem .55rem;border-radius:13px;text-align:center;
  border:1px solid transparent;transition:transform .16s var(--aE),border-color .18s}
.pf4-rk:hover{transform:translateY(-2px);border-color:var(--bx-line)}
.pf4-rk-n{font-size:13px;font-weight:700;color:var(--bx-text);line-height:1.1}
.pf4-rk-x{font-family:var(--bx-mono);font-size:12.5px;color:var(--bx-text-3);
  font-variant-numeric:tabular-nums}
.pf4-rk.lock .bxrank{opacity:.38}
.pf4-rk.lock .pf4-rk-n{color:var(--bx-text-3)}
.pf4-rk.now{border-color:color-mix(in oklab,var(--rc,#38bdf8) 45%,transparent);
  background:color-mix(in oklab,var(--rc,#38bdf8) 8%,transparent)}
.pf4-rk-bar{width:100%;height:4px;border-radius:3px;background:rgba(127,127,150,.18);
  overflow:hidden;margin-top:.15rem}
.pf4-rk-bar i{display:block;height:100%;border-radius:3px;background:var(--rc,#38bdf8);
  animation:pf4W 1s var(--aE) .5s both}

/* La collection (cards PnL) : la carte publiée + les modèles */
.pf4-pub{display:flex;gap:1.1rem;align-items:center;padding:1rem 1.2rem .2rem;flex-wrap:wrap}
.pf4-pub canvas{width:210px;max-width:100%;border-radius:12px;
  box-shadow:0 16px 36px -18px rgba(0,0,0,.85)}
.pf4-pub-tx{flex:1;min-width:180px}
.pf4-pub-t{font-weight:700;font-size:.95rem;color:var(--bx-text)}
.pf4-pub-s{margin-top:.25rem;font-size:13px;color:var(--bx-text-2)}
.pf4-pub-a{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  .pf4-card{animation:none;transform:none!important}
  .pf4-card::after{display:none}
  .pf4-in{animation:none;opacity:1;transform:none}
  .pf4-xp i,.pf4-rk-bar i{animation:none}
}

/* ── §20.1 — LA VITRINE CHOISIE (pf4-slot / pf4-pick) ─────────────
   Le client : « on devrait pouvoir choisir les badges à exposer —
   un espace vide avec un +, et on clique ». La rangée de médailles
   de la carte devient quatre EMPLACEMENTS : pleins = médailles
   choisies, vides = cercle pointillé avec un +. Un clic ouvre le
   sélecteur ; le choix part au classement (champ cosmétique) et le
   profil public l'affiche, filtré par les badges réellement acquis. */
.pf4-slot{position:relative;width:46px;height:46px;border-radius:50%;border:0;padding:0;
  background:none;display:grid;place-items:center;cursor:pointer;color:#8b90a8;
  transition:transform .14s var(--aE,cubic-bezier(.16,1,.3,1)),color .15s,box-shadow .15s}
.pf4-slot .bx-bdgm{pointer-events:none}
.pf4-slot .bx-bdg-plate{width:40px;height:45px}
.pf4-slot:not(.filled){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.pf4-slot:not(.filled)::before{content:'';position:absolute;inset:4px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.22);transition:border-color .15s}
.pf4-slot:hover{transform:translateY(-2px);color:#fff}
.pf4-slot:not(.filled):hover::before{border-color:rgba(255,255,255,.5)}
.pf4-slot:focus-visible{outline:2px solid #8b90a8;outline-offset:2px}
span.pf4-slot{cursor:default}
span.pf4-slot:hover{transform:none}

.pf4-pick-ov{position:fixed;inset:0;z-index:12000;display:none;align-items:center;
  justify-content:center;padding:4vh 1rem;
  background:rgba(5,6,10,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pf4-pick-ov.on{display:flex}
.pf4-pick{width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:22px;
  background:linear-gradient(170deg,#15161f,#0c0d14 75%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  padding:1.2rem 1.45rem 1.35rem;color:#f2f3f8;
  animation:pf4PickIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes pf4PickIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.pf4-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.pf4-pick-hd b{font-family:var(--bx-font-head,'Bricolage Grotesque',sans-serif);
  font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.pf4-pick-x{border:0;background:none;color:#8b90a8;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:.2rem .45rem;border-radius:8px;transition:color .15s}
.pf4-pick-x:hover{color:#fff}
.pf4-pick-s{margin:.35rem 0 1rem;font-size:13.5px;line-height:1.5;color:#a9adc2}
.pf4-pick-slots{display:flex;justify-content:center;gap:.7rem;padding:.9rem;
  border-radius:15px;background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.14)}
.pf4-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
@media(max-width:560px){.pf4-pick-grid{grid-template-columns:1fr}}
.pf4-pick-it{position:relative;display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;
  border-radius:13px;cursor:pointer;text-align:left;font-family:inherit;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);color:#f2f3f8;
  transition:border-color .15s,background .15s,transform .13s}
.pf4-pick-it:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.pf4-pick-it.on{border-color:#f0b429;background:color-mix(in oklab,#f0b429 9%,transparent)}
.pf4-pick-it .bx-bdgm{pointer-events:none}
.pf4-pick-n{flex:1;min-width:0;font-size:13.5px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf4-pick-ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;background:#f0b429;color:#2e1d00}
.pf4-pick-empty{padding:1rem .3rem;font-size:13.5px;color:#a9adc2}
.pf4-pick-ft{display:flex;justify-content:space-between;gap:.7rem;margin-top:1.15rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.pf4-pick{animation:none}}

/* ── §19.2 — ACADEMY v7 : le monde violet complet ─────────────────
   Trois pages internes (Parcours · Défis · Boutique), la monnaie ⬡
   Blocks, et la grammaire Duolingo : surfaces qui portent la teinte,
   boutons CHARNUS (épaisseur dessous, on les enfonce), récompense à
   l'or. Les médailles ne s'achètent pas — la boutique vend du
   cosmétique (bannières, skins de PnL card, cadres d'avatar). */

/* Les panneaux latéraux passent dans le monde (ils étaient noirs) */
.ax5 .axv-panel{background:linear-gradient(165deg,#251d4e,#1b1540 62%);
  border-color:rgba(170,150,255,.18);box-shadow:0 18px 42px -28px rgba(10,5,30,.9);}
.ax5 .axv-panel.lb{border-color:rgba(170,150,255,.28);}
.ax5 .axv-panel.me{background:linear-gradient(150deg,rgba(124,92,255,.2),#1e1745 55%,#181240);
  border-color:rgba(170,150,255,.3);}
.ax5 .axv-lb-row:hover{background:rgba(190,170,255,.07);}
.ax5 .axv-lb-row.me{background:rgba(124,92,255,.16);}

/* Boutons charnus : l'épaisseur dessous, le clic les enfonce */
.ax5-detcta,.axp-res-start,.ax5-buy{
  box-shadow:0 4px 0 color-mix(in oklab,var(--sc,#7c5cff) 52%,#000);}
.ax5-detcta:hover{transform:translateY(-1px);}
.ax5-detcta:active,.axp-res-start:active,.ax5-buy:active{
  transform:translateY(3px);box-shadow:0 1px 0 color-mix(in oklab,var(--sc,#7c5cff) 52%,#000);}
.axp-res-start{--sc:#7c5cff;background:#7c5cff;}
.axp-res-start:hover{transform:translateY(-1px);filter:none;background:#8d70ff;}
.axr-next{box-shadow:0 4px 0 color-mix(in oklab,var(--mc,#7c5cff) 52%,#000);}
.axr-next:hover{transform:translateY(-1px);filter:none;
  background:color-mix(in oklab,var(--mc,#7c5cff) 88%,#fff);}
.axr-next:active{transform:translateY(3px);
  box-shadow:0 1px 0 color-mix(in oklab,var(--mc,#7c5cff) 52%,#000);}

/* ── La navigation interne : Parcours · Défis · Boutique ── */
.ax5-nav{position:relative;display:flex;gap:.35rem;margin:0 0 1.5rem;padding:5px;
  border-radius:16px;width:max-content;max-width:100%;
  background:rgba(12,8,30,.55);border:1px solid var(--aline);}
.ax5-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1.15rem;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;color:var(--atx3);background:none;
  transition:color .18s,transform .12s;}
.ax5-tab:hover{color:var(--atx);}
.ax5-tab:active{transform:translateY(1px);}
.ax5-tab.on{color:#fff;}
.ax5-tab svg{opacity:.9;}
.ax5-tab .blk{display:inline-flex;align-items:center;gap:.25rem;margin-left:.15rem;
  padding:.12rem .5rem;border-radius:999px;font-size:12.5px;font-weight:800;
  background:var(--ag);color:var(--agk);font-variant-numeric:tabular-nums;}
.ax5-navink{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:12px;
  background:var(--av);box-shadow:0 3px 0 #4a35a8,0 10px 24px -10px rgba(124,92,255,.8);
  transition:left .3s var(--aE),width .3s var(--aE);}
@media(max-width:560px){.ax5-tab{padding:.55rem .8rem;font-size:13px;}}

/* ── DÉFIS : la boucle du jour ── */
.ax5-qgrid{display:flex;flex-direction:column;gap:.7rem;}
.ax5-qh{margin:1.4rem 0 .6rem;display:flex;align-items:baseline;gap:.7rem;}
.ax5-qh b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.05rem;letter-spacing:-.015em;color:var(--atx);}
.ax5-qh span{font-size:13px;color:var(--atx3);}
.ax5-quest{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:16px;
  background:linear-gradient(165deg,var(--as1),var(--as2));border:1px solid var(--aline);
  transition:border-color .2s,transform .16s var(--aE);}
.ax5-quest:hover{border-color:var(--aline2);transform:translateY(-1px);}
.ax5-quest.claimed{opacity:.6;}
.ax5-qico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(124,92,255,.18);color:var(--av2);}
.ax5-quest.done .ax5-qico{background:var(--av);color:#fff;}
.ax5-qtx{flex:1;min-width:0;}
.ax5-qt{font-size:14.5px;font-weight:700;color:var(--atx);}
.ax5-qs{margin-top:.2rem;font-size:13px;color:var(--atx3);}
.ax5-qbar{height:6px;border-radius:999px;background:rgba(190,170,255,.14);
  overflow:hidden;margin-top:.5rem;max-width:260px;}
.ax5-qbar i{display:block;height:100%;border-radius:999px;background:var(--av);
  transition:width .6s var(--aE);}
.ax5-qr{flex:none;display:flex;align-items:center;gap:.6rem;}
.ax5-qblk{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1rem;color:var(--ag);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ax5-claim{border:0;border-radius:11px;padding:.55rem 1rem;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:800;background:var(--ag);color:var(--agk);
  box-shadow:0 4px 0 #9a7413;transition:transform .13s var(--aE),box-shadow .13s,filter .15s;}
.ax5-claim:hover{filter:brightness(1.06);transform:translateY(-1px);}
.ax5-claim:active{transform:translateY(3px);box-shadow:0 1px 0 #9a7413;}
.ax5-claim:disabled{background:rgba(190,170,255,.12);color:var(--atx3);
  box-shadow:none;cursor:default;transform:none;filter:none;}
.ax5-claim.ok{background:transparent;color:var(--ag);box-shadow:none;
  border:1px solid color-mix(in oklab,var(--ag) 45%,transparent);cursor:default;}

/* ── BOUTIQUE ── */
.axsh-bal{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.3rem;margin-bottom:1.4rem;
  border-radius:18px;border:1px solid color-mix(in oklab,var(--ag) 35%,transparent);
  background:
    radial-gradient(460px 160px at 8% 0%,color-mix(in oklab,var(--ag) 16%,transparent),transparent 70%),
    linear-gradient(165deg,var(--as1),var(--as2));}
.axsh-bal-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--ag);color:var(--agk);box-shadow:0 4px 0 #9a7413;}
.axsh-bal-n{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.7rem;letter-spacing:-.02em;line-height:1;color:var(--atx);
  font-variant-numeric:tabular-nums;}
.axsh-bal-s{margin-top:.25rem;font-size:13px;color:var(--atx3);}
.axsh-bal-go{margin-left:auto;flex:none;}
.axsh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;}
.axsh-it{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,var(--as1),var(--as2));border:1px solid var(--aline);
  transition:border-color .2s,transform .16s var(--aE),box-shadow .2s;}
.axsh-it:hover{border-color:var(--aline2);transform:translateY(-2px);
  box-shadow:0 18px 40px -22px rgba(10,5,30,.9);}
.axsh-prev{position:relative;height:92px;display:grid;place-items:center;}
.axsh-prev.banner{height:74px;}
.axsh-prev .pv{position:absolute;inset:10px;border-radius:11px;}
.axsh-prev .ring{width:58px;height:58px;border-radius:20px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.3rem;}
.axsh-b{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.axsh-n{font-size:14.5px;font-weight:800;color:var(--atx);}
.axsh-s{font-size:13px;color:var(--atx3);line-height:1.4;flex:1;}
.axsh-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.2rem;}
.axsh-price{display:inline-flex;align-items:center;gap:.3rem;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;font-size:1.02rem;
  color:var(--ag);font-variant-numeric:tabular-nums;}
.ax5-buy{border:0;border-radius:11px;padding:.5rem .95rem;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:800;background:var(--av);color:#fff;--sc:#7c5cff;
  transition:transform .13s var(--aE),box-shadow .13s,background .15s;}
.ax5-buy:hover{background:#8d70ff;}
.ax5-buy:disabled{background:rgba(190,170,255,.12);color:var(--atx3);box-shadow:none;
  cursor:default;transform:none;}
.ax5-buy.own{background:transparent;color:var(--av2);box-shadow:none;
  border:1px solid var(--aline2);}
.ax5-buy.own.eq{color:var(--ag);border-color:color-mix(in oklab,var(--ag) 45%,transparent);}
.axsh-note{margin-top:1.1rem;font-size:13px;color:var(--atx3);line-height:1.5;}

/* Cadres d'avatar : aperçus + application réelle (profil) */
.axfr-gold .pf4-ava,.axsh-prev .ring.axfr-gold{box-shadow:0 0 0 3px #f0b429,0 0 0 6px rgba(240,180,41,.25)!important;}
.axfr-iris .pf4-ava,.axsh-prev .ring.axfr-iris{box-shadow:0 0 0 3px #7c5cff,0 0 0 6px rgba(124,92,255,.3)!important;}
.axfr-degrade .pf4-ava,.axsh-prev .ring.axfr-degrade{box-shadow:0 0 0 3px #14f195,0 0 0 6px rgba(153,69,255,.45)!important;}

/* ── Le quiz de validation passe au monde violet + boutons charnus ── */
body:not(.bx-light) .axq{background:linear-gradient(165deg,#251d4e,#1b1540 62%);
  border:1px solid rgba(170,150,255,.24);}
body:not(.bx-light) .axq-head{background:linear-gradient(100deg,rgba(124,92,255,.16),transparent 65%);
  border-bottom:1px solid rgba(170,150,255,.16);}
body:not(.bx-light) .axq .form-quiz-opt{background:rgba(255,255,255,.04);
  border:1px solid rgba(170,150,255,.2);border-radius:13px;color:#e9e4ff;
  padding:.85rem 1rem;font-size:.92rem;
  box-shadow:0 3px 0 rgba(10,5,30,.55);
  transition:transform .13s cubic-bezier(.16,1,.3,1),box-shadow .13s,border-color .15s,background .15s;}
body:not(.bx-light) .axq .form-quiz-opt:hover{border-color:#9d85ff;background:rgba(124,92,255,.14);
  transform:translateY(-1px);}
body:not(.bx-light) .axq .form-quiz-opt:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(10,5,30,.55);}
body:not(.bx-light) .axq .form-quiz-opt.correct{background:#22C55e;border-color:#22c55e;color:#04200f;
  font-weight:700;}
body:not(.bx-light) .axq .form-quiz-opt.wrong{background:rgba(255,92,92,.16);border-color:#ff5c5c;color:#ffd7d7;}
body:not(.bx-light) .axq-btn{background:#7c5cff;color:#fff;border:0;box-shadow:0 4px 0 #4a35a8;
  transition:transform .13s cubic-bezier(.16,1,.3,1),box-shadow .13s,background .15s;}
body:not(.bx-light) .axq-btn:hover{background:#8d70ff;}
body:not(.bx-light) .axq-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4a35a8;}

@media(prefers-reduced-motion:reduce){
  .ax5-navink{transition:none;}
}

/* Puces de skin (créateur de PnL card) + verrou bannière (Paramètres) */
.pnl2-skins{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem;}
.pnl2-skin{border:1px solid rgba(170,150,255,.3);background:rgba(255,255,255,.04);
  color:#c6bde8;border-radius:999px;padding:.4rem .85rem;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s,transform .12s;}
.pnl2-skin:hover{color:#fff;border-color:#9d85ff;}
.pnl2-skin:active{transform:translateY(1px);}
.pnl2-skin.on{background:#7c5cff;border-color:transparent;color:#fff;
  box-shadow:0 3px 0 #4a35a8;}
.pf3-cover-opt{position:relative;}
.pf3-cover-opt.lockd{opacity:.75;}
.pf3-cover-lock{position:absolute;right:6px;bottom:6px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(8,8,14,.72);color:#cfc7f2;border:1px solid rgba(255,255,255,.25);}
.ax5-qt,.ax5-qs{display:block;}
.ax5-qtx .ax5-qs{margin-top:.2rem;}
.axsh-bal-n,.axsh-bal-s{display:block;}
@media(max-width:600px){
  .ax5-nav{width:100%;overflow-x:auto;scrollbar-width:none;}
  .ax5-nav::-webkit-scrollbar{display:none;}
  .axsh-bal{flex-wrap:wrap;}
  .axsh-bal-go{margin-left:0;flex:1 1 100%;}
  .ax5-quest{flex-wrap:wrap;}
  .ax5-qr{width:100%;justify-content:flex-end;}
}

/* ═══ §21 — NAV CONNECTÉE v5 : la barre devient un objet ══════════
   Verdict client sur la v4 : trop petite, petits boutons pas beaux,
   contraste noir raté. Ici :
   · La BARRE a une surface (dégradé ardoise teinté + blur + filet
     lavande), plus un voile noir anonyme.
   · Sur grand écran la navigation est CENTRÉE (logo à gauche,
     compte à droite) ; en-dessous de 1300px elle se range à gauche.
   · Un seul rythme de contrôle : 40px, rayon 12. L'actif est une
     pastille violette PLEINE avec l'épaisseur dessous (grammaire
     charnue de l'Academy) — on sait toujours où on est.
   · Les panneaux déroulants deviennent des objets : tuile d'icône à
     LA COULEUR DE L'OUTIL, titre + description, glissement au
     survol, enfoncement au clic. */
body.bx-auth:not(.bx-light) #mainNav,
body[class*="view-"]:not(.bx-light) #mainNav{
  background:linear-gradient(180deg,rgba(23,21,40,.94),rgba(15,14,27,.92))!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(170,150,255,.14)!important;}
/* Centrage OPTIQUE par marges flex : la rangée de liens se centre entre
   le logo et le bloc de droite, à TOUTES les largeurs. Post-mortem : le
   centrage en `position:absolute;left:50%` cassait selon la largeur et
   le zoom (liens décalés, vide à droite) — plus jamais d'absolu ici.
   Scopé sur view-* ET bx-auth : la classe bx-auth n'est posée qu'au
   login et peut manquer sur une session restaurée. */
body.bx-auth #navAuth,body[class*="view-"] #navAuth{
  flex:1;align-items:center;gap:8px;min-width:0;}
body.bx-auth .bxnav-links,body[class*="view-"] .bxnav-links{margin:0 auto;}
body.bx-auth .bxnav-sep,body[class*="view-"] .bxnav-sep{display:none;}
body.bx-auth .bxnav-right,body[class*="view-"] .bxnav-right{margin-left:0;}
/* La barre s'aligne sur la gouttière du contenu, bx-auth présent ou non */
body[class*="view-"] #mainNav{padding:0 max(32px,calc((100% - 1280px) / 2));}
.bxnav-links{gap:6px;}
.bxnav-link{height:40px;padding:0 1.05rem;border-radius:12px;font-size:14px;font-weight:650;
  letter-spacing:-.01em;gap:.45rem;
  transition:color .15s ease,background-color .15s ease,transform .12s ease,box-shadow .13s ease;}
.bxnav-link:hover{color:var(--bx-text);background:rgba(190,170,255,.08);transform:translateY(-1px);}
.bxnav-link:active{transform:translateY(1px);}
.bxnav-link.active{color:#fff;background:#7c5cff;font-weight:700;
  box-shadow:0 3px 0 #4a35a8,0 12px 26px -12px rgba(124,92,255,.7);}
body.bx-light .bxnav-link.active{color:#fff;background:var(--bx-violet);
  box-shadow:0 3px 0 #5b21b6;}
.bxnav-group.open>.bxnav-link{color:var(--bx-text);background:rgba(190,170,255,.1);}
.bxnav-chev{opacity:.6;}

.bxnav-menu{min-width:302px;padding:.5rem;border-radius:16px;top:calc(100% + 12px);
  background:#191729;border:1px solid rgba(170,150,255,.18);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);}
body.bx-light .bxnav-menu{background:#fff;border-color:#e5e7eb;}
.bxnav-menu .bx-menu-item{display:flex;align-items:center;gap:.85rem;padding:.6rem .65rem;
  border-radius:12px;font-size:14px;font-weight:700;color:var(--bx-text);
  transition:background .14s ease,transform .16s cubic-bezier(.16,1,.3,1);}
.bxnav-menu .bx-menu-item:hover{background:rgba(190,170,255,.09);transform:translateX(3px);}
.bxnav-menu .bx-menu-item:active{transform:translateX(3px) scale(.985);}
.bxnav-menu .bx-menu-item span:last-child{gap:.16rem;}
.bxnav-menu .bx-menu-item span:last-child i{font-size:12.5px;font-weight:500;}
/* L'icône devient une tuile à la couleur de l'outil */
.bxnav-menu .bx-menu-item svg{width:36px;height:36px;padding:9px;border-radius:11px;
  background:rgba(190,170,255,.1);color:var(--bx-text-2);
  transition:transform .18s cubic-bezier(.16,1,.3,1),background .15s,color .15s;}
.bxnav-menu .bx-menu-item:hover svg{transform:scale(1.07);}
.bxnav-menu .bx-menu-item[data-route="scanner"] svg{background:rgba(56,189,248,.16);color:#38bdf8;}
.bxnav-menu .bx-menu-item[data-route="rug-sniping"] svg{background:rgba(52,211,153,.16);color:#34d399;}
.bxnav-menu .bx-menu-item[data-route="leaderboard"] svg{background:rgba(240,180,41,.16);color:#f0b429;}
.bxnav-menu .bx-menu-item[data-route="strategies"] svg{background:rgba(255,138,61,.16);color:#ff8a3d;}
.bxnav-menu .bx-menu-item[data-route="events"] svg{background:rgba(153,69,255,.18);color:#b47aff;}
.bxnav-menu .bx-menu-item.active{background:rgba(124,92,255,.15);color:#fff;}
.bxnav-menu .bx-menu-item.active svg{color:#fff;background:#7c5cff;}

.bxnav-right{gap:9px;}
.bxnav-search{height:40px;width:240px;border-radius:12px;font-size:13.5px;
  padding:0 .55rem 0 .8rem;background:rgba(255,255,255,.045);
  border-color:rgba(170,150,255,.15);
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .12s ease;}
.bxnav-search:hover{border-color:rgba(170,150,255,.4);color:var(--bx-text);
  background:rgba(255,255,255,.07);transform:translateY(-1px);}
.bxnav-search:active{transform:translateY(1px);}
body.bx-light .bxnav-search{background:rgba(18,22,43,.04);}
.bxnav-icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.045);
  border-color:rgba(170,150,255,.15);
  transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .12s ease;}
.bxnav-icon:hover{transform:translateY(-1px);border-color:rgba(170,150,255,.42);}
.bxnav-icon:active{transform:translateY(1px);}
.bxnav-icon svg{width:17px;height:17px;}
.bxnav-profile{width:38px;height:38px;border:2px solid #14121f;
  box-shadow:0 0 0 2px rgba(124,92,255,.55);
  transition:box-shadow .15s ease,transform .13s ease;}
.bxnav-profile:hover{transform:scale(1.06);box-shadow:0 0 0 2px #9d85ff;border-color:#14121f;}
body.bx-light .bxnav-profile{border-color:#fff;}
@media(prefers-reduced-motion:reduce){
  .bxnav-link,.bxnav-search,.bxnav-icon,.bxnav-profile,.bxnav-menu .bx-menu-item{transition:none;}
}


/* ── §19.3 — LA MAGIE : le ciel d'étude ───────────────────────────
   Client : « c'est mieux mais on n'a pas cet esprit academy, un peu
   magique ». La palette ne suffisait pas — il manquait un LIEU.
   Trois couches, toutes disciplinées (la lumière raconte la
   progression, jamais posée sur du texte) :
   · LE CIEL : un champ d'étoiles fixes qui respire lentement + une
     aurore violette qui dérive derrière tout l'écran.
   · LA VOIE LUMINEUSE : le fil du parcours devient de la lumière —
     tête de comète au bout du remplissage, nœuds accomplis qui
     rayonnent doucement dans leur teinte, orbite pointillée qui
     tourne autour de l'étape en cours.
   · LES ÉCLATS : deux étoiles à quatre branches scintillent dans le
     blason, chaque station porte une aura de sa teinte. */
.ax5{position:relative;}
.ax5>*{position:relative;z-index:1;}
/* Le champ d'étoiles — il respire */
.ax5::before{content:'';position:absolute;inset:-40px -12vw 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(2.5px 2.5px at 12% 5%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(2px 2px at 28% 15%,rgba(201,184,255,.65),transparent 60%),
    radial-gradient(2.5px 2.5px at 44% 3%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(2px 2px at 61% 10%,rgba(201,184,255,.7),transparent 60%),
    radial-gradient(3px 3px at 76% 4%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(2px 2px at 89% 13%,rgba(201,184,255,.55),transparent 60%),
    radial-gradient(2.5px 2.5px at 4% 22%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(2px 2px at 97% 26%,rgba(201,184,255,.5),transparent 60%),
    radial-gradient(2px 2px at 8% 42%,rgba(201,184,255,.45),transparent 60%),
    radial-gradient(2.5px 2.5px at 95% 47%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(2px 2px at 50% 26%,rgba(255,255,255,.32),transparent 60%),
    radial-gradient(2px 2px at 3% 62%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(2.5px 2.5px at 96% 68%,rgba(201,184,255,.38),transparent 60%),
    radial-gradient(2px 2px at 6% 82%,rgba(201,184,255,.3),transparent 60%),
    radial-gradient(2px 2px at 93% 88%,rgba(255,255,255,.28),transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 55%,rgba(201,184,255,.3),transparent 60%),
    radial-gradient(2px 2px at 70% 45%,rgba(255,255,255,.25),transparent 60%);
  animation:ax5Breathe 7s ease-in-out infinite alternate;}
@keyframes ax5Breathe{from{opacity:.55}to{opacity:1}}
/* Le blason a son propre pan de ciel */
.ax5-hero{background:
    radial-gradient(2px 2px at 84% 20%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 66%,rgba(201,184,255,.45),transparent 60%),
    radial-gradient(2px 2px at 71% 34%,rgba(201,184,255,.35),transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 74%,rgba(255,255,255,.3),transparent 60%),
    radial-gradient(560px 240px at 12% 0%,rgba(124,92,255,.2),transparent 70%),
    radial-gradient(680px 260px at 88% -20%,rgba(64,120,255,.1),transparent 66%),
    linear-gradient(160deg,#271e52,#1a1440 70%);}
/* L'aurore — elle dérive, très lentement */
.ax5::after{content:'';position:absolute;inset:-60px -10vw 40%;z-index:0;pointer-events:none;
  background:
    radial-gradient(640px 340px at 26% 0%,rgba(124,92,255,.22),transparent 62%),
    radial-gradient(720px 300px at 78% 4%,rgba(64,120,255,.12),transparent 64%),
    radial-gradient(480px 260px at 55% 12%,rgba(153,69,255,.1),transparent 60%);
  animation:ax5Aurora 26s ease-in-out infinite alternate;}
@keyframes ax5Aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}

/* Le blason : un éclat qui tourne derrière l'anneau, deux étoiles */
.ax5-crest::after{content:'';position:absolute;inset:-9px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 68%,rgba(157,133,255,.4) 82%,transparent 96%);
  filter:blur(5px);animation:ax5Orbit 9s linear infinite;}
@keyframes ax5Orbit{to{transform:rotate(360deg)}}
.ax5-spark{position:absolute;color:#c9b8ff;opacity:0;pointer-events:none;
  animation:ax5Twk 5.5s ease-in-out infinite;}
.ax5-spark.s1{top:20px;right:27%;animation-delay:.8s;}
.ax5-spark.s2{bottom:26px;left:39%;animation-delay:3.1s;transform:scale(.7);}
@keyframes ax5Twk{0%,100%{opacity:0;transform:scale(.55) rotate(0deg)}
  50%{opacity:.95;transform:scale(1) rotate(90deg)}}

/* La voie lumineuse */
.ax5-spine i{box-shadow:0 0 12px rgba(157,133,255,.5);}
.ax5-spine i::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#d9ccff;
  box-shadow:0 0 16px 5px rgba(157,133,255,.75);}
.ax5-st.done .ax5-node{box-shadow:0 0 16px -2px color-mix(in oklab,var(--sc,#7c5cff) 75%,transparent);}
.ax5-st.cur .ax5-node::before{content:'';position:absolute;inset:-13px;border-radius:50%;
  border:1.5px dashed color-mix(in oklab,var(--sc,#9d85ff) 55%,transparent);
  animation:ax5Orbit 16s linear infinite;}
/* Chaque station porte l'aura de sa teinte */
.ax5-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(430px 150px at 0% 0%,color-mix(in oklab,var(--sc,#7c5cff) 13%,transparent),transparent 62%);}
.ax5-st.cur .ax5-card::after{
  background:radial-gradient(460px 170px at 0% 0%,color-mix(in oklab,var(--sc,#7c5cff) 20%,transparent),transparent 64%);}
.ax5-card{background:linear-gradient(165deg,#231b4a,#181236 70%);}
.ax5-detail,.ax5-cardhd,.ax5-cardbar{position:relative;z-index:1;}

@media(prefers-reduced-motion:reduce){
  .ax5::before,.ax5::after,.ax5-crest::after,.ax5-spark,
  .ax5-st.cur .ax5-node::before{animation:none;}
  .ax5::before{opacity:.8;}
}

/* Sélecteur de cadre (Paramètres › Profil) + équipement des plaques */
.st3-frames{display:flex;gap:.6rem;flex-wrap:wrap;}
.st3-frame{position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:.75rem .9rem .6rem;border-radius:13px;cursor:pointer;font-family:inherit;
  background:rgba(127,127,150,.04);border:1px solid var(--bx-line);color:var(--bx-text-2);
  transition:border-color .16s ease,transform .14s ease,background .16s ease;}
.st3-frame:hover{border-color:var(--bx-line-strong);transform:translateY(-2px);}
.st3-frame:active{transform:translateY(0);}
.st3-frame.sel{border-color:var(--bx-violet-line);background:var(--bx-violet-soft);}
.st3-frame.lockd{opacity:.7;}
.st3-frame-ring{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);}
.st3-frame-ring.axfr-gold{box-shadow:0 0 0 3px #f0b429,0 0 0 6px rgba(240,180,41,.25);}
.st3-frame-ring.axfr-iris{box-shadow:0 0 0 3px #7c5cff,0 0 0 6px rgba(124,92,255,.3);}
.st3-frame-ring.axfr-degrade{box-shadow:0 0 0 3px #14f195,0 0 0 6px rgba(153,69,255,.45);}
.st3-frame-n{font-size:12.5px;font-weight:650;}
.st3-frame-ok{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--bx-violet);color:#fff;
  border:2px solid var(--bx-surface);}
/* La plaque équipée dans la Collection */
.pf3-ctile.can-eq{cursor:pointer;}
.pf3-ctile.can-eq:focus-visible{outline:2px solid var(--bx-violet);outline-offset:2px;}
.pf3-ctile.eq{border-color:#f0b429;}
.pf3-ctile-tag.eq{background:#f0b429;color:#2e1d00;}
.st3-frame .pf3-cover-lock{top:6px;right:6px;bottom:auto;}
/* Sous 1240px la recherche se replie en bouton rond — plus d'écrasement */
@media(max-width:1240px){
  body[class*="view-"] .bxnav-search,body.bx-auth .bxnav-search{
    width:40px;min-width:40px;padding:0;justify-content:center;}
  body[class*="view-"] .bxnav-search-txt,body.bx-auth .bxnav-search-txt,
  body[class*="view-"] .bxnav-search .bx-kbd,body.bx-auth .bxnav-search .bx-kbd{display:none;}
}

/* Nav v5.2 — respiration + recherche lisible. « Trop collé » : les
   liens gagnent de l'air (écart, garde-fou de 20px de chaque côté du
   groupe), le bloc droit s'espace. « Couleur pas lisible » : le champ
   de recherche passe en texte clair, icône pleine, chip Ctrl K
   dessinée — plus un fantôme gris sur gris. */
.bxnav-links{gap:10px;padding:0 20px;}
.bxnav-link{padding:0 1.15rem;}
.bxnav-right{gap:12px;}
.bxnav-search{color:var(--bx-text-2);font-weight:500;
  background:rgba(255,255,255,.06);border-color:rgba(170,150,255,.22);}
.bxnav-search svg{opacity:1;}
.bxnav-search-txt{color:inherit;}
.bxnav-search:hover{color:var(--bx-text);}
.bxnav-search .bx-kbd{color:#b3adcf;background:rgba(255,255,255,.06);
  border:1px solid rgba(170,150,255,.3);border-radius:6px;padding:.14rem .45rem;
  font-size:11.5px;letter-spacing:.03em;}
body.bx-light .bxnav-search{color:var(--bx-text-2);background:rgba(18,22,43,.05);}
body.bx-light .bxnav-search .bx-kbd{color:#5b6478;background:rgba(18,22,43,.05);
  border-color:rgba(18,22,43,.18);}
/* Profil puis Paramètres : le duo de compte se détache vers la droite,
   la recherche reste sur la gouttière du contenu */
.bxnav-right .bxnav-profile{margin-left:26px;}
.bxnav-right .bxnav-icon[data-route="settings"]{margin-left:12px;}

/* ═══ 19.4 BOUTIQUE v2 — matières et animations (bannières, cadres) ══
   Catalogue du client (19/08) : bannières et cadres par THÈMES assortis.
   La couleur vient du background (--cv / style) ; l'enfant .bxbn-fx porte
   la texture et l'animation — les ::before/::after des conteneurs sont
   déjà pris par les calques de la carte. DA §7.1 : un seul effet animé
   par objet, la lumière raconte (l'éclair, le rug). */
.bxbn-fx{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;display:block}
/* ⚠️ Ne jamais toucher au `position` des conteneurs : le .pv de la
   boutique est un absolu qui REMPLIT son cadre (l'écraser le vide). */
.pv.bxbn-acad,.pv.bxbn-btc,.pv.bxbn-elec,.pv.bxbn-rugs,
.pf3-cover-opt.bxbn-acad,.pf3-cover-opt.bxbn-btc,.pf3-cover-opt.bxbn-elec,.pf3-cover-opt.bxbn-rugs{overflow:hidden}

/* Ciel Academy — le champ d'étoiles du monde violet */
.bxbn-acad .bxbn-fx::before{content:'';position:absolute;inset:0;background:
  radial-gradient(1.5px 1.5px at 12% 30%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(1px 1px at 28% 64%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(2px 2px at 44% 22%,rgba(214,199,255,.8),transparent 60%),
  radial-gradient(1px 1px at 58% 48%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1.5px 1.5px at 72% 18%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1px 1px at 84% 58%,rgba(214,199,255,.6),transparent 60%),
  radial-gradient(1.5px 1.5px at 93% 34%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1px 1px at 20% 12%,rgba(255,255,255,.65),transparent 60%)}

/* Bitcoin — le ₿ éparpillé, deux tailles, légère rotation */
.bxbn-btc .bxbn-fx::before{content:'';position:absolute;inset:0;opacity:.4;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(12 12 12)' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath stroke-width='1.9' d='M9.2 5.8h4.6a2.9 2.9 0 0 1 0 5.8H9.2zm0 5.8h5.2a2.95 2.95 0 0 1 0 5.9H9.2z'/%3E%3Cpath stroke-width='1.9' d='M9.2 5.8v11.7'/%3E%3Cpath stroke-width='1.7' d='M10.7 3.9v1.9M13.5 3.9v1.9M10.7 17.5v1.9M13.5 17.5v1.9'/%3E%3C/g%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-9 12 12)' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath stroke-width='1.9' d='M9.2 5.8h4.6a2.9 2.9 0 0 1 0 5.8H9.2zm0 5.8h5.2a2.95 2.95 0 0 1 0 5.9H9.2z'/%3E%3Cpath stroke-width='1.9' d='M9.2 5.8v11.7'/%3E%3Cpath stroke-width='1.7' d='M10.7 3.9v1.9M13.5 3.9v1.9M10.7 17.5v1.9M13.5 17.5v1.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:46px 46px,24px 24px;background-position:8px 10px,34px 38px}

/* Bleu électrique — deux éclairs qui claquent, le fond flashe avec eux */
.bxbn-elec{animation:bxbnElecFlash 6.4s infinite}
.bxbn-elec .bxbn-fx::before,.bxbn-elec .bxbn-fx::after{content:'';position:absolute;inset:0;
  background:#eaf3ff;opacity:0;
  clip-path:polygon(58% 6%,49% 42%,55% 42%,44% 82%,60% 45%,53% 45%,63% 10%)}
.bxbn-elec .bxbn-fx::before{animation:bxbnBolt 6.4s infinite}
.bxbn-elec .bxbn-fx::after{clip-path:polygon(24% 16%,17% 48%,22% 48%,13% 86%,28% 50%,22% 50%,31% 20%);
  animation:bxbnBolt 6.4s 3.1s infinite}
@keyframes bxbnBolt{0%,88%,94.6%,100%{opacity:0}
  89%,90.6%{opacity:1}91.6%{opacity:.15}92.4%,93.6%{opacity:.9}}
@keyframes bxbnElecFlash{0%,88.6%,95%,100%{filter:brightness(1)}
  89.6%,93.6%{filter:brightness(1.45)}}

/* Rugs — l'escalier vert se révèle bougie par bougie, puis le RUG tombe.
   Cycle 7 s avec l'échec dans la rotation (DA §6) : c'est le rug. */
.bxbn-rugs .bxbn-fx::before{content:'';position:absolute;inset:0;background:
  linear-gradient(rgba(125,138,184,.16),rgba(125,138,184,.16)) 0 22%/100% 1.5px,
  linear-gradient(rgba(125,138,184,.16),rgba(125,138,184,.16)) 0 52%/100% 1.5px,
  linear-gradient(rgba(125,138,184,.16),rgba(125,138,184,.16)) 0 82%/100% 1.5px,
  linear-gradient(#17c975,#17c975) 7% 78%/4.2% 20%,
  linear-gradient(#17c975,#17c975) 15% 74%/4.2% 24%,
  linear-gradient(#17c975,#17c975) 23% 77%/4.2% 28%,
  linear-gradient(#17c975,#17c975) 31% 66%/4.2% 28%,
  linear-gradient(#17c975,#17c975) 39% 62%/4.2% 32%,
  linear-gradient(#17c975,#17c975) 47% 52%/4.2% 32%,
  linear-gradient(#17c975,#17c975) 55% 48%/4.2% 36%,
  linear-gradient(#17c975,#17c975) 63% 36%/4.2% 38%;
  background-repeat:no-repeat;
  animation:bxbnRugsUp 7s infinite}
@keyframes bxbnRugsUp{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  6%{clip-path:inset(0 89% 0 0)}12%{clip-path:inset(0 81% 0 0)}
  18%{clip-path:inset(0 73% 0 0)}24%{clip-path:inset(0 65% 0 0)}
  30%{clip-path:inset(0 57% 0 0)}36%{clip-path:inset(0 49% 0 0)}
  42%{clip-path:inset(0 41% 0 0)}48%,86%{clip-path:inset(0 0 0 0);opacity:1}
  93%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.bxbn-rugs .bxbn-fx::after{content:'';position:absolute;inset:0;background:
  linear-gradient(#ff3b5c,#ff3b5c) 72.5% 26%/1.6% 10%,
  linear-gradient(#ff3b5c,#ff3b5c) 72% 88%/5.6% 56%;
  background-repeat:no-repeat;
  transform-origin:50% 24%;
  animation:bxbnRugsDump 7s infinite}
@keyframes bxbnRugsDump{
  0%,54%{transform:scaleY(0);opacity:1}
  58%{transform:scaleY(1.07)}61%{transform:scaleY(1)}
  86%{transform:scaleY(1);opacity:1}
  93%,100%{transform:scaleY(1);opacity:0}}

/* ── Les cadres v2 — assortis aux bannières ─────────────────────── */
.axfr-ciel .pf4-ava,.axsh-prev .ring.axfr-ciel{box-shadow:0 0 0 3px #7dd3fc,0 0 0 6px rgba(56,189,248,.3)!important}
.st3-frame-ring.axfr-ciel{box-shadow:0 0 0 3px #7dd3fc,0 0 0 6px rgba(56,189,248,.3)}
.axfr-acad .pf4-ava,.axsh-prev .ring.axfr-acad{box-shadow:0 0 0 3px #7c5cff,0 0 0 6px rgba(124,92,255,.28)!important}
.st3-frame-ring.axfr-acad{box-shadow:0 0 0 3px #7c5cff,0 0 0 6px rgba(124,92,255,.28)}
.axfr-btc .pf4-ava,.axsh-prev .ring.axfr-btc{box-shadow:0 0 0 3px #f7931a,0 0 0 6px rgba(247,147,26,.3)!important}
.st3-frame-ring.axfr-btc{box-shadow:0 0 0 3px #f7931a,0 0 0 6px rgba(247,147,26,.3)}
.axfr-elec .pf4-ava,.axsh-prev .ring.axfr-elec{box-shadow:0 0 0 3px #2f6bff,0 0 0 6px rgba(47,107,255,.32)!important}
.st3-frame-ring.axfr-elec{box-shadow:0 0 0 3px #2f6bff,0 0 0 6px rgba(47,107,255,.32)}
.axfr-rugs .pf4-ava,.axsh-prev .ring.axfr-rugs{box-shadow:0 0 0 3px #17c975,0 0 0 6px rgba(255,59,92,.28)!important}
.st3-frame-ring.axfr-rugs{box-shadow:0 0 0 3px #17c975,0 0 0 6px rgba(255,59,92,.28)}

/* Les décorations dépassent de l'avatar : on rend le débord possible
   (l'image reprend l'arrondi à son compte). */
.axfr-acad .pf4-ava,.axfr-btc .pf4-ava,.axfr-elec .pf4-ava,.axfr-rugs .pf4-ava{overflow:visible}
.axfr-acad .pf4-ava img,.axfr-btc .pf4-ava img,.axfr-elec .pf4-ava img,.axfr-rugs .pf4-ava img{border-radius:inherit}
.axfr-acad .pf4-ava::after,.axfr-btc .pf4-ava::after,.axfr-elec .pf4-ava::before,.axfr-elec .pf4-ava::after,
.axfr-rugs .pf4-ava::before,.axfr-rugs .pf4-ava::after,
.axsh-prev .ring.axfr-acad::after,.axsh-prev .ring.axfr-btc::after,
.axsh-prev .ring.axfr-elec::before,.axsh-prev .ring.axfr-elec::after,
.axsh-prev .ring.axfr-rugs::before,.axsh-prev .ring.axfr-rugs::after,
.st3-frame-ring.axfr-acad::after,.st3-frame-ring.axfr-btc::after,
.st3-frame-ring.axfr-elec::before,.st3-frame-ring.axfr-elec::after,
.st3-frame-ring.axfr-rugs::before,.st3-frame-ring.axfr-rugs::after{
  content:'';position:absolute;pointer-events:none}
.axsh-prev .ring,.st3-frame-ring{position:relative}

/* Academy : quatre étoiles posées autour de l'anneau */
.axfr-acad .pf4-ava::after,.axsh-prev .ring.axfr-acad::after,.st3-frame-ring.axfr-acad::after{
  inset:-26%;background:
  radial-gradient(2.5px 2.5px at 14% 4%,#fff,transparent 60%),
  radial-gradient(2px 2px at 92% 18%,#d6c7ff,transparent 60%),
  radial-gradient(2.5px 2.5px at 90% 88%,#fff,transparent 60%),
  radial-gradient(2px 2px at 6% 76%,#d6c7ff,transparent 60%)}

/* Bitcoin : la pastille ₿ frappée sous l'avatar, façon décoration */
.axfr-btc .pf4-ava::after,.axsh-prev .ring.axfr-btc::after,.st3-frame-ring.axfr-btc::after{
  left:50%;bottom:-12px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:#f7931a;border:2.5px solid #10131f;
  color:#3a1c02;font:800 15px/21px 'Inter',sans-serif;text-align:center;
  content:'₿'}
.axsh-prev .ring.axfr-btc::after,.st3-frame-ring.axfr-btc::after{
  width:16px;height:16px;bottom:-8px;border-width:2px;font-size:9px;line-height:12px}

/* Électrique : deux éclairs autour de l'avatar, jamais en même temps */
.axfr-elec .pf4-ava::before,.axfr-elec .pf4-ava::after,
.axsh-prev .ring.axfr-elec::before,.axsh-prev .ring.axfr-elec::after,
.st3-frame-ring.axfr-elec::before,.st3-frame-ring.axfr-elec::after{
  width:38%;height:56%;min-width:13px;min-height:19px;
  background:#dfeaff;opacity:0;
  clip-path:polygon(62% 0,28% 44%,50% 44%,20% 100%,70% 40%,46% 40%,78% 0)}
.axfr-elec .pf4-ava::before,.axsh-prev .ring.axfr-elec::before,.st3-frame-ring.axfr-elec::before{
  top:-18%;right:-16%;animation:axfrBolt 5.6s infinite}
.axfr-elec .pf4-ava::after,.axsh-prev .ring.axfr-elec::after,.st3-frame-ring.axfr-elec::after{
  bottom:-16%;left:-16%;transform:rotate(160deg);animation:axfrBolt 5.6s 2.7s infinite}
@keyframes axfrBolt{0%,90%,95.4%,100%{opacity:0}
  90.6%,91.8%{opacity:1}92.6%{opacity:.2}93.2%,94.6%{opacity:.95}}

/* Rugs : les bougies qui tournent autour de l'avatar — la décoration
   de trading. Deux anneaux, deux vitesses. */
.axfr-rugs .pf4-ava::before,.axsh-prev .ring.axfr-rugs::before,.st3-frame-ring.axfr-rugs::before{
  inset:-16%;border-radius:50%;
  background:repeating-conic-gradient(#17c975 0 10deg,transparent 10deg 26deg,#ff3b5c 26deg 34deg,transparent 34deg 58deg);
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 71% 95%,transparent 96%);
          mask:radial-gradient(closest-side,transparent 70%,#000 71% 95%,transparent 96%);
  animation:axfrRugsSpin 17s linear infinite}
.axfr-rugs .pf4-ava::after,.axsh-prev .ring.axfr-rugs::after,.st3-frame-ring.axfr-rugs::after{
  inset:-27%;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(#17c975 0 6deg,transparent 6deg 40deg,#ff3b5c 40deg 45deg,transparent 45deg 92deg);
  -webkit-mask:radial-gradient(closest-side,transparent 80%,#000 81% 96%,transparent 97%);
          mask:radial-gradient(closest-side,transparent 80%,#000 81% 96%,transparent 97%);
  animation:axfrRugsSpin 26s linear infinite reverse}
@keyframes axfrRugsSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .bxbn-elec,.bxbn-elec .bxbn-fx::before,.bxbn-elec .bxbn-fx::after,
  .bxbn-rugs .bxbn-fx::before,.bxbn-rugs .bxbn-fx::after,
  .axfr-elec .pf4-ava::before,.axfr-elec .pf4-ava::after,
  .axsh-prev .ring.axfr-elec::before,.axsh-prev .ring.axfr-elec::after,
  .st3-frame-ring.axfr-elec::before,.st3-frame-ring.axfr-elec::after,
  .axfr-rugs .pf4-ava::before,.axfr-rugs .pf4-ava::after,
  .axsh-prev .ring.axfr-rugs::before,.axsh-prev .ring.axfr-rugs::after,
  .st3-frame-ring.axfr-rugs::before,.st3-frame-ring.axfr-rugs::after{animation:none}
  .bxbn-rugs .bxbn-fx::before{clip-path:inset(0)}
  .bxbn-rugs .bxbn-fx::after{transform:scaleY(1)}
}

/* ═══════════════════════════════════════════════════════════════════
   §23 — RUG SNIPING LANDING (rsx-, #rugx) — la partition des groupes
   Remplace l'ex-section « Wallet Intelligence » (#rugdb : markup, JS
   et clés i18n EN supprimés le 20/08/2026 ; ses styles rdb-/rdw-/rdu-
   restés dans le <style> d'index.html sont morts — on ne les taille
   pas à l'aveugle, règle CLAUDE.md). Monde : section blanche lavée de
   vert, board terminal navy, encre verte #0e9e64 / vert vif #17c975,
   rouge #ff4060. Gabarits calqués sur #algo (kicker mono, titre
   Bricolage 800, clavier d'options, panneaux flottants blancs sur
   board sombre). La chart est dessinée au canvas (moteur rsx,
   index.html) : détection → B → TP → S → RUG.
   ═══════════════════════════════════════════════════════════════════ */
.rsx{position:relative;padding:5.5rem 2rem 7rem;
  background:linear-gradient(180deg,#fbfcff 0%,#f3fbf6 26%,#f3fbf6 74%,#fbfcff 100%);
  --rsxE:cubic-bezier(.16,1,.3,1);--rsxS:cubic-bezier(.34,1.56,.64,1);
  --rsx-ink:#0a0f1e;--rsx-dim:#8a93a8;--rsx-line:#dde9e1;
  --rsx-g:#0e9e64;--rsx-g2:#17c975;--rsx-gk:#0a7c4e;--rsx-navy:#0c1122;}
.rsx-in{max-width:1180px;margin:0 auto;}
.rsx-head{margin-bottom:2.1rem;max-width:760px;}
.rsx-kicker{display:inline-block;font-family:'Space Mono',monospace;font-size:13px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rsx-g);
  margin-bottom:.7rem;}
.rsx-title{margin:0;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.03;
  letter-spacing:-.035em;color:var(--rsx-ink);}
.rsx-sub{margin:1rem 0 0;font-size:1.06rem;line-height:1.62;color:#4a5468;}

/* ── Le clavier des groupes : 5 pilules, l'active en aplat vert ── */
.rsx-sw{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 3.3rem;}
.rsx-key{display:flex;align-items:center;gap:.62rem;
  padding:.6rem 1.05rem .6rem .68rem;border-radius:999px;
  background:#fff;border:1px solid var(--rsx-line);cursor:pointer;
  font-family:inherit;text-align:left;
  box-shadow:0 12px 26px -16px rgba(10,44,30,.4);
  transition:transform .15s var(--rsxE),background .25s,border-color .25s,box-shadow .25s;}
.rsx-key:hover:not(.on){transform:translateY(-2px);border-color:#c9ddd2;}
.rsx-key:active{transform:translateY(0) scale(.98);}
.rsx-key:focus-visible{outline:2px solid var(--rsx-g);outline-offset:3px;}
.rsx-ki{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(14,158,100,.1);color:var(--rsx-g);transition:background .25s,color .25s;}
.rsx-kt b{display:block;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1rem;letter-spacing:-.01em;line-height:1.12;color:var(--rsx-ink);}
.rsx-kt i{display:block;font-style:normal;font-size:12.5px;font-weight:600;
  color:#6a7488;margin-top:.12rem;}
.rsx-key.on{cursor:default;background:var(--rsx-g);border-color:var(--rsx-g);
  transform:translateY(-2px);
  box-shadow:0 4px 0 var(--rsx-gk),0 20px 36px -16px rgba(10,90,56,.55);}
.rsx-key.on .rsx-ki{background:rgba(255,255,255,.16);color:#fff;}
.rsx-key.on .rsx-kt b{color:#fff;}
.rsx-key.on .rsx-kt i{color:rgba(255,255,255,.75);}

/* ── Le board : terminal sombre, chart au canvas, panneaux flottants ── */
.rsx-stage{position:relative;}
.rsx-board{position:relative;height:470px;border-radius:28px;
  background:linear-gradient(150deg,#0b1730 0%,var(--rsx-navy) 48%,#0d1a2e 100%);
  box-shadow:0 60px 110px -42px rgba(6,16,30,.65),inset 0 1px 0 rgba(255,255,255,.08);}
.rsx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;}
.rsx-name{position:absolute;top:-24px;left:26px;z-index:4;max-width:400px;
  background:#fff;border:1px solid var(--rsx-line);border-radius:16px;
  padding:.9rem 1.15rem;box-shadow:0 26px 54px -24px rgba(10,44,30,.45);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .28s var(--rsxE),transform .28s var(--rsxE),visibility 0s .28s;}
.rsx[data-rug="stairs"] .rsx-name[data-g="stairs"],
.rsx[data-rug="triangle"] .rsx-name[data-g="triangle"],
.rsx[data-rug="candle"] .rsx-name[data-g="candle"],
.rsx[data-rug="volume"] .rsx-name[data-g="volume"],
.rsx[data-rug="newpair"] .rsx-name[data-g="newpair"]{opacity:1;visibility:visible;
  transform:none;transition:opacity .32s var(--rsxE) .06s,transform .32s var(--rsxE) .06s;}
.rsx-name i{font-style:normal;font-family:'Space Mono',monospace;font-size:13px;
  font-weight:700;color:var(--rsx-g);margin-right:.5rem;}
.rsx-name b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:-.015em;color:var(--rsx-ink);}
.rsx-name span{display:block;font-size:14px;line-height:1.5;color:#4a5468;margin-top:.35rem;}
.rsx-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:.65rem;
  background:#fff;border:1px solid var(--rsx-line);border-radius:16px;
  padding:.68rem 1rem;box-shadow:0 26px 54px -24px rgba(10,44,30,.45);}
.rsx-chip.a{left:26px;bottom:-20px;}
.rsx-chip.a b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;
  font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--rsx-g);
  font-variant-numeric:tabular-nums;}
.rsx-chip.a span{font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#26324b;line-height:1.3;max-width:130px;}
.rsx-chip.b{right:18px;top:-20px;}
.rsx-chip.b>i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--rsx-g2);position:relative;}
.rsx-chip.b>i::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(23,201,117,.55);animation:rsxPing 1.9s var(--rsxE) infinite;}
@keyframes rsxPing{0%{transform:scale(.55);opacity:1}80%,100%{transform:scale(2.2);opacity:0}}
.rsx-chip.b span{font-family:'Space Mono',monospace;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;color:#26324b;}

/* ── Pied : CTA charnu + rappel DYOR ── */
.rsx-foot{margin-top:3.6rem;}
.rsx-cta{display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.65rem;border-radius:999px;background:var(--rsx-g);color:#fff;
  text-decoration:none;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
  box-shadow:0 5px 0 var(--rsx-gk),0 26px 46px -18px rgba(10,90,56,.6);
  transition:transform .16s var(--rsxE),box-shadow .16s var(--rsxE);}
.rsx-cta:hover{transform:translateY(-2px);
  box-shadow:0 7px 0 var(--rsx-gk),0 30px 52px -18px rgba(10,90,56,.65);}
.rsx-cta:active{transform:translateY(2px);
  box-shadow:0 2px 0 var(--rsx-gk),0 14px 26px -14px rgba(10,90,56,.5);}
.rsx-cta svg{transition:transform .2s var(--rsxE);}
.rsx-cta:hover svg{transform:translateX(3px);}
.rsx-dyor{margin:1.5rem 0 0;font-size:13px;color:var(--rsx-dim);}

/* ── Responsive ── */
@media(max-width:960px){
  .rsx-board{height:430px;}
  .rsx-name{max-width:340px;}
}
@media(max-width:700px){
  .rsx{padding:4rem 1.1rem 5.5rem;}
  .rsx-board{height:400px;border-radius:22px;}
  /* les panneaux passent À L'INTÉRIEUR du board ; le moteur canvas
     réserve le haut de la chart (pad.t) sur le même seuil 700px */
  .rsx-name{top:12px;left:12px;right:12px;max-width:none;padding:.75rem .9rem;}
  .rsx-name span{font-size:13px;}
  .rsx-chip.a{left:12px;bottom:-16px;padding:.55rem .8rem;}
  .rsx-chip.a b{font-size:1.5rem;}
}
@media(max-width:560px){
  .rsx-kt i{display:none;}
  .rsx-key{padding:.5rem .85rem .5rem .55rem;gap:.5rem;}
  .rsx-ki{width:30px;height:30px;}
  .rsx-chip.b{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .rsx-chip.b>i::after{animation:none;}
  .rsx-key,.rsx-cta,.rsx-name{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §24 — SÉLECTEUR DE LANGUE LANDING (bxlang, #navGuest)
   Deux langues visibles côte à côte ; l'aplat bleu roi GLISSE sur la
   langue choisie, l'autre reste lisible mais passe AU BROUILLARD
   (flou léger + retrait) — l'état se lit d'un coup d'œil, le survol
   la ramène au net pour inviter au clic. Remplace l'ancien
   bouton-drapeau #langToggleBtn (images flagcdn externes, supprimé).
   ═══════════════════════════════════════════════════════════════════ */
.bxlang{position:relative;display:inline-flex;align-items:stretch;
  padding:4px;border-radius:12px;background:#fff;
  border:1px solid rgba(10,15,30,.12);
  box-shadow:0 10px 24px -14px rgba(13,32,84,.35),inset 0 1px 0 #fff;}
.bxlang-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);
  border-radius:9px;background:linear-gradient(135deg,#1a3fd0,#2e63f2);
  box-shadow:0 8px 18px -8px rgba(13,32,84,.65);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.bxlang[data-l="en"] .bxlang-thumb{transform:translateX(100%);}
.bxlang-opt{position:relative;z-index:1;display:inline-flex;align-items:center;
  gap:.42rem;padding:.4rem .62rem;
  border:0;background:transparent;cursor:pointer;border-radius:9px;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.05em;color:#8a93a8;
  filter:blur(.8px) grayscale(.55);opacity:.55;
  transition:color .3s,filter .3s,opacity .3s,transform .14s;}
.bxlang-opt:hover:not(.on){filter:none;opacity:.92;color:#0a0f1e;}
/* Le drapeau : SVG inline (jamais d'image externe), liseré pour tenir
   sur le blanc ; le brouillard du bouton le désature avec lui. */
.bxlang-fl{width:21px;height:14px;flex:none;border-radius:2.5px;overflow:hidden;
  outline:1px solid rgba(10,15,30,.16);outline-offset:-1px;}
.bxlang-opt.on .bxlang-fl{outline-color:rgba(255,255,255,.4);}
.bxlang-opt:active:not(.on){transform:scale(.94);}
.bxlang-opt.on{color:#fff;filter:none;opacity:1;cursor:default;}
.bxlang-opt:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px;}
/* Rangée du menu mobile : le même objet, posé en tête du menu */
.bxlang-mobrow{display:flex;padding:12px 16px 6px;}
@media(max-width:480px){
  .bxlang-opt{padding:.36rem .5rem;font-size:12.5px;gap:.36rem;}
  .bxlang-fl{width:18px;height:12px;}
}
@media(prefers-reduced-motion:reduce){
  .bxlang-thumb,.bxlang-opt{transition:none;}
}

/* ── §17.1 — BotX : la chart passe en bougies + le rug final (20/08) ──
   Les deux moteurs dessinent de vraies bougies (verts/rouges de la
   palette sombre, assise foncée sous le corps — moteur buildCandles,
   index.html) ; côté Rug Snip chaque cycle se termine par le RUG, le
   tampon claque sur l'effondrement après les sorties du bot. Les
   règles .bxbot-line plus haut sont mortes (le path a disparu). */
.bxbot-candles line{opacity:.75;}
.bxbot-st.rugx{background:#ff4060;color:#fff;font-size:15px;
  letter-spacing:.06em;padding:.4rem .8rem;opacity:0;}
.bxbot-scene[data-eng="rug"] .bxbot-st.rugx{left:88%;top:80%;}

/* ═══════════════════════════════════════════════════════════════════
   §25 — AUTH : CONNEXION & INSCRIPTION (bxauth) — couche blanche
   Les modales d'entrée vivaient encore dans l'ancienne DA : boîte
   sombre posée sur une landing blanche, wordmark en dégradé
   teal→bleu→violet, bouton indigo #6366f1 AVEC halo (néon interdit),
   CTA d'inscription en dégradé cyan→vert peint en style inline,
   micro-libellés en capitales, et un parcours de 4 étapes qui ne
   disait jamais où on en était.
   Ici : la carte est un OBJET BLANC posé sur voile encre, l'accent est
   le bleu roi #1d4ed8 (aplat, jamais de halo), la typo suit §5
   (Bricolage 800 pour les titres et les montants, Inter pour le
   corps), et le X du wordmark garde sa seule exception violette.
   L'espace est réglé sur un rythme unique : en-tête → champs → action
   → bascule. Le rail de 4 segments répond au « on est où ? ».
   Portée : uniquement .bxauth (#loginModal, #freeSignupModal) — les
   modales de l'app sombre ne bougent pas.
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay.bxauth{background:rgba(8,12,24,.62);backdrop-filter:blur(6px);
  padding:1.25rem;align-items:center;}
/* !important : la couche app-sombre plus haut (§ « Modales globales »)
   force .modal-box en !important — la carte blanche doit repasser
   par-dessus, sans toucher aux modales de l'app. */
.bxauth .bxauth-card{background:#fff!important;border:1px solid rgba(10,15,30,.08)!important;
  border-radius:24px!important;padding:2.15rem 2.15rem 1.9rem;max-width:436px;width:100%;
  color:#0a0f1e;box-shadow:0 44px 90px -42px rgba(8,18,54,.62),0 4px 14px -8px rgba(8,18,54,.3)!important;}

/* Fermer : une vraie cible, pas un caractère perdu dans un coin */
.bxauth .bxauth-x{position:absolute;top:.95rem;right:.95rem;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:transparent;border:0;border-radius:10px;color:#8a93a8;cursor:pointer;
  transition:background .18s,color .18s,transform .18s;}
.bxauth .bxauth-x:hover{background:rgba(10,15,30,.06);color:#0a0f1e;}
.bxauth .bxauth-x:active{transform:scale(.92);}
.bxauth .bxauth-x:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px;}

/* Le parcours : 4 segments, on sait toujours où on en est */
/* Le parcours parle la langue de la maison : les pastilles numérotées
   de #algo / #botx / #rsx, reliées par une ligne qui se remplit. La
   ligne « Step 1 of 4 » en chasse fixe est morte — elle sonnait
   générique et n'apprenait rien de plus que les pastilles. */
.bxauth-road{display:grid;grid-template-columns:repeat(4,1fr);
  margin:.1rem 44px 1.6rem 0;padding:0;list-style:none;}
.bxauth-rd{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:.42rem;min-width:0;}
.bxauth-rd::before{content:'';position:absolute;top:13px;right:50%;left:-50%;
  height:3px;background:#e6e9f2;border-radius:99px;
  transition:background .5s cubic-bezier(.4,0,.2,1);}
.bxauth-rd:first-child::before{display:none;}
.bxauth-rd.done::before,.bxauth-rd.now::before{background:#1d4ed8;}
.bxauth-rd i{position:relative;z-index:1;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;background:#eaeef6;color:#98a1b3;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:12.5px;font-style:normal;
  box-shadow:0 0 0 4px #fff;
  transition:background .35s,color .35s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.bxauth-rd.now i{background:#1d4ed8;color:#fff;}
.bxauth-rd.done i{background:#1d4ed8;color:#fff;}
.bxauth-rd-k{display:none;}
.bxauth-rd.done i b{display:none;}
.bxauth-rd.done i .bxauth-rd-k{display:block;}
/* Franchir une étape se SENT : la pastille validée rebondit */
.bxauth-rd.just i{animation:bxauthPop .62s cubic-bezier(.34,1.56,.64,1);}
@keyframes bxauthPop{0%{transform:scale(1)}38%{transform:scale(1.32)}100%{transform:scale(1)}}
.bxauth-rd em{font-style:normal;font-size:11.5px;font-weight:600;color:#98a1b3;
  letter-spacing:-.005em;white-space:nowrap;transition:color .3s;}
.bxauth-rd.now em{color:#0a0f1e;font-weight:700;}
.bxauth-rd.done em{color:#5b6478;}

/* Le champ répond pendant la frappe : coche verte quand c'est bon */
.bxauth-w{position:relative;display:block;}
.bxauth-w .bxauth-i{padding-right:2.8rem;}
.bxauth-ck{position:absolute;right:.85rem;top:50%;color:#0e9e64;pointer-events:none;
  transform:translateY(-50%) scale(.4);opacity:0;
  transition:opacity .22s,transform .32s cubic-bezier(.34,1.56,.64,1);}
.bxauth-f.ok .bxauth-ck{opacity:1;transform:translateY(-50%) scale(1);}
.bxauth-f.ok .bxauth-i{border-color:rgba(14,158,100,.5);}
.bxauth-f.ok .bxauth-i:focus{border-color:#0e9e64;box-shadow:0 0 0 4px rgba(14,158,100,.13);}

/* Jauge de mot de passe : trois crans, un mot, aucun sermon */
.bxauth-str{display:flex;align-items:center;gap:5px;margin-top:.45rem;
  height:0;opacity:0;overflow:hidden;transition:height .25s,opacity .25s;}
.bxauth-str.on{height:14px;opacity:1;}
.bxauth-str i{flex:1;height:4px;border-radius:99px;background:#e6e9f2;
  transition:background .3s;}
.bxauth-str em{flex:none;font-style:normal;font-size:11px;font-weight:700;
  color:#98a1b3;min-width:52px;text-align:right;transition:color .3s;}
.bxauth-str[data-n="1"] i:nth-child(1){background:#f0b429;}
.bxauth-str[data-n="1"] em{color:#b45309;}
.bxauth-str[data-n="2"] i:nth-child(-n+2){background:#f0b429;}
.bxauth-str[data-n="2"] em{color:#b45309;}
.bxauth-str[data-n="3"] i{background:#0e9e64;}
.bxauth-str[data-n="3"] em{color:#0e9e64;}

/* En-tête : identité, promesse, rien de plus */
.bxauth .bxauth-head{margin-bottom:1.4rem;}
.bxauth-mark{display:block;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:15px;letter-spacing:-.01em;color:#0a0f1e;margin-bottom:1.05rem;}
.bxauth-mark span{color:#2f6bff;}
.bxauth .bxauth-t{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:27px;line-height:1.12;letter-spacing:-.025em;
  color:#0a0f1e;margin:0 0 .42rem;}
.bxauth .bxauth-s{font-size:14.5px;line-height:1.5;color:#5b6478;margin:0;}
.bxauth .bxauth-s .free-email-display{color:#0a0f1e;font-weight:700;}

/* Champs : libellé lisible (plus de capitales minuscules), focus bleu roi */
.bxauth-form{display:flex;flex-direction:column;gap:.95rem;}
.bxauth-f{display:block;}
.bxauth-l{display:block;font-size:13px;font-weight:600;color:#3a4258;
  margin-bottom:.4rem;letter-spacing:0;text-transform:none;}
.bxauth-opt{font-style:normal;font-weight:500;color:#98a1b3;}
.bxauth .bxauth-i{width:100%;box-sizing:border-box;padding:.8rem .95rem;
  background:#fff;border:1.5px solid rgba(10,15,30,.15);border-radius:12px;
  font-family:'Inter',sans-serif;font-size:15px;color:#0a0f1e;
  transition:border-color .18s,box-shadow .18s,background .18s;}
.bxauth .bxauth-i::placeholder{color:#a6adbd;}
.bxauth .bxauth-i:hover{border-color:rgba(10,15,30,.28);}
.bxauth .bxauth-i:focus{outline:0;border-color:#1d4ed8;background:#fff;
  box-shadow:0 0 0 4px rgba(29,78,216,.13);}
.bxauth-pw{position:relative;display:block;}
.bxauth-pw .bxauth-i{padding-right:3rem;}
.bxauth .bxauth-eye{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;border-radius:9px;color:#8a93a8;
  cursor:pointer;transition:background .16s,color .16s;}
.bxauth .bxauth-eye:hover{background:rgba(10,15,30,.06);color:#0a0f1e;}
.bxauth-otp{text-align:center;font-family:'Space Mono','JetBrains Mono',ui-monospace,monospace!important;
  font-size:27px!important;font-weight:700;letter-spacing:.34em;text-indent:.34em;padding:.9rem .95rem!important;}

/* L'action : aplat bleu roi charnu, ombre PORTÉE (jamais de halo) */
.bxauth .bxauth-cta{position:relative;width:100%;margin-top:.35rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.85rem 1.1rem;
  background:#1d4ed8;color:#fff;border:0;border-radius:12px;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:15.5px;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 16px 28px -16px rgba(13,32,84,.8);
  transition:background .18s,transform .12s,box-shadow .18s;}
.bxauth .bxauth-cta:hover{background:#1a3fd0;transform:translateY(-1px);
  box-shadow:0 20px 34px -16px rgba(13,32,84,.85);}
.bxauth .bxauth-cta:active{transform:translateY(1px);
  box-shadow:0 8px 18px -12px rgba(13,32,84,.8);}
.bxauth .bxauth-cta:focus-visible{outline:2px solid #0a0f1e;outline-offset:3px;}
.bxauth-ar{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.bxauth .bxauth-cta:hover .bxauth-ar{transform:translateX(3px);}
/* En cours : le bouton dit qu'il travaille */
.bxauth .bxauth-cta.is-busy{pointer-events:none;color:transparent;}
.bxauth .bxauth-cta.is-busy .bxauth-ar{opacity:0;}
.bxauth .bxauth-cta.is-busy::after{content:'';position:absolute;
  width:19px;height:19px;border-radius:50%;
  border:2.4px solid rgba(255,255,255,.32);border-top-color:#fff;
  animation:bxauthSpin .62s linear infinite;}
@keyframes bxauthSpin{to{transform:rotate(360deg);}}

/* Bascule / lien secondaire */
.bxauth .bxauth-switch{text-align:center;margin:1.3rem 0 0;font-size:14px;color:#5b6478;}
.bxauth .bxauth-switch a,.bxauth .bxauth-link{color:#1d4ed8;font-weight:700;cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit;font-size:inherit;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:rgba(29,78,216,.3);transition:text-decoration-color .18s;}
.bxauth .bxauth-switch a:hover,.bxauth .bxauth-link:hover{text-decoration-color:#1d4ed8;}

/* Erreur : lisible, dans la carte, à sa place */
.bxauth .modal-error{background:#fef2f2!important;border:1.5px solid #fecdd3!important;
  border-radius:11px!important;padding:.7rem .9rem!important;margin:0 0 .2rem!important;
  font-size:13.5px!important;font-weight:600;color:#b42318!important;}

/* Les plans : trois cartes du même monde, une seule mise en avant */
.bxauth-plans{display:flex;flex-direction:column;gap:.6rem;}
.bxauth .bxauth-plan{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;width:100%;text-align:left;
  padding:.95rem 1.05rem;background:#fff;border:1.5px solid rgba(10,15,30,.14);
  border-radius:15px;cursor:pointer;font-family:'Inter',sans-serif;
  transition:border-color .18s,transform .16s,box-shadow .18s;}
.bxauth .bxauth-plan:hover{border-color:#1d4ed8;transform:translateY(-2px);
  box-shadow:0 16px 30px -20px rgba(13,32,84,.7);}
.bxauth .bxauth-plan:active{transform:translateY(0);}
.bxauth .bxauth-plan:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px;}
.bxauth .bxauth-plan.best{border-color:rgba(29,78,216,.55);background:#f7f9ff;}
.bxauth-plan-tag{position:absolute;top:-9px;left:1rem;
  background:#1d4ed8;color:#fff;border-radius:7px;padding:.16rem .48rem;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:9.5px;letter-spacing:.07em;}
.bxauth-plan-id{display:flex;flex-direction:column;gap:.14rem;min-width:0;}
.bxauth-plan-id b{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:16px;color:#0a0f1e;}
.bxauth-plan-id i{font-style:normal;font-size:12.5px;color:#6b7488;}
.bxauth-plan-p{flex:none;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-weight:800;font-size:17px;color:#0a0f1e;white-space:nowrap;}
.bxauth-plan-p em{font-style:normal;font-weight:500;font-size:11.5px;color:#8a93a8;}

/* Avatars : la grille suit la carte blanche */
.bxauth .bxauth-avas{grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0;}
.bxauth .bxauth-avas .avatar-cell{background:#fff;border:1.5px solid rgba(10,15,30,.13);
  border-radius:12px;padding:.5rem;font-size:1.6rem;line-height:1;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s;}
.bxauth .bxauth-avas .avatar-cell:hover{border-color:rgba(29,78,216,.5);transform:translateY(-2px);}
.bxauth .bxauth-avas .avatar-cell.selected{border-color:#1d4ed8;background:rgba(29,78,216,.08);}

@media(max-width:520px){
  .bxauth .bxauth-card{padding:1.7rem 1.35rem 1.5rem;border-radius:20px;}
  .bxauth-road{margin-right:38px;}
  .bxauth-rd em{font-size:10.5px;}
  .bxauth-rd i{width:25px;height:25px;font-size:12px;}
  .bxauth-rd::before{top:12px;}
  .bxauth .bxauth-t{font-size:23px;}
  .bxauth-otp{font-size:23px!important;letter-spacing:.26em;text-indent:.26em;}
}
@media(prefers-reduced-motion:reduce){
  .bxauth *,.bxauth-rail i{transition:none!important;}
  .bxauth .bxauth-cta.is-busy::after{animation-duration:1.4s;}
}

/* ── §25.1 — Les deux boutons d'entrée de la barre (landing) ─────────
   « Se connecter » / « S'inscrire » étaient restés indigo #6366f1 avec
   un HALO (box-shadow 0 0 18px, interdit §4) et un survol qui virait
   au violet : trois palettes pour deux boutons. Ils passent au bleu
   roi, aplat + ombre portée, avec un vrai retour au clic — ils
   annoncent la carte d'inscription qu'ils ouvrent. */
body:not([class*="view-"]) #mainNav .btn-outline{
  border:1.5px solid rgba(10,15,30,.16)!important;color:#0a0f1e!important;
  background:#fff!important;font-weight:700;border-radius:10px;
  transition:border-color .18s,background .18s,transform .12s;}
body:not([class*="view-"]) #mainNav .btn-outline:hover{
  border-color:rgba(10,15,30,.34)!important;color:#0a0f1e!important;
  background:#f6f8fd!important;}
body:not([class*="view-"]) #mainNav .btn-outline:active{transform:translateY(1px);}
body:not([class*="view-"]) #mainNav .btn-primary{
  background:#1d4ed8;color:#fff;font-weight:800;border-radius:10px;
  box-shadow:0 12px 22px -12px rgba(13,32,84,.85);
  transition:background .18s,transform .12s,box-shadow .18s;}
body:not([class*="view-"]) #mainNav .btn-primary:hover{
  background:#1a3fd0;transform:translateY(-1px);
  box-shadow:0 16px 28px -12px rgba(13,32,84,.9);}
body:not([class*="view-"]) #mainNav .btn-primary:active{
  transform:translateY(1px);box-shadow:0 6px 14px -10px rgba(13,32,84,.85);}

/* ═══════════════════════════════════════════════════════════════════
   §26 — HUB v3 : le poste de pilotage (bxh-, surcharge la §HUB)
   Ce que le client refusait : « des cards liées aux outils », un
   arc-en-ciel (cinq teintes pleines + le pseudo en dégradé cyan + l'or
   du rang = sept couleurs sur un écran), aucune interactivité, et un
   écran qui ne guide personne — trois cadres « indisponible » compris.
   Ici : DEUX accents seulement — l'or du rang (prestige, DA §4) et le
   violet BlockX pour l'action. La teinte d'un outil ne vit plus que
   dans sa pastille d'icône, et se réveille au survol : elle redevient
   une récompense au contact, pas un fond permanent.
   Le premier bloc de l'écran répond à « je fais quoi maintenant ? ».
   ═══════════════════════════════════════════════════════════════════ */
.bx-hub{--hub-act:#8b5cf6;--hub-act2:#7c3aed;--hub-act-ink:#f6f2ff;}

/* Le pseudo cesse d'être un accent : l'accent, c'est l'action. */
.bx-hub .bxh-hello h1 em{color:var(--hub-txt);}
.bx-hub .bxh-hello h1{letter-spacing:-.03em;}

/* ── Le guide : l'action, et le chemin déjà fait ── */
.bxh-guide{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:1rem;margin:0 0 1.8rem;}
.bxh-next{position:relative;overflow:hidden;padding:1.5rem 1.6rem;border-radius:18px;
  background:linear-gradient(150deg,#241a4d 0%,#1a1533 46%,#141322 100%);
  border:1px solid rgba(139,92,246,.34);}
/* Un seul objet lumineux sur l'écran : la lueur reste large et sourde,
   posée derrière — jamais un halo autour d'un texte (DA §4). */
.bxh-next::after{content:'';position:absolute;right:-90px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.34),transparent 68%);
  pointer-events:none;}
.bxh-next-k{position:relative;z-index:1;display:inline-block;
  font-family:var(--hub-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#c4b5fd;margin-bottom:.75rem;}
.bx-hub .bxh-next-t{position:relative;z-index:1;margin:0 0 .4rem;
  font-family:var(--hub-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.35rem,2.3vw,1.72rem);line-height:1.1;color:#fff;}
.bx-hub .bxh-next-s{position:relative;z-index:1;margin:0 0 1.15rem;max-width:46ch;
  font-size:.9375rem;line-height:1.5;color:#c9c8dd;}
.bx-hub .bxh-next-go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.15rem;border:0;border-radius:12px;
  background:var(--hub-act);color:#fff;
  font-family:var(--hub-head);font-weight:800;font-size:.95rem;letter-spacing:-.01em;
  box-shadow:0 14px 26px -14px rgba(76,29,149,.95);
  transition:background .18s,transform .12s,box-shadow .18s;}
.bx-hub .bxh-next-go:hover{background:var(--hub-act2);transform:translateY(-1px);
  box-shadow:0 18px 32px -14px rgba(76,29,149,1);}
.bx-hub .bxh-next-go:active{transform:translateY(1px);}
.bx-hub .bxh-next-go svg{transition:transform .22s var(--hub-back);}
.bx-hub .bxh-next-go:hover svg{transform:translateX(3px);}

/* La mise en route : les mêmes pastilles que le parcours d'inscription
   — un jalon fait se coche, le chemin se lit d'un coup d'œil. */
.bxh-road{display:flex;flex-direction:column;padding:1.4rem 1.45rem;border-radius:18px;
  background:var(--hub-face);border:1px solid var(--hub-line);}
.bxh-road-k{font-family:var(--hub-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hub-faint);margin-bottom:.9rem;}
.bxh-road-l{list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:.62rem;}
.bxh-mile{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--hub-faint);
  transition:color .3s;}
.bxh-mile i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--hub-faint);
  font-family:var(--hub-head);font-weight:800;font-size:11px;font-style:normal;
  transition:background .3s,color .3s,transform .3s var(--hub-back);}
.bxh-mile b{font-weight:600;}
.bxh-mile.done{color:var(--hub-txt);}
.bxh-mile.done i{background:var(--hub-up);color:#04231a;}
.bx-hub.is-lit .bxh-mile.done i{animation:bxhMile .55s var(--hub-back);}
@keyframes bxhMile{0%{transform:scale(.5)}62%{transform:scale(1.22)}100%{transform:scale(1)}}
.bxh-road-bar{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:1.1rem 0 .5rem;}
.bxh-road-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--hub-up);
  transition:width 1s var(--hub-ease) .3s;}
.bxh-road-n{font-size:.8125rem;color:var(--hub-faint);}
.bxh-road-n b{font-family:var(--hub-mono);color:var(--hub-txt);font-weight:700;}

/* ── Les outils : la teinte rentre dans la pastille, et n'en sort
      qu'au survol. Fin de l'arc-en-ciel de cartes. ── */
.bx-hub .bxh-tool{border-color:var(--hub-line);background:var(--hub-face);
  transition:border-color .2s,transform .16s,background .2s;}
.bx-hub .bxh-tool::before,.bx-hub .bxh-tool::after{display:none;}
.bx-hub .bxh-tool:hover{border-color:color-mix(in srgb,var(--tc) 55%,transparent);
  transform:translateY(-3px);background:var(--hub-face2);}
.bx-hub .bxh-tool-mark{background:color-mix(in srgb,var(--tc) 17%,transparent);
  color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 34%,transparent);
  transition:background .2s,transform .2s var(--hub-back);}
.bx-hub .bxh-tool:hover .bxh-tool-mark{background:var(--tc);color:var(--tk);transform:scale(1.06);}
.bx-hub .bxh-tool-name{color:var(--hub-txt);}
.bx-hub .bxh-tool-state{color:var(--hub-faint);}
.bx-hub .bxh-tool-go{color:var(--hub-mut);transition:color .2s;}
.bx-hub .bxh-tool:hover .bxh-tool-go{color:var(--hub-txt);}
.bx-hub .bxh-tool-go svg{transition:transform .22s var(--hub-back);}
.bx-hub .bxh-tool:hover .bxh-tool-go svg{transform:translateX(3px);}

/* ── Un cadre vide n'est plus un cul-de-sac : il propose la sortie ── */
.bx-hub .bxh-none.act{display:block;width:100%;text-align:left;padding:.8rem .1rem;
  background:none;border:0;color:var(--hub-mut);font-size:.875rem;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.22);transition:color .18s,text-decoration-color .18s;}
.bx-hub .bxh-none.act:hover{color:var(--hub-txt);text-decoration-color:var(--hub-act);}

@media(max-width:900px){
  .bxh-guide{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .bxh-next{padding:1.25rem 1.15rem;}
  .bxh-road{padding:1.15rem 1.15rem;}
}
@media(prefers-reduced-motion:reduce){
  .bx-hub .bxh-mile.done i{animation:none;}
  .bxh-road-bar i{transition:none;}
}

/* ── §26.1 — Le reste de l'écran se range derrière les deux accents ──
   Le board gardait un filet cyan pleine largeur et une pastille « 01 »
   en aplat cyan ; le rail bas ajoutait deux icônes or et une bleue.
   Avec le violet de l'action et l'or du rang, ça faisait cinq teintes
   pour un seul écran. La structure redevient neutre : la couleur reste
   sur la DONNÉE (multiples, réussite, position) — là où elle informe. */
.bx-hub .bxh-face::before{background:linear-gradient(90deg,
  color-mix(in srgb,var(--hub-blue) 55%,transparent),transparent 62%);height:1px;}
.bx-hub .bxh-no{background:rgba(255,255,255,.07);color:var(--hub-faint);
  border:1px solid var(--hub-line);}
.bx-hub .bxh-cell-ico{background:rgba(255,255,255,.06)!important;
  color:var(--hub-mut)!important;border:1px solid var(--hub-line);}
.bx-hub .bxh-cell:hover .bxh-cell-ico{color:var(--hub-txt)!important;}
/* Le board vide n'annonce plus une panne : il envoie au scanner. */
.bx-hub .bxh-rows .bxh-none.act{text-align:center;padding:2.2rem .1rem;}
/* La valeur du cadran était l'objet le plus criard de l'écran alors
   qu'elle ne dit qu'un filtre : elle passe à l'encre, le bleu reste
   sur la poignée du rail — celle qu'on manipule. */
.bx-hub .bxh-val{color:var(--hub-txt);}

/* ═══════════════════════════════════════════════════════════════════
   §27 — LES VITRINES D'OUTILS DU HUB (bxh-sc-*) + la série en flamme
   Le client : « je n'aime pas les icônes reliées aux outils », « trop
   IA », « l'image du scanner n'est pas fou, ce n'est pas la palette de
   la landing », « le rug sniping n'a pas ce beau chart 3D vert/rouge
   dans le hub », « le bot doit représenter la landing côté stratégie »,
   « pas d'animation », « pas de streak flammes ».
   Cinq icônes au trait se ressemblent toutes et ne disent rien. Chaque
   carte porte donc une SCÈNE : les objets de la section correspondante
   de la landing, avec SES couleurs et SON geste — les bougies vertes en
   escalier puis le RUG rouge, les paliers de la stratégie qui tombent,
   le score qui franchit 80. On reconnaît l'outil sans lire son nom.
   Les scènes tournent en boucle courte, se coupent hors écran (la
   carte n'anime que si le hub est visible) et en reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
.bx-hub .bxh-tool{position:relative;display:flex;flex-direction:column;align-items:stretch;
  padding:0 0 .95rem;overflow:hidden;gap:0;}
.bxh-sc{position:relative;display:block;height:104px;margin:0 0 .85rem;overflow:hidden;
  border-bottom:1px solid var(--hub-line);
  background:radial-gradient(120% 90% at 50% 0%,
    color-mix(in srgb,var(--tc) 13%,transparent),transparent 70%),#0b0e16;}
.bx-hub .bxh-tool-name,.bx-hub .bxh-tool-state,.bx-hub .bxh-tool-go{padding-left:1rem;padding-right:1rem;}
.bxh-tool-lock{display:grid;place-items:center;height:104px;margin:0 0 .85rem;
  border-bottom:1px solid var(--hub-line);color:var(--hub-faint);background:#0b0e16;}
/* La cascade d'ouverture : les cartes se posent l'une après l'autre */
.bx-hub.is-anim .bxh-tool{animation:bxhRise .55s var(--hub-ease) both;
  animation-delay:calc(.52s + var(--i,0) * .07s);}

/* ── Scanner Live — la langue de #algo : bleu roi, le score franchit 80 ── */
.bxh-sc-scan{--sc:#2f6bff;}
.bxh-sc-scan .scan-bars{position:absolute;left:14px;right:14px;bottom:34px;top:16px;
  display:flex;align-items:flex-end;gap:6px;}
.bxh-sc-scan .scan-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#4f83ff,#1d4ed8);transform-origin:50% 100%;
  animation:bxscBar 3.4s var(--hub-ease) infinite;animation-delay:calc(var(--i) * .11s);}
@keyframes bxscBar{0%,8%{transform:scaleY(.12);opacity:.35}
  26%,72%{transform:scaleY(1);opacity:1}92%,100%{transform:scaleY(.12);opacity:.35}}
.bxh-sc-scan .scan-gauge{position:absolute;left:14px;right:14px;bottom:18px;height:5px;
  border-radius:99px;background:rgba(255,255,255,.1);}
.bxh-sc-scan .scan-gauge u{position:absolute;inset:0;width:0;border-radius:99px;
  background:#2f6bff;animation:bxscFill 3.4s var(--hub-ease) infinite;}
@keyframes bxscFill{0%,10%{width:0}55%,80%{width:88%}96%,100%{width:0}}
.bxh-sc-scan .scan-gauge b{position:absolute;left:62%;top:-4px;width:2px;height:13px;
  border-radius:2px;background:rgba(255,255,255,.5);font-size:0;}
.bxh-sc-scan .scan-stamp{position:absolute;right:12px;top:12px;
  padding:.2rem .48rem;border-radius:7px;background:#2f6bff;color:#fff;
  font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.06em;opacity:0;transform:scale(1.7) rotate(4deg);
  animation:bxscStamp 3.4s var(--hub-ease) infinite;}
@keyframes bxscStamp{0%,58%{opacity:0;transform:scale(1.7) rotate(4deg)}
  66%,88%{opacity:1;transform:scale(1) rotate(-6deg)}96%,100%{opacity:0}}

/* ── Rug Sniping — la langue de #rsx : l'escalier vert, puis le RUG ── */
.bxh-sc-rug .rug-cds{position:absolute;left:12px;right:12px;bottom:14px;top:14px;
  display:flex;align-items:flex-end;gap:3px;}
.bxh-sc-rug .rug-cds i{flex:1;height:var(--h);border-radius:2px;transform-origin:50% 100%;
  opacity:0;animation:bxscCd 4.2s linear infinite;animation-delay:calc(var(--i) * .17s);}
.bxh-sc-rug .rug-cds i.up{background:linear-gradient(180deg,#2ee68f,#0f9d58);}
.bxh-sc-rug .rug-cds i.dn{background:linear-gradient(180deg,#ff5c78,#c31432);}
@keyframes bxscCd{0%{opacity:0;transform:translateY(8px)}
  6%,78%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(4px)}}
.bxh-sc-rug .rug-b,.bxh-sc-rug .rug-s{position:absolute;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:9.5px;color:#fff;opacity:0;transform:scale(.4);}
.bxh-sc-rug .rug-b{left:26%;bottom:44px;background:#17c975;
  animation:bxscPin 4.2s var(--hub-back) infinite;animation-delay:.5s;}
.bxh-sc-rug .rug-s{left:64%;bottom:66px;background:#ff4060;
  animation:bxscPin 4.2s var(--hub-back) infinite;animation-delay:1.55s;}
@keyframes bxscPin{0%,4%{opacity:0;transform:scale(.4)}
  10%,74%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(.6)}}
.bxh-sc-rug .rug-stamp{position:absolute;right:11px;top:11px;padding:.2rem .48rem;border-radius:7px;
  background:#ff4060;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.08em;opacity:0;transform:scale(2) rotate(6deg);
  animation:bxscRug 4.2s var(--hub-ease) infinite;}
@keyframes bxscRug{0%,70%{opacity:0;transform:scale(2) rotate(6deg)}
  76%,90%{opacity:1;transform:scale(1) rotate(-8deg)}97%,100%{opacity:0}}

/* ── Bot — la langue de #botx : la stratégie qui SE TIRE, palier par palier ── */
.bxh-sc-bot .bot-rows{position:absolute;left:14px;right:14px;top:20px;
  display:flex;flex-direction:column;gap:11px;}
.bxh-sc-bot .bot-rows u{position:relative;display:block;height:8px;border-radius:99px;
  background:rgba(255,255,255,.09);text-decoration:none;}
.bxh-sc-bot .bot-rows u::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  border-radius:99px;background:linear-gradient(90deg,#fb7185,#f43f5e);
  animation:bxscPal 3.8s var(--hub-ease) infinite;animation-delay:calc(var(--i) * .34s);}
@keyframes bxscPal{0%,6%{width:0}30%,74%{width:var(--w)}92%,100%{width:0}}
.bxh-sc-bot .bot-rows em{position:absolute;right:0;top:-15px;font-style:normal;
  font-family:'Space Mono',monospace;font-size:9.5px;color:var(--hub-faint);}
.bxh-sc-bot .bot-sold{position:absolute;right:12px;bottom:11px;padding:.18rem .45rem;
  border-radius:6px;background:#fff;color:#340810;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:9.5px;opacity:0;transform:translateY(8px);
  animation:bxscSold 3.8s var(--hub-back) infinite;animation-delay:1.2s;}
@keyframes bxscSold{0%,6%{opacity:0;transform:translateY(8px)}
  16%,76%{opacity:1;transform:none}90%,100%{opacity:0}}

/* ── Wallet Tracker — le podium se dresse ── */
.bxh-sc-wt .wt-pod{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:7px;height:70px;}
.bxh-sc-wt .wt-pod i{position:relative;width:30px;height:var(--h);border-radius:5px 5px 0 0;
  display:flex;align-items:flex-start;justify-content:center;padding-top:5px;
  transform-origin:50% 100%;transform:scaleY(.1);
  animation:bxscPod 3.6s var(--hub-back) infinite;}
.bxh-sc-wt .wt-pod i b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:11px;}
.bxh-sc-wt .wt-pod .p1{background:linear-gradient(180deg,#f7cf5a,#e0a020);color:#2e1d00;animation-delay:.16s;}
.bxh-sc-wt .wt-pod .p2{background:linear-gradient(180deg,#d7dde8,#9aa4b6);color:#171b25;}
.bxh-sc-wt .wt-pod .p3{background:linear-gradient(180deg,#e0a97a,#b5713c);color:#2b1204;animation-delay:.32s;}
@keyframes bxscPod{0%,6%{transform:scaleY(.1)}26%,76%{transform:scaleY(1)}92%,100%{transform:scaleY(.1)}}

/* ── La série : une flamme qui brûle, ou une braise ── */
.bxh-streak{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem .5rem .6rem;
  border-radius:14px;background:var(--hub-face);border:1px solid var(--hub-line);
  transition:border-color .2s,transform .14s;}
.bxh-streak:hover{border-color:rgba(255,138,61,.5);transform:translateY(-1px);}
.bxh-flame{position:relative;width:26px;height:30px;flex:none;}
.bxh-flame i{position:absolute;left:50%;bottom:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  transform:translateX(-50%) rotate(-45deg);opacity:.35;}
.bxh-flame i:nth-child(1){width:22px;height:22px;background:#7a3b00;}
.bxh-flame i:nth-child(2){width:15px;height:15px;background:#a35200;}
.bxh-flame i:nth-child(3){width:8px;height:8px;background:#c26a00;}
.bxh-streak.on .bxh-flame i{opacity:1;animation:bxhFlame 1.5s ease-in-out infinite;}
.bxh-streak.on .bxh-flame i:nth-child(1){background:#ff8a3d;animation-delay:0s;}
.bxh-streak.on .bxh-flame i:nth-child(2){background:#ffc23d;animation-delay:.16s;}
.bxh-streak.on .bxh-flame i:nth-child(3){background:#fff0a8;animation-delay:.3s;}
@keyframes bxhFlame{0%,100%{transform:translateX(-50%) rotate(-45deg) scale(1)}
  50%{transform:translateX(-52%) rotate(-45deg) scale(1.13)}}
.bxh-streak-t b{display:block;font-family:var(--hub-head);font-weight:800;font-size:1.05rem;
  line-height:1;color:var(--hub-txt);}
.bxh-streak.on .bxh-streak-t b{color:#ff9d4d;}
.bxh-streak-t i{display:block;font-style:normal;font-size:.72rem;color:var(--hub-faint);margin-top:.15rem;}
.bxh-streak-b{font-family:var(--hub-mono);font-size:.7rem;color:var(--hub-faint);
  padding-left:.55rem;border-left:1px solid var(--hub-line);}

@media(max-width:560px){
  .bxh-sc,.bxh-tool-lock{height:88px;}
}
@media(prefers-reduced-motion:reduce){
  .bxh-sc *,.bxh-flame i{animation:none!important;}
  .bxh-sc-scan .scan-gauge u{width:88%;}
  .bxh-sc-rug .rug-cds i,.bxh-sc-rug .rug-b,.bxh-sc-rug .rug-s{opacity:1;transform:none;}
  .bxh-sc-bot .bot-rows u::after{width:var(--w);}
  .bxh-sc-wt .wt-pod i{transform:scaleY(1);}
  .bx-hub.is-anim .bxh-tool{animation:none;}
}

/* ── §27.1 — Les nouveautés + le podium des KOL ──────────────────────
   « On ne voit pas les nouveautés » : un produit qui bouge doit le
   dire, sinon le travail passe inaperçu. Un bandeau court, trois
   entrées, chacune cliquable — jamais une pastille « NEW » orpheline
   posée sur une carte, qui ne mène nulle part.
   « Les traders dans le top KOL pas affichés » : le podium montre
   maintenant les VRAIS traders et leurs profits, pas l'XP des membres. */
.bxh-news{display:flex;align-items:stretch;gap:.85rem;margin:0 0 1.7rem;
  padding:.6rem .75rem;border-radius:15px;background:var(--hub-face);
  border:1px solid var(--hub-line);overflow:hidden;}
.bxh-news-k{flex:none;align-self:center;padding:.28rem .6rem;border-radius:8px;
  background:var(--hub-act);color:#fff;
  font-family:var(--hub-head);font-weight:800;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;}
.bxh-news-l{display:flex;gap:.5rem;min-width:0;overflow-x:auto;scrollbar-width:none;}
.bxh-news-l::-webkit-scrollbar{display:none;}
.bx-hub .bxh-news-i{flex:none;display:flex;flex-direction:column;gap:.1rem;text-align:left;
  padding:.42rem .8rem;border-radius:11px;background:transparent;border:1px solid transparent;
  transition:background .18s,border-color .18s,transform .14s;
  animation:bxhRise .5s var(--hub-ease) both;animation-delay:calc(.2s + var(--i) * .07s);}
.bx-hub .bxh-news-i:hover{background:var(--hub-face2);border-color:var(--hub-line);
  transform:translateY(-1px);}
.bx-hub .bxh-news-i b{font-family:var(--hub-head);font-weight:800;font-size:.875rem;
  letter-spacing:-.015em;color:var(--hub-txt);white-space:nowrap;}
.bx-hub .bxh-news-i i{font-style:normal;font-size:.75rem;color:var(--hub-faint);white-space:nowrap;}

/* Le podium : la place se lit à la couleur du jeton, comme une médaille */
.bx-hub .bxh-pod-n.r1{background:linear-gradient(180deg,#f7cf5a,#e0a020);color:#2e1d00;}
.bx-hub .bxh-pod-n.r2{background:linear-gradient(180deg,#d7dde8,#9aa4b6);color:#171b25;}
.bx-hub .bxh-pod-n.r3{background:linear-gradient(180deg,#e0a97a,#b5713c);color:#2b1204;}
.bx-hub .bxh-pod-n{font-weight:800;}

@media(max-width:640px){
  .bxh-news{flex-direction:column;gap:.5rem;}
  .bxh-news-k{align-self:flex-start;}
}

/* ── §27.2 — Les outils portent l'écran (21/08) ──────────────────────
   Le board des calls est parti : la rangée d'outils n'est plus
   « subordonnée à l'objet », elle EST l'objet. Les vitrines gagnent en
   hauteur et la rangée en respiration — cinq outils à égalité. */
.bx-hub .bxh-tools{margin-bottom:2.4rem;}
.bx-hub .bxh-sc,.bx-hub .bxh-tool-lock{height:132px;}
.bx-hub .bxh-tool-name{font-size:1.02rem;}
@media(max-width:1100px){.bx-hub .bxh-sc,.bx-hub .bxh-tool-lock{height:116px;}}
@media(max-width:560px){.bx-hub .bxh-sc,.bx-hub .bxh-tool-lock{height:100px;}}

/* ═══════════════════════════════════════════════════════════════════
   §29 — SESSION EXPIRÉE SUR CET APPAREIL (bx-sessdead)
   ═══════════════════════════════════════════════════════════════════
   Le bandeau que le silence rendait nécessaire. Un second appareil —
   le téléphone — laissé de côté quelques heures voyait son jeton
   expirer : chaque appel repartait en 401 et CHAQUE outil se peignait
   vide, sans un mot, l'app ayant toujours l'air connectée. Le bandeau
   nomme la panne et porte le seul geste qui la répare.
   Posé en bas (le pouce y est déjà sur mobile), au-dessus de tout, et
   il respecte la zone sûre iOS. */
.bx-sessdead{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.95rem 1.1rem calc(.95rem + env(safe-area-inset-bottom,0px));
  background:var(--bx-raised);
  border-top:1px solid var(--bx-warn-soft);
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.9);
  font-family:var(--bx-font);
  animation:bxSessIn .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bxSessIn{from{transform:translateY(100%)}to{transform:none}}
.bx-sessdead-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.bx-sessdead-txt strong{color:var(--bx-warn);font-size:.92rem;font-weight:700;letter-spacing:-.01em;}
.bx-sessdead-txt span{color:var(--bx-text-2);font-size:.82rem;line-height:1.4;}
.bx-sessdead-go{
  flex-shrink:0;border:0;border-radius:11px;padding:.68rem 1.2rem;
  background:var(--bx-violet);color:#fff;
  font-family:var(--bx-font);font-size:.85rem;font-weight:700;cursor:pointer;
  transition:background .16s ease,transform .12s ease;
}
.bx-sessdead-go:hover{background:var(--bx-violet-hover);}
.bx-sessdead-go:active{transform:scale(.97);}
.bx-sessdead-go:focus-visible{outline:2px solid var(--bx-violet-line);outline-offset:2px;}
@media(max-width:560px){
  .bx-sessdead{gap:.7rem;}
  .bx-sessdead-go{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .bx-sessdead{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §30 — LA VRAIE VERSION MOBILE
   ═══════════════════════════════════════════════════════════════════
   Retour client (iPhone) : « la plupart des outils rendent mal, même
   la landing a quelques bugs ». Le site n'était pas cassé écran par
   écran — il répétait quatre fautes, toujours les mêmes, invisibles
   sur un 27 pouces :

   1. LA PAGE GLISSE DE CÔTÉ. Une animation d'entrée qui translate en
      X, une lueur d'ambiance, un halo de curseur : chacun élargit le
      document de quelques pixels et le doigt fait riper toute la page.
      `overflow-x:clip` sur la racine coupe le débordement SANS créer
      de conteneur de défilement (contrairement à `hidden`, qui casse
      `position:sticky`).
   2. LES GRILLES `1fr` NE SE SERRENT PAS. `grid-template-columns:1fr`
      garde `min-width:auto` : la colonne grandit jusqu'au contenu et
      dépasse l'écran. `minmax(0,1fr)` est la même colonne, autorisée
      à se serrer. C'est la faute la plus répandue du fichier.
   3. LA 3D N'A PAS DE SENS SANS SOURIS. Le feed Rug Sniping vit dans
      une `perspective` posée sur LA GRILLE : l'origine est le centre
      de la grille, donc une card haute de la liste voit ses éléments
      « soulevés » (translateZ) projetés 40 px plus haut — le badge ×
      sortait de la card et retombait sur la précédente. Sur mobile,
      il n'y a ni survol ni tilt : on éteint la 3D, le badge revient
      dans son coin.
   4. LE POUCE N'A PAS DE HOVER. Ce qui n'apparaît qu'au survol
      n'existe pas ; ce qui fait 24 px ne se touche pas (44 px est le
      minimum d'Apple) ; et la barre du bas de l'iPhone mange ce qui
      est collé en bas si `env(safe-area-inset-*)` est ignoré.

   Portée : cette section ne parle QUE de mobile (≤860 px ou pointeur
   grossier). Aucune règle ne change le rendu bureau. */

/* ── 30.1 — Plus jamais de dérive horizontale ─────────────────────── */
@media(max-width:860px){
  /* `clip` et surtout PAS `hidden` : `hidden` sur la racine en fait un
     conteneur de défilement — sur iOS ça a déjà coûté le scroll de la
     page entière, et ça casse `position:sticky`. Les iOS < 16 gardent
     le petit ripement latéral : un défaut cosmétique vaut mieux qu'une
     page qui ne défile plus. */
  html{overflow-x:clip;}
  /* Les grilles qui refusaient de se serrer (cf. faute n°2). */
  .acx-main,.acx-pillars,.form-layout,.form-layout.hub-mode,
  .st3-layout{grid-template-columns:minmax(0,1fr)!important;}
  /* Un média ne dépasse jamais sa colonne. */
  img,svg,video,canvas{max-width:100%;}
}

/* ── 30.2 — Ce qui n'a de sens qu'avec une souris disparaît ───────── */
@media(pointer:coarse){
  /* Halo qui suit le curseur : 400 px de fixed inutiles sur un doigt. */
  .cursor-glow{display:none!important;}
  /* Reflet de survol des cards Rug Sniping : jamais déclenché au doigt. */
  .bxr-glare{display:none;}
}
/* Comparateur interne « Fast vs Moon » (bouton flottant de debug, cf.
   BX_SHADOW_PUBLIC) : sur un écran de téléphone il recouvre les cards.
   Il reste accessible au bureau et via ?algo=v3. */
@media(max-width:860px){
  #bxsh-btn{display:none!important;}
}

/* ── 30.3 — Rug Sniping : la 3D s'éteint, le badge rentre ─────────── */
@media(max-width:860px),(pointer:coarse){
  #rugsnip .rug-grid{perspective:none!important;}
  .bxr-card{transform:none!important;}
  .bxr-stage,.bxr-x,.bxr-hide,.bxr-glare,.bxr-card::before{transform:none;}
  /* Le badge ×N reste lisible et cliquable sans écraser le graphique. */
  .bxr-x{top:12px;right:12px;}
  .bxr-hide{top:12px;left:12px;}
}

/* ── 30.4 — Le menu suit le monde de l'app, pas celui de la landing ─
   Le panneau du burger est blanc (landing) et ses liens d'app sont
   écrits en blanc : sur toute vue non listée dans l'ancienne règle
   (Wallet Tracker, Rug Sniping, Classement…) le menu
   s'ouvrait BLANC SUR BLANC — seul « Déconnexion », rouge, restait
   visible. C'est le bug que le client a photographié. La règle ne
   s'appuie plus sur une liste de vues à tenir à jour mais sur l'état
   « connecté » (`body.bx-auth`), qui est justement ce qui décide si
   ces liens existent. */
body.bx-auth .nav-mobile-menu{
  background:rgba(8,10,18,.98);
  border-top-color:rgba(255,255,255,.08);
}
body.bx-auth.bx-light .nav-mobile-menu{
  background:rgba(250,251,254,.98);
  border-top-color:var(--sx-border,rgba(15,23,42,.1));
}
/* Ceinture et bretelles : quel que soit le fond, un lien du menu se lit. */
body.bx-auth .nav-mobile-menu .mob-app-link{color:rgba(255,255,255,.82);}
body.bx-auth.bx-light .nav-mobile-menu .mob-app-link{color:#1f2937;}
body.bx-auth .nav-mobile-menu .mob-app-link.danger{color:#f87171;}

/* ── 30.5 — Le pouce : cibles de 44 px, encoche, barre du bas ─────── */
@media(pointer:coarse){
  .bxr-copy,.wt-cp,.wt-x,.scn-copy,.hist-copy,.bxr-hide,.wt-search-x{
    min-width:34px;min-height:34px;}
  .nav-mobile-menu .mob-app-link,.nav-mobile-menu .mob-simple-link{
    min-height:44px;display:flex;align-items:center;}
}
@media(max-width:860px){
  /* La barre du bas de l'iPhone recouvre les derniers pixels : on rend
     leur place aux vues qui vont jusqu'en bas. */
  .nav-mobile-menu{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));}
  section#scanner,section#rugsnip,section#wallettracker,
  #dx2Wrap,#formation-section{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));}
}

/* ── 30.6 — Le bandeau Nouveautés du hub se lit en entier ─────────── */
@media(max-width:560px){
  .bxh-news{flex-direction:column;gap:.5rem;}
  .bxh-news-l{flex-direction:column;overflow-x:visible;}
  .bx-hub .bxh-news-i{width:100%;}
  .bx-hub .bxh-news-i b,.bx-hub .bxh-news-i i{white-space:normal;}
}

/* ── 30.7 — Le plancher typographique du téléphone ────────────────
   Les libellés éteints de l'app (surtitres, unités, chips) vivent
   entre 9,5 et 11 px : calibrés sur un 27 pouces à 60 cm, ils sont
   illisibles à bout de bras sur un écran de 390 px — l'œil ne lit
   plus, il devine, et c'est précisément ce qui donne l'impression
   que « ça rend mal ». On pose un plancher à 11,5 px : un demi-point
   de plus, pas une refonte de l'échelle — les blocs ne bougent pas. */
@media(max-width:560px){
  .bxh-next-k,.bxh-road-k,.bxh-news-k,
  .bxr-eyebrow,.bxr-chase,
  .wt-lbl,.ta-chip,.ta-cmd-tag,.ta-cmd-meta,
  .scn-card-when,.scn-verdict,
  .pf3-chip,.pf3-ctile-tag,.axv-panel-count{font-size:11.5px!important;}
  /* Les tuiles de statistiques : le chiffre porte, le libellé doit
     rester lisible sans casser la grille à 4 colonnes. */
  .bxr-stat i,.bxr-hero-stat i{font-size:11px!important;}
}

/* ── 30.8 — Ce qui se touche fait au moins 36 px ──────────────────
   Apple demande 44 px, la réalité du produit tient à 36 px de haut
   avec de l'air autour. En dessous, on vise et on rate : la croix de
   fermeture d'une modale faisait 15 px de côté. On agrandit la CIBLE,
   pas le dessin — padding et centrage, l'icône garde sa taille. */
@media(pointer:coarse){
  .bxh-more,.bxh-pod-row,.wt-pod-x,.wt-seg-btn,.rg-seg-btn,
  .pf3-back,.pf4-act,.pf4-handle,.axp-skip,.scn-verdict{
    min-height:36px;display:inline-flex;align-items:center;justify-content:center;}
  .scb-close,.pnl-close-x,.wt-dr-close,.wt-dr-x{
    min-width:40px;min-height:40px;display:grid;place-items:center;}
}

/* ── 30.9 — La vitrine produit montre le produit, pas un timbre ────
   Les trois maquettes de `#showcase` sont des CAPTURES D'ÉCRAN de
   l'app en 923-1100 px de large. Réduites à 350 px sur un téléphone,
   le texte tombe à 4 px : on voit qu'il se passe quelque chose, on ne
   lit rien — la preuve produit ne prouve plus rien. Sur mobile on
   n'affiche donc plus l'écran entier mais un RECADRAGE de ce qui
   compte (le bandeau de score + un call ; la carte PnL ×220 ; le rang
   + les catégories), servi en 2× par `<picture>`.
   ⚠️ 24/08 — CE BLOC A ÉTÉ DÉPLACÉ. Les règles qui vivaient ici
   (ratio libre, object-fit:contain, base clavier masquée, bouton
   « Ouvrir » sorti de la maquette) ne suffisaient pas : le recadrage
   vertical (500×956) affiché en pleine largeur de carte donnait une
   image de ~670 px de haut dans une scène qui n'en fait que 300 —
   la maquette débordait sur le nom de l'outil (capture client du
   24/08) et restait floue. Tout le traitement mobile du showcase est
   maintenant écrit d'un seul tenant dans index.html, § « MOBILE
   (24/08) — BlockX en action sur téléphone » : maquette entière mais
   PETITE, stats sous l'écran, et une pression ouvre une feuille
   plein écran où la capture est enfin lisible. Ne pas réintroduire
   de règles `#showcase` mobile ici : leur spécificité (1,1,0) passe
   devant celles d'index.html et la feuille se casse. */

/* ── 30.10 — Les réglages montrent leurs onglets, sans les cacher ──
   La colonne de navigation devient une rangée qui défile : sur un
   téléphone, un défilement horizontal sans indice se lit comme un
   menu tronqué. Cinq libellés courts tiennent sur deux lignes. */
@media(max-width:560px){
  .st3-nav{flex-wrap:wrap;overflow-x:visible;}
  .st3-navbtn{width:auto;flex:0 0 auto;}
}

/* ── 30.11 — Deux derniers points serrés ──────────────────────────
   Le filtre du classement (bxlb-seg) restait sous la barre des 36 px,
   et la liste de leçons de l'Academy perdait 25 px de titre au profit
   d'un rail décoratif : sur 390 px, chaque pixel de titre compte. */
@media(pointer:coarse){
  .bxlb-seg button{min-height:36px;}
}
@media(max-width:430px){
  .ax5-st{grid-template-columns:38px minmax(0,1fr);gap:0 .55rem;}
  .ax5-spine{left:19px;}
  .ax5-node{width:32px;height:32px;}
  .ax5-detin{padding-left:.6rem;padding-right:.6rem;}
}

/* ── 30.12 — La landing rendue à sa taille sur un téléphone ────────
   `body:not([class*="view-"]){zoom:.8}` (index.html ~l.76) existe pour
   dézoomer une landing calibrée sur de grands écrans. Sur un iPhone,
   elle rapetissait aussi ce qui était déjà à la bonne taille : le
   texte courant tombait à ~13 px là où iOS lit à 16-17. On rend
   l'échelle réelle sous 768 px.
   Trois hauteurs compensaient ce zoom en 125 vh/vw (un `fixed` devait
   déborder pour couvrir l'écran réel) : sans le zoom, elles
   dépasseraient d'un quart d'écran — elles reviennent à 100.
   `svh` : la barre d'URL de Safari ne mange plus le bas du héros. */
@media(max-width:768px){
  body:not([class*="view-"]){zoom:1;}
  #hero.bxv{min-height:100vh!important;min-height:100svh!important;}
  .bxh{min-height:100vh;min-height:100svh;}
  .bxv-intro{width:100vw;height:100vh;height:100svh;}
}
/* Le repère « Explore la suite » est une affordance de bureau : il est
   posé en absolu au bas du héros et, sur 390 px, il tombe PILE sur la
   phrase d'accroche — deux textes l'un sur l'autre. Au doigt, on sait
   déjà qu'une page se fait défiler. */
@media(max-width:768px){
  .bxh-scroll{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §29 — RUG SNIPING v2 (rg2-) : groupes, stratégie, communauté
   Client : le hero « poste de tir » parlait comme un robot (EN CHASSE,
   Surveillance active, dump moyen −84%…) — des phrases IA et des stats
   au pif. Ici : PRESQUE AUCUN TEXTE, des objets. L'outil s'organise en
   quatre onglets ; le cœur est le système de GROUPES : un rail dont
   l'aplat vert glisse, la vraie chart 1 min du token d'exemple sur
   board navy (le monde vert candle de la landing #rsx), deux faits,
   une stratégie recommandée qu'on copie ou personnalise.
   Boutons : contour épuré, encre ; l'aplat vert charnu est réservé à
   l'ACTION et à l'état actif (assise 0 3px 0 — jamais de halo).
   ═══════════════════════════════════════════════════════════════════ */
#rugsnip{
  /* L'app est SOMBRE par défaut : les cartes sont des surfaces élevées,
     jamais du blanc pur posé sur du noir (« les couleurs ne rendent pas
     sur le noir » — 25/08). Le clair (bx-light) reprend le blanc. */
  --rg2-ink:#edf1fa;--rg2-mut:#a0a9c3;--rg2-faint:#7d86a3;
  --rg2-line:rgba(255,255,255,.1);--rg2-card:#151a28;
  --rg2-chip:#1e2436;--rg2-step:#242b3d;--rg2-field:#101522;
  --rg2-up-bg:rgba(23,201,117,.14);--rg2-up-ink:#3fe39a;
  --rg2-down-bg:rgba(255,64,96,.14);--rg2-down-ink:#ff7288;
  --rg2-green:#0e9e64;--rg2-green2:#17c975;--rg2-green-deep:#0a6b45;
  --rg2-red:#ff4060;--rg2-navy:#0c1122;
  --rg2-head:'Bricolage Grotesque','Space Grotesk',sans-serif;
  --rg2-mono:'Space Mono',ui-monospace,monospace;
  --rg2-ease:cubic-bezier(.16,1,.3,1);--rg2-back:cubic-bezier(.34,1.56,.64,1);
}
body.bx-light #rugsnip{
  --rg2-ink:#0c1526;--rg2-mut:#5b6478;--rg2-faint:#8a93a8;
  --rg2-line:rgba(10,21,38,.13);--rg2-card:#fff;
  --rg2-chip:#f4f6fb;--rg2-step:#e8ecf4;--rg2-field:#fff;
  --rg2-up-bg:rgba(14,158,100,.09);--rg2-up-ink:#0e9e64;
  --rg2-down-bg:rgba(255,64,96,.08);--rg2-down-ink:#c22844;
}
/* ── En-tête : le titre, les onglets, rien d'autre ── */
.rg2-head{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  margin:0 0 1.35rem;}
.rg2-title{font-family:var(--rg2-head);font-weight:800;letter-spacing:-.03em;
  font-size:1.6rem;color:var(--rg2-ink);margin:0;}
.rg2-tabs{position:relative;display:inline-flex;gap:2px;padding:4px;
  background:var(--rg2-card);border:1.5px solid var(--rg2-line);border-radius:14px;}
.rg2-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:10px;
  background:var(--rg2-green);box-shadow:0 3px 0 var(--rg2-green-deep);
  opacity:0;transition:left .32s var(--rg2-ease),width .32s var(--rg2-ease);}
.rg2-thumb.set{opacity:1;}
.rg2-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.42rem;
  padding:.52rem .85rem;border:0;background:none;border-radius:10px;cursor:pointer;
  font-family:var(--rg2-head);font-weight:700;font-size:.9rem;letter-spacing:-.01em;
  color:var(--rg2-mut);transition:color .2s;}
.rg2-tab:hover{color:var(--rg2-ink);}
.rg2-tab.on{color:#fff;}
.rg2-tab:focus-visible{outline:2px solid var(--rg2-green);outline-offset:2px;}
.rg2-botlink{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border:1.5px solid var(--rg2-line);border-radius:12px;
  background:var(--rg2-card);cursor:pointer;color:var(--rg2-ink);
  font-family:var(--rg2-head);font-weight:700;font-size:.88rem;
  transition:border-color .18s,transform .12s;}
.rg2-botlink:hover{border-color:var(--rg2-ink);transform:translateY(-1px);}
.rg2-pane{animation:rg2In .4s var(--rg2-ease);}
@keyframes rg2In{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Le fil : trois pastilles (grammaire roadmap), pas une phrase ── */
.rg2-steps{display:flex;align-items:center;gap:.55rem;list-style:none;
  margin:0 0 1.1rem;padding:0;}
.rg2-steps li{display:flex;align-items:center;gap:.45rem;color:var(--rg2-faint);
  font-size:.82rem;font-weight:600;}
.rg2-steps li i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--rg2-step);color:var(--rg2-faint);font-style:normal;
  font-family:var(--rg2-head);font-weight:800;font-size:11px;
  transition:background .3s,color .3s,transform .3s var(--rg2-back);}
.rg2-steps li.on{color:var(--rg2-ink);}
.rg2-steps li.on i{background:var(--rg2-green);color:#fff;}
.rg2-steps li:not(:last-child)::after{content:'';width:26px;height:2px;border-radius:2px;
  background:var(--rg2-line);margin-left:.55rem;}

/* ── Le rail des groupes : l'aplat vert GLISSE sous le choix ── */
.rg2-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:8px;background:var(--rg2-card);border:1.5px solid var(--rg2-line);
  border-radius:18px;margin:0 0 1.15rem;}
.rg2-rail-thumb{position:absolute;top:8px;bottom:8px;left:0;width:0;border-radius:13px;
  background:var(--rg2-green);box-shadow:0 4px 0 var(--rg2-green-deep);
  opacity:0;transition:left .34s var(--rg2-ease),width .34s var(--rg2-ease);}
.rg2-rail-thumb.set{opacity:1;}
.rg2-g{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:.28rem;padding:.85rem .95rem;border:0;background:none;border-radius:13px;
  cursor:pointer;text-align:left;color:var(--rg2-mut);
  transition:color .25s,transform .14s;}
.rg2-g:hover{color:var(--rg2-ink);transform:translateY(-1px);}
.rg2-g svg{transition:transform .3s var(--rg2-back);}
.rg2-g:hover svg{transform:translateY(-2px);}
.rg2-g b{font-family:var(--rg2-head);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--rg2-ink);transition:color .25s;}
.rg2-g i{font-style:normal;font-size:.76rem;transition:color .25s;}
.rg2-g.on{color:rgba(255,255,255,.85);}
.rg2-g.on b{color:#fff;}
.rg2-g.on i{color:rgba(255,255,255,.75);}
.rg2-g:focus-visible{outline:2px solid var(--rg2-green);outline-offset:2px;}

/* ── La scène : board navy + panneau latéral ── */
.rg2-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  gap:1rem;align-items:stretch;}
.rg2-stage.in{animation:rg2In .38s var(--rg2-ease);}
.rg2-board{background:var(--rg2-navy);border-radius:20px;overflow:hidden;
  border:1px solid rgba(23,201,117,.16);
  box-shadow:0 34px 60px -34px rgba(4,10,26,.7);display:flex;flex-direction:column;}
.rg2-board-top{display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07);}
.rg2-gname{font-family:var(--rg2-head);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:#fff;}
.rg2-tf{font-family:var(--rg2-mono);font-size:11px;color:#8fd7b5;
  border:1px solid rgba(23,201,117,.3);border-radius:7px;padding:.14rem .42rem;}
.rg2-ca{margin-left:auto;font-family:var(--rg2-mono);font-size:12px;color:#9fb0d0;
  text-decoration:none;border-bottom:1.5px solid rgba(159,176,208,.3);
  transition:color .18s,border-color .18s;}
.rg2-ca:hover{color:#fff;border-color:#fff;}
.rg2-cvwrap{position:relative;flex:1;min-height:320px;}
.rg2-cvwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.rg2-x{position:absolute;top:12px;right:12px;padding:.24rem .55rem;border-radius:8px;
  background:var(--rg2-green2);color:#04231a;
  font-family:var(--rg2-head);font-weight:800;font-size:.95rem;letter-spacing:-.02em;
  box-shadow:0 3px 0 var(--rg2-green-deep);}
.rg2-cvnote{position:absolute;left:14px;bottom:10px;font-size:11px;color:#7285a8;}
.rg2-side{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.rg2-facts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.rg2-fact{background:var(--rg2-card);border:1.5px solid var(--rg2-line);border-radius:15px;
  padding:.85rem 1rem;transition:border-color .2s,transform .16s;}
.rg2-fact:hover{border-color:rgba(14,158,100,.4);transform:translateY(-2px);}
.rg2-fact b{display:block;font-family:var(--rg2-head);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--rg2-ink);line-height:1.1;}
.rg2-fact i{font-style:normal;font-size:.8rem;color:var(--rg2-mut);}
.rg2-reco{flex:1;background:var(--rg2-card);border:1.5px solid var(--rg2-line);
  border-radius:17px;padding:1.05rem 1.1rem;display:flex;flex-direction:column;}
.rg2-reco-hd{font-family:var(--rg2-head);font-weight:800;font-size:.95rem;
  letter-spacing:-.015em;color:var(--rg2-ink);margin-bottom:.7rem;}
.rg2-reco-l{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.42rem;}
.rg2-reco-l li{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.5rem .7rem;border-radius:10px;background:var(--rg2-chip);font-size:.88rem;}
.rg2-reco-l li i{font-style:normal;color:var(--rg2-mut);font-weight:600;}
.rg2-reco-l li b{font-family:var(--rg2-mono);font-weight:700;color:var(--rg2-ink);white-space:nowrap;}
/* Même règle que les cartes de stratégie (§33, verdict 27/08) : le sens
   vient du filet et de la teinte du panneau, l'écriture reste à l'encre. */
.rg2-reco-l li.up{background:var(--rg2-up-bg);
  box-shadow:inset 2.5px 0 0 var(--rg2-green2);}
.rg2-reco-l li.down{background:var(--rg2-down-bg);
  box-shadow:inset 2.5px 0 0 var(--rg2-red);}
.rg2-reco-btns{display:flex;gap:.55rem;margin-top:auto;}

/* ── Les boutons de la maison : contour épuré / aplat vert charnu ── */
.rg2-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.05rem;border:1.5px solid var(--rg2-line);border-radius:12px;
  background:var(--rg2-card);cursor:pointer;color:var(--rg2-ink);
  font-family:var(--rg2-head);font-weight:700;font-size:.9rem;letter-spacing:-.01em;
  transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;}
.rg2-btn:hover{border-color:var(--rg2-ink);transform:translateY(-1px);}
.rg2-btn:active{transform:translateY(1px);}
.rg2-btn.pri{background:var(--rg2-green);border-color:var(--rg2-green);color:#fff;
  box-shadow:0 3px 0 var(--rg2-green-deep);}
.rg2-btn.pri:hover{background:#0c8a56;border-color:#0c8a56;}
.rg2-btn.pri:active{box-shadow:0 1px 0 var(--rg2-green-deep);}
.rg2-btn.pri.ok{animation:rg2Pop .5s var(--rg2-back);}
@keyframes rg2Pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.rg2-btn.sm{padding:.42rem .8rem;font-size:.82rem;border-radius:10px;}
.rg2-btn.danger{color:#c22844;border-color:rgba(255,64,96,.4);}
.rg2-btn.danger:hover{border-color:#c22844;}
.rg2-btn:focus-visible{outline:2px solid var(--rg2-green);outline-offset:2px;}

/* ── Onglet Stratégie ── */
.rg2-strathead{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;}
.rg2-count{font-size:.85rem;color:var(--rg2-faint);}
/* Le nombre est la donnée : il porte l'encre, le mot reste en retrait. */
.rg2-count b{font-family:var(--rg2-mono);font-weight:700;font-size:.95rem;color:var(--rg2-ink);}
.rg2-strathead .rg2-btn{margin-left:auto;}
.rg2-stratlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.9rem;}
.rg2-scard{background:var(--rg2-card);border:1.5px solid var(--rg2-line);border-radius:16px;
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.7rem;
  animation:rg2In .4s var(--rg2-ease) both;animation-delay:calc(var(--i,0)*.05s);
  transition:border-color .2s,transform .16s,box-shadow .2s;}
.rg2-scard:hover{border-color:rgba(14,158,100,.45);transform:translateY(-2px);
  box-shadow:0 16px 30px -22px rgba(4,10,26,.5);}
.rg2-scard-hd{display:flex;align-items:center;gap:.6rem;}
.rg2-scard-hd b{font-family:var(--rg2-head);font-weight:800;font-size:1rem;
  letter-spacing:-.015em;color:var(--rg2-ink);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rg2-gtag{margin-left:auto;flex:none;font-size:.7rem;font-weight:700;color:var(--rg2-green);
  border:1px solid rgba(14,158,100,.4);border-radius:7px;padding:.14rem .45rem;}
.rg2-lvls{display:flex;flex-wrap:wrap;gap:.4rem;}
.rg2-lvl{display:inline-flex;align-items:baseline;gap:.35rem;padding:.3rem .55rem;
  border-radius:9px;background:var(--rg2-chip);font-family:var(--rg2-mono);font-size:.78rem;
  font-weight:700;color:var(--rg2-ink);}
.rg2-lvl i{font-style:normal;font-weight:400;color:var(--rg2-mut);font-family:'Inter',sans-serif;font-size:.74rem;}
.rg2-lvl.up{background:var(--rg2-up-bg);color:var(--rg2-up-ink);}
.rg2-lvl.up i{color:var(--rg2-up-ink);}
.rg2-lvl.down{background:var(--rg2-down-bg);color:var(--rg2-down-ink);}
.rg2-lvl.down i{color:var(--rg2-down-ink);}
.rg2-scard-btns{display:flex;gap:.5rem;margin-top:auto;}
.rg2-empty{display:block;width:100%;text-align:center;padding:2.4rem 1rem;
  border:1.5px dashed var(--rg2-line);border-radius:16px;background:none;cursor:pointer;
  color:var(--rg2-mut);font-size:.92rem;font-weight:600;
  transition:border-color .2s,color .2s;}
.rg2-empty:hover{border-color:var(--rg2-green);color:var(--rg2-ink);}
.rg2-empty.static{cursor:default;}
.rg2-empty.static:hover{border-color:var(--rg2-line);color:var(--rg2-mut);}
/* La variante nommée : l'état en titre, la raison dessous, l'action en
   plaque pleine — plutôt qu'une phrase de coach en travers du cadre. */
.rg2-empty-b{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:2.6rem 1rem;}
.rg2-empty-b b{font-family:var(--rg2-head);font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--rg2-ink);}
.rg2-empty-b span{font-size:.9rem;font-weight:500;color:var(--rg2-mut);}
.rg2-empty-b i{margin-top:.55rem;font-style:normal;display:inline-flex;align-items:center;
  height:32px;padding:0 14px;border-radius:10px;background:var(--rg2-green);color:#fff;
  font-family:var(--rg2-head);font-weight:700;font-size:.86rem;
  box-shadow:0 3px 0 var(--rg2-green-deep);transition:transform .13s var(--rg2-ease);}
.rg2-empty-b:hover i{transform:translateY(-1px);}
.rg2-empty-b:active i{transform:translateY(1px);box-shadow:0 1px 0 var(--rg2-green-deep);}
.rg2-wait{display:flex;flex-direction:column;gap:.7rem;}
.rg2-wait .bx-skeleton{height:84px;border-radius:16px;}

/* ── Onglet Communauté ── */
.rg2-commhead{display:flex;margin:0 0 1rem;}
.rg2-commsort{display:inline-flex;gap:2px;padding:3px;background:var(--rg2-card);
  border:1.5px solid var(--rg2-line);border-radius:11px;}
.rg2-commsort button{padding:.38rem .8rem;border:0;background:none;border-radius:8px;
  cursor:pointer;font-family:var(--rg2-head);font-weight:700;font-size:.82rem;
  color:var(--rg2-mut);transition:background .18s,color .18s;}
.rg2-commsort button.on{background:var(--rg2-green);color:#fff;box-shadow:0 2px 0 var(--rg2-green-deep);}
.rg2-commlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.9rem;}
.rg2-ccard{background:var(--rg2-card);border:1.5px solid var(--rg2-line);border-radius:16px;
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.65rem;
  animation:rg2In .4s var(--rg2-ease) both;animation-delay:calc(var(--i,0)*.045s);
  transition:border-color .2s,transform .16s,box-shadow .2s;}
.rg2-ccard:hover{border-color:rgba(14,158,100,.45);transform:translateY(-2px);
  box-shadow:0 16px 30px -22px rgba(4,10,26,.5);}
.rg2-ccard-hd{display:flex;align-items:center;gap:.6rem;}
.rg2-srctag{font-size:.7rem;font-weight:800;letter-spacing:.02em;color:var(--rg2-green);
  border:1px solid rgba(14,158,100,.4);border-radius:7px;padding:.15rem .48rem;}
.rg2-srctag.alt{color:#1d4ed8;border-color:rgba(29,78,216,.35);}
.rg2-at{margin-left:auto;font-family:var(--rg2-mono);font-size:.76rem;color:var(--rg2-faint);}
.rg2-ccard-name{font-family:var(--rg2-head);font-weight:800;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--rg2-ink);}
.rg2-ccard-btns{display:flex;align-items:center;gap:.5rem;margin-top:auto;}
.rg2-like{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem;
  border:1.5px solid var(--rg2-line);border-radius:10px;background:var(--rg2-card);
  cursor:pointer;color:var(--rg2-mut);font-family:var(--rg2-mono);font-size:.82rem;font-weight:700;
  transition:border-color .18s,color .18s,transform .12s;}
.rg2-like:hover{border-color:rgba(255,64,96,.5);color:#c22844;}
.rg2-like:active{transform:scale(.94);}
.rg2-like.on{color:#e11d48;border-color:rgba(255,64,96,.5);}
.rg2-like.on svg{animation:rg2Pop .45s var(--rg2-back);}
.rg2-ccard-btns .rg2-btn{margin-left:auto;}

/* ── La modale stratégie : au premier plan, une croix (grammaire §28) ── */
.rg2-ovl{position:fixed;inset:0;z-index:1300;background:rgba(6,10,20,.62);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;}
.rg2-ovl.open{opacity:1;}
.rg2-modal{position:absolute;inset:0;margin:auto;width:min(460px,94vw);height:max-content;
  max-height:90vh;overflow:auto;background:var(--rg2-card);border-radius:20px;
  border:1px solid rgba(14,158,100,.25);padding:1.5rem 1.5rem 1.3rem;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.85);
  transform:scale(.94);transition:transform .28s var(--rg2-back);}
.rg2-ovl.open .rg2-modal{transform:scale(1);}
.rg2-x2{position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border:0;
  border-radius:10px;background:none;display:grid;place-items:center;cursor:pointer;
  color:var(--rg2-faint);transition:background .16s,color .16s,transform .14s;}
.rg2-x2:hover{background:rgba(10,21,38,.07);color:var(--rg2-ink);}
.rg2-x2:active{transform:scale(.92);}
.rg2-m-t{font-family:var(--rg2-head);font-weight:800;font-size:1.25rem;
  letter-spacing:-.025em;color:var(--rg2-ink);margin:0 0 1.1rem;}
.rg2-f{display:block;margin-bottom:.9rem;}
.rg2-f>span{display:block;font-size:.82rem;font-weight:700;color:var(--rg2-mut);margin-bottom:.4rem;}
.rg2-i{width:100%;box-sizing:border-box;padding:.62rem .8rem;border:1.5px solid var(--rg2-line);
  border-radius:11px;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--rg2-ink);
  background:var(--rg2-field);transition:border-color .18s,box-shadow .18s;}
.rg2-i:focus{outline:0;border-color:var(--rg2-green);box-shadow:0 0 0 4px rgba(14,158,100,.14);}
.rg2-i.sm{width:76px;padding:.45rem .55rem;font-family:var(--rg2-mono);font-size:.88rem;text-align:center;}
.rg2-gpills{display:flex;flex-wrap:wrap;gap:.4rem;}
.rg2-gpills button{padding:.42rem .75rem;border:1.5px solid var(--rg2-line);border-radius:10px;
  background:var(--rg2-field);cursor:pointer;font-family:var(--rg2-head);font-weight:700;font-size:.82rem;
  color:var(--rg2-mut);transition:all .16s;}
.rg2-gpills button:hover{border-color:var(--rg2-ink);color:var(--rg2-ink);}
.rg2-gpills button.on{background:var(--rg2-green);border-color:var(--rg2-green);color:#fff;
  box-shadow:0 2px 0 var(--rg2-green-deep);}
.rg2-slide{display:flex;align-items:center;gap:.85rem;}
.rg2-slide b{flex:none;min-width:58px;text-align:right;font-family:var(--rg2-mono);
  font-size:.92rem;color:var(--rg2-ink);}
.rg2-slide input[type=range]{flex:1;accent-color:var(--rg2-green);height:22px;}
.rg2-duo{display:flex;gap:.9rem;}
.rg2-duo label{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--rg2-mut);font-weight:600;}
.rg2-m-btns{display:flex;align-items:center;gap:.55rem;margin-top:1.2rem;}
.rg2-m-sp{flex:1;}

/* ── Toast ── */
.rg2-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:1400;padding:.65rem 1.1rem;border-radius:12px;background:var(--rg2-navy);
  color:#fff;font-family:var(--rg2-head);font-weight:700;font-size:.9rem;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transition:opacity .22s,transform .28s var(--rg2-back);}
.rg2-toast.on{opacity:1;transform:translate(-50%,0);}

@media(max-width:960px){
  .rg2-stage{grid-template-columns:1fr;}
  .rg2-cvwrap{min-height:250px;}
}
@media(max-width:700px){
  .rg2-rail{grid-template-columns:repeat(2,1fr);}
  .rg2-rail-thumb{display:none;}
  .rg2-g.on{background:var(--rg2-green);box-shadow:0 3px 0 var(--rg2-green-deep);}
  .rg2-tabs{order:3;width:100%;overflow-x:auto;}
  .rg2-botlink{margin-left:auto;}
}
@media(prefers-reduced-motion:reduce){
  .rg2-pane,.rg2-stage.in,.rg2-scard,.rg2-ccard{animation:none;}
  .rg2-thumb,.rg2-rail-thumb{transition:none;}
}
/* ── §29.1 — Le texte hors-cartes suit le thème de la page ───────────
   L'app par défaut est sombre, la vue du client est claire (bx-light) :
   le titre et le fil d'étapes vivent SUR le fond de page, pas dans une
   carte — leur encre doit suivre le thème, sinon « Rug Sniping »
   disparaît sur le navy. */
#rugsnip{--rg2-page-ink:var(--rg2-ink);--rg2-page-mut:var(--rg2-mut);}
.rg2-title{color:var(--rg2-page-ink);}
.rg2-steps li{color:var(--rg2-page-mut);}
.rg2-steps li.on{color:var(--rg2-page-ink);}
.rg2-count{color:var(--rg2-page-mut);}
/* Le logo Solana inline : 12px, posé sur la ligne de texte. Le SVG
   officiel (397.7×311.7) garde son ratio — jamais étiré, jamais ◎. */
.rg2-sol{display:inline-flex;width:12px;flex:none;transform:translateY(1px);}
.rg2-sol svg{width:100%;height:auto;display:block;}
.rg2-slide .rg2-sol{width:13px;}

/* ── §29.3 — Les tuiles 3D, le multi-groupes, le glissement (25/08) ──
   « Le style est vert candle, candle, de la 3D et des charts bougies »
   + « on ne peut choisir qu'un groupe et non plusieurs ». Les tuiles du
   rail portent la scène 3D isométrique des cards du feed (rugCandles3d
   — le langage validé) et leur multiple type ; la tuile choisie
   s'allume en NAVY liseré vert — elle devient un morceau du board.
   La stratégie vise un OU PLUSIEURS groupes (pills à coche). Le stage
   se glisse au doigt et aux flèches. */
.rg2-g{align-items:stretch;}
.rg2-g3d{position:relative;display:block;height:54px;margin-bottom:.35rem;
  pointer-events:none;}
.rg2-g3d svg{width:100%;height:100%;display:block;
  --rg-shd1:rgba(0,0,0,.28);--rg-shd2:rgba(0,0,0,.34);}
body.bx-light #rugsnip .rg2-g3d svg{--rg-shd1:rgba(60,80,60,.14);--rg-shd2:rgba(60,60,60,.18);}
.rg2-g-x{position:absolute;top:.55rem;right:.6rem;font-family:var(--rg2-mono);
  font-style:normal;font-size:.72rem;font-weight:700;color:var(--rg2-up-ink);
  border:1px solid var(--rg2-line);border-radius:7px;padding:.1rem .38rem;
  background:var(--rg2-chip);transition:all .25s;}
/* La tuile choisie = un morceau du board : navy, liseré vert, assise */
.rg2-rail-thumb{background:var(--rg2-navy);border:1.5px solid rgba(23,201,117,.55);
  box-shadow:0 4px 0 var(--rg2-green-deep);}
.rg2-g.on b{color:#fff;}
.rg2-g.on i{color:#9fd9bd;}
.rg2-g.on .rg2-g-x{background:rgba(23,201,117,.16);color:#3fe39a;
  border-color:rgba(23,201,117,.4);}
.rg2-g.on::after{content:'';position:absolute;left:.85rem;bottom:.8rem;width:7px;height:7px;
  border-radius:50%;background:var(--rg2-green2);box-shadow:0 0 0 3px rgba(23,201,117,.22);}
@media(max-width:700px){
  .rg2-g.on{background:var(--rg2-navy);border:1.5px solid rgba(23,201,117,.55);
    box-shadow:0 3px 0 var(--rg2-green-deep);}
}
/* Le glissement directionnel du stage */
@keyframes rg2SlideL{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes rg2SlideR{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.rg2-stage.slide-l{animation:rg2SlideL .34s var(--rg2-ease);}
.rg2-stage.slide-r{animation:rg2SlideR .34s var(--rg2-ease);}
.rg2-stage .rg2-board{cursor:grab;}
.rg2-stage .rg2-board:active{cursor:grabbing;}
/* Pills multi : la coche dit « plusieurs possibles » */
.rg2-gpills button{position:relative;padding-left:1.55rem;}
.rg2-gpills button::before{content:'';position:absolute;left:.55rem;top:50%;
  transform:translateY(-50%);width:11px;height:11px;border-radius:4px;
  border:1.5px solid var(--rg2-line);transition:all .16s;}
.rg2-gpills button.on::before{background:#fff;border-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e9e64' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.2 4.2L19 7.5'/%3E%3C/svg%3E");
  background-size:8px;background-position:center;background-repeat:no-repeat;}
.rg2-gtags{margin-left:auto;display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end;}
.rg2-gtags .rg2-gtag{margin-left:0;}
@media(prefers-reduced-motion:reduce){
  .rg2-stage.slide-l,.rg2-stage.slide-r{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════════
   §31 — WALLET TRACKER v5 : l'or sur la nuit, les objets imprimés
   (l'outil entier — le thème vit ICI et nulle part ailleurs).

   Verdict client du 27/08 sur la v4 : « polices IA pour les chiffres »,
   « rien n'est organisé, tout centré collé », « couleurs néon IA ancienne
   DA », « pas de belle image par rapport au fond ». Direction validée
   avec lui : la teinte OR de l'outil posée FAÇON LANDING (la manière des
   sections Rug/BotX : aplats francs, encre foncée sur l'aplat, cartes
   blanches, gros chiffres Bricolage) — pas leur bleu, pas un jeu
   noir/blanc, pas un fond déjà pris. La scène est la NUIT du Moon Filter
   (§4.2), inédite dans l'app : elle fait contraster l'or et les cartes
   blanches. Une seule teinte d'accent (l'or), l'argent/bronze réservés
   aux médailles, le vert/rouge réservés à la donnée.

   Typo (verdict client) : les MONTANTS et les chiffres sont en Bricolage
   Grotesque, la chasse fixe ne garde QUE les adresses. Plancher 13px.
   Les catégories ne repeignent plus l'écran (les 4 teintes lisaient
   « néon IA ») : le choix vit dans la barre blanche, l'aplat or marque
   l'actif — la grammaire des pilules de groupes de la landing.
   ═══════════════════════════════════════════════════════════════════ */
#wallettracker{
  /* scène : la nuit Moon (§4.2) + halo d'or discret */
  --wt-bg1:#070d24; --wt-bg2:#0c1638;
  /* surfaces de nuit (lignes du classement, champs) */
  --wt-row:#101a38; --wt-chip:#16224a; --wt-field:#0d1631;
  --wt-line:rgba(163,178,224,.14);
  --wt-text:#eef2fa; --wt-mut:#aab4d8; --wt-faint:#8490b5;
  /* objets imprimés : la carte blanche de la landing */
  --wt-w:#ffffff; --wt-ink:#0a0f1e; --wt-wmut:#5b6478; --wt-wfaint:#8a93a8;
  --wt-wline:#e3e8f4; --wt-wfield:#f3f6fc;
  /* l'or et son encre (§4.3) — jamais de texte clair sur or */
  --wt-gold:#f0b429; --wt-goldink:#2e1d00; --wt-golddeep:#b45309;
  --wt-silver:#c6ceda; --wt-silverink:#1c222e;
  --wt-bronze:#c98a5b; --wt-bronzeink:#2b1508;
  /* donnée — paires nuit (fond translucide + encre claire) */
  --wt-gain:#3fe39a; --wt-gain-bg:rgba(23,201,117,.13);
  --wt-loss:#ff7288; --wt-loss-bg:rgba(255,64,96,.13);
  /* donnée — encres sur carte blanche (les verts/rouges de la landing) */
  --wt-gain-ink:#0e9e64; --wt-loss-ink:#d92d3a;
  --wt-head:'Bricolage Grotesque','Space Grotesk',sans-serif;
  --wt-mono:'Space Mono',ui-monospace,monospace;
  --wt-ease:cubic-bezier(.16,1,.3,1); --wt-back:cubic-bezier(.34,1.56,.64,1);
  --wt-grid:44px minmax(0,1fr) 175px 140px 125px 34px 24px;
  min-height:100vh; color:var(--wt-text);
  background:
    radial-gradient(ellipse 52% 34% at 50% -4%,rgba(240,180,41,.11),transparent 70%),
    radial-gradient(1.5px 1.5px at 14% 22%,rgba(255,255,255,.35),transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 12%,rgba(255,255,255,.28),transparent 55%),
    radial-gradient(2px 2px at 55% 34%,rgba(255,255,255,.22),transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 46%,rgba(255,255,255,.2),transparent 55%),
    linear-gradient(175deg,var(--wt-bg1) 0%,var(--wt-bg2) 46%,#0a1230 100%);
}
#wallettracker .wt-shell{max-width:1620px;margin:0 auto;padding:4.4rem 2.4rem 4rem;}
#wallettracker :focus-visible{outline:2px solid var(--wt-gold);outline-offset:2px;border-radius:6px;}

/* ── En-tête : le titre, puis LE choix — la barre blanche des catégories
   (la grammaire des pilules de groupes de la landing : l'aplat or marque
   la catégorie active, l'encre brune par-dessus). ───────────────────── */
#wallettracker .wt-head{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.15rem;}
#wallettracker .wt-title{font-family:var(--wt-head);font-size:1.7rem;font-weight:800;letter-spacing:-.025em;margin:0;color:#fff;}
#wallettracker .wt-cats{position:relative;display:flex;gap:.25rem;padding:5px;background:var(--wt-w);border-radius:16px;
  box-shadow:0 22px 48px -22px rgba(3,7,18,.85),inset 0 1px 0 #fff;}
#wallettracker .wt-cat-thumb{position:absolute;left:5px;top:5px;border-radius:12px;background:var(--wt-gold);
  box-shadow:0 3px 0 var(--wt-golddeep);opacity:0;
  transition:left .32s var(--wt-ease),top .32s var(--wt-ease),width .32s var(--wt-ease),height .32s var(--wt-ease);}
#wallettracker .wt-cat-thumb.set{opacity:1;}
#wallettracker .wt-cat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem;border:0;background:none;border-radius:12px;
  font-family:var(--font,Inter,sans-serif);font-size:.9rem;font-weight:700;color:var(--wt-wmut);cursor:pointer;white-space:nowrap;
  transition:color .22s ease,transform .14s var(--wt-ease);}
#wallettracker .wt-cat:hover:not(.on){color:var(--wt-ink);transform:translateY(-1px);}
#wallettracker .wt-cat:active{transform:translateY(1px);}
#wallettracker .wt-cat svg{color:var(--wt-wfaint);transition:color .22s ease;}
#wallettracker .wt-cat:hover:not(.on) svg{color:var(--wt-ink);}
#wallettracker .wt-cat.on{color:var(--wt-goldink);cursor:default;}
#wallettracker .wt-cat.on svg{color:var(--wt-goldink);}
#wallettracker .wt-cat-n{font-family:var(--wt-head);font-style:normal;font-size:13px;font-weight:800;color:var(--wt-wmut);background:var(--wt-wfield);border-radius:999px;padding:.1rem .45rem;min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums;}
#wallettracker .wt-cat.on .wt-cat-n{background:rgba(46,29,0,.14);color:var(--wt-goldink);}

/* ── La barre d'outils : UNE ligne, tout aligné — périodes, tri, puis la
   recherche à droite et les faits en sourdine. ──────────────────────── */
#wallettracker .wt-ctrl{position:sticky;top:71px;z-index:40;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;padding:.55rem 0;margin:0 0 1.1rem;
  background:linear-gradient(180deg,rgba(8,14,38,.92),rgba(8,14,38,.78));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--wt-line);}
#wallettracker .wt-seg{position:relative;display:inline-flex;background:var(--wt-w);border-radius:12px;padding:4px;
  box-shadow:0 14px 30px -16px rgba(3,7,18,.8);}
#wallettracker .wt-seg-ink{position:absolute;top:4px;bottom:4px;left:0;width:52px;border-radius:9px;background:var(--wt-gold);
  box-shadow:0 2px 0 var(--wt-golddeep);transform-origin:0 50%;
  transition:transform .26s var(--wt-ease),width .26s var(--wt-ease);pointer-events:none;}
#wallettracker .wt-seg-btn{position:relative;z-index:1;background:none;border:0;padding:.45rem .85rem;border-radius:9px;
  font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:700;color:var(--wt-wmut);cursor:pointer;transition:color .18s ease;white-space:nowrap;}
#wallettracker .wt-seg-btn:hover{color:var(--wt-ink);}
#wallettracker .wt-seg-btn.active{color:var(--wt-goldink);}
#wallettracker .wt-seg-btn:disabled{opacity:.4;cursor:not-allowed;}
/* Le sous-sélecteur KOL / KOL Side : pas d'encre coulissante, l'actif
   porte l'aplat lui-même. `display:inline-flex` écraserait [hidden]. */
#wallettracker .wt-seg[hidden]{display:none!important;}
#wallettracker .wt-seg.plain .wt-seg-btn.active{background:var(--wt-gold);color:var(--wt-goldink);border-radius:9px;box-shadow:0 2px 0 var(--wt-golddeep);}
#wallettracker .wt-sort{position:relative;}
#wallettracker .wt-sort-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--wt-w);border:0;border-radius:12px;padding:.62rem .9rem;
  color:var(--wt-ink);font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 14px 30px -16px rgba(3,7,18,.8);transition:transform .16s var(--wt-ease);}
#wallettracker .wt-sort-btn:hover{transform:translateY(-1px);}
#wallettracker .wt-sort-btn .wt-sort-pre{color:var(--wt-wfaint);font-weight:600;}
#wallettracker .wt-sort-btn svg{transition:transform .18s ease;}
#wallettracker .wt-sort.open .wt-sort-btn svg{transform:rotate(180deg);}
#wallettracker .wt-sort-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:var(--wt-w);border-radius:12px;padding:.3rem;
  box-shadow:0 24px 54px -20px rgba(3,7,18,.9);z-index:60;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s ease,transform .16s ease;}
#wallettracker .wt-sort.open .wt-sort-menu{opacity:1;transform:none;pointer-events:auto;}
#wallettracker .wt-sort-it{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.5rem .7rem;border:0;border-radius:8px;background:none;
  color:var(--wt-wmut);font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:650;cursor:pointer;text-align:left;white-space:nowrap;transition:background .14s ease,color .14s ease;}
#wallettracker .wt-sort-it:hover,#wallettracker .wt-sort-it:focus-visible{background:var(--wt-wfield);color:var(--wt-ink);outline:none;}
#wallettracker .wt-sort-it.on{color:var(--wt-golddeep);}
#wallettracker .wt-sort-it svg{opacity:0;}
#wallettracker .wt-sort-it.on svg{opacity:1;}
#wallettracker .wt-search{position:relative;display:flex;align-items:center;margin-left:auto;}
#wallettracker .wt-search-ico{position:absolute;left:.75rem;color:var(--wt-wfaint);pointer-events:none;}
#wallettracker .wt-search-inp{width:230px;background:var(--wt-w);border:0;border-radius:12px;padding:.62rem 2.2rem .62rem 2.2rem;
  color:var(--wt-ink);font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:600;outline:none;
  box-shadow:0 14px 30px -16px rgba(3,7,18,.8);transition:width .2s ease,box-shadow .18s ease;-webkit-appearance:none;appearance:none;}
#wallettracker .wt-search-inp::placeholder{color:var(--wt-wfaint);font-weight:500;}
#wallettracker .wt-search-inp::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
#wallettracker .wt-search-inp:focus{width:300px;box-shadow:0 14px 30px -16px rgba(3,7,18,.8),0 0 0 2px var(--wt-gold);}
#wallettracker .wt-kbd{position:absolute;right:.6rem;font-family:var(--wt-mono);font-size:13px;color:var(--wt-wfaint);border:1px solid var(--wt-wline);border-radius:5px;padding:0 .3rem;pointer-events:none;}
#wallettracker .wt-search-inp:focus ~ .wt-kbd{opacity:0;}
#wallettracker .wt-search-x{position:absolute;right:.45rem;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:7px;background:none;color:var(--wt-wfaint);cursor:pointer;transition:color .16s ease,background .16s ease;}
#wallettracker .wt-search-x:hover{color:var(--wt-ink);background:var(--wt-wfield);}
#wallettracker .wt-found{font-family:var(--wt-head);font-size:13px;font-weight:700;color:var(--wt-mut);white-space:nowrap;font-variant-numeric:tabular-nums;}
#wallettracker mark.wt-hl{background:rgba(240,180,41,.35);color:inherit;border-radius:3px;padding:0 .06em;}
/* les faits : une ligne calme, pas des boîtes */
#wallettracker .wt-meta{display:flex;align-items:baseline;gap:.9rem;font-size:13px;color:var(--wt-faint);white-space:nowrap;}
#wallettracker .wt-meta b{font-family:var(--wt-head);font-weight:800;color:var(--wt-mut);font-variant-numeric:tabular-nums;}
#wallettracker .wt-fact{display:inline-flex;align-items:baseline;gap:.3rem;}
#wallettracker .wt-fact.warn{color:var(--wt-loss);}

/* ── Colonnes : le classement large à gauche, le rail à droite ──────── */
#wallettracker .wt-cols{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:1.4rem;align-items:start;}
#wallettracker .wt-main{min-width:0;}
#wallettracker .wt-rail{position:sticky;top:138px;display:flex;flex-direction:column;gap:1.05rem;}
#wallettracker .wt-rcard{background:var(--wt-w);border-radius:18px;padding:.95rem .95rem .65rem;
  box-shadow:0 26px 54px -26px rgba(3,7,18,.85),inset 0 1px 0 #fff;}
#wallettracker .wt-rhead{display:flex;align-items:center;gap:.55rem;padding:0 .15rem .6rem;}
#wallettracker .wt-rhead b{font-family:var(--wt-head);font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--wt-ink);}
#wallettracker .wt-rico{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--wt-gold);color:var(--wt-goldink);box-shadow:0 2px 0 var(--wt-golddeep);flex-shrink:0;}
#wallettracker .wt-rn{font-family:var(--wt-head);font-style:normal;font-size:13px;font-weight:800;color:var(--wt-wmut);background:var(--wt-wfield);border-radius:999px;padding:.08rem .45rem;font-variant-numeric:tabular-nums;}
#wallettracker .wt-rbody{display:flex;flex-direction:column;}
#wallettracker .wt-ritem{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.6rem;width:100%;padding:.52rem .6rem;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;font-family:var(--font,Inter,sans-serif);transition:background .14s ease;}
#wallettracker .wt-ritem:hover{background:var(--wt-wfield);}
#wallettracker .wt-rname{font-size:13.5px;font-weight:700;color:var(--wt-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wallettracker .wt-rcat{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wt-wfaint);}
#wallettracker .wt-rtag{font-size:13px;font-weight:700;color:var(--wt-golddeep);background:rgba(240,180,41,.16);border-radius:7px;padding:.1rem .45rem;white-space:nowrap;}
#wallettracker .wt-rdate{font-family:var(--wt-head);font-size:13px;font-weight:700;color:var(--wt-wfaint);font-variant-numeric:tabular-nums;}
#wallettracker .wt-rpnl{font-family:var(--wt-head);font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;}
#wallettracker .wt-rpnl.pos{color:var(--wt-gain-ink);}
#wallettracker .wt-rpnl.neg{color:var(--wt-loss-ink);}
#wallettracker .wt-rempty{display:flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed var(--wt-wline);border-radius:12px;padding:1rem;margin:0 0 .3rem;color:var(--wt-wfaint);font-size:13.5px;font-weight:600;}

/* ── Le podium : trois cartes blanches posées sur la nuit — la scène se
   met en scène, l'or ne sert que la première place. ────────────────── */
#wallettracker .wt-podium{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:.9rem;align-items:stretch;margin-bottom:1.15rem;perspective:900px;}
#wallettracker .wt-pod{position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--wt-w);border-radius:18px;padding:1.15rem 1.15rem 1rem;cursor:pointer;
  box-shadow:0 30px 60px -26px rgba(3,7,18,.9),inset 0 1px 0 #fff;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease,box-shadow .2s ease;
  animation:wtPodIn .5s var(--wt-back) backwards;}
#wallettracker .wt-pod:hover{box-shadow:0 36px 66px -26px rgba(3,7,18,.95),inset 0 1px 0 #fff;transform:translateY(-2px);}
#wallettracker .wt-pod.r2{order:1;animation-delay:.07s;}
#wallettracker .wt-pod.r1{order:2;animation-delay:0s;margin-top:-8px;}
#wallettracker .wt-pod.r3{order:3;animation-delay:.13s;}
@keyframes wtPodIn{from{opacity:0;transform:translateY(16px) scale(.94);}to{opacity:1;transform:none;}}
#wallettracker .wt-pod.r1{box-shadow:0 30px 60px -26px rgba(3,7,18,.9),0 0 0 2px var(--wt-gold),inset 0 1px 0 #fff;}
#wallettracker .wt-pod-rk{position:absolute;top:.85rem;right:.9rem;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;font-family:var(--wt-head);font-size:.9rem;font-weight:800;}
#wallettracker .wt-pod.r1 .wt-pod-rk{background:var(--wt-gold);color:var(--wt-goldink);box-shadow:0 2px 0 var(--wt-golddeep);}
#wallettracker .wt-pod.r2 .wt-pod-rk{background:var(--wt-silver);color:var(--wt-silverink);}
#wallettracker .wt-pod.r3 .wt-pod-rk{background:var(--wt-bronze);color:var(--wt-bronzeink);}
#wallettracker .wt-crown{position:absolute;top:.7rem;left:1.1rem;color:var(--wt-gold);transform-origin:50% 90%;animation:wtCrown 3.2s var(--wt-ease) infinite;}
@keyframes wtCrown{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(5deg) translateY(-1px);}}
#wallettracker .wt-pod-id{display:flex;align-items:center;gap:.7rem;min-width:0;margin-top:.55rem;}
#wallettracker .wt-pod.r1 .wt-pod-id{margin-top:1.15rem;}
#wallettracker .wt-pod-ava{width:46px;height:46px;border-radius:999px;padding:2px;flex-shrink:0;background:var(--wt-wline);}
#wallettracker .wt-pod.r1 .wt-pod-ava{background:var(--wt-gold);}
#wallettracker .wt-pod.r2 .wt-pod-ava{background:var(--wt-silver);}
#wallettracker .wt-pod.r3 .wt-pod-ava{background:var(--wt-bronze);}
#wallettracker .wt-pod-ava>span{display:grid;place-items:center;width:100%;height:100%;border-radius:999px;background:var(--wt-wfield);overflow:hidden;font-family:var(--wt-head);font-weight:800;color:var(--wt-wmut);}
#wallettracker .wt-pod-ava img{width:100%;height:100%;object-fit:cover;border-radius:999px;}
#wallettracker .wt-pod-idcol{min-width:0;display:flex;flex-direction:column;}
#wallettracker .wt-pod-name{font-family:var(--wt-head);font-size:1.08rem;font-weight:800;letter-spacing:-.015em;color:var(--wt-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wallettracker .wt-pod-x{display:inline-flex;align-items:center;gap:.3rem;font-size:13px;font-weight:600;color:var(--wt-wfaint);text-decoration:none;width:fit-content;transition:color .16s ease;}
#wallettracker .wt-pod-x:hover{color:var(--wt-ink);}
#wallettracker .wt-pod-pnl{font-family:var(--wt-head);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
#wallettracker .wt-pod-pnl.pos{color:var(--wt-gain-ink);}
#wallettracker .wt-pod-pnl.neg{color:var(--wt-loss-ink);}
#wallettracker .wt-pod-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
#wallettracker .wt-pod-sub{display:flex;gap:.75rem;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--wt-wmut);}
#wallettracker .wt-pod-sub b{font-family:var(--wt-head);font-weight:800;color:var(--wt-ink);font-variant-numeric:tabular-nums;}
#wallettracker .wt-pod-sub .acc{color:var(--wt-golddeep);font-weight:700;}
#wallettracker .wt-pod-gap{font-size:13px;font-weight:700;color:var(--wt-wmut);background:var(--wt-wfield);border-radius:7px;padding:.14rem .5rem;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ── L'entête de colonnes et les lignes 4+ : surfaces de nuit ───────── */
#wallettracker .wt-thead{display:grid;grid-template-columns:var(--wt-grid);gap:.6rem;align-items:center;padding:.2rem 1rem .5rem;}
#wallettracker .wt-thead>span,#wallettracker .wt-th{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--wt-faint);text-align:right;}
#wallettracker .wt-thead>span:nth-child(1){text-align:center;}
#wallettracker .wt-thead>span:nth-child(2){text-align:left;}
#wallettracker .wt-th{display:inline-flex;align-items:center;justify-content:flex-end;gap:.3rem;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;transition:color .16s ease;}
#wallettracker .wt-th:hover{color:var(--wt-text);}
#wallettracker .wt-th.on{color:var(--wt-gold);}
#wallettracker .wt-th svg{opacity:0;transition:opacity .16s ease;}
#wallettracker .wt-th.on svg{opacity:1;}
#wallettracker .wt-list{display:flex;flex-direction:column;gap:7px;}
#wallettracker .wt-row{display:grid;grid-template-columns:var(--wt-grid);gap:.6rem;align-items:center;background:var(--wt-row);border:1px solid var(--wt-line);border-radius:13px;padding:.6rem 1rem;cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,background .16s ease;}
#wallettracker .wt-row:hover{border-color:rgba(240,180,41,.5);transform:translateY(-1px);background:var(--wt-chip);}
#wallettracker .wt-row.press{transform:scale(.997);}
#wallettracker .wt-row.wt-in{animation:wtIn .38s var(--wt-ease) backwards;}
@keyframes wtIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#wallettracker .wt-rk{font-family:var(--wt-head);font-size:.85rem;font-weight:800;color:var(--wt-faint);text-align:center;font-variant-numeric:tabular-nums;}
#wallettracker .wt-who{display:flex;align-items:center;gap:.7rem;min-width:0;}
#wallettracker .wt-ava{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--wt-chip);border:1px solid var(--wt-line);overflow:hidden;flex-shrink:0;font-family:var(--wt-head);font-weight:800;font-size:.85rem;color:var(--wt-mut);}
#wallettracker .wt-ava img{width:100%;height:100%;object-fit:cover;}
#wallettracker .wt-ava-ico{display:grid;place-items:center;width:100%;height:100%;color:var(--wt-gold);}
#wallettracker .wt-idcol{min-width:0;display:flex;flex-direction:column;gap:.2rem;}
#wallettracker .wt-idrow{display:flex;align-items:center;gap:.5rem;min-width:0;}
#wallettracker .wt-name{font-family:var(--wt-head);font-size:.94rem;font-weight:800;letter-spacing:-.01em;color:var(--wt-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wallettracker .wt-name.anon{font-family:var(--wt-mono);font-weight:600;color:var(--wt-mut);}
#wallettracker .wt-addr{font-family:var(--wt-mono);font-size:13px;color:var(--wt-faint);}
#wallettracker .wt-tag{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:.08rem .4rem;border:1px solid var(--wt-line);color:var(--wt-mut);}
#wallettracker .wt-qual{font-style:normal;font-size:13px;font-weight:700;border-radius:7px;padding:.1rem .45rem;border:1px solid var(--wt-line);color:var(--wt-mut);white-space:nowrap;}
#wallettracker .wt-qual.acc{border:0;background:rgba(240,180,41,.16);color:var(--wt-gold);}
#wallettracker .wt-qual.gold{border:0;background:var(--wt-gold);color:var(--wt-goldink);}
#wallettracker .wt-cp{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:none;color:var(--wt-faint);cursor:pointer;flex-shrink:0;transition:color .14s ease,background .14s ease;}
#wallettracker .wt-cp:hover{color:var(--wt-text);background:var(--wt-chip);}
#wallettracker .wt-cp .ic-ok{display:none;color:var(--wt-gain);}
#wallettracker .wt-cp.ok .ic-ok{display:block;}
#wallettracker .wt-cp.ok .ic-cp{display:none;}
#wallettracker .wt-x{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--wt-faint);flex-shrink:0;transition:color .14s ease,background .14s ease;}
#wallettracker .wt-x:hover{color:var(--wt-text);background:var(--wt-chip);}
/* chiffres en Bricolage — la chasse fixe ne garde que les adresses */
#wallettracker .wt-num{font-family:var(--wt-head);font-size:.9rem;font-weight:800;color:var(--wt-text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
#wallettracker .wt-num.dim{color:var(--wt-mut);font-weight:700;}
#wallettracker .wt-pnl{display:inline-block;font-family:var(--wt-head);font-size:.9rem;font-weight:800;border-radius:9px;padding:.28rem .6rem;font-variant-numeric:tabular-nums;}
#wallettracker .wt-pnl.pos{background:var(--wt-gain-bg);color:var(--wt-gain);}
#wallettracker .wt-pnl.neg{background:var(--wt-loss-bg);color:var(--wt-loss);}
#wallettracker .wt-g7{display:inline-flex;gap:2px;margin-right:.45rem;vertical-align:middle;}
#wallettracker .wt-g7 i{width:5px;height:11px;border-radius:2px;background:var(--wt-chip);}
#wallettracker .wt-g7 i.on{background:var(--wt-gold);}
#wallettracker .wt-fav{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--wt-faint);cursor:pointer;transition:color .14s ease,background .14s ease;}
#wallettracker .wt-fav:hover{color:var(--wt-text);background:var(--wt-chip);}
#wallettracker .wt-fav.on{color:var(--wt-gold);}
#wallettracker .wt-fav.on svg{fill:currentColor;}
#wallettracker .wt-fav.pop{animation:wtFavPop .4s var(--wt-back);}
@keyframes wtFavPop{0%{transform:scale(.6);}55%{transform:scale(1.35) rotate(8deg);}100%{transform:scale(1);}}
#wallettracker .wt-chev{color:var(--wt-faint);display:grid;place-items:center;}
#wallettracker .wt-mets{display:none;}
#wallettracker .wt-mets .wt-lbl{display:block;font-family:var(--font,Inter,sans-serif);font-style:normal;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wt-faint);margin-bottom:.1rem;}
#wallettracker .wt-wals{display:inline-flex;align-items:center;gap:.3rem;background:none;border:1px solid var(--wt-line);border-radius:8px;padding:.14rem .5rem;font-size:13px;font-weight:700;color:var(--wt-mut);cursor:pointer;transition:color .14s ease,border-color .14s ease;}
#wallettracker .wt-wals:hover{color:var(--wt-text);border-color:var(--wt-mut);}
#wallettracker .wt-pendnote{font-size:13px;color:var(--wt-faint);}
#wallettracker .wt-chips{display:none;flex-wrap:wrap;gap:.3rem;}
#wallettracker .wt-chips.open{display:flex;}
#wallettracker .wt-chip{font-family:var(--wt-mono);font-size:13px;color:var(--wt-mut);background:var(--wt-chip);border:1px solid transparent;border-radius:7px;padding:.1rem .45rem;cursor:pointer;transition:color .14s ease,border-color .14s ease;}
#wallettracker .wt-chip:hover{color:var(--wt-text);border-color:var(--wt-mut);}
#wallettracker .wt-chip.main{border-color:rgba(240,180,41,.5);color:var(--wt-gold);}
#wallettracker .wt-chip.pending{opacity:.55;border-style:dashed;}

/* ── Squelette / états ─────────────────────────────────────────────── */
#wallettracker .wt-sk{display:grid;grid-template-columns:var(--wt-grid);gap:.6rem;align-items:center;background:var(--wt-row);border:1px solid var(--wt-line);border-radius:13px;padding:.6rem 1rem;height:56px;margin-bottom:7px;}
#wallettracker .wt-sk i{display:block;height:12px;border-radius:6px;background:var(--wt-chip);animation:wtSkP 1.15s ease-in-out infinite;}
#wallettracker .wt-sk .sk-rk{width:18px;margin:0 auto;}
#wallettracker .wt-sk .sk-who{display:flex;align-items:center;gap:.6rem;}
#wallettracker .wt-sk .rd{width:34px;height:34px;border-radius:999px;flex-shrink:0;}
#wallettracker .wt-sk .sk-nm{width:96px;}
#wallettracker .wt-sk .sk-nm.n1{width:128px;}
#wallettracker .wt-sk .sk-nm.n2{width:82px;}
#wallettracker .wt-sk .sk-nm.n3{width:110px;}
#wallettracker .wt-sk .sk-c1{width:70px;justify-self:end;}
#wallettracker .wt-sk .sk-c2{width:55px;justify-self:end;}
#wallettracker .wt-sk .sk-c3{width:48px;justify-self:end;}
#wallettracker .wt-sk .sk-end{width:0;}
@keyframes wtSkP{0%,100%{opacity:.55;}50%{opacity:1;}}
#wallettracker .wt-empty{text-align:center;padding:2.6rem 1.4rem;color:var(--wt-mut);font-size:.9rem;line-height:1.7;background:var(--wt-row);border:1.5px dashed var(--wt-line);border-radius:15px;}
#wallettracker .wt-empty strong{color:var(--wt-text);font-weight:700;}
#wallettracker .wt-empty .wt-btn{margin-top:.9rem;}
#wallettracker .wt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--wt-chip);border:1px solid var(--wt-line);border-radius:11px;padding:.6rem 1.15rem;color:var(--wt-text);font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:700;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
#wallettracker .wt-btn:hover{border-color:var(--wt-mut);transform:translateY(-1px);}
/* l'aplat or charnu est réservé à l'action (assise — le clic enfonce) */
#wallettracker .wt-btn.pri{background:var(--wt-gold);border-color:transparent;color:var(--wt-goldink);font-weight:800;box-shadow:0 3px 0 var(--wt-golddeep);}
#wallettracker .wt-btn.pri:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--wt-golddeep);}
#wallettracker .wt-btn.pri:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wt-golddeep);}
#wallettracker .wt-btn.sm{padding:.35rem .75rem;font-size:13px;}
#wallettracker .wt-beyond{display:flex;flex-direction:column;gap:.5rem;max-width:520px;margin:1.1rem auto 0;}
#wallettracker .wt-beyond-card{display:flex;align-items:center;gap:.6rem;background:var(--wt-chip);border:1px solid var(--wt-line);border-radius:11px;padding:.6rem .8rem;text-align:left;}
#wallettracker .wt-beyond-name{font-family:var(--wt-head);font-weight:800;color:var(--wt-text);}
#wallettracker .wt-beyond-x{font-size:13px;color:var(--wt-faint);text-decoration:none;}
#wallettracker .wt-beyond-x:hover{color:var(--wt-text);}
#wallettracker .wt-beyond-meta{font-size:13px;font-weight:600;color:var(--wt-faint);}
#wallettracker .wt-beyond-pnl{margin-left:auto;font-family:var(--wt-head);font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;}
#wallettracker .wt-beyond-pnl.pos{color:var(--wt-gain);}
#wallettracker .wt-beyond-pnl.neg{color:var(--wt-loss);}

/* ── Le panneau de détail : LA CARTE BLANCHE, centrée (grammaire §28 —
   « un panneau au premier plan avec une croix, style Axiom »). Dans ce
   monde, les objets sont blancs : la fiche d'un trader aussi. ───────── */
#wallettracker .wt-ovl{position:fixed;inset:0;background:rgba(4,8,24,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:1200;opacity:0;transition:opacity .2s ease;}
#wallettracker .wt-ovl.open{opacity:1;}
#wallettracker .wt-drawer{position:fixed;inset:0;margin:auto;width:min(700px,94vw);height:max-content;max-height:88vh;
  background:var(--wt-w);color:var(--wt-ink);border-radius:24px;
  box-shadow:0 70px 130px -50px rgba(0,0,0,.95),inset 0 1px 0 #fff;
  z-index:1201;display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.93);opacity:0;transition:transform .3s var(--wt-back),opacity .22s ease;}
#wallettracker .wt-drawer.open{transform:scale(1);opacity:1;}
#wallettracker .wt-drawer.closing{transition-duration:.16s;transform:scale(.96);opacity:0;}
#wallettracker .wt-drawer[hidden],#wallettracker .wt-ovl[hidden]{display:none!important;}
#wallettracker .wt-dr-grip{display:none;}
#wallettracker .wt-dr-head{display:flex;align-items:flex-start;gap:.85rem;padding:1.35rem 1.5rem 1.05rem;border-bottom:1px solid var(--wt-wline);}
#wallettracker .wt-dr-ava{width:56px;height:56px;border-radius:999px;padding:2px;background:var(--wt-wline);flex-shrink:0;}
#wallettracker .wt-dr-ava.r1{background:var(--wt-gold);}
#wallettracker .wt-dr-ava.r2{background:var(--wt-silver);}
#wallettracker .wt-dr-ava.r3{background:var(--wt-bronze);}
#wallettracker .wt-dr-ava>span{display:grid;place-items:center;width:100%;height:100%;border-radius:999px;background:var(--wt-wfield);overflow:hidden;font-family:var(--wt-head);font-weight:800;font-size:1.15rem;color:var(--wt-wmut);}
#wallettracker .wt-dr-ava img{width:100%;height:100%;object-fit:cover;border-radius:999px;}
#wallettracker .wt-dr-idcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
#wallettracker .wt-dr-namerow{display:flex;align-items:center;gap:.55rem;min-width:0;flex-wrap:wrap;}
#wallettracker .wt-dr-name{font-family:var(--wt-head);font-size:1.35rem;font-weight:800;letter-spacing:-.025em;color:var(--wt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* le groupe du wallet — l'aplat or, l'encre dessus */
#wallettracker .wt-dr-grp{font-family:var(--wt-head);font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--wt-gold);color:var(--wt-goldink);border-radius:8px;padding:.18rem .55rem;box-shadow:0 2px 0 var(--wt-golddeep);}
#wallettracker .wt-dr-hand{display:inline-flex;align-items:center;gap:.35rem;font-size:13.5px;font-weight:600;color:var(--wt-wmut);text-decoration:none;transition:color .16s ease;width:fit-content;}
#wallettracker .wt-dr-hand:hover{color:var(--wt-ink);}
#wallettracker .wt-dr-rk{font-family:var(--wt-head);font-size:1.9rem;font-weight:800;color:var(--wt-wfaint);line-height:1;align-self:center;font-variant-numeric:tabular-nums;}
#wallettracker .wt-dr-rk.r1{color:var(--wt-golddeep);}
#wallettracker .wt-dr-rk.r2{color:var(--wt-silverink);}
#wallettracker .wt-dr-rk.r3{color:var(--wt-bronze);}
#wallettracker .wt-drawer .wt-fav{align-self:center;width:36px;height:36px;color:var(--wt-wfaint);}
#wallettracker .wt-drawer .wt-fav:hover{color:var(--wt-ink);background:var(--wt-wfield);}
#wallettracker .wt-drawer .wt-fav.on{color:var(--wt-golddeep);}
#wallettracker .wt-dr-close{display:grid;place-items:center;width:44px;height:44px;margin:-6px -8px 0 0;border:0;border-radius:12px;background:none;color:var(--wt-wmut);cursor:pointer;transition:color .16s ease,background .16s ease,transform .14s ease;flex-shrink:0;}
#wallettracker .wt-dr-close:hover{color:var(--wt-ink);background:var(--wt-wfield);}
#wallettracker .wt-dr-close:active{transform:scale(.92);}
#wallettracker .wt-dr-body{flex:1;min-height:0;overflow-y:auto;padding:1.15rem 1.5rem 1.3rem;display:flex;flex-direction:column;gap:1.25rem;}
#wallettracker .wt-dr-body::-webkit-scrollbar{width:5px;}
#wallettracker .wt-dr-body::-webkit-scrollbar-thumb{background:var(--wt-wline);border-radius:3px;}
#wallettracker .wt-drawer .wt-seg{box-shadow:none;background:var(--wt-wfield);}
#wallettracker .wt-drawer .wt-seg-btn.active{background:var(--wt-gold);color:var(--wt-goldink);border-radius:9px;box-shadow:0 2px 0 var(--wt-golddeep);}
#wallettracker .wt-dr-seg{align-self:flex-start;}
#wallettracker .wt-dr-pnl{font-family:var(--wt-head);font-size:2.3rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.05;}
#wallettracker .wt-dr-pnl.pos{color:var(--wt-gain-ink);}
#wallettracker .wt-dr-pnl.neg{color:var(--wt-loss-ink);}
#wallettracker .wt-dr-per{font-size:13.5px;font-weight:600;color:var(--wt-wmut);margin-top:.25rem;}
#wallettracker .wt-dr-mets{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.6rem;font-size:13.5px;font-weight:600;color:var(--wt-wmut);}
#wallettracker .wt-dr-mets b{font-family:var(--wt-head);color:var(--wt-ink);font-weight:800;font-variant-numeric:tabular-nums;}
#wallettracker .wt-dr-sec{display:flex;flex-direction:column;gap:.6rem;}
#wallettracker .wt-dr-sect{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wt-wfaint);display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
#wallettracker .wt-cmp{display:flex;flex-direction:column;gap:.5rem;}
#wallettracker .wt-cmp-row{display:grid;grid-template-columns:46px 1fr 96px;align-items:center;gap:.75rem;}
#wallettracker .wt-cmp-lbl{font-size:13px;font-weight:700;color:var(--wt-wmut);}
#wallettracker .wt-cmp-row.cur .wt-cmp-lbl{color:var(--wt-ink);font-weight:800;}
#wallettracker .wt-cmp-track{height:7px;border-radius:4px;background:var(--wt-wfield);overflow:hidden;}
#wallettracker .wt-cmp-fill{display:block;height:100%;border-radius:4px;background:var(--wt-gain-ink);transform-origin:0 50%;}
#wallettracker .wt-cmp-fill.neg{background:var(--wt-loss-ink);}
#wallettracker .wt-cmp-val{font-family:var(--wt-head);font-size:13.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;}
#wallettracker .wt-cmp-val.pos{color:var(--wt-gain-ink);}
#wallettracker .wt-cmp-val.neg{color:var(--wt-loss-ink);}
#wallettracker .wt-cmp-val.na{color:var(--wt-wfaint);font-weight:600;}
#wallettracker .wt-wal{background:var(--wt-wfield);border:1px solid var(--wt-wline);border-radius:12px;padding:.75rem .85rem;display:flex;flex-direction:column;gap:.45rem;}
#wallettracker .wt-wal.main{border-color:rgba(240,180,41,.55);}
#wallettracker .wt-wal.pending{opacity:.6;border-style:dashed;}
#wallettracker .wt-wal-top{display:flex;align-items:center;gap:.55rem;min-width:0;}
#wallettracker .wt-wal-tag{font-family:var(--wt-head);font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.12rem .5rem;border-radius:6px;flex-shrink:0;}
#wallettracker .wt-wal-tag.main{background:var(--wt-gold);color:var(--wt-goldink);box-shadow:0 2px 0 var(--wt-golddeep);}
#wallettracker .wt-wal-tag.side{border:1px solid var(--wt-wline);color:var(--wt-wmut);}
#wallettracker .wt-wal-addr{font-family:var(--wt-mono);font-size:13px;color:var(--wt-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wallettracker .wt-drawer .wt-cp{color:var(--wt-wmut);}
#wallettracker .wt-drawer .wt-cp:hover{color:var(--wt-ink);background:#e9edf6;}
#wallettracker .wt-wal-scan{font-size:13px;font-weight:600;color:var(--wt-wmut);text-decoration:none;flex-shrink:0;transition:color .16s ease;}
#wallettracker .wt-wal-scan:hover{color:var(--wt-ink);}
#wallettracker .wt-wal-mid{display:flex;align-items:baseline;gap:.6rem;}
#wallettracker .wt-wal-pnl{font-family:var(--wt-head);font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;}
#wallettracker .wt-wal-pnl.pos{color:var(--wt-gain-ink);}
#wallettracker .wt-wal-pnl.neg{color:var(--wt-loss-ink);}
#wallettracker .wt-wal-pct{font-size:13px;font-weight:600;color:var(--wt-wmut);font-variant-numeric:tabular-nums;}
#wallettracker .wt-wal-track{height:4px;border-radius:2px;background:#e6ebf5;overflow:hidden;}
#wallettracker .wt-wal-fill{display:block;height:100%;border-radius:2px;background:var(--wt-gold);}
#wallettracker .wt-wal-note{font-size:13px;color:var(--wt-wmut);line-height:1.45;}
/* l'accordéon des sides d'un KOL — plié par défaut */
#wallettracker .wt-acc{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;background:var(--wt-wfield);border:1px solid var(--wt-wline);border-radius:12px;padding:.7rem .85rem;
  font-family:var(--font,Inter,sans-serif);font-size:13.5px;font-weight:700;color:var(--wt-ink);cursor:pointer;transition:border-color .16s ease;}
#wallettracker .wt-acc:hover{border-color:rgba(240,180,41,.55);}
#wallettracker .wt-acc b{font-family:var(--wt-head);font-weight:800;font-variant-numeric:tabular-nums;}
#wallettracker .wt-acc svg{transition:transform .2s var(--wt-ease);color:var(--wt-wmut);}
#wallettracker .wt-acc[aria-expanded="true"] svg{transform:rotate(180deg);}
#wallettracker .wt-acc-body{display:flex;flex-direction:column;gap:.5rem;margin-top:.1rem;}
/* `display:flex` écraserait le display:none de [hidden] : plié par défaut. */
#wallettracker .wt-acc-body[hidden]{display:none!important;}
#wallettracker .wt-dr-foot{display:flex;gap:.6rem;padding:1rem 1.5rem;border-top:1px solid var(--wt-wline);}
#wallettracker .wt-dr-foot .wt-btn{flex:1;text-decoration:none;background:var(--wt-w);border:1.5px solid var(--wt-wline);color:var(--wt-ink);}
#wallettracker .wt-dr-foot .wt-btn:hover{border-color:var(--wt-ink);}
#wallettracker .wt-dr-foot .wt-btn.pri{background:var(--wt-gold);border-color:transparent;color:var(--wt-goldink);box-shadow:0 3px 0 var(--wt-golddeep);}
#wallettracker .wt-vsk{display:inline-block;width:56px;height:12px;border-radius:6px;background:var(--wt-wfield);animation:wtSkP 1.15s ease-in-out infinite;vertical-align:middle;}
#wallettracker .wt-vsk.big{width:120px;height:24px;}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:1280px){
  #wallettracker{--wt-grid:40px minmax(0,1fr) 145px 118px 105px 30px 22px;}
  #wallettracker .wt-shell{padding:4.2rem 1.4rem 3rem;}
  #wallettracker .wt-addr{display:none;}
  #wallettracker .wt-cols{grid-template-columns:minmax(0,1fr) 268px;gap:1rem;}
}
@media(max-width:1060px){
  #wallettracker .wt-cols{grid-template-columns:1fr;}
  #wallettracker .wt-rail{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start;order:2;margin-top:1.1rem;}
}
@media(max-width:900px){
  #wallettracker .wt-shell{padding-top:3.6rem;}
  #wallettracker .wt-head{align-items:flex-start;flex-direction:column;gap:.85rem;}
  #wallettracker .wt-cats{width:100%;overflow-x:auto;scrollbar-width:none;}
  #wallettracker .wt-cats::-webkit-scrollbar{display:none;}
  #wallettracker .wt-cat{flex:1;justify-content:center;padding:.6rem .6rem;}
  #wallettracker .wt-podium{grid-template-columns:1fr;}
  #wallettracker .wt-pod.r1{order:1;margin-top:0;}
  #wallettracker .wt-pod.r2{order:2;}
  #wallettracker .wt-pod.r3{order:3;}
  #wallettracker .wt-ctrl{top:60px;}
  #wallettracker .wt-search{margin-left:0;flex:1;}
  #wallettracker .wt-search-inp{width:100%;}
  #wallettracker .wt-search-inp:focus{width:100%;}
  #wallettracker .wt-kbd{display:none;}
  #wallettracker .wt-meta{width:100%;}
  #wallettracker .wt-drawer{inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:92%;max-height:none;border-radius:18px 18px 0 0;transform:translateY(28px);}
  #wallettracker .wt-drawer.open{transform:none;}
  #wallettracker .wt-drawer.closing{transform:translateY(28px);}
  #wallettracker .wt-dr-grip{display:block;width:44px;height:5px;border-radius:3px;background:var(--wt-wline);margin:.6rem auto 0;flex-shrink:0;cursor:grab;}
  #wallettracker .wt-dr-foot{flex-direction:column;}
}
@media(max-width:760px){
  #wallettracker .wt-thead{display:none;}
  #wallettracker .wt-row{grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:'rank who fav' '. pnl pnl' '. mets mets';row-gap:.4rem;padding:.8rem .9rem;}
  #wallettracker .wt-rk{grid-area:rank;align-self:start;padding-top:.3rem;}
  #wallettracker .wt-who{grid-area:who;}
  #wallettracker .wt-fav{grid-area:fav;}
  #wallettracker .wt-row>.wt-num,#wallettracker .wt-row>.wt-chev{display:none;}
  #wallettracker .wt-row>.wt-num.pnlc{display:block;grid-area:pnl;text-align:left;}
  #wallettracker .wt-mets{grid-area:mets;display:flex;gap:1rem;flex-wrap:wrap;}
  #wallettracker .wt-mets .wt-num{font-size:13.5px;text-align:left;font-weight:700;color:var(--wt-mut);}
  #wallettracker .wt-rail{grid-template-columns:1fr;}
  #wallettracker .wt-sk{height:84px;}
  #wallettracker .wt-cat span{font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){
  #wallettracker *,#wallettracker *::before,#wallettracker *::after{transition:none!important;animation:none!important;}
  #wallettracker .wt-drawer,#wallettracker .wt-ovl{transform:none!important;opacity:1;}
  #wallettracker .wt-drawer[hidden],#wallettracker .wt-ovl[hidden]{display:none!important;}
}

/* ═══════════════════════════════════════════════════════════════════
   §32 — BASCULE CLAIR / SOMBRE DE LA BARRE CONNECTÉE (bxthm)
   Le thème existait déjà (body.bx-light) mais ne se changeait que dans
   Paramètres → Apparence : personne ne le trouvait. Il remonte dans la
   barre, en tête du bloc de droite, séparé du dernier lien (Wallet
   Tracker) par un grand vide puis un filet — la navigation d'un côté,
   les réglages de compte de l'autre.
   Objet : les DEUX icônes visibles (lune = sombre, soleil = clair) et
   l'aplat qui GLISSE sur la choisie — même grammaire que le sélecteur
   de langue (§24). Il se prend au clic ET au glisser : maintenir puis
   balancer la souris à gauche / à droite fait suivre l'aplat, la zone
   relâchée l'emporte (bxThemeSwitchInit, index.html).
   ═══════════════════════════════════════════════════════════════════ */
.bxthm{position:relative;display:inline-flex;align-items:stretch;flex:none;
  margin-left:56px;padding:4px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(170,150,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  touch-action:none;-webkit-user-select:none;user-select:none;
  transition:border-color .15s ease,background .15s ease;}
.bxthm:hover{border-color:rgba(170,150,255,.4);background:rgba(255,255,255,.07);}
body.bx-light .bxthm{background:rgba(18,22,43,.04);border-color:rgba(18,22,43,.12);
  box-shadow:inset 0 1px 0 #fff;}
body.bx-light .bxthm:hover{border-color:rgba(18,22,43,.22);background:rgba(18,22,43,.06);}
/* L'aplat : violet BlockX en sombre, or en clair — la couleur dit déjà
   le mode avant même de lire l'icône. */
.bxthm-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);
  border-radius:9px;background:linear-gradient(135deg,#7c5cff,#a78bfa);
  box-shadow:0 8px 18px -9px rgba(124,92,255,.9);
  transform:translateX(var(--bxthm-x,0px));
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),
             background .25s ease,box-shadow .25s ease;}
.bxthm[data-t="light"] .bxthm-thumb{--bxthm-x:100%;
  background:linear-gradient(135deg,#f5b942,#ffd884);
  box-shadow:0 8px 18px -9px rgba(245,185,66,.85);}
/* Pendant le glisser l'aplat colle au doigt : plus de ressort, sinon il
   traîne derrière la souris. */
.bxthm.drag .bxthm-thumb{transition:transform .07s linear,background .25s ease;}
.bxthm.drag{cursor:grabbing;}
.bxthm-opt{position:relative;z-index:1;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:32px;padding:0;border:0;background:none;
  border-radius:9px;cursor:pointer;color:var(--bx-text-3);
  transition:color .22s ease,transform .16s cubic-bezier(.16,1,.3,1);}
body.bx-light .bxthm-opt{color:var(--bx-text-3);}
.bxthm-ic{width:16px;height:16px;display:block;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
/* L'état se lit sur data-t du conteneur (pas sur .active) : pendant le
   glisser l'icône s'allume EN MÊME TEMPS que l'aplat arrive. */
.bxthm[data-t="dark"] .bxthm-opt[data-t="dark"]{color:#fff;cursor:default;}
.bxthm[data-t="light"] .bxthm-opt[data-t="light"]{color:#3a2a06;cursor:default;}
.bxthm[data-t="light"] .bxthm-opt[data-t="light"] .bxthm-ic{transform:rotate(180deg);}
.bxthm[data-t="dark"] .bxthm-opt[data-t="light"]:hover,
.bxthm[data-t="light"] .bxthm-opt[data-t="dark"]:hover{color:var(--bx-text);}
.bxthm[data-t="dark"] .bxthm-opt[data-t="light"]:hover .bxthm-ic{transform:rotate(90deg) scale(1.08);}
.bxthm[data-t="light"] .bxthm-opt[data-t="dark"]:hover .bxthm-ic{transform:rotate(-16deg) scale(1.08);}
.bxthm-opt:focus-visible{outline:2px solid #7c5cff;outline-offset:2px;}
body.bx-light .bxthm-opt:focus-visible{outline-color:var(--bx-violet);}
/* Le filet : à gauche la navigation, à droite le compte. */
.bxthm-rule{width:1px;height:22px;flex:none;margin:0 6px;
  background:var(--bx-line-strong);}
/* Profil et Paramètres partent plus à droite : le duo de compte se
   détache franchement de la recherche (et donc de la bascule). L'avatar
   et l'engrenage ne se touchent plus non plus — deux objets, deux
   destinations, un vrai intervalle entre les deux. */
.bxnav-right .bxnav-profile{margin-left:40px;}
.bxnav-right .bxnav-icon[data-route="settings"]{margin-left:24px;}
/* Tout le bloc de droite glisse VERS LE BORD : la recherche et la
   bascule s'éloignent d'autant du dernier lien (Wallet Tracker), qui
   les frôlait. Le décalage se PRÉLÈVE sur la gouttière, jamais sur la
   marge de sécurité : il ne mord que ce qui dépasse 40px et plafonne à
   36px, donc il vaut 0 tant que l'écran est étroit (à 1280px la
   gouttière tombe à 32px — l'engrenage y touchait le bord). */
body.bx-auth .bxnav-right,body[class*="view-"] .bxnav-right{
  margin-right:calc(-1 * min(36px,max(0px,(100vw - 1360px) / 2)));}
/* Rangée du menu mobile : le même objet, posé avant la déconnexion. */
.bxthm-mobrow{display:flex;padding:10px 16px;}
.bxthm-mobrow .bxthm{margin-left:0;}
/* La bascule + son filet pèsent ~150px : la recherche doit se replier en
   icône PLUS TÔT qu'avant (1240px), sinon les derniers liens passent
   sous l'objet. Constaté en capture à 1280px. */
@media(max-width:1400px){
  body[class*="view-"] .bxnav-search,body.bx-auth .bxnav-search{
    width:40px;min-width:40px;padding:0;justify-content:center;}
  body[class*="view-"] .bxnav-search-txt,body.bx-auth .bxnav-search-txt,
  body[class*="view-"] .bxnav-search .bx-kbd,body.bx-auth .bxnav-search .bx-kbd{display:none;}
  .bxthm{margin-left:34px;}
  .bxnav-right .bxnav-profile{margin-left:26px;}
}
@media(max-width:1240px){
  .bxthm{margin-left:24px;}
  .bxnav-right .bxnav-profile{margin-left:20px;}
}
@media(max-width:1100px){
  .bxthm{margin-left:12px;}
  .bxthm-rule{display:none;}
  .bxnav-right .bxnav-profile{margin-left:14px;}
}
@media(prefers-reduced-motion:reduce){
  .bxthm-thumb,.bxthm-opt,.bxthm-ic{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════
   §33 v2 — LA CARTE DE STRATÉGIE (bxst-) : un seul objet, quatre écrans
   Rug Sniping (Stratégie + Communauté), Stratégies publiques, Bot.
   Verdict client sur la v1 (27/08) : « couleurs super moches, design
   full IA, pas imprimé, la chart rend mal, lignes ultra IA, logo
   solana trop petit ». La v1 empilait douze mini-bougies, trois
   tiretés, des plaques volantes et leurs traits de rappel : un
   graphique généré, pas un objet. La v2 IMPRIME : le board navy du
   monde vert candle (constant dans les deux thèmes, comme le cockpit
   du Bot), cinq grosses bougies 3D — le langage rugCandles3d du feed
   et du rail — qui montent de l'entrée au dernier TP, LA rouge du
   rug, et la stratégie en TAMPONS charnus posés dessus (aplat, encre,
   assise 0 2px 0 — le badge ×mult de la chart). Aucune ligne.
   Nom en Bricolage 800, chiffres en Space Mono, libellés en Inter.
   ═══════════════════════════════════════════════════════════════ */
.bxst-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;}
/* Les deux listes du Rug Sniping étaient elles-mêmes des grilles : la
   grille des cartes s'y retrouvait enfermée dans UNE colonne. */
.rg2-stratlist,.rg2-commlist{display:block;}
.bxst{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;background:var(--bx-surface);
  border:1px solid var(--bx-line);
  box-shadow:0 20px 44px -34px rgba(0,0,0,.9);
  transition:border-color .16s ease,transform .18s cubic-bezier(.16,1,.3,1),
             box-shadow .18s ease;
  animation:bxst-pop .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms);}
@keyframes bxst-pop{from{opacity:0;transform:translateY(14px) scale(.985);}}
.bxst.act{cursor:pointer;}
.bxst.act:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--c) 55%,transparent);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.95);}
.bxst.act:active{transform:translateY(-1px);}
body.bx-light .bxst{background:#fff;border-color:rgba(18,22,43,.1);
  box-shadow:0 16px 34px -28px rgba(22,22,48,.4);}

/* ── Le board : navy constant, posé sur son assise — jamais un
   dégradé lavé de la couleur d'outil. ── */
.bxst-viz{margin:10px 10px 0;border-radius:13px;background:#0c1122;
  border:1px solid rgba(126,150,190,.16);
  box-shadow:0 3px 0 rgba(0,0,0,.42);
  padding:7px 7px 2px;}
body.bx-light .bxst-viz{border-color:rgba(18,22,43,.18);
  box-shadow:0 3px 0 rgba(18,22,43,.22);}
.bxst-svg{display:block;width:100%;height:auto;}
/* Les bougies se posent une à une, dans l'ordre de la course. */
.bxst-c{animation:bxst-rise .44s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms + var(--n,0) * 42ms + .08s);}
@keyframes bxst-rise{from{opacity:0;transform:translateY(9px);}}
/* Les tampons claquent après les bougies : aplat, encre, assise. */
.bxst-stp{transform-box:fill-box;transform-origin:50% 55%;
  animation:bxst-stamp .36s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms + var(--n,0) * 42ms + .14s);}
@keyframes bxst-stamp{from{opacity:0;transform:scale(1.55);}}
.bxst-stp text{font-family:'Space Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:700;text-anchor:middle;}
.bxst-stp.up .a{fill:#0a6b45;} .bxst-stp.up .b{fill:#17c975;} .bxst-stp.up text{fill:#04231a;}
.bxst-stp.dn .a{fill:#8a1f33;} .bxst-stp.dn .b{fill:#ff4060;} .bxst-stp.dn text{fill:#fff;}
.bxst-stp.in .a{fill:#0a6b45;} .bxst-stp.in .b{fill:#eafbf2;}
.bxst-stp.in text{fill:#0a3b28;font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:10px;font-weight:800;}

/* ── Le corps ── */
.bxst-bd{padding:11px 14px 9px;display:flex;flex-direction:column;gap:8px;}
.bxst-hd{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.bxst-nm{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.02em;
  color:var(--bx-text);line-height:1.15;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* La source : l'aplat charnu de l'outil — un badge, pas une étiquette. */
.bxst-src{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:7px;background:var(--c);color:var(--ink);
  box-shadow:0 2px 0 var(--deep,rgba(0,0,0,.4));
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.01em;}
/* Les groupes visés : les pastilles mono du rail — TOUS les groupes. */
.bxst-gp{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px;}
.bxst-grp{display:inline-flex;align-items:center;height:21px;padding:0 8px;
  border-radius:7px;border:1px solid var(--bx-line-strong);
  color:var(--bx-text-2);background:var(--bx-inset);
  font-family:'Space Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;}
.bxst-meta{display:flex;align-items:center;gap:8px;min-width:0;}
.bxst-by{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--bx-text-2);font-family:var(--bx-font);font-size:12.5px;font-weight:650;
  transition:color .15s ease;}
.bxst-by:hover{color:var(--bx-text);}
.bxst-av{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;overflow:hidden;flex:none;
  background:color-mix(in oklab,var(--c) 26%,#141420);color:#fff;
  font-size:10.5px;font-weight:800;}
.bxst-av img{width:100%;height:100%;object-fit:cover;}
.bxst-date{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;color:var(--bx-text-3);
  white-space:nowrap;}
/* Le plan : des lignes de lecture — le vocabulaire du panneau
   recommandé des Groupes. Un panneau teinté par ligne, un filet plein
   qui dit le sens, le libellé à gauche, la valeur mono à droite. */
.bxst-plan{list-style:none;margin:1px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.bxst-plan li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 11px;border-radius:10px;background:var(--bx-inset);
  box-shadow:inset 2.5px 0 0 var(--bx-line-strong);}
.bxst-plan li i{font-style:normal;font-family:var(--bx-font);font-size:13px;font-weight:650;
  color:var(--bx-text-2);white-space:nowrap;}
.bxst-plan li b{display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Mono',ui-monospace,monospace;font-size:13.5px;font-weight:700;
  color:var(--bx-text);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Le sens (gain / coupe) est dit par le FILET plein et la teinte du
   panneau — jamais par l'encre du texte : quatre lignes de mono verte
   et rouge faisaient néon (verdict 27/08). L'écriture reste à l'encre. */
.bxst-plan li.up{background:color-mix(in oklab,#17c975 8%,var(--bx-inset));
  box-shadow:inset 2.5px 0 0 #17c975;}
.bxst-plan li.down{background:color-mix(in oklab,#ff4060 8%,var(--bx-inset));
  box-shadow:inset 2.5px 0 0 #ff4060;}
/* Le logo Solana à sa taille — 15px, plus un confetti de 12. */
.bxst-plan li .rg2-sol{width:15px;height:15px;}
body.bx-light .bxst-plan li{background:rgba(18,22,43,.045);}
body.bx-light .bxst-plan li.up{background:color-mix(in oklab,#17c975 12%,#fff);}
body.bx-light .bxst-plan li.down{background:color-mix(in oklab,#ff4060 10%,#fff);}

/* ── Le pied ── */
.bxst-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-top:1px solid var(--bx-line);}
.bxst-ftx{flex:1;}
.bxst-like{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;
  border:1px solid var(--bx-line);background:var(--bx-inset);color:var(--bx-text-3);
  cursor:pointer;font-family:'Space Mono',ui-monospace,monospace;font-size:12px;font-weight:700;
  transition:color .15s ease,border-color .15s ease,transform .14s cubic-bezier(.16,1,.3,1);}
.bxst-like:hover{color:#ff5c5c;border-color:rgba(255,92,92,.45);}
.bxst-like:active{transform:scale(.93);}
.bxst-like.on{color:#ff5c5c;border-color:rgba(255,92,92,.55);background:rgba(255,92,92,.1);}
.bxst-like.on svg{animation:bxst-beat .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes bxst-beat{40%{transform:scale(1.35);}}
.bxst-go{display:inline-flex;align-items:center;gap:6px;color:var(--bx-text-3);
  font-size:12.5px;font-weight:700;transition:color .15s ease,gap .15s ease;}
.bxst.act:hover .bxst-go{color:var(--c);gap:9px;}
/* L'action de la carte : neutre au repos ; au survol l'aplat PLEIN de
   la source, son encre et son assise — le bouton devient charnu. */
.bxst-do{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;
  border-radius:10px;border:1px solid var(--bx-line-strong);background:var(--bx-inset);
  color:var(--bx-text);cursor:pointer;
  font-family:'Bricolage Grotesque','Inter',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;
  transition:background .15s ease,color .15s ease,border-color .15s ease,
             box-shadow .15s ease,transform .13s cubic-bezier(.16,1,.3,1);}
.bxst-do svg{opacity:.65;transition:opacity .15s ease;}
.bxst-do:hover{background:var(--c);border-color:var(--c);color:var(--ink);
  box-shadow:0 3px 0 var(--deep,rgba(0,0,0,.4));transform:translateY(-1px);}
.bxst-do:hover svg{opacity:1;}
.bxst-do:active{transform:translateY(1px);box-shadow:0 1px 0 var(--deep,rgba(0,0,0,.4));}
.bxst-do:focus-visible{outline:2px solid var(--c);outline-offset:2px;}
.bxst-like:focus-visible{outline:2px solid #ff5c5c;outline-offset:2px;}
body.bx-light .bxst-do{background:rgba(18,22,43,.04);}

/* ── La vignette en grand — fiche publique : le même board, en
   majesté. Les étiquettes y flottent comme le badge ×mult sur la
   chart : des tampons sur un board, pas sur une carte. ── */
.bxst-hero{position:relative;margin:0 0 .9rem;padding:12px 14px 4px;border-radius:14px;
  border:1px solid rgba(126,150,190,.16);background:#0c1122;
  box-shadow:0 4px 0 rgba(0,0,0,.4);overflow:hidden;}
.bxst-hero .bxst-svg{position:relative;}
.bxst-tags{position:absolute;top:10px;left:12px;display:flex;gap:6px;align-items:center;z-index:2;}
.bxst-tags .bxst-grp{background:rgba(12,17,34,.55);border-color:rgba(126,150,190,.3);
  color:#9fb0d0;}

/* La ligne de stratégie du Bot reprend la vignette et le plan : la
   page Bot et les Stratégies publiques parlent la même langue. */
#bot-section .nb-strat-item .bxst-plan{margin-top:7px;}
#bot-section .nb-strat-item .bxst-tags,
#bot-section .nb-strat-item .nb-strat-tags{position:static;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap;}
#bot-section .nb-strat-main{min-width:0;}

/* ── La variante MINI : la scène seule, en tête de ligne (Bot) ── */
.bxst-mini{flex:none;width:132px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(126,150,190,.16);background:#0c1122;
  box-shadow:0 2px 0 rgba(0,0,0,.38);padding:4px 5px 0;}
.bxst-mini .bxst-c{animation-delay:calc(var(--n,0) * 26ms);}
@media(max-width:640px){
  .bxst-grid2{grid-template-columns:1fr;}
  .bxst-mini{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .bxst{animation:none;}
  .bxst-c{animation:none;}
  .bxst-stp{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   §34 — CLASSEMENT v4 : L'ESCALIER DES PLACES (surcharge la §16)
   Verdict client sur la v3 : « mal présenté, ne donne pas envie, pas
   gamifié, pas la palette attendue ». C'était vrai — trois panneaux de
   même hauteur (donc pas de podium), un ambre moutarde qui n'existe
   nulle part ailleurs dans le produit, des rangs réduits à huit traits
   de 2px illisibles, et une liste-tableau sans vie.

   Ce qui change :
   · La PALETTE devient celle de la DA (§4.3) : or #f0b429 / encre
     #2e1d00 pour le prestige (la 1re place), violet #a78bfa / encre
     #221052 pour la progression, l'XP et le rang — c'est LA teinte de
     la progression dans BlockX. Deux teintes, le reste en ardoise.
   · Le podium devient un vrai ESCALIER : trois marches de hauteurs
     différentes, dans l'ordre 2 · 1 · 3, le chiffre GRAVÉ dans la
     marche. Signature de l'écran : les marches arrivent par la
     dernière et l'or de la première se REMPLIT par le bas, puis le
     compteur roule. (Le podium médaillé — anneaux + couronne — reste
     celui du Wallet Tracker : jamais deux fois le même geste, DA §6.)
   · Le rang n'est plus huit traits : c'est son NOM, son point à SA
     couleur (FORM_LEVELS) et une barre de progression vers le rang
     suivant. Le classement devient une ascension.
   ═══════════════════════════════════════════════════════════════════ */
.bxlb{--lb-a:#f0b429; --lb-ak:#2e1d00;
      --lb-v:#a78bfa; --lb-vk:#221052;
      max-width:1120px;}
.bxlb-top{align-items:flex-end;margin-bottom:1.4rem;}
.bxlb-ttl{display:flex;flex-direction:column;gap:.25rem;}
.bxlb-t{font-size:2.15rem;letter-spacing:-.03em;}
.bxlb-cnt{font-family:'Space Mono',ui-monospace,monospace;font-size:12.5px;
  color:var(--bx-text-3);font-variant-numeric:tabular-nums;}

/* ── L'escalier ──────────────────────────────────────────────────── */
.bxlb-pod3{display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;
  gap:12px;margin-bottom:14px;}
.bxlb-step{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  border-radius:16px 16px 12px 12px;padding:14px 16px 16px;cursor:pointer;
  border:1px solid var(--bx-line);background:var(--bx-surface);
  transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .16s ease;
  animation:bxlb-step-in .62s cubic-bezier(.16,1,.3,1) backwards;}
.bxlb-step:hover{transform:translateY(-3px);}
.bxlb-step:active{transform:translateY(-1px);}
.bxlb-step:focus-visible{outline:2px solid var(--lb-v);outline-offset:3px;}
.bxlb-step.s1{min-height:246px;animation-delay:.24s;}
.bxlb-step.s2{min-height:206px;animation-delay:.12s;}
.bxlb-step.s3{min-height:178px;animation-delay:0s;}
@keyframes bxlb-step-in{from{opacity:0;transform:translateY(34px);}}
/* 2e et 3e : le panneau violet de la progression, filet plein. */
.bxlb-step.s2,.bxlb-step.s3{
  background:color-mix(in oklab,var(--lb-v) 9%,var(--bx-surface));
  border:2px solid color-mix(in oklab,var(--lb-v) 40%,transparent);color:var(--bx-text);}
.bxlb-step.s2:hover,.bxlb-step.s3:hover{border-color:var(--lb-v);}
/* 1re : l'aplat d'or, encre par-dessus — et l'or MONTE à l'arrivée. */
.bxlb-step.s1{border:0;background:transparent;color:var(--lb-ak);}
.bxlb-step.s1::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(168deg,#ffd45e,var(--lb-a) 62%,#d99a15);
  transform-origin:bottom;transform:scaleY(0);
  animation:bxlb-fill .82s cubic-bezier(.16,1,.3,1) .2s forwards;}
@keyframes bxlb-fill{to{transform:scaleY(1);}}
/* Le chiffre gravé : creusé dans la marche, en HAUT À DROITE — au bas
   de la marche il tombait sur le compte de médailles et sortait du
   cadre (constaté en capture). */
.bxlb-step-n{position:absolute;right:6px;top:-22px;z-index:1;
  font-family:var(--bx-font-display);font-size:8.4rem;font-weight:800;line-height:.86;
  letter-spacing:-.06em;pointer-events:none;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);}
.bxlb-step.s1 .bxlb-step-n{-webkit-text-stroke:2px rgba(46,29,0,.17);font-size:10rem;top:-28px;}
body.bx-light .bxlb-step-n{-webkit-text-stroke-color:rgba(18,22,43,.09);}
.bxlb-step-in{position:relative;z-index:2;display:grid;gap:2px;width:100%;
  grid-template-columns:auto 1fr;grid-template-areas:
    "av nm" "av rk" "v v" "u bd";align-items:center;}
.bxlb-step .bxlb-av{grid-area:av;margin-right:11px;width:44px;height:44px;font-size:1rem;
  background:rgba(255,255,255,.1);color:inherit;border:1px solid rgba(255,255,255,.18);}
.bxlb-step.s1 .bxlb-av{width:54px;height:54px;font-size:1.2rem;
  background:rgba(46,29,0,.14);border-color:rgba(46,29,0,.2);color:var(--lb-ak);}
.bxlb-step-nm{grid-area:nm;align-self:end;font-size:1.05rem;font-weight:800;
  letter-spacing:-.015em;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bxlb-step.s1 .bxlb-step-nm{font-size:1.3rem;}
.bxlb-step-rk{grid-area:rk;align-self:start;display:flex;align-items:center;gap:6px;
  font-size:.8rem;font-weight:650;opacity:.78;}
.bxlb-step-rk i{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--rc,var(--lb-v));box-shadow:none;}
.bxlb-step.s1 .bxlb-step-rk i{outline:1px solid rgba(46,29,0,.25);}
.bxlb-step-v{grid-area:v;margin-top:14px;font-family:var(--bx-font-display);
  font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:inherit;}
.bxlb-step.s1 .bxlb-step-v{font-size:2.9rem;}
.bxlb-step-u{grid-area:u;font-size:.78rem;font-weight:700;opacity:.72;}
.bxlb-step-bd{grid-area:bd;justify-self:end;display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;font-weight:700;opacity:.78;font-variant-numeric:tabular-nums;}
.bxlb-step.void{opacity:.5;cursor:default;background:var(--bx-inset);border-style:dashed;}
.bxlb-step.void .bxlb-step-nm{grid-area:auto;font-size:.85rem;font-weight:650;
  color:var(--bx-text-3);}

/* ── Ta place : le rail violet de la progression ── */
.bxlb-me{border-color:color-mix(in oklab,var(--lb-v) 34%,transparent);
  background:color-mix(in oklab,var(--lb-v) 8%,var(--bx-surface));}
.bxlb-me-n{background:var(--lb-v);color:var(--lb-vk);}

/* ── La liste ────────────────────────────────────────────────────── */
.bxlb-list{border-radius:18px;}
.bxlb-it{animation:bxlb-row-in .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(.3s + var(--i,0) * 26ms);}
@keyframes bxlb-row-in{from{opacity:0;transform:translateY(10px);}}
.bxlb-row{padding:.72rem 1.1rem;}
/* La place devient une plaque : or au podium, ardoise ensuite. */
.bxlb-n{display:grid;place-items:center;min-width:30px;height:26px;padding:0 7px;
  border-radius:8px;background:var(--bx-inset);border:1px solid var(--bx-line);
  font-family:'Space Mono',ui-monospace,monospace;font-size:12.5px;font-weight:700;
  color:var(--bx-text-2);font-variant-numeric:tabular-nums;}
.bxlb-n.top{background:var(--lb-a);border-color:transparent;color:var(--lb-ak);}
.bxlb-nm{font-size:.95rem;font-weight:750;}
/* Le rang : son nom, un POINT à sa couleur (la teinte pleine, mais sur
   très peu de surface — DA §4.4.3), et l'avancement vers le rang
   suivant. La barre reste VIOLETTE : huit barres de huit couleurs
   refaisaient exactement l'arc-en-ciel que la v3 s'était pris. */
.bxlb-rk{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.bxlb-rkn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  color:var(--bx-text-2);}
.bxlb-rkn i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--rc,var(--lb-v));}
.bxlb-rkb{display:block;width:92px;height:4px;border-radius:2px;overflow:hidden;
  background:var(--bx-line);}
.bxlb-rkb i{display:block;height:100%;width:var(--w,0%);border-radius:2px;
  background:color-mix(in oklab,var(--lb-v) 72%,transparent);}
/* La piste de la valeur redevient neutre : en ambre à 13 % elle donnait
   un olive sale sur toute la colonne. */
.bxlb-vb{background:var(--bx-line);}
.bxlb-you{background:var(--lb-v);color:var(--lb-vk);}
.bxlb-vb i{background:var(--lb-v);}
.bxlb-it.me{--rc:var(--lb-v);}
@media(max-width:820px){
  .bxlb-pod3{grid-template-columns:1fr;}
  .bxlb-step,.bxlb-step.s1,.bxlb-step.s2,.bxlb-step.s3{min-height:0;}
  .bxlb-step-n{font-size:6rem;bottom:-14px;}
  .bxlb-step.s1 .bxlb-step-n{font-size:7rem;}
}
@media(prefers-reduced-motion:reduce){
  .bxlb-step,.bxlb-it{animation:none;}
  .bxlb-step.s1::before{animation:none;transform:scaleY(1);}
}

/* ═══════════════════════════════════════════════════════════════════
   §35 — L'ESPACE COMMUNAUTÉ (bxcm-) + LES DÉFIS (ev2-)
   Classement, Stratégies publiques et Défis étaient trois pages
   étrangères l'une à l'autre : trois en-têtes différents, aucun lien
   entre elles, et pour les Défis la palette moutarde de l'ancienne DA.
   Elles partagent maintenant une barre en tête — la pastille pleine
   marque où l'on est (la grammaire de la nav connectée) — et les DEUX
   MÊMES teintes que le Classement : or #f0b429 pour la récompense (le
   prestige), violet #a78bfa pour le temps qui passe (la progression).
   ═══════════════════════════════════════════════════════════════════ */
.bxcm-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 1.6rem;padding:5px;
  border-radius:14px;background:var(--bx-inset);border:1px solid var(--bx-line);
  width:fit-content;max-width:100%;}
.bxcm-tab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border:0;border-radius:10px;background:none;cursor:pointer;
  font-family:var(--bx-font);font-size:13.5px;font-weight:700;letter-spacing:-.008em;
  color:var(--bx-text-2);white-space:nowrap;
  transition:color .15s ease,background-color .15s ease,transform .14s cubic-bezier(.16,1,.3,1);}
.bxcm-tab svg{opacity:.7;flex:none;}
.bxcm-tab:hover:not(.on){color:var(--bx-text);background:rgba(190,170,255,.09);transform:translateY(-1px);}
.bxcm-tab.on{background:#a78bfa;color:#221052;cursor:default;
  box-shadow:0 3px 0 #6d4fd0,0 12px 26px -14px rgba(167,139,250,.75);}
.bxcm-tab.on svg{opacity:1;}
body.bx-light .bxcm-tab:hover:not(.on){background:rgba(18,22,43,.05);}
@media(max-width:560px){
  .bxcm-nav{width:100%;}
  .bxcm-tab{flex:1;justify-content:center;padding:0 10px;}
  .bxcm-tab span{display:none;}
  .bxcm-tab svg{opacity:1;}
}

/* ── L'en-tête commun aux deux pages en cartes ── */
.ps2-title{font-size:2.15rem;letter-spacing:-.03em;}
.ps2-sub{max-width:52ch;font-size:14px;line-height:1.5;color:var(--bx-text-3);}

/* ── Les défis ───────────────────────────────────────────────────── */
.ev2-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.ev2-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;
  padding:16px 17px 17px;border-radius:16px;
  background:var(--bx-surface);border:1px solid var(--bx-line);
  box-shadow:0 20px 44px -34px rgba(0,0,0,.9);
  transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .16s ease;
  animation:bxst-pop .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 60ms);}
.ev2-card:hover{transform:translateY(-3px);border-color:var(--bx-line-strong);}
.ev2-card.live{border-color:rgba(240,180,41,.42);}
.ev2-card.ended{opacity:.62;}
.ev2-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ev2-state{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:7px;font-size:11.5px;font-weight:800;letter-spacing:.01em;}
.ev2-state.on{background:#f0b429;color:#2e1d00;}
.ev2-state.on i{width:6px;height:6px;border-radius:50%;background:#2e1d00;
  animation:ev2-beat 1.9s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes ev2-beat{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.72);}}
.ev2-state.up{background:transparent;color:#a78bfa;border:1px solid rgba(167,139,250,.5);}
.ev2-state.off{background:var(--bx-inset);color:var(--bx-text-3);border:1px solid var(--bx-line);}
.ev2-title{font-family:var(--bx-font);font-size:1.15rem;font-weight:800;letter-spacing:-.018em;
  color:var(--bx-text);line-height:1.22;}
.ev2-desc{font-size:13.5px;line-height:1.5;color:var(--bx-text-2);}
/* Le compte à rebours : le chiffre porte, le libellé s'efface. */
.ev2-clock{display:flex;align-items:baseline;gap:9px;margin-top:auto;}
.ev2-clock b{font-family:'Space Mono',ui-monospace,monospace;font-size:1.35rem;font-weight:700;
  color:var(--bx-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.ev2-clock span{font-size:12px;font-weight:650;color:var(--bx-text-3);}
/* La barre du temps écoulé : le défi respire au lieu de se décrire. */
.ev2-bar{height:6px;border-radius:3px;overflow:hidden;background:var(--bx-line);}
.ev2-bar i{display:block;height:100%;width:var(--w,0%);border-radius:3px;background:#a78bfa;
  transform-origin:left;animation:ev2-fill .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.15s + var(--i,0) * 60ms);}
@keyframes ev2-fill{from{transform:scaleX(0);}}
.ev2-card.ended .ev2-bar i{background:var(--bx-text-3);}
/* La récompense : la plaque d'or — c'est ce qu'on vient chercher. */
.ev2-reward{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  height:32px;padding:0 12px;border-radius:9px;background:#f0b429;color:#2e1d00;
  font-family:var(--bx-font);font-size:13px;font-weight:800;}
.ev2-reward svg{flex:none;}
.ev2-card.ended .ev2-reward{background:var(--bx-inset);color:var(--bx-text-2);
  border:1px solid var(--bx-line);}
@media(prefers-reduced-motion:reduce){
  .ev2-card{animation:none;}
  .ev2-bar i{animation:none;}
  .ev2-state.on i{animation:none;}
}