/* =============================================================================
 * BatiBrain : styles des calculateurs bâtiment
 * Design system : design-system/batibrain/MASTER.md
 * Scopé sous .bb-calc : tokens repris du thème avec repli (fonctionne aussi
 * dans le harnais de preview, hors WordPress).
 * ===========================================================================*/
.bb-calc {
  --bbc-navy: var(--bb-navy, #0f172a);
  --bbc-accent: var(--bb-accent, #0369a1);
  --bbc-accent-dark: #075985;
  --bbc-ink: #1e293b;
  --bbc-muted: #64748b;
  --bbc-border: var(--bb-border, #e2e8f0);
  --bbc-bg: var(--bb-bg, #f8fafc);
  --bbc-sky: #e0f2fe;
  --bbc-radius: 12px;
  --bbc-radius-sm: 8px;
  --bbc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --bbc-shadow-md: 0 4px 6px rgba(0, 0, 0, .1);
  --bbc-shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);

  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--bbc-ink);
  max-width: 60rem;
  margin: 0 auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.bb-calc *,
.bb-calc *::before,
.bb-calc *::after { box-sizing: border-box; }

/* ---- En-tête ------------------------------------------------------------ */
.bb-calc-head { text-align: center; margin-bottom: 1.75rem; }

.bb-calc-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--bbc-sky); border: 1px solid #bae6fd; color: var(--bbc-accent-dark);
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
}
.bb-calc-badge svg { width: 1rem; height: 1rem; }

.bb-calc-title {
  margin: .75rem 0 .35rem; font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--bbc-navy);
}
.bb-calc-lead { margin: 0 auto; max-width: 42rem; color: var(--bbc-muted); font-size: 1.0625rem; }

/* ---- Corps : formulaire (gauche) + résultat (droite) -------------------- */
.bb-calc-body {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start;
}
@media (max-width: 720px) { .bb-calc-body { grid-template-columns: 1fr; } }

.bb-calc-form {
  background: #fff; border: 1px solid var(--bbc-border); border-radius: var(--bbc-radius);
  padding: 1.5rem; box-shadow: var(--bbc-shadow-sm);
  display: flex; flex-direction: column; gap: 1.1rem;
}

.bb-calc-field { display: flex; flex-direction: column; gap: .4rem; }
.bb-calc-field[hidden] { display: none; }

.bb-calc-label { font-size: .875rem; font-weight: 600; color: var(--bbc-navy); }

.bb-calc-inputwrap { position: relative; display: flex; align-items: center; }

.bb-calc-input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--bbc-ink);
  padding: .7rem .85rem; border: 1px solid var(--bbc-border); border-radius: var(--bbc-radius-sm);
  background: #fff; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bb-calc-inputwrap .bb-calc-input { padding-right: 3.25rem; }
.bb-calc-input:focus { outline: none; border-color: var(--bbc-accent); box-shadow: 0 0 0 3px rgba(3, 105, 161, .15); }
select.bb-calc-input { cursor: pointer; appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem; padding-right: 2.5rem;
}

.bb-calc-unit {
  position: absolute; right: .85rem; font-size: .875rem; font-weight: 600; color: var(--bbc-muted); pointer-events: none;
}
.bb-calc-hint { font-size: .75rem; color: var(--bbc-muted); }

/* ---- Contrôle segmenté (méthode / sens) --------------------------------- */
.bb-calc-seg {
  display: flex; gap: .25rem; padding: .25rem; background: var(--bbc-bg);
  border: 1px solid var(--bbc-border); border-radius: var(--bbc-radius-sm); flex-wrap: wrap;
}
.bb-calc-seg-btn {
  flex: 1 1 auto; min-width: max-content; font: inherit; font-size: .8125rem; font-weight: 600;
  padding: .5rem .6rem; border: 0; border-radius: 6px; background: transparent; color: var(--bbc-muted);
  cursor: pointer; transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.bb-calc-seg-btn:hover { color: var(--bbc-navy); }
.bb-calc-seg-btn.is-active { background: #fff; color: var(--bbc-navy); box-shadow: var(--bbc-shadow-sm); }

/* ---- Panneau résultat --------------------------------------------------- */
.bb-calc-result {
  background: var(--bbc-navy); color: #fff; border-radius: var(--bbc-radius);
  padding: 1.5rem; box-shadow: var(--bbc-shadow-md); position: sticky; top: 1rem;
}
@media (max-width: 720px) { .bb-calc-result { position: static; } }

.bb-calc-result-title {
  margin: 0 0 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #7dd3fc;
}
.bb-calc-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }

.bb-calc-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(125, 211, 252, .18);
}
.bb-calc-row:last-child { border-bottom: 0; }
.bb-calc-row-label { color: #cbd5e1; font-size: .9375rem; }
.bb-calc-row-value {
  font-size: 1.25rem; font-weight: 800; color: #fff; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.bb-calc-row-unit { font-size: .875rem; font-weight: 600; color: #94a3b8; }
.bb-calc-row-hint { grid-column: 1 / -1; color: #94a3b8; font-size: .8125rem; margin-top: -.15rem; }

.bb-calc-row.is-strong { padding: .85rem 0; }
.bb-calc-row.is-strong .bb-calc-row-value { font-size: 1.5rem; color: #7dd3fc; }
.bb-calc-row.is-strong .bb-calc-row-label { color: #fff; font-weight: 600; }

/* ---- Note méthodologique ------------------------------------------------ */
.bb-calc-note {
  margin: 1.25rem 0 0; padding: .9rem 1.1rem; font-size: .8125rem; color: #475569;
  background: var(--bbc-bg); border: 1px solid var(--bbc-border); border-left: 3px solid var(--bbc-accent);
  border-radius: var(--bbc-radius-sm);
}
.bb-calc-note[hidden] { display: none; }

/* ---- FAQ (details/summary) --------------------------------------------- */
.bb-calc-faq { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.bb-calc-faq details {
  background: #fff; border: 1px solid var(--bbc-border); border-radius: var(--bbc-radius-sm);
  padding: .9rem 1.1rem; box-shadow: var(--bbc-shadow-sm);
}
.bb-calc-faq summary {
  cursor: pointer; font-weight: 600; color: var(--bbc-navy); list-style: none;
  position: relative; padding-right: 1.75rem;
}
.bb-calc-faq summary::-webkit-details-marker { display: none; }
.bb-calc-faq summary::after {
  content: ""; position: absolute; right: .25rem; top: 50%; width: .55rem; height: .55rem;
  border-right: 2px solid var(--bbc-accent); border-bottom: 2px solid var(--bbc-accent);
  transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease;
}
.bb-calc-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.bb-calc-faq details p { margin: .7rem 0 0; color: #334155; font-size: .9375rem; }

/* ---- CTA « pont » vers l'app ------------------------------------------- */
.bb-calc-cta {
  margin-top: 1.75rem; padding: 1.5rem; text-align: center;
  background: linear-gradient(135deg, var(--bbc-navy), #1e293b);
  border-radius: var(--bbc-radius); box-shadow: var(--bbc-shadow-md);
}
.bb-calc-cta p { margin: 0 0 1rem; color: #e2e8f0; font-size: 1.0625rem; font-weight: 600; }
.bb-calc-cta-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .8rem 1.6rem;
  background: var(--bbc-accent); color: #fff; font-weight: 700; font-size: 1.0625rem;
  border-radius: var(--bbc-radius-sm); text-decoration: none;
  box-shadow: 0 8px 24px rgba(3, 105, 161, .35);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.bb-calc-cta-btn svg { width: .85em; height: .85em; transition: transform 200ms ease; }
.bb-calc-cta-btn:hover { background: var(--bbc-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(3, 105, 161, .45); }
.bb-calc-cta-btn:hover svg { transform: translateX(3px); }

/* ---- Accessibilité ------------------------------------------------------ */
.bb-calc a:focus-visible,
.bb-calc button:focus-visible,
.bb-calc summary:focus-visible,
.bb-calc select:focus-visible,
.bb-calc input:focus-visible { outline: 2px solid var(--bbc-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bb-calc *, .bb-calc *::before, .bb-calc *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}