/* === Thème ================================================== */
:root {
  --bg: #0f1420;
  --card: #121a2a;
  --ink: #e8ecf3;
  --muted: #a7b2c6;
  --accent: #6bc2ff;
  --good: #35d49b;
  --warn: #ffb020;
  --bad:  #ff6b6b;
  --border: #22304a;

  --chip-bg: #0f1a2f;
  --chip-ink: #e8ecf3;
  --chip-high: #1c7f4e;
  --chip-mid:  #2a5ea8;
  --chip-low:  #5a6070;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #16223a 0%, #0f1420 60%);
  color: var(--ink);
  line-height: 1.5;
}

/* === Layout & blocs ======================================== */
.topbar { padding: 20px 24px; border-bottom: 1px solid var(--border); backdrop-filter: blur(4px); }
.topbar h1 { margin: 0 0 8px 0; font-size: 1.6rem; }
.disclaimer { font-size: 0.92rem; color: var(--muted); }

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; display: grid; gap: 18px; }

.card {
  background: linear-gradient(180deg, #10182a 0%, #0e1626 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Inputs */
h2 { margin: 0 0 12px 0; font-size: 1.25rem; }
h3 { margin: 16px 0 8px 0; font-size: 1.05rem; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
input, select { background: #0b1220; color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.grid-2, .grid-3 { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.actions { display: flex; gap: 10px; margin-top: 12px; }
button { border: 1px solid var(--border); background: #0f1a2f; color: var(--ink); border-radius: 8px; padding: 10px 14px; cursor: pointer; }
button.primary { background: linear-gradient(180deg, #1773c6, #125fa2); border: none; }
button.secondary { background: #132240; }
.hint, .muted { color: var(--muted); font-size: 0.9rem; }

/* Divers anciens blocs (inchangés) */
#debts { display: grid; gap: 10px; }
.debt-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.debt-row input { width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { border: 1px solid var(--border); background: #0f1729; border-radius: 10px; padding: 12px; }
.kpi h4 { margin: 0 0 6px 0; font-weight: 600; }
.kpi .value { font-size: 1.4rem; margin-bottom: 4px; }
.kpi.good { outline: 1px solid rgba(53,212,155,0.3); }
.kpi.warn { outline: 1px solid rgba(255,176,32,0.3); }
.kpi.bad  { outline: 1px solid rgba(255,107,107,0.3); }

.suggestions { display: grid; gap: 8px; padding-left: 20px; }
.suggestions li { line-height: 1.35; }
.suggestions .tag { font-size: 0.78rem; padding: 2px 6px; border-radius: 6px; margin-left: 6px; color: #0a1220; }
.tag-good { background: var(--good); }
.tag-warn { background: var(--warn); }
.tag-bad  { background: var(--bad); color: #0a1220; }

.scenario { margin-top: 10px; color: var(--muted); }
.chart-fallback { color: var(--muted); font-size: 0.9rem; padding: 8px 0; }
.foot { padding: 24px; text-align: center; color: var(--muted); border-top: 1px solid var(--border); }

.alloc-summary { margin-bottom: 10px; }
.alloc-summary__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--muted); }
@media (max-width: 900px) { .alloc-summary__row { grid-template-columns: 1fr; } }

/* === Résultats : résumé Top 3 ================================= */
.results-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}
.results-summary__title { color: var(--muted); font-size: 0.92rem; }
.results-summary__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  background: var(--chip-bg);
  color: var(--chip-ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.88rem;
  line-height: 1;
}
.pill--muted { opacity: 0.7; }

/* === Grille des cartes ====================================== */
.alloc-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .alloc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .alloc-grid { grid-template-columns: 1fr; } }

.asset-card {
  background: #0f1729;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-size: 0.96rem;
  line-height: 1.48;
}
.asset-card--compact { white-space: normal; }

/* En‑tête carte */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-title { font-weight: 650; font-size: 1.02rem; }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--chip-bg); color: var(--chip-ink);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 8px; font-size: 0.82rem; line-height: 1;
}
.chip--prio { opacity: 0.95; }
.chip--score { background: transparent; }
.chip--high { background: #103026; border-color: #1e7f5b; }
.chip--mid  { background: #0f1f36; border-color: #2a5ea8; }
.chip--low  { background: #171a20; border-color: #5a6070; }

/* Blocs internes */
.block { margin-top: 8px; }
.block-title { color: var(--muted); font-size: 0.9rem; margin-bottom: 4px; }
.list { margin: 0; padding-left: 18px; }
.list li { margin: 3px 0; }
.block--muted { color: var(--muted); }
.reason-line { font-size: 0.92rem; }

/* Plan pédagogique */
.alloc-plan, .alloc-notes { margin-top: 12px; }
.alloc-plan__list { padding-left: 18px; }

/* Pro/Cons markers visibles sans alourdir */