/* Tableau de bord d'avancement. Toujours sombre, où qu'il soit intégré. */
.hud {
  --hud-bg: #16181e;
  --hud-surface: #1e2129;
  --hud-border: #2a2d36;
  --hud-accent: #f0a868;
  --hud-green: #8fd4a4;
  --hud-fg: #ebe8e3;
  --hud-dim: #9b9ba6;

  background: var(--hud-bg);
  color: var(--hud-fg);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--hud-border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  font-size: 16px;
  line-height: 1.4;
}
@media (max-width: 900px) { .hud { grid-template-columns: 1fr; } }

.hud-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--hud-border);
}
.hud-eyebrow { font-size: 0.85rem; color: var(--hud-dim); margin-bottom: 2px; }
.hud-title { font-family: inherit; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.hud-chip {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--hud-accent);
  background: color-mix(in srgb, var(--hud-accent) 14%, transparent);
  white-space: nowrap;
}

.hud-left {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  gap: 20px;
}

.hud-top { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: center; }
@media (max-width: 420px) { .hud-top { grid-template-columns: 1fr; justify-items: center; } .hud-top .hud-stats { width: 100%; } }

.hud-donut { width: 168px; height: 168px; position: relative; flex-shrink: 0; }
.hud-donut canvas { position: absolute; inset: 0; }
.hud-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.hud-pct { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hud-pct small { font-size: 0.55em; font-weight: 500; color: var(--hud-dim); margin-left: 2px; }
.hud-phase { font-size: 0.82rem; color: var(--hud-dim); margin-top: 6px; }

.hud-stats { display: flex; flex-direction: column; gap: 14px; }
.hud-stat { padding-left: 14px; border-left: 3px solid var(--hud-border); }
.hud-stat:first-child { border-left-color: var(--hud-accent); }
.hud-lbl { font-size: 0.85rem; color: var(--hud-dim); margin-bottom: 2px; }
.hud-lbl.g { color: var(--hud-green); }
.hud-val { font-size: 1.1rem; font-weight: 500; }
.hud-val.big { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }

.hud-divider { font-family: inherit; font-size: 1rem; font-weight: 600; margin-top: 4px; }

.hud-rhythm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.hud-rcard { background: var(--hud-surface); border-radius: 10px; padding: 12px 14px; }
.hud-rcard dd { margin: 0; }
.hud-rcard .hud-val { font-size: 1rem; }

.hud-right { padding: 22px 22px 18px; min-height: 360px; display: flex; border-left: 1px solid var(--hud-border); }
@media (max-width: 900px) { .hud-right { border-left: none; border-top: 1px solid var(--hud-border); } }
.hud-chart { flex: 1; position: relative; min-height: 320px; }
.hud-chart, .hud-right { min-width: 0; overflow: hidden; }