/* ── 1. Design tokens ─────────────────────────────────────────────────────── */
:root {
  --adp-bg:        #10131f;
  --adp-panel:     #171b2d;
  --adp-panel2:    #202642;
  --adp-text:      #f4f7fb;
  --adp-muted:     #b8c1d8;
  --adp-line:      rgba(255,255,255,.12);
  --adp-blue:      #57a6ff;
  --adp-yellow:    #ffd166;
  --adp-red:       #ff6b6b;
  --adp-green:     #6ee7a8;
  --adp-purple:    #c084fc;
  --adp-orange:    #fb923c;
  --adp-cyan:      #67e8f9;
  --adp-good:      #7dd3fc;
  --adp-bad:       #fb7185;
  --adp-shadow:    0 18px 60px rgba(0,0,0,.35);
  --adp-radius:    22px;
  --adp-transition: 0.15s ease;
}

/* ── 2. Fond pleine page (couvre le body clair du layout global) ──────────── */

/* Pseudo-élément fixé derrière tout : couvre body + header + footer */
.adp-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top left,  rgba(87,166,255,.25),  transparent 35%),
    radial-gradient(circle at top right, rgba(192,132,252,.18), transparent 35%),
    var(--adp-bg);
}

/* Neutralise la couleur de texte héritée du body global (#1a1a1a) */
body:has(.adp-wrap) {
  color: var(--adp-text);
  background: var(--adp-bg);
}

/* ── 3. Layout app principal ──────────────────────────────────────────────── */
.adp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--adp-text);
  position: relative; /* nécessaire pour que ::before se positionne par rapport au viewport */
}

/* Neutralise Playfair Display des h1/h2/h3 globaux */
.adp-wrap h1,
.adp-wrap h2,
.adp-wrap h3 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--adp-text);
}

/* Couvre le header du site (sticky, fond clair) */
.site-header:has(~ main .adp-wrap),
body:has(.adp-wrap) .site-header {
  background: rgba(16, 19, 31, 0.92);
  border-bottom-color: var(--adp-line);
}

body:has(.adp-wrap) .site-brand,
body:has(.adp-wrap) .site-footer {
  color: var(--adp-muted);
}

body:has(.adp-wrap) .site-footer {
  border-top-color: var(--adp-line);
  background: transparent;
}

.adp-topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.adp-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.adp-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--adp-blue), var(--adp-purple));
  display: grid;
  place-items: center;
  box-shadow: var(--adp-shadow);
  font-size: 25px;
  flex-shrink: 0;
}

.adp-title {
  font-size: clamp(20px, 3vw, 38px);
  line-height: 1.03;
  margin: 0;
}

.adp-subtitle {
  color: var(--adp-muted);
  margin-top: 4px;
  font-size: 13px;
}

.adp-pill {
  border: 1px solid var(--adp-line);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--adp-muted);
  font-size: 14px;
}

/* ── 3. Grille principale ─────────────────────────────────────────────────── */
.adp-grid {
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  gap: 16px;
}

/* ── 4. Carte générique ───────────────────────────────────────────────────── */
.adp-card {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid var(--adp-line);
  border-radius: var(--adp-radius);
  box-shadow: var(--adp-shadow);
  padding: 16px;
}

.adp-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.adp-card h3 {
  margin: 14px 0 8px;
  font-size: 15px;
  color: var(--adp-muted);
  font-weight: 650;
}

.adp-screen {
  min-height: 650px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 5. Boutons, sélecteurs ──────────────────────────────────────────────── */
.adp-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.adp-space { justify-content: space-between; }

.adp-btn {
  border: 1px solid var(--adp-line);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  color: var(--adp-text);
  padding: 10px 13px;
  cursor: pointer;
  transition: var(--adp-transition) transform, var(--adp-transition) background;
  font: inherit;
}

.adp-btn:hover  { transform: translateY(-1px); background: rgba(255,255,255,.14); }
.adp-btn:focus-visible { outline: 2px solid var(--adp-blue); }
.adp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.adp-primary   { background: linear-gradient(135deg, var(--adp-blue), var(--adp-purple)); border: 0; }
.adp-warn      { background: linear-gradient(135deg, var(--adp-orange), var(--adp-red)); border: 0; }
.adp-good      { background: linear-gradient(135deg, var(--adp-green), var(--adp-cyan)); color: #07111d; border: 0; }
.adp-voice-on  { background: linear-gradient(135deg, var(--adp-green), var(--adp-cyan)); color: #07111d; border: 0; }

.adp-select {
  width: 100%;
  background: #12172a;
  color: var(--adp-text);
  border: 1px solid var(--adp-line);
  border-radius: 13px;
  padding: 10px;
  margin: 4px 0 10px;
  font: inherit;
}

/* ── 6. Métriques / barres de progression ────────────────────────────────── */
.small  { font-size: 13px; color: var(--adp-muted); }
.big    { font-size: 24px; font-weight: 800; }
.metric { margin: 10px 0; }

.metric-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 5px;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}

.fill {
  height: 100%;
  width: 50%;
  border-radius: 999px;
  transition: .35s width;
  background: var(--adp-blue);
}

.axis-E   { background: var(--adp-blue); }
.axis-D   { background: var(--adp-yellow); }
.axis-X   { background: var(--adp-red); }
.axis-P   { background: var(--adp-green); }
.axis-H   { background: var(--adp-purple); }
.axis-W   { background: var(--adp-orange); }
.axis-Cf  { background: var(--adp-cyan); }
.axis-Co  { background: #f472b6; }
.axis-Pop { background: #a3e635; }
.axis-Pol { background: #fb7185; }
.axis-Debt{ background: #f59e0b; }
.axis-Leg { background: #60a5fa; }

/* ── 7. Onglets, choix, tags, événements ─────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }

.tab {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--adp-line);
  color: var(--adp-muted);
  cursor: pointer;
  font: inherit;
}

.tab.active { background: rgba(255,255,255,.13); color: var(--adp-text); }

.choice {
  padding: 14px;
  border: 1px solid var(--adp-line);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
  cursor: pointer;
  margin: 10px 0;
  transition: background var(--adp-transition);
}

.choice:hover { background: rgba(255,255,255,.1); }
.choice strong { display: block; margin-bottom: 4px; }

.tag {
  font-size: 12px;
  border: 1px solid var(--adp-line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--adp-muted);
  display: inline-block;
  margin: 4px 4px 0 0;
}

.event {
  padding: 12px;
  border-left: 4px solid var(--adp-blue);
  background: rgba(255,255,255,.055);
  border-radius: 14px;
  margin: 8px 0;
}

.event.bad    { border-left-color: var(--adp-red); }
.event.good   { border-left-color: var(--adp-green); }
.event.absurd { border-left-color: var(--adp-yellow); }

.log {
  max-height: 400px;
  overflow: auto;
  padding-right: 4px;
}

/* ── 8. Toast et modal ───────────────────────────────────────────────────── */
.adp-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 420px;
  background: #111827;
  border: 1px solid var(--adp-line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--adp-shadow);
  display: none;
  z-index: 50;
}

.adp-toast.show {
  display: block;
  animation: adp-pop .22s ease-out;
}

@keyframes adp-pop {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.adp-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  place-items: center;
  padding: 18px;
  z-index: 100;
}

.adp-modal.show { display: grid; }
.adp-modal .adp-card { max-width: 720px; width: 100%; }

/* ── 9. KPI, headline, quote ─────────────────────────────────────────────── */
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kpi .adp-card { padding: 12px; box-shadow: none; }

.headline {
  font-size: 28px;
  font-weight: 850;
  line-height: 1.05;
  margin: 6px 0 10px;
}

.quote {
  font-size: 17px;
  color: #dbeafe;
  border-left: 4px solid var(--adp-purple);
  padding-left: 12px;
}

.danger { color: #fecdd3; }
.ok     { color: #bbf7d0; }
.muted  { color: var(--adp-muted); }
.hidden { display: none !important; }

/* ── 10. Footer ──────────────────────────────────────────────────────────── */
.adp-footer {
  margin-top: 24px;
  color: var(--adp-muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.8;
}

.adp-footer a {
  color: var(--adp-blue);
  text-decoration: none;
}

.adp-footer a:hover { text-decoration: underline; }

.adp-footer-versions { font-size: 12px; margin-top: 4px; }

/* ── 11. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .adp-grid {
    grid-template-columns: 1fr;
  }
  .adp-screen  { min-height: auto; }
  .kpi         { grid-template-columns: 1fr 1fr; }
  .adp-topbar  { align-items: flex-start; flex-direction: column; }
  .adp-side-right { order: 3; }
}

@media (max-width: 600px) {
  .adp-wrap    { padding: 12px; }
  .adp-title   { font-size: 20px; }
  .headline    { font-size: 20px; }
  .kpi         { grid-template-columns: 1fr; }
}