:root{
  --bg:#0b1220;
  --card:#111a2e;
  --bd:rgba(255,255,255,.08);
  --mut:rgba(255,255,255,.65);
  --txt:rgba(255,255,255,.92);
  --ok:#22c55e;
  --bad:#ef4444;
}

html, body { overflow-x: hidden; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1200px 700px at 20% 10%, #1b2a57 0%, var(--bg) 55%);
  color:var(--txt);
}

.wrap{max-width:1180px;margin:0 auto;padding:18px}

.top{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

h1{margin:0;font-size:20px;letter-spacing:.2px}

.sub{margin-top:6px;font-size:12px;color:var(--mut)}

.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:12px;
  color:var(--mut);
}

.dot{width:9px;height:9px;border-radius:999px;background:var(--ok)}
.dot.bad{background:var(--bad)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.mt{margin-top:12px}

.card{
  grid-column:span 3;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--bd);
  border-radius:16px;
  padding:12px;
  min-height:76px;
}

.k{color:var(--mut);font-size:12px}
.v{font-size:26px;font-weight:850;margin-top:2px}
.u{font-size:12px;color:var(--mut);margin-left:6px;font-weight:600}

.wide{grid-column:span 6}
.full{grid-column:span 12}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--bd);
  border-radius:16px;
  padding:12px;
}

.panelTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

button{
  border:1px solid var(--bd);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  border-radius:12px;
  padding:8px 10px;
  font-weight:700;
  cursor:pointer;
}
button:hover{background:rgba(255,255,255,.08)}

select{
  border:1px solid var(--bd);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  border-radius:12px;
  padding:8px 10px;
  font-weight:700;
}

.links a{color:#93c5fd;text-decoration:none}
.links a:hover{text-decoration:underline}

/* FIX SCROLL INFINI : hauteur stable pour Chart.js */
.chartBox{
  height:320px;
  width:100%;
  position:relative;
}

.chartBox canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

@media (max-width:980px){
  .card{grid-column:span 6}
  .wide{grid-column:span 12}
}
@media (max-width:560px){
  .card{grid-column:span 12}
}

/* --- Trend badge (flèches) --- */
.trend {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  font-size: 12px;
  margin-left: 8px;
  line-height: 1;
}

.trend.stable { color: #22c55e; }  /* vert */
.trend.up,
.trend.down   { color: #f59e0b; }  /* orange */
.trend.alert  { color: #ef4444; }  /* rouge */

/* valeur + unité + trend sur la même ligne */
.vline{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}