:root {
  --bg: #0b0e11; --panel: #131722; --panel2: #1c2230; --border: #2a2e39;
  --text: #d1d4dc; --muted: #787b86; --accent: #2962ff;
  --up: #26a69a; --down: #ef5350; --neutral: #b2b5be;
  --warn: #f5c518;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.top { display: flex; align-items: center; gap: 1.2rem; padding: .6rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; flex: none; }
.brand { font-weight: 700; font-size: 1.05rem; }
.brand .sub { color: var(--muted); font-weight: 400; font-size: .8rem; }
.controls { display: flex; align-items: center; gap: .8rem; }
select { background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .6rem; font-size: .95rem; font-weight: 600; }
.tfs { display: flex; gap: .25rem; }
.tfs button { background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: .35rem .6rem; cursor: pointer; font-size: .8rem; }
.tfs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.status { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.badge { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  background: #3a2e00; color: var(--warn); }
.badge.live { background: #0f3a1a; color: #4ade80; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }

/* Espace de travail : (graphique | colonne droite) au-dessus, journal en bas */
.workspace { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.main { flex: 1 1 auto; display: flex; min-height: 0; }
.chart { flex: 1 1 auto; min-width: 0; }
.side { width: 380px; flex: none; background: var(--panel); border-left: 1px solid var(--border);
  overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .8rem; }

/* Poignées de redimensionnement */
.divider-v { width: 6px; flex: none; cursor: col-resize; background: var(--border); }
.divider-h { height: 6px; flex: none; cursor: row-resize; background: var(--border); }
.divider-v:hover, .divider-h:hover { background: var(--accent); }

.bottom { height: 230px; flex: none; background: var(--panel); border-top: 1px solid var(--border);
  overflow-y: auto; padding: .8rem 1rem; }
.journal { display: grid; grid-template-columns: 1fr 1.1fr 1.4fr; gap: 1rem; }
.jcol h3 { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6rem; }
.jstats { display: flex; flex-wrap: wrap; gap: .5rem; }
.jstat { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .6rem; font-size: .8rem; }
.jstat span { color: var(--muted); display: block; font-size: .68rem; text-transform: uppercase; }
.jstat b { font-variant-numeric: tabular-nums; }
.jnote { font-size: .72rem; margin: .5rem 0 0; }
.jopen { font-size: .82rem; margin: .5rem 0; }
.jrecent { display: flex; flex-direction: column; gap: .15rem; }
/* Backtest récent : ne montrer que ~5 lignes, le reste défile (plus récents en haut). */
#bt-recent { max-height: 5.6em; overflow-y: auto; padding-right: .2rem; }
.jrow { display: flex; gap: .5rem; align-items: baseline; font-size: .78rem; font-variant-numeric: tabular-nums; }
.jrow .res.win { color: var(--up); } .jrow .res.loss { color: var(--down); }
.gtable { width: 100%; border-collapse: collapse; font-size: .78rem; }
.gtable th, .gtable td { text-align: right; padding: .25rem .5rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.gtable th:first-child, .gtable td:first-child { text-align: left; }
.gtable th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .68rem; }
.gtable tr.sel td { background: rgba(41,98,255,.14); font-weight: 600; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .main { flex-direction: column; }
  .side { width: 100% !important; border-left: none; border-top: 1px solid var(--border); }
  .chart { min-height: 340px; }
  .divider-v { display: none; }
  .journal { grid-template-columns: 1fr; }
}

/* Zone de décision (en haut de la colonne) */
.decision { border: 2px solid var(--border); border-radius: 12px; padding: 1rem;
  background: var(--panel2); text-align: center; }
.decision.long { border-color: var(--up); background: rgba(38,166,154,.12); }
.decision.short { border-color: var(--down); background: rgba(239,83,80,.12); }
.decision.flat { border-color: var(--border); }
.decision-badge { font-size: 1.5rem; font-weight: 800; letter-spacing: .01em; }
.decision.long .decision-badge { color: var(--up); }
.decision.short .decision-badge { color: var(--down); }
.decision.flat .decision-badge { color: var(--neutral); }
.conf { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-top: .6rem; }
#conf-txt { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.conf-bar { width: 130px; height: 8px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; }
#conf-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.levels-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; justify-content: center; }
.lv { background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: .35rem .6rem; font-size: .8rem; }
.lv b { font-variant-numeric: tabular-nums; }
.lv.entry b { color: var(--accent); } .lv.stop b { color: var(--down); } .lv.tp b { color: var(--up); }

.block { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: .75rem .85rem; }
.reco-regime { color: var(--muted); font-size: .82rem; margin-bottom: .35rem; }
.reco-text { font-size: .9rem; line-height: 1.45; }

.reasons h3, .indicators h3, .topc h3 { font-size: .78rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .5rem; }
.topc .reason .w { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text);
  min-width: 1.8rem; }
.topc { border-color: var(--accent); }
.rgroup { margin-bottom: .5rem; }
.rgroup .cat { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.reason { display: flex; align-items: baseline; gap: .5rem; font-size: .84rem; padding: .12rem 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(1px); }
.dot.bullish { background: var(--up); } .dot.bearish { background: var(--down); } .dot.neutral { background: var(--neutral); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: .3rem .5rem; font-size: .77rem; }
.chip span { color: var(--muted); }
.chip b { font-variant-numeric: tabular-nums; }
.disclaimer { color: var(--muted); font-size: .72rem; margin: 0; line-height: 1.4; }

/* Lot honnêteté : B&H, échantillon faible, confiance→réussite, courbe d'équité */
.weak { opacity: .45; }
.jbh { font-size: .8rem; margin: .3rem 0 .1rem; }
.cbt { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; margin: .4rem 0 .25rem; }
.cbar { display: flex; align-items: center; gap: .5rem; font-size: .76rem; margin: .1rem 0; }
.cbar .cl { width: 62px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cbar .cb { flex: 1 1 auto; height: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.cbar .cb > span { display: block; height: 100%; }
.cbar .cv { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.spark { margin: .3rem 0 .2rem; }
.spark-cap { font-size: .72rem; margin-top: .1rem; }
.bhref { font-size: .72rem; margin-top: .4rem; }

.rrh { margin-top: .9rem !important; }

/* Bouton laboratoire (lien vers la page dédiée) */
.labbtn { background: var(--panel2); color: var(--text); border: 1px solid var(--accent);
  border-radius: 6px; padding: .4rem .7rem; cursor: pointer; font-size: .9rem; font-weight: 600;
  text-decoration: none; display: inline-block; }
.labbtn:hover { background: var(--accent); color: #fff; }

/* ===================== Page laboratoire de backtest ===================== */
.labpage { display: block; height: auto; overflow-y: auto; }
.labmain { max-width: 1120px; margin: 0 auto; padding: 1.2rem 1.4rem 4rem; }
.lab-intro { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 0 0 1.2rem; }

.lab-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.lab-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--muted); }
.lab-form select { min-width: 140px; }
.lab-form input[type=number] { background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .6rem; font-size: .95rem; font-weight: 600; width: 130px; }
.lab-detail .jstats.money .jstat { border-color: var(--accent); background: rgba(41,98,255,.08); }
.lab-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin: 0; }
.lab-form legend { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 .3rem; }
.lab-checks { display: flex; gap: .9rem; flex-wrap: wrap; }
.lab-checks label { flex-direction: row; align-items: center; gap: .3rem; color: var(--text); font-size: .84rem; }
.lab-checks input { accent-color: var(--accent); }
.lab-launch { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.lab-launch button { background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: .6rem 1.3rem; font-size: .95rem; font-weight: 700; cursor: pointer; }
.lab-launch button:disabled { opacity: .5; cursor: not-allowed; }
.lab-est { font-size: .84rem; }
.lab-est.warn { color: var(--warn); }
.lab-progress { margin-top: 1.1rem; display: flex; align-items: center; gap: .8rem; }
.lab-progress.hidden { display: none; }
.lab-bar { flex: 1 1 auto; height: 10px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; }
.lab-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.lab-progress-txt { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.lab-err { color: var(--down); font-size: .88rem; margin-top: 1rem; }

.lab-h { font-size: 1rem; margin: 1.4rem 0 .7rem; }
.lab-sub { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 1.4rem 0 .5rem; }
.lab-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.lab-table th, .lab-table td { text-align: right; padding: .42rem .6rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lab-table th:first-child, .lab-table td:first-child { text-align: left; }
.lab-table th { color: var(--muted); text-transform: uppercase; font-size: .68rem; position: sticky; top: 0; background: var(--panel); }
.lab-table th[data-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.lab-table th[data-key]:hover { color: var(--text); }
.lab-table th.sorted { color: var(--accent); }
.lab-table tr.clickable { cursor: pointer; }
.lab-table tr.clickable:hover td { background: rgba(41,98,255,.10); }
.lab-table tr.best td { background: rgba(38,166,154,.16); font-weight: 700; }
.lab-table tr.weakrow td { opacity: .5; }
.lab-table td.dtl { color: var(--accent); font-size: .74rem; }
.labpage .pos, .lab-detail .pos { color: var(--up); }
.labpage .neg, .lab-detail .neg { color: var(--down); }
.bh { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }

.lab-detail.hidden { display: none; }
.lab-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.lab-detail .jstats { display: flex; flex-wrap: wrap; gap: .6rem; }
.lab-detail .jstat { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: .4rem .7rem; font-size: .84rem; min-width: 92px; }
.lab-detail .jstat span { color: var(--muted); display: block; font-size: .66rem; text-transform: uppercase; }
.lab-detail .jstat b { font-variant-numeric: tabular-nums; }
.equity { width: 100%; height: 180px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; }
.lab-trades { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.lab-trades .lab-table td, .lab-trades .lab-table th { padding: .34rem .55rem; }

/* ---------- Écrans BAS (téléphone / tablette en PAYSAGE) ----------
   Sur un écran de 390 px de haut, la barre de navigation consommait 52 px, soit
   13 % de la hauteur utile, au détriment du contenu (la table des trades sous le
   graphe, notamment). On la comprime sans rien retirer. */
@media (max-height: 620px) {
  .top { padding: .3rem .6rem; gap: .6rem; }
  .brand { font-size: .9rem; }
  .brand .sub { display: none; }          /* redondant : le titre de page suffit */
  .top .labbtn { padding: .2rem .45rem; font-size: .72rem; }
  .top .badge { font-size: .66rem; padding: .1rem .35rem; }
}

/* Classe d'EXÉCUTION. Une stratégie dont le prix d'entrée n'est obtenable par aucun
   ordre plaçable ne doit pas présenter son espérance comme atteignable : l'avertissement
   s'affiche LÀ où le chiffre est lu et là où la stratégie est choisie. */
.exe-warn { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .35rem;
  border-radius: 5px; background: rgba(234, 57, 67, .18); color: #ff8a8a;
  border: 1px solid rgba(234, 57, 67, .45); white-space: nowrap; vertical-align: middle;
  cursor: help; }


/* Section « flux » de l'écran Données : même trame visuelle que le magasin de bougies,
   pour que l'œil compare les deux blocs sans réapprendre une mise en page. */
.dh2 { margin: 2.2rem 0 .4rem; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; }