/* =====================================================================
 * Quiz Diagnostic Analytics — thème sombre premium Impowers.
 * Palette : fond quasi-noir teinté vert, accent #3FC38D, statut réservé
 * (perte forte = #E0524F, toujours accompagné du chiffre en texte).
 * ===================================================================== */
:root {
  --bg: #05090B;
  --panel: #0B1210;
  --panel-2: #0E1714;
  --line: rgba(63, 195, 141, 0.13);
  --line-soft: rgba(63, 195, 141, 0.07);
  --ink: #E6F2EB;
  --muted: #7E958A;
  --faint: #55685E;
  --accent: #3FC38D;
  --accent-bright: #8EE5BD;
  --loss: #E0524F;
  --warn: #E0A23A;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px 80px; }

/* ---- Header ---- */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 30px 0 8px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), #0b3d2e);
  box-shadow: 0 0 14px rgba(63, 195, 141, 0.5);
}
.brand h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.brand h1 b { color: var(--accent); font-weight: 600; }
.brand-sub { font-size: 11.5px; color: var(--faint); margin-top: 1px; }

.controls { display: flex; align-items: center; gap: 10px; }
.controls select, .controls button {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: 500 13px 'Inter', sans-serif; padding: 8px 12px; cursor: pointer;
  transition: border-color .15s;
}
.controls select:hover, .controls button:hover { border-color: rgba(63, 195, 141, 0.4); }
.controls select:focus-visible, .controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-refresh { display: flex; align-items: center; gap: 7px; }
.btn-refresh svg { width: 14px; height: 14px; }
.btn-refresh.loading svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-refresh.loading svg { animation: none; } }

/* ---- Barre de statut ---- */
.status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted);
  padding: 4px 0 22px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.st-dot--demo { background: var(--warn); }
.st-dot--err { background: var(--loss); }
.st-err { color: var(--loss); text-transform: none; letter-spacing: 0; }

/* ---- KPI ---- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.kpi--rate { background: var(--panel-2); border-color: var(--line); }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.kpi-value {
  font-size: 30px; font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  margin-top: 6px; line-height: 1.1;
}
.kpi--rate .kpi-value { color: var(--accent-bright); }
.kpi-sub { font-size: 11px; color: var(--faint); margin-top: 5px; }

/* ---- Grille funnel + top pertes ---- */
.duo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 14px; margin-bottom: 30px; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.panel-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 8px;
}
.panel-h small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }

/* ---- Funnel ---- */
.fn-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 52px 52px;
  align-items: center; gap: 10px;
  padding: 3px 0;
}
.fn-row--global .fn-label { color: var(--accent-bright); font-weight: 600; }
.fn-label {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fn-track { height: 15px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.fn-bar {
  height: 100%; border-radius: 4px 3px 3px 4px; min-width: 0;
  background: linear-gradient(90deg, #1a7a55, var(--accent));
}
.fn-count { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.fn-pass { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--faint); }
.fn-pass--low { color: var(--warn); font-weight: 600; }
.fn-passcol { text-align: right; }
.badge-cond {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px dashed var(--faint); color: var(--faint);
  border-radius: 4px; padding: 0 4px; vertical-align: 1px;
}

/* ---- Top pertes ---- */
.loss-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; border-bottom: 1px solid var(--line-soft);
}
.loss-row:last-child { border-bottom: none; }
.loss-medal { font-size: 16px; width: 28px; text-align: center; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.loss-name { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.loss-detail { font-size: 11px; color: var(--faint); white-space: nowrap; }
.loss-pct {
  font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--loss); min-width: 62px; text-align: right;
}
.empty { color: var(--faint); font-size: 13px; padding: 8px 0; }

/* ---- Tableau ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel);
}
td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(63, 195, 141, 0.04); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.td-name { color: var(--muted); }
.td-loss { color: var(--muted); }
.td-loss--high { color: var(--loss); font-weight: 650; }

/* ---- États ---- */
.error-panel {
  background: rgba(224, 82, 79, 0.06);
  border: 1px solid rgba(224, 82, 79, 0.25);
  border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 30px;
  font-size: 13.5px; color: var(--ink);
}
.error-panel b { color: var(--loss); }
.error-panel code { background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.hidden { display: none; }