/* V8 "Cockpit Dashboard" - fullscreen 100dvh, video + timeline left, detail panel right, trade tape bottom */

:root {
  /* TONAL LAYERS (5 levels, top = lifted, bottom = sunken) */
  --bg-sunk:   #050608;   /* deepest, "punched in" zones (session header) */
  --bg:        #0a0b0d;   /* page bg */
  --bg-deep:   #060709;   /* page bg gradient end */
  --surface:   #14171e;   /* card base */
  --surface-2: #1c2029;   /* lifted card (hover, active) */
  --surface-3: #232732;   /* highest tone (nested) */

  --accent:    #a0afc8;
  --accent-2:  #c0cddd;
  --accent-3:  #dce4f0;
  --ink:       #e8ecf2;
  --ink-2:     #c8d0dc;
  --ink-3:     #8a92a0;
  --ink-4:     #6d7585;
  --ink-5:     #2a2e36;

  /* Hairline lines (very subtle, used sparingly) */
  --line:      rgba(160,175,200,0.06);
  --line-2:    rgba(160,175,200,0.14);

  /* MODERN SEPARATION SYSTEM */
  --highlight-top:    rgba(255,255,255,0.04);   /* inset top highlight (lifted card) */
  --highlight-strong: rgba(255,255,255,0.06);
  --shadow-sink:      0 1px 0 var(--bg-deep);                                  /* card "sits on" bg */
  --shadow-card:      inset 0 1px 0 var(--highlight-top), 0 1px 0 var(--bg-deep), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-hover:     inset 0 1px 0 var(--highlight-strong), 0 1px 0 var(--bg-deep), 0 12px 32px rgba(0,0,0,0.45);
  --shadow-flush:     inset 0 1px 0 var(--highlight-top);

  --pos:       #22c55e;
  --pos-soft:  rgba(34,197,94,0.14);
  --pos-glow:  rgba(34,197,94,0.30);
  --neg:       #ef4444;
  --neg-soft:  rgba(239,68,68,0.14);
  --neg-glow:  rgba(239,68,68,0.30);

  --font:      'Roboto', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 18px;

  --header-h:   62px;
  --tape-w:     328px;
  --tl-h:       156px;
  --panel-w:    408px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased }
html, body { height: 100%; margin: 0; overflow: hidden }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: 'tnum' 1;
  position: relative;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(160,175,200,0.04), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(160,175,200,0.03), transparent 50%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

*:focus { outline: none }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit }

/* ─── APP GRID : header / main (3 cols: tape | video | panel) / timeline ─── */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--tl-h);
  height: 100dvh;
}

/* ─── HEADER ─── */
.hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  background: var(--bg);
  position: relative;
}
.hdr::after {
  content: '';
  position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 50%, transparent);
}
.hdr-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  transition: color 150ms cubic-bezier(0.22,1,0.36,1), background 150ms cubic-bezier(0.22,1,0.36,1);
}
.hdr-back:hover { color: var(--ink); background: rgba(160,175,200,0.06) }
.hdr-back svg { width: 18px; height: 18px }

.hdr-date {
  justify-self: center;
  display: flex; align-items: baseline; gap: 14px;
}
.hdr-date .dow { font-family: var(--font); font-size: 1.18rem; font-weight: 500; color: var(--ink-2); text-transform: capitalize }
.hdr-date .num { font-family: var(--font); font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em }
.hdr-date .month-year { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums }

/* Logo site canonique : MAPROPFIRM.FR (mirror .fh-logo from styles-common.css) */
.hdr-brand {
  justify-self: end;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: color 150ms cubic-bezier(0.22,1,0.36,1), background 150ms cubic-bezier(0.22,1,0.36,1);
}
.hdr-brand:hover { color: var(--accent-2); background: rgba(160,175,200,0.06) }

/* ─── MAIN : video-stack (left) + detail-panel (right) ─── */
.main {
  display: grid;
  grid-template-columns: 1fr var(--tape-w) var(--panel-w);
  gap: 14px;
  padding: 14px 16px 14px;
  min-height: 0; min-width: 0;
}

/* VIDEO : stage uses container queries to compute the largest 16:9 rect that fits.
   justify-content: flex-end → any empty horizontal space goes to the LEFT (between page edge and video),
   making the right margin equal to the grid gap (visually balanced with the tape/panel gap). */
.stage {
  position: relative;
  min-width: 0; min-height: 0;
  container-type: size;
  display: flex; align-items: center; justify-content: flex-end;
}
.video-frame {
  position: relative;
  /* Largest 16:9 rectangle that fits in the container, no letterbox from our side */
  width: min(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--highlight-strong),
    0 0 0 1px rgba(160,175,200,0.08),
    0 18px 48px rgba(0,0,0,0.5);
}
#ytplayer, .video-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  border: 0 !important;
  display: block !important;
}
.live-pill {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  background: rgba(10,11,13,0.78);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 180ms;
  pointer-events: none;
  z-index: 5;
  backdrop-filter: blur(6px);
}
.live-pill.is-on { opacity: 1 }
.live-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 8px var(--pos-glow);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }

/* ─── TIMELINE (bottom row of .app, with horizontal + bottom margin) ─── */
.tl {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 9px;
  padding: 10px 14px 10px;
  margin: 0 16px 14px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-height: 0;
}
/* Top row : clock | legend (center) | lead-in (right) */
.tl-top {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.tl-top .tl-legend { flex: 1 1 auto; justify-content: center }
.tl-top .lead { margin-left: auto }
.tl-clock {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.tl-clock .now { color: var(--ink); font-weight: 600 }
.tl-clock .dim { color: var(--ink-5) }

/* Lead-in chips */
.lead { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.74rem }
.lead .lbl { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500 }
.lead-chips {
  display: inline-flex; gap: 0;
  border-radius: 999px;
  background: var(--bg-sunk);
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.3);
}
.lead-chip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 11px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: color 150ms, background 150ms;
  font-variant-numeric: tabular-nums;
}
.lead-chip:hover { color: var(--ink) }
.lead-chip[aria-pressed="true"] { background: var(--accent); color: var(--bg) }

/* Timeline bar : sunken into the timeline panel, taller for swim-lanes.
   NO overflow:hidden — tips for longs need to escape upward, scrub triangles extend outside. */
.tl-bar {
  position: relative;
  background: var(--bg-sunk);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 0;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(0,0,0,0.4);
}
/* Subtle midline dividing LONG lane (top) from SHORT lane (bottom) */
.tl-bar::before {
  content: '';
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,175,200,0.10) 30%, rgba(160,175,200,0.10) 70%, transparent);
  pointer-events: none;
  z-index: 1;
}
/* Lane labels (only on hover/active) */
.tl-bar::after {
  content: 'LONG · SHORT';
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--ink-5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
  z-index: 1;
}
.tl-bar:hover::after { opacity: 0.5 }
.tl-progress {
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 100%;
  background: rgba(160,175,200,0.05);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 180ms linear;
}
.tl-scrub {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--ink);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 180ms linear;
  will-change: transform;
  z-index: 4;
}
.tl-scrub::before {
  content: ''; position: absolute; top: -2px; left: -4px;
  width: 10px; height: 6px; background: var(--ink);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.tl-scrub::after {
  content: ''; position: absolute; bottom: -2px; left: -4px;
  width: 10px; height: 6px; background: var(--ink);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* EQUITY : discreet background curve spanning the FULL bar height, behind ribbons.
   Includes: gradient area fill under the curve + swing dots at each data point. */
.tl-equity {
  position: absolute;
  inset: 5px 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.36;
}
.tl-equity svg { width: 100%; height: 100%; display: block; overflow: visible }
.tl-equity .baseline { stroke: var(--ink-5); stroke-width: 0.5; stroke-dasharray: 2 4; opacity: 0 }
.tl-equity .seg-pos { stroke: var(--pos); stroke-width: 1.5; fill: none; filter: drop-shadow(0 0 2px rgba(34,197,94,0.35)) }
.tl-equity .seg-neg { stroke: var(--neg); stroke-width: 1.5; fill: none; filter: drop-shadow(0 0 2px rgba(239,68,68,0.35)) }
.tl-equity .area { opacity: 0.9 }
/* Swing dots = HTML overlay (SVG would stretch with preserveAspectRatio="none") */
.tl-equity .vertices { position: absolute; inset: 0; pointer-events: none }
.tl-equity .vertices .v {
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3px rgba(255,255,255,0.45);
  transform: translate(-50%, -50%);
}
.tl-equity path.draw {
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
  animation: drawIn 1100ms cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes drawIn { to { stroke-dashoffset: 0 } }

/* ─── TRADE RIBBONS : swim-lane approach, simplified visual language ─── */
.tl-trades { position: absolute; inset: 0; pointer-events: none; z-index: 2 }
.tl-trade {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  min-width: 5px;
}
/* LONGS lane : top half (with small gap from midline) */
.tl-trade.is-long {
  top: 14%;
  height: 28%;
}
/* SHORTS lane : bottom half (with small gap from midline) */
.tl-trade.is-short {
  top: 58%;
  height: 28%;
}

/* RIBBON BODY = clean rounded pill with gradient.
   Left edge = entry, right edge = exit. No protruding caps for clean chains. */
.tl-trade .shaft {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1),
              filter 180ms cubic-bezier(0.22,1,0.36,1);
}
.tl-trade.is-long .shaft {
  background: linear-gradient(180deg, rgba(34,197,94,0.95), rgba(34,197,94,0.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(0,0,0,0.25),
    0 0 8px rgba(34,197,94,0.12);
}
.tl-trade.is-short .shaft {
  background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(239,68,68,0.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(0,0,0,0.25),
    0 0 8px rgba(239,68,68,0.12);
}

/* RENFORT : solid white disk, positioned at actual time on TOP HALF of ribbon */
.tl-trade .reinf {
  position: absolute;
  top: 26%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.98);
  box-shadow:
    0 0 6px rgba(255,255,255,0.65),
    0 0 0 1.5px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

/* SORTIE PARTIELLE : white donut (ring), positioned at actual time on BOTTOM HALF of ribbon */
.tl-trade .partial {
  position: absolute;
  top: 74%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 2.5px rgba(255,255,255,0.96),
    0 0 5px rgba(255,255,255,0.35),
    0 0 0 1.5px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

/* Hover : ribbon lifts + brightens */
.tl-trade:hover { z-index: 4 }
.tl-trade:hover .shaft {
  filter: brightness(1.18) saturate(1.12);
  transform: scaleY(1.10);
}

/* Active : ring outline + brightness */
.tl-trade[data-active="true"] { z-index: 5 }
.tl-trade[data-active="true"] .shaft {
  filter: brightness(1.28) saturate(1.22);
  transform: scaleY(1.12);
}
.tl-trade[data-active="true"]::after {
  content: '';
  position: absolute;
  inset: -3px -3px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55), 0 0 12px rgba(255,255,255,0.15);
}

.tl-trade .tip {
  position: absolute;
  left: 0;
  background: var(--bg);
  border: 1px solid var(--line-2);
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
  z-index: 10;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
/* Long tip goes BELOW the ribbon (longs are at top of bar) */
.tl-trade.is-long .tip { top: calc(100% + 10px) }
/* Short tip goes ABOVE the ribbon (shorts are at bottom of bar) */
.tl-trade.is-short .tip { bottom: calc(100% + 10px) }
.tl-trade:hover .tip { opacity: 1 }

/* ─── TIMELINE LEGEND (inline in top row) ─── */
.tl-legend {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-3);
}
.tl-legend .item { display: inline-flex; align-items: center; gap: 6px; line-height: 1 }
.tl-legend .sep { width: 1px; height: 11px; background: var(--line-2); margin: 0 2px }
/* Mini ribbon samples mirroring the real ones */
.tl-legend .lg-ribbon-long, .tl-legend .lg-ribbon-short {
  width: 24px; height: 9px; border-radius: 3px;
  position: relative;
}
.tl-legend .lg-ribbon-long {
  background: linear-gradient(180deg, rgba(34,197,94,0.95), rgba(34,197,94,0.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.tl-legend .lg-ribbon-short {
  background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(239,68,68,0.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.tl-legend .lg-reinf {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 0 4px rgba(255,255,255,0.55), 0 0 0 1px rgba(0,0,0,0.35);
}
.tl-legend .lg-partial {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.96),
    0 0 3px rgba(255,255,255,0.3),
    0 0 0 1px rgba(0,0,0,0.35);
}

/* ─── DETAIL PANEL (right) : 3-row grid = session / divider / trade-body ─── */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* SESSION (top) : SUNKEN tone — visually "embedded" under the panel surface */
.panel-session {
  padding: 16px 18px 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34,197,94,0.07), transparent 60%),
    var(--bg-sunk);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
.panel-session.is-neg-day {
  background:
    radial-gradient(circle at 100% 0%, rgba(239,68,68,0.07), transparent 60%),
    var(--bg-sunk);
}
.ps-lbl {
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.ps-lbl::before {
  content: ''; width: 3px; height: 11px; background: var(--accent); border-radius: 1.5px; opacity: 0.7;
}
.ps-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.ps-pnl {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ps-pnl.is-pos { color: var(--pos) }
.ps-pnl.is-neg { color: var(--neg) }
.ps-stats {
  display: flex; align-items: baseline; gap: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ps-stats .stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 8px; border-right: 1px solid var(--line) }
.ps-stats .stat:last-child { border-right: 0; padding-right: 0 }
.ps-stats .stat .v { font-weight: 700; color: var(--ink-2) }
.ps-stats .stat .v.is-pos { color: var(--pos) }
.ps-stats .stat .v.is-neg { color: var(--neg) }
.ps-stats .stat .k { font-size: 0.66rem; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em }

/* DIVIDER : strong visual break, NO border — lifted from sunken session via inset top highlight */
.panel-divider {
  padding: 10px 18px 9px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: inset 0 1px 0 var(--highlight-strong);
}
.pd-lbl {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  display: flex; align-items: center; gap: 8px;
}
.pd-lbl::before {
  content: ''; width: 3px; height: 11px; background: var(--ink); border-radius: 1.5px; opacity: 0.85;
}
.pd-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* Detail body : active trade dashboard or empty */
.panel-body {
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  background: var(--surface);
}
.panel-body::-webkit-scrollbar { width: 5px }
.panel-body::-webkit-scrollbar-track { background: transparent }
.panel-body::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 3px }
.panel-body::-webkit-scrollbar-thumb:hover { background: var(--ink-4) }

.detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 200px;
  color: var(--ink-4);
  font-family: var(--font);
  font-size: 0.92rem;
  text-align: center; gap: 12px;
  padding: 40px 20px;
}
.detail-empty svg { width: 36px; height: 36px; opacity: 0.4 }

/* Active trade detail HEADER block */
.det-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
}
.det-hd::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.det-hd-left {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
}
.det-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
}
.det-dir.is-pos { background: var(--pos-soft); color: var(--pos) }
.det-dir.is-neg { background: var(--neg-soft); color: var(--neg) }
.det-sym {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.det-qty {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 6px;
}
.det-pnl {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
}
.det-pnl.is-pos { color: var(--pos) }
.det-pnl.is-neg { color: var(--neg) }

.det-times {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 10px 14px 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--bg-sunk);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.2);
}
.det-times .col { display: flex; flex-direction: column; gap: 3px }
.det-times .col .k { font-family: var(--font); font-size: 0.66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em }
.det-times .col .v { font-size: 0.98rem; font-weight: 600; color: var(--ink) }
.det-times .col.right { text-align: right }
.det-times .arrow { color: var(--ink-4); font-size: 0.92rem }

/* STATS GRID : key-value list, no borders — alternating subtle tone bands */
.det-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-flush);
}
.det-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  position: relative;
}
.det-stat + .det-stat::before {
  content: '';
  position: absolute; left: 14px; right: 14px; top: 0;
  height: 1px;
  background: var(--line);
}
.det-stat:nth-child(even) { background: rgba(255,255,255,0.012) }
.det-stat .k {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--ink-3);
  font-weight: 400;
}
.det-stat .v {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.det-stat .v.is-pos { color: var(--pos) }
.det-stat .v.is-neg { color: var(--neg) }
.det-stat .v small {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-4);
  margin-left: 4px;
}

/* RENFORTS DROPDOWN (collapsible) */
.det-drop {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--shadow-flush);
}
.det-drop summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  user-select: none;
  transition: background 150ms;
}
.det-drop summary::-webkit-details-marker { display: none }
.det-drop summary:hover { background: var(--surface-3) }
.det-drop summary .count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums }
.det-drop summary .chev {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1);
  color: var(--ink-3);
}
.det-drop[open] summary .chev { transform: rotate(180deg); color: var(--accent-2) }
.det-drop-body { padding: 8px 0 10px; position: relative }
.det-drop-body::before {
  content: '';
  position: absolute; left: 14px; right: 14px; top: 0;
  height: 1px;
  background: var(--line);
}
.det-fill {
  display: grid;
  grid-template-columns: 56px 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms, opacity 220ms cubic-bezier(0.22,1,0.36,1);
}
/* Already played : visually muted to show "déjà vu" */
.det-fill.is-passed {
  opacity: 0.38;
}
.det-fill.is-passed .ft-role {
  filter: saturate(0.5);
}
.det-fill.is-passed:hover {
  opacity: 0.75;
}
.det-fill:hover { background: var(--surface-3) }
.det-fill .ft-time { color: var(--ink-3); font-size: 0.74rem }
.det-fill .ft-role {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  text-align: center;
}
.det-fill .ft-role.entry { background: var(--pos-soft); color: var(--pos) }
.det-fill .ft-role.entry-short { background: var(--neg-soft); color: var(--neg) }
.det-fill .ft-role.addon { background: rgba(160,175,200,0.12); color: var(--accent-2) }
.det-fill .ft-role.partial { background: rgba(160,175,200,0.06); color: var(--ink-3) }
.det-fill .ft-role.exit { background: rgba(160,175,200,0.10); color: var(--ink-2) }
.det-fill .ft-meta { color: var(--ink-2); font-weight: 500 }
.det-fill .ft-meta .q { color: var(--ink-4); margin-right: 4px }
.det-fill .ft-go { color: var(--ink-4); font-size: 0.88rem; transition: color 120ms, transform 120ms }
.det-fill:hover .ft-go { color: var(--accent-2); transform: translateX(2px) }

/* ─── TAPE : vertical sidebar (left of video), 2-col grid, scrollable ─── */
.tape-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 12px 14px 12px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-height: 0; min-width: 0;
}
.tape-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 6px 8px;
  position: relative;
}
.tape-head::after {
  content: '';
  position: absolute; left: 6px; right: 6px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 50%, transparent);
}
.tape-head .lbl {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 8px;
}
.tape-head .lbl::before {
  content: ''; width: 3px; height: 11px; background: var(--accent); border-radius: 1.5px; opacity: 0.7;
}
.tape-head .count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.tape-head .count strong { color: var(--ink-2); font-weight: 700 }
.tape-head .kbhints {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-4);
  display: flex; gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tape-head .kbhints span { display: inline-flex; align-items: center; gap: 4px }
.tape-head .kbhints kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-3);
}
@media (max-width: 1400px) {
  .tape-head .kbhints .hint-esc { display: none }
}
@media (max-width: 1180px) {
  .tape-head .kbhints .hint-space { display: none }
}

.tape {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 4px 6px;
  align-content: start;
  scroll-behavior: smooth;
}
.tape::-webkit-scrollbar { width: 5px }
.tape::-webkit-scrollbar-track { background: transparent }
.tape::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 3px }
.tape::-webkit-scrollbar-thumb:hover { background: var(--ink-4) }

.tape-card {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 150px;
  box-shadow: var(--shadow-flush);
  transition: background 180ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 180ms cubic-bezier(0.22,1,0.36,1),
              transform 180ms cubic-bezier(0.22,1,0.36,1);
}
/* Direction = subtle NEUTRAL accent (no green/red confusion with PNL).
   Only the dir badge carries the color. */
.tape-card:hover {
  background: var(--surface-3);
  box-shadow: inset 0 1px 0 var(--highlight-strong), 0 4px 12px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.tape-card[data-active="true"] {
  background: var(--surface-3);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--highlight-strong),
    0 0 0 1px rgba(160,175,200,0.28),
    0 0 0 3px rgba(160,175,200,0.07),
    0 6px 18px rgba(0,0,0,0.4);
}
.tc-top {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tc-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.tc-dir svg { width: 15px; height: 15px; display: block }
/* Time + duration stacked in a column next to the direction badge */
.tc-meta {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.tc-dir.is-long {
  background: var(--pos-soft);
  color: var(--pos);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tc-dir.is-short {
  background: var(--neg-soft);
  color: var(--neg);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tc-time {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.tc-dur {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc-mid {
  display: flex; align-items: baseline; gap: 6px;
}
.tc-sym {
  font-family: var(--font);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tc-qty {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-4);
}
.tc-bot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.tc-pnl {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tc-pnl.is-pos { color: var(--pos) }
.tc-pnl.is-neg { color: var(--neg) }
.tc-tags {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: auto; /* push to the bottom of the card so heights match */
}
.tc-tag {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 7px 3px 6px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.tc-tag svg { width: 10px; height: 10px; display: block; flex-shrink: 0 }
.tc-tag .n { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums }
.tc-tag.tag-reinf {
  background: rgba(192,205,221,0.14);
  color: var(--accent-3);
  box-shadow: inset 0 0 0 1px rgba(192,205,221,0.26);
}
.tc-tag.tag-partial {
  background: rgba(160,175,200,0.07);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(160,175,200,0.14);
}

/* SKELETON */
.skel-pnl::before { content: '$-,---.--'; color: var(--ink-5) }
.skel-card {
  height: 150px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-flush);
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important }
  .tl-equity path.draw { stroke-dashoffset: 0 !important; animation: none !important }
}

/* RESPONSIVE */
@media (max-width: 1400px) {
  :root { --panel-w: 380px; --tape-w: 296px }
  .det-sym { font-size: 1.3rem }
}
@media (max-width: 1180px) {
  :root { --panel-w: 354px; --tape-w: 256px }
}
@media (max-width: 960px), (max-height: 640px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto }
  /* Pile verticale réordonnable : .main est dissous (display:contents) pour que
     la frise (.tl) puisse s'intercaler AVANT le panneau de détail via order. */
  .app { display: flex; flex-direction: column; height: auto; min-width: 0; gap: 14px }
  .main { display: contents }
  .hdr { order: 1 }
  .stage { order: 2; margin: 0 12px; aspect-ratio: 16/9; container-type: normal; width: auto }
  .stage .video-frame { width: 100%; aspect-ratio: 16/9 }
  .tl { order: 3; margin: 0 12px; min-width: 0 }          /* timeline juste sous la vidéo */
  .tape-wrap { order: 4; margin: 0 12px; max-height: none; min-width: 0 }
  .tape { grid-template-columns: 1fr 1fr; min-width: 0 }
  .panel { order: 5; margin: 0 12px 24px; max-height: none; min-width: 0 }  /* détail = dernier */
  /* La frise a besoin d'une hauteur explicite en mobile (le grid 1fr collapse sinon) */
  .tl-bar { min-height: 116px }
}

/* ─── MOBILE : header compact + contrôles timeline qui refluent ─── */
@media (max-width: 720px) {
  .hdr {
    grid-template-columns: auto 1fr;
    padding: 0 12px;
    gap: 8px;
    min-height: var(--header-h);
  }
  .hdr::after { left: 12px; right: 12px }
  .hdr-back { font-size: 0.92rem; padding: 8px 10px; gap: 7px }
  .hdr-back svg { width: 16px; height: 16px }
  .hdr-date { justify-self: end; gap: 7px }
  .hdr-date .dow { font-size: 0.9rem }
  .hdr-date .num { font-size: 1.05rem }
  .hdr-date .month-year { font-size: 0.8rem }
  .hdr-brand { display: none }

  /* Barre timeline : horloge + avance d'abord, légende dessous pleine largeur */
  .tl-top { gap: 8px 12px; row-gap: 8px }
  .tl-top .tl-legend { flex: 1 1 100%; order: 3; justify-content: flex-start; font-size: 0.7rem }
  .tl-top .lead { margin-left: auto }
  .lead-chips { flex-wrap: wrap; justify-content: flex-end }

  /* Frise mobile épurée : barres long/short un peu plus fines, et marqueurs
     renfort/sortie partielle MASQUÉS. À cette compression latérale ils débordent
     des barres courtes et brouillent la lecture ; le détail reste accessible au
     clic sur le trade (panneau "Trade sélectionné"). */
  .tl-trade.is-long  { top: 18%; height: 24% }
  .tl-trade.is-short { top: 58%; height: 24% }
  .tl-trade .reinf, .tl-trade .partial { display: none }
}

@media (max-width: 420px) {
  .tape { grid-template-columns: 1fr 1fr }
  .hdr-date .dow { display: none }   /* garde num + mois pour gagner la place */
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGES DE SESSION INDEXABLES (.has-seo)
   La coquille générique /replay reste plein écran sans scroll. Les pages
   pré-générées /replay/<date> ajoutent la classe .has-seo sur <html> : le
   cockpit garde le plein écran au chargement (look appli) MAIS la page peut
   scroller pour révéler le contenu textuel unique (indexable Google) en dessous.
   ════════════════════════════════════════════════════════════════════════════ */
html.has-seo, html.has-seo body { overflow: visible; height: auto }
html.has-seo .app { height: 100dvh }   /* cockpit = 1er écran intact */

.session-seo {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
  padding: 56px 20px 80px;
  font-family: var(--font); color: var(--ink-2);
}
.session-seo h1 { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.25 }
.session-seo .seo-summary { font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 30px }
.session-seo h2 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 34px 0 14px }
.session-seo .seo-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px }
.session-seo .seo-stat { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-flush); min-width: 116px }
.session-seo .seo-stat .k { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 5px }
.session-seo .seo-stat .v { font-family: var(--font-mono); font-size: 1.22rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.session-seo .seo-stat .v.is-pos { color: var(--pos) }
.session-seo .seo-stat .v.is-neg { color: var(--neg) }
.session-seo table.seo-trades { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; margin: 6px 0 8px }
.session-seo table.seo-trades th { text-align: left; color: var(--ink-4); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px; border-bottom: 1px solid var(--line-2) }
.session-seo table.seo-trades td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums }
.session-seo table.seo-trades td.pos { color: var(--pos) }
.session-seo table.seo-trades td.neg { color: var(--neg) }
.session-seo .seo-cta { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: 0.95rem; line-height: 1.7 }
.session-seo .seo-cta a { color: var(--accent-2); font-weight: 600; text-decoration: none }
.session-seo .seo-cta a:hover { color: var(--accent-3) }
.session-seo .seo-scroll-hint {
  position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  font-size: 0.7rem; color: var(--ink-4); font-family: var(--font-mono); letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 7px; opacity: 0.7; pointer-events: none;
}
@media (max-width: 960px), (max-height: 640px) {
  html.has-seo .app { height: auto }   /* mobile : app déjà en flux vertical, pas de plein écran forcé */
  .session-seo { padding-top: 32px }
  .session-seo .seo-scroll-hint { display: none }
}