/* =============================================================
   Qote — Carte d'estimation « Le projet » (Option 02)
   Drop-in component. Namespaced .qest- to avoid collisions.

   Tokens: reuses the site's design tokens when present
   (assets/css/tokens.css), with literal fallbacks so the
   component also renders correctly on its own.
   ============================================================= */

.qest {
  /* local aliases → site token, else fallback */
  --qest-forest-900: var(--color-forest-900, #14301f);
  --qest-forest-700: var(--color-forest-700, #1e3d2c);
  --qest-accent: var(--color-accent, #2c8a50);
  --qest-accent-strong: var(--color-accent-strong, #1c6539);
  --qest-accent-soft: var(--color-accent-soft, #e4efe6);
  --qest-paper: var(--color-paper, #f4f3ec);
  --qest-surface: var(--color-surface, #ffffff);
  --qest-ink: var(--color-ink, #16231a);
  --qest-ink-muted: var(--color-ink-muted, #51604f);
  --qest-border: var(--color-border, #d7d6c9);
  --qest-border-soft: var(--color-border-soft, #e6e4d8);
  --qest-peb-from: var(--color-peb-e, #dc943a);   /* current PEB class colour */
  --qest-peb-to: var(--color-peb-b, #3aa463);     /* target PEB class colour */
  --qest-display: var(--font-display, "Playfair Display", Georgia, serif);
  --qest-sans: var(--font-sans, "Libre Franklin", system-ui, sans-serif);
  --qest-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);

  font-family: var(--qest-sans);
  color: var(--qest-ink);
  background: var(--qest-surface);
  border: 1px solid var(--qest-border);
  box-shadow: 0 24px 48px -28px rgba(20, 48, 31, 0.32);
  max-width: 30rem;            /* remove if the parent grid sizes it */
}
.qest *, .qest *::before, .qest *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.qest__head { padding: 20px 22px 16px; border-bottom: 1px solid var(--qest-border); }
.qest__title {
  margin: 0;
  font-family: var(--qest-display); font-weight: 800; font-size: 19px;
  letter-spacing: -0.01em; color: var(--qest-forest-700);
}
.qest__meta { margin: 6px 0 0; font-family: var(--qest-mono); font-size: 11px; color: var(--qest-ink-muted); }

/* ---------- Energy gauge (PEB) ---------- */
.qest__peb {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--qest-accent-soft), transparent);
  border-bottom: 1px solid var(--qest-border);
}
.qest__peb-label { font-family: var(--qest-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qest-ink-muted); }
.qest__peb-chips { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.qest__chip {
  width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--qest-display); font-weight: 900; font-size: 18px; color: #fff;
}
.qest__chip--from { background: var(--qest-peb-from); }
.qest__chip--to { background: var(--qest-peb-to); }
.qest__peb-arrow { color: var(--qest-ink-muted); font-size: 16px; line-height: 1; }
.qest__gain { margin-left: auto; text-align: right; }
.qest__gain b { display: block; font-family: var(--qest-display); font-weight: 800; font-size: 22px; color: var(--qest-accent-strong); line-height: 1; }
.qest__gain span { font-family: var(--qest-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qest-ink-muted); }

/* ---------- Scope rows ---------- */
.qest__scope { padding: 6px 22px; }
.qest__row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--qest-border-soft);
}
.qest__row:last-child { border-bottom: none; }
.qest__icon { width: 30px; height: 30px; display: grid; place-items: center; background: var(--qest-accent-soft); color: var(--qest-accent-strong); }
.qest__icon svg { width: 17px; height: 17px; }
.qest__row-title b { display: block; font-size: 13.5px; color: var(--qest-forest-700); font-weight: 600; }
.qest__row-title span { font-family: var(--qest-mono); font-size: 10px; color: var(--qest-ink-muted); }
.qest__amount { font-family: var(--qest-mono); font-size: 13px; color: var(--qest-forest-700); white-space: nowrap; }

/* ---------- Totals band ---------- */
.qest__totals { padding: 16px 22px; background: var(--qest-forest-700); color: #fff; }
.qest__totrow { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,0.7); padding: 3px 0; }
.qest__totrow--gain { color: #bfe0c4; }
.qest__totrow--net {
  color: #fff; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,0.2); margin-top: 6px; padding-top: 10px;
}
.qest__totrow--net span:first-child { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.qest__totrow--net b { font-family: var(--qest-display); font-weight: 800; font-size: 24px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .qest, .qest * { transition: none !important; } }