/*
 * JevScreener — terminal. Les jetons viennent de DESIGN.md à la racine : toute
 * couleur, taille ou rayon se lit ici par variable, jamais en dur ailleurs.
 * Sombre seulement. Une ligne = 28 px. Rien sous 12 px.
 */
:root{
  --bg:#0B0E13; --surface:#11151C; --raised:#181E28; --rule:#232B37; --rule2:#313B4A;
  --ink:#E6EAF0; --ink2:#9AA5B4;
  --buy:#3DD68C; --sell:#F26B76; --signal:#F5B83D;
  --buy-soft:#12301F; --sell-soft:#3A1A20; --signal-soft:#33291A;
  --co-retail:#8A95A5; --co-fresh:#6B7686; --co-bot:#4D5766;
  --hand-1:#E3A24A; --hand-2:#7FB8D1; --hand-3:#C792EA; --hand-4:#F0A3A3; --hand-5:#9AD1A3; --hand-6:#D7C27A;
  --t-display:22px; --t-title:16px; --t-body:14px; --t-data:13px; --t-label:12px;
  --r-sm:3px; --r-md:6px;
  --row:28px; --top:44px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 var(--t-data)/1.3 var(--font);
     font-feature-settings:"tnum"; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-weight:600}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
.mono{font-family:var(--mono); font-size:var(--t-label)}
.buy{color:var(--buy)} .sell{color:var(--sell)} .mute{color:var(--ink2)} .sig{color:var(--signal)}
.num{text-align:right; white-space:nowrap}
:focus-visible{outline:2px solid var(--signal); outline-offset:-2px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ————— barre supérieure : tout sur une ligne ————— */
.top{position:sticky; top:0; z-index:30; height:var(--top); display:flex; align-items:center; gap:16px; padding:0 16px;
     background:var(--surface); border-bottom:1px solid var(--rule)}
.brand{font-weight:600; font-size:var(--t-title); letter-spacing:-.01em; white-space:nowrap}
.brand b{color:var(--signal); font-weight:600}
.brand{display:inline-flex; align-items:center; gap:8px}
.brand-logo{height:24px; width:auto; display:block}
.top nav{display:flex; gap:2px}
.top nav a{padding:6px 10px; border-radius:var(--r-sm); color:var(--ink2); font-size:var(--t-label); font-weight:500}
.top nav a:hover{color:var(--ink)} .top nav a.on{color:var(--ink); background:var(--raised)}
.stat-line{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:var(--t-label); color:var(--ink2); white-space:nowrap}
.stat-line b{color:var(--ink); font-weight:500}
.dot{width:7px; height:7px; border-radius:999px; background:var(--ink2); flex:none}
.dot.live{background:var(--buy); animation:pulse 2.2s ease-in-out infinite}
.dot.boot{background:var(--signal); animation:pulse 1.2s ease-in-out infinite}
.dot.stale{background:var(--signal)} .dot.off{background:var(--sell)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* recherche */
.q{position:relative; flex:0 1 380px; min-width:160px}
.q input{width:100%; height:30px; padding:0 10px 0 30px; border-radius:var(--r-md); border:1px solid var(--rule2); background:var(--bg);
         color:var(--ink); font:400 var(--t-data) var(--font)}
.q input::placeholder{color:var(--ink2)}
.q input:focus{outline:none; border-color:var(--signal)}
.q svg{position:absolute; left:10px; top:8px; color:var(--ink2)}
.drop{position:absolute; top:36px; left:0; right:0; min-width:340px; background:var(--raised); border:1px solid var(--rule2); border-radius:var(--r-md);
      overflow:hidden; display:none; z-index:40}
.drop.on{display:block}
.drop h4{margin:0; padding:8px 12px 4px; font:500 var(--t-label) var(--font); color:var(--ink2)}
.drop .r{display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:7px 12px; cursor:pointer}
.drop .r:hover,.drop .r.sel{background:var(--rule)}
.drop .r b{font-weight:600} .drop .r small{color:var(--ink2); font-size:var(--t-label)}
.drop .r .num{color:var(--ink2); font-size:var(--t-label); line-height:1.3}
.drop .empty{padding:12px; color:var(--ink2)}

/* ————— grille de page ————— */
.home{display:grid; grid-template-columns:minmax(0,1fr) 480px; height:calc(100vh - var(--top))}
.home > section{min-width:0; display:flex; flex-direction:column; min-height:0}
.home > section + section{border-left:1px solid var(--rule)}
.bar{display:flex; align-items:center; gap:12px; min-height:40px; padding:6px 12px; border-bottom:1px solid var(--rule); background:var(--surface); flex-wrap:wrap}
.bar h2{font-size:var(--t-label); font-weight:600; text-transform:none; color:var(--ink)}
.bar .mute{font-size:var(--t-label)}
.scroll{overflow:auto; min-height:0; flex:1}
.page{padding:16px; max-width:1600px; margin:0 auto}
.foot{padding:10px 12px; border-top:1px solid var(--rule); color:var(--ink2); font-size:var(--t-label); line-height:1.5}
.foot a{text-decoration:underline; text-underline-offset:2px}

/* légende : ce que veulent dire la barre et le score */
.legend{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:var(--t-label); color:var(--ink2); margin-left:auto}
.legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:0}

/* ————— tableau des paires ————— */
table{border-collapse:collapse; width:100%}
th,td{height:var(--row); padding:0 10px; white-space:nowrap; border-bottom:1px solid var(--rule); text-align:left}
th{position:sticky; top:0; z-index:2; background:var(--surface); color:var(--ink2); font-size:var(--t-label); font-weight:500; user-select:none}
th.sort{cursor:pointer} th.sort:hover{color:var(--ink)} th.on{color:var(--ink)}
th.on::after{content:" ↓"; color:var(--signal)} th.on.asc::after{content:" ↑"}
th .def{border-bottom:1px dotted var(--ink2)}
th.num,td.num{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--raised)}
td.pair b{font-weight:600} td.pair span{color:var(--ink2); margin-left:4px; font-size:var(--t-label)}
td.pair .new{display:inline-block; width:6px; height:6px; border-radius:999px; background:var(--signal); margin:0 6px 1px 0}
.pend td{color:var(--ink2); cursor:default}
.pend td.pair b{color:var(--ink2); font-weight:500}

/* verdict, score, risque, cohorte */
.verdict{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:var(--r-sm); font-size:var(--t-label); font-weight:500;
         background:var(--raised); color:var(--ink); cursor:help}
.verdict.good{background:var(--buy-soft); color:var(--buy)} .verdict.bad{background:var(--sell-soft); color:var(--sell)}
.verdict .cav{width:6px; height:6px; border-radius:999px; background:var(--signal)}
.score{font-weight:600; cursor:help} .score.buy{color:var(--buy)} .score.sell{color:var(--sell)} .score.mid{color:var(--ink2)}
.score.dim{opacity:.5}
.risk{font-weight:500; cursor:help} .risk.low{color:var(--ink2)} .risk.medium{color:var(--signal)} .risk.high{color:var(--sell)}
.co{display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:var(--r-sm); font-size:var(--t-label); font-weight:500;
    color:var(--ink2); background:var(--raised); white-space:nowrap; cursor:help}
.co[data-c=smart_money]{color:var(--buy); background:var(--buy-soft)} .co[data-c=exit_liquidity]{color:var(--sell); background:var(--sell-soft)}

/* barre de flux : ventes vers la gauche, achats vers la droite */
.flow{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:64px; height:8px; cursor:help}
.flow .s,.flow .b{display:flex; overflow:hidden; background:var(--rule)}
.flow .s{justify-content:flex-end; border-radius:2px 0 0 2px} .flow .b{border-radius:0 2px 2px 0}
.flow i{display:block; height:100%}
.flow i.smart_money{background:var(--buy)} .flow i.exit_liquidity{background:var(--sell)}
.flow i.retail{background:var(--co-retail)} .flow i.fresh_money{background:var(--co-fresh)} .flow i.sniper_bot{background:var(--co-bot)}
.flow.big{width:100%; height:14px}

/* info-bulle : une seule, posée par app.js, jamais coupée par un overflow */
#tip{position:fixed; z-index:60; max-width:340px; padding:8px 10px; background:var(--raised); border:1px solid var(--rule2); border-radius:var(--r-md);
     font-size:var(--t-data); line-height:1.45; color:var(--ink); pointer-events:none; display:none}
#tip b{font-weight:600}

/* ————— le fil d'événements ————— */
.seg{display:flex; gap:2px; flex-wrap:wrap}
.seg button{background:none; border:0; padding:4px 8px; border-radius:var(--r-sm); color:var(--ink2); font-size:var(--t-label); font-weight:500; cursor:pointer}
.seg button:hover{color:var(--ink)} .seg button.on{background:var(--raised); color:var(--ink)}
.ev{border-bottom:1px solid var(--rule); cursor:pointer}
.ev .ln{display:grid; grid-template-columns:34px 76px minmax(0,1fr) auto; gap:8px; align-items:center; height:var(--row); padding:0 12px}
.ev.nopair .ln{grid-template-columns:34px minmax(0,1fr) auto}
.ev:hover .ln{background:var(--raised)}
.ev .age{color:var(--ink2); font-size:var(--t-label)} .ev .age.hot{color:var(--signal)}
.ev .pr{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.ev .what{display:flex; gap:6px; align-items:center; overflow:hidden; white-space:nowrap}
.ev .who{font-family:var(--mono); font-size:var(--t-label); color:var(--ink2)}
.ev .verb{overflow:hidden; text-overflow:ellipsis; font-size:var(--t-data); color:var(--ink)}
.ev .verb.good{color:var(--buy)} .ev .verb.bad{color:var(--sell)} .ev .verb.warn{color:var(--signal)}
.ev .amt{font-weight:600; text-align:right; white-space:nowrap}
.kind{font-size:var(--t-label); font-weight:500; color:var(--ink2); white-space:nowrap}
.kind.good{color:var(--buy)} .kind.bad{color:var(--sell)} .kind.warn{color:var(--signal)}
.ev .more{display:none; padding:4px 12px 12px 54px; color:var(--ink2); font-size:var(--t-body); line-height:1.45; background:var(--raised)}
.ev .more b{color:var(--ink); font-weight:600; display:block; margin-bottom:2px}
.ev.nopair .more{padding-left:54px}
.ev.open .more{display:block} .ev.open .ln{background:var(--raised)}
.proof{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.proof a{font-family:var(--mono); font-size:var(--t-label); padding:2px 6px; border:1px solid var(--rule2); border-radius:var(--r-sm); color:var(--ink)}
.proof a:hover{border-color:var(--signal)}
.ev.new .ln{animation:arrive 1.8s ease-out}
@keyframes arrive{0%{background:var(--signal-soft)}100%{background:transparent}}

.empty{padding:24px 12px; color:var(--ink2); line-height:1.5}
.empty b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
.empty code{font-family:var(--mono); color:var(--ink); background:var(--raised); padding:1px 5px; border-radius:var(--r-sm)}

/* ————— page de paire ————— */
.strip{display:flex; align-items:center; gap:8px 20px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--rule); background:var(--surface)}
.strip h1{font-size:var(--t-display); letter-spacing:-.01em} .strip h1 span{color:var(--ink2); font-weight:400}
.strip .px{font-size:var(--t-display); font-weight:600; letter-spacing:-.01em}
.kv{display:flex; flex-direction:column; gap:1px}
.kv span{font-size:var(--t-label); color:var(--ink2)} .kv b{font-weight:600}
.wins{display:flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden}
.win{display:grid; grid-template-columns:auto auto; column-gap:10px; row-gap:2px; padding:5px 10px; min-width:118px; border-left:1px solid var(--rule)}
.win:first-child{border-left:0}
.win .wl{font-size:var(--t-label); color:var(--ink2)} .win .wc{font-weight:600; justify-self:end}
.win .wv{grid-column:1/-1; font-weight:600}
.win .wb{grid-column:1/-1; display:flex; height:4px; border-radius:2px; overflow:hidden; gap:1px}
.win .wn{grid-column:1/-1; font-size:11px; color:var(--ink2)} .win .wn em{font-style:normal; font-weight:600}
.win .wn .up{color:var(--buy)} .win .wn .dn{color:var(--sell)}
.strip .ext{margin-left:auto; font-size:var(--t-label); color:var(--ink2); text-decoration:underline; text-underline-offset:2px}
.pairgrid{display:grid; grid-template-columns:minmax(0,1fr) 380px; min-height:calc(100vh - var(--top) - 64px)}
.pairgrid > div{min-width:0}
.pairgrid > aside{border-left:1px solid var(--rule); display:flex; flex-direction:column}
.chartbox{position:relative; border-bottom:1px solid var(--rule)}
#chart{height:460px}
.probe{height:var(--row); display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--ink2); font-size:var(--t-label); border-top:1px solid var(--rule); overflow:hidden; white-space:nowrap}
.probe b{color:var(--ink)} .probe a{text-decoration:underline; text-underline-offset:2px}
.mk{display:flex; gap:12px; margin-left:auto}
.mk i{display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:5px}
.panel{padding:12px 14px; border-bottom:1px solid var(--rule)}
.panel h3{font-size:var(--t-label); font-weight:600; color:var(--ink2); margin-bottom:10px; display:flex; align-items:center; gap:8px}
.headline{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.headline .score{font-size:var(--t-display)}
.headline .verdict{height:24px; font-size:var(--t-data)}
.sides{display:flex; justify-content:space-between; font-size:var(--t-label); color:var(--ink2); margin-top:5px}
.sides b{font-weight:600}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:12px}
.why{margin-top:10px; color:var(--ink2); font-size:var(--t-label); line-height:1.5}
.why .cav{color:var(--signal)}
.fx{list-style:none; margin:0; padding:0}
.fx li{display:grid; grid-template-columns:44px 1fr; gap:10px; padding:5px 0; font-size:var(--t-label); line-height:1.4; color:var(--ink2)}
.fx li b{color:var(--ink); font-weight:600}
.fx .bar2{height:4px; background:var(--rule); border-radius:2px; margin-top:6px; overflow:hidden} .fx .bar2 s{display:block; height:100%; background:var(--sell)}
.hands{display:flex; flex-direction:column}
.hand{display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; min-height:var(--row); padding:4px 6px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--t-label); color:var(--ink2)}
.hand:hover{background:var(--raised)} .hand.on{background:var(--raised); color:var(--ink)}
.hand i{width:10px; height:10px; border-radius:999px} .hand b{color:var(--ink); font-weight:600}
.linkbtn{background:none; border:0; padding:6px 0 0; color:var(--ink2); font-size:var(--t-label); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.tabs{display:flex; gap:2px; padding:6px 12px; border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:var(--top); z-index:5}
.tabs button{background:none; border:0; padding:6px 10px; border-radius:var(--r-sm); color:var(--ink2); font-size:var(--t-label); font-weight:500; cursor:pointer}
.tabs button:hover{color:var(--ink)} .tabs button.on{background:var(--raised); color:var(--ink)}
.tabs button span{color:var(--ink2); margin-left:4px}
.pane{display:none; overflow-x:auto} .pane.on{display:block}
.graph{position:relative; height:460px}
.graph canvas{width:100%; height:100%; display:block}
.graph .cap{position:absolute; left:12px; top:10px; right:12px; font-size:var(--t-label); color:var(--ink2); pointer-events:none}
.pending{margin:24px 16px; padding:20px; border:1px dashed var(--rule2); border-radius:var(--r-md); color:var(--ink2); line-height:1.5; max-width:720px}
.pending b{display:block; color:var(--ink); font-size:var(--t-title); margin-bottom:4px}
.steps{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.steps span{padding:3px 8px; border-radius:var(--r-sm); background:var(--raised); font-size:var(--t-label)}
.steps span.on{color:var(--signal); background:var(--signal-soft)}

/* ————— wallet et méthode ————— */
.cells{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; margin:16px 0}
.cells > div{padding:10px 12px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--surface)}
.cells > div > span{display:block; color:var(--ink2); font-size:var(--t-label); margin-bottom:4px}
.cells b{font-size:var(--t-title); font-weight:600}
.cells small{display:block; color:var(--ink2); font-size:var(--t-label); margin-top:4px}
.box{border:1px solid var(--rule); border-radius:var(--r-md); overflow:auto; background:var(--surface)}
.box td,.box th{border-bottom:1px solid var(--rule)} .box tbody tr:last-child td{border-bottom:0}
.box th{position:static}
.sect{font-size:var(--t-title); margin:24px 0 10px}
.members{display:flex; flex-wrap:wrap; gap:6px}
.members a{font-family:var(--mono); font-size:var(--t-label); padding:2px 6px; border:1px solid var(--rule2); border-radius:var(--r-sm)}
.members a.me{border-color:var(--signal); color:var(--signal)}
.prose{max-width:76ch; font-size:var(--t-body); line-height:1.55; color:var(--ink2)}
.prose p{margin:0 0 10px} .prose p b{color:var(--ink); font-weight:600}
.formula{font-family:var(--mono); font-size:var(--t-label); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); padding:10px 12px; margin:10px 0; overflow-x:auto; color:var(--ink)}
.gloss td{white-space:normal; height:auto; padding:9px 12px; vertical-align:top; font-size:var(--t-body); line-height:1.45; color:var(--ink2)}
.gloss td:first-child{color:var(--ink); font-weight:600; white-space:nowrap; width:170px}
.gloss tr:target td{background:var(--signal-soft)}
.gloss tbody tr{cursor:default}

@media (max-width:1100px){
  .home{grid-template-columns:1fr; height:auto} .home > section + section{border-left:0; border-top:1px solid var(--rule)}
  .home .scroll{max-height:none} .feedwrap{max-height:70vh}
  .pairgrid{grid-template-columns:1fr} .pairgrid > aside{border-left:0; border-top:1px solid var(--rule)}
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .top{gap:10px; padding:0 10px} .top nav,.stat-line .txt,.stat-line .dot + span{display:none} .stat-line{margin-left:0} .q{flex:1}
  .strip h1.mono{word-break:break-all}
  .drop{min-width:0}
  .hide-sm{display:none}
  .legend{display:none}
  #chart{height:320px} .graph{height:360px}
  .ev .ln{grid-template-columns:30px 64px minmax(0,1fr) auto}
  .ev.nopair .ln{grid-template-columns:30px minmax(0,1fr) auto}
  .ev .more{padding-left:12px}
  .strip .ext{margin-left:0}
  .wins{width:100%} .win{min-width:0; flex:1; padding:5px 6px; column-gap:4px} .win .wn{font-size:10px}
}
#tip{white-space:pre-line}

/* ————— accueil : bandeau de pouls et carte des paires ————— */
.pulse{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--rule); font-size:var(--t-body)}
.pulse .live{display:flex; align-items:center; gap:8px; font-weight:600; margin-right:8px}
.pulse .live i{width:8px; height:8px; border-radius:50%; background:var(--buy); animation:blink 1.6s ease-in-out infinite}
.pulse button{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); padding:4px 10px; cursor:pointer; color:var(--ink2); font-size:var(--t-data)}
.pulse button b{font-weight:600; margin-right:2px}
.pulse button.buy b{color:var(--buy)} .pulse button.sell b, .pulse button.risk b{color:var(--sell)}
.pulse button:hover{border-color:var(--rule2); color:var(--ink)}
.pulse button.on{border-color:var(--signal); color:var(--ink); background:var(--signal-soft)}
.scale{display:flex; align-items:center; gap:6px; font-size:var(--t-label)}
.scale i{width:44px; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--sell), var(--raised))} .scale i + span + i{background:linear-gradient(90deg, var(--raised), var(--buy))}
.scale[hidden], #legend[hidden]{display:none}
#mapwrap{padding:4px}
#map{position:relative}
.tile{position:absolute; display:flex; flex-direction:column; justify-content:flex-start; gap:4px; padding:6px 8px; overflow:hidden;
      border:1px solid var(--bg); border-radius:var(--r-sm); transition:opacity .2s, filter .15s; color:var(--ink)}
.tile:hover{filter:brightness(1.25); z-index:1}
.tile b{font-size:var(--t-data); font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:5px}
.tile .sc{font-size:var(--t-display); font-weight:600; line-height:1}
.tile .vd{font-size:var(--t-label); color:var(--ink); opacity:.85; white-space:nowrap}
.tile .ch{font-size:var(--t-label); white-space:nowrap; margin-top:auto} .tile .ch .buy, .tile .ch .sell{color:var(--ink)}
.tile.off{opacity:.18}
.tile.hot{box-shadow:inset 0 0 0 2px var(--sell)}
.tile .ping{width:6px; height:6px; border-radius:50%; background:var(--signal); animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.pulse .hint{margin-left:auto; font-size:var(--t-label); color:var(--ink2)}
.tile .sc small{display:block; font-size:var(--t-label); font-weight:500; opacity:.8; margin-top:3px}
.guide{display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--rule);
       background:var(--signal-soft); font-size:var(--t-label); color:var(--ink)}
.guide[hidden], .spots[hidden]{display:none}
.guide span{display:flex; align-items:center; gap:6px}
.guide .sw{width:12px; height:12px; border-radius:2px; display:inline-block}
.guide .sw.big{border:1px solid var(--ink2); width:16px; height:12px}
.guide .sw.ring{box-shadow:inset 0 0 0 2px var(--sell)}
.guide .sw.dot{width:6px; height:6px; border-radius:50%; background:var(--signal)}
.guide button{margin-left:auto; background:none; border:1px solid var(--rule2); border-radius:var(--r-sm); padding:2px 8px; cursor:pointer; font-size:var(--t-label)}
.spots{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; padding:10px 12px; border-bottom:1px solid var(--rule)}
.spot{display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--rule); border-left:3px solid var(--rule2); border-radius:var(--r-md); background:var(--surface)}
.spot:hover{border-color:var(--rule2); background:var(--raised)}
.spot.buy{border-left-color:var(--buy)} .spot.sell, .spot.risk{border-left-color:var(--sell)}
.spot .lab{font-size:var(--t-label); color:var(--ink2); font-weight:500}
.spot .hd{display:flex; align-items:baseline; gap:6px}
.spot .hd b{font-size:var(--t-title)} .spot .n{font-size:var(--t-title); font-weight:600; margin-left:auto}
.spot.buy .n{color:var(--buy)} .spot.sell .n, .spot.risk .n{color:var(--sell)}
.spot .u{font-size:var(--t-label); color:var(--ink2)}
.spot .why{font-size:var(--t-data); line-height:1.4}
.spot .said{font-size:var(--t-label); color:var(--ink2)}
.spot .go{font-size:var(--t-label); color:var(--signal); margin-top:auto}
@media (max-width:700px){ .pulse .hint{margin-left:0; width:100%} .spots{grid-template-columns:1fr} .scale .sz{display:none} .scale span{white-space:nowrap} }

/* ————— page paire : la réponse en clair ————— */
.answer{display:grid; grid-template-columns:200px minmax(0,1fr) 360px; gap:20px; align-items:center; padding:16px; border-bottom:1px solid var(--rule)}
.answer .lab, .dial .lab{display:block; font-size:var(--t-label); color:var(--ink2); font-weight:500; margin-bottom:4px}
.dial b{display:block; font-size:44px; font-weight:600; line-height:1; letter-spacing:-.02em} .dial b small{font-size:var(--t-body); color:var(--ink2); font-weight:500; margin-left:3px}
.dial em{display:block; font-style:normal; font-weight:600; margin:4px 0 8px}
.dial.buy b, .dial.buy em{color:var(--buy)} .dial.sell b, .dial.sell em{color:var(--sell)} .dial.mid em{color:var(--ink2)} .dial.dim{opacity:.6}
.meter{position:relative; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--sell), var(--raised) 50%, var(--buy))}
.meter s{position:absolute; top:-4px; width:3px; height:14px; margin-left:-1px; background:var(--ink); border-radius:2px}
.ends{display:flex; justify-content:space-between; font-size:var(--t-label); color:var(--ink2); margin-top:4px}
.say h2{font-size:var(--t-display); font-weight:600; letter-spacing:-.01em; line-height:1.25}
.say p{margin:6px 0 0; color:var(--ink2); font-size:var(--t-body); line-height:1.45} .say p.cav{color:var(--signal)}
.facts2{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:var(--t-data)}
.facts2 li{display:flex; gap:8px; align-items:baseline; color:var(--ink2)} .facts2 b{color:var(--ink); font-weight:600}
.facts2 i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--rule2)}
.facts2 i.buy{background:var(--buy)} .facts2 i.sell{background:var(--sell)} .facts2 i.sig{background:var(--signal)} .facts2 i.mid{background:var(--ink2)}
.panel .hint{margin:-4px 0 10px; font-size:var(--t-label); color:var(--ink2); line-height:1.45}
.who{padding:7px 0; border-top:1px solid var(--rule)} .who:first-of-type{border-top:0}
.who .t{display:flex; align-items:center; gap:8px; font-size:var(--t-data)} .who .t i{width:8px; height:8px; border-radius:50%}
.who .t .net{margin-left:auto; font-weight:600; white-space:nowrap}
.who .d{font-size:var(--t-label); color:var(--ink2); margin:2px 0 6px 16px}
.who .div{position:relative; height:4px; margin-left:16px; background:var(--rule); border-radius:2px}
.who .div::after{content:""; position:absolute; left:50%; top:-2px; width:1px; height:8px; background:var(--rule2)}
.who .div s{position:absolute; top:0; height:100%; border-radius:2px} .who .div s.up{left:50%; background:var(--buy)} .who .div s.dn{right:50%; background:var(--sell)}
.fx2{list-style:none; margin:0; padding:0} .fx2 li{padding:6px 0}
.fx2 .t{display:flex; justify-content:space-between; font-size:var(--t-data)}
.fx2 .bar2{height:4px; background:var(--rule); border-radius:2px; margin:5px 0; overflow:hidden} .fx2 .bar2 s{display:block; height:100%; background:var(--sell)}
.fx2 .d{font-size:var(--t-label); color:var(--ink2); line-height:1.45}
@media (max-width:1100px){ .answer{grid-template-columns:180px minmax(0,1fr)} .facts2{grid-column:1 / -1} }
@media (max-width:700px){ .answer{grid-template-columns:1fr; gap:14px} .dial b{font-size:36px} }
@media (max-width:700px){ .pairgrid{min-height:0} }
/* page paire : colonne de droite lisible */
.pairgrid{grid-template-columns:minmax(0,1fr) 420px}
.pairgrid > aside .panel{padding:18px 20px}
.pairgrid > aside .panel h3{font-size:var(--t-title); color:var(--ink); margin-bottom:6px}
.pairgrid > aside .panel h3 .mute{font-size:var(--t-body)}
.pairgrid > aside .panel .hint{margin:0 0 14px; font-size:var(--t-body)}
.pairgrid > aside .who{padding:11px 0}
.pairgrid > aside .who .t{font-size:var(--t-body)}
.pairgrid > aside .who .d, .pairgrid > aside .fx2 .d{font-size:var(--t-data); color:var(--ink2)}
.pairgrid > aside .who .div, .pairgrid > aside .fx2 .bar2{height:6px}
.pairgrid > aside .fx2 li{padding:10px 0}
.pairgrid > aside .fx2 .t{font-size:var(--t-body)}
.pairgrid > aside .hands{font-size:var(--t-body)}
@media (max-width:1100px){ .pairgrid{grid-template-columns:minmax(0,1fr) 360px} }
@media (max-width:700px){ .pairgrid{grid-template-columns:1fr} }
/* page paire : repères visuels */
.sec{display:flex; align-items:center; gap:8px}
.sec .num{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--raised); color:var(--ink2); font:600 var(--t-label) var(--mono)}
.sec .ic{width:16px; height:16px; color:var(--ink2)} .sec .ic svg{width:16px; height:16px; display:block}
.pill{margin-left:auto; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:var(--t-label); font-weight:600; white-space:nowrap;
  background:var(--raised); color:var(--ink2)}
.pill.buy{background:color-mix(in srgb, var(--buy) 16%, transparent); color:var(--buy)}
.pill.sell{background:color-mix(in srgb, var(--sell) 16%, transparent); color:var(--sell)}
.pill.sig{background:color-mix(in srgb, var(--signal) 16%, transparent); color:var(--signal)}
.share{display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; margin:10px 0 4px} .share s{display:block; min-width:2px}
.sharecap{display:flex; justify-content:space-between; font-size:var(--t-label); color:var(--ink2); margin-bottom:8px}
.who .net .arr{font-size:10px; margin-right:4px}
.rmeter{position:relative; display:flex; gap:2px; height:10px; margin:12px 0 4px}
.rmeter .z{border-radius:3px} .rmeter .lo{background:color-mix(in srgb, var(--buy) 35%, var(--raised))}
.rmeter .md{background:color-mix(in srgb, var(--signal) 40%, var(--raised))} .rmeter .hi{background:color-mix(in srgb, var(--sell) 45%, var(--raised))}
.rmeter s{position:absolute; top:-4px; width:4px; height:18px; margin-left:-2px; background:var(--ink); border-radius:2px; box-shadow:0 0 0 2px var(--bg)}
.rscale{display:grid; grid-template-columns:30fr 30fr 40fr; font-size:var(--t-label); color:var(--ink2); margin-bottom:10px}
.panel .cav{color:var(--signal); font-size:var(--t-data); margin:0 0 8px}
.fx2 li .t b{display:flex; align-items:center; gap:8px} .fx2 li .t b i{width:8px; height:8px; border-radius:50%; background:var(--ink2)}
.fx2 li.sell .t b i, .fx2 li.sell .bar2 s{background:var(--sell)} .fx2 li.sig .t b i, .fx2 li.sig .bar2 s{background:var(--signal)} .fx2 li.mid .bar2 s{background:var(--ink2)}
.fx2 li + li{border-top:1px solid var(--rule)}
@media (max-width:1100px){ .tiles{grid-column:1 / -1; grid-template-columns:repeat(4, 1fr)} }
@media (max-width:700px){ .tiles{grid-template-columns:1fr 1fr} }
.who .t b{white-space:nowrap} .who .d .m{color:var(--ink); margin-right:8px}
/* page paire : regroupement en cartes */
.cardh{display:flex; align-items:flex-end; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; padding:14px 16px 10px; border-bottom:1px solid var(--rule)}
.cardh b{display:block; font-size:var(--t-title); font-weight:600} .cardh > div > span{font-size:var(--t-data); color:var(--ink2)}
.key{display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; font-size:var(--t-data); color:var(--ink)}
.key span{display:inline-flex; align-items:center; gap:6px} .key em{font-style:normal; color:var(--ink2)}
.key i{width:10px; height:10px; border-radius:50%} .key .a{font-size:14px} .key .sep{width:1px; height:16px; background:var(--rule2)}
.pairgrid > aside{background:var(--bg); padding:12px; gap:12px}
.pairgrid > aside .panel{background:var(--surface); border:1px solid var(--rule); border-radius:10px}
.pairgrid > aside #prov{padding:0 4px}
.axis{display:grid; grid-template-columns:1fr auto 1fr; font-size:var(--t-label); color:var(--ink2); margin:6px 0 2px 16px; padding-bottom:6px; border-bottom:1px solid var(--rule)}
.axis span:last-child{text-align:right} .axis span:nth-child(2){color:var(--ink2); opacity:.7}
.pairgrid > aside .who{border-top:0; padding:10px 0 8px} .pairgrid > aside .who + .who{border-top:1px dashed var(--rule)}
.pairgrid > aside .who .div{height:10px; border-radius:3px} .pairgrid > aside .who .div s{border-radius:3px}
.pairgrid > aside .who .div::after{top:-3px; height:16px; width:2px; background:var(--ink2)}
.answer{background:linear-gradient(180deg, var(--surface), var(--bg))}
.key .a{color:var(--ink)}
/* ————— page paire : tout sur un écran ————— */
.cardh{flex-wrap:nowrap; align-items:center; padding:8px 14px; gap:16px; overflow:hidden}
.cardh > b{font-size:var(--t-data); font-weight:600; white-space:nowrap}
.cardh .key{flex-wrap:nowrap; white-space:nowrap; font-size:var(--t-label); overflow:hidden}
.panes{min-height:0}
#answer .vhead{display:flex; gap:12px; align-items:center} #answer .vhead.dim .big{opacity:.55}
#answer .big{font-size:40px; font-weight:600; line-height:1; letter-spacing:-.02em; cursor:help} #answer .big small{font-size:var(--t-body); color:var(--ink2); font-weight:500}
#answer .big.buy{color:var(--buy)} #answer .big.sell{color:var(--sell)} #answer .big.mid{color:var(--ink)}
#answer .lab{display:block; font-size:var(--t-label); color:var(--ink2); margin-bottom:2px}
#answer h2{font-size:var(--t-title); font-weight:600; line-height:1.3}
#answer .meter{margin-top:12px} #answer .rest{margin:8px 0 0; color:var(--ink2); font-size:var(--t-data); line-height:1.4}
#answer .cav{margin:6px 0 0}
.wgrid{display:grid; grid-template-columns:10px minmax(0,auto) 38px minmax(60px,1fr) 58px; gap:7px 8px; align-items:center; font-size:var(--t-data); margin-top:10px}
.wgrid .h{font-size:11px; color:var(--ink2)} .wgrid .h.c{text-align:center} .wgrid .h.r, .wgrid .n{text-align:right}
.wgrid i{width:9px; height:9px; border-radius:50%} .wgrid b{font-weight:600; white-space:nowrap; cursor:help}
.wgrid .v{color:var(--ink2); font-size:var(--t-label)} .wgrid .n{font-weight:600; font-variant-numeric:tabular-nums}
.wgrid .div{position:relative; height:8px; background:var(--rule); border-radius:3px}
.wgrid .div::after{content:""; position:absolute; left:50%; top:-3px; width:2px; height:14px; margin-left:-1px; background:var(--ink2)}
.wgrid .div s{position:absolute; top:0; height:100%; border-radius:3px} .wgrid .div s.up{left:50%; background:var(--buy)} .wgrid .div s.dn{right:50%; background:var(--sell)}
.foot2{margin-top:8px; font-size:var(--t-label); color:var(--ink2)}
.fx3{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.fx3 li{display:grid; grid-template-columns:8px minmax(0,1fr) 70px 42px; gap:8px; align-items:center; font-size:var(--t-data); cursor:help}
.fx3 li span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .fx3 li em{font-style:normal; color:var(--ink2); font-size:var(--t-label); text-align:right}
.fx3 i{width:8px; height:8px; border-radius:50%; background:var(--ink2)} .fx3 .bar2{height:6px; background:var(--rule); border-radius:3px; overflow:hidden} .fx3 .bar2 s{display:block; height:100%; background:var(--ink2)}
.fx3 li.sell i, .fx3 li.sell .bar2 s{background:var(--sell)} .fx3 li.sig i, .fx3 li.sig .bar2 s{background:var(--signal)}
.pairgrid > aside .panel{padding:12px 14px} .pairgrid > aside .panel h3{margin-bottom:4px}
#groups .hand{font-size:var(--t-data)} #groups .share{margin-top:8px}
.rmeter{margin:10px 0 2px}

@media (min-width:1000px) and (min-height:620px){
  .one{height:calc(100vh - var(--top)); display:flex; flex-direction:column; overflow:hidden}
  .one .strip{flex:none}
  .one .pairgrid{flex:1; min-height:0}
  .one .pairgrid > .left{display:flex; flex-direction:column; min-height:0}
  .one .chartbox{flex:1; min-height:220px; display:flex; flex-direction:column}
  .one #chart{flex:1; height:auto; min-height:0}
  .one .tabs{position:static}
  .one .panes{flex:none; height:clamp(170px, 28vh, 300px); overflow:auto}
  .one .pane .graph{height:100%} .one .pane[data-p="hands"].on{height:100%}
  .one .pairgrid > aside{overflow:auto; min-height:0}
}
@media (max-width:999px), (max-height:619px){
  .pairgrid{grid-template-columns:1fr}
  .pairgrid > .left, .pairgrid > aside{display:contents}
  #answer{order:1; margin:12px 12px 0} .cardh{order:2} .chartbox{order:3} #verdict{order:4; margin:12px 12px 0} #health{order:5; margin:12px 12px 0} #groups{order:6; margin:12px} .tabs{order:7} .panes{order:8}
  #answer, #verdict, #health, #groups{background:var(--surface); border:1px solid var(--rule); border-radius:10px}
  #chart{height:360px} .cardh{flex-wrap:wrap} .cardh .key{flex-wrap:wrap}
}
@media (max-width:999px), (max-height:619px){
  .pairgrid{grid-template-columns:minmax(0,1fr)} .pairgrid > * > *{min-width:0}
  .cardh > b{white-space:normal} #answer .vhead{align-items:flex-start}
}

/* tranches market cap / volume */
.bands{display:flex; align-items:center; gap:8px 20px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--rule); font-size:var(--t-data)}
.bands .bd{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.bands .lab{color:var(--ink2); font-size:var(--t-label); font-weight:600; margin-right:4px}
.bands button{white-space:nowrap; flex:none; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); padding:3px 9px; color:var(--ink2); font-size:var(--t-data); cursor:pointer; display:inline-flex; gap:6px; align-items:baseline}
.bands button small{color:var(--ink3, var(--ink2)); font-size:var(--t-label); opacity:.8}
.bands button:hover{color:var(--ink); border-color:var(--ink2)}
.bands button.on{background:color-mix(in srgb, var(--signal) 16%, var(--surface)); border-color:var(--signal); color:var(--ink)}
.bands button.on small{color:var(--signal); opacity:1}
.bands button.none:not(.on){opacity:.4}
.bands .clear{margin-left:auto; border:1px solid var(--signal); color:var(--signal); font-weight:600}
.bands .clear:hover{background:var(--signal); color:var(--bg)}
.bands .hint{margin-left:auto; color:var(--ink2); font-size:var(--t-label)}
@media (max-width:700px){ .bands{flex-direction:column; align-items:stretch; gap:6px} .bands .bd{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-width:0; max-width:calc(100vw - 24px)} .bands .lab{min-width:78px} .bands .hint{display:none} .bands .clear{margin-left:0; align-self:flex-start} }