/* ============================================================
   MARKET PLAYER PRO — WEB
   Thème dark "institutional trading terminal" inspiré du screenshot
   ============================================================ */
:root {
  --bg: #070b15;
  --panel: #0c1220;
  --panel2: #101830;
  --row: #0e1526;
  --row-hi: #101b33;
  --border: #1b2740;
  --head-bg: #0a0f1c;
  --head-bg2: #0a0f1d;
  --head-bg3: #101b33;
  --head-grad: linear-gradient(180deg, #0d1526, #0a0f1d);
  --bottom-grad: linear-gradient(180deg, #0a0f1d, #0d1526);
  --ticker-bg: #0a0603;
  --ticker-text: #f5c75c;
  --text: #e8edf7;
  --muted: #7d8aa3;
  --gold: #ffd700;
  --green: #34d399;
  --green-dim: #0d2a1a;
  --red: #f87171;
  --red-dim: #2a0f14;
  --cyan: #22d3ee;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --violet: #c084fc;
  --poc: #eab308;
  --hvn: #22d3ee;
  --lvn: #7886a0;                /* ≈5,0:1 sur la ligne du carnet (ÉTAPE 8) */
  --mono: "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", ui-monospace, monospace;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ÉTAPE 1 — verre dépoli (fenêtres, popups, panneaux) */
  --glass-bg: rgba(10, 15, 25, 0.75);
  --glass-bg-solid: rgba(10, 15, 25, 0.94);
  --glass-border: 1px solid rgba(255, 215, 0, 0.25);
  --glass-blur: blur(8px);
  --glass-scrim: rgba(5, 8, 16, 0.35);

  /* ÉTAPE 2 — boutons */
  --btn-h: 40px;
  --btn-outline: rgba(125, 138, 163, .55);

  /* ÉTAPE 3 — barres de défilement fines */
  --sb-w: 6px;
  --sb-thumb: rgba(125, 138, 163, .38);
  --sb-thumb-hi: rgba(255, 215, 0, .6);

  /* ÉTAPE 4 — histogramme du carnet */
  --vol-bid: #34d399;
  --vol-ask: #f87171;
  --vol-alpha: .2;

  /* ÉTAPE 8 — échelle d'espacement 4 / 8 / 12 / 16 / 24 / 32 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* Typographie fluide : ne descend JAMAIS sous 13px */
  --fs-body: clamp(13px, 12px + .25vw, 15px);
  --fs-read: clamp(13px, 12.4px + .2vw, 14px);

  /* Or utilisé pour du TEXTE (en sombre = l'or normal ; en clair = or foncé) */
  --gold-ink: var(--gold);
}
body.theme-light {
  /* Thème clair : verre BLANC, sinon le texte sombre devient illisible */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-solid: rgba(255, 255, 255, 0.96);
  --glass-border: 1px solid rgba(184, 134, 11, 0.35);
  --glass-scrim: rgba(30, 42, 66, 0.25);
  --btn-outline: rgba(92, 107, 133, .6);
  --sb-thumb: rgba(92, 107, 133, .34);
  --sb-thumb-hi: rgba(184, 134, 11, .55);
  --vol-bid: #0a8f5c;
  --vol-ask: #d6333c;
  --bg: #eef1f7;
  --panel: #ffffff;
  --panel2: #f1f4fa;
  --row: #f5f7fc;
  --row-hi: #edf1f8;
  --border: #d4dbe8;
  --head-bg: #e9eef7;
  --head-bg2: #e9eef7;
  --head-bg3: #dfe7f3;
  --head-grad: linear-gradient(180deg, #f2f5fb, #e9eef7);
  --bottom-grad: linear-gradient(180deg, #e9eef7, #f2f5fb);
  --ticker-bg: #fdf6e3;
  --ticker-text: #8a6d1a;
  --text: #1c2b47;
  --muted: #5c6b85;
  --gold: #b8860b;
  --green: #087a50;              /* ≈5,4:1 sur blanc (ÉTAPE 8, avant #0a8f5c) */
  --gold-ink: #7a5a0e;           /* or foncé pour le TEXTE : ≈6,4:1 sur blanc */
  --green-dim: #d9f2e8;
  --red: #d6333c;
  --red-dim: #f9dfe1;
  --cyan: #0e7490;
  --blue: #2563eb;
  --purple: #7c3aed;
  --violet: #9333ea;
  --poc: #b8860b;
  --hvn: #0284c7;
  --lvn: #94a3b8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Pas de sélection de texte ni de loupe sur l'interface (le zoom du graphique,
   lui, reste actif : il est interne au canvas). Seuls les champs de saisie
   restent sélectionnables. */
html, body, #app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);     /* fluide : mobile plus petit, jamais < 13px */
  overflow: hidden;
  text-align: left;
}
#app { display: flex; flex-direction: column; height: 100vh; min-height: 560px; }

/* ⚠️ Règle CRITIQUE : l'attribut [hidden] doit TOUJOURS gagner.
   Sans ça, un élément avec `display: flex` en CSS ignore `hidden`. */
[hidden] {
  display: none !important;
} 

/* ---------- TOP BAR ---------- */
#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 14px;
  background: var(--head-grad);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; letter-spacing: .5px; font-size: 15px; color: #fff; }
.brand-name b { color: var(--gold); }
.brand-name .brand-copy, .login-title .brand-copy { font-size: .55em; font-weight: 400; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.login-copy { text-align: center; font-size: 11px; color: var(--muted); opacity: .75; margin-top: 12px; }
#appFoot { position: fixed; right: 8px; bottom: 5px; z-index: 800; font-size: 10px; color: var(--muted); opacity: .7; pointer-events: none; }
#appFoot a { pointer-events: auto; }
/* Panneau ouvert (surtout mobile où le corps défile aussi) : le corps est
   verrouillé pour qu'il ne vole plus les gestes au panneau — sinon, une fois
   en bas, les balayages partent dans la page derrière (invisible) et le
   panneau semble bloqué. */
/* Verrou AUTOMATIQUE (ÉTAPE 3) : le body est bloqué tant qu'un panneau ou
   une popup est ouvert, et se débloque seul à la fermeture. */
body:has(.tabpanel.open), body:has(.popup.show) {
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Barre newsletter masquée pendant qu'un panneau est ouvert : elle recouvrait
   le bas des panneaux (dernières lignes, saisie du chat). */
body:has(.tabpanel.open) #nlBar { display: none !important; }
/* Repli pour les navigateurs sans :has() (anciens) : on garde la classe JS */
@supports not selector(:has(*)) {
  body.panel-open { overflow: hidden !important; }
}
/* supprimée (ÉTAPE 3) : écrasée plus bas par `touch-action: pan-y` et `overscroll-behavior-y: contain` */
.brand-sub { font-size: 10px; color: var(--muted); letter-spacing: .4px; }
.pricebox { text-align: center; margin: 0 auto; }
.phase-chip { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; padding: 1px 7px; border-radius: 999px; margin-top: 3px; border: 1px solid; }
.phase-chip[data-ph="accumulation"] { color: var(--cyan); border-color: rgba(62,206,249,.4); background: rgba(62,206,249,.08); }
.phase-chip[data-ph="manipulation"] { color: var(--gold); border-color: rgba(255,215,0,.4); background: rgba(255,215,0,.08); }
.phase-chip[data-ph="distribution"] { color: var(--green); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
#hdrPrice { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--gold);
  text-shadow: 0 0 14px rgba(255,215,0,.35); }
#hdrChange { font-family: var(--mono); font-size: 12px; color: var(--green); margin-left: 8px; }
#hdrSession { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.topright { display: flex; align-items: center; gap: 8px; }
.rank-badge {
  border: 1px solid var(--gold); color: var(--gold);
  padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 11px;
  letter-spacing: .6px; background: rgba(255,215,0,.06);
}
.rank-badge small { display: block; font-weight: 500; font-size: 8px; color: var(--muted); letter-spacing: 1px; }
.tbtn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 12px;
}
.tbtn:hover { border-color: var(--gold); color: var(--gold); }
.tbtn.on { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.08); }

/* ---------- MAIN ---------- */
#main {
  position: relative;
  display: grid;
  flex: 1 1 auto; min-height: 0;
  --book-w: 38%;
  --quiz-h: 175px;
  grid-template-columns: minmax(320px, var(--book-w)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--quiz-h);
  grid-template-areas: "book chart" "quiz quiz";
}
#orderbook-panel { grid-area: book; min-width: 0; min-height: 0; }
#chart-panel { grid-area: chart; min-width: 0; min-height: 0; }
.resizer-v {
  position: absolute; top: 0; bottom: 0; left: var(--book-w);
  width: 8px; margin-left: -4px; z-index: 9;
  cursor: col-resize; touch-action: none;
}
.resizer-v::after {
  content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px;
  background: var(--gold); opacity: 0; transition: opacity .15s;
}
.resizer-v:hover::after, .resizer-v.active::after { opacity: .7; }
body.resizing { cursor: grabbing !important; user-select: none; }

/* ---------- ORDER BOOK ---------- */
#orderbook-panel {
  flex: 0 0 42%; min-width: 460px;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--border);
}
#ob-head {
  display: grid;
  grid-template-columns: 40px 52px 42px 68px 42px 52px 1.1fr 0.9fr 70px;
  font-size: 10px; letter-spacing: .5px; font-weight: 600;
  color: var(--text); opacity: .92;
  text-transform: uppercase;
  /* Padding DROIT = largeur RÉELLE de la barre de défilement du carnet
     (mesurée en JS → var --ob-sb) : sans cela les colonnes de l'en-tête sont
     décalées par rapport aux lignes. */
  padding: 5px var(--ob-sb, 9px) 5px 0;
  border-bottom: 1px solid var(--border); background: var(--head-bg);
  user-select: none;
  align-items: center;
  /* Intitulés toujours nets au défilement : l'en-tête reste collé en haut du
     carnet (aucune ligne à moitié coupée qui le chevauche). */
  position: sticky; top: 0; z-index: 5;
}
#ob-head span { text-align: center; overflow: hidden; white-space: nowrap; }
#ob-head span:not(:last-child) { border-right: 1px solid rgba(23,36,60,.55); }
/* Bandeau « CONTRATS » du carnet partagé : une pastille par trader (position
   LONG ▲ / SHORT ▼ + prix moyen d'entrée). Alimenté par le registre diffusé par
   le serveur → affichage IDENTIQUE pour tous les joueurs connectés. */
#ob-traders {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 3px var(--ob-sb, 9px) 3px 6px;
  background: var(--head-bg2); border-bottom: 1px solid var(--border);
  font-size: 10px; max-height: 48px; overflow-y: auto; user-select: none;
}
#ob-traders[hidden] { display: none; }
#ob-traders .trk-lbl { color: var(--muted); font-weight: 800; letter-spacing: .4px; font-size: 9px; }
#ob-traders .trk { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; background: var(--panel); }
#ob-traders .trk.me { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,215,0,.25); }
#ob-traders .trk i { font-style: normal; font-weight: 700; color: var(--text); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ob-traders .trk b { font-weight: 800; }
#ob-traders .trk b.lg { color: var(--green); }
#ob-traders .trk b.sh { color: var(--red); }
#ob-traders .trk b em { font-style: normal; font-weight: 600; opacity: .75; font-size: 9px; }
#orderbook { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-gutter: stable; contain: layout paint; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* supprimé (ÉTAPE 3) : géré par le bloc unique « BARRE DE DÉFILEMENT UNIQUE » */
/* NB : `scrollbar-width/color` est posé UNIQUEMENT dans ce @supports (moteurs
   sans `::-webkit-scrollbar`, donc Firefox). Dans Chrome/Safari il PREND LE PAS
   sur les règles `::-webkit-scrollbar` ci-dessus : la barre était donc rendue
   « thin » ≈ 14 px avec un pouce #2a3a5f plein, beaucoup plus imposante que les
   9 px prévus (mesuré en v2.7.5 : 14 px au lieu de 9). */
/* supprimé (ÉTAPE 3) : Firefox couvert par le @supports du bloc unique « BARRE DE DÉFILEMENT UNIQUE » */
.ob-row {
  display: grid;
  grid-template-columns: 40px 52px 42px 68px 42px 52px 1.1fr 0.9fr 70px;
  height: var(--rh, 21px); align-items: center;
  font-family: var(--mono); font-size: 10.5px; line-height: 1;
  border-bottom: 1px solid rgba(27,39,64,.35);
  cursor: default; user-select: none;
  position: relative;
}
.ob-row:hover { background: rgba(255,255,255,.025); }
.ob-row.side-bid { background: linear-gradient(90deg, rgba(52,211,153,.07), rgba(52,211,153,.015) 70%); }
.ob-row.side-ask { background: linear-gradient(90deg, rgba(248,113,113,.07), rgba(248,113,113,.015) 70%); }
.ob-row .c { text-align: center; padding: 0 2px; overflow: hidden; white-space: nowrap; }
.ob-row > .c:nth-child(-n+8) { border-right: 1px solid rgba(23,36,60,.3); }
.ob-row .c-lots { color: var(--gold); font-weight: 700; }
.ob-row .c-bid { color: var(--green); }
.ob-row .c-bid.hot { background: rgba(52,211,153,.14); }
.ob-row .c-exa { color: var(--green); }
.ob-row .c-exv { color: var(--red); }
.ob-row .c-ask { color: var(--red); }
.ob-row .c-ask.hot { background: rgba(248,113,113,.14); }
.ob-row .c-pnl { font-weight: 800; }
.ob-row .c-pnl-p { color: #2ea87c; font-weight: 800; }
.ob-row .c-pnl-n { color: #d95f5f; font-weight: 800; }
.ob-row .c-price { color: var(--text); font-weight: 600; cursor: pointer; }
.ob-row .c-price.cur { color: var(--gold); font-weight: 800; }
.ob-row.cur-row {
  background: linear-gradient(90deg, rgba(255,215,0,.10), rgba(255,215,0,.03));
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.25);
}
.ob-row .c-tp { font-size: 9.5px; cursor: pointer; min-height: 12px; }
.ob-row .c-tp:empty::after { content: '···'; opacity: .28; }
.ob-row .c-tp .tp { color: var(--cyan); }
.ob-row .c-tp .sl { color: var(--red); }
.ob-row .c-tp .sel { background: rgba(255,215,0,.18); }
.ob-row .c-bid, .ob-row .c-ask { cursor: pointer; }
/* prix « encadré » : ordre du joueur présent sur la ligne (entrée/TP/SL) */
.ob-row.own { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Ligne du prix moyen d'entrée d'un AUTRE trader (marché partagé). */
.ob-row.tpos { box-shadow: inset 3px 0 0 rgba(120,170,255,.85); }
/* repère de réponse (quiz) : ligne flashée où se trouve la réponse */
.ob-row.repere {
  outline: 2px solid #ff8c42; outline-offset: -2px;
  background: rgba(255,140,66,.14) !important;
  animation: repereFlash 1.2s ease-in-out infinite;
}
@keyframes repereFlash { 0%,100% { background: rgba(255,140,66,.14); } 50% { background: rgba(255,140,66,.30); } }
/* spoofing : mur de façade gonflé puis évaporé */
.ob-row.spoof .c-bid.hot, .ob-row.spoof .c-ask.hot { color: #ff4d6d; font-weight: 800; }
.ob-row.spoof { outline: 1px dashed #ff4d6d; outline-offset: -1px; }

/* colonne VOLUME : histogramme du volume profil (couleurs Python) */
.ob-row .c-vol { position: relative; color: var(--muted); font-size: 9px; overflow: hidden; }
.ob-row .c-vol .vb {
  position: absolute; top: 1px; bottom: 1px; left: 1px;
  display: block; pointer-events: none; min-width: 2px;
  opacity: .85; border-radius: 2px;
}
.ob-row .c-vol b { position: relative; font-weight: 700; font-size: 9px; color: var(--text); opacity: .9; }
/* colonne VOLUME — MÉMOIRE DU VOLUME DE LA JOURNÉE : prix où la SESSION n'a rien
   échangé mais où la journée a échangé du volume (mêmes données que le profil du
   graphique). Barre HACHURÉE, toujours plus courte que la plus longue barre de
   session (plafond 55 % posé dans game.js) : le POC du carnet reste le sommet. */
.ob-row .c-vol .vb.hist {
  /* couleur de repli (si un moteur ne gère pas le dégradé répété, la barre reste
     visible en aplat sourd) puis le hachurage par-dessus. */
  background-color: rgba(158,178,212,.35);
  background-image: repeating-linear-gradient(45deg,
    rgba(170,190,222,.70) 0, rgba(170,190,222,.70) 2px,
    rgba(170,190,222,.20) 2px, rgba(170,190,222,.20) 4px);
  opacity: .9; border-radius: 0;
}
.ob-row .c-vol b.hist { color: var(--muted); opacity: .75; font-weight: 600; }
body.theme-light .ob-row .c-vol .vb.hist {
  background-color: rgba(40,60,100,.22);
  background-image: repeating-linear-gradient(45deg,
    rgba(40,60,100,.45) 0, rgba(40,60,100,.45) 2px,
    rgba(40,60,100,.10) 2px, rgba(40,60,100,.10) 4px);
}

/* badges Lots : entrée en attente / entrée de position active */
.ob-row .c-lots .pend {
  display: inline-block; background: rgba(255,215,0,.14); border: 1px solid var(--gold);
  border-radius: 3px; padding: 0 2px; font-size: 9px; color: var(--gold); font-weight: 700;
}
.ob-row .c-lots .pend.long { border-color: var(--green); color: var(--green); background: rgba(52,211,153,.12); }
.ob-row .c-lots .pend.short { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.12); }
/* MARCHÉ PARTAGÉ — badges des AUTRES traders dans le MÊME carnet :
   👤+n / 👤−n = leurs ordres en attente · 🔵n / 🔴n = leurs CONTRATS (position
   ouverte, affichée sur leur prix moyen d'entrée). Liséré pointillé pour bien
   distinguer un badge distant d'un badge local ; infobulle = pseudos. */
.ob-row .c-lots .pend.rmt { border-style: dashed; opacity: .95; }
.ob-row .c-lots .pend.rmt.long { border-color: var(--green); color: var(--green); background: rgba(52,211,153,.10); }
.ob-row .c-lots .pend.rmt.short { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.10); }
.ob-row .c-lots .pend.rpos { border-style: solid; }
.ob-row .c-lots .pend.rpos.long { border-color: var(--green); color: var(--green); background: rgba(52,211,153,.22); }
.ob-row .c-lots .pend.rpos.short { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.22); }
.ob-row .c-lots .e-ch {
  display: inline-block; background: rgba(52,211,153,.14); border: 1px solid var(--green);
  border-radius: 3px; padding: 0 2px; font-size: 9px; color: var(--green); font-weight: 800;
}
.ob-row .c-lots .e-ch.short { background: rgba(248,113,113,.14); border-color: var(--red); color: var(--red); }
.ob-row .c-lots .sel { background: rgba(255,215,0,.25); }

/* Bouton ✕ d'annulation INSTANTANÉE de l'ordre sélectionné (petit, rouge,
   discret). Aucun popup : un tap = l'ordre disparaît immédiatement.
   Zone tactile élargie par un pseudo-élément pour le doigt (mobile). */
.ob-row .c-lots .ord-x,
.ob-row .c-tp .ord-x {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 15px; padding: 0; margin: 0 1px 0 0;
  font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1;
  color: var(--red); background: rgba(248,113,113,.16);
  border: 1px solid var(--red); border-radius: 3px;
  cursor: pointer; vertical-align: middle;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .12s, color .12s;
}
.ob-row .c-lots .ord-x::before,
.ob-row .c-tp .ord-x::before {
  content: ''; position: absolute; left: -4px; right: -4px; top: -3px; bottom: -3px;
}
.ob-row .c-lots .ord-x:hover,
.ob-row .c-lots .ord-x:active,
.ob-row .c-tp .ord-x:hover,
.ob-row .c-tp .ord-x:active { background: var(--red); color: #fff; }
/* order book footer / legend strip */
#ob-foot {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 5px 10px; font-size: 9.5px; color: var(--muted);
  border-top: 1px solid var(--border); background: var(--head-bg);
  align-items: center;
}
#ob-foot .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
#ob-foot .foot-btn {
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; padding: 2px 7px; font-size: 9.5px; cursor: pointer;
}
#ob-foot .foot-btn:hover { color: var(--gold); border-color: var(--gold); }
#ob-foot .foot-btn.on { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.08); }

/* ---------- CHART ---------- */
#chart-panel {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--panel); position: relative;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#chart-title {
  padding: 5px 12px; font-size: 10px; letter-spacing: .6px; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--head-bg);
  display: flex; align-items: center; gap: 8px;
}
#chart-title .ct-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#chart-title b { color: var(--text); }
#chart-title .tbtn { padding: 2px 7px; font-size: 11px; }
#chartWrap { position: relative; flex: 1 1 auto; min-height: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* pan-y : le glissement HORIZONTAL est géré par le graphique (navigation dans
   l'historique) tandis que le glissement vertical laisse défiler la page —
   indispensable pour « bouger de gauche à droite » au doigt. */
#chartCanvas { width: 100%; height: 100%; display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Saisie de texte inline sur le graphique (remplace window.prompt) */
.chart-text-inline {
  position: absolute; z-index: 30; width: 132px; height: 26px;
  padding: 2px 8px; font-size: 12px;
  color: var(--text); background: var(--panel2);
  border: 1px solid var(--gold); border-radius: 6px; outline: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
}
#setup-box {
  position: absolute; top: 8px; right: 10px; z-index: 6;
  border: 1px solid var(--red); border-radius: 6px;
  background: rgba(15,18,28,.55); backdrop-filter: blur(2px);
  padding: 0 10px; font-size: 11px;
  font-family: var(--mono); line-height: 1.45; min-width: 170px;
  max-width: 272px;      /* compact : le panneau ne doit pas devenir imposant */
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  cursor: move; user-select: none;
  /* DÉPLACEMENT FLUIDE (souris ET doigt) : sans `touch-action: none` le
     navigateur s'emparait du geste pour faire défiler la page → le panneau ne
     suivait plus le doigt (pointercancel). */
  touch-action: none;
  will-change: left, top;
}
/* Pendant le glissement : le navigateur ne doit RIEN faire d'autre que suivre
   le doigt (aucune sélection de texte, aucun menu contextuel, aucun scroll). */
#setup-box .s-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; cursor: grab; touch-action: none; }
#setup-box.dragging { cursor: grabbing; }
#setup-box.dragging .s-head { cursor: grabbing; }
#setup-box .s-title { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }
#setup-box .s-toggle { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; }
#setup-box .s-body { padding: 0 0 7px; }
#setup-box .s-sub { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; }
#setup-box .s-note { font-size: 8px; color: var(--muted); line-height: 1.3; margin-top: 5px; border-top: 1px dashed rgba(255,255,255,.08); padding-top: 4px; }
#setup-box .s-line { display: flex; justify-content: space-between; gap: 10px; }
#setup-box .s-k { color: var(--muted); }
#setup-box .s-v.buy { color: var(--green); }
#setup-box .s-v.sell { color: var(--red); }
#setup-box .s-v.gold { color: var(--gold); }
#setup-box .s-bias { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }
#setup-box .s-reason { font-size: 8.5px; color: var(--muted); line-height: 1.3; margin: 2px 0 4px; text-transform: uppercase; letter-spacing: .3px; border-top: 1px dashed rgba(255,255,255,.08); padding-top: 3px; }
/* --- Panneau « 📊 NIVEAUX DU MARCHÉ » : POSE AUTOMATIQUE + fondu quand il
   recouvre des bougies. Le panneau est replacé à chaque image dans la zone la
   plus libre du graphique (voir placeSetupBox dans chart.js) : il ne reste plus
   planté devant les chandeliers. S'il en chevauche malgré tout (tendance qui
   balaie toute la hauteur, ou graphique étroit sur téléphone), la classe
   « s-overlap » allège fortement le fond pour laisser voir le prix dessous ; le
   survol redonne un fond plein pour une lecture confortable. Le bouton ⟳
   (.s-auto, visible seulement en pose manuelle) relance la pose automatique. --- */
#setup-box { transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
#setup-box.s-overlap {
  background: rgba(10,13,22,.30);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
  border-color: rgba(214,51,60,.5);
  box-shadow: none;
}
body.theme-light #setup-box.s-overlap {
  background: rgba(255,255,255,.40);
  border-color: rgba(214,51,60,.38);
}
#setup-box:hover, #setup-box:focus-within {
  background: rgba(15,18,28,.94);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
body.theme-light #setup-box:hover, body.theme-light #setup-box:focus-within { background: rgba(255,255,255,.97); }
#setup-box .s-acts { display: flex; align-items: center; gap: 2px; }
#setup-box .s-auto { display: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; border-radius: 3px; }
#setup-box .s-auto:hover { color: var(--gold); }
#setup-box.s-manual .s-auto { display: inline-block; }
#tf-selector {
  position: absolute; left: 8px; bottom: 8px; z-index: 6;
  display: flex; gap: 3px; background: var(--panel);
  padding: 3px; border-radius: 5px; border: 1px solid var(--border);
}
#tf-selector button {
  background: transparent; border: 0; color: var(--muted);
  padding: 3px 7px; font-size: 10px; cursor: pointer; border-radius: 3px; font-family: var(--mono);
}
#tf-selector button.active { background: var(--gold); color: #000; font-weight: 700; }
#minis { flex: 0 0 76px; min-height: 0; display: flex; border-top: 1px solid var(--border); background: var(--head-bg); transition: flex-basis .25s ease; }
#minis.maxed { flex-basis: min(38vh, 62%) !important; }
.mini-tools { position: absolute; right: 6px; top: 2px; z-index: 4; display: flex; gap: 4px; }
.mini-tools .tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0; font-size: 13px; line-height: 1;
  border-radius: 5px;
}
.mini-tools .tbtn.on { background: rgba(255,215,0,.18); border-color: var(--gold); color: var(--gold); }
.mini { flex: 1; min-width: 0; min-height: 0; position: relative; padding: 2px 6px 0; border-right: 1px solid var(--border); overflow: hidden; }
.mini canvas { width: 100%; height: 100%; display: block; }
.mini-label { position: absolute; top: 3px; left: 8px; font-size: 8.5px; color: var(--muted); letter-spacing: .6px; z-index: 2; }
.mini-label b { color: var(--text); }
.mini-note { position: absolute; top: 16px; left: 8px; font-size: 8px; color: var(--muted); z-index: 2; }
.mini-tf { position: relative; z-index: 3; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 9.5px; padding: 0 1px; height: 15px; line-height: 1; }
/* poignée de redimensionnement des miniatures (glisser vers le haut = agrandir) */
.minis-drag { flex: 0 0 9px; position: relative; cursor: row-resize; background: var(--head-bg); border-top: 1px solid var(--border); touch-action: none; }
.minis-drag::before { content: ""; position: absolute; left: 50%; top: 3px; transform: translateX(-50%); width: 46px; height: 3px; border-radius: 2px; background: var(--muted); opacity: .45; }
.minis-drag:hover::before, body.resizing .minis-drag::before { opacity: .9; }
body.resizing #minis { transition: none; }

/* ---------- BOTTOM BAR ---------- */
#bottombar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 14px;
  background: var(--bottom-grad);
  border-top: 1px solid var(--border);
}
.ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctl label { color: var(--muted); font-size: 11px; }
input[type=number], input[type=text] {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 5px 8px; font-family: var(--mono); font-size: 12px; width: 74px;
}
input[type=text] { width: 240px; }
/* ---------- BOUTONS (étape 2) ----------
   Base = variante SECONDAIRE (contour). Icône alignée verticalement
   avec le texte grâce à inline-flex + align-items:center. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--btn-h); padding: 0 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .2px;
  text-align: center;
  color: var(--text); background: transparent;
  border: 1px solid var(--btn-outline); border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s, filter .15s;
}
.btn svg, .btn .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.btn:hover:enabled { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.08); }
.btn.gold, .btn.btn-primary, .btn.retry {
  color: #0a0a12; border-color: #e6b800;
  background: linear-gradient(180deg, #ffd700, #e6b800);
  box-shadow: 0 2px 10px rgba(255,215,0,.18);
}
.btn.gold:hover:enabled, .btn.btn-primary:hover:enabled, .btn.retry:hover:enabled {
  color: #0a0a12; border-color: #ffd700;
  background: linear-gradient(180deg, #ffe033, #f0c000);
  box-shadow: 0 4px 16px rgba(255,215,0,.32);
}
.btn.red, .btn.btn-danger {
  color: var(--red); background: rgba(248,113,113,.12); border-color: var(--red);
}
.btn.red:hover:enabled, .btn.btn-danger:hover:enabled {
  color: var(--red); background: rgba(248,113,113,.26); border-color: var(--red);
}
.btn.green {
  color: var(--green); background: rgba(52,211,153,.12); border-color: var(--green);
}
.btn.green:hover:enabled {
  color: var(--green); background: rgba(52,211,153,.26); border-color: var(--green);
}
.btn:disabled, .btn[disabled] {
  opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.35);
}
.btn.firm-size { flex-direction: column; align-items: center; height: auto; padding: 8px 12px; }
.btn.fquiz-opt { justify-content: flex-start; text-align: left; height: auto; padding: 9px 12px; }
#orders-display { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ---------- QUIZ (PC/tablette : barre du bas pleine largeur — mobile : entre carnet & graphique) ---------- */
.quiz-area {
  grid-area: quiz;
  position: relative;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--head-bg2);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 8px 12px 12px; overflow-y: auto;
  touch-action: manipulation;
}
.quiz-area .choice, .quiz-area button { touch-action: manipulation; }
.quiz-drag {
  position: absolute; top: -8px; left: 0; right: 0; height: 18px;
  cursor: row-resize; touch-action: none; z-index: 9;
}
.quiz-drag::after {
  content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px;
  background: var(--gold); opacity: .4; transition: opacity .15s;
}
.quiz-drag:hover::after, .quiz-drag.active::after { opacity: .9; }
.quiz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex: 0 0 auto; }
.quiz-title { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: var(--gold); text-transform: uppercase; flex: 1; }
.quiz-head .tbtn { padding: 2px 7px; font-size: 10px; white-space: nowrap; }
.quiz-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Zone de TEXTE (question + chrono + retour + explication) : SEULE partie qui
   défile. Tout ce qui suit (ligne de réponse, blocs de prix, boutons) est posé
   SOUS elle → toujours visible, jamais recouvert par le texte de l'explication.
   `min-height` : la zone ne peut JAMAIS s'écraser à zéro (c'est le seul élément
   compressible de la colonne) — on voit toujours au moins ~3 lignes de la
   question, et l'ajusteur `#quizSplit` permet d'agrandir encore.
   En dessous de 1080 px (mise en page empilée), cette zone est neutralisée
   (`display: contents`, voir @media) : le panneau du quiz garde EXACTEMENT le
   flux d'origine du mobile, où c'est le panneau entier qui défile.
   ⚠️ Sous 1080 px les enfants de cette zone deviennent des ÉLÉMENTS FLEX de
   `.quiz-body` (display:contents) : sans `flex: 0 0 auto` un `min-height`
   explicite les laisse s'ÉCRASER (l'explication tombait à 15 px de haut et son
   texte débordait sur la poignée et les boutons). D'où le `flex: 0 0 auto`. */
.quiz-text { flex: 1 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* AJUSTEUR texte / boutons : glisser vers le bas = plus de place pour le texte
   (le panneau du quiz grandit d'autant ; le graphique se réduit). */
.quiz-split { flex: 0 0 auto; position: relative; height: 24px; margin: 2px 0 1px; cursor: row-resize; touch-action: none; user-select: none; }
.quiz-split::after { content: ''; position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 60px; height: 3px; border-radius: 2px; background: var(--muted); opacity: .45; transition: opacity .15s, background .15s; }
.quiz-split:hover::after, .quiz-split.active::after { opacity: .95; background: var(--gold); }
#question-text { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; flex: 0 0 auto; }
#question-text .niv { color: var(--gold); }
#q-timer { height: 3px; background: var(--panel2); border-radius: 2px; margin: 5px 0 3px; overflow: hidden; flex: 0 0 auto; }
#q-timer > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); width: 100%; }
#feedback-text { font-size: 14px; min-height: 18px; margin-top: 3px; flex: 0 0 auto; }
#explain-text {
  font-size: 13.5px; color: var(--cyan); margin-top: 2px; min-height: 16px; flex: 0 0 auto;
  line-height: 1.5; overflow-wrap: anywhere; white-space: normal;
}
#explain-text b { color: var(--gold); }
.rep-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex: 0 0 auto; }
.rep-row.hidden { display: none; }
.rep-row input[type=text] { width: 150px; flex: 1 1 auto; min-width: 70px; font-size: 14px; }
.rep-row .btn { padding: 5px 10px; }
/* Pendant la phase d'OBSERVATION du quiz, la case de réponse reste visible mais
   désactivée : le joueur lit « ⏱ Attendez la fin du scénario… » dans le champ. */
.rep-row input.waiting, .rep-row .btn.waiting { opacity: .55; cursor: not-allowed; }
.quiz-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; flex: 0 0 auto; }
.quiz-actions .btn { padding: 5px 12px; font-size: 11.5px; }
/* ---------- BARRES DE DÉFILEMENT DU QUIZ : fines, discrètes, thémées ----------
   Sans ce bloc le navigateur dessine sa barre NATIVE (~15-20 px, piste opaque)
   sur `.quiz-area` (et sur `.quiz-text` en ≥1080 px) : elle mange la largeur
   utile — assez pour déclencher en plus une barre HORIZONTALE parasite — et fait
   « rustique » sur mobile. Ici : 5 px, pouce arrondi translucide, piste
   invisible, or au survol. Firefox via `scrollbar-width/color`. Le défilement
   lui-même est inchangé : tout le contenu reste atteignable. */
.quiz-area, .quiz-text {
  --sb: rgba(125,138,163,.35); --sb-hi: rgba(255,215,0,.6);
  overflow-x: hidden;
}
/* NB Chrome/Safari : si `scrollbar-width/color` est posé, il prend le pas sur
   `::-webkit-scrollbar` (une barre « thin » fait ~14 px) — on ne les déclare donc
   QUE dans le @supports plus bas, réservé aux moteurs qui ignorent le pseudo-
   élément WebKit (Firefox). */
.quiz-area::-webkit-scrollbar, .quiz-text::-webkit-scrollbar { width: 5px; height: 5px; }
.quiz-area::-webkit-scrollbar-track, .quiz-text::-webkit-scrollbar-track,
.quiz-area::-webkit-scrollbar-corner, .quiz-text::-webkit-scrollbar-corner { background: transparent; }
.quiz-area::-webkit-scrollbar-thumb, .quiz-text::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 999px; }
.quiz-area::-webkit-scrollbar-thumb:hover, .quiz-text::-webkit-scrollbar-thumb:hover { background: var(--sb-hi); }
body.theme-light .quiz-area, body.theme-light .quiz-text { --sb: rgba(92,107,133,.34); --sb-hi: rgba(184,134,11,.55); }
@supports not selector(::-webkit-scrollbar) {
  .quiz-area, .quiz-text { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
}
/* ---------- BARRE DE DÉFILEMENT GÉNÉRALE (toute la page) --------------------
   Elle n'existe QU'EN MOBILE : au-delà de 720 px l'appli tient dans la fenêtre
   (`#app { height: 100vh }`) et la page ne défile jamais. Sous 720 px l'appli
   devient une page qui défile (`#app { height: auto; min-height: 100dvh }`) et
   le navigateur dessine alors sa barre NATIVE sur tout le bord droit : ~20 px
   de large, piste opaque, pouce gris — la seule barre « rustique » qui restait
   (celles du carnet et du quiz sont déjà fines), et elle mangeait 20 px de
   largeur utile à l'appli. Ici : 6 px, pouce arrondi translucide, piste
   invisible, or au survol — même langage visuel que la barre du quiz.
   Sur téléphone le navigateur utilise de toute façon des barres « overlay »
   (invisibles au repos) : ce bloc sert surtout à l'aperçu desktop et aux
   navigateurs à barres classiques, pour la même apparence partout.
   Chrome/Safari : `::-webkit-scrollbar` UNIQUEMENT (poser `scrollbar-width/color`
   prendrait le pas et ferait ~14 px) ; Firefox via le @supports plus bas.
   Aucun effet sur le défilement lui-même. */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(125,138,163,.38); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,.6); }
body.theme-light::-webkit-scrollbar-thumb { background: rgba(92,107,133,.34); }
body.theme-light::-webkit-scrollbar-thumb:hover { background: rgba(184,134,11,.55); }
@supports not selector(::-webkit-scrollbar) {
  html, body { scrollbar-width: thin; scrollbar-color: rgba(125,138,163,.38) transparent; }
}
/* marqueur « entrée » posée pendant une question quiz (visualisation uniquement) */
.ob-row .c-lots .pend.quiz { border-color: var(--purple); color: var(--purple); background: rgba(167,139,250,.12); }
.stats { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 12px; }
.stats .st { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.stats .st b { font-size: 15px; }
.stats .st.level b { color: var(--gold); }
.stats .st.balance b { color: var(--green); }
.stats .st.score b { color: var(--cyan); }
.stats .st.streak b { color: var(--purple); }
.stats .st.discipline b { color: #ffc24d; }
.stats .st.rankpos b { color: var(--cyan); font-size: 13px; }
.stats .st small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }

/* ---------- POPUPS ---------- */
.popup {
  display: none; position: fixed; z-index: 50; inset: 0;
  background: var(--glass-scrim); align-items: center; justify-content: center;
}
.popup.show { display: flex; }
.popup-box {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-radius: 8px;
  max-width: 620px; width: 92%; max-height: 84vh; overflow: auto; padding: 18px;
}
.popup-box h2 { color: var(--gold); margin-bottom: 10px; font-size: 15px; }
.popup-box p, .popup-box li { color: var(--text); font-size: 12.5px; line-height: 1.55; margin-bottom: 6px; }
.popup-box .closer { float: right; cursor: pointer; color: var(--muted); font-size: 16px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -10px -10px 0 0; }
.share-block { margin: 10px 0; padding: 10px; border: 1px dashed var(--gold); border-radius: 10px; }
.share-chooser { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: #1e293b; }
.soc svg { width: 21px; height: 21px; fill: #e8edf7; }
.soc:hover { border-color: var(--gold); }
.soc:hover svg { fill: var(--gold); }
.soc-g { font-style: normal; font-size: 20px; line-height: 1; }
/* PARTAGE UNIQUEMENT : logos aux couleurs officielles, sans tuile noire.
   Le pied de page (.mpp-soc) et la connexion (.login-soc) gardent leur style. */
#shareChooser .soc { background: transparent; border-color: transparent; }
#shareChooser .soc svg { width: 26px; height: 26px; }
#shareChooser .soc:hover { background: rgba(127,140,160,.18); border-color: transparent; }
#shareChooser .soc-x svg { fill: #000; }
#shareChooser .soc-facebook svg { fill: #1877F2; }
#shareChooser .soc-whatsapp svg { fill: #25D366; }
#shareChooser .soc-telegram svg { fill: #229ED9; }
#shareChooser .soc-linkedin svg { fill: #0A66C2; }
#shareChooser .soc-reddit svg { fill: #FF4500; }
#shareChooser .soc-pinterest svg { fill: #E60023; }
#shareChooser .soc-messenger svg { fill: #0084FF; }
#shareChooser .soc-tiktok svg { fill: #000; }
#shareChooser .soc-instagram svg { fill: #E4405F; }
body:not(.theme-light) #shareChooser .soc-x svg { fill: #e8edf7; }
body:not(.theme-light) #shareChooser .soc-tiktok svg { fill: #e8edf7; }
.mpp-soc .soc-g { font-size: 14px; }
.login-soc .soc-g { font-size: 14px; }
button.soc { cursor: pointer; color: inherit; font: inherit; }
.mpp-foot { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.mpp-foot img { border-radius: 4px; }
.mpp-soc { display: inline-flex; gap: 6px; margin-left: 4px; }
.mpp-soc a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: transparent; }
.mpp-soc svg { width: 14px; height: 14px; fill: #8b98b3; }
.mpp-soc a:hover { border-color: transparent; }
.mpp-soc a:hover svg { fill: var(--gold); }
.login-soc { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.login-soc a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: transparent; }
.login-soc svg { width: 14px; height: 14px; fill: #8b98b3; }
.login-soc a:hover { border-color: transparent; }
.login-soc a:hover svg { fill: var(--gold); }
#appFoot { text-align: center; padding: 6px 8px 10px; }

/* --- modal CONDITIONS D'UTILISATION (1ère connexion) --- 
   z-index 130 : AU-DESSUS de #login-screen (100). Sinon, ouverte depuis
   l'écran de connexion (« Lire les conditions d'utilisation » ou le lien
   souligné dans la phrase), la fenêtre restait DERRIÈRE l'écran de
   connexion : invisible et impossible à valider. */
.tos-popup { z-index: 130; }
/* Fenêtre en colonne (ÉTAPE 3) : titre et bouton restent TOUJOURS visibles,
   seul le texte défile. Plus de scroller dans le scroller. */
.tos-box {
  max-width: 760px; width: 94%;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
.tos-box > h2, .tos-box > .tos-actions { flex: 0 0 auto; }
.tos-box h2 { color: var(--gold); text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tos-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.tos-inner p { color: var(--text); font-size: 12.5px; line-height: 1.55; margin-bottom: 8px; }
.tos-inner li { color: var(--text); font-size: 12px; line-height: 1.5; margin-bottom: 7px; }
.tos-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.tos-actions .btn { padding: 10px 22px; font-size: 13px; }
.tos-bi .tos-lang { margin-bottom: 14px; padding: 10px 12px; background: rgba(127,127,127,.06); border: 1px solid var(--border); border-radius: 10px; }
.tos-bi h3 { color: var(--gold); font-size: 13px; margin-bottom: 8px; }
@media (max-width: 720px) { .tos-box { width: 96%; } }

/* --- avertissement de modération du chat --- */
#chatFilterWarn { display: none; margin: 6px 0; padding: 7px 10px; border-radius: 5px; font-size: 11.5px; line-height: 1.4; background: var(--red-dim); color: var(--red); border: 1px solid var(--red); }
#chatFilterWarn.show { display: block; }

/* toasts */
#toasts { position: fixed; top: 54px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-left: 3px solid var(--gold);
  padding: 8px 12px; border-radius: 5px; font-size: 12px; max-width: 320px;
  animation: toastin .25s ease; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.toast.buy { border-left-color: var(--green); }
.toast.sell { border-left-color: var(--red); }
.toast.rank { border-left-color: var(--purple); border-color: var(--purple); color: var(--violet); font-weight: 700; }
@keyframes toastin { from { opacity: 0; transform: translateX(20px);} }

/* responsive */
@media (max-width: 1080px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "book" "quiz" "qres" "chart";
    overflow: visible; flex: none;
  }
  #orderbook-panel { height: 44vh; min-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; }
  #orderbook { min-height: 0; }
  .quiz-area {
    min-height: 96px; max-height: 30vh;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    overflow-y: auto;
  }
  /* Zone de texte : `display: contents` → le conteneur disparaît de la mise en
     page et ses enfants (question, chrono, retour, explication) redeviennent des
     éléments du panneau, comme avant l'ajout de l'ajusteur. Le panneau du quiz
     (30vh, défilant) est donc STRICTEMENT celui d'origine sur mobile — la ligne
     du bas n'est jamais recouverte par le texte. Ne s'applique pas au PC, où
     c'est bien la zone de texte seule qui défile sous les boutons. */
  .quiz-text { display: contents; }
  #chart-panel { height: 44vh; min-height: 300px; min-width: 0; }
  .resizer-v { display: none; }
  /* poignée quiz/carnet utilisable aussi sur mobile */
  .quiz-drag { top: 0; height: 14px; }
  .quiz-drag::after { top: 6px; height: 3px; }
  #bottombar { grid-template-columns: 1fr; }
  .pricebox { margin: 0; }
  #hdrPrice { font-size: 22px; }
}
@media (min-width: 1081px) and (max-width: 1340px) {
  #main { --book-w: 36%; --quiz-h: 175px; }
}
@media (min-width: 1081px) and (max-height: 880px) {
  #app { height: 100vh; }
  #main { min-height: 0; }
}
@media (max-width: 720px) {
  #topbar { flex-wrap: wrap; gap: 2px 10px; padding: 4px 8px; }
  .brand { order: 1; flex: 1 0 auto; }
  .topright { order: 2; flex: 0 1 auto; min-width: 0; gap: 4px; }
  .rank-badge { padding: 2px 6px; font-size: 10px; }
  .pricebox { order: 3; flex-basis: 100%; text-align: center; }
  #ob-head, .ob-row { grid-template-columns: 28px 38px 54px 38px 1.05fr 1fr 68px; }
  #ob-head { font-size: 9px; }
  .ob-row { font-size: 12px; }
  .ob-row .c-pnl { font-weight: 800; }
  .ob-row .c-tp { font-size: 11px; }
  .ob-row .c-vol, .ob-row .c-vol b { font-size: 10px; }
  /* Contrôles LOTS / FLAT / SUIVRE : cibles tactiles + texte lisible */
  #ob-foot { font-size: 11px; }
  #ob-foot .ob-trade-ctl .btn { padding: 8px 12px; font-size: 12.5px; min-height: 38px; }
  #ob-foot .ob-trade-ctl input[type=number] { width: 56px; height: 38px; font-size: 14px; }
  #ob-foot .foot-btn { padding: 6px 10px; font-size: 11px; }
  #ob-head span:nth-child(3), #ob-head span:nth-child(5),
  .ob-row .c-exa, .ob-row .c-exv { display: none; }
  .brand-sub, #hdrSession, .rank-badge small { display: none; }
  .brand-name { font-size: 12px; }
  #hdrPrice { font-size: 18px; }
  #orderbook-panel { height: 46vh; min-height: 240px; }
  #chart-panel { height: 46vh; min-height: 260px; }
  #orderbook { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  /* Miniatures : MÊME hauteur que la version web (76 px). À 64 px elles étaient
     écrasées sur téléphone (en-têtes « ENTRÉE SHORT TERME / DIRECTION SESSION »
     qui chevauchaient les bougies). Reste la cible tactile mobile ci-dessous. */
  #minis { flex: 0 0 76px; }
  .stats { gap: 8px; }
}

/* ============================================================
   ÉCRAN DE CONNEXION (comptes créés uniquement par la créatrice)
   ============================================================ */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,215,0,.06), transparent 60%),
    #05080f;
  padding: 16px;
  overflow: auto;
}
.login-card {
  width: 380px; max-width: 100%;
  background: linear-gradient(180deg, #101b33, #0c1424);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 26px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(34,211,238,.05);
  text-align: center;
  animation: loginin .35s ease;
}
@keyframes loginin { from { opacity: 0; transform: translateY(10px);} }
.login-logo { width: 120px; height: auto; margin: 0 auto 8px; display: block; }
.login-title { font-size: 22px; font-weight: 800; letter-spacing: .5px; color: #fff; margin: 0 0 16px; }
.login-title b { color: var(--gold); }
.login-sub { font-size: 11.5px; color: var(--muted); margin: 6px 0 18px; line-height: 1.5; }
.login-langs { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; }
.lang-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease; font-family: var(--sans);
}
.lang-btn:hover { color: var(--gold); border-color: var(--gold); }
.lang-btn.on { color: #0a0a12; background: linear-gradient(180deg, #ffd700, #e6b800); border-color: #ffd700; box-shadow: 0 2px 10px rgba(255,215,0,.3); }
body.theme-light .lang-btn { color: #3c4a66; }
body.theme-light .lang-btn.on { color: #0a0a12; }
.login-card input[type=text], .login-card input[type=password], .login-card input[type=email] {
  display: block; width: 100%; margin: 8px 0;
  background: #0a101f; border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 11px 12px; font-size: 13px; font-family: var(--mono);
}
.login-card input:focus { outline: none; border-color: var(--gold); }
/* ÂGE / SEXE (facultatifs) : deux petits sélecteurs côte à côte, même gabarit
   que les champs texte — l'inscription reste possible sans y toucher. */
.auth-row2 { display: flex; gap: 8px; }
.auth-row2 select { margin: 0 !important; flex: 1 1 0; min-width: 0; }
.login-card select {
  display: block; width: 100%; margin: 8px 0;
  background: #0a101f; border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 11px 12px; font-size: 13px; font-family: var(--mono);
}
.login-card select:focus { outline: none; border-color: var(--gold); }
body.theme-light .login-card select { background: #ffffff; border: 1px solid var(--border); color: var(--text); }
/* Écrans étroits : les deux sélecteurs restent côte à côte mais avec une police
   et des marges réduites, pour que « Âge (facultatif) » reste lisible entier. */
@media (max-width: 480px) {
  .login-card select { font-size: 12px; padding: 10px 8px; }
}
.login-btn {
  width: 100%; margin-top: 14px;
  background: linear-gradient(180deg, #ffd700, #e6b800);
  color: #0a0a12; font-weight: 800; font-size: 14px; letter-spacing: .6px;
  border: 0; border-radius: 7px; padding: 12px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(255,215,0,.25);
  transition: transform .1s ease, box-shadow .2s ease;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,215,0,.35); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-err {
  min-height: 16px; font-size: 12px; color: var(--red); margin: 2px 0 4px;
  font-family: var(--sans); line-height: 1.4;
}
.login-foot { font-size: 10.5px; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.login-loader {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5,8,16,.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold); font-size: 13px; letter-spacing: .4px;
}
.login-loader.hidden { display: none; }
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,215,0,.2); border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BANDEAU DÉFILANT D'AVERTISSEMENTS
   ============================================================ */
#ticker {
  flex: 0 0 auto; overflow: hidden;
  background: var(--ticker-bg);
  border-bottom: 1px solid rgba(255,180,0,.25);
  height: 26px; display: flex; align-items: center;
}
.ticker-track {
  display: inline-flex; white-space: nowrap;
  animation: ticker 70s linear infinite;
  will-change: transform;
}
.tick-item {
  font-size: 10.5px; color: var(--ticker-text); padding: 0 34px;
  letter-spacing: .2px;
}
/* Annonce de la créatrice : MÊME couleur que les autres messages du bandeau
   (on n'applique plus la couleur du serveur, qui la rendait blanche), un peu
   plus grasse, et précédée de l'emoji 📣 (`TICK_EMOJI`, src/ui.js) — aucune
   étiquette « PUB ». L'emoji est du TEXTE : il prend donc exactement la
   couleur du thème, dans les deux thèmes. */
.tick-item.tick-creator { font-weight: 800; }
.tick-emoji { margin-right: 6px; font-size: 1.05em; line-height: 1; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Bandeau news (calendrier éco) ---------- */
#newsBadge {
  flex: 0 0 auto; display: none;
  background: linear-gradient(90deg, rgba(248,113,113,.18), rgba(255,92,92,.12));
  border-bottom: 1px solid rgba(255,92,92,.4);
  color: #ffb3b3; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  padding: 5px 14px; text-align: center; animation: newsPulse 1.4s ease-in-out infinite;
}
#newsBadge.show { display: block; }
@keyframes newsPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

/* ============================================================
   TOP BAR — LOGO & BADGE LIVE
   ============================================================ */
.brand { flex-direction: row; align-items: center; gap: 9px; }
.brand-logo { height: 30px; width: auto; }
/* Un seul fichier de logo, servi TEL QUEL. Aucun cadre n'est ajouté autour du
   logo (ni pastille, ni fond blanc) : c'est une demande explicite de la
   créatrice. La lisibilité de l'en-tête est portée par la couleur du TEXTE. */
.live-badge {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 9px; font-size: 10px; letter-spacing: 1px; color: var(--muted);
  background: rgba(255,255,255,.02);
}
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.live-badge.on { border-color: var(--green); color: var(--green); background: rgba(52,211,153,.08); }
.live-badge.on .dot-live { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1;} 50% { opacity: .35;} }

/* ============================================================
   BARRE D'ONGLETS
   ============================================================ */
#tabbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--head-bg); border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* Défileur PRO : défilement fluide, sans barre native, avec un léger fondu
     sur les bords (posé uniquement quand la barre défile réellement, cf. 6.2). */
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 12px;
  scroll-snap-type: x proximity;
}
#tabbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.tab.active { background: rgba(255,215,0,.1); border-color: var(--gold); color: var(--gold); }
.tab.locked { opacity: .5; filter: grayscale(.4); }
.tab.locked::after {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 4px;
  background: currentColor;
  -webkit-mask: var(--i-lock) center / contain no-repeat; mask: var(--i-lock) center / contain no-repeat;
}
/* Onglet en APERÇU : le contenu (classement) est consultable par tous, seul le
   fait de participer est réservé aux abonnés — d'où l'œil plutôt que le cadenas. */
.tab.preview::after { content: ''; display: none; }

/* ---------- Verrous premium (quiz, score de discipline, …) ----------
   Le fond du VERROU est TRANSPARENT (demande utilisateur) : on voit le module
   verrouillé au travers, et seul un petit encadré « cadenas + Passer à Premium »
   reste lisible par-dessus. Le voile bloque tout de même les clics (z-index 20,
   inset 0) → le module reste visible mais INUTILISABLE. */
.prem-lock {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 16px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 10px;
}
.prem-lock.cover {
  position: absolute; inset: 0; z-index: 20; border-radius: 0;
  flex-direction: column; background: transparent; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.prem-lock-in {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; max-width: 340px;
}
.prem-lock-ico { font-size: 26px; line-height: 1; }
.prem-lock-txt { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.prem-lock .prem-lock-btn { white-space: nowrap; }
/* Emoji « Mode Quiz » de la barre du haut : réservé au Premium / à vie.
   Comptes free / test / invité → le bouton affiche un CADENAS et devient
   inactif (le clic propose l'offre Premium). L'emoji est neutralisé en CSS
   (font-size:0 + ::before) : il reste verrouillé même après un changement de
   langue, qui réécrirait normalement son contenu texte. */
#btnQuizTop.prem-locked {
  color: var(--muted); border-color: var(--border); border-style: dashed;
  font-size: 0; position: relative; cursor: not-allowed; opacity: .92;
}
#btnQuizTop.prem-locked::before {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-lock) center / contain no-repeat; mask: var(--i-lock) center / contain no-repeat;
}
#btnQuizTop.prem-locked:hover { border-color: var(--gold); color: var(--gold); }
.disc-sec-lock { padding: 10px; }
.quiz-area.locked .quiz-actions { visibility: hidden; }
/* ---------- Quiz RÉDUIT pour les comptes free / invité ----------
   Le quiz devient une simple barre d'upsell compacte : on masque le corps de
   questions (déjà verrouillé) pour libérer de la hauteur. La poignée d'ajuste-
   ment (#quizDrag) reste active → le trader peut réduire DAVANTAGE. */
body.quiz-locked #main { --quiz-h: 92px; }
.quiz-area.locked { min-height: 58px; }
.quiz-area.locked .quiz-head { margin-bottom: 4px; }
.quiz-area.locked .quiz-body { display: none; }
.quiz-area.locked .prem-lock.cover { padding: 8px 12px; }
.quiz-area.locked .prem-lock-in { flex-direction: row; gap: 9px; max-width: none; }
.quiz-area.locked .prem-lock-ico { font-size: 17px; }
.quiz-area.locked .prem-lock-txt { font-size: 11px; line-height: 1.25; text-align: left; }
.quiz-area.locked .prem-lock-btn { min-height: 30px; padding: 5px 12px; font-size: 11.5px; }
.tab-online { margin-left: auto; font-size: 10.5px; color: var(--green); white-space: nowrap; padding-right: 4px; }

/* bannière Passer à Premium (onglet Compte) */
.premium-cta { margin-bottom: 14px; }
.premium-cta-inner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,215,0,.04));
  border: 1px solid var(--gold); border-radius: 8px; padding: 12px 14px;
}
.premium-ico { font-size: 26px; }
.premium-txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.premium-txt b { color: var(--gold); font-size: 13.5px; letter-spacing: .4px; }
.premium-txt span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ============================================================
   PANNEAUX D'ONGLETS (fermables)
   ============================================================ */
.tabpanel {
  display: none;
  position: fixed; inset: 0; z-index: 30;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  flex-direction: column;
}
.tabpanel.open { display: flex; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: transparent;
  border-bottom: var(--glass-border);
}
.panel-head h2 { font-size: 15px; color: var(--gold); letter-spacing: .5px; }
.close-panel {
  cursor: pointer; color: var(--muted); font-size: 18px; padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.02);
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.close-panel:hover { color: var(--gold); border-color: var(--gold); }
.panel-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; padding: 14px 16px 30px; max-width: 900px; width: 100%; margin: 0 auto; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; touch-action: pan-y; }
/* Défilement vertical à droite, fin et pro, sur TOUS les appareils : les
   barres sont toujours du côté droit, tactiles et visibles au survol. */
/* `.lead` retiré (ÉTAPE 3) : il est en overflow:hidden (il ne défile pas), mais
   scrollbar-gutter lui réservait quand même 8px vides à droite.
   `#tarifsBody` et `.legal-inner` ajoutés : ils défilent eux aussi. */
.panel-body, .popup-box, .chat-log, .tos-inner, .quiz-text,
#tarifsBody, #panel-legal .legal-inner {
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* Défilement fluide. Volontairement PAS sur #orderbook ni .quiz-text :
   le JS y recentre le prix par `scrollTop = …` à chaque tick. */
.panel-body, .popup-box, .tos-inner, #tarifsBody, #panel-legal .legal-inner { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .panel-body, .popup-box, .tos-inner, #tarifsBody, #panel-legal .legal-inner { scroll-behavior: auto; }
}
/* La page d'un onglet est ENTIÈRE : la zone des messages transmet le geste au
   panneau (fini le doigt coincé dans la boîte une fois arrivé en bas ou en
   haut — molette et tactile chaînent avec le reste de la page). */
#panel-chat .chat-log { overscroll-behavior-y: auto; }
/* Enfants flex à défilement : sans min-height:0, un contenu haut ÉTIRE l'enfant
   au lieu de le faire défiler — le panneau semblait alors « bloqué ». */
.panel-body, .quiz-text, .chat-log, .lead, #orderbook, .tos-inner { min-height: 0; min-width: 0; }
/* BARRE DE DÉFILEMENT UNIQUE (ÉTAPE 3) : 6px, pouce arrondi translucide,
   piste invisible, or au survol. */
:is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
    #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap)::-webkit-scrollbar {
  width: var(--sb-w); height: var(--sb-w);
}
:is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
    #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap)::-webkit-scrollbar-track,
:is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
    #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap)::-webkit-scrollbar-corner {
  background: transparent;
}
:is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
    #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap)::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 999px;
}
:is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
    #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap)::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hi);
}
/* Firefox (moteurs sans ::-webkit-scrollbar) : fin + couleur du pouce. */
@supports not selector(::-webkit-scrollbar) {
  :is(.panel-body, .popup-box, .chat-log, .tos-inner, #tarifsBody, #panel-legal .legal-inner,
      #orderbook, .chat-preview .cp-log, .chat-mini .cm-log, .an-tablewrap, .tf-tablewrap) {
    scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent;
  }
}
/* Boutons MOUS (feedback instantané) : suppression du délai tactile + flash
   visuel dès l'appui pour FLAT, acheter, vendre et tous les boutons. */
.btn, .tbtn, .login-btn, .ltab, .sub-tab, .ch-btn, .choice, .ctrl-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:enabled, .tbtn:active:enabled, .login-btn:active:enabled,
.ltab:active, .sub-tab:active, .ch-btn:active {
  transform: scale(.97);
  filter: brightness(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .tbtn:active, .login-btn:active { transform: none; }
}
.panel-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.panel-desc b { color: var(--text); }
.lead-title { color: var(--gold); font-size: 13px; letter-spacing: .6px; margin: 22px 0 10px; }

/* conditions d'utilisation & mentions légales */
.legal-body { max-width: 760px; }
.legal-inner h3 { color: var(--gold); font-size: 13.5px; letter-spacing: .4px; margin: 20px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.legal-inner p { font-size: 13px; line-height: 1.65; color: var(--text); margin-bottom: 10px; }
.legal-inner a { color: var(--gold); }
.legal-contact { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

/* journal de bord — cartes de leçon */
.lesson-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--panel2); border-left: 3px solid var(--gold); }
.lesson-card.win { border-left-color: var(--green); }
.lesson-card.loss { border-left-color: var(--red); }
.lc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lc-type { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 3px 9px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border); }
.lc-type.long { color: var(--green); border-color: var(--green); }
.lc-type.short { color: var(--red); border-color: var(--red); }
.lc-pnl { font-size: 15px; font-weight: 800; margin-left: auto; }
.lc-pnl.buy { color: var(--green); }
.lc-pnl.sell { color: var(--red); }
.lc-when { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 0 8px; }
.lc-keep { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.lc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-bottom: 4px; }
.lc-m { display: flex; flex-direction: column; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 6px; text-align: center; min-width: 0; }
.lc-m small { display: block; font-size: 9px; letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.lc-m b { font-size: 13px; color: var(--text); white-space: nowrap; }
/* Pastilles triangle : POINTE = SENS DE L'ORDRE (idem gagnant/perdant)
   · ▲ achat (pointe en haut) · ▼ vente (pointe en bas)
   COULEUR = SENS DE L'ORDRE : .tri-buy (ACHAT) = bleu · .tri-sell (VENTE) = rouge
   → long : entrée bleue ▲ / sortie rouge ▼ · short : entrée rouge ▼ / sortie bleue ▲.
   (voir renderJournal : forme choisie par `isShort`, jamais par le pnl). */
.tri { display: inline-block; font-size: 10px; line-height: 1; margin-right: 4px; vertical-align: 1px; }
.tri-up { color: var(--blue); }
.tri-down { color: var(--red); }
.tri.tri-buy { color: var(--blue); }
.tri.tri-sell { color: var(--red); }
/* Analyse d’entrée · leçon · à améliorer : UNE SEULE mise en forme pour les
   trois blocs — le libellé AU-DESSUS (display:block), le texte EN DESSOUS.
   AVANT, `.lc-entry` n'avait AUCUNE règle : le libellé « Analyse d’entrée »
   était donc un `<small>` EN LIGNE, collé au texte (« Analyse d’entréeEntrée
   LONG au-dessus du prix… ») et illisible sur mobile. */
.lc-entry, .lc-lesson, .lc-improve { font-size: 12.5px; line-height: 1.5; margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--bg); }
.lc-entry small, .lc-lesson small, .lc-improve small { display: block; font-size: 9px; letter-spacing: .5px; color: var(--muted); margin-bottom: 3px; font-weight: 700; }
.lc-lesson small { color: var(--gold); }
.lc-improve small { color: var(--cyan); }
.lc-entry span, .lc-lesson span, .lc-improve span { display: block; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .lc-metrics { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px; }
  .lc-m { padding: 4px 6px; }
  .lc-m b { font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .lc-entry, .lc-lesson, .lc-improve { font-size: 12px; padding: 6px 9px; }
  .lc-when { font-size: 10.5px; padding: 0 6px; white-space: normal; }
  .lc-head { flex-wrap: wrap; gap: 4px 8px; }
  .lc-pnl { font-size: 14px; }
}

/* sous-onglets (daily / weekly / monthly) */
.sub-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sub-tab {
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 16px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.sub-tab.active { background: rgba(255,215,0,.1); border-color: var(--gold); color: var(--gold); }
.comp-register {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 12.5px;
}

/* classements */
.lead { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ephem-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--green); background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.28); border-radius: 999px;
  padding: 4px 12px; margin: 0 0 8px;
}
.lead-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid rgba(27,39,64,.5);
  font-size: 12.5px;
}
.lead-row:last-child { border-bottom: 0; }
.lead-row.me { background: rgba(255,215,0,.07); }
/* MA POSITION dans chaque classement : encadrement fin doré, sobre et pro.
   `outline` (pas `border`) : aucun décalage du tableau, juste ma ligne. */
.lead-row.me, .lead-row.self, .duel-row.me, .drc-row.me, .dp-row.me {
  outline: 1px solid rgba(255,215,0,.55); outline-offset: -1px; border-radius: 6px;
}
/* ma propre ligne dans le classement éphémère */
.lead-row.self { background: rgba(52,211,153,.08); }
.lead-row .you { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; }
/* pastille « joueurs en direct » (barre du haut) — ouvre le panneau Compte */
.ephem-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--green); background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.32);
}
.ephem-chip[hidden] { display: none; }
.ephem-chip:hover { background: rgba(52,211,153,.22); }
.lead-row .rk { width: 34px; text-align: center; font-size: 15px; }
.lead-row .nm { flex: 1; min-width: 48px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-row .sub { color: var(--muted); font-size: 10px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row .vl { font-family: var(--mono); font-weight: 700; }
.lead-row .vl.buy { color: var(--green); }
.lead-row .vl.sell { color: var(--red); }
.lead-row .st2 { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
.lead-row .st2.buy { color: var(--green); background: rgba(52,211,153,.12); }
.lead-row .st2.sell { color: var(--red); background: rgba(248,113,113,.12); }

/* ÉVOLUTION DU JOUR (classements des compétitions) : petit écart de performance
   de la journée, à côté du score de la période — lisible au premier coup d'œil. */
.lead-row .dt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.05); color: var(--muted);
}
.lead-row .dt.up { color: var(--green); background: rgba(52,211,153,.12); }
.lead-row .dt.dn { color: var(--red); background: rgba(248,113,113,.12); }
.lead-row .dt small { font-weight: 600; opacity: .75; font-size: 9px; }
/* Liste des inscrits (pastilles) : montrer d'un coup d'œil qu'il y a du monde. */
.comp-registered { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.comp-registered .who {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px;
}
.comp-registered .who.prem { border-color: rgba(255,215,0,.32); }
.comp-registered .who.me { border-color: var(--gold); color: var(--gold); }
.comp-registered .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
/* Bandeau « visible par tous / inscription réservée aux abonnés ».
   `display:block` (et NON flex) : le texte contient des <b> — en flex, chacun
   deviendrait une colonne séparée et le texte se tasserait à la verticale. */
.comp-preview-note {
  display: block; font-size: 11.5px; line-height: 1.45;
  color: var(--gold); background: rgba(255,215,0,.07);
  border: 1px dashed rgba(255,215,0,.35); border-radius: 8px;
  padding: 8px 12px; margin: 0 0 12px;
}
/* Mobile : ces éléments (pastilles, badge du jour, bandeau d'aperçu) doivent
   rester lisibles et sans débordement sur 390 px. */
@media (max-width: 520px) {
  .comp-preview-note { font-size: 10.5px; padding: 7px 10px; }
  .comp-registered { gap: 5px; }
  .comp-registered .who { font-size: 10.5px; padding: 3px 8px; }
  .comp-registered .lbl { font-size: 9px; }
  .lead-row .dt { font-size: 9.5px; padding: 2px 5px; }
}
/* ---------- BADGE PREMIUM (comptes payants) ----------
   Même famille visuelle que les pastilles du jeu (bord fin, léger halo), mais
   volontairement DORÉE et unique par trader : la teinte `--pb` est calculée à
   partir du pseudo (voir premiumBadge() dans ui.js). Discret en hauteur pour ne
   pas casser l'alignement des lignes de classement — y compris sur mobile. */
.prem-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  padding: 1px 6px 1px 4px; border-radius: 7px; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: .55px; line-height: 1.5;
  white-space: nowrap;
  color: #ffe9b0;
  background: linear-gradient(135deg, hsl(var(--pb, 42) 70% 20%), hsl(calc(var(--pb, 42) + 24) 76% 32%));
  border: 1px solid hsl(var(--pb, 42) 82% 60% / .7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .32), 0 1px 6px hsl(var(--pb, 42) 80% 45% / .42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.prem-badge .pb-c { width: 10.5px; height: 8px; flex: 0 0 auto; fill: hsl(var(--pb, 42) 90% 68%); }
body.theme-light .prem-badge {
  color: #4a2c00;
  background: linear-gradient(135deg, hsl(var(--pb, 42) 88% 87%), hsl(calc(var(--pb, 42) + 24) 86% 76%));
  border-color: hsl(var(--pb, 42) 68% 46%);
  box-shadow: 0 1px 4px hsl(var(--pb, 42) 70% 40% / .28);
  text-shadow: none;
}
body.theme-light .prem-badge .pb-c { fill: hsl(var(--pb, 42) 72% 40%); }
@media (max-width: 720px) {
  .prem-badge { font-size: 8px; padding: 1px 5px 1px 3px; margin-left: 5px; }
  .prem-badge .pb-c { width: 9.5px; height: 7px; }
}
.empty { color: var(--muted); font-size: 12.5px; padding: 18px; text-align: center; }

/* ============================================================
   CHALLENGES PROPFIRM
   ============================================================ */
.chal-card {
  background: var(--panel); border: 1px solid var(--gold);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(255,215,0,.06);
}
.chal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.chal-status { font-size: 11px; padding: 3px 10px; border-radius: 12px; background: rgba(52,211,153,.12); color: var(--green); }
.chal-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cm { background: var(--head-bg2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
.cm small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 3px; }
.cm b { font-size: 13px; font-family: var(--mono); }
.cm b.buy { color: var(--green); }
.cm b.sell { color: var(--red); }
.prog { height: 8px; background: var(--head-bg2); border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 5px; transition: width .5s ease; }
.prog-fill.red { background: linear-gradient(90deg, var(--red), #f59e0b); }
.chal-status.sell { background: rgba(248,113,113,.12); color: var(--red); }
.chal-prog-label { font-size: 11px; color: var(--muted); margin: 8px 0 12px; font-family: var(--mono); }
.firms { display: flex; flex-direction: column; gap: 12px; }
.firm { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.firm-head { font-size: 13px; margin-bottom: 8px; }
.firm-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.firm-size { width: 132px; line-height: 1.3; font-size: 12px; }
.firm-size small { display: block; color: var(--muted); font-size: 9.5px; margin-top: 3px; }

/* ============================================================
   FORMATION
   ============================================================ */
.lesson { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.lesson-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  padding: 12px 14px; font-size: 13px; font-weight: 600; text-align: left;
}
.lesson-head:hover { color: var(--gold); }
.chev { color: var(--muted); font-size: 12px; transition: transform .2s ease; }
.lesson-body { display: none; padding: 2px 14px 14px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.lesson-body.open { display: block; animation: loginin .2s ease; }
.lesson-body p { margin-bottom: 6px; }
.lesson-body b { color: var(--gold); }
.lesson-svg { position: relative; max-width: 620px; margin: 6px 0 10px; }
.diag { width: 100%; max-width: 620px; height: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--head-bg2); display: block; }
/* Écrans étroits : les graphiques composites (carnet + chart) restent
   lisibles — on les rend défilables horizontalement plutôt que minuscules. */
@media (max-width: 620px) {
  .lesson-svg, .lesson-imgs .diag-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lesson-svg svg.diag, .lesson-imgs .diag-svg svg.diag { min-width: 560px; }
  .lesson-svg::-webkit-scrollbar, .lesson-imgs .diag-svg::-webkit-scrollbar { height: 6px; }
  .lesson-svg::-webkit-scrollbar-thumb, .lesson-imgs .diag-svg::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
}

/* ============================================================
   QUIZ FUTURES
   ============================================================ */
.fquiz-q { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; line-height: 1.45; }
.fquiz-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.fquiz-opt { text-align: left; padding: 9px 12px; font-size: 12.5px; }
.fquiz-opt.ok { border-color: var(--green); color: var(--green); background: rgba(52,211,153,.1); }
.fquiz-opt.ko { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.1); }
.fquiz-opt:disabled { opacity: .7; }
.fquiz-fb { font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.fquiz-stats { font-size: 12px; color: var(--muted); }
.fquiz-stats b { color: var(--gold); }

/* ============================================================
   CHAT LIVE
   ============================================================ */
.chat-body { display: flex; flex-direction: column; max-width: 760px; }
.chat-warn {
  background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35);
  color: #fca5a5; font-size: 11.5px; padding: 8px 12px; border-radius: 6px;
  margin-bottom: 10px; line-height: 1.45;
}
.chat-log {
  flex: 1 0 auto; min-height: 220px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
/* Saisie TOUJOURS visible en bas de la page du chat : elle colle au bas pendant
   que les messages défilent avec la page (une seule barre, tout à droite). */
#panel-chat .chat-input-row { position: sticky; bottom: 0; z-index: 2; background: var(--panel); border-top: 1px solid var(--border); margin: 12px -4px 0; padding: 10px 4px 6px; }
.chat-msg { display: flex; gap: 8px; align-items: baseline; background: rgba(255,255,255,.02); padding: 5px 9px; border-radius: 6px; }
.chat-msg.mine { background: rgba(255,215,0,.06); }
.chat-name { color: var(--gold); font-size: 11px; font-weight: 700; white-space: nowrap; }
.chat-text { color: var(--text); font-size: 12.5px; word-break: break-word; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row input { flex: 1; width: auto; }
.chat-channels { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.ch-btn {
  flex: 1; min-width: 120px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); opacity: .6; transition: all .15s;
}
.ch-btn:hover { opacity: .9; }
.ch-btn.on { opacity: 1; border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.08); }
.theme-light .ch-btn.on { background: rgba(255,165,0,.12); }

/* ============================================================
   RESPONSIVE SUPPLÉMENTAIRE
   ============================================================ */
@media (max-width: 720px) {
  #ticker { height: 24px; }
  .tick-item { font-size: 9.5px; padding: 0 22px; }
  /* barre d'onglets : entièrement gérée par la section « 6.2 » (une ligne défilable) */
  .tabpanel { position: fixed; }
  .panel-body { padding: 12px 12px 24px; }
  .brand-logo { height: 24px; }
  .lead-row { font-size: 12px; padding: 8px 10px; }
  .login-card { padding: 24px 18px 18px; }
  .login-title { font-size: 18px; }
  .firm-size { width: 100%; }
  .chal-metrics { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   HISTOGRAMME DE VOLUME DANS LE CARNET (barres verticales)
   Bid = vert depuis la gauche · Ask = rouge depuis la droite
   ============================================================ */
/* ---------- HISTOGRAMME DU CARNET (étape 4) ----------
   Style Binance / TradingView : barres PLATES, derrière le texte.
   BID : barre depuis le bord GAUCHE, texte à gauche.
   ASK : barre depuis le bord DROIT, texte à droite. */
.ob-row .c-bid, .ob-row .c-ask {
  position: relative;
  isolation: isolate;
}
.ob-row .c-bid { text-align: left;  padding-left: 4px; }
.ob-row .c-ask { text-align: right; padding-right: 4px; }

.ob-row .c-bid .vbar, .ob-row .c-ask .vbar {
  position: absolute; top: 1px; bottom: 1px; left: 0; width: 100%;
  z-index: -1;
  display: block; pointer-events: none;
  opacity: var(--vol-alpha);
  transform: scaleX(var(--v, 1));
  transition: transform .18s ease-out;
  will-change: transform;
}
.ob-row .c-bid .vbar { background: var(--vol-bid); transform-origin: left center; }
.ob-row .c-ask .vbar { background: var(--vol-ask); transform-origin: right center; left: auto; right: 0; }

/* Ligne « chaude » (gros ordre) : barre un peu plus marquée */
.ob-row .c-bid.hot .vbar, .ob-row .c-ask.hot .vbar { opacity: .32; }

@media (prefers-reduced-motion: reduce) {
  .ob-row .c-bid .vbar, .ob-row .c-ask .vbar { transition: none; }
}

/* ============================================================
   COULEURS DES PRIX (repères POC / support / résistance / HVN / LVN)
   ============================================================ */
/* Couleurs par PRIORITÉ (la règle la plus tardive gagne à spécificité égale) :
   cur > poc > sup/res > hvn > lvn  — un prix peut cumuler plusieurs classes
   (ex. support ET zone HVN) ; on veut que le repère le plus fort l'emporte. */
.ob-row .c-price.lvn { color: var(--lvn); font-weight: 500; }
.ob-row .c-price.hvn { color: var(--hvn); font-weight: 600; }
.ob-row .c-price.sup:not(.poc):not(.cur) { color: var(--green); font-weight: 700; text-shadow: 0 0 8px rgba(52,211,153,.55); }
.ob-row .c-price.res:not(.poc):not(.cur) { color: var(--red); font-weight: 700; text-shadow: 0 0 8px rgba(248,113,113,.55); }
.ob-row .c-price.poc { color: var(--gold); font-weight: 800; background: rgba(234,179,8,.16); }
.ob-row .c-price.cur { color: var(--gold); font-weight: 800; }
.ob-row .c-price.cur.poc { background: rgba(234,179,8,.28); }
body.theme-light .ob-row .c-price.poc { background: rgba(184,134,11,.16); }
body.theme-light .ob-row .c-price.sup:not(.poc):not(.cur), body.theme-light .ob-row .c-price.res:not(.poc):not(.cur) { text-shadow: none; }
body.theme-light .ob-row .c-price.sup:not(.poc):not(.cur) { color: var(--green); font-weight: 800; }
body.theme-light .ob-row .c-price.res:not(.poc):not(.cur) { color: var(--red); font-weight: 800; }
body.theme-light .ob-row .c-price.hvn { color: #0369a1; font-weight: 600; }
body.theme-light .ob-row .c-price.lvn { color: #5b6b85; font-weight: 500; }   /* ≈5,0:1 (ÉTAPE 8) */

/* badge ordre en attente (⏳) dans la colonne Lots */
.ob-row .c-lots .pend {
  display: inline-block; background: rgba(255,215,0,.14); border: 1px solid var(--gold);
  border-radius: 3px; padding: 0 3px; font-size: 9px; color: var(--gold); font-weight: 700;
}

/* ============================================================
   AGRANDISSEURS (plein écran / hauteur augmentée)
   ============================================================ */
#orderbook-panel.maxed {
  position: fixed; inset: 0; z-index: 35;
  width: 100vw; height: 100vh; min-width: 0; border: 0; background: var(--panel);
}
#chart-panel.maxed {
  position: fixed; inset: 0; z-index: 35;
  width: 100vw; height: 100vh; min-width: 0; background: var(--panel);
}
.quiz-area.maxed {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  background: var(--panel); border-top: 1px solid var(--border);
  padding: 12px 16px 18px; max-height: 58vh; overflow: auto;
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.quiz-area.maxed #question-text { font-size: 17px; }
.quiz-area.maxed #feedback-text { font-size: 15.5px; }
.quiz-area.maxed #explain-text { font-size: 15px; }

/* ============================================================
   THÈME CLAIR — détails supplémentaires
   ============================================================ */
body.theme-light .ob-row.side-bid { background: linear-gradient(90deg, rgba(10,143,92,.10), rgba(10,143,92,.02) 70%); }
body.theme-light .ob-row.side-ask { background: linear-gradient(90deg, rgba(214,51,60,.10), rgba(214,51,60,.02) 70%); }
body.theme-light .ob-row.cur-row { background: linear-gradient(90deg, rgba(184,134,11,.12), rgba(184,134,11,.04)); box-shadow: inset 0 0 0 1px rgba(184,134,11,.4); }
body.theme-light .ob-row .c-bid.hot { background: rgba(10,143,92,.13); }
body.theme-light .ob-row .c-ask.hot { background: rgba(214,51,60,.13); }
/* supprimées (ÉTAPE 4) : les couleurs du thème clair passent par --vol-bid / --vol-ask */
body.theme-light .ob-row.cur-row { background: linear-gradient(90deg, rgba(184,134,11,.24), rgba(184,134,11,.05)); box-shadow: inset 0 0 0 1px rgba(184,134,11,.55); }
body.theme-light .ob-row .c-price.poc { background: rgba(184,134,11,.14); }
body.theme-light .login-card { background: linear-gradient(180deg, #f2f5fb, #e9eef7); border: 1px solid var(--border); }
body.theme-light .login-title { color: #1c2b47; }
body.theme-light .login-card input { background: #ffffff; border: 1px solid var(--border); color: var(--text); }
body.theme-light .login-loader { background: rgba(238,241,247,.86); color: var(--gold); }
body.theme-light .login-loader .spinner { border-color: rgba(184,134,11,.2); border-top-color: var(--gold); }
body.theme-light #login-screen { background: radial-gradient(1200px 600px at 70% -10%, rgba(37,99,235,.08), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(184,134,11,.06), transparent 60%), #eef1f7; }
body.theme-light .brand-name { color: #1c2b47; }
/* supprimée (ÉTAPE 1) : body.theme-light .toast — gérée par --glass-bg */
/* supprimée (ÉTAPE 1) : body.theme-light .popup — le voile passe par --glass-scrim */
body.theme-light .tbtn { background: var(--panel2); }
body.theme-light .fquiz-opt:disabled { opacity: .6; }
body.theme-light .ob-row .c-tp .tp { color: var(--cyan); }
body.theme-light .chat-warn { color: var(--red); }
body.theme-light .live-badge.on { border-color: var(--green); color: var(--green); }
body.theme-light .ticker-track { }
.theme-light #setup-box { background: rgba(255,255,255,.72); border-color: var(--red); }

/* ============================================================
   OUTILS DU GRAPHIQUE (zoom / trait / texte / structure / suivi)
   ============================================================ */
.chart-tools { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.chart-tools .tbtn { padding: 2px 7px; font-size: 11px; white-space: nowrap; }
/* Outils de DESSIN (tendance, prolongée, horizontale, canal, cercle, texte,
   suppression) : même gabarit que les boutons déjà présents dans le graphique.
   Sur grand écran la ligne d'outils passe à la ligne plutôt que d'écraser le
   titre ; sur téléphone elle reste sur une seule ligne défilable. */
.chart-tools { flex-wrap: wrap; row-gap: 3px; }
.chart-tools .tbtn.on { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.14); }
@media (max-width: 720px) {
  .chart-tools { flex-wrap: nowrap; row-gap: 0; }
}
#chart-title .ct-title { flex: 1 1 auto; }
@media (max-width: 1300px) {
  .ct-title { font-size: 9px; }
  .chart-tools .tbtn { padding: 2px 5px; font-size: 10px; }
}

/* ============================================================
   ÉCRAN DE FIN DE FORMATION (quiz — 6 niveaux terminés)
   ============================================================ */
.quiz-done-title { font-size: 17px; font-weight: 800; letter-spacing: .5px; margin: 2px 0 6px; }
.quiz-done-score { font-size: 15px; margin: 8px 0; font-family: var(--mono); color: var(--cyan); }
.quiz-done-score b { color: var(--gold); }
.quiz-done-line { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 3px 0; }
.quiz-done-line b { color: var(--text); }

/* ============================================================
   ONGLET PRÉPARATION DE JOURNÉE
   ============================================================ */
.prep-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.prep-sec h3 { font-size: 13.5px; color: var(--gold); letter-spacing: .4px; margin-bottom: 8px; }
.prep-sec h3 .ico { margin-right: 6px; }
.prep-sec p, .prep-sec li { font-size: 12.5px; line-height: 1.6; color: var(--text); margin-bottom: 6px; }
.prep-sec b { color: var(--gold); }
.prep-sec ul { padding-left: 20px; }
.prep-note { border-left: 3px solid var(--gold); background: rgba(255,215,0,.05); padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 12px; margin: 8px 0; }
.cal-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cal-row { display: grid; grid-template-columns: 46px 26px 58px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 10px; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }
.cal-row.cal-today { border-color: var(--gold); background: rgba(255,215,0,.07); }
.cal-date { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.cal-flag { font-size: 15px; text-align: center; }
.cal-time { font-family: var(--mono); color: var(--gold); font-weight: 700; white-space: nowrap; }
.cal-name { overflow: hidden; text-overflow: ellipsis; }
.cal-name .d-today { color: var(--gold); }
.cal-imp { font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 2px 7px; border-radius: 9px; background: rgba(255,255,255,.05); white-space: nowrap; }
.cal-kind { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.disc-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.disc-sec h3 { font-size: 13.5px; color: var(--gold); letter-spacing: .4px; margin-bottom: 8px; }
.disc-score { display: inline-flex; align-items: baseline; gap: 2px; border: 2px solid var(--green); border-radius: 10px; padding: 8px 18px; margin: 4px 0 10px; font-size: 30px; font-family: var(--mono); }
.disc-score span { font-size: 13px; color: var(--muted); }
.inf-row { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.inf-row:last-child { border-bottom: 0; }
.inf-time { font-family: var(--mono); color: var(--muted); }
.inf-txt { color: var(--red); }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 44px 24px auto 1fr auto; }
  .cal-kind { display: none; }
}
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; }
.kpi { background: var(--head-bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.kpi small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 4px; }
.kpi b { font-size: 13px; font-family: var(--mono); }
.cal-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cal-table th { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cal-table td { font-size: 12px; padding: 7px 8px; border-bottom: 1px solid rgba(27,39,64,.4); vertical-align: top; }
.cal-date { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.cal-today { background: rgba(255,215,0,.07); }
.cal-name { font-weight: 600; }
.imp { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.imp.high { background: rgba(248,113,113,.16); color: #f87171; border: 1px solid rgba(248,113,113,.5); }
.imp.mid { background: rgba(255,215,0,.12); color: var(--gold); border: 1px solid rgba(255,215,0,.4); }
.imp.low { background: rgba(52,211,153,.12); color: var(--green); border: 1px solid rgba(52,211,153,.4); }
.cal-fc { font-size: 11px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.cal-com { font-size: 11px; color: var(--muted); }

/* indicateurs économiques (interprétation) */
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.ind-card { background: var(--head-bg2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; }
.ind-card h4 { font-size: 12.5px; margin-bottom: 4px; }
.ind-card h4 small { color: var(--muted); font-weight: 400; font-size: 10px; }
.ind-card p { font-size: 11.5px; line-height: 1.55; color: var(--text); margin-bottom: 4px; }
.ind-card b { color: var(--cyan); }

/* ============================================================
   ONGLET DISCIPLINE & MENTAL
   ============================================================ */
.disc-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.disc-sec h3 { font-size: 13.5px; color: var(--gold); letter-spacing: .4px; margin-bottom: 8px; }
.disc-sec p, .disc-sec li { font-size: 12.5px; line-height: 1.6; color: var(--text); margin-bottom: 6px; }
.disc-sec b { color: var(--gold); }
.disc-sec ul { padding-left: 20px; }
.chk-list { list-style: none; padding: 0 !important; }
.chk-list li { padding: 4px 0 4px 24px; position: relative; }
.chk-list li::before { content: '☐'; position: absolute; left: 2px; color: var(--gold); font-size: 14px; top: 3px; }
.warn-box { border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.07); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 12px; line-height: 1.55; }
.warn-box b { color: var(--red); }
.good-box { border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.06); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 12px; line-height: 1.55; }
.good-box b { color: var(--green); }
.quote-box { border-left: 3px solid var(--cyan); background: rgba(34,211,238,.05); padding: 8px 12px; font-style: italic; color: var(--cyan); font-size: 12px; margin: 8px 0; }
.rule-chip { display: inline-block; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 14px; padding: 3px 12px; font-size: 11px; margin: 2px 3px 2px 0; color: var(--muted); }
.rule-chip.on { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   THÈME CLAIR — l'écran de connexion reste TOUJOURS sombre
   (le choix du fond blanc ne s'applique qu'à l'application)
   ============================================================ */
body.theme-light #login-screen {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,215,0,.06), transparent 60%),
    #05080f;
}
body.theme-light #login-screen .login-card {
  background: linear-gradient(180deg, #101b33, #0c1424);
  border: 1px solid #1b2740;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(34,211,238,.05);
}
body.theme-light #login-screen .login-title { color: #ffffff; }
body.theme-light #login-screen .login-sub { color: #7d8aa3; }
body.theme-light #login-screen .login-card input {
  background: #0a101f; border: 1px solid #1b2740; color: #e8edf7;
}
body.theme-light #login-screen .lang-btn { color: #7d8aa3; border-color: #1b2740; }
body.theme-light #login-screen .lang-btn.on {
  color: #0a0a12; background: linear-gradient(180deg, #ffd700, #e6b800); border-color: #ffd700;
  box-shadow: 0 2px 10px rgba(255,215,0,.3);
}
body.theme-light #login-screen .login-btn {
  background: linear-gradient(180deg, #ffd700, #e6b800); color: #0a0a12;
  box-shadow: 0 4px 18px rgba(255,215,0,.25);
}
body.theme-light #login-screen .login-loader { background: rgba(5,8,16,.82); color: var(--gold); }
body.theme-light #login-screen .spinner { border-color: rgba(255,215,0,.2); border-top-color: var(--gold); }
body.theme-light #login-screen .login-err { color: #f87171; }

/* ============================================================
   IMAGES DE COURS (captures réelles & schémas pédagogiques)
   ============================================================ */
.lesson-imgs { margin-top: 8px; }
.lesson-imgs .diag-svg { position: relative; max-width: 620px; }
.lesson-imgs img.diag-img {
  width: 100%; max-width: 620px; display: block;
  border: 1px solid var(--border); border-radius: 8px;
  margin: 8px 0 2px; background: var(--head-bg2);
}
.lesson-imgs .diag-svg svg.diag {
  width: 100%; max-width: 620px; display: block;
  border: 1px solid var(--border); border-radius: 8px;
  margin: 8px 0 2px; height: auto;
}
.img-cap { font-size: 10.5px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; font-style: italic; }

/* ============================================================
   GLOSSAIRE (dictionnaire du trader)
   ============================================================ */
.gloss { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--border); }
.gloss-title { font-size: 14.5px; color: var(--gold); letter-spacing: .4px; margin-bottom: 4px; }
.gloss-intro { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.gloss-input {
  width: 100%; max-width: 460px; box-sizing: border-box;
  background: var(--head-bg2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 12.5px;
  margin-bottom: 12px; outline: none;
}
.gloss-input:focus { border-color: var(--gold); }
.gloss-cat { margin-bottom: 12px; }
.gloss-cat-t { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 5px; }
.gloss-item { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(27,39,64,.35); align-items: baseline; }
.gloss-term { flex: 0 0 150px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--gold); }
.gloss-def { flex: 1 1 auto; font-size: 11.5px; line-height: 1.5; color: var(--text); }

/* ============================================================
   QUIZ FUTURES — écran de fin de série
   ============================================================ */
.fquiz-done { text-align: center; padding: 18px 10px; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 10px; }
.fd-icon { font-size: 30px; }
.fd-title { font-size: 14.5px; font-weight: 800; margin: 6px 0; color: var(--gold); line-height: 1.5; }
.fd-sub { font-size: 12px; color: var(--muted); font-family: var(--mono); margin-bottom: 12px; }

/* ============================================================
   NEWS FLOW — chiffre éco + discours (en bas du graphique, à part)
   Apparaît UNIQUEMENT pendant les fenêtres de news ; discret,
   compact, réduisible (–) et fermable (✕) avec bouton de réouverture.
   ============================================================ */
#newsflow {
  flex: 0 0 auto;
  display: none;
  flex-direction: column; gap: 4px;
  padding: 5px 8px;
  background: var(--head-bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
#newsflow.show { display: flex; }

/* ---- barre du « chiffre économique » (réel vs prévision + BON/MAUVAIS) ---- */
.nf-figure {
  display: none;
  align-items: baseline; gap: 8px;
  font-size: 11px; line-height: 1.35;
  border-left: 3px solid var(--gold);
  background: var(--panel2);
  border-radius: 4px;
  padding: 4px 9px;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nf-figure.show { display: flex; flex-wrap: wrap; }
.nf-figure.good { border-left-color: var(--green); }
.nf-figure.bad { border-left-color: var(--red); }
.nf-figure.neutral { border-left-color: var(--gold); }
.nf-figure .nf-name { color: var(--text); font-weight: 700; }
.nf-figure .nf-nums { font-family: var(--mono); font-weight: 700; color: var(--gold); }
.nf-figure .nf-verdict { font-weight: 800; white-space: nowrap; }
.nf-figure.good .nf-verdict { color: var(--green); }
.nf-figure.bad .nf-verdict { color: var(--red); }
.nf-figure.neutral .nf-verdict { color: var(--gold); }
.nf-figure .nf-why { color: var(--muted); }

/* ---- barre du « discours » (marquee défilant) ---- */
.nf-disc {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.nf-tag {
  flex: 0 0 auto;
  font-size: 8.5px; font-weight: 800; letter-spacing: .6px;
  color: #ffb3b3; border: 1px solid var(--red); border-radius: 3px;
  padding: 1px 5px;
  animation: newsPulse 1.4s ease-in-out infinite;
  user-select: none;
}
.nf-min-hint { display: none; font-size: 10px; color: var(--muted); }
.nf-track {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.nf-track-inner {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.nf-line { font-size: 10.5px; color: var(--muted); padding-right: 38px; }
.nf-line b { color: var(--text); font-weight: 600; }
@keyframes nfTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nf-btn {
  flex: 0 0 auto;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 3px; padding: 1px 8px; font-size: 11px; cursor: pointer; line-height: 1.5;
}
.nf-btn:hover { color: var(--gold); border-color: var(--gold); }

/* ---- état réduit (minimisé) : une seule ligne discrète ---- */
#newsflow.min { padding: 2px 8px; }
#newsflow.min .nf-figure { display: none !important; }
#newsflow.min .nf-tag { display: none; }
#newsflow.min .nf-track { display: none; }
#newsflow.min .nf-min-hint { display: inline; flex: 1 1 auto; }

/* ---- bouton flottant de réouverture (quand le flux est fermé) ---- */
.nf-open {
  position: absolute; right: 8px; bottom: 60px; z-index: 8;
  background: var(--panel2); border: 1px solid var(--gold); color: var(--gold);
  border-radius: 5px; padding: 3px 9px; font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); line-height: 1.4;
}
.nf-open:hover { background: rgba(255,215,0,.1); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  #newsflow { padding: 4px 6px; }
  .nf-figure { font-size: 10.5px; padding: 3px 7px; }
  .nf-line { font-size: 10px; padding-right: 26px; }
  .nf-open { bottom: 8px; right: 6px; }
}
@media (max-width: 720px) {
  .nf-figure .nf-why { display: none; }
  .nf-tag { font-size: 8px; }
  .nf-btn { padding: 3px 10px; font-size: 12px; }
}

/* ============================================================
   ============================================================
   PARTIE 6 — REFONTE MOBILE PROFESSIONNELLE + PERFORMANCE TACTILE
   ============================================================
   Objectifs : interface épurée sur 320–428 px, cibles tactiles
   ≥ 44×44 px, suppression du délai de 300 ms, pas de zoom
   double-tap, pas de débordement horizontal, rendus accélérés.
   ============================================================ */

/* ---------- 6.0 BASE TACTILE (toutes tailles) ----------
   touch-action: manipulation supprime le délai de 300 ms et le zoom
   double-tap. Le surlignage bleu et la sélection de texte sont coupés.
   user-select: none UNIQUEMENT sur l'interactif (pas sur le texte lisible). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, .tab, .tbtn, .btn, .close-panel, .sub-tab, .ch-btn, .foot-btn,
.lang-btn, .nf-btn, .s-toggle, .ord-x, .closer, #tf-selector button,
.quiz-head .tbtn, .mini-tools .tbtn, .fquiz-opt, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
/* les champs de saisie restent sélectionnables */
input, textarea, [contenteditable] {
  -webkit-user-select: text; user-select: text;
}

/* ---------- 6.1 TOP BAR COMPACTE (mobile) ----------
   Le NOM « MARKET PLAYER PRO » a sa PROPRE LIGNE pleine largeur : il ne peut
   plus être écrasé, tronqué ni recouvert par le prix, le pourcentage ou la
   pastille de phase (« Accumulation » / « Manipulation » / « Distribution »).
   Le prix (+ variation + phase) occupe ensuite une ligne centrée, puis la barre
   d'outils son défilement horizontal. Polices resserrées → rendu pro au pouce. */
@media (max-width: 720px) {
  #topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "price" "tools";
    align-items: center;
    gap: 2px 8px;
    padding: 5px 10px calc(5px + env(safe-area-inset-top, 0px));
  }
  .brand { grid-area: brand; width: 100%; gap: 6px; min-width: 0; }
  .brand-logo { height: 20px; }
  .brand-name {
    font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* prix + variation + phase sur UNE ligne, centrés, sous le nom */
  .pricebox {
    grid-area: price; margin: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 2px 6px; text-align: center;
  }
  #hdrPrice { font-size: 18px; text-shadow: none; }
  #hdrChange { font-size: 11px; margin-left: 0; }
  .pricebox #hdrPhase { margin-top: 0; }
  /* barre d'outils : cibles 42 px, défilable horizontalement (pouce) */
  .topright {
    grid-area: tools;
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    padding-bottom: 2px;
  }
  .topright::-webkit-scrollbar { display: none; }
  .topright .tbtn {
    flex: 0 0 auto;
    min-width: 42px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-size: 16px; border-radius: 8px;
  }
  .live-badge, .rank-badge { flex: 0 0 auto; }
  .live-badge { padding: 4px 8px; min-height: 30px; }
  .live-badge #liveText { display: none; }
  .rank-badge { padding: 4px 9px; font-size: 10.5px; min-height: 30px; display: flex; flex-direction: column; justify-content: center; }
  .rank-badge small { display: none; }
}

/* ---------- 6.2 BARRE D'ONGLETS — UNE LIGNE, DÉFILABLE, 44 px ---------- */
@media (max-width: 1080px) {
  #tabbar {
    position: sticky; top: 0; z-index: 24;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    padding: 6px 10px;
    gap: 6px;
    background: var(--head-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
  }
  #tabbar::-webkit-scrollbar { display: none; }
  /* Défileur PROFESSIONNEL : deux voiles dégradés épinglés aux bords (collants
     dans le conteneur de défilement), affichés UNIQUEMENT quand il reste du
     contenu de ce côté (classes .can-l / .can-r posées en JS). Ils signalent
     clairement que la barre défile, sans masquer l'onglet actif. */
  #tabbar::before, #tabbar::after {
    content: ''; position: sticky; top: 0; align-self: stretch;
    flex: 0 0 30px; width: 30px; pointer-events: none; z-index: 5;
    display: none; box-sizing: border-box;
  }
  #tabbar::before {
    left: 0; margin-right: -30px;
    background: linear-gradient(90deg, var(--head-bg) 42%, transparent);
  }
  #tabbar::after {
    right: 0; margin-left: -30px;
    background: linear-gradient(270deg, var(--head-bg) 42%, transparent);
  }
  #tabbar.can-l::before, #tabbar.can-r::after { display: block; }
  #tabbar .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 42px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 13px;
    font-size: 12.5px; border-radius: 8px;
    transition: color .14s, background .14s, box-shadow .14s;
  }
  #tabbar .tab:active { background: rgba(255,255,255,.05); }
  #tabbar .tab.active {
    background: rgba(255,215,0,.12);
    box-shadow: inset 0 -2px 0 var(--gold);
  }
  #tabbar .tab-online {
    flex: 0 0 auto; margin-left: 4px; align-self: center;
    font-size: 10px; padding: 0 6px;
  }
}
@media (max-width: 720px) {
  #tabbar .tab { min-height: 44px; padding: 9px 14px; font-size: 12px; }
  #tabbar .t-ico { display: inline; font-size: 15px; }
  #tabbar .t-long { display: none; }
}

/* ---------- 6.3 GRILLE MOBILE : carnet 44vh → quiz → graphique 44vh ---------- */
@media (max-width: 1080px) {
  body { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; }
  #app { height: auto; min-height: 100dvh; }
  /* 721–1080 px (tablettes) : la barre d'outils prend sa propre ligne. Sans ça
     elle débordait de ~50 px et coupait les derniers boutons (aide, déconnexion). */
  #topbar { flex-wrap: wrap; row-gap: 6px; }
  .topright { flex: 1 1 100%; min-width: 0; }
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "book" "quiz" "qres" "chart";
    overflow: visible; flex: none;
  }
  #orderbook-panel {
    height: 48vh; min-height: 340px;
    border-right: 0; border-bottom: 1px solid var(--border); min-width: 0;
    contain: layout style paint;
  }
  #chart-panel {
    height: auto; min-height: 0; min-width: 0;
    contain: layout style paint;
  }
  /* Le graphique reçoit une VRAIE hauteur sur mobile (le canvas prend toute la
     place de #chartWrap) : assez de bougies lisibles, et les miniatures se
     contentent du reste au lieu d'écraser le graphique. */
  #chartWrap { flex: 0 0 auto; height: 34vh; min-height: 240px; }
  .quiz-area { contain: layout style paint; }
  /* barre d'action collée en bas → toujours au pouce */
  #bottombar {
    position: sticky; bottom: 0; z-index: 24;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 22px rgba(0,0,0,.30);
  }
  #bottombar .ctl { justify-content: center; flex-wrap: wrap; }
  #orders-display { width: 100%; text-align: center; }
  /* champs et boutons de la barre du bas : 44 px de haut */
  #bottombar input[type=number] { min-height: 44px; font-size: 15px; width: 84px; }
  #bottombar .btn { min-height: 44px; padding: 10px 16px; font-size: 13.5px; }
  .resizer-v { display: none; }
  .pricebox { margin: 0; }
}

/* ---------- 6.4 CARNET D'ORDRES : lisibilité + cible ✕ ---------- */
@media (max-width: 720px) {
  #ob-head, .ob-row { grid-template-columns: 40px 42px 58px 42px 0.92fr 1fr 70px; }
  #ob-head { font-size: 8px; padding: 4px var(--ob-sb, 9px) 4px 0; letter-spacing: .2px; }
  .ob-row { font-size: 11px; }
  /* manipulation (et non pan-y) → pas de zoom double-tap, le défilement reste permis */
  #orderbook { touch-action: manipulation; -webkit-overflow-scrolling: touch; }
  .ob-row .c-lots .ord-x,
  .ob-row .c-tp .ord-x {
    width: 22px; height: 20px; font-size: 12px; border-radius: 4px;
  }
  /* zone tactile élargie à ~44 px sans agrandir le bouton visuel */
  .ob-row .c-lots .ord-x::before,
  .ob-row .c-tp .ord-x::before { left: -11px; right: -11px; top: -12px; bottom: -12px; }
  #ob-foot { padding: 4px 8px; gap: 3px 8px; }
  #ob-foot #obFootHint, #ob-foot .vp-note { display: none; }
  #ob-foot .foot-btn { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 11px; border-radius: 8px; }
}

/* ---------- 6.5 QUIZ : boutons confortables, scroll fluide ---------- */
@media (max-width: 720px) {
  .quiz-area { padding: 8px 10px 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .quiz-head .tbtn { min-height: 44px; min-width: 44px; padding: 4px 10px; }
  /* poignée TEXTE / BOUTONS : cible tactile confortable au doigt */
  .quiz-split { height: 20px; }
  .quiz-split::after { top: 8px; width: 68px; height: 3px; opacity: .38; }
  #question-text { font-size: 14.5px; }
  #feedback-text { font-size: 14px; }
  #explain-text { font-size: 13.5px; }
  .rep-row input[type=text] { min-height: 42px; font-size: 16px; width: 100%; }
  .rep-row { flex-wrap: wrap; }
  .rep-row .btn { min-height: 44px; }
  .quiz-actions { gap: 8px; }
  .quiz-actions .btn { flex: 1 1 auto; min-height: 46px; min-width: 92px; font-size: 13px; padding: 10px 12px; }
}

/* ---------- 6.6 PANNEAUX PLEIN ÉCRAN + ✕ 44 px ---------- */
@media (max-width: 1080px) {
  /* PAS de `contain: layout` sur les panneaux : sur mobile il désynchronise
     le défilement tactile du panneau (bloqué après un aller en bas). */
  .panel-head { padding: 8px 12px; position: sticky; top: 0; z-index: 2; background: var(--glass-bg); }
  .panel-head h2 { font-size: 13.5px; line-height: 1.25; }
  .close-panel {
    flex: 0 0 auto;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; padding: 0; border-radius: 10px;
  }
  .panel-body { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .lead-row { font-size: 12px; padding: 10px 12px; }
  .sub-tab { min-height: 44px; padding: 10px 16px; }
  /* supprimée (ÉTAPE 2) : la hauteur passe par --btn-h (40px web / 44px tactile) */
  .ch-btn { min-height: 44px; }
  .chat-log { min-height: 180px; }
  .chat-input-row input { min-height: 44px; font-size: 15px; }
  .chat-input-row .btn { min-height: 44px; padding: 0 16px; }
}
@media (max-width: 720px) {
  .chal-metrics { grid-template-columns: 1fr 1fr; }
  .firm-size { width: 100%; }
  .cal-row { grid-template-columns: 44px 24px auto 1fr auto; }
  .cal-kind { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
  .gloss-term { flex-basis: 118px; }
  .gloss-item { flex-wrap: wrap; }
}

/* ---------- 6.7 TRÈS PETITS ÉCRANS (≤ 428 px) ---------- */
@media (max-width: 428px) {
  #hdrPrice { font-size: 18px; }
  .brand-name { font-size: 12px; }
  /* onglets d'accès : libellés sur UNE ligne (sinon « Se connecter » se coupe) */
  .login-tabs { gap: 4px; }
  .login-tabs .ltab { flex: 1 1 auto; padding: 10px 6px; font-size: 11px; letter-spacing: 0; }
  .login-tabs .ltab svg { width: 12px; height: 12px; }
  #tabbar { padding: 5px 8px; gap: 5px; }
  #tabbar .tab { padding: 9px 11px; font-size: 11.5px; }
  #ob-head, .ob-row { grid-template-columns: 36px 38px 54px 38px 0.85fr 1fr 70px; }
  .ob-row { font-size: 12px; }
  .quiz-actions .btn { min-width: 78px; font-size: 12px; }
  .stats { gap: 10px; }
  .stats .st b { font-size: 14px; }
  .stats .st small { font-size: 8.5px; }
  .panel-body { padding: 10px 10px calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .brand-name { font-size: 11px; }
  #hdrPrice { font-size: 16px; }
  #tabbar .tab { padding: 8px 10px; font-size: 11px; }
  #ob-head, .ob-row { grid-template-columns: 32px 36px 50px 36px 0.8fr 1fr 66px; }
}

/* ---------- 6.7b BARRE D'OUTILS DU GRAPHIQUE + TIMEFRAMES (cibles 44 px) ---------- */
@media (max-width: 1080px) {
  #chart-title { padding: 4px 8px; gap: 6px; }
  .chart-tools .tbtn { padding: 2px 6px; font-size: 11px; }
  #tf-selector { gap: 4px; }
  #tf-selector button { min-height: 38px; min-width: 40px; font-size: 12px; }
}
@media (max-width: 720px) {
  /* la ligne d'outils devient défilable horizontalement : jamais de débordement */
  #chart-title {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    touch-action: pan-x; flex-wrap: nowrap;
  }
  #chart-title::-webkit-scrollbar { display: none; }
  #chart-title .ct-title { display: none; }   /* titre redondant sur petit écran */
  #chart-title .tbtn, .chart-tools .tbtn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 8px; font-size: 15px; border-radius: 8px; flex: 0 0 auto;
  }
  #tf-selector button { min-height: 44px; min-width: 44px; font-size: 13px; }
  .nf-btn { min-width: 44px; min-height: 44px; font-size: 16px; }
}

/* ---------- 6.7c ÉCRAN DE CONNEXION (cibles 44 px) ---------- */
@media (max-width: 720px) {
  .lang-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .login-btn { min-height: 48px; }
  .login-card input[type=text], .login-card input[type=password] { min-height: 44px; }
}

/* ---------- 6.8 PERFORMANCE — animations GPU, pas de blur mobile ---------- */
.ticker-track, .nf-track-inner { will-change: transform; transform: translate3d(0,0,0); }
#toasts { transform: translate3d(0,0,0); }
.toast { will-change: transform, opacity; }
@media (max-width: 1080px) {
  #setup-box { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,18,28,.88); }
  body.theme-light #setup-box { background: rgba(255,255,255,.94); }
  /* Petits écrans : pas de flou (coût GPU) — on se contente d'un fond bien plus
     léger quand le panneau recouvre des bougies, texte toujours lisible. */
  #setup-box.s-overlap { background: rgba(10,13,22,.30); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.theme-light #setup-box.s-overlap { background: rgba(255,255,255,.42); }
  .toast { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
}
/* sur un appareil tactile, pas d'états :hover fantômes */
@media (hover: none) {
  .tbtn:hover, .btn:hover, .tab:hover, .foot-btn:hover, .close-panel:hover {
    border-color: var(--border); color: inherit;
  }
  .tab:hover { background: transparent; }
}
/* accessibilité : respecte « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .nf-track-inner, #newsBadge, .tab-online, .dot-live { animation: none !important; }
}

/* ============================================================
   7. CORRECTIONS & AJOUTS (TP/SL multiples · lots/flat dans le carnet ·
      PNL plus visible · widget chat · mode bêta · accès test/invité)
   ============================================================ */

/* --- ✕ de retrait sur CHAQUE ordre du carnet (entrée en attente, TP, SL) --- */
.ob-row .c-lots .ord-del,
.ob-row .c-tp .ord-del {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin: 0 0 0 1px;
  font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1;
  color: var(--red); background: rgba(248,113,113,.16);
  border: 1px solid var(--red); border-radius: 3px;
  cursor: pointer; vertical-align: middle;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .12s, color .12s;
}
.ob-row .c-lots .ord-del::before,
.ob-row .c-tp .ord-del::before {
  content: ''; position: absolute; left: -11px; right: -11px; top: -12px; bottom: -12px;
}
.ob-row .c-lots .ord-del:hover, .ob-row .c-lots .ord-del:active,
.ob-row .c-tp .ord-del:hover, .ob-row .c-tp .ord-del:active { background: var(--red); color: #fff; }
.ob-row .c-lots .pend, .ob-row .c-tp .tp, .ob-row .c-tp .sl { display: inline-flex; align-items: center; }

/* --- PNL : mêmes tailles que les autres colonnes (proportion demandée) --- */
.ob-row .c-pnl { font-weight: 800; letter-spacing: -.2px; }
.ob-row .c-pnl-p { color: #2ea87c; }
.ob-row .c-pnl-n { color: #d95f5f; }
/* Fond BLANC : vert/rouge PROFESSIONNELS (moins saturés, plus sobres) — le
   thème sombre garde exactement ses couleurs actuelles. */
body.theme-light .ob-row .c-pnl-p { color: #0d7a4a; }
body.theme-light .ob-row .c-pnl-n { color: #b3242c; }

/* --- LOTS / FLAT / SUIVRE / AGRANDIR : dans la ligne de légende du carnet --- */
#ob-foot .ob-trade-ctl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#ob-foot .ob-trade-ctl label { font-size: 10px; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
#ob-foot .ob-trade-ctl input[type=number] {
  width: 56px; height: 30px; padding: 0 6px; text-align: center;
  font-family: var(--mono); font-size: 13px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
}
#ob-foot .ob-trade-ctl input[type=number]:focus { outline: none; border-color: var(--gold); }
/* Boutons de prise de position : compacts et pro (hauteur 32 px) */
#ob-foot .ob-trade-ctl .btn { padding: 6px 12px; font-size: 12px; min-height: 32px; border-radius: 6px; }
/* boutons MARCHÉ : achat / vente immédiats au prix du cours selon les lots */
#ob-foot .ob-trade-ctl .mkt-btn { font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
#ob-foot .ob-trade-ctl .mkt-btn.buy { background: rgba(46,168,124,.16); border-color: #2ea87c; color: #3fc394; }
#ob-foot .ob-trade-ctl .mkt-btn.sell { background: rgba(217,95,95,.16); border-color: #d95f5f; color: #e57f7f; }
#ob-foot .ob-trade-ctl .mkt-btn.buy:hover { border-color: #3fc394; background: rgba(46,168,124,.26); }
#ob-foot .ob-trade-ctl .mkt-btn.sell:hover { border-color: #e57f7f; background: rgba(217,95,95,.26); }
body.theme-light #ob-foot .ob-trade-ctl .mkt-btn.buy { border-color: #0d7a4a; color: #0d7a4a; background: rgba(13,122,74,.10); }
body.theme-light #ob-foot .ob-trade-ctl .mkt-btn.sell { border-color: #b3242c; color: #b3242c; background: rgba(179,36,44,.10); }
#ob-foot #orders-display { font-family: var(--mono); font-size: 10.5px; color: var(--gold); white-space: nowrap; }
#ob-foot .ob-foot-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* NIV / SOLDE / SCORE / SÉRIE / DISCIPLINE / CLASS : écrits dans la légende du
   carnet, juste à GAUCHE du bouton Suivre (demande utilisateur). */
#ob-foot .ob-stats { display: inline-flex; align-items: center; gap: 9px; }
#ob-foot .ob-stats .st { align-items: center; line-height: 1.15; }
#ob-foot .ob-stats .st b { font-size: 13px; }
#ob-foot .ob-stats .st small { font-size: 8.5px; letter-spacing: .4px; }
#ob-foot .ob-legend-open { cursor: pointer; }
/* AIDE TACTILE : masquée sur ordinateur (la légende souris s'en charge),
   affichée sur téléphone (voir section MOBILE) — indique les gestes du doigt :
   prendre position, placer TP/SL, poser un Stop. */
#ob-foot .ob-touch-note { display: none; }

/* --- ACCÈS : onglets [Se connecter] / [Test gratuit] / [Invité] --- */
.login-tabs { display: flex; gap: 2px; margin: 14px 0 8px; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.login-tabs .ltab {
  flex: 1 1 0; min-width: 0; padding: 10px 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--muted);
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 0; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.login-tabs .ltab svg {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9;
}
.login-tabs .ltab:hover { color: var(--text); background: transparent; }
.login-tabs .ltab.on {
  color: var(--gold); border-bottom-color: var(--gold); background: transparent;
}
.auth-pane { display: flex; flex-direction: column; gap: 8px; }
.auth-pane[hidden] { display: none !important; }
.auth-note {
  font-size: 11.5px; color: var(--muted); text-align: center;
  background: rgba(255,215,0,.06); border: 1px solid rgba(255,215,0,.18);
  border-radius: 8px; padding: 7px 10px;
}
.auth-note.warn { color: #f0c674; background: rgba(255,140,0,.08); border-color: rgba(255,140,0,.25); }
.auth-note.small { font-size: 10.5px; line-height: 1.45; padding: 6px 9px; }
.auth-err { min-height: 14px; font-size: 12px; color: #f87171; text-align: center; }
.auth-err.ok { color: #34d399; }
.auth-guest-name { font-size: 13px; color: var(--muted); text-align: center; }
.auth-guest-name b { color: var(--gold); font-family: var(--mono); }
.tos-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; text-align: left; }
.tos-inline { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; }
.tos-inline:hover { color: var(--text); }
.tos-check .tos-inline { pointer-events: auto; }
.tos-check input { width: 18px; height: 18px; accent-color: var(--gold); flex: 0 0 auto; }
.link-btn {
  background: none; border: none; color: var(--gold); font-size: 11.5px;
  text-decoration: underline; cursor: pointer; padding: 2px;
}
.link-btn.small { font-size: 10.5px; opacity: .85; }
.link-btn.small:hover { opacity: 1; }
/* --- MOT DE PASSE OUBLIÉ (encadré discret sous le formulaire de connexion) --- */
.forgot-box {
  display: flex; flex-direction: column; gap: 7px; margin-top: 4px;
  padding: 9px 10px; border-radius: 9px; text-align: left;
  background: rgba(96,165,250,.07); border: 1px solid rgba(96,165,250,.22);
}
.forgot-box[hidden] { display: none; }
.forgot-title { font-size: 11.5px; font-weight: 700; color: var(--blue, #60a5fa); text-align: center; }
.forgot-box input[type=email] { width: 100%; }
.login-btn.small { padding: 8px 10px; font-size: 12.5px; }
/* --- FENÊTRE « NOUVEAU MOT DE PASSE » (lien reçu par e-mail) --- */
.reset-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,14,.88); padding: 16px; overflow-y: auto;
}
.reset-overlay[hidden] { display: none; }
.reset-overlay .login-card { max-width: 420px; width: 100%; }
.reset-overlay .auth-note { font-size: 12px; }
body.theme-light .forgot-box { background: #eff6ff; border-color: #bfdbfe; }

/* --- ENCADRÉ « VERSION BÊTA » (ToS uniquement) --- */
.tos-beta {
  border-left: 3px solid var(--gold);
  background: rgba(255,215,0,.09);
  padding: 9px 12px; margin: 0 0 12px; border-radius: 0 8px 8px 0;
  font-size: 12.5px; line-height: 1.5;
}
.tos-beta p { margin: 0 0 8px; }
.tos-beta p:last-child { margin-bottom: 0; }
body.theme-light .tos-beta { background: #fffbe6; color: #6b5b00; }

/* --- Toast avec bouton d'action (ex : « Synchroniser » hors-ligne) --- */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-action {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #05080f; background: var(--gold); border: none;
}
.toast-action:hover { filter: brightness(1.08); }

/* ============================================================
   7bis. WIDGET CHAT FLOTTANT (rond déplaçable + bannière + mini chat)
   ============================================================ */
.chat-fab {
  position: fixed; right: 14px; bottom: 96px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: grab; user-select: none; touch-action: none;
  background: radial-gradient(circle at 30% 25%, #2a3550, #121a2b);
  border: 1.5px solid var(--gold);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,215,0,.15);
  transition: transform .12s, box-shadow .12s;
}
.chat-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 2px rgba(255,215,0,.28); }
.chat-fab.dragging { cursor: grabbing; transform: scale(1.04); }
/* Cible tactile élargie (invisible) : le rond se saisit sans viser au pixel. */
.chat-fab::before { content: ''; position: absolute; inset: -16px; }
.chat-fab .fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.chat-preview {
  position: fixed; z-index: 59; width: 280px; max-width: calc(100vw - 16px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden;
}
.chat-preview[hidden] { display: none; }
.chat-preview .cp-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--head-bg); border-bottom: 1px solid var(--border);
  cursor: grab; touch-action: none;
}
.chat-preview.dragging .cp-head, .chat-mini.dragging .cm-head { cursor: grabbing; }
.chat-preview .cp-title { font-size: 11.5px; font-weight: 700; color: var(--gold); letter-spacing: .5px; }
.chat-preview .cp-bell, .chat-mini .cm-bell {
  margin-left: auto; background: none; border: none; cursor: pointer; font-size: 14px; opacity: .5;
}
.chat-preview .cp-bell.on, .chat-mini .cm-bell.on { opacity: 1; }
.chat-preview .cp-close {
  background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0 2px;
}
.chat-preview .cp-log { max-height: 104px; overflow-y: auto; padding: 6px 10px; }
.chat-preview .cp-close { position: absolute; top: 5px; right: 6px; }
.chat-preview .cp-head { padding-right: 26px; }
.chat-mini {
  position: fixed; z-index: 61; width: 320px; max-width: calc(100vw - 16px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55); overflow: hidden; display: flex; flex-direction: column;
}
.chat-mini[hidden] { display: none; }
.chat-mini .cm-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--head-bg); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--gold);
}
.chat-mini .cm-close { margin-left: 4px; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.chat-mini .cm-channels { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.chat-mini .cm-ch {
  flex: 1; padding: 5px 6px; font-size: 11.5px; cursor: pointer; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
}
.chat-mini .cm-ch.on { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.08); }
.chat-mini .cm-log { flex: 1 1 auto; min-height: 160px; max-height: 300px; overflow-y: auto; padding: 8px 10px; }
.chat-mini .cm-input { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.chat-mini .cm-input input {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; font-size: 13px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.chat-mini .cm-input .btn { min-height: 34px; padding: 0 12px; }
.cw-msg { margin: 3px 0; font-size: 12.5px; line-height: 1.35; }
.cw-msg.mine { text-align: right; }
.cw-name { color: var(--gold); font-weight: 700; margin-right: 6px; }
.cw-msg.mine .cw-name { color: #7dd3fc; }
.cw-text { color: var(--text); word-break: break-word; }
.cw-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
body.theme-light .chat-fab { background: radial-gradient(circle at 30% 25%, #ffffff, #e8edf6); }
/* supprimée (ÉTAPE 1) : le thème clair est géré par les variables --glass-* */
/* icônes SVG du widget (chat, cloche, envoi) — rendu pro, homogène */
.chat-fab .fab-ico {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.chat-preview .cw-ico, .chat-mini .cw-ico {
  width: 14px; height: 14px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cp-bell-ico { display: inline-flex; align-items: center; }
.cp-bell-ico svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cp-bell-ico .ico-bell-off { display: none; }
.cp-bell:not(.on) .ico-bell, .cm-bell:not(.on) .ico-bell { display: none; }
.cp-bell:not(.on) .ico-bell-off, .cm-bell:not(.on) .ico-bell-off { display: block; }
.send-ico {
  width: 16px; height: 16px; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   8. MOBILE — CARNET LISIBLE AU DOIGT (haute lisibilité iPhone/Android)
   Objectif : des lignes HAUTES (~27 px), des chiffres GRANDS (14-16 px),
   des colonnes assez larges pour viser la bonne, et un ticket (achat/vente)
   compact MAIS avec de grosses cibles tactiles. Reprend la hiérarchie de la
   maquette mobile : LOTS · ACHAT · PRIX · VENTE · VOLUME · TP/SL · PNL.
   Les anciennes règles (≤720 / ≤428 / ≤360) sont surchargées ici.
   ============================================================ */
@media (max-width: 720px) {
  /* --- colonnes : LOTS | ACHAT | PRIX | VENTE | VOLUME | TP/SL | PNL ---
     PRIX = la plus large (chiffre en gras, encadré sur la ligne du cours),
     TP/SL confortable pour viser un prix de sortie. */
  #ob-head, .ob-row { grid-template-columns: 44px 46px 66px 46px 0.75fr 1fr 78px; }
  #ob-head { font-size: 9.5px; letter-spacing: 0; padding: 5px var(--ob-sb, 9px) 5px 0; }
  .ob-row { font-size: 12.5px; line-height: 1.15; }
  .ob-row .c-price { font-size: 13.5px; font-weight: 800; }
  .ob-row .c-pnl { font-size: 13px; }
  .ob-row .c-vol b { font-size: 10.5px; }
  .ob-row .c-tp { font-size: 11.5px; }
  .ob-row .c-lots .pend { font-size: 10.5px; }
  /* ✕ de retrait par ordre : plus grand et zone tactile 44 px au doigt */
  .ob-row .c-lots .ord-x,
  .ob-row .c-tp .ord-x { width: 26px; height: 24px; font-size: 14px; border-radius: 5px; }
  .ob-row .c-lots .ord-x::before,
  .ob-row .c-tp .ord-x::before { left: -9px; right: -9px; top: -10px; bottom: -10px; }
  .ob-row .c-lots .ord-del,
  .ob-row .c-tp .ord-del { width: 22px; height: 22px; font-size: 13px; border-radius: 5px; }
  .ob-row .c-lots .ord-del::before,
  .ob-row .c-tp .ord-del::before { left: -9px; right: -9px; top: -9px; bottom: -9px; }

  /* --- ticket du carnet : compact en hauteur, tailles PRO (v4 mobile) -------
     Constat : le ticket mangeait ~255 px de haut et poussait les gros boutons
     du carnet hors écran. On aplatit les deux groupes (.ob-trade-ctl et
     .ob-foot-right) avec `display: contents` pour réordonner librement :
       rangée 1 = ACHAT / VENTE MARCHÉ (deux boutons égaux)
       rangée 2 = LOTS [n] · FLAT · SUIVRE · AGRANDIR  (Agrandir à droite de FLAT)
       rangée 3 = ordres en attente · rangée 4 = stats · rangée 5 = aide tactile */
  #ob-foot { font-size: 11px; gap: 4px 6px; padding: 4px 8px; }
  #ob-foot .ob-legend-open { display: none; }
  #ob-foot .ob-trade-ctl,
  #ob-foot .ob-foot-right { display: contents; }
  #ob-foot .ob-trade-ctl .btn { min-height: 32px; padding: 4px 9px; font-size: 11.5px; border-radius: 6px; }
  #ob-foot .ob-trade-ctl .mkt-btn { order: 1; flex: 1 1 46%; min-height: 34px; font-size: 12.5px; padding: 4px 8px; }
  #ob-foot .ob-trade-ctl label { order: 2; flex: 0 0 auto; font-size: 10px; }
  #ob-foot .ob-trade-ctl input[type=number] { order: 3; flex: 0 0 auto; width: 52px; height: 32px; font-size: 15px; font-weight: 700; padding: 0 4px; }
  #ob-foot #btnFlat { order: 4; }
  #ob-foot #btnFollow { order: 5; }
  #ob-foot #btnMaxBook { order: 6; }
  #ob-foot .foot-btn { min-height: 32px; min-width: 0; padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }
  #ob-foot #orders-display { order: 7; flex: 1 1 100%; font-size: 11px; }
  #ob-foot .ob-stats { order: 8; flex: 1 1 100%; gap: 7px 12px; flex-wrap: wrap; }
  #ob-foot .ob-stats .st b { font-size: 12.5px; }
  #ob-foot .ob-stats .st small { font-size: 8px; }
  /* AIDE TACTILE (mobile) : 3 lignes courtes, lisibles mais discrètes. */
  #ob-foot .ob-touch-note {
    order: 9; display: block; flex: 1 1 100%; width: 100%;
    font-size: 10px; line-height: 1.34; color: var(--text); opacity: .92;
    padding: 3px 0 1px; border-top: 1px dashed var(--border);
  }
  #ob-foot .ob-touch-note .otn-line { display: block; }
  #ob-foot .ob-touch-note b { color: var(--gold); font-weight: 700; }
  .stats .st b { font-size: 15.5px; }
  .stats .st small { font-size: 10px; }
  .mini-label { font-size: 10px; letter-spacing: .4px; }
  .mini-note { font-size: 9.5px; top: 18px; }
  .tick-item { font-size: 10.5px; }
  .chat-fab { width: 56px; height: 56px; font-size: 25px; }
}
@media (max-width: 428px) {
  #ob-head, .ob-row { grid-template-columns: 42px 44px 64px 44px 0.72fr 1fr 76px; }
  #ob-head { font-size: 9px; }
  .ob-row { font-size: 12px; }
  .ob-row .c-price { font-size: 13px; }
  .ob-row .c-pnl { font-size: 12.5px; }
}
@media (max-width: 360px) {
  #ob-head, .ob-row { grid-template-columns: 40px 42px 60px 42px 0.7fr 1fr 72px; }
  #ob-head { font-size: 9px; }
  .ob-row { font-size: 11.5px; }
}

/* ============================================================
   9. MOBILE — INTERFACE FACILE À DÉPLACER (poignées tactiles)
   Poignées de redimensionnement plus larges et plus visibles,
   pour glisser carnet / quiz / miniatures au doigt sans rater la cible.
   ============================================================ */
@media (max-width: 720px) {
  .minis-drag { flex-basis: 18px; }
  .minis-drag::before { top: 7px; width: 64px; height: 4px; opacity: .65; }
  .quiz-drag { height: 18px; }
  .quiz-drag::after { top: 8px; height: 3px; opacity: .6; }
  /* bouton ⛶ des miniatures : cible tactile confortable au doigt */
  .mini-tools { right: 8px; top: 4px; }
  .mini-tools .tbtn { width: 34px; height: 30px; font-size: 16px; border-radius: 7px; }
  /* quiz VERROUILLÉ (free / invité) : barre compacte mais LISIBLE au doigt */
  .quiz-area.locked { min-height: 64px; }
  .quiz-area.locked .quiz-head { margin-bottom: 3px; }
  .quiz-area.locked .prem-lock.cover { padding: 9px 10px; }
  .quiz-area.locked .prem-lock-txt { font-size: 12.5px; }
  .quiz-area.locked .prem-lock-btn { min-height: 36px; padding: 6px 14px; font-size: 12px; }
  #chart-title .tbtn, .chart-tools .tbtn { font-size: 12px; }
}

/* ---------- 9.x MOBILE (téléphone) : le CARNET reçoit plus de hauteur ----------
   Constat mesuré à 390x844 : le carnet (48vh) ne laissait que ~161 px de zone
   de prix (7 niveaux à 23 px). On monte le panneau à 55vh/430px mini pour
   afficher ~9 niveaux à ~27 px : lecture du DOM confortable, grosses cibles
   tactiles conservées. Aucun impact au-delà de 720 px. */
@media (max-width: 720px) {
  /* v4 : +2vh et ticket bien plus compact → davantage de lignes de prix visibles. */
  #orderbook-panel { height: 57vh; min-height: 450px; }

  /* ---------- 9.y TIMEFRAMES DU GRAPHIQUE : plus jamais coupées ----------
     BUG MESURÉ : `#tf-selector` est positionnée en ABSOLU dans #chartWrap.
     La passe mobile avait agrandi ses 8 boutons à 44 px (cible tactile) SANS
     tenir compte de la largeur du téléphone : à 390 px elle mesurait 388 px
     (marge gauche 8 px → bord droit 396 px) donc le dernier bouton « 1d »
     sortait de l'écran, et à 360 px « 4h » + « 1d » étaient INATTEIGNABLES.
     Correctif : la barre est ancrée aux deux bords (left/right) et défile
     horizontalement si nécessaire — les 8 timeframes restent tous accessibles
     au doigt, cibles 44 px conservées. */
  #tf-selector {
    left: 6px; right: 6px; bottom: 6px; gap: 2px; padding: 2px;
    max-width: none;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  #tf-selector::-webkit-scrollbar { display: none; }
  #tf-selector button { flex: 0 0 auto; }

  /* En-tête du carnet : « VOLUME » était ROGNÉ sur téléphone (bord droit de la
     colonne 37 px alors que le mot en demande 43 px à 11 px). On resserre la
     police d'en-tête : tous les libellés (LOTS/ACHAT/PRIX/VENTE/VOLUME/TP-SL/PNL)
     tiennent désormais entièrement dans leur colonne. */
  #ob-head { font-size: 9px; letter-spacing: 0; }

  /* Bouton de repli du panneau « setup » (SMC) posé sur le graphique :
     sa cible était de 15x17 px (quasi intappable au doigt) → 32x32 px. */
  #setup-box .s-toggle { min-width: 32px; min-height: 32px; padding: 0 6px; font-size: 14px; }
}
/* Sur les téléphones étroits, les 8 timeframes partagent la largeur
   disponible (aucun défilement, aucun bouton hors écran). */
@media (max-width: 430px) {
  #tf-selector { gap: 1px; padding: 2px; }
  #tf-selector button { flex: 1 1 0; min-width: 0; padding: 3px 1px; font-size: 11px; }

  /* En-tête du carnet : la colonne VOLUME est en `fr`, elle rétrécit donc avec
     la largeur. Le libellé « VOLUME » (le plus long) était ROGNÉ sous ~385 px
     (colonne 30 px pour un mot de 32 px). On revient à la police 8 px déjà
     utilisée par la passe mobile ≤ 720 px, et on rend aux deux colonnes `fr`
     une largeur MINIMALE garantie (`minmax`) : VOLUME et TP/SL tiennent
     entièrement, sans jamais pouvoir être écrasés. Les colonnes fixes
     (Lots/Achat/Prix/Vente/PNL) gardent exactement la place de leur contenu
     mesuré (42,9 px max pour Achat/Vente ; 55,8 px max pour le PRIX). */
  #ob-head, .ob-row { grid-template-columns: 40px 44px 58px 44px minmax(33px, 1fr) minmax(30px, 1fr) 74px; }
  #ob-head { font-size: 8px; }
}

/* ============================================================
   9.z MOBILE (≤720 px) — TAILLES « PRO » (passe v4)
   Demande utilisatrice : sur mobile, TOUT était trop GROS (onglets haut/bas,
   boutons, box « niveaux du marché »). On réduit à une taille professionnelle
   — visible et lisible, mais pas énorme — tout en gardant des cibles
   tactiles confortables (≥30 px). Ces règles sont DANS un max-width:720px :
   le desktop (>720 px) reste strictement inchangé.
   ============================================================ */
@media (max-width: 720px) {
  /* Onglets du haut : 44 px → 34 px. */
  #tabbar { padding: 4px 8px; gap: 5px; }
  #tabbar .tab { min-height: 34px; padding: 6px 11px; font-size: 11.5px; gap: 4px; }
  #tabbar .t-ico { font-size: 13px; }
  #tabbar .tab-online { font-size: 9.5px; }

  /* Onglets timeframes (bas du graphique) : 44 px → 30 px. */
  #tf-selector button { min-height: 30px; min-width: 32px; font-size: 11px; padding: 3px 6px; }

  /* Outils du graphique (⛶, ±, indicateurs…) : 44 px → 34 px. */
  #chart-title { padding: 4px 8px; gap: 6px; }
  #chart-title .tbtn, .chart-tools .tbtn {
    min-width: 34px; min-height: 34px; padding: 0 7px; font-size: 14px; border-radius: 7px;
  }

  /* Box « 📊 NIVEAUX DU MARCHÉ » posée sur le graphique : plus discrète. */
  #setup-box { min-width: 144px; max-width: 246px; padding: 0 8px; font-size: 10px; line-height: 1.35; }
  #setup-box .s-head { padding: 4px 0; gap: 6px; }
  #setup-box .s-title { font-size: 9px; letter-spacing: .3px; }
  #setup-box .s-sub { font-size: 7.5px; }
  #setup-box .s-note, #setup-box .s-reason { font-size: 7.5px; }
  #setup-box .s-bias { font-size: 10px; }
  /* Bouton « pose automatique » ⟳ : cible tactile confortable (>30 px). */
  #setup-box .s-auto { min-width: 28px; min-height: 28px; font-size: 13px; padding: 0; }
}

/* ============================================================
   DÉFIS ENTRE TRADERS (traders éphémères) + rang en direct
   ============================================================ */

/* Pastille de rang du défi, placée AVANT « Suivi ON » (basculée en direct).
   Vert + point clignotant = voyant « partie en cours » (demande utilisateur). */
.rank-live {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--green); background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.45);
}
.rank-live[hidden] { display: none; }
.rank-live .rl-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 6px rgba(52,211,153,.9);
  animation: rlPulse 1.1s ease-in-out infinite;
}
@keyframes rlPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.rank-live.first { color: var(--green); background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.6); }
.rank-live.out { color: var(--red); background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.45); }
.rank-live.out .rl-dot { background: var(--red); box-shadow: 0 0 6px rgba(248,113,113,.9); }

/* Carte de configuration / suivi du défi — fond TRANSPARENT (le fond gris
   jurait sur le thème clair ; sur fond noir le module restait correct). */
.duel-box { border: 1px solid var(--border); border-radius: 9px; background: transparent; padding: 10px 12px; margin: 4px 0 14px; }
.duel-setup[hidden], .duel-live[hidden], .duel-search[hidden] { display: none; }
.dl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.dl-row > label { flex: 0 0 88px; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.dl-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.dl-opt {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 7px; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.dl-opt:hover { color: var(--text); border-color: rgba(255,215,0,.4); }
.dl-opt.on { color: #0b0e14; background: var(--gold); border-color: var(--gold); }
.dl-invite { display: flex; gap: 6px; flex: 1 1 auto; align-items: center; flex-wrap: wrap; }
.dl-invite input {
  flex: 1 1 150px; min-width: 120px; padding: 6px 10px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 12px;
}
.dl-invite input::placeholder { color: var(--muted); }
.duel-search { display: flex; align-items: center; gap: 9px; padding: 8px 2px; color: var(--muted); font-size: 12px; }
.duel-search .ds-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255,215,0,.3); border-top-color: var(--gold);
  animation: dsSpin .8s linear infinite;
}
@keyframes dsSpin { to { transform: rotate(360deg); } }
#btnDuelStart { width: 100%; margin-top: 4px; }
.duel-help { color: var(--muted); font-size: 10.5px; line-height: 1.5; margin-top: 8px; }

/* Défi en cours */
.duel-live-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.dl-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--red);
  background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.35);
  padding: 3px 8px; border-radius: 999px;
}
.dl-obj { font-size: 11.5px; font-weight: 600; }
.dl-timer { margin-left: auto; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--gold); }
.dl-rule { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.duel-rows { display: flex; flex-direction: column; gap: 3px; }
.duel-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px;
  background: rgba(255,255,255,.02); border: 1px solid transparent; font-size: 12px;
}
.duel-row.me { background: rgba(52,211,153,.09); border-color: rgba(52,211,153,.3); }
.duel-row.out { opacity: .5; }
.dr-rk { width: 28px; text-align: center; font-size: 13px; }
.dr-nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-met { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dr-pnl { font-family: var(--mono); font-weight: 700; }
.dr-pnl.p { color: var(--green); }
.dr-pnl.n { color: var(--red); }
.dr-out { color: var(--red); font-weight: 700; }

/* Historique « qui a battu qui » */
.duel-history { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.duel-hist-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 11.5px;
  color: var(--muted); border-bottom: 1px dashed rgba(27,39,64,.55);
}
.duel-hist-row:last-child { border-bottom: 0; }
.duel-hist-row .dh-t { font-family: var(--mono); flex: 0 0 42px; }
.duel-hist-row .dh-l { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-hist-row.win .dh-l { color: var(--green); }
.duel-hist-row.npc .dh-l { color: var(--muted); font-weight: 500; }
.duel-hist-row .dh-o { flex: 0 0 auto; font-size: 10.5px; }

/* Record de défis dans le classement éphémère */
.lead-row .ch-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  color: var(--cyan); background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.3);
  white-space: nowrap;
}
.lead-row .ch-tag.duel { color: var(--gold); background: rgba(255,215,0,.12); border-color: rgba(255,215,0,.38); }
.lead-row .ch-tag.live { animation: chPulse 1.7s ease-in-out infinite; }
@keyframes chPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Série de défis en cours : 🔥 victoires d'affilée / ❄️ défaites d'affilée. */
.lead-row .ch-streak {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  white-space: nowrap;
}
.lead-row .ch-streak.hot { color: #f59e0b; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.34); }
.lead-row .ch-streak.cold { color: #60a5fa; background: rgba(96,165,250,.14); border: 1px solid rgba(96,165,250,.34); }

/* Popup de fin de défi : compacte, professionnelle, auto-disparition */
.duel-popup {
  position: fixed; right: 16px; bottom: 18px; z-index: 70;
  width: min(330px, calc(100vw - 24px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 13px 14px 11px; overflow: hidden;
}
.duel-popup[hidden] { display: none; }
.duel-popup.win { border-color: rgba(52,211,153,.55); }
.duel-popup.lose { border-color: rgba(248,113,113,.45); }
.duel-popup .dp-bar { position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: var(--gold); }
.duel-popup.win .dp-bar { background: var(--green); }
.duel-popup .dp-close {
  position: absolute; top: 6px; right: 6px; padding: 3px 7px; border-radius: 6px;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 13px;
}
.duel-popup .dp-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.dp-head { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.duel-popup.win .dp-head { color: var(--green); }
.duel-popup.lose .dp-head { color: var(--red); }
.dp-sub { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.dp-rows { display: flex; flex-direction: column; gap: 3px; }
.dp-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dp-row .dp-rk { width: 20px; }
.dp-row .dp-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row .dp-vl { font-family: var(--mono); }
.dp-row .dp-vl.p { color: var(--green); }
.dp-row .dp-vl.n { color: var(--red); }
.dp-row.me .dp-nm { color: var(--gold); }
/* Détail « qui a réussi / échoué et pourquoi » dans la notification de fin */
.dp-dets { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 7px; }
.dp-det { display: flex; flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.4; }
.dp-det-n { font-weight: 700; color: var(--text); }
.dp-det.me .dp-det-n { color: var(--gold); }
.dp-det-w { color: var(--muted); }

/* Drapeaux : IMAGES réelles (les emoji drapeaux ne s'affichent pas sur Windows
   et certains Android, qui montrent deux lettres de pays à la place). */
.flag {
  display: inline-block; width: 17px; height: 12px; border-radius: 2px;
  vertical-align: -1px; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(148,163,184,.35);
}

/* Demande de défi entrante (trader réel → trader réel) */
.duel-invite-pop {
  position: fixed; right: 16px; top: 16px; z-index: 80;
  width: min(340px, calc(100vw - 24px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); border-radius: 11px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 13px 14px 12px;
  animation: dipIn .22s ease-out;
}
@keyframes dipIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.duel-invite-pop[hidden] { display: none; }
.dip-head { font-weight: 800; font-size: 13.5px; margin-bottom: 4px; color: var(--gold); }
.dip-line { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-bottom: 9px; }
.dip-line b { color: var(--text); }
.dip-actions { display: flex; gap: 7px; }
.dip-actions .btn { flex: 1 1 auto; }
.dip-wait { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.dip-wait .ds-spin {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255,215,0,.3); border-top-color: var(--gold);
  animation: dsSpin .8s linear infinite;
}

/* Récapitulatif détaillé d'un défi (dépliable dans l'historique) : qui a gagné
   POURQUOI, ce que chacun a bien/mal fait, et un conseil concret. */
.duel-hist-row { cursor: pointer; }
.duel-hist-row .dh-arrow { margin-left: auto; color: var(--muted); font-size: 10px; }
.duel-recap { margin: 2px 0 10px; padding: 9px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border); }
.duel-recap[hidden] { display: none; }
.drc-head { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .5px; }
.drc-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.drc-row:last-child { border-bottom: 0; }
.drc-rk { flex: 0 0 26px; text-align: center; font-weight: 700; }
.drc-body { flex: 1; min-width: 0; }
.drc-tit { font-size: 12px; font-weight: 700; }
.drc-metric { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.drc-why { font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
.drc-why.good { color: var(--green); }
.drc-why.bad { color: var(--red); }
.drc-advice { font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 3px; padding-top: 3px; }
.drc-entry { font-size: 11px; line-height: 1.5; color: var(--text); margin-top: 3px; }
.drc-avoid { font-size: 11px; line-height: 1.5; color: #f59e0b; margin-top: 3px; }
.drc-improve { font-size: 11px; line-height: 1.5; color: var(--cyan); margin-top: 3px; }
.drc-warn { font-size: 11px; line-height: 1.5; color: #fb923c; margin-top: 3px; }
.drc-ents { margin-top: 3px; }
.drc-ent { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 720px) {
  .dl-row > label { flex: 0 0 100%; margin-bottom: -3px; }
  .dl-opt { font-size: 12px; padding: 7px 12px; }
  .rank-live { font-size: 12px; padding: 5px 10px; min-height: 34px; }
  .duel-popup { left: 10px; right: 10px; bottom: 12px; width: auto; max-height: 58vh; overflow-y: auto; }
  .duel-invite-pop { left: 10px; right: 10px; top: 10px; width: auto; }
  .lead-row .ch-tag { font-size: 9.5px; padding: 2px 6px; }
}

/* ============================================================
   10. AJUSTEURS MOBILES (passe v5) — REDIMENSIONNER CHAQUE MODULE
   Demande utilisatrice : GARDER les boutons « ⛶ Agrandir » (agrandisseurs)
   ET AJOUTER des ajusteurs (poignées à glisser au doigt) pour le graphique
   principal, les miniatures, le quiz (Premium / à vie) et le carnet
   d'ordres — sur la version MOBILE uniquement.
   Ces règles sont TOUTES dans un `max-width:720px` (et neutralisées au-delà
   par un `min-width:721px`) : la version web (>720 px) reste STRICTEMENT
   inchangée.
   ============================================================ */

/* --- Poignée du CARNET D'ORDRES (MOBILE UNIQUEMENT). Demande de la créatrice :
       « ajoute un ajusteur en laissant l'agrandisseur sur le carnet d'ordre,
       uniquement sur version mobile pour l'ajusteur ». C'est le DERNIER enfant
       de #orderbook-panel (flex column) : la poignée est donc collée au bas du
       carnet, glisser vers le bas = carnet plus haut, et la hauteur réglée est
       mémorisée (`mpp_book_h`) pour la visite suivante. Le bouton « ⛶ Agrandir »
       du carnet reste EN PLACE (les deux commandes cohabitent) et AUCUNE règle
       n'est modifiée au-delà de 720 px : la version web est inchangée. --- */
.book-resize {
  display: none;
  position: relative; flex: 0 0 20px; height: 20px;
  cursor: row-resize; touch-action: none;
  background: var(--head-bg);
  border-top: 1px solid var(--border);
}
.book-resize::before {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 72px; height: 4px; border-radius: 2px; background: var(--green); opacity: .55;
}
.book-resize:hover::before, .book-resize.active::before { opacity: .95; }
body.resizing .book-resize { transition: none; }

/* --- Poignée du GRAPHIQUE PRINCIPAL : sous le canvas, glisser bas = plus haut.
       C'est elle qui règle le bug « au fond du range (cassure de niveau /
       volume profile) la dernière bougie et le repère de cours disparaissent
       sous la barre des unités de temps » : plus le graphique est haut, plus
       le repère de prix s'éloigne de cette barre. --- */
.chart-drag {
  display: none;
  position: relative; flex: 0 0 20px; height: 20px;
  cursor: row-resize; touch-action: none;
  background: var(--head-bg);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.chart-drag::before {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 72px; height: 4px; border-radius: 2px; background: var(--gold); opacity: .5;
}
.chart-drag:hover::before, .chart-drag.active::before { opacity: .95; }

/* --- Poignée du QUIZ : à la frontière quiz / graphique (mobile, Premium / à vie).
       Vraie ligne de grille (grid-area qres) → jamais recouverte, jamais
       découpée ; glisser bas = quiz plus haut. Masquée pour les comptes
       free / invité puisque le quiz est verrouillé (module indisponible). --- */
.quiz-resize {
  display: none; grid-area: qres;
  position: relative; height: 20px;
  cursor: row-resize; touch-action: none; z-index: 9;
  background: var(--head-bg);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.quiz-resize::after {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 72px; height: 4px; border-radius: 2px; background: var(--cyan); opacity: .55;
}
.quiz-resize:hover::after, .quiz-resize.active::after { opacity: .95; }

body.resizing .chart-drag, body.resizing .quiz-resize { transition: none; }

@media (max-width: 720px) {
  .chart-drag { display: block; }
  .quiz-resize { display: block; }
  /* AJUSTEUR DU CARNET : visible sur téléphone, et LUI SEUL. La poignée
     absolue en haut du quiz faisait exactement le même geste au même endroit
     (elle réglait la hauteur du carnet) : deux poignées superposées = la plus
     haute captait le doigt et l'autre semblait morte. Une seule commande. */
  .book-resize { display: block; }
  .quiz-drag { display: none !important; }
  /* Free / invité : quiz verrouillé → aucun ajusteur de quiz. */
  body.quiz-locked .quiz-resize { display: none; }
  /* ⛶ GRAPHIQUE : en mode agrandi le canvas REMPLIT la hauteur. Sans ça le
     graphique restait bloqué à 34vh et « Agrandir » ne gagnait aucune bougie. */
  #chart-panel.maxed #chartWrap { flex: 1 1 auto; height: auto; min-height: 200px; }
  #chart-panel.maxed .chart-drag { display: none; }
  /* ⛶ CARNET : en mode agrandi (plein écran) l'ajusteur n'a plus de sens. */
  #orderbook-panel.maxed .book-resize { display: none; }
}
@media (min-width: 721px) {
  .chart-drag, .quiz-resize, .book-resize { display: none !important; }
}

/* PATCH visibilité mobile + pnl */
/* Le 17px du body mobile est supprimé (ÉTAPE 8) : il rendait le mobile PLUS GRAND que le web. */
@media (max-width: 720px){ .ob-row{font-size:15px;} .ob-row .c-price{font-size:15.5px;} }
/* PNL : taille identique aux autres intitulés / cellules (proportion demandée) */
.ticker-track{font-size:14.5px;}
#ticker .tk-close{margin-left:8px;cursor:pointer;background:none;border:none;font-size:16px;}
@media (max-width: 720px){ .ob-trade-ctl{order:-1;} #btnFollow,#btnMaxBook{padding:10px 12px;} }

@media (max-width: 720px){ .ltab{font-size:14.5px !important;padding:12px 8px !important;} .lang-btn{font-size:14px !important;padding:9px 14px !important;} .login-card input{font-size:16px !important;} .auth-note{font-size:14.5px !important;} }

#ticker{display:flex;align-items:center;gap:6px;} #tickerClose{flex:0 0 auto;min-width:34px;min-height:30px;font-size:18px;color:var(--gold);background:rgba(0,0,0,.35);border:1px solid rgba(255,215,0,.5);border-radius:8px;}
@media (max-width: 720px){ #ob-head{font-size:11.5px !important;} #ob-head span{font-size:11.5px !important;} .ob-row .c{font-size:13.5px !important;} .ob-touch-note{font-size:13px !important;} .ob-legend-open,.vp-note{font-size:12.5px !important;} }

.toast { position: relative; padding-right: 30px; }
.toast-x { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: #9aa7c0; font-size: 14px; cursor: pointer; line-height: 1; padding: 4px; }
.toast-x:hover { color: #fff; }
.toast-txt { display: inline-block; padding-right: 6px; }
@media (max-width: 1080px) {
  #toasts { top: auto !important; bottom: 76px !important; right: 8px !important; left: 8px !important; align-items: stretch; max-height: 38vh; overflow-y: auto; }
  .toast { max-width: none; font-size: 12px; }
}
.clk-hint { position: relative; cursor: pointer; border-bottom: 1px dotted var(--gold, #ffd700); }
.clk-hint:hover { border-bottom-style: solid; }
.clk-i { display: inline-block; margin-left: 4px; font-size: .85em; color: var(--gold, #ffd700); border: 1px solid var(--gold, #ffd700); border-radius: 50%; width: 1.25em; height: 1.25em; line-height: 1.2em; text-align: center; vertical-align: middle; }
.ephem-more { display: none; }
@media (max-width: 700px) {
  .ephem-row { cursor: pointer; }
  .ephem-row.open .ephem-more { display: block; }
  .ephem-more { font-size: 11px; color: #9aa7c0; margin-top: 4px; }
}
.ephem-toggle { border: 1px solid #2a2f45; background: #151827; color: #ffd700; border-radius: 6px; font-size: 11px; padding: 2px 8px; cursor: pointer; margin-left: 6px; }
/* ---------- TARIFS PRO ---------- */
/* `min-width:0` : #tarifsBody est un enfant flex du panneau ; sans cela sa
   largeur mini « auto » serait dictée par le tableau comparatif (min-width
   560px) et ÉLARGIRAIT tout le panneau sur mobile. Le tableau reste
   défilable horizontalement dans son propre conteneur (.tf-tablewrap). */
#tarifsBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; width: 100%; padding: 14px; max-width: 1100px; min-width: 0; margin: 0 auto; text-align: left; box-sizing: border-box; touch-action: pan-y; }
/* Panneaux SANS corps défilant : le défilement vit dans leur propre conteneur. */
#panel-legal .legal-inner { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 14px 16px 30px; max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box; }
#panel-chat .chat-log { min-height: 120px; }
.tf-hero { background: linear-gradient(135deg, #1a1440, #0d1524); border: 1px solid #ffd70055; border-radius: 14px; padding: 18px; margin-bottom: 12px; }
.tf-herow { display: flex; align-items: center; gap: 14px; }
.tf-logo { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 13px; object-fit: cover; border: 1px solid #ffd70066; box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,215,0,.15); background: #0d1524; }
.tf-herotxt { min-width: 0; }
@media (max-width: 520px) { .tf-herow { flex-direction: column; align-items: flex-start; gap: 10px; } .tf-logo { width: 52px; height: 52px; } }
/* Bannière visuelle de l'onglet Tarifs (image « price » générée) — image de
   contenu placée DANS l'onglet, ce n'est pas le titre ni le logo de la marque. */
.tf-banner { position: relative; margin: 0 0 12px; border: 1px solid #ffd70055; border-radius: 14px; overflow: hidden; background: #0b1120; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(255,215,0,.12); }
.tf-banner img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; object-position: center; }
.tf-banner figcaption { display: none; }
@media (max-width: 520px) { .tf-banner img { max-height: 170px; } }
/* Pastille bilingue « FR · EN » en coin des visuels (accessibilité traduction). */
.tr-badge { position: absolute; top: 7px; right: 7px; z-index: 3; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: #ffd700; background: rgba(11,18,32,.86); border: 1px solid #ffd70066; border-radius: 6px; padding: 1px 5px; line-height: 1.6; pointer-events: none; }
.tf-hero h3 { margin: 0 0 8px; color: #ffd700; font-size: 1.15em; }
.tf-hero p { margin: 0 0 10px; color: #c9d4ea; font-size: 14px; line-height: 1.5; }
.tf-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-trust span { background: #0b1120; border: 1px solid #2a3550; border-radius: 20px; padding: 4px 12px; font-size: 12px; color: #8fe3a8; }
.tf-mailwarn { background: #2a1f05; border: 1px solid #ffd70088; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #ffe9a8; margin-bottom: 14px; line-height: 1.5; }
.tf-you { display: inline-block; margin-left: 6px; background: #0b1120; border-radius: 6px; padding: 1px 8px; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tf-card { position: relative; background: #12141f; border: 1px solid #2a3550; border-radius: 12px; padding: 16px 14px; display: flex; flex-direction: column; }
.tf-card.hl-pop { border-color: #22d3ee; box-shadow: 0 0 14px #22d3ee33; }
.tf-card.hl-best { border-color: #ffd700; box-shadow: 0 0 18px #ffd70044; background: linear-gradient(180deg, #1c1607, #12141f); }
.tf-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; padding: 2px 12px; border-radius: 12px; white-space: nowrap; }
.tf-badge.pop { background: #22d3ee; color: #04121a; }
.tf-badge.best { background: #ffd700; color: #231a02; }
.tf-name { font-weight: 800; font-size: 15px; color: #fff; margin-top: 4px; }
.tf-tag { font-size: 12px; color: #9aa7c0; margin: 2px 0 8px; }
.tf-price { font-size: 22px; font-weight: 800; color: #ffd700; margin-bottom: 8px; }
.tf-price small { font-size: 11px; font-weight: 400; color: #9aa7c0; white-space: nowrap; }
.tf-feats { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.tf-feats li { font-size: 12.5px; color: #c9d4ea; padding: 4px 0 4px 22px; position: relative; line-height: 1.4; }
.tf-feats li::before { content: "✔"; position: absolute; left: 2px; color: #34d399; font-weight: 700; }
.tf-buy { width: 100%; font-weight: 800; }
.tf-tablewrap { overflow-x: auto; margin-bottom: 18px; }
/* Comparatif mobile : une ligne par fonctionnalité + une pastille par formule.
   Affiché uniquement sur écrans étroits (le tableau reste pour le bureau). */
.tf-cmp { display: none; margin-bottom: 18px; }
.tf-cmp-row { background: #12141f; border: 1px solid #2a3550; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.tf-cmp-feat { font-weight: 700; color: #eef2fb; font-size: 13px; margin-bottom: 6px; }
.tf-cmp-plans { display: flex; flex-wrap: wrap; gap: 5px; }
.tf-cmp-plans > span { font-size: 11px; border-radius: 14px; padding: 2px 9px; border: 1px solid #2a3550; background: #0b1120; color: #9aa7c0; white-space: nowrap; }
.tf-cmp-plans > span.ok { color: #8fe3a8; border-color: #34d39955; background: #0f2318; font-weight: 700; }
@media (max-width: 700px) { .tf-tablewrap { display: none; } .tf-cmp { display: block; } }
.tf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tf-table th, .tf-table td { border: 1px solid #2a3550; padding: 7px 8px; text-align: center; color: #c9d4ea; }
.tf-table th { background: #1a2138; color: #ffd700; font-size: 12px; }
.tf-table td:first-child { text-align: left; font-weight: 600; color: #eef2fb; }
.tf-steps { color: #c9d4ea; font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; padding-left: 22px; }
.tf-steps li { margin-bottom: 6px; }
.tf-faq details { background: #12141f; border: 1px solid #2a3550; border-radius: 8px; margin-bottom: 8px; padding: 8px 12px; font-size: 13px; color: #c9d4ea; }
.tf-faq summary { cursor: pointer; font-weight: 700; color: #fff; }
.tf-faq p { margin: 6px 0 2px; line-height: 1.5; }
.tf-note { margin-top: 14px; font-size: 12px; color: #9aa7c0; }
/* ============================================================
   TARIFS — CONTRASTE EN THÈME CLAIR (fond BLANC)
   Les règles ci-dessus sont écrites pour le panneau SOMBRE (texte clair
   #c9d4ea / #9aa7c0). Sur fond blanc, ce texte gris clair devient
   illisible. On corrige UNIQUEMENT le thème clair (fond blanc) ; le
   rendu du thème sombre reste strictement identique.
   ============================================================ */
body.theme-light .tf-table th, body.theme-light .tf-table td { border-color: #d4dbe8; color: #1c2b47; }
body.theme-light .tf-table th { background: #e9eef7; color: #7a5a0e; }
body.theme-light .tf-table td:first-child { color: #14203a; }
body.theme-light .tf-steps { color: #2c3a55; }
body.theme-light .tf-steps b { color: #14203a; }
body.theme-light .tf-note { color: #5c6b85; }
/* Titres de section (« 📊 Comparatif », « ⚙️ Comment ça marche », « ❓ FAQ ») :
   l'or du thème sombre (--gold = #b8860b) tombait à 2,9:1 sur fond clair. */
body.theme-light .lead-title { color: #7a5a0e; }
@media (max-width: 700px) { .tf-grid { grid-template-columns: 1fr; } }


/* ============================================================
   TABLEAU D'ANALYSE DU TRADER (analytics.js)
   Dashboard professionnel construit UNIQUEMENT depuis les trades
   capturés (prix cliqué, exécuté, taille, renforts, R:R, durée).
   ============================================================ */
.an-sec { padding: 16px 18px; }
.an-sec h3 { display: flex; align-items: center; gap: 6px; }
.an-intro { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.an-intro b { color: var(--gold); }

/* --- indicateurs clés --- */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(114px, 1fr)); gap: 10px; margin: 4px 0 6px; }
.an-kpi { position: relative; background: linear-gradient(180deg, var(--panel2), var(--head-bg2)); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px 12px 16px; overflow: hidden; }
.an-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); opacity: .5; }
.an-kpi.good::before { background: var(--green); opacity: 1; }
.an-kpi.bad::before { background: var(--red); opacity: 1; }
.an-kpi.warn::before { background: var(--gold); opacity: 1; }
.an-kpi small { display: block; font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.an-kpi b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--text); }
.an-kpi.good b { color: var(--green); }
.an-kpi.bad b { color: var(--red); }
.an-kpi.warn b { color: var(--gold); }
.an-kpi span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }

/* --- titres de sections --- */
.an-h4 { position: relative; margin: 22px 0 10px; padding-left: 12px; font-size: 13px; letter-spacing: .3px; color: var(--gold); }
.an-h4::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--gold), transparent); }
.an-sub { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 0 0 8px; }

/* --- graphiques SVG --- */
.an-chart { display: block; width: 100%; height: auto; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 2px; }
.an-radar { padding: 2px; }
.an-cap { display: block; margin: 6px 2px 0; font-size: 10.5px; letter-spacing: .3px; color: var(--muted); text-align: center; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.an-grid2 > div { min-width: 0; }

/* --- profil du trader (radar + légende) --- */
.an-prof { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 14px; align-items: center; }
.an-radar-wrap { background: var(--head-bg2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.an-prof-legend { display: flex; flex-direction: column; gap: 7px; }
.an-pl { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 7px 10px 10px; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.an-pl span { font-size: 11.5px; color: var(--text); }
.an-pl b { font-family: var(--mono); font-size: 14px; font-weight: 800; }
.an-pl b.good { color: var(--green); }
.an-pl b.mid { color: var(--gold); }
.an-pl b.bad { color: var(--red); }
.an-pl i { grid-column: 1 / -1; position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(125,138,163,.18); overflow: hidden; font-style: normal; }
.an-pl i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--v, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--green)); }

/* --- journal des captures --- */
.an-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 640px; font-family: var(--mono); }
.an-table th { position: sticky; top: 0; background: var(--head-bg3); color: var(--gold); font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; padding: 8px 9px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-table td { padding: 6px 9px; text-align: right; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.an-table tbody tr:nth-child(even) { background: rgba(125,138,163,.05); }
.an-table tbody tr:hover { background: rgba(255,215,0,.06); }
.an-table td:first-child { color: var(--muted); }
.an-table .pos { color: var(--green); }
.an-table .neg { color: var(--red); }
.an-table .mid { color: var(--gold); }
.an-side { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; }
.an-side.long { background: rgba(34,211,238,.14); color: var(--cyan); border: 1px solid rgba(34,211,238,.45); }
.an-side.short { background: rgba(255,215,0,.14); color: var(--gold); border: 1px solid rgba(255,215,0,.45); }
.an-adds { color: var(--gold); font-size: 9.5px; }

/* --- LONG / SHORT breakdown --- */
.an-gstats { display: flex; flex-direction: column; gap: 8px; }
.an-gstat { display: grid; grid-template-columns: 54px repeat(4, 1fr) auto; align-items: center; gap: 6px; background: var(--head-bg2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 11px; font-family: var(--mono); color: var(--muted); }
.an-gstat .an-glab { font-weight: 800; color: var(--text); letter-spacing: .5px; }
.an-gstat b { font-size: 13px; font-family: var(--mono); }
.an-gstat b.pos { color: var(--green); }
.an-gstat b.neg { color: var(--red); }

/* --- diagnostic automatique --- */
.an-diag { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.an-diag li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.55; background: var(--head-bg2); border: 1px solid var(--border); border-left-width: 3px; color: var(--text); }
.an-diag li.good { border-left-color: var(--green); }
.an-diag li.mid { border-left-color: var(--gold); }
.an-diag li.bad { border-left-color: var(--red); }
.an-diag-i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; line-height: 1; margin-top: 1px; }
.an-diag li.good .an-diag-i { background: rgba(52,211,153,.16); color: var(--green); }
.an-diag li.mid .an-diag-i { background: rgba(255,215,0,.16); color: var(--gold); }
.an-diag li.bad .an-diag-i { background: rgba(248,113,113,.16); color: var(--red); }

@media (max-width: 720px) {
  .an-sec { padding: 13px 12px; }
  .an-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .an-kpi { padding: 9px 10px 10px 14px; }
  .an-kpi b { font-size: 17px; }
  .an-kpi span { font-size: 9.5px; }
  .an-h4 { font-size: 12.5px; }
  .an-grid2 { grid-template-columns: 1fr; }
  .an-prof { grid-template-columns: 1fr; }
  .an-radar-wrap { max-width: 360px; margin: 0 auto; width: 100%; }
  .an-gstat { grid-template-columns: 46px 1fr 1fr auto; font-size: 10px; gap: 4px 6px; padding: 8px 9px; }
  .an-diag li { font-size: 11.5px; padding: 8px 10px; }
}

/* ============================================================================
   PATCH MOBILE — LÉGENDE DU CARNET RÉDUITE + PLUS DE PRIX VISIBLES
   Demandes de la créatrice : « réduis le texte de la légende et l'écriture des
   prix dans le carnet d'ordre version mobile pour voir plus de prix, même sans
   agrandir ».
   Constat mesuré à 390×844 (avant) : `#orderbook` = 197 px pour `#ob-foot` =
   257 px, dont 127 px pour la seule aide tactile ; la ligne de prix mesurait
   15,5 px pour une hauteur de ligne de 21,9 px → 9 niveaux visibles seulement.
   Ici : la légende tient en 3 lignes courtes (45 px au lieu de 127), les prix et
   les autres colonnes sont resserrés → le MÊME panneau affiche ~15 niveaux.
   Le panneau n'est PAS agrandi (`#orderbook-panel` inchangé) et rien d'autre
   n'est touché : ni les colonnes, ni les cibles de clic ACHAT/VENTE/FLAT/
   SUIVRE/AGRANDIR, ni les badges des ordres. */
@media (max-width: 720px) {
  #ob-foot { gap: 2px 6px; padding: 3px 8px; }
  #ob-foot .ob-touch-note { font-size: 11px !important; line-height: 1.3; padding: 2px 0 0; }
  #ob-head { font-size: 10.5px !important; padding: 4px var(--ob-sb, 9px) 4px 0; }
  #ob-head span { font-size: 10.5px !important; }
  .ob-row { font-size: 13px !important; }
  .ob-row .c { font-size: 12px !important; }
  .ob-row .c-price { font-size: 13px !important; font-weight: 700; letter-spacing: -.2px; }
  .ob-row .c-bid, .ob-row .c-ask { font-size: 11.5px !important; }
  .ob-row .c-pnl { font-size: 13px !important; }
  .ob-row .c-tp { font-size: 10.5px !important; }
  .ob-row .c-vol, .ob-row .c-vol b { font-size: 9.5px !important; }
  .ob-row .c-lots .pend, .ob-row .c-lots .e-ch { font-size: 9px !important; }
  #ob-foot .ob-stats .st b { font-size: 12px !important; }
  #ob-foot .ob-stats .st small { font-size: 7.5px !important; }
  /* Le ✕ d'un ordre était un bouton de 22 px : plus haut que la nouvelle ligne
     (19,3 px) → les badges se chevauchaient. On le ramène à 18 px et on élargit
     sa zone tactile par le pseudo-élément, qui reste à ~40 px (identique). */
  .ob-row .c-lots .ord-del, .ob-row .c-tp .ord-del { width: 18px; height: 18px; font-size: 11px; }
  .ob-row .c-lots .ord-del::before, .ob-row .c-tp .ord-del::before { left: -11px; right: -11px; top: -9px; bottom: -9px; }
  #ob-foot .ob-legend-open, #ob-foot .vp-note { display: none; }
}

/* ============================================================
   VOILE « MARCHÉ PARTAGÉ » (AFFICHAGE UNIQUEMENT — aucune simulation touchée)
   Le marché est UNIQUE pour tous : il vient du serveur temps réel, pas de la
   reconstruction locale faite au démarrage. Ce rideau couvre le graphique et
   le carnet pendant la toute dernière phase de la liaison, pour que le trader
   ne voie JAMAIS le cours reconstruit localement puis son « basculement » sur
   le cours commun (et pour qu'aucune bougie de ce démarrage ne soit visible).
   Il est levé par hideMarketVeil() : dès que le cours partagé est appliqué,
   ou si ce client MÊNE la simulation (son marché EST le marché commun), ou au
   plus tard après quelques secondes (repli local, serveur injoignable…).
   ============================================================ */
#orderbook-panel { position: relative; }
.mkt-veil {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); cursor: progress;
}
.mkt-veil[hidden] { display: none !important; }
.mkt-veil .mv-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--head-bg);
  color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .3px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.mkt-veil .mv-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--border); border-top-color: var(--gold);
  animation: mvspin .8s linear infinite;
}
@keyframes mvspin { to { transform: rotate(360deg); } }

/* ---------- Verrou Premium SUR LE BOUTON « Lancer le scénario » ----------
   Le Mode Quiz reste visible pour tous ; seul le lancement est réservé aux
   abonnés. Le cadenas est porté par le bouton lui-même. */
.quiz-lock-tip { font-size: 11px; line-height: 1.3; color: var(--muted); font-weight: 600; }
.btn.locked, .btn.gold.locked { opacity: .85; cursor: pointer; }
.btn.locked::after { content: ''; }

/* ---------- CIBLES TACTILES (doigt, mobile uniquement) ---------- */
@media (pointer:coarse) {
  .ord-del, .ord-x {
    min-width: 34px; min-height: 34px;
  }
}

/* ---------- MOBILE : dessin + intitulés + ajusteurs (sans rien retirer) ---------- */
@media (pointer:coarse) {
  .chart-tools .tbtn { min-width: 40px; min-height: 40px; font-size: 15px; }
  .quiz-resize, .book-resize, .chart-drag, .quiz-drag { touch-action: pan-y; }
  .resizer-armed::before, .resizer-armed::after { opacity: 1 !important; box-shadow: 0 0 0 2px rgba(255,215,0,.4); }
}

/* ---------- ANTI-COPIE / ANTI-TÉLÉCHARGEMENT (dissuasif) ----------
   Tout le visuel du jeu est non sélectionnable et non appelable au
   menu long (sauvegarde d'image). Les logos sont purement décoratifs :
   aucun clic / glisser ne part d'eux. Les champs de saisie restent
   utilisables (sélection + coller autorisés dedans uniquement). */
html, body, #app, #login-screen, #reset-screen, .tabpanel, .popup-box,
.login-card, #topbar, #tabbar, #main, .panel-body, .chat-log, .quiz-text,
#orderbook, #chart-panel, .lead, .legal-inner {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
img, svg, canvas, video {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.login-logo, .brand-logo {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ÉTAPE 1 — repli : pas de flou disponible → fond quasi opaque (lisibilité) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .popup-box, .tabpanel, .panel-head, .chat-preview, .chat-mini,
  .duel-popup, .duel-invite-pop, .toast { background: var(--glass-bg-solid); }
}

/* ÉTAPE 2 — FOCUS VISIBLE (clavier) : contour or 2px sur tous les boutons.
   :focus-visible = uniquement au clavier, jamais au clic souris. */
button:focus-visible, .btn:focus-visible, .tbtn:focus-visible, .login-btn:focus-visible,
.tab:focus-visible, .ltab:focus-visible, .sub-tab:focus-visible, .ch-btn:focus-visible,
.foot-btn:focus-visible, .lang-btn:focus-visible, .dl-opt:focus-visible, .nf-btn:focus-visible,
.toast-action:focus-visible, .link-btn:focus-visible, .nlbar-btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* États désactivés des autres familles de boutons */
.tbtn:disabled, .foot-btn:disabled, .dl-opt:disabled, .toast-action:disabled {
  opacity: .45; cursor: not-allowed;
}

/* Hauteur tactile : 44px minimum sur mobile et appareils tactiles */
@media (max-width: 720px), (pointer: coarse) {
  :root { --btn-h: 44px; }
}

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

/* ÉTAPE 3 — mini-chat et toasts : le défilement ne « fuit » plus vers la page */
.chat-preview .cp-log, .chat-mini .cm-log, #toasts {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ÉTAPE 3 — voile « marché partagé » : si le JS ne le lève jamais
   (serveur injoignable), il se libère seul au bout de 20 s au lieu de bloquer
   carnet + graphique. */
.mkt-veil:not([hidden]) { animation: mvAutoRelease .01s linear 20s forwards; }
@keyframes mvAutoRelease { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ÉTAPE 4 — en-têtes ACHAT / VENTE alignés sur leurs colonnes (bord extérieur) */
#ob-head .h-bid { text-align: left;  padding-left: 4px; }
#ob-head .h-ask { text-align: right; padding-right: 4px; }

/* ---------- ONGLETS PROFESSIONNELS (étape 5) ---------- */
#tabbar .tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px; line-height: 1;
  text-transform: none;
}
#tabbar .tab .t-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 1.3em; font-size: 14px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: .72; filter: saturate(.85);
  transition: opacity .15s, filter .15s;
}
#tabbar .tab:hover .t-ico, #tabbar .tab.active .t-ico { opacity: 1; filter: none; }
#tabbar .tab .t-lbl { display: inline; white-space: nowrap; }
#tabbar .tab.active { font-weight: 700; box-shadow: inset 0 -2px 0 var(--gold); }
@media (max-width: 720px) {
  #tabbar .tab { gap: 5px; }
  #tabbar .tab .t-ico { font-size: 13px; }
}

/* ---------- ICÔNES SVG PROFESSIONNELLES (étape 6) ----------
   Style Lucide : trait 2px, 24×24, AUCUNE image externe. Masques CSS :
   couleur = currentColor (thème sombre/clair + états). */
:root {
  --i-trading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
  --i-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --i-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --i-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
  --i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7l-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
  --i-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 18a6 6 0 0 0 0-12v12z'/%3E%3C/svg%3E");
  --i-volume: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
  --i-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='m22 9-6 6'/%3E%3Cpath d='m16 9 6 6'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
  --i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --i-max: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  --i-zoomin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --i-zoomout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5'/%3E%3Ccircle cx='5' cy='19' r='1.5'/%3E%3Ccircle cx='19' cy='5' r='1.5'/%3E%3C/svg%3E");
  --i-ray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --i-hline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Ccircle cx='5' cy='12' r='1.5'/%3E%3Ccircle cx='19' cy='12' r='1.5'/%3E%3C/svg%3E");
  --i-channel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 21 4'/%3E%3Cpath d='M3 20 21 16'/%3E%3C/svg%3E");
  --i-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  --i-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3'/%3E%3Cpath d='M9 20h6'/%3E%3Cpath d='M12 4v16'/%3E%3C/svg%3E");
  --i-eraser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21'/%3E%3Cpath d='M22 21H7'/%3E%3Cpath d='m5 11 9 9'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  #tabbar .tab .t-ico {
    font-size: 0; width: 16px; height: 16px; flex: 0 0 auto;
    background: currentColor; filter: none;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  }
  #tabbar .tab.active .t-ico { color: var(--cyan); }
  #tabbar .tab[data-tab="trading"]      .t-ico { --ic: var(--i-trading); }
  #tabbar .tab[data-tab="account"]      .t-ico { --ic: var(--i-account); }
  #tabbar .tab[data-tab="competitions"] .t-ico { --ic: var(--i-trophy); }
  #tabbar .tab[data-tab="challenges"]   .t-ico { --ic: var(--i-target); }
  #tabbar .tab[data-tab="formation"]    .t-ico { --ic: var(--i-cap); }
  #tabbar .tab[data-tab="futures"]      .t-ico { --ic: var(--i-trend); }
  #tabbar .tab[data-tab="prep"]         .t-ico { --ic: var(--i-clipboard); }
  #tabbar .tab[data-tab="discipline"]   .t-ico { --ic: var(--i-shield); }
  #tabbar .tab[data-tab="chat"]         .t-ico { --ic: var(--i-chat); }
  #tabbar .tab[data-tab="tarifs"]       .t-ico { --ic: var(--i-card); }
  #tabbar .tab[data-tab="legal"]        .t-ico { --ic: var(--i-doc); }
  @media (max-width: 720px) { #tabbar .tab .t-ico { width: 15px; height: 15px; } }

  #app :is(#btnTheme, #btnTheme2, #btnVoice, #btnHelp, #btnLogout,
           #btnMaxChart, #btnMaxMinis, #btnChartZoomOut, #btnChartZoomIn, #btnChartLine,
           #btnChartRay, #btnChartHLine, #btnChartChannel, #btnChartCircle,
           #btnChartText, #btnChartErase, #btnChartClear, #btnQuizTop:not(.prem-locked)) {
    font-size: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  #app :is(#btnTheme, #btnTheme2, #btnVoice, #btnHelp, #btnLogout,
           #btnMaxChart, #btnMaxMinis, #btnChartZoomOut, #btnChartZoomIn, #btnChartLine,
           #btnChartRay, #btnChartHLine, #btnChartChannel, #btnChartCircle,
           #btnChartText, #btnChartErase, #btnChartClear, #btnQuizTop:not(.prem-locked))::before {
    content: ''; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  }
  #app :is(#btnTheme, #btnTheme2)  { --ic: var(--i-theme); }
  #app #btnVoice                   { --ic: var(--i-volume); }
  #app #btnVoice:is(.off, .muted, [aria-pressed="false"]) { --ic: var(--i-mute); }
  #app #btnHelp                    { --ic: var(--i-help); }
  #app #btnLogout                  { --ic: var(--i-logout); }
  #app #btnLogout:hover            { color: var(--red); border-color: var(--red); }
  #app #btnQuizTop                 { --ic: var(--i-book); }
  #app :is(#btnMaxChart, #btnMaxMinis) { --ic: var(--i-max); }
  #app #btnChartZoomOut            { --ic: var(--i-zoomout); }
  #app #btnChartZoomIn             { --ic: var(--i-zoomin); }
  #app #btnChartLine               { --ic: var(--i-line); }
  #app #btnChartRay                { --ic: var(--i-ray); }
  #app #btnChartHLine              { --ic: var(--i-hline); }
  #app #btnChartChannel            { --ic: var(--i-channel); }
  #app #btnChartCircle            { --ic: var(--i-circle); }
  #app #btnChartText               { --ic: var(--i-type); }
  #app #btnChartErase              { --ic: var(--i-eraser); }
  #app #btnChartClear              { --ic: var(--i-x); }
}

/* ============================================================
   ÉTAPE 8 — FINITIONS ERGONOMIE (web + mobile)
   ============================================================ */

/* ---------- 8.1 TEXTES DE LECTURE : 13px minimum ---------- */
.panel-desc, .popup-box p, .popup-box li, .tos-inner p, .tos-inner li,
.lesson-body, .prep-sec p, .prep-sec li, .disc-sec p, .disc-sec li,
.legal-inner p, .ind-card p, .tf-feats li, .tf-faq p, .tf-steps,
.chat-text, .cw-msg, .an-intro, .an-diag li, .gloss-def, .gloss-intro,
.lc-entry, .lc-lesson, .lc-improve, .fquiz-fb, .dip-line {
  font-size: var(--fs-read);
}

/* ---------- 8.2 ESPACEMENTS (échelle 4/8/12/16/24/32) ---------- */
.panel-body { padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); }
.popup-box { padding: var(--sp-4); }
.prep-sec, .disc-sec, .chal-card, .firm { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.lesson { margin-bottom: var(--sp-3); }
.panel-desc { margin-bottom: var(--sp-4); }
.lead-title { margin: var(--sp-6) 0 var(--sp-3); }

/* ---------- 8.3 BREAKPOINTS 360 / 768 / 1024 / 1440 (conteneurs uniquement) ---------- */
@media (max-width: 360px) {
  .panel-body { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .popup-box { padding: var(--sp-3); }
  .prep-sec, .disc-sec, .chal-card, .firm { padding: var(--sp-3); }
}
@media (min-width: 768px) {
  .panel-body { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
  .popup-box { padding: var(--sp-6); }
  .prep-sec, .disc-sec, .chal-card, .firm { padding: var(--sp-6); margin-bottom: var(--sp-6); }
}
@media (min-width: 1024px) {
  .panel-body:not(.chat-body):not(.legal-body) { max-width: 960px; }
}
@media (min-width: 1440px) {
  .panel-body:not(.chat-body):not(.legal-body) { max-width: 1100px; }
}

/* ---------- 8.4 FOCUS VISIBLE PARTOUT (contour or 2px) ---------- */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}
.tab:focus-visible, .ltab:focus-visible, .tf-selector button:focus-visible,
#tf-selector button:focus-visible, .lesson-head:focus-visible, .sub-tab:focus-visible {
  outline-offset: -2px;
}

/* ---------- 8.5 CHAMPS : texte indicatif lisible ---------- */
::placeholder { color: var(--muted); opacity: 1; }

/* ---------- 8.6 CONNEXION EN THÈME CLAIR : la carte reste sombre ---------- */
#login-screen {
  --text: #e8edf7; --muted: #7d8aa3; --gold: #ffd700; --gold-ink: #ffd700;
  --green: #34d399; --red: #f87171; --border: #1b2740;
}
#login-screen ::placeholder { color: #7d8aa3; }

/* ---------- 8.7 CONTRASTE DU TEXTE OR EN THÈME CLAIR ---------- */
body.theme-light :is(
  .tab.active, .tbtn.on, .tbtn:hover, .close-panel:hover, .lang-btn:hover,
  .ch-btn.on, .sub-tab.active, .link-btn, .tos-inline, .rank-badge,
  .panel-head h2, .popup-box h2, .tos-box h2, .lead-title, .quiz-title,
  .an-h4, .an-intro b, .prep-sec h3, .prep-sec b, .disc-sec h3, .disc-sec b,
  .gloss-title, .legal-inner h3, .legal-inner a, .lesson-body b,
  .chat-name, .cw-name, .premium-txt b, .dip-head
) { color: var(--gold-ink); }
body.theme-light .btn:hover:enabled:not(.gold):not(.retry):not(.red):not(.green):not(.btn-primary):not(.btn-danger) {
  color: var(--gold-ink);
}

/* ---------- 8.8 MOUVEMENT RÉDUIT : compléments ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .rank-live .rl-dot, .nf-tag, .lead-row .ch-tag.live, .ob-row.repere { animation: none !important; }
}

/* ---------- LOGIN : VIDÉO DE DÉMO + FORMULAIRE (étape 7) ---------- */
.login-layout {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 24px;
  width: min(1100px, 100%);
  margin: auto;
}
.login-demo {
  position: relative; margin: 0;
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: 14px; overflow: hidden;
  background: #05080f;
  border: 1px solid rgba(255, 215, 0, .25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(34, 211, 238, .05);
}
.login-demo video, .login-demo .login-demo-fb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
.login-demo .login-demo-fb { display: none; }
.login-demo.no-video video { display: none; }
.login-demo.no-video .login-demo-fb { display: block; }
.login-demo.no-demo { display: none; }
.login-layout:has(.login-demo.no-demo) { grid-template-columns: 1fr; width: auto; }
.login-layout .login-card { width: 100%; max-width: 440px; justify-self: center; min-width: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
  .login-layout { gap: 16px; }
  .login-layout .login-card { padding: 22px 16px 16px; }
  .login-layout .login-logo { width: 90px; height: auto; }
}
@media (max-width: 767px) {
  .login-layout { grid-template-columns: 1fr; gap: 14px; width: 100%; }
  .login-demo { order: -1; border-radius: 12px; }
  .login-layout .login-card { max-width: 100%; }
}