/**
 * HomeBe — styles spécifiques aux shortcodes du plugin homebe-simulator.
 * Charge en complément du CSS atomique du thème enfant (hello-elementor-homebe).
 *
 * @package homebe-simulator
 * @version 0.1.0
 */

/* ============================================================
   PAGE BIENTÔT
   ============================================================ */
.hb-bientot { padding-top: 0; }

.hb-bientot-hero {
  padding: 128px 0 100px;
  overflow: hidden;
}

.hb-bientot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hb-eyebrow-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hb-dot-blink {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-amber);
  animation: hb-blink 2.2s ease-in-out infinite;
  display: inline-block;
}

.hb-bientot-title {
  margin-top: 18px;
  letter-spacing: -.04em;
}

.hb-bientot-desc {
  margin-top: 22px;
  max-width: 480px;
}

.hb-bientot-eta { margin-top: 28px; }

.hb-eta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(217,164,65,.16);
  color: var(--hb-amber2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-eta-badge .hb-live {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-amber);
  display: inline-block;
}

.hb-bientot-ctas {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Visuel (colonne droite) --- */
.hb-bientot-card {
  position: relative;
  aspect-ratio: 5/4;
  max-height: 480px;
  background: var(--hb-navy);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hb-line);
}

.hb-bientot-card-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.22) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  opacity: 0.5;
}

.hb-bientot-card-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.hb-bientot-card-pulse-wrap {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(217,164,65,0.16);
  border: 1.4px solid var(--hb-amber);
  display: flex; align-items: center; justify-content: center;
}

.hb-bientot-card-pulse-ring {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1.4px solid var(--hb-amber);
  opacity: 0.3;
  animation: hb-pulse-ring 3.5s ease-out infinite;
}

.hb-bientot-construction {
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(27,42,78,0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 12px; font-weight: 600;
  letter-spacing: -.005em;
}
.hb-bientot-construction .hb-live {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-amber);
  display: inline-block;
}

/* --- Section "En attendant" --- */
.hb-bientot-available {
  padding: 80px 0;
  background: #fff;
}

.hb-bientot-avail-title {
  margin-top: 14px;
  font-size: clamp(24px, 3vw, 32px);
}

.hb-bientot-avail-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hb-bientot-avail-card {
  padding: 24px;
  min-height: 140px;
  display: flex;
  gap: 18px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.hb-bientot-avail-card:hover { transform: translateY(-2px); }

.hb-bientot-avail-icon {
  flex: 0 0 56px;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--hb-cream);
  display: flex; align-items: center; justify-content: center;
}

.hb-bientot-avail-body { flex: 1; }

.hb-bientot-avail-head {
  display: flex; align-items: center; gap: 10px;
}

.hb-bientot-avail-h {
  font-size: 20px;
  margin: 0;
}

.hb-bientot-avail-desc {
  margin-top: 6px;
  font-size: 13.5px;
}

.hb-bientot-avail-arrow { flex: 0 0 auto; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hb-bientot-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hb-bientot-avail-grid {
    grid-template-columns: 1fr;
  }
  .hb-bientot-hero {
    padding: 96px 0 56px;
  }
  .hb-bientot-available {
    padding: 56px 0;
  }
  .hb-bientot-card { max-height: 360px; }
  .hb-bientot-title { font-size: clamp(32px, 8vw, 48px); }
  .hb-bientot-avail-title { font-size: clamp(20px, 5vw, 28px); }
}

/* ============================================================
   PAGE ACCUEIL — [homebe_accueil]
   6b. Hero constellation + tagline + CTAs
   ============================================================ */
.hb-accueil { padding-top: 0; }

.hb-accueil-hero {
  /* padding-top: 128px = 80px (hauteur header fixed) + 48px d'air. */
  padding: 128px 0 88px;
  overflow: hidden;
  position: relative;
}

.hb-accueil-hero-top {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* --- Constellation stage --- */
.hb-accueil-constellation {
  position: relative;
  height: 540px;
  margin: 36px auto 0;
  max-width: 1100px;
  width: 100%;
}

.hb-constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Pill central --- */
.hb-pill-central {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--hb-navy);
  color: #fff;
  border-radius: 999px;
  padding: 14px 22px 14px 14px;
  border: 1.4px solid var(--hb-navy);
  min-width: 260px;
  text-decoration: none !important;
}

.hb-pill-central-ring {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--hb-amber);
  opacity: 0;
  animation: hb-pulse-ring 3.2s ease-out infinite;
  pointer-events: none;
}

.hb-pill-central-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hb-amber);
  color: var(--hb-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  flex: 0 0 36px;
}

.hb-pill-central-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.hb-pill-central-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.005em;
}

.hb-pill-central-sub {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- Orbs flottants cliquables --- */
.hb-orb {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--hb-line);
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .25s ease, border-color .25s ease;
}
.hb-orb:hover {
  border-color: var(--hb-navy);
  transform: translate(-50%, -50%) scale(1.08);
}

.hb-orb-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}

.hb-orb-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}

/* --- Hero bottom : tagline + CTAs + checks --- */
.hb-accueil-hero-bottom {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 120px;
}

.hb-accueil-tagline,
.hb-accueil .hb-accueil-tagline,
h1.hb-accueil-tagline {
  /* !important nécessaire pour battre .hb-h1 du thème enfant qui force min 40px.
     Sur 375px viewport, 5vw = 18.75px → clampé à 20px ; tient sur 1 ligne. */
  margin: 0 auto !important;
  font-size: clamp(20px, 5vw, 60px) !important;
  line-height: 1.1 !important;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Le wrapper Reveal autour du H1 doit aussi prendre la largeur disponible */
.hb-accueil-hero-bottom > .hb-reveal {
  width: 100%;
}

/* Break utilitaire : ne s'affiche que <= 600px de viewport (mobile).
   Force un wrap propre du H1 tagline sur 2 lignes pour les petits écrans. */
.hb-mobile-br { display: none; }
@media (max-width: 600px) {
  .hb-mobile-br { display: inline; }
}

/* ============================================================
   CAPACITÉ D'EMPRUNT — [homebe_capacite]
   Outil 1 du Simulateur. Layout 2-col sticky avec inputs riche
   à gauche et panneau résultats temps réel à droite.
   ============================================================ */
.hb-capacite-wrap {
  padding-top: 0;
  /* La classe hb-amber-text est utilisée par le hero du Bientôt aussi,
     elle est déjà définie. On la rappelle ici pour la portabilité. */
}
.hb-amber-text { color: var(--hb-amber); }

/* ---- Header outil ---- */
.hb-capacite-header {
  padding: 128px 0 48px;
  overflow: hidden;
  position: relative;
}
.hb-capacite-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--hb-sub);
  margin-bottom: 16px;
  position: relative;
}
.hb-capacite-breadcrumb a { color: var(--hb-sub); font-weight: 500; }
.hb-capacite-breadcrumb a:hover { color: var(--hb-navy); }
.hb-capacite-breadcrumb > span:not(.hb-chip) { color: var(--hb-mid); }
.hb-capacite-breadcrumb > span:last-child { color: var(--hb-navy); font-weight: 700; }

.hb-capacite-title {
  margin-top: 18px;
  font-size: clamp(36px, 4.5vw, 56px);
  max-width: 900px;
  letter-spacing: -.035em;
  position: relative;
}
.hb-capacite-lead {
  margin-top: 18px;
  max-width: 620px;
  position: relative;
}

/* ---- Body : 2-col grid ---- */
.hb-capacite-body {
  padding: 56px 0 80px;
  background: #fff;
}

.hb-capacite-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: flex-start;
}

/* ---- Colonne gauche : inputs ---- */
.hb-capacite-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hb-cap-card {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 16px;
  padding: 24px;
}

.hb-cap-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
}
.hb-cap-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.015em;
  margin: 0;
}
.hb-cap-card-hint {
  font-size: 12px;
  color: var(--hb-mid);
  font-style: italic;
}

.hb-cap-field { margin-bottom: 20px; }
.hb-cap-field:last-child { margin-bottom: 0; }

.hb-cap-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hb-cap-field-head label,
.hb-cap-field-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hb-navy);
}
.hb-cap-field-label { margin-bottom: 10px; }

.hb-cap-output {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.hb-cap-output .hb-mono {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hb-cap-unit {
  font-size: 12px;
  color: var(--hb-sub);
  font-weight: 600;
  margin-left: 2px;
}

.hb-cap-field-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--hb-mid);
  font-family: ui-monospace, monospace;
}

.hb-cap-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--hb-mid);
  line-height: 1.5;
  font-style: italic;
}

/* Pills radio HomeBe — toggles entre options */
.hb-cap-pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hb-cap-pill {
  position: relative;
  cursor: pointer;
}
.hb-cap-pill input { position: absolute; opacity: 0; pointer-events: none; }
.hb-cap-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--hb-navy);
  border: 1.5px solid var(--hb-line);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.hb-cap-pill input:checked + span {
  background: var(--hb-navy);
  color: #fff !important;
  border-color: var(--hb-navy);
}
.hb-cap-pill:hover span { border-color: var(--hb-navy); }

.hb-cap-text-input {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--hb-line);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-navy);
  font-family: ui-monospace, monospace;
  letter-spacing: .04em;
  outline: none;
  transition: border-color .15s;
}
.hb-cap-text-input:focus { border-color: var(--hb-navy); }

/* ---- Colonne droite : résultats sticky ---- */
.hb-capacite-results {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A. Bloc principal */
.hb-cap-main {
  background: var(--hb-navy);
  color: #fff;
  border-radius: 18px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.hb-cap-main-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(217,164,65,.20), transparent 60%);
  pointer-events: none;
}
.hb-cap-main-content { position: relative; }
.hb-cap-main-eyebrow {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px;
}
.hb-cap-main-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.hb-cap-main-big .hb-mono {
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hb-cap-main-unit {
  font-size: 26px;
  color: var(--hb-amber);
  font-weight: 700;
}
.hb-cap-main-sub {
  color: rgba(255,255,255,.7);
  margin-top: 10px;
  font-size: 13px;
}
.hb-cap-main-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hb-cap-main-kv-label {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.hb-cap-main-kv-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
  letter-spacing: -.02em;
}
.hb-cap-main-ptz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hb-amber);
  color: var(--hb-navy);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: -.005em;
}

/* B. KV cards */
.hb-cap-kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hb-cap-kv {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 12px;
  padding: 14px;
}
.hb-cap-kv-label {
  font-size: 11px;
  color: var(--hb-mid);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.hb-cap-kv-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 4px;
  letter-spacing: -.02em;
}
.hb-cap-kv-sub {
  font-size: 11px;
  color: var(--hb-mid);
  margin-top: 2px;
}

/* C. Barre endettement */
.hb-cap-debt {
  background: var(--hb-mist);
  border-radius: 12px;
  padding: 18px;
}
.hb-cap-debt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hb-cap-debt-label {
  font-size: 11px;
  color: var(--hb-sub);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
.hb-cap-debt-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--hb-navy);
}
.hb-cap-debt-bar {
  height: 10px;
  background: var(--hb-line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hb-cap-debt-fill {
  position: absolute;
  inset: 0;
  background: var(--hb-amber);
  border-radius: 999px;
  width: 100%;
  transition: width .25s ease;
}
.hb-cap-debt-mark {
  position: absolute;
  top: -1px;
  left: 100%;
  width: 2px;
  height: 12px;
  background: var(--hb-navy);
  transform: translateX(-50%);
}
.hb-cap-debt-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--hb-mid);
  font-family: ui-monospace, monospace;
}
.hb-cap-debt-scale > span:nth-child(2) {
  color: var(--hb-navy);
  font-weight: 600;
}

/* D. Leviers */
.hb-cap-leviers {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 14px;
  padding: 18px;
}
.hb-cap-leviers-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.hb-cap-leviers-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hb-navy);
  margin: 0;
  letter-spacing: -.005em;
}
.hb-cap-leviers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hb-cap-lev {
  padding: 14px;
  background: rgba(217,164,65,.08);
  border: 1px solid rgba(217,164,65,.25);
  border-radius: 10px;
  transition: opacity .25s ease;
}
.hb-cap-lev-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hb-amber2, #B8852B);
  letter-spacing: -.005em;
}
.hb-cap-lev-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 6px;
  letter-spacing: -.02em;
}
.hb-cap-lev-sub {
  font-size: 10.5px;
  color: var(--hb-mid);
  margin-top: 4px;
}

/* E. Stress test */
.hb-cap-stress {
  background: rgba(224,144,47,.10);
  border: 1px solid rgba(224,144,47,.30);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hb-cap-stress-icon { flex: 0 0 24px; }
.hb-cap-stress-title {
  font-size: 11.5px;
  color: #B36E15;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-cap-stress-body {
  font-size: 13px;
  color: var(--hb-navy);
  line-height: 1.5;
  margin-top: 4px;
}
.hb-cap-stress-body strong { color: var(--hb-navy); }

/* F. OpenTheMath */
.hb-cap-math {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 12px;
  padding: 14px 18px;
}
.hb-cap-math summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hb-navy);
  list-style: none;
}
.hb-cap-math summary::-webkit-details-marker { display: none; }
.hb-cap-math[open] summary { margin-bottom: 12px; }
.hb-cap-math-body {
  border-top: 1px dashed var(--hb-line);
  padding-top: 14px;
  font-size: 13px;
  color: var(--hb-sub);
  line-height: 1.6;
}
.hb-cap-math-formula {
  background: var(--hb-mist);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--hb-navy);
  font-weight: 600;
  text-align: center;
}
.hb-cap-math-list {
  margin: 14px 0;
  padding-left: 20px;
}
.hb-cap-math-list li { margin-bottom: 6px; }
.hb-cap-math-sources {
  padding-top: 12px;
  border-top: 1px dashed var(--hb-line);
  font-size: 12px;
  color: var(--hb-mid);
}

/* G. CTA */
.hb-cap-cta {
  text-align: center;
  padding: 24px 0 0;
}
.hb-cap-cta-sub {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hb-mid);
}

/* Footer sources */
.hb-capacite-footer {
  padding: 32px 0;
  background: var(--hb-mist);
  border-top: 1px solid var(--hb-line);
}
.hb-cap-sources {
  font-size: 12px;
  color: var(--hb-mid);
  line-height: 1.6;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.hb-cap-sources strong { color: var(--hb-navy); }

/* Responsive */
@media (max-width: 1100px) {
  .hb-capacite-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hb-capacite-results {
    position: static;
  }
  .hb-cap-leviers-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hb-capacite-header { padding: 48px 0 32px; }
  .hb-capacite-body { padding: 32px 0 56px; }
  .hb-capacite-title { font-size: clamp(28px, 7vw, 40px); }
  .hb-cap-main { padding: 24px; }
  .hb-cap-main-big .hb-mono { font-size: 44px; }
  .hb-cap-main-unit { font-size: 20px; }
  .hb-cap-kvs { grid-template-columns: 1fr; }
  .hb-cap-leviers-grid { grid-template-columns: 1fr; }
  .hb-cap-main-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================================
   FRAIS DE NOTAIRE — [homebe_frais]
   Outil 2 du Simulateur. Réutilise les classes .hb-capacite-*
   et .hb-cap-* pour le chrome ; spécifique : breakdown + tranches
   + carte département + comparaison Ancien vs Neuf.
   ============================================================ */

/* Breakdown 4 postes avec barres */
.hb-frais-breakdown { }
.hb-frais-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hb-line);
}
.hb-frais-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hb-frais-row:first-of-type { padding-top: 0; }

.hb-frais-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.hb-frais-row-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}
.hb-frais-row-desc {
  font-size: 11.5px;
  color: var(--hb-mid);
  margin-top: 2px;
  line-height: 1.45;
}
.hb-frais-row-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.hb-frais-row-bar {
  height: 5px;
  background: var(--hb-mist);
  border-radius: 999px;
  overflow: hidden;
}
.hb-frais-row-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}

/* Émoluments — détail des 4 tranches dégressives */
.hb-frais-tranches { }
.hb-frais-tranches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.hb-frais-tranche {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--hb-mist);
  border-radius: 8px;
}
.hb-frais-tranche-range {
  font-size: 12.5px;
  color: var(--hb-sub);
  font-weight: 500;
}
.hb-frais-tranche-rate {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-amber2, #B8852B);
  letter-spacing: -.01em;
  text-align: right;
}
.hb-frais-tranche-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--hb-navy);
  text-align: right;
  letter-spacing: -.02em;
}

/* Comparaison Ancien vs Neuf */
.hb-frais-compare {
  background: var(--hb-cream);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(217,164,65,.30);
}
.hb-frais-compare-icon { flex: 0 0 24px; }
.hb-frais-compare-text {
  font-size: 13.5px;
  color: var(--hb-text);
  line-height: 1.6;
}
.hb-frais-compare-text strong.hb-mono {
  color: var(--hb-amber2, #B8852B);
}

/* Chip de comparaison dans le bloc principal */
.hb-frais-comp-chip {
  background: rgba(217,164,65,.20);
  color: var(--hb-amber);
  font-size: 11.5px;
  font-weight: 700;
}

/* Note département */
.hb-frais-dept-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hb-mist);
  border-radius: 10px;
  border: 1px solid var(--hb-line);
}
.hb-frais-dept-icon { flex: 0 0 18px; padding-top: 1px; }
.hb-frais-dept-text {
  font-size: 12.5px;
  color: var(--hb-sub);
  line-height: 1.55;
}
.hb-frais-dept-text strong { color: var(--hb-navy); }

/* Sub-section title dans OpenTheMath (multi-blocs) */
.hb-cap-math-section {
  display: block;
  color: var(--hb-navy);
  font-size: 13.5px;
  margin-bottom: 6px;
  margin-top: 14px;
}
.hb-cap-math-body > div:first-child .hb-cap-math-section { margin-top: 0; }

@media (max-width: 600px) {
  .hb-frais-tranche {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: left;
  }
  .hb-frais-tranche-rate,
  .hb-frais-tranche-amount { text-align: left; }
}

/* ============================================================
   QUIZ 7 ÉTAPES — [homebe_quiz]
   Layout : header sticky + contenu principal (gauche) + sidebar 3 cartes (droite).
   Fidèle au design ~/Desktop/HomeBe V1/HomeBe Quiz.html.
   NB : Hello Elementor parent reset injecte border:1px solid #c36 sur tous
   les <button>. Chaque styling de bouton ci-dessous applique donc
   border: ... !important pour neutraliser cette injection.
   ============================================================ */
.hb-quiz-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--hb-cream);
}

/* ─── Header sticky ──────────────────────────────────────── */
.hb-quiz-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hb-line);
}
.hb-quiz-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
}
.hb-quiz-header-logo img { height: 22px; width: auto; display: block; }
.hb-quiz-header-divider {
  width: 1px;
  height: 22px;
  background: var(--hb-line);
}
.hb-quiz-header-step {
  font-size: 12px;
  color: var(--hb-sub);
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.hb-quiz-header-progress {
  flex: 1;
  height: 6px;
  background: var(--hb-line);
  border-radius: 999px;
  overflow: hidden;
}
.hb-quiz-header-progress-fill {
  height: 100%;
  background: var(--hb-amber);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.hb-quiz-header-pct {
  font-size: 12px;
  color: var(--hb-sub);
  font-weight: 600;
  min-width: 30px;
  text-align: right;
}
.hb-quiz-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hb-sub) !important;
  font-weight: 500;
  padding: 7px 14px;
  background: transparent !important;
  border: 1px solid var(--hb-line) !important;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  outline: 0;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.hb-quiz-header-btn:hover {
  background: #fff !important;
  border-color: var(--hb-navy) !important;
  color: var(--hb-navy) !important;
}

/* ─── Modal Reprendre ────────────────────────────────────── */
.hb-quiz-resume-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15,26,51,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hb-quiz-resume-modal[hidden] { display: none; }
.hb-quiz-resume-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(15,26,51,.25);
}
.hb-quiz-resume-card p {
  margin-top: 12px;
  color: var(--hb-sub);
  font-size: 15px;
  line-height: 1.55;
}
.hb-quiz-resume-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ─── Body : contenu principal + sidebar (droite) ────────── */
.hb-quiz-body {
  flex: 1;
  padding: 56px 0 80px;
}
.hb-quiz-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: flex-start;
  max-width: 1080px;
  margin: 0 auto;
}

/* ─── Contenu principal ──────────────────────────────────── */
.hb-quiz-content {
  /* pas de carte englobante — le contenu sit directement sur cream */
}

/* Étape (chacune cachée sauf is-active) */
.hb-quiz-step { display: none; }
.hb-quiz-step.is-active {
  display: block;
  animation: hb-quiz-fade .35s ease-out;
}
@keyframes hb-quiz-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.hb-quiz-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.hb-quiz-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hb-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
}
.hb-quiz-step-eyebrow {
  color: var(--hb-amber) !important;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 700;
}
.hb-quiz-step-title {
  margin: 4px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.hb-quiz-step-sub {
  margin: 0 0 36px;
  font-size: 16px;
  color: var(--hb-sub);
  max-width: 560px;
  line-height: 1.55;
}

.hb-quiz-step-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─── Champ générique : label + note ─────────────────────── */
.hb-quiz-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}
.hb-quiz-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}
.hb-quiz-field-note {
  font-size: 11.5px;
  color: var(--hb-mid);
  font-style: italic;
}

/* ─── Input monétaire / numérique grand format ───────────── */
.hb-quiz-money {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 4px 4px 4px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.hb-quiz-money:focus-within {
  border-color: var(--hb-line);
  box-shadow: 0 0 0 3px rgba(27,42,78,.08);
}
.hb-quiz-money-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 20px;
  font-weight: 600;
  color: var(--hb-navy);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: -.01em;
  padding: 12px 0;
  min-width: 0;
  -moz-appearance: textfield;
}
.hb-quiz-money-input::-webkit-outer-spin-button,
.hb-quiz-money-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hb-quiz-money-suffix {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--hb-mist);
  font-size: 12px;
  font-weight: 600;
  color: var(--hb-sub);
  letter-spacing: .02em;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* taille compacte (ans, m², enfants) */
.hb-quiz-money--sm { max-width: 280px; }
.hb-quiz-money--sm .hb-quiz-money-input { font-size: 17px; padding: 10px 0; }

/* ─── Input text (code postal) ───────────────────────────── */
.hb-quiz-text-input {
  width: 100%;
  max-width: 240px;
  padding: 14px 18px;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-navy);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .02em;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.hb-quiz-text-input:focus {
  border-color: var(--hb-line);
  box-shadow: 0 0 0 3px rgba(27,42,78,.08);
}

/* ─── Pills (radio group) ────────────────────────────────── */
.hb-quiz-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hb-quiz-pill {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.hb-quiz-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hb-quiz-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  background: #fff;
  color: var(--hb-navy);
  border: 1.5px solid var(--hb-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.hb-quiz-pill:hover span { border-color: var(--hb-navy); }
.hb-quiz-pill input:checked + span {
  background: var(--hb-navy);
  color: #fff;
  border-color: var(--hb-navy);
}

/* ─── Slider grand format (surface, étape 5) ─────────────── */
.hb-quiz-slider-display {
  font-size: 32px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.hb-quiz-slider-unit {
  font-size: 16px;
  color: var(--hb-sub);
  font-weight: 600;
  margin-left: 4px;
}
.hb-quiz-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--hb-line);
  border-radius: 999px;
  outline: none;
  margin: 6px 0 0;
}
.hb-quiz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hb-amber);
  border: 3px solid var(--hb-navy);
  cursor: pointer;
  transition: transform .15s;
}
.hb-quiz-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.hb-quiz-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hb-amber);
  border: 3px solid var(--hb-navy);
  cursor: pointer;
}
.hb-quiz-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--hb-mid);
  font-family: ui-monospace, monospace;
}

/* ─── Étape 7 : encart "Données détectées" + lignes recap ── */
.hb-quiz-recap-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(217,164,65,.10);
  border: 1.5px solid var(--hb-amber);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 4px;
}
.hb-quiz-recap-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(217,164,65,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.hb-quiz-recap-banner-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hb-navy);
}
.hb-quiz-recap-banner-title .hb-mono {
  color: var(--hb-amber);
  margin-left: 4px;
}
.hb-quiz-recap-banner-sub {
  font-size: 12px;
  color: var(--hb-sub);
  margin-top: 2px;
  line-height: 1.45;
}

.hb-quiz-recap-row {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .2s;
}
.hb-quiz-recap-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hb-quiz-recap-info { flex: 1; min-width: 0; }
.hb-quiz-recap-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hb-navy);
}
.hb-quiz-recap-source {
  font-size: 11.5px;
  color: var(--hb-mid);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hb-quiz-recap-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.hb-quiz-recap-chip {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
  background: var(--hb-cream);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hb-amber);
  font-variant-numeric: tabular-nums;
}
.hb-quiz-recap-modify {
  background: transparent !important;
  border: 1px solid var(--hb-line) !important;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hb-sub) !important;
  cursor: pointer;
  font-family: inherit;
  outline: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.hb-quiz-recap-modify:hover,
.hb-quiz-recap-modify.is-open {
  border-color: var(--hb-navy) !important;
  color: var(--hb-navy) !important;
  background: #fff !important;
}
.hb-quiz-recap-editor {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--hb-line);
}
.hb-quiz-recap-editor[hidden] { display: none; }
.hb-quiz-recap-foot {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--hb-mid);
  font-style: italic;
}

/* ─── Tooltip ────────────────────────────────────────────── */
.hb-quiz-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--hb-line) !important;
  background: var(--hb-mist) !important;
  color: var(--hb-sub);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  border-radius: 50% !important;
  cursor: help;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s, color .15s, border-color .15s;
}
.hb-quiz-tooltip:hover,
.hb-quiz-tooltip:focus {
  background: var(--hb-navy) !important;
  color: #fff;
  border-color: var(--hb-navy) !important;
}
.hb-quiz-tooltip-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 10px 12px;
  background: var(--hb-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  text-align: left;
  font-style: normal;
  z-index: 10;
}
.hb-quiz-tooltip-pop.is-open { opacity: 1; }
.hb-quiz-tooltip-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--hb-navy);
}

/* ─── Navigation Précédent / Suivant ─────────────────────── */
.hb-quiz-nav {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--hb-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ─── Sidebar 3 cartes (CETTE ÉTAPE / 7 ÉTAPES / POURQUOI) ─ */
.hb-quiz-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-quiz-side-card {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 14px;
  padding: 18px;
}
.hb-quiz-side-card .hb-eyebrow {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--hb-sub);
  text-transform: uppercase;
}

/* Carte 1 : compteur */
.hb-quiz-side-counter {
  font-size: 28px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 10px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.hb-quiz-side-counter-sep,
.hb-quiz-side-counter [data-quiz-counter-total] {
  color: var(--hb-mid);
}
.hb-quiz-side-counter-label {
  font-size: 11.5px;
  color: var(--hb-mid);
  margin-top: 2px;
}

/* Carte 2 : navigateur des 7 étapes */
.hb-quiz-side-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.hb-quiz-side-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: transparent !important;
  border: 0 !important;
  color: var(--hb-navy) !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  outline: 0;
  transition: background .15s;
}
.hb-quiz-side-step:hover { background: var(--hb-mist); }
.hb-quiz-side-step.is-current { background: var(--hb-cream); }
.hb-quiz-side-step-bullet {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hb-mist);
  color: var(--hb-mid);
  font-size: 10.5px;
  font-weight: 700;
  flex: 0 0 24px;
  text-align: center;
}
.hb-quiz-side-step-name {
  flex: 1;
}
.hb-quiz-side-step.is-current .hb-quiz-side-step-bullet {
  background: var(--hb-navy);
  color: #fff;
}
.hb-quiz-side-step.is-done .hb-quiz-side-step-bullet {
  background: var(--hb-amber);
  color: var(--hb-navy);
}
.hb-quiz-side-step-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hb-sub);
}
.hb-quiz-side-step.is-current .hb-quiz-side-step-name {
  font-weight: 700;
  color: var(--hb-navy);
}
.hb-quiz-side-step.is-done .hb-quiz-side-step-name {
  color: var(--hb-navy);
  font-weight: 500;
}

/* Carte 3 : pourquoi on demande ça */
.hb-quiz-side-help { background: var(--hb-cream); }
.hb-quiz-side-help-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hb-quiz-side-help-eyebrow {
  font-size: 11px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .06em;
}
.hb-quiz-side-help-text {
  font-size: 12.5px;
  color: var(--hb-sub);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ─── Footer ─────────────────────────────────────────────── */
.hb-quiz-footer {
  background: #fff;
  border-top: 1px solid var(--hb-line);
  padding: 18px 0;
}
.hb-quiz-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hb-quiz-footer-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hb-mid);
}

/* ─── Reset focus / outline pour quiz ────────────────────── */
.hb-quiz-wrap button:focus,
.hb-quiz-wrap input:focus,
.hb-quiz-wrap a:focus { outline: 0; }
.hb-quiz-wrap button:focus-visible,
.hb-quiz-wrap input:focus-visible,
.hb-quiz-wrap a:focus-visible {
  outline: 2px solid var(--hb-amber);
  outline-offset: 2px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .hb-quiz-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hb-quiz-sidebar {
    position: static;
    order: -1;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
  }
  .hb-quiz-side-card {
    flex: 0 0 240px;
    padding: 14px;
  }
  .hb-quiz-header-inner { padding: 12px 18px; flex-wrap: wrap; gap: 10px; }
  .hb-quiz-header-progress { order: 5; flex-basis: 100%; height: 4px; }
}
@media (max-width: 560px) {
  .hb-quiz-step-title { font-size: 28px; }
  .hb-quiz-step-sub { font-size: 14px; margin-bottom: 28px; }
  .hb-quiz-nav { flex-direction: column-reverse; align-items: stretch; }
  .hb-quiz-nav .hb-pill { justify-content: center; }
  .hb-quiz-header-step { display: none; }
  .hb-quiz-header-btn { font-size: 11px; padding: 6px 10px; }
  .hb-quiz-money-input { font-size: 17px; }
  .hb-quiz-recap-main { flex-direction: column; align-items: flex-start; }
  .hb-quiz-recap-action { width: 100%; justify-content: space-between; }
}

/* ============================================================
   PAGE SIMULATEUR — [homebe_simulateur]
   Landing du Simulateur : hero split + trust + 4 outils + démo
   capacité + 3 principes + FAQ + CTA final.
   ============================================================ */
.hb-simulateur-wrap { padding-top: 0; }

.hb-simulateur-hero {
  padding: 128px 0 88px;
  overflow: hidden;
  position: relative;
}
.hb-simulateur-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hb-simulateur-hero-title {
  margin-top: 22px;
  font-size: clamp(36px, 5vw, 56px);
  max-width: 600px;
  letter-spacing: -.035em;
}
.hb-simulateur-hero-lead {
  margin-top: 22px;
  max-width: 480px;
}
.hb-simulateur-hero-ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hb-simulateur-hero-checks {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--hb-mid);
  font-size: 13px;
  flex-wrap: wrap;
}

/* Vidéo hero */
.hb-simulateur-hero-visual { position: relative; }
.hb-simulateur-hero-video-shell { position: relative; }
.hb-simulateur-hero-video-shadow {
  position: absolute;
  inset: 4px -4px -4px 4px;
  border-radius: 22px;
  background: var(--hb-navy);
  opacity: 0.06;
  pointer-events: none;
}
.hb-simulateur-hero-video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hb-line);
  background: var(--hb-navy);
  aspect-ratio: 4 / 3;
  max-height: 520px;
}
.hb-simulateur-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-simulateur-hero-video-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(27,42,78,0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  font-weight: 600;
}
.hb-simulateur-hero-video-badge .hb-live {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-amber);
}
.hb-simulateur-hero-video-float {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 220px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--hb-line);
  color: var(--hb-navy);
}
.hb-simulateur-hero-video-float .hb-eyebrow { font-size: 10px; }
.hb-simulateur-hero-video-float-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 4px;
  letter-spacing: -.04em;
}
.hb-simulateur-hero-video-float .hb-caption {
  margin-top: 2px;
  font-size: 11px;
  color: var(--hb-mid);
}

/* Visuel hero ancien : conservé pour fallback éventuel */
.hb-simulateur-hero-card {
  position: relative;
  background: var(--hb-navy);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--hb-line);
  aspect-ratio: 4 / 3;
  max-height: 460px;
  color: #fff;
  overflow: hidden;
}
.hb-simulateur-hero-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.16);
}
.hb-simulateur-hero-card-badge .hb-live {
  width: 6px; height: 6px; border-radius: 999px; background: var(--hb-amber);
  display: inline-block;
}
.hb-simulateur-hero-card-mockup {
  margin-top: 22px;
}
.hb-simulateur-hero-card-amount {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.04em;
  margin-top: 8px;
  line-height: 1;
}
.hb-simulateur-hero-card-sub {
  font-size: 12px;
  color: var(--hb-amber);
  margin-top: 6px;
  font-family: ui-monospace, monospace;
}
.hb-simulateur-hero-card-bar {
  height: 8px;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  margin-top: 22px;
  overflow: hidden;
}
.hb-simulateur-hero-card-bar-fill {
  height: 100%;
  width: 62%;
  background: var(--hb-amber);
  border-radius: 999px;
}
.hb-simulateur-hero-card-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-family: ui-monospace, monospace;
}
.hb-simulateur-hero-card-float {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: #fff;
  color: var(--hb-navy);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--hb-line);
  min-width: 160px;
}
.hb-simulateur-hero-card-float-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.03em;
  margin-top: 4px;
}

/* TrustStrip */
.hb-simulateur-trust {
  border-top: 1px solid var(--hb-line);
  border-bottom: 1px solid var(--hb-line);
  background: #fff;
  padding: 24px 0;
}
.hb-simulateur-trust-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.hb-simulateur-trust-label {
  color: var(--hb-mid);
  font-weight: 500;
}
.hb-simulateur-trust-sources {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.hb-simulateur-trust-source {
  display: flex;
  flex-direction: column;
}
.hb-simulateur-trust-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hb-navy);
  letter-spacing: .04em;
}
.hb-simulateur-trust-for {
  font-size: 11px;
  color: var(--hb-mid);
}

/* 4 outils */
.hb-simulateur-tools {
  padding: 100px 0;
  background: var(--hb-cream);
}
.hb-simulateur-tools-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 48px;
}
.hb-simulateur-tools-h {
  margin-top: 16px;
  font-size: clamp(32px, 4vw, 52px);
}
.hb-simulateur-tools-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
.hb-simulateur-tools-grid > :nth-child(3),
.hb-simulateur-tools-grid > :nth-child(4) {
  grid-column: span 1;
}
.hb-simulateur-tool {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  color: var(--hb-navy);
}
.hb-simulateur-tool--featured {
  grid-row: span 2;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--hb-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hb-simulateur-tool-feat-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(217,164,65,.18), transparent 60%);
  pointer-events: none;
}
.hb-simulateur-tool-feat-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-simulateur-tool-feat-side {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 22px;
}
.hb-simulateur-tool-feat-q {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-top: 8px;
  letter-spacing: -.005em;
}
.hb-simulateur-tool-feat-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  margin-top: 8px;
}
.hb-simulateur-tool-feat-opt.is-on {
  background: rgba(217,164,65,.16);
  border-color: var(--hb-amber);
}
.hb-simulateur-tool-feat-radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4);
  flex: 0 0 14px;
}
.hb-simulateur-tool-feat-opt.is-on .hb-simulateur-tool-feat-radio {
  border-color: var(--hb-amber);
  background: radial-gradient(circle at center, var(--hb-amber) 30%, transparent 35%);
}
.hb-simulateur-tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hb-simulateur-tool-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hb-simulateur-tool-time {
  font-size: 11px;
  color: var(--hb-mid);
  letter-spacing: .06em;
}
.hb-simulateur-tool-title {
  font-size: 22px;
  margin-top: 4px;
}
.hb-simulateur-tool--featured .hb-simulateur-tool-title {
  font-size: 28px;
  color: #fff;
}
.hb-simulateur-tool-desc {
  font-size: 14px;
  color: var(--hb-sub);
  line-height: 1.5;
  flex: 1;
}
.hb-simulateur-tool--featured .hb-simulateur-tool-desc {
  color: rgba(255,255,255,.75);
}
.hb-simulateur-tool--soon { opacity: .8; }

/* ========== Quiz 7 étapes (mockup) ========== */
.hb-simulateur-quiz7 {
  padding: 100px 0;
  background: var(--hb-cream);
  position: relative;
  overflow: hidden;
}
.hb-simulateur-quiz7-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hb-simulateur-quiz7-h { margin-top: 16px; font-size: clamp(32px, 4vw, 52px); max-width: 720px; }
.hb-simulateur-quiz7-h-em { color: var(--hb-sub); font-style: italic; font-weight: 400; }
.hb-simulateur-quiz7-intro { max-width: 340px; font-size: 15px; }
.hb-simulateur-quiz7-grid {
  display: grid;
  gap: 14px;
}
.hb-simulateur-quiz7-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hb-simulateur-quiz7-grid--3 { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.hb-simulateur-step-card {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 16px;
  padding: 22px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hb-simulateur-step-card--accent {
  border-color: rgba(217,164,65,.4);
}
.hb-simulateur-step-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hb-simulateur-step-card-n {
  font-size: 12px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .08em;
}
.hb-simulateur-step-card-time {
  font-size: 10.5px;
  color: var(--hb-mid);
  letter-spacing: .04em;
}
.hb-simulateur-step-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hb-simulateur-step-card-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}
.hb-simulateur-step-card-t {
  font-size: 19px;
  letter-spacing: -.015em;
}
.hb-simulateur-step-card-d {
  font-size: 12.5px;
  color: var(--hb-sub);
  margin-top: -4px;
}
.hb-simulateur-step-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.hb-simulateur-step-card-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--hb-mist);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--hb-navy);
  font-family: ui-monospace, monospace;
}
.hb-simulateur-quiz7-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.hb-simulateur-quiz7-bullets {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--hb-mid);
  font-size: 13px;
  flex-wrap: wrap;
}
.hb-simulateur-quiz7-bullets > span { display: inline-flex; align-items: center; gap: 6px; }

/* ========== Ce que vous recevez (Free + Premium) ========== */
.hb-simulateur-outputs {
  padding: 120px 0;
  background: #fff;
}
.hb-simulateur-outputs-head {
  max-width: 740px;
  margin-bottom: 56px;
}
.hb-simulateur-outputs-h {
  margin-top: 16px;
  font-size: clamp(32px, 4vw, 52px);
}
.hb-simulateur-outputs-head .hb-lead {
  margin-top: 18px;
}
.hb-simulateur-outputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.hb-simulateur-outputs-free {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-simulateur-outputs-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(30,158,107,.12);
  color: var(--hb-ok);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-self: flex-start;
}
.hb-simulateur-outputs-free-card {
  background: var(--hb-cream);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--hb-line);
}
.hb-simulateur-outputs-free-big {
  font-size: 38px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.04em;
  margin-top: 6px;
}
.hb-simulateur-outputs-free-sub {
  color: var(--hb-mid);
  margin-top: 4px;
}

.hb-simulateur-outputs-premium {
  background: var(--hb-navy);
  color: #fff;
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.hb-simulateur-outputs-premium-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(217,164,65,.18), transparent 60%);
  pointer-events: none;
}
.hb-simulateur-outputs-premium-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hb-simulateur-outputs-premium-meta {
  font-size: 11px;
  color: var(--hb-amber);
  letter-spacing: .08em;
}
.hb-simulateur-outputs-premium-h {
  position: relative;
  font-size: 28px;
  color: #fff;
}
.hb-simulateur-outputs-premium-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.hb-simulateur-outputs-premium-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}
.hb-simulateur-outputs-premium-item-bullet {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(217,164,65,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  margin-top: 2px;
}
.hb-simulateur-outputs-premium-foot {
  margin-top: auto;
  position: relative;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hb-simulateur-outputs-premium-paiement {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
}
.hb-simulateur-outputs-premium-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.hb-simulateur-outputs-premium-price .hb-mono {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.04em;
}
.hb-simulateur-outputs-premium-price-unit {
  font-size: 18px;
  color: var(--hb-amber);
  font-weight: 700;
}

/* ========== Aperçu PDF compact ========== */
.hb-simulateur-pdf {
  padding: 0 0 120px;
  background: #fff;
}
.hb-simulateur-pdf-card {
  background: var(--hb-cream);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.hb-simulateur-pdf-h { margin-top: 16px; font-size: clamp(28px, 3vw, 40px); }
.hb-simulateur-pdf-desc { margin-top: 16px; font-size: 14.5px; }
.hb-simulateur-pdf-text .hb-pill { margin-top: 22px; }
.hb-simulateur-pdf-pages {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.hb-simulateur-pdf-page {
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  aspect-ratio: 210/297;
  border: 1px solid var(--hb-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .25s, border-color .25s;
}
.hb-simulateur-pdf-page:hover {
  border-color: var(--hb-navy);
  transform: translateY(-3px);
}
.hb-simulateur-pdf-page-brand {
  font-family: ui-monospace, monospace;
  font-size: 7px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .06em;
}
.hb-simulateur-pdf-page-title-bar {
  width: 55%;
  height: 3px;
  background: var(--hb-navy);
  border-radius: 1px;
  opacity: 0.45;
}
.hb-simulateur-pdf-page-title-bar--big { width: 75%; opacity: 0.75; }
.hb-simulateur-pdf-page-content {
  flex: 1;
  margin-top: 4px;
  background: var(--hb-mist);
  border-radius: 3px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hb-simulateur-pdf-page-content > span {
  height: 1.5px;
  background: var(--hb-line);
  border-radius: 1px;
}
.hb-simulateur-pdf-page-content > span:nth-child(1) { width: 65%; }
.hb-simulateur-pdf-page-content > span:nth-child(2) { width: 53%; }
.hb-simulateur-pdf-page-content > span:nth-child(3) { width: 41%; }
.hb-simulateur-pdf-page-foot { margin-top: 4px; }
.hb-simulateur-pdf-page-n {
  font-size: 7px;
  color: var(--hb-amber);
  font-weight: 700;
}
.hb-simulateur-pdf-page-t {
  font-size: 8px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 1px;
  line-height: 1.15;
}

@media (max-width: 1000px) {
  .hb-simulateur-quiz7-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hb-simulateur-quiz7-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hb-simulateur-outputs-grid { grid-template-columns: 1fr; }
  .hb-simulateur-pdf-card { grid-template-columns: 1fr; padding: 28px; }
  .hb-simulateur-pdf-pages { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .hb-simulateur-quiz7-grid--4,
  .hb-simulateur-quiz7-grid--3 { grid-template-columns: 1fr; }
  .hb-simulateur-quiz7 { padding: 56px 0; }
  .hb-simulateur-outputs { padding: 56px 0; }
  .hb-simulateur-pdf { padding: 0 0 56px; }
  .hb-simulateur-pdf-pages { grid-template-columns: repeat(3, 1fr); }
}

/* 3 principes */
.hb-simulateur-principles {
  padding: 100px 0;
}
.hb-simulateur-principles-head { max-width: 720px; margin-bottom: 56px; }
.hb-simulateur-principles-h { margin-top: 16px; font-size: clamp(32px, 4vw, 48px); }
.hb-simulateur-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hb-simulateur-principle {
  padding-top: 22px;
  border-top: 2px solid var(--hb-navy);
}
.hb-simulateur-principle-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hb-simulateur-principle-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-amber);
  letter-spacing: .08em;
}
.hb-simulateur-principle-t { font-size: 24px; margin-top: 18px; }
.hb-simulateur-principle-d { margin-top: 12px; font-size: 15px; }

/* FAQ */
.hb-simulateur-faq {
  padding: 100px 0;
  background: #fff;
}
.hb-simulateur-faq-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: flex-start;
}
.hb-simulateur-faq-h { font-size: clamp(28px, 3.5vw, 44px); margin-top: 16px; }
.hb-simulateur-faq-head p { margin-top: 18px; font-size: 15px; }
.hb-simulateur-faq-head .hb-pill { margin-top: 14px; }
.hb-simulateur-faq-item {
  border-bottom: 1px solid var(--hb-line);
  padding: 0;
}
.hb-simulateur-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--hb-navy);
  letter-spacing: -.005em;
  gap: 16px;
}
.hb-simulateur-faq-item summary::-webkit-details-marker { display: none; }
.hb-simulateur-faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hb-line);
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--hb-navy);
  transition: transform .25s, background .25s;
  background: #fff;
}
.hb-simulateur-faq-item[open] .hb-simulateur-faq-toggle {
  background: var(--hb-navy);
  color: #fff;
  transform: rotate(45deg);
}
.hb-simulateur-faq-item p {
  font-size: 14.5px;
  color: var(--hb-sub);
  line-height: 1.6;
  margin: 0;
  padding-bottom: 22px;
  max-width: 600px;
}

/* CTA final */
.hb-simulateur-cta {
  padding: 0 0 100px;
  background: #fff;
}
.hb-simulateur-cta-card {
  background: var(--hb-navy);
  color: #fff;
  border-radius: 24px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.hb-simulateur-cta-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 90% 0%, rgba(217,164,65,.18), transparent 60%);
  pointer-events: none;
}
.hb-simulateur-cta-text {
  position: relative;
  margin-top: -8px;
}
.hb-simulateur-cta-h {
  margin-top: 0;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
}
.hb-simulateur-cta-h-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: #FFFFFF !important;
  text-decoration: none;
}
.hb-simulateur-cta-h-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--hb-amber);
  border-radius: 2px;
}
.hb-simulateur-cta-lead {
  margin-top: 22px;
  color: rgba(255,255,255,.88) !important;
  font-size: 17px;
  max-width: 480px;
}
.hb-simulateur-cta-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 1000px) {
  .hb-simulateur-tools-grid { grid-template-columns: 1fr; }
  .hb-simulateur-tool--featured { grid-row: span 1; grid-template-columns: 1fr; }
  .hb-simulateur-faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .hb-simulateur-cta-card { grid-template-columns: 1fr; padding: 36px 24px; }
}
@media (max-width: 900px) {
  .hb-simulateur-hero { padding: 112px 0 56px; }
  .hb-simulateur-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hb-simulateur-principles-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .hb-simulateur-hero { padding: 96px 0 40px; }
  .hb-simulateur-tools { padding: 56px 0; }
  .hb-simulateur-principles { padding: 56px 0; }
  .hb-simulateur-faq { padding: 56px 0; }
  .hb-simulateur-hero-card-amount { font-size: 36px; }
}


/* ============================================================
   PAGE RÉSULTAT — [homebe_resultat]
   Port 1:1 fidèle à ~/Desktop/HomeBe V1/simulateur-result.jsx
   (desktop) + mobile-result.jsx (<=768px).
   6 composants :
     1. ResultHero    .hb-res-hero
     2. FreeResults   .hb-res-free
     3. PremiumTeaser .hb-res-teaser
     4. PremiumCTA    .hb-res-cta
     5. PDFPreview    .hb-res-pdf
     6. PremiumFAQ    .hb-res-faq
   NB : tous les <button> dans .hb-res-wrap utilisent border / bg
   avec !important pour neutraliser le reset parent Hello Elementor
   qui injecte border:1px solid #c36 sur tous les <button>.
   ============================================================ */

.hb-res-wrap { padding-top: 0; background: #fff; }

/* Container max-width 1200px sur toute la page Résultat (spec PNG) */
.hb-res-wrap .hb-container { max-width: 1200px; }

/* Eyebrow light variant (sur fond sombre) */
.hb-eyebrow--light { color: rgba(255,255,255,.6) !important; }

/* Reveal animation (IntersectionObserver via resultat.js) */
.hb-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.hb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Empty state (placeholder si quiz non rempli) */
.hb-res-empty-wrap {
  padding: 96px 0 32px;
  background: var(--hb-cream);
}
.hb-res-no-quiz {
  text-align: center;
  padding: 64px 24px;
  background: var(--hb-mist);
  border-radius: 16px;
  border: 1px dashed var(--hb-line);
  max-width: 560px;
  margin: 0 auto;
}
.hb-res-no-quiz h2 { margin-top: 16px; }
.hb-res-no-quiz p { margin-top: 12px; color: var(--hb-sub); }
.hb-res-no-quiz .hb-pill { margin-top: 22px; }

/* ===================================================================
   1. ResultHero — eyebrow doc + verdict huge + card hypothèses
   =================================================================== */
.hb-res-hero {
  background: var(--hb-cream);
  padding: 48px 0 80px;
  position: relative;
  overflow: hidden;
}
.hb-res-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 20% 30%, rgba(217,164,65,.10), transparent 70%);
  pointer-events: none;
}
.hb-res-hero > .hb-container { position: relative; }

/* Doc header (HOMEBE · SIM · ref · Généré le date + 2 boutons) */
.hb-res-hero-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hb-line);
  flex-wrap: wrap;
}
.hb-res-hero-doc-ref {
  font-size: 12px;
  color: var(--hb-sub);
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
}
.hb-res-hero-doc-dot {
  width: 3px;
  height: 3px;
  background: var(--hb-line);
  border-radius: 999px;
  flex: 0 0 3px;
}
.hb-res-hero-doc-date {
  font-size: 12px;
  color: var(--hb-mid);
  letter-spacing: .04em;
}
.hb-res-hero-doc-spacer { flex: 1; }

/* Grid 60/40 verdict + hypothèses (calé sur JSX : 1.5fr 1fr gap 56) */
.hb-res-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: flex-end;
}
.hb-res-hero-main { min-width: 0; }
.hb-res-hero-h {
  /* Spec PNG : H1 72px desktop, wrap naturel à 3 lignes
     dans la grid column 60% (~660px @ container 1200px). */
  font-size: clamp(40px, 5.5vw, 72px);
  margin-top: 18px !important;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.hb-res-hero-yr {
  color: var(--hb-amber);
  white-space: nowrap;
}
.hb-res-hero-sub {
  margin-top: 22px !important;
  max-width: 600px;
  font-size: 17px;
}

/* Card hypothèses (droite, desktop) */
.hb-res-hero-hypo {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 14px;
  padding: 22px;
}
.hb-res-hero-hypo-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  margin-bottom: 14px;
}
.hb-res-hero-hypo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.hb-res-hero-hypo-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hb-line);
}
.hb-res-hero-hypo-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hb-res-hero-hypo-list dt {
  font-family: ui-monospace, monospace;
  color: var(--hb-mid);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin: 0;
}
.hb-res-hero-hypo-list dd {
  color: var(--hb-navy);
  font-weight: 600;
  text-align: right;
  margin: 0;
}

/* Mobile-only hypothèses (collapsible <details>) + actions */
.hb-res-hero-hypo-mobile { display: none; }
.hb-res-hero-actions-mobile { display: none; }

/* ===================================================================
   2. FreeResults — header + grid 3 cards (1.4fr / 1fr / 1fr)
   =================================================================== */
.hb-res-free {
  background: #fff;
  padding: 72px 0;
}
.hb-res-free-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hb-res-free-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hb-res-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(30,158,107,.12);
  color: var(--hb-ok);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-res-free-h {
  margin: 0;
  font-size: 32px;
  letter-spacing: -.025em;
}
.hb-res-free-caption {
  color: var(--hb-mid);
  font-size: 13px;
}

.hb-res-free-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Card commune */
.hb-res-card {
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-res-card--light {
  background: #fff;
  border: 1px solid var(--hb-line);
}
.hb-res-card--bascule {
  background: var(--hb-navy);
  color: #fff;
  border: 1px solid var(--hb-navy);
}
.hb-res-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.hb-res-card-head .hb-eyebrow { font-size: 11px; }
.hb-res-card-big {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hb-res-card-big-num {
  font-size: 44px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hb-res-card-big-num--amber { color: var(--hb-amber); }
.hb-res-card-big-unit {
  font-size: 18px;
  color: var(--hb-sub);
  font-weight: 600;
}
.hb-res-card-big-label {
  font-size: 14px;
  color: var(--hb-sub);
}
.hb-res-card-big-label--light { color: rgba(255,255,255,.65); }
.hb-res-card-desc {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.55;
  color: var(--hb-sub);
}
.hb-res-card-desc--light { color: rgba(255,255,255,.75) !important; }
.hb-res-card-sub {
  color: var(--hb-mid);
  margin-top: -6px;
  font-size: 13px;
}

/* Card 1 — Bascule SVG chart + légende */
.hb-res-card-chart {
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.hb-res-card-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  flex-wrap: wrap;
}
.hb-res-card-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
}
.hb-res-card-legend-item--dim { color: rgba(255,255,255,.65); }
.hb-res-card-legend-sw {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}
.hb-res-card-legend-sw--buy { background: var(--hb-amber); }
.hb-res-card-legend-sw--rent {
  background: rgba(255,255,255,0.5);
  border-top: 2px dashed rgba(255,255,255,0.5);
}

/* Card 2 — KV rows */
.hb-res-card-kvs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.hb-res-card-kv {
  background: var(--hb-mist);
  border-radius: 10px;
  padding: 12px;
}
.hb-res-card-kv-k {
  font-size: 11px;
  color: var(--hb-sub);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.hb-res-card-kv-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 2px;
  letter-spacing: -.02em;
}
.hb-res-card-kv-sub {
  font-size: 11px;
  color: var(--hb-mid);
  margin-top: 1px;
}

/* Card 3 — Rows simples label + valeur (spec PNG : pas de barres) */
.hb-res-card-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}
.hb-res-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hb-line);
  font-size: 13px;
}
.hb-res-card-row:last-child { border-bottom: 0; }
.hb-res-card-row-k {
  color: var(--hb-sub);
}
.hb-res-card-row-v {
  color: var(--hb-navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===================================================================
   3. PremiumTeaser — header + 6 LockedCards en grid 3 cols
   =================================================================== */
.hb-res-teaser {
  background: var(--hb-cream);
  padding: 72px 0 32px;
}
.hb-res-teaser-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hb-res-teaser-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hb-res-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--hb-amber);
  color: var(--hb-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-res-teaser-h {
  margin: 0;
  font-size: 32px;
  letter-spacing: -.025em;
}
.hb-res-teaser-caption {
  color: var(--hb-mid);
  font-size: 13px;
}

.hb-res-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* LockedCard */
.hb-res-locked {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--hb-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 280px;
  transition: transform .25s, border-color .25s;
}
.hb-res-locked:hover {
  border-color: var(--hb-amber);
}
.hb-res-locked-head {
  padding: 20px 22px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hb-res-locked-text { padding-right: 14px; flex: 1; }
.hb-res-locked-title {
  font-size: 17px;
  letter-spacing: -.005em;
  margin: 0;
}
.hb-res-locked-desc {
  color: var(--hb-sub);
  font-size: 12.5px;
  margin-top: 6px;
  line-height: 1.45;
}
.hb-res-locked-lock-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hb-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  border: 1px solid var(--hb-line);
}

/* Blurred preview area */
.hb-res-locked-preview {
  position: relative;
  flex: 1;
  min-height: 140px;
  background: var(--hb-mist);
  margin: 0 14px 14px;
  border-radius: 10px;
  overflow: hidden;
}
.hb-res-locked-preview-inner {
  position: absolute;
  inset: 0;
  padding: 14px;
  filter: blur(5px);
  opacity: 0.85;
}
.hb-res-locked-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244,243,238,0) 0%, rgba(244,243,238,0.6) 70%, var(--hb-mist) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb-res-locked-preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hb-line);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: .04em;
}

/* Mini preview contents */
.hb-res-prev-amort {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}
.hb-res-prev-amort-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  gap: 8px;
  align-items: center;
  font-size: 9px;
}
.hb-res-prev-amort-yr { color: var(--hb-sub); }
.hb-res-prev-amort-bar {
  height: 8px;
  background: var(--hb-line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hb-res-prev-amort-bar > div {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--hb-amber);
  border-radius: 2px;
}
.hb-res-prev-amort-val { text-align: right; color: var(--hb-navy); }

.hb-res-prev-levers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}
.hb-res-prev-lever {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 8px;
  font-size: 11px;
}
.hb-res-prev-lever-label { color: var(--hb-navy); font-weight: 600; }
.hb-res-prev-lever-val { color: var(--hb-amber); font-weight: 700; }

.hb-res-prev-aides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hb-res-prev-aide {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 6px;
  padding: 8px;
}
.hb-res-prev-aide-k {
  font-size: 8.5px;
  color: var(--hb-sub);
  letter-spacing: .05em;
}
.hb-res-prev-aide-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 2px;
}

.hb-res-prev-plan {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hb-res-prev-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.hb-res-prev-plan-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--hb-navy);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
}
.hb-res-prev-plan-row.is-done .hb-res-prev-plan-check {
  background: var(--hb-navy);
}
.hb-res-prev-plan-row.is-done .hb-res-prev-plan-step {
  color: var(--hb-mid);
  text-decoration: line-through;
}
.hb-res-prev-plan-step {
  color: var(--hb-navy);
  font-weight: 500;
}

/* ===================================================================
   4. PremiumCTA — paywall navy + pricing card 24,99 € + pay badges
   =================================================================== */
.hb-res-cta {
  background: var(--hb-cream);
  padding: 32px 0 100px;
}
.hb-res-cta-panel {
  background: var(--hb-navy);
  color: #fff;
  border-radius: 24px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.hb-res-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 85% 50%, rgba(217,164,65,.22), transparent 60%);
  pointer-events: none;
}
.hb-res-cta-left { position: relative; }
.hb-res-cta-eyebrow {
  color: var(--hb-amber) !important;
}
.hb-res-cta-h {
  font-size: clamp(36px, 4.5vw, 52px);
  color: #fff !important;
  margin-top: 16px !important;
}
.hb-res-cta-lead {
  margin-top: 18px !important;
  color: rgba(255,255,255,.75) !important;
  max-width: 480px;
}
.hb-res-cta-benefits {
  display: flex;
  gap: 22px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hb-res-cta-benefit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
}

/* Pricing card (white avec border ambre) */
.hb-res-cta-right { position: relative; }
.hb-res-cta-pricing {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  color: var(--hb-navy);
  border: 1px solid var(--hb-amber);
}
.hb-res-cta-pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hb-res-cta-pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}
.hb-res-cta-pricing-num {
  font-size: 56px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.04em;
  line-height: 1;
}
.hb-res-cta-pricing-cur {
  font-size: 22px;
  color: var(--hb-sub);
  font-weight: 700;
}
.hb-res-cta-pricing-sub {
  color: var(--hb-mid);
  font-size: 12px;
}
.hb-res-cta-buy {
  margin-top: 20px !important;
  width: 100%;
  padding: 16px 20px !important;
  background: var(--hb-amber) !important;
  color: var(--hb-navy) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  transition: background .2s, color .2s, transform .15s;
  font-family: inherit !important;
}
.hb-res-cta-buy:hover {
  background: var(--hb-amber2, #B8852B) !important;
  color: #fff !important;
}
.hb-res-cta-buy[disabled] {
  cursor: not-allowed !important;
  opacity: .6;
  position: relative;
}
.hb-res-cta-buy[disabled]:hover {
  background: var(--hb-amber) !important;
  color: var(--hb-navy) !important;
}

/* Bouton "Voir un rapport" verrouillé : Premium pas dispo en MVP.
   Au clic → animation shake + label flash "Disponible bientôt" pendant 1.4s,
   puis retour au label initial. Cursor not-allowed permanent. */
.hb-res-cta-buy[data-cta-locked] {
  cursor: not-allowed !important;
}
.hb-res-cta-buy[data-cta-locked]:hover {
  background: var(--hb-amber) !important;
  color: var(--hb-navy) !important;
  transform: none !important;
}
.hb-res-cta-buy.is-shaking {
  animation: hb-cta-shake .42s cubic-bezier(.36,.07,.19,.97) both;
}
.hb-res-cta-buy.is-flash-soon {
  background: rgba(27,42,78,0.92) !important;
  color: #fff !important;
}
.hb-res-cta-buy.is-flash-soon .hb-cta-arrow svg {
  stroke: #fff !important;
}
@keyframes hb-cta-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.hb-res-cta-buy-soon {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(27,42,78,0.10);
  color: var(--hb-navy);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-res-cta-benefit-mark { flex: 0 0 14px; }
.hb-res-cta-pricing-foot {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--hb-mid);
  text-align: center;
  line-height: 1.5;
}
.hb-res-cta-pricing-pays {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hb-line);
  justify-content: center;
  flex-wrap: wrap;
}

/* Pay badges */
.hb-res-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.06);
}
.hb-res-pay--visa {
  background: #1A1F71;
  color: #fff;
  font-style: italic;
  letter-spacing: .06em;
  font-size: 12px;
}
.hb-res-pay--mc {
  background: #fff;
  gap: 5px;
  padding-left: 6px;
  padding-right: 9px;
  border: 1px solid var(--hb-line);
}
.hb-res-pay-mc-circles {
  position: relative;
  width: 22px;
  height: 14px;
  display: inline-block;
}
.hb-res-pay-mc-circles > span:first-child {
  position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #EB001B;
}
.hb-res-pay-mc-circles > span:last-child {
  position: absolute; left: 8px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #F79E1B; mix-blend-mode: multiply;
}
.hb-res-pay-mc-label {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .04em;
}
.hb-res-pay--apple {
  background: #000;
  color: #fff;
  gap: 4px;
  padding-left: 7px;
}
.hb-res-pay-apple-label { font-weight: 600; }
.hb-res-pay--paypal {
  background: #fff;
  color: #003087;
  padding-left: 8px;
  padding-right: 9px;
  border: 1px solid var(--hb-line);
  font-style: italic;
  font-weight: 800;
}
.hb-res-pay--paypal .hb-res-pay-paypal-em { color: #009CDE; }
.hb-res-pay--stripe {
  background: #635BFF;
  color: #fff;
  letter-spacing: .05em;
  text-transform: lowercase;
  padding-left: 9px;
  padding-right: 9px;
}

/* ===================================================================
   5. PDFPreview — intro + 7 PDF thumbnails grid + annexes
   =================================================================== */
.hb-res-pdf {
  background: #fff;
  padding: 100px 0;
}
.hb-res-pdf-intro {
  max-width: 720px;
  margin-bottom: 48px;
}
.hb-res-pdf-h {
  font-size: clamp(28px, 3.5vw, 44px);
  margin-top: 16px !important;
}
.hb-res-pdf-lead {
  margin-top: 18px !important;
  font-size: 16px;
}

.hb-res-pdf-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.hb-res-pdf-thumb {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 8px;
  aspect-ratio: 210 / 297;
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: transform .25s, border-color .25s;
  position: relative;
}
.hb-res-pdf-thumb:hover {
  border-color: var(--hb-navy);
  transform: translateY(-3px);
}
.hb-res-pdf-thumb-page {
  background: var(--hb-mist);
  flex: 1;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.hb-res-pdf-thumb-logo {
  font-size: 7px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .06em;
}
.hb-res-pdf-thumb-bar {
  height: 4px;
  background: var(--hb-navy);
  border-radius: 1px;
}
.hb-res-pdf-thumb-bar--1 { width: 70%; opacity: 0.7; }
.hb-res-pdf-thumb-bar--2 { width: 55%; opacity: 0.4; }
.hb-res-pdf-thumb-body {
  margin-top: 4px;
  flex: 1;
  background: #fff;
  border-radius: 2px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hb-res-pdf-thumb-line {
  height: 2px;
  background: var(--hb-line);
  border-radius: 1px;
}
.hb-res-pdf-thumb-meta { margin-top: 8px; }
.hb-res-pdf-thumb-n {
  font-size: 9px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .06em;
}
.hb-res-pdf-thumb-t {
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 2px;
  letter-spacing: -.005em;
}
.hb-res-pdf-thumb-d {
  font-size: 10.5px;
  color: var(--hb-mid);
  margin-top: 2px;
  line-height: 1.35;
}

.hb-res-pdf-scroll-hint {
  display: none;
  text-align: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--hb-mid);
  font-family: ui-monospace, monospace;
  letter-spacing: .06em;
}

.hb-res-pdf-annexes {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hb-res-pdf-annexes-label { color: var(--hb-mid); }
.hb-res-pdf-annex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hb-line);
  font-size: 12px;
  color: var(--hb-sub);
}

/* ===================================================================
   6. PremiumFAQ — grid 380px/1fr + items details/summary
   =================================================================== */
.hb-res-faq {
  background: #fff;
  padding: 0 0 100px;
}
.hb-res-faq-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: flex-start;
}
.hb-res-faq-intro { padding-top: 0; }
.hb-res-faq-h {
  font-size: clamp(28px, 3vw, 36px);
  margin-top: 16px !important;
}
.hb-res-faq-items {
  display: flex;
  flex-direction: column;
}
.hb-res-faq-item {
  border-bottom: 1px solid var(--hb-line);
  padding: 18px 0;
}
.hb-res-faq-item:first-child { padding-top: 0; }
.hb-res-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hb-res-faq-item summary::-webkit-details-marker { display: none; }
.hb-res-faq-q {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}
.hb-res-faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hb-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  background: #fff;
  transition: transform .2s, background .2s, border-color .2s;
}
.hb-res-faq-item[open] .hb-res-faq-icon {
  transform: rotate(45deg);
  background: var(--hb-navy);
  border-color: var(--hb-navy);
}
.hb-res-faq-item[open] .hb-res-faq-icon svg path,
.hb-res-faq-item[open] .hb-res-faq-icon svg line { stroke: #fff; }
.hb-res-faq-a {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--hb-sub);
  line-height: 1.6;
  max-width: 720px;
}

/* ===================================================================
   RESPONSIVE — Tablet medium
   =================================================================== */
@media (max-width: 1024px) {
  .hb-res-cta-panel { padding: 48px 36px; }
  .hb-res-cta-h { font-size: clamp(32px, 4vw, 44px); }
  .hb-res-pdf { padding: 80px 0; }
}

/* ===================================================================
   RESPONSIVE — Mobile 768px et en dessous (mobile-result.jsx)
   =================================================================== */
@media (max-width: 768px) {

  /* Hero mobile */
  .hb-res-hero { padding: 24px 0 32px; }
  .hb-res-hero-doc {
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
  }
  .hb-res-hero-doc-ref { font-size: 10.5px; }
  .hb-res-hero-doc-date { font-size: 10.5px; }
  .hb-res-hero-doc .hb-pill { display: none; }
  .hb-res-hero-doc-spacer { display: none; }
  .hb-res-hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
  }
  .hb-res-hero-h {
    font-size: 40px;
    margin-top: 12px !important;
    letter-spacing: -.04em;
    line-height: 1.02;
  }
  .hb-res-hero-sub {
    font-size: 13.5px;
    margin-top: 14px !important;
  }
  /* Desktop hypothèses card hidden; mobile <details> shown */
  .hb-res-hero-hypo { display: none; }
  .hb-res-hero-hypo-mobile {
    display: block;
    margin-top: 18px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--hb-line);
  }
  .hb-res-hero-hypo-mobile summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--hb-navy);
  }
  .hb-res-hero-hypo-mobile summary::-webkit-details-marker { display: none; }
  .hb-res-hero-hypo-mobile-list {
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hb-res-hero-hypo-mobile-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--hb-line);
  }
  .hb-res-hero-hypo-mobile-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .hb-res-hero-hypo-mobile-list span {
    font-family: ui-monospace, monospace;
    color: var(--hb-mid);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .hb-res-hero-hypo-mobile-list strong {
    color: var(--hb-navy);
    font-weight: 600;
  }
  .hb-res-hero-actions-mobile {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }

  /* FreeResults mobile : 1 col stack */
  .hb-res-free { padding: 52px 0 36px; }
  .hb-res-free-head { margin-bottom: 18px; }
  .hb-res-free-h { font-size: 22px; }
  .hb-res-free-caption { display: none; }
  .hb-res-free-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hb-res-card { padding: 18px; }
  .hb-res-card-big-num { font-size: 32px; }
  .hb-res-card-big-unit { font-size: 16px; }
  .hb-res-card-desc { font-size: 12.5px; }
  .hb-res-card-legend { display: none; }
  .hb-res-card-kvs, .hb-res-card-rows { margin-top: 6px; }

  /* PremiumTeaser mobile : 2 cols, simpler cards */
  .hb-res-teaser { padding: 36px 0; }
  .hb-res-teaser-h { font-size: 22px; }
  .hb-res-teaser-caption { display: none; }
  .hb-res-teaser-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hb-res-locked {
    min-height: 110px;
    border-radius: 12px;
  }
  .hb-res-locked-head { padding: 12px; }
  .hb-res-locked-title { font-size: 11.5px; line-height: 1.2; }
  .hb-res-locked-desc { font-size: 10.5px; margin-top: 6px; line-height: 1.35; }
  .hb-res-locked-lock-circle {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .hb-res-locked-lock-circle svg { width: 9px; height: 9px; }
  /* Mobile : pas de blurred preview (cards trop petites) */
  .hb-res-locked-preview { display: none; }

  /* PremiumCTA mobile : stacked vertical */
  .hb-res-cta { padding: 24px 0 36px; }
  .hb-res-cta-panel {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 18px;
    gap: 18px;
  }
  .hb-res-cta-h {
    font-size: 26px;
    margin-top: 10px !important;
  }
  .hb-res-cta-lead { font-size: 13px; margin-top: 10px !important; }
  .hb-res-cta-benefits {
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }
  .hb-res-cta-benefit { font-size: 12.5px; }
  .hb-res-cta-pricing { padding: 18px; border-radius: 14px; }
  .hb-res-cta-pricing-num { font-size: 36px; }
  .hb-res-cta-pricing-cur { font-size: 16px; }
  .hb-res-cta-buy {
    margin-top: 14px !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
  }
  .hb-res-cta-pricing-foot { font-size: 10.5px; margin-top: 10px; }

  /* PDFPreview mobile : scroll horizontal */
  .hb-res-pdf { padding: 36px 0; }
  .hb-res-pdf-intro { margin-bottom: 18px; }
  .hb-res-pdf-h { font-size: 24px; margin-top: 12px !important; }
  .hb-res-pdf-lead { font-size: 13.5px; }
  .hb-res-pdf-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .hb-res-pdf-thumb {
    padding: 7px;
    border-radius: 5px;
  }
  .hb-res-pdf-thumb-logo { font-size: 6px; }
  .hb-res-pdf-thumb-bar { height: 2.5px; }
  .hb-res-pdf-thumb-line { height: 1.5px; }
  .hb-res-pdf-thumb-meta { margin-top: 5px; }
  .hb-res-pdf-thumb-n { font-size: 6px; }
  .hb-res-pdf-thumb-t { font-size: 7.5px; line-height: 1.1; }
  .hb-res-pdf-thumb-d { display: none; }
  .hb-res-pdf-scroll-hint { display: block; }
  .hb-res-pdf-annexes { display: none; }

  /* FAQ mobile : vertical */
  .hb-res-faq { padding: 0 0 36px; }
  .hb-res-faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hb-res-faq-h { font-size: 24px; margin-top: 12px !important; }
  .hb-res-faq-q { font-size: 14px; }
}

/* ============================================================
   HUB OUTILS — [homebe_outils_hub]
   Rétabli en étape 6bis (le code avait été supprimé en étape 5bis
   puis recommité ici). Calé sur outils-hub.jsx du design.
   ============================================================ */
.hb-hub { padding-top: 0; }

.hb-hub-hero {
  padding: 128px 0 56px;
  overflow: hidden;
  position: relative;
}

/* Grid 2 colonnes (texte gauche + vidéo droite), miroir de
   .hb-simulateur-hero-grid sur /simulateur/ */
.hb-hub-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hb-hub-hero-text { min-width: 0; }

.hb-hub-title {
  margin-top: 16px;
  max-width: 600px;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -.035em;
}

.hb-hub-lead {
  margin-top: 22px;
  max-width: 480px;
}

/* Vidéo hero — réplique de .hb-simulateur-hero-video* avec data adaptée */
.hb-hub-hero-visual { position: relative; }
.hb-hub-hero-video-shell { position: relative; }
.hb-hub-hero-video-shadow {
  position: absolute;
  inset: 4px -4px -4px 4px;
  border-radius: 22px;
  background: var(--hb-navy);
  opacity: 0.06;
  pointer-events: none;
}
.hb-hub-hero-video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hb-line);
  background: var(--hb-navy);
  aspect-ratio: 4 / 3;
  max-height: 520px;
}
.hb-hub-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-hub-hero-video-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(27,42,78,0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  font-weight: 600;
}
.hb-hub-hero-video-badge .hb-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--hb-amber);
}
.hb-hub-hero-video-float {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--hb-line);
  color: var(--hb-navy);
}
.hb-hub-hero-video-float .hb-eyebrow { font-size: 10px; }
.hb-hub-hero-video-float-val {
  font-size: 36px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 4px;
  letter-spacing: -.04em;
  line-height: 1;
}
.hb-hub-hero-video-float .hb-caption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--hb-mid);
}

.hb-hub-filters {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hb-hub-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--hb-navy);
  border: 1px solid var(--hb-line);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hb-hub-filter:hover { border-color: var(--hb-navy); }
.hb-hub-filter.is-active {
  background: var(--hb-navy);
  color: #fff;
  border-color: var(--hb-navy);
}
.hb-hub-filter-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--hb-mid);
}
.hb-hub-filter.is-active .hb-hub-filter-count {
  color: rgba(255,255,255,.6);
}

.hb-hub-grid-section {
  padding: 56px 0 100px;
  background: #fff;
}

.hb-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-rows: minmax(280px, auto);
}

.hb-hub-card {
  padding: 24px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  color: var(--hb-navy);
}

.hb-hub-card.is-filtered-out {
  display: none;
}

.hb-hub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hb-hub-card-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--hb-cream);
  display: flex; align-items: center; justify-content: center;
}

.hb-hub-card-icon--feat {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(217,164,65,0.18);
}

.hb-hub-card-eyebrow { font-size: 11px; }
.hb-hub-card-eyebrow--light { color: rgba(255,255,255,.55); }

.hb-hub-card-title {
  font-size: 22px;
  margin-top: 4px;
  letter-spacing: -.025em;
}
.hb-hub-card-title--feat {
  font-size: 32px;
  color: #fff;
}

.hb-hub-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}
.hb-hub-card-desc--feat {
  font-size: 15px;
  color: rgba(255,255,255,.78);
}

.hb-hub-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.hb-hub-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hb-navy);
}
.hb-hub-card-cta--feat { color: var(--hb-amber); }

/* Featured card — 2 colonnes côte à côte */
.hb-hub-card--featured {
  grid-column: span 2;
  padding: 36px;
  background: var(--hb-navy);
  color: #fff;
  min-height: 320px;
  display: grid;
  grid-template-columns: 1fr 36%;
  gap: 32px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.hb-hub-card-feat-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(217,164,65,.16), transparent 60%);
  pointer-events: none;
}
.hb-hub-card-feat-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hb-hub-card-feat-side {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.hb-hub-feat-side-eyebrow { font-size: 10px; }
.hb-hub-feat-side-big {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.04em;
}
.hb-hub-feat-side-sub {
  font-size: 11px;
  color: var(--hb-amber);
}
.hb-hub-feat-side-bar {
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.hb-hub-feat-side-bar-fill {
  height: 100%;
  width: 62%;
  background: var(--hb-amber);
  border-radius: 999px;
}
.hb-hub-feat-side-foot {
  margin-top: auto;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

/* Status pills dans les cartes */
.hb-hub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-hub-status--live { color: var(--hb-ok); }
.hb-hub-status--soon-1m { color: var(--hb-amber); }
.hb-hub-status--soon { color: var(--hb-mid); }
.hb-hub-status--soon-dark { color: rgba(255,255,255,.45); }
.hb-hub-status .hb-live { width: 6px; height: 6px; border-radius: 999px; }
.hb-hub-status--live .hb-live { background: var(--hb-ok); }
.hb-hub-status--soon-1m .hb-live { background: var(--hb-amber); }
.hb-hub-status-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-mid);
  display: inline-block;
}
.hb-hub-status--soon-dark .hb-hub-status-dot {
  background: rgba(255,255,255,.4);
}

/* Persona section */
.hb-hub-persona-section {
  padding: 88px 0;
}
.hb-hub-persona-title {
  margin-top: 14px;
  font-size: clamp(28px, 3.5vw, 44px);
}
.hb-hub-persona-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hb-hub-persona-card {
  padding: 32px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-hub-persona-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hb-hub-persona-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--hb-cream);
  display: flex; align-items: center; justify-content: center;
}
.hb-hub-persona-h {
  font-size: clamp(20px, 2vw, 24px);
}

/* CTA section */
.hb-hub-cta-section {
  padding: 0 0 100px;
  background: #fff;
}
.hb-hub-cta-card {
  background: var(--hb-navy);
  color: #fff;
  border-radius: 24px;
  padding: 56px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.hb-hub-cta-glow {
  position: absolute; inset: 0;
  background: radial-gradient(50% 50% at 80% 50%, rgba(217,164,65,.15), transparent 60%);
  pointer-events: none;
}
.hb-hub-cta-text {
  position: relative;
  flex: 1;
  min-width: 320px;
}
.hb-hub-cta-eyebrow { color: rgba(255,255,255,.55); }
.hb-hub-cta-card .hb-h2,
.hb-hub-cta-card h2,
.hb-hub-cta-h {
  font-size: clamp(24px, 3vw, 36px);
  color: #FFFFFF !important;
  margin-top: 12px;
}
.hb-hub-cta-desc {
  margin-top: 10px;
  color: rgba(255,255,255,.7);
  max-width: 480px;
}

/* Responsive Hub */
@media (max-width: 900px) {
  .hb-hub-grid {
    grid-template-columns: 1fr;
  }
  .hb-hub-card--featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .hb-hub-persona-grid {
    grid-template-columns: 1fr;
  }
  .hb-hub-cta-card {
    padding: 36px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hb-hub-hero { padding: 112px 0 40px; }
  .hb-hub-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hb-hub-hero-video-frame { aspect-ratio: 16 / 10; max-height: 380px; }
  .hb-hub-hero-video-float { width: 170px; padding: 12px; }
  .hb-hub-hero-video-float-val { font-size: 28px; }
  .hb-hub-grid-section { padding: 40px 0 72px; }
  .hb-hub-persona-section { padding: 64px 0; }
  .hb-hub-title { font-size: clamp(28px, 7vw, 44px); }
}

.hb-accueil-lead,
.hb-accueil .hb-accueil-hero-bottom .hb-accueil-lead,
p.hb-accueil-lead {
  max-width: 620px;
  margin: 24px auto 0;
  text-align: center !important;
  font-size: clamp(14px, 2.2vw, 19px);
}

.hb-accueil-ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hb-accueil-checks {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--hb-mid);
  font-size: 13px;
  flex-wrap: wrap;
  justify-content: center;
}

.hb-accueil-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hb-accueil-check-sep {
  width: 3px;
  height: 3px;
  background: var(--hb-line);
  border-radius: 999px;
  display: inline-block;
}

/* --- Responsive constellation --- */
@media (max-width: 900px) {
  .hb-accueil-hero { padding: 112px 0 40px; }
  .hb-accueil-constellation {
    height: 340px;
    transform: scale(0.6);
    transform-origin: center;
  }
}
@media (max-width: 600px) {
  .hb-accueil-hero { padding: 96px 0 32px; }
  .hb-accueil-constellation {
    height: 280px;
    transform: scale(0.5);
  }
  .hb-accueil-hero-bottom { margin-top: 0; }
  /* Eyebrow blink ligne unique forcée + petite */
  .hb-accueil-hero-top .hb-eyebrow-dot {
    font-size: 9.5px;
    letter-spacing: .08em;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  /* CTAs : empilés verticalement et largeur 100% pour pas overflow */
  .hb-accueil-ctas {
    flex-direction: column;
    align-items: center;
  }
  .hb-accueil-ctas .hb-pill {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  /* Checks : reste flex mais sans points séparateurs */
  .hb-accueil-checks { font-size: 11px; gap: 12px; }
  .hb-accueil-check-sep { display: none; }
}

/* ============================================================
   6d. TRUST STRIP — ribbon 6 sources de données
   ============================================================ */
.hb-trust-strip {
  border-top: 1px solid var(--hb-line);
  border-bottom: 1px solid var(--hb-line);
  background: #fff;
  padding: 20px 0;
}

.hb-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.hb-trust-label {
  color: var(--hb-mid);
  font-weight: 500;
}

.hb-trust-sources {
  display: flex;
  align-items: center;
  gap: 36px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.hb-trust-source {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--hb-mid);
  opacity: .85;
}

@media (max-width: 900px) {
  .hb-trust-row {
    justify-content: center;
    text-align: center;
  }
  .hb-trust-sources {
    justify-content: center;
    gap: 20px;
  }
}

/* ============================================================
   6e. PLATFORM DIAGRAM — "Une plateforme, plusieurs couches"
   2 colonnes : texte gauche + diagramme circulaire SVG à droite.
   Mobile : stack vertical (audit mobile à venir fin étape 6).
   ============================================================ */
.hb-platform {
  padding: 120px 0 100px;
  background: #fff;
}

.hb-platform-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: center;
}

.hb-platform-h {
  font-size: clamp(36px, 4vw, 52px);
  margin-top: 18px;
}
.hb-platform-h-em {
  color: var(--hb-sub);
  font-weight: 400;
  font-style: italic;
}

.hb-platform-lead {
  margin-top: 22px;
  font-size: 17px;
}

.hb-platform-bullets {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hb-platform-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hb-platform-bullet-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.hb-platform-bullet-text {
  color: var(--hb-text);
  font-size: 14.5px;
}

.hb-platform-cta {
  margin-top: 32px;
}

/* --- Diagramme circulaire --- */
.hb-platform-diagram-wrap {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.hb-platform-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 560;
}

.hb-platform-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hb-platform-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 12px;
  padding: 10px 14px 10px 10px;
  min-width: 168px;
  z-index: 2;
}

.hb-platform-node-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}

.hb-platform-node-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hb-platform-node-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}

.hb-platform-node-sub {
  font-size: 11px;
  color: var(--hb-mid);
}

/* Responsive — stack et carte simplifiée (à raffiner dans l'audit mobile fin étape 6) */
@media (max-width: 900px) {
  .hb-platform { padding: 56px 0; }
  .hb-platform-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hb-platform-h { font-size: 28px; }
}

/* ============================================================
   6f. CLARITY CARDS — 3 dashboard mocks
   ============================================================ */
.hb-clarity {
  padding: 100px 0 80px;
}

.hb-clarity-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.hb-clarity-head-left { max-width: 620px; }
.hb-clarity-head-right { max-width: 360px; }
.hb-clarity-head-right p { font-size: 15px; }

.hb-clarity-h {
  margin-top: 16px;
  font-size: clamp(32px, 3.6vw, 48px);
}

.hb-clarity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hb-clarity-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 380px;
}

.hb-clarity-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hb-clarity-card-head-block {
  padding: 24px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hb-clarity-card-title {
  font-size: 24px;
  margin-top: 4px;
}

.hb-clarity-card-sub {
  color: var(--hb-sub);
  margin-top: -8px;
}

/* --- Mock Card 1 : Capacité d'emprunt --- */
.hb-clarity-mock-simu {
  background: var(--hb-mist);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.hb-clarity-mock-simu-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hb-clarity-mock-simu-head .hb-caption { color: var(--hb-mid); }

.hb-clarity-mock-simu-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hb-clarity-mock-simu-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.hb-clarity-mock-simu-unit {
  font-size: 18px;
  color: var(--hb-sub);
  font-weight: 600;
}

.hb-clarity-mock-simu-bar {
  height: 6px;
  background: var(--hb-line);
  border-radius: 999px;
  position: relative;
  margin-top: 6px;
  overflow: visible;
}
.hb-clarity-mock-simu-bar-fill {
  position: absolute;
  inset: 0;
  width: 62%;
  background: var(--hb-amber);
  border-radius: 999px;
}
.hb-clarity-mock-simu-bar-thumb {
  position: absolute;
  top: -5px;
  left: 62%;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--hb-navy);
  border-radius: 50%;
  transform: translateX(-50%);
}

.hb-clarity-mock-simu-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hb-mid);
}
.hb-clarity-mock-simu-foot strong {
  color: var(--hb-navy);
  font-weight: 600;
}

/* --- Mock Card 2 : Marché local (map) --- */
.hb-clarity-card--map {
  padding: 0;
  overflow: hidden;
}

.hb-clarity-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hb-clarity-live .hb-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--hb-ok);
}
.hb-clarity-live .hb-mono {
  font-size: 11px;
  color: var(--hb-mid);
}

.hb-clarity-mock-map {
  flex: 1;
  background: var(--hb-navy);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.hb-clarity-mock-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.hb-clarity-mock-map-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.95);
  padding: 8px 12px;
  border-radius: 10px;
}
.hb-clarity-mock-map-city {
  font-size: 11px;
  color: var(--hb-sub);
  letter-spacing: .04em;
}
.hb-clarity-mock-map-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hb-clarity-mock-map-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
}
.hb-clarity-mock-map-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--hb-err);
}

/* --- Mock Card 3 : Rendement net --- */
.hb-clarity-mock-invest {
  margin-top: auto;
}
.hb-clarity-mock-invest-big {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hb-clarity-mock-invest-value {
  font-size: 56px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.hb-clarity-mock-invest-unit {
  font-size: 22px;
  color: var(--hb-sub);
  font-weight: 600;
}
.hb-clarity-mock-invest-delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--hb-ok);
  padding: 3px 7px;
  background: rgba(30,158,107,.12);
  border-radius: 999px;
  margin-left: auto;
}
.hb-clarity-mock-invest-sub {
  color: var(--hb-mid);
  margin-top: 4px;
}

.hb-clarity-mock-invest-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}

.hb-clarity-invest-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}
.hb-clarity-invest-row-k { color: var(--hb-sub); }
.hb-clarity-invest-row-v {
  color: var(--hb-navy);
  font-weight: 600;
}
.hb-clarity-invest-row-bar {
  height: 3px;
  background: var(--hb-line);
  border-radius: 999px;
  margin-top: 5px;
  overflow: hidden;
}
.hb-clarity-invest-row-bar-fill {
  height: 100%;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .hb-clarity { padding: 56px 0; }
  .hb-clarity-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hb-clarity-card { min-height: 320px; padding: 18px; }
  .hb-clarity-mock-invest-value { font-size: 42px; }
  .hb-clarity-h { font-size: clamp(22px, 5.5vw, 32px); }
  .hb-clarity-mock-simu-value { font-size: 28px; }
}

/* ============================================================
   6g. PARCOURS STEPS — 3 étapes Comprendre / Comparer / Décider
   ============================================================ */
.hb-parcours {
  padding: 100px 0;
  background: #fff;
}

.hb-parcours-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hb-parcours-head-left { max-width: 720px; }
.hb-parcours-head-right { max-width: 320px; }
.hb-parcours-head-right p { font-size: 15px; }

.hb-parcours-h {
  margin-top: 16px;
  font-size: clamp(32px, 3.6vw, 48px);
}

.hb-parcours-stage {
  position: relative;
}

.hb-parcours-timeline {
  position: absolute;
  top: 38px;
  left: 8.33%;
  right: 8.33%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--hb-amber) 0 6px, transparent 6px 12px);
  opacity: 0.6;
  z-index: 0;
}

.hb-parcours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.hb-parcours-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hb-parcours-ring-wrap {
  position: relative;
  width: 78px;
  height: 78px;
}

.hb-parcours-ring {
  width: 100%;
  height: 100%;
}

.hb-parcours-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.hb-parcours-step-n {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
}

.hb-parcours-step-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.hb-parcours-step-h {
  font-size: 30px;
}

.hb-parcours-step-time {
  color: var(--hb-mid);
}

.hb-parcours-step-d {
  margin-top: 10px;
  font-size: 15px;
  max-width: 320px;
}

.hb-parcours-cta {
  margin-top: 48px;
  text-align: center;
}

@media (max-width: 900px) {
  .hb-parcours { padding: 56px 0; }
  .hb-parcours-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hb-parcours-timeline { display: none; }
  .hb-parcours-step-h { font-size: 24px; }
  .hb-parcours-h { font-size: clamp(22px, 5.5vw, 32px); }
}

/* ============================================================
   6h. TOOLS GRID — 8 cartes outils sur la home
   ============================================================ */
.hb-tools-grid-section {
  padding: 100px 0;
  background: #fff;
}

.hb-tools-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}

.hb-tools-h {
  margin-top: 16px;
  max-width: 700px;
  font-size: clamp(32px, 3.6vw, 48px);
}

.hb-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.hb-tools-card {
  padding: 22px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  color: var(--hb-navy);
}

.hb-tools-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hb-tools-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hb-tools-card-eyebrow {
  font-size: 10.5px;
}

.hb-tools-card-title {
  font-size: 20px;
  margin-top: 4px;
}

.hb-tools-card-desc {
  color: var(--hb-sub);
  line-height: 1.5;
  flex: 1;
}

.hb-tools-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.hb-tools-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--hb-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hb-tools-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-tools-status--live  { color: var(--hb-ok); }
.hb-tools-status--in1m  { color: var(--hb-amber); }
.hb-tools-status--soon  { color: var(--hb-mid); }
.hb-tools-status .hb-live {
  width: 6px; height: 6px; border-radius: 999px;
}
.hb-tools-status--live  .hb-live { background: var(--hb-ok); }
.hb-tools-status--in1m  .hb-live { background: var(--hb-amber); }
.hb-tools-status-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--hb-mid);
  display: inline-block;
  opacity: .7;
}

@media (max-width: 1100px) {
  .hb-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hb-tools-grid-section { padding: 56px 0; }
  .hb-tools-h { font-size: clamp(22px, 5.5vw, 32px); }
}
@media (max-width: 600px) {
  .hb-tools-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   6i. EDITORIAL DARK — "Un nouveau standard"
   ============================================================ */
.hb-editorial {
  padding: 120px 0 100px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hb-editorial-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 80% 30%, rgba(217,164,65,.12), transparent 60%);
  pointer-events: none;
}

.hb-editorial-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.hb-editorial-eyebrow {
  color: rgba(255,255,255,.55);
}

.hb-editorial-h {
  font-size: clamp(40px, 5vw, 64px);
  color: #fff;
  margin-top: 22px;
  line-height: 1;
}
.hb-editorial-h-amber { color: var(--hb-amber); }

.hb-editorial-lead {
  color: rgba(255,255,255,.7);
  margin-top: 24px;
  font-size: 18px;
  max-width: 460px;
}

.hb-editorial-ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hb-editorial-ticker {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hb-editorial-stat-value {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hb-editorial-stat-label {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}

/* Visuel droite */
.hb-editorial-visual {
  position: relative;
  height: 520px;
}

.hb-editorial-image {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a3e6a 0%, #14233f 100%);
  border: 1px solid rgba(255,255,255,.1);
}

.hb-editorial-arch {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.hb-editorial-image-caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
}

.hb-editorial-float-stat {
  position: absolute;
  bottom: 24px;
  left: -20px;
  width: 240px;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--hb-line);
  color: var(--hb-navy);
}

.hb-editorial-eyebrow-light {
  /* Eyebrow utilisé dans le float stat — couleur sub par défaut */
  color: var(--hb-sub);
}

.hb-editorial-float-stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--hb-navy);
  margin-top: 6px;
  letter-spacing: -.04em;
}
.hb-editorial-float-stat-unit {
  font-size: 18px;
  color: var(--hb-sub);
  font-weight: 600;
}

.hb-editorial-float-stat-sub {
  color: var(--hb-mid);
  margin-top: 4px;
}

.hb-editorial-float-chip {
  position: absolute;
  top: 24px;
  right: -16px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px 10px 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hb-line);
  color: var(--hb-navy);
}

.hb-editorial-float-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hb-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hb-editorial-float-chip-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hb-navy);
}

@media (max-width: 900px) {
  .hb-editorial { padding: 72px 0 56px; }
  .hb-editorial-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hb-editorial-h { font-size: 36px; }
  .hb-editorial-ticker {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .hb-editorial-visual { height: 360px; }
  .hb-editorial-float-stat {
    left: 12px;
    bottom: 12px;
    width: 200px;
  }
  .hb-editorial-float-chip { right: 12px; top: 12px; }
}

/* ============================================================
   6j. PILLARS — 3 principes Pourquoi HomeBe
   ============================================================ */
.hb-pillars {
  padding: 120px 0 100px;
  background: #fff;
}

.hb-pillars-head {
  max-width: 640px;
  margin-bottom: 60px;
}

.hb-pillars-h {
  margin-top: 16px;
  font-size: clamp(36px, 4vw, 52px);
}

.hb-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.hb-pillar {
  padding-top: 22px;
  border-top: 2px solid var(--hb-navy);
}

.hb-pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hb-pillar-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-amber);
  letter-spacing: .08em;
}

.hb-pillar-t {
  font-size: 26px;
  margin-top: 18px;
}

.hb-pillar-d {
  margin-top: 12px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .hb-pillars { padding: 56px 0; }
  .hb-pillars-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hb-pillars-h { font-size: clamp(22px, 5.5vw, 32px); }
}

/* ============================================================
   6k. BIG CTA — pre-footer "Trois minutes pour y voir clair"
   ============================================================ */
.hb-big-cta {
  padding: 0 0 80px;
  background: #fff;
}

.hb-big-cta-card {
  background: var(--hb-cream);
  border-radius: 24px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.hb-big-cta-dots {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
}

.hb-big-cta-text {
  position: relative;
}

.hb-big-cta-h {
  font-size: clamp(32px, 3.6vw, 48px);
  margin-top: 16px;
}

.hb-big-cta-h-underline {
  /* Underline contrôlé via span enfant absolu : permet position bottom: -10px
     exacte, parallèle au texte, qui ne bave pas sur le <p> suivant.
     padding-bottom donne un petit air sous le texte avant le trait. */
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.hb-big-cta-h-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--hb-amber);
  border-radius: 2px;
}

.hb-big-cta-lead {
  margin-top: 28px;
  font-size: 17px;
  max-width: 480px;
}

.hb-big-cta-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.hb-big-cta-foot {
  margin-top: 12px;
  color: var(--hb-mid);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .hb-big-cta { padding: 0 0 56px; }
  .hb-big-cta-card {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 28px;
  }
  .hb-big-cta-h { font-size: clamp(24px, 6vw, 36px); }
}

/* ============================================================
   OVERRIDES FORCÉS — Fixes esthétiques quiz
   Mis en fin de fichier pour battre tout override Elementor /
   thème parent qui interviendrait après dans la cascade.
   ============================================================ */

/* --- Inputs quiz : aucun contour visible au repos, fond mist doux --- */
.hb-quiz-money,
.hb-quiz-money:focus-within {
  background: var(--hb-mist) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: box-shadow .15s !important;
}
.hb-quiz-money:focus-within {
  box-shadow: 0 0 0 2px rgba(27, 42, 78, 0.15) !important;
}
.hb-quiz-money-input,
input[type="number"].hb-quiz-money-input,
input[type="number"].hb-quiz-money-input:focus,
input[type="text"].hb-quiz-money-input {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.hb-quiz-money-suffix {
  background: rgba(255,255,255,0.7) !important;
}

.hb-quiz-text-input,
input[type="text"].hb-quiz-text-input {
  background: var(--hb-mist) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: box-shadow .15s !important;
}
.hb-quiz-text-input:focus,
input[type="text"].hb-quiz-text-input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(27, 42, 78, 0.15) !important;
}

/* --- Sidebar LES 7 ÉTAPES : numéro 32px fixe + label flex 1 --- */
.hb-quiz-side-step {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
}
.hb-quiz-side-step.is-current {
  background: var(--hb-cream) !important;
  border-radius: 8px !important;
}
.hb-quiz-side-step-bullet {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.hb-quiz-side-step-name {
  flex: 1 1 auto !important;
  text-align: left !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--hb-sub) !important;
  line-height: 1.3 !important;
}
.hb-quiz-side-step.is-current .hb-quiz-side-step-name {
  color: var(--hb-navy) !important;
  font-weight: 700 !important;
}
.hb-quiz-side-step.is-done .hb-quiz-side-step-name {
  color: var(--hb-navy) !important;
}

/* CTA bouton "Voir un exemple..." sous les sections /resultat/ */
.hb-res-free-cta,
.hb-res-pdf-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Flou "Réservé Premium" — applicable à toute zone à protéger contre
   la copie. Le contenu reste dans le DOM (SEO, structure) mais visuel
   et sélection désactivés. Optionnel : overlay badge via parent
   .hb-er-blur-wrap qui pose un cadenas "Premium" centré. */
.hb-er-blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.hb-er-blur-wrap {
  position: relative;
}
.hb-er-blur-wrap::after {
  content: '🔒 Réservé Premium';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(27,42,78,0.94);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(15,26,51,.35);
}

/* ============================================================
   PAGE EXEMPLE RAPPORT — [homebe_exemple_rapport]
   Adaptation web (max 880px) du design ~/Desktop/HomeBe V1/
   HomeBe Rapport PDF.html. Préfixe .hb-er-*.
   ============================================================ */

.hb-er-wrap { background: #F4F2EC; padding-top: 0; }

/* ─── Intro ─────────────────────────────────────────────── */
.hb-er-intro {
  background: var(--hb-cream);
  padding: 96px 0 56px;
}
.hb-er-intro-inner { max-width: 880px; }
.hb-er-intro-eyebrow {
  color: var(--hb-amber2, #B8852B) !important;
  display: inline-block;
}
.hb-er-intro-h {
  font-size: clamp(32px, 4vw, 56px);
  margin-top: 18px;
  letter-spacing: -.03em;
}
.hb-er-intro-sub {
  margin-top: 18px;
  max-width: 720px;
}
.hb-er-fictive-banner {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(217,164,65,.12);
  border: 1.5px solid var(--hb-amber);
  border-radius: 999px;
  padding: 12px 20px;
  color: var(--hb-navy);
  font-size: 14px;
}

/* ─── Section pages + séparateurs ───────────────────────── */
.hb-er-pages { padding: 48px 0 64px; }
.hb-er-sep {
  max-width: 880px;
  margin: 32px auto 14px;
  border-top: 1px solid var(--hb-line);
  position: relative;
  padding-top: 14px;
}
.hb-er-sep-label {
  position: absolute;
  top: -10px;
  left: 24px;
  background: #F4F2EC;
  padding: 0 12px;
  font-size: 11px;
  color: var(--hb-mid);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.hb-er-sep:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.hb-er-sep:first-of-type .hb-er-sep-label { position: static; background: transparent; padding: 0 0 14px; display: block; }

/* ─── Page card ─────────────────────────────────────────── */
.hb-er-page {
  background: #fff;
  max-width: 880px;
  margin: 0 auto 24px;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(15,26,51,.10);
  padding: 48px 56px 32px;
  position: relative;
  overflow: hidden;
  color: var(--hb-navy);
  font-size: 13.5px;
  line-height: 1.55;
}

.hb-er-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hb-line);
}
.hb-er-page-logo {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}
.hb-er-sig-logo {
  height: 26px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  margin: 8px 0;
}
.hb-er-page-meta {
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--hb-mid);
  letter-spacing: .04em;
  line-height: 1.5;
}
.hb-er-page-meta strong {
  font-weight: 700;
  color: var(--hb-navy);
  display: block;
}
.hb-er-page-meta span { display: block; }
.hb-er-page-body { padding-bottom: 20px; }

.hb-er-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--hb-line);
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--hb-mid);
  letter-spacing: .04em;
}
.hb-er-page-footer-num {
  font-weight: 700;
  color: var(--hb-navy);
}
.hb-er-page-footer-of {
  color: var(--hb-mid);
  font-weight: 400;
}
.hb-er-page-footer-url,
.hb-er-page-footer-stamp { text-transform: uppercase; }

/* ─── Section head (eyebrow chip + h2 + caption right) ──── */
.hb-er-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.hb-er-num-chip {
  display: inline-block;
  background: var(--hb-cream);
  color: var(--hb-amber2, #B8852B);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
}
.hb-er-h-section {
  font-size: clamp(22px, 2.5vw, 32px);
  margin: 0;
  letter-spacing: -.025em;
  font-weight: 700;
  line-height: 1.1;
}
.hb-er-section-sub {
  max-width: 280px;
  text-align: right;
  font-size: 11.5px;
  color: var(--hb-mid);
  line-height: 1.5;
  margin: 0;
  flex: 0 0 auto;
}

/* ─── Block head + caption ──────────────────────────────── */
.hb-er-h-block {
  font-size: 14px;
  margin: 28px 0 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--hb-navy);
}
.hb-er-caption {
  font-size: 11.5px;
  color: var(--hb-mid);
  line-height: 1.5;
  margin: 10px 0 0;
}

/* ─── KPI grid ──────────────────────────────────────────── */
.hb-er-kpi-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.hb-er-kpi {
  background: var(--hb-mist);
  border-radius: 8px;
  padding: 18px 16px;
  border: 1px solid var(--hb-line);
}
.hb-er-kpi.is-feature {
  background: var(--hb-navy);
  color: #fff;
  border-color: var(--hb-navy);
}
.hb-er-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hb-sub);
  margin-bottom: 6px;
}
.hb-er-kpi.is-feature .hb-er-kpi-label { color: rgba(255,255,255,.65); }
.hb-er-kpi-value {
  font-family: ui-monospace, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--hb-navy);
  line-height: 1;
}
.hb-er-kpi.is-feature .hb-er-kpi-value { color: var(--hb-amber); }
.hb-er-kpi-unit {
  font-size: 13px;
  color: var(--hb-sub);
  margin-left: 3px;
  font-weight: 600;
}
.hb-er-kpi.is-feature .hb-er-kpi-unit { color: rgba(255,255,255,.8); }
.hb-er-kpi-sub {
  font-size: 10.5px;
  color: var(--hb-mid);
  margin-top: 6px;
  line-height: 1.35;
}
.hb-er-kpi.is-feature .hb-er-kpi-sub { color: rgba(255,255,255,.7); }

.hb-er-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.hb-er-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}

/* ─── Tables ────────────────────────────────────────────── */
.hb-er-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 4px;
}
.hb-er-table th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hb-sub);
  padding: 6px 8px;
  border-bottom: 1px solid var(--hb-line);
}
.hb-er-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--hb-line);
  vertical-align: top;
  color: var(--hb-navy);
}
.hb-er-table tr.hb-er-subtotal td {
  font-weight: 700;
  background: var(--hb-mist);
}
.hb-er-table tr.hb-er-total td {
  font-weight: 700;
  background: var(--hb-navy);
  color: #fff;
}
.hb-er-table tr.hb-er-total td.hb-er-num { color: var(--hb-amber); }
.hb-er-table tr.hb-er-highlight td {
  background: rgba(217,164,65,.12);
}
.hb-er-num {
  font-family: ui-monospace, monospace;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
th.hb-er-num { text-align: right; }
.hb-er-center { text-align: center; }
.hb-er-ok { color: var(--hb-ok); }
.hb-er-err { color: #C7402F; }

/* ─── Callouts ──────────────────────────────────────────── */
.hb-er-callout {
  background: var(--hb-cream);
  border-left: 3px solid var(--hb-amber);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 24px;
}
.hb-er-callout--dark {
  background: var(--hb-navy);
  color: #fff;
  border-left-color: var(--hb-amber);
}
.hb-er-callout--bar {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-left-width: 1px;
}
.hb-er-callout-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hb-er-callout p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.55;
}
.hb-er-callout p:last-child { margin-bottom: 0; }
.hb-er-callout--dark p { color: rgba(255,255,255,.85); }
.hb-er-callout--dark .hb-er-light { color: #fff; }
.hb-er-callout--dark .hb-er-amber-text { color: var(--hb-amber); }
.hb-er-callout-num {
  color: var(--hb-amber);
  font-weight: 700;
  margin-right: 4px;
}
.hb-er-callout ul {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--hb-sub);
  line-height: 1.55;
}
.hb-er-amber-text { color: var(--hb-amber); }
.hb-er-light { color: #fff !important; }

/* ─── Endettement bar ───────────────────────────────────── */
.hb-er-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hb-er-bar-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
}
.hb-er-bar {
  height: 10px;
  background: var(--hb-line);
  border-radius: 999px;
  overflow: hidden;
}
.hb-er-bar-fill {
  height: 100%;
  background: var(--hb-amber);
  border-radius: 999px;
}
.hb-er-bar-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--hb-mid);
}
.hb-er-bar-mark {
  color: var(--hb-navy);
  font-weight: 700;
}

/* ─── Page 1 cover ──────────────────────────────────────── */
.hb-er-page--cover {
  min-height: 800px;
  position: relative;
}
.hb-er-page-cover-art {
  position: absolute;
  right: -100px;
  bottom: -60px;
  width: 360px;
  max-width: 360px;
  opacity: .07;
  pointer-events: none;
}
.hb-er-page-cover-art img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}

.hb-er-page-header .hb-er-page-logo,
.hb-er-page-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 140px !important;
  display: block;
}
.hb-er-cover-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 32px;
}
.hb-er-cover-ribbon-bar {
  width: 32px;
  height: 3px;
  background: var(--hb-amber);
  border-radius: 999px;
}
.hb-er-cover-ribbon-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--hb-amber2, #B8852B);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hb-er-cover-h {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -.035em;
  margin: 0;
  line-height: 1;
}
.hb-er-cover-h-em {
  color: var(--hb-sub);
  font-style: italic;
  font-weight: 400;
}
.hb-er-cover-verdict {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--hb-navy);
  color: #fff;
  border-radius: 10px;
  max-width: 560px;
}
.hb-er-cover-verdict-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-weight: 700;
  margin-bottom: 4px;
}
.hb-er-cover-verdict-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.hb-er-cover-verdict-yr {
  color: var(--hb-amber);
  font-weight: 700;
}
.hb-er-cover-recip {
  margin: 32px 0 0;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-top: 1px solid var(--hb-line);
  border-bottom: 1px solid var(--hb-line);
}
.hb-er-cover-recip > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  row-gap: 8px;
  column-gap: 12px;
}
.hb-er-cover-recip dt {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hb-sub);
  font-weight: 600;
  margin: 0;
}
.hb-er-cover-recip dd {
  font-size: 12.5px;
  color: var(--hb-navy);
  font-weight: 600;
  margin: 0;
}
.hb-er-cover-legal {
  margin: 20px 0 0;
  font-size: 10.5px;
  color: var(--hb-mid);
  line-height: 1.55;
  font-style: italic;
}

/* ─── Chart (page 4) ────────────────────────────────────── */
.hb-er-chart {
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
.hb-er-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hb-er-chart-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hb-navy);
}
.hb-er-chart-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--hb-sub);
}
.hb-er-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hb-er-chart-sw {
  width: 16px;
  height: 2px;
  display: inline-block;
}
.hb-er-chart-sw--buy { background: var(--hb-amber); }
.hb-er-chart-sw--rent { background: #AEBFD6; border-top: 2px dashed #AEBFD6; }
.hb-er-chart-svg { width: 100%; height: auto; }

.hb-er-chip-retenu {
  display: inline-block;
  background: var(--hb-amber);
  color: var(--hb-navy);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ─── Stress test rows (page 6) ─────────────────────────── */
.hb-er-stress {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hb-line);
}
.hb-er-stress-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 90px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hb-line);
  align-items: center;
  font-size: 12px;
}
.hb-er-stress-lbl { color: var(--hb-navy); }
.hb-er-muted { color: var(--hb-mid); }
.hb-er-stress-val {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--hb-navy);
  text-align: right;
}
.hb-er-stress-delta {
  font-family: ui-monospace, monospace;
  text-align: right;
  font-size: 11px;
}

/* ─── Chips (aides) ─────────────────────────────────────── */
.hb-er-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.hb-er-chip--ok { background: rgba(30,158,107,.16); color: var(--hb-ok); }
.hb-er-chip--err { background: rgba(199,64,47,.14); color: #C7402F; }
.hb-er-chip--warn { background: rgba(217,164,65,.18); color: var(--hb-amber2, #B8852B); }

/* ─── Aides cards ───────────────────────────────────────── */
.hb-er-aide {
  display: grid;
  grid-template-columns: 36px 1fr 120px;
  gap: 14px;
  padding: 14px 16px;
  background: var(--hb-mist);
  border-radius: 8px;
  margin-top: 8px;
  align-items: center;
}
.hb-er-aide--inel {
  background: rgba(0,0,0,0.02);
  opacity: 0.7;
}
.hb-er-aide-num {
  font-family: ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-amber);
  text-align: center;
}
.hb-er-aide-h {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.005em;
}
.hb-er-aide p {
  font-size: 11px;
  color: var(--hb-sub);
  margin: 0;
  line-height: 1.5;
}
.hb-er-aide-amount {
  font-family: ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--hb-navy);
  text-align: right;
  letter-spacing: -.02em;
}
.hb-er-aide-amount.hb-er-muted {
  color: var(--hb-mid);
  font-size: 11px;
  font-weight: 600;
}

/* ─── Synth grid (page 7) ───────────────────────────────── */
.hb-er-synth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
  align-items: flex-end;
}
.hb-er-synth-num {
  font-family: ui-monospace, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.hb-er-synth-grid p {
  font-size: 10.5px;
  color: rgba(255,255,255,.78) !important;
  margin: 4px 0 0;
}

/* ─── Leviers (page 8) ──────────────────────────────────── */
.hb-er-lever {
  display: grid;
  grid-template-columns: 32px 1fr 110px;
  gap: 14px;
  padding: 12px 14px;
  background: var(--hb-mist);
  border-radius: 6px;
  margin-top: 6px;
  align-items: center;
}
.hb-er-lever-step {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--hb-amber);
  text-align: center;
}
.hb-er-lever-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.hb-er-lever-sub {
  font-size: 10.5px;
  color: var(--hb-sub);
  margin-top: 3px;
  line-height: 1.4;
}
.hb-er-lever-gain {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-navy);
  text-align: right;
}

/* ─── Checklist + questions (page 8) ────────────────────── */
.hb-er-checklist,
.hb-er-questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hb-er-checklist-item,
.hb-er-question-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11.5px;
  color: var(--hb-navy);
  line-height: 1.45;
}
.hb-er-checklist-box {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--hb-navy);
  border-radius: 2px;
  flex: 0 0 12px;
  margin-top: 1px;
}
.hb-er-qmark {
  color: var(--hb-amber);
  font-weight: 700;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  flex: 0 0 28px;
}

/* ─── Signature block (page 9) ──────────────────────────── */
.hb-er-signature {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  padding: 24px;
  background: var(--hb-mist);
  border-radius: 8px;
  margin-top: 12px;
}
.hb-er-sig-col--center { text-align: center; }
.hb-er-sig-col--right { text-align: right; }
.hb-er-sig-logo { height: 26px; width: auto; display: block; margin: 8px 0; }
.hb-er-sig-col--right .hb-er-sig-logo { margin-left: auto; }
.hb-er-qr {
  width: 70px;
  height: 70px;
  background:
    linear-gradient(45deg, var(--hb-navy) 25%, transparent 25%) 0 0/8px 8px,
    linear-gradient(-45deg, var(--hb-navy) 25%, transparent 25%) 0 0/8px 8px;
  background-color: #fff;
  border: 2px solid var(--hb-navy);
  border-radius: 4px;
  margin: 0 auto;
}
.hb-er-sig-ref {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.02em;
  margin: 6px 0;
}

.hb-er-mention {
  font-size: 10.5px;
  color: var(--hb-sub);
  line-height: 1.55;
  margin: 0 0 8px;
}

/* ─── CTA bas de page ───────────────────────────────────── */
.hb-er-cta {
  background: var(--hb-cream);
  padding: 48px 0 96px;
}
.hb-er-cta-card {
  background: var(--hb-navy);
  border-radius: 24px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hb-er-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 85% 50%, rgba(217,164,65,.20), transparent 60%);
  pointer-events: none;
}
.hb-er-cta-content { position: relative; }
.hb-er-cta-eyebrow {
  color: var(--hb-amber) !important;
}
.hb-er-cta-h {
  color: #fff !important;
  margin-top: 12px !important;
  font-size: clamp(28px, 3vw, 36px);
}
.hb-er-cta-lead {
  margin-top: 16px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 15px;
}
.hb-er-cta-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* ─── Mobile (768px et en dessous) ──────────────────────── */
@media (max-width: 768px) {
  .hb-er-intro { padding: 56px 0 32px; }
  .hb-er-intro-h { font-size: 28px; }
  .hb-er-intro-sub { font-size: 14px; }
  .hb-er-fictive-banner { font-size: 12px; padding: 10px 14px; }

  .hb-er-page {
    padding: 28px 22px 22px;
    margin-bottom: 18px;
  }
  .hb-er-section-head { flex-direction: column; gap: 10px; }
  .hb-er-section-sub { text-align: left; max-width: none; }

  .hb-er-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hb-er-kpi-value { font-size: 22px; }

  .hb-er-cols-2,
  .hb-er-cols-3 { grid-template-columns: 1fr; gap: 18px; }

  .hb-er-table { font-size: 10.5px; }
  .hb-er-table th, .hb-er-table td { padding: 5px 6px; }

  .hb-er-stress-row {
    grid-template-columns: 1fr;
    padding: 8px 0;
    gap: 2px;
  }
  .hb-er-stress-val, .hb-er-stress-delta { text-align: left; }

  .hb-er-aide {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .hb-er-aide-amount {
    grid-column: 2;
    text-align: left;
    font-size: 16px;
    margin-top: 4px;
  }

  .hb-er-lever {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .hb-er-lever-gain {
    grid-column: 2;
    text-align: left;
    margin-top: 4px;
  }

  .hb-er-synth-grid { grid-template-columns: 1fr; gap: 12px; }

  .hb-er-signature { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .hb-er-sig-col--right { text-align: left; }
  .hb-er-sig-col--right .hb-er-sig-logo { margin-left: 0; }

  .hb-er-cta-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .hb-er-cta-h { font-size: 24px; }
}

/* ============================================================
   PAGE /simulateur/ — overrides Outil 01 (preview chart Achat vs
   Loyer dans la grosse card hero) + Outil 04 (navy-soft)
   ============================================================ */

/* Outil 01 hero : nouveau preview chart à droite (encart ambre clair) */
.hb-simulateur-tool-feat-side--chart {
  background: rgba(217,164,65,0.10);
  border: 1px solid rgba(217,164,65,0.30);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hb-simulateur-feat-chart-eyebrow {
  color: var(--hb-amber) !important;
  margin-bottom: 4px;
}
.hb-simulateur-feat-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.hb-simulateur-feat-chart-legend {
  display: flex;
  gap: 16px;
  font-size: 10.5px;
  color: rgba(255,255,255,.78);
}
.hb-simulateur-feat-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hb-simulateur-feat-chart-sw {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}
.hb-simulateur-feat-chart-sw--buy { background: #FFFFFF; }
.hb-simulateur-feat-chart-sw--rent { background: #D9A441; }
.hb-simulateur-feat-chart-bascule {
  font-size: 11px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 2px;
}
.hb-simulateur-feat-chart-stat {
  font-size: 13px;
  color: #fff;
  letter-spacing: -.005em;
}
.hb-simulateur-feat-chart-stat strong {
  color: var(--hb-amber);
  font-weight: 700;
}

/* Outil 04 (/simulateur/) : même design que Outil 03, fond bleu ardoise
   clair (var --hb-slate #AEBFD6) au lieu de blanc. Tous les sous-éléments
   restent en navy/typo standard — bonne lisibilité sur ce slate. */
.hb-simulateur-tool--slate {
  background: var(--hb-slate) !important;
  border-color: var(--hb-slate) !important;
}
.hb-simulateur-tool--slate .hb-simulateur-tool-icon {
  background: rgba(27,42,78,0.10) !important;
}
.hb-simulateur-tool--slate .hb-simulateur-tool-time {
  background: rgba(255,255,255,0.35) !important;
  border-color: transparent !important;
  color: var(--hb-navy) !important;
}
.hb-simulateur-tool--slate:hover {
  background: #C4D2E2 !important;
}

/* ============================================================
   OUTILS HUB — variantes Outil 01 (featured chart) + Outil 04
   (navy-soft) + nouvelles métadonnées (OUTIL XX + ~ X min)
   ============================================================ */

/* Navy soft : nuance de bleu intermédiaire entre cream et navy plein */
.hb-card-navy-soft {
  background: #2A3D6B !important;
  color: #fff !important;
  border-color: #2A3D6B !important;
}
.hb-card-navy-soft .hb-hub-card-eyebrow--light { color: rgba(255,255,255,.6) !important; }
.hb-card-navy-soft .hb-hub-card-title--light { color: #fff !important; }
.hb-card-navy-soft .hb-hub-card-desc--light { color: rgba(255,255,255,.8) !important; }
.hb-card-navy-soft .hb-hub-card-icon { background: rgba(217,164,65,0.16); }
.hb-card-navy-soft .hb-hub-card-cta--amber {
  color: var(--hb-amber) !important;
  font-weight: 700;
}

/* "~ 8 min" / "~ 3 min" sous la description */
.hb-hub-card-time {
  display: inline-block;
  font-size: 11px;
  color: var(--hb-sub);
  letter-spacing: .04em;
  margin-top: 8px;
  padding: 3px 9px;
  border: 1px solid var(--hb-line);
  border-radius: 999px;
  background: var(--hb-mist);
}
.hb-hub-card-time--light {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

/* Nouveau preview chart "Acheter vs Louer" dans la card featured */
.hb-hub-feat-side--chart {
  background: rgba(217,164,65,0.10) !important;
  border: 1px solid rgba(217,164,65,0.30);
}
.hb-hub-feat-side--chart .hb-hub-feat-side-eyebrow {
  color: var(--hb-amber) !important;
  margin-bottom: 8px;
}
.hb-hub-feat-side-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px 0 4px;
}
.hb-hub-feat-side-legend {
  display: flex;
  gap: 16px;
  font-size: 10.5px;
  color: rgba(255,255,255,.78);
  margin: 4px 0 10px;
}
.hb-hub-feat-side-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hb-hub-feat-side-sw {
  width: 12px;
  height: 2px;
  display: inline-block;
  border-radius: 999px;
}
.hb-hub-feat-side-sw--buy { background: #1B2A4E; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.hb-hub-feat-side-sw--rent { background: #D9A441; }
.hb-hub-feat-side-bascule {
  font-size: 11px;
  color: var(--hb-amber);
  letter-spacing: .02em;
  font-weight: 700;
  margin-bottom: 4px;
}
.hb-hub-feat-side-stat {
  font-size: 13px;
  color: #fff;
  letter-spacing: -.005em;
}
.hb-hub-feat-side-stat strong {
  color: var(--hb-amber);
  font-weight: 700;
}

/* ============================================================
   PAGE /suis-je-pret/ — mini-quiz 4 questions + diagnostic
   ============================================================ */

.hb-sjp-wrap {
  background: var(--hb-cream);
  padding-top: 0;
  min-height: 100vh;
}

.hb-sjp-hero {
  padding: 96px 0 32px;
}
.hb-sjp-hero-inner {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}
.hb-sjp-eyebrow {
  display: inline-block;
  color: var(--hb-amber2, #B8852B) !important;
}
.hb-sjp-h {
  font-size: clamp(32px, 4vw, 48px);
  margin-top: 18px;
  letter-spacing: -.03em;
}
.hb-sjp-sub {
  margin-top: 18px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hb-sjp-quiz {
  padding: 16px 0 96px;
}
.hb-sjp-card {
  background: #fff;
  border-radius: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px;
  box-shadow: 0 12px 40px rgba(15,26,51,.08);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.hb-sjp-q {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-sjp-q-num {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--hb-mid);
  font-weight: 700;
  text-transform: uppercase;
}
.hb-sjp-q-h {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.015em;
  margin: 0;
  line-height: 1.25;
}
.hb-sjp-q-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hb-sjp-a {
  display: block;
  position: relative;
  cursor: pointer;
}
.hb-sjp-a input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hb-sjp-a span {
  display: block;
  padding: 14px 18px;
  border: 1.5px solid var(--hb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-navy);
  font-size: 14.5px;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.hb-sjp-a:hover span {
  border-color: var(--hb-amber);
  background: rgba(217,164,65,0.06);
}
.hb-sjp-a input:checked + span {
  background: var(--hb-navy);
  color: #fff;
  border-color: var(--hb-navy);
}

.hb-sjp-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hb-line);
  margin-top: 8px;
  padding-top: 24px;
}
.hb-sjp-cta-row .hb-pill[disabled] {
  opacity: .5;
  cursor: not-allowed !important;
  pointer-events: none;
}
.hb-sjp-cta-hint {
  font-size: 12px;
  color: var(--hb-mid);
}

/* Diagnostic / résultat */
.hb-sjp-result {
  background: #fff;
  border-radius: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px;
  box-shadow: 0 12px 40px rgba(15,26,51,.08);
}
.hb-sjp-result[hidden] { display: none !important; }

.hb-sjp-result-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.hb-sjp-result-emoji {
  font-size: 48px;
  line-height: 1;
}
.hb-sjp-result-eyebrow {
  color: var(--hb-sub) !important;
  display: inline-block;
  margin-bottom: 6px;
}
.hb-sjp-result-h {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}
.hb-sjp-result-msg {
  font-size: 16px;
  color: var(--hb-sub);
  line-height: 1.55;
  margin: 0 0 24px;
}

.hb-sjp-leviers {
  background: rgba(217,164,65,0.10);
  border: 1px solid rgba(217,164,65,0.30);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.hb-sjp-leviers[hidden] { display: none !important; }
.hb-sjp-leviers .hb-eyebrow {
  color: var(--hb-amber2, #B8852B) !important;
  display: inline-block;
  margin-bottom: 8px;
}
.hb-sjp-leviers ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--hb-navy);
}
.hb-sjp-leviers ul li {
  padding: 3px 0;
}

.hb-sjp-orient { padding-top: 4px; }
.hb-sjp-orient .hb-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
.hb-sjp-orient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.hb-sjp-orient-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--hb-mist);
  border: 1px solid var(--hb-line);
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--hb-navy) !important;
  transition: border-color .15s, transform .15s, background .15s;
}
.hb-sjp-orient-card:hover {
  border-color: var(--hb-navy);
  transform: translateY(-2px);
  background: #fff;
}
.hb-sjp-orient-num {
  font-size: 11px;
  color: var(--hb-amber);
  font-weight: 700;
  letter-spacing: .04em;
}
.hb-sjp-orient-card strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hb-navy);
  letter-spacing: -.005em;
}
.hb-sjp-orient-card .hb-caption {
  font-size: 12px;
  color: var(--hb-mid);
}

.hb-sjp-restart {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .hb-sjp-hero { padding: 64px 0 16px; }
  .hb-sjp-h { font-size: 28px; }
  .hb-sjp-sub { font-size: 15px; }
  .hb-sjp-quiz { padding: 8px 0 64px; }
  .hb-sjp-card,
  .hb-sjp-result {
    padding: 28px 22px;
    border-radius: 18px;
  }
  .hb-sjp-q-h { font-size: 18px; }
  .hb-sjp-result-head { flex-direction: column; gap: 8px; }
  .hb-sjp-result-emoji { font-size: 36px; }
  .hb-sjp-orient-grid { grid-template-columns: 1fr; }
}