﻿:root { --bg:#0b0f14; --panel:#101820; --accent:#0ea5e9; --text:#e6f0f7; --muted:#8aa2b2; --up:#16a34a; --down:#dc2626; --flat:#94a3b8; --card:#0f1720; --tag:#1f2a35; }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header{background:linear-gradient(90deg,var(--panel),#0e1a24);border-bottom:1px solid #18232f}
.brand{display:flex;align-items:center;gap:12px}.logo{width:36px;height:36px}h1{font-size:20px;margin:0}
.badge{background:var(--tag);color:var(--muted);padding:4px 8px;border-radius:999px;font-size:12px}
.button{margin-left:auto;background:var(--accent);color:#001622;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin:12px 0}
.seg{display:inline-flex;border:1px solid #1e2a36;border-radius:10px;overflow:hidden}
.seg button{background:#0f1720;color:var(--muted);border:0;padding:6px 10px;cursor:pointer}
.seg button.active{background:var(--accent);color:#062233}
.hint{color:var(--muted);font-size:12px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:var(--card);border:1px solid #18232f;border-radius:12px;padding:12px}
.card h3{margin:4px 0 8px;font-size:16px}
.small{color:var(--muted);font-size:12px}.row{display:flex;align-items:center;gap:6px}
.tag{background:var(--tag);padding:2px 8px;border-radius:999px}
.delta{font-weight:600}.delta.up{color:var(--up)}.delta.down{color:var(--down)}.delta.flat{color:var(--flat)}
.subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini h4{margin:0 0 6px;font-size:13px;color:#b8d3e6}

/* Sparklines: plus petites et bien visibles */
.spark{
  height:20px; margin-top:6px;
  color:#8cccf0; background:#0b131a;
  border:1px dashed #1a2935; border-radius:6px; padding:0 2px;
}
.spark svg{display:block; width:100%; height:20px}
.spark polyline{stroke-width:1.6}

@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .subgrid{grid-template-columns:1fr}
}
