/* =========================================================
   Les Hermines — Bilan Patrimonial : Form CSS
   Extrait et adapté depuis bilan-patrimoniale.html
   ========================================================= */

/* ── Tokens — Charte Les Hermines ── */
.lhb-scope {
  --c-black:        #141415;
  --c-black-soft:   #2A2A2C;
  --c-black-deep:   #000000;
  --c-peach:        #F4BE7D;
  --c-peach-deep:   #E5A55E;
  --c-peach-tint:   #FCEFD8;
  --c-blue-tint:    #E3EAFE;
  --c-cream:        #FAF7F1;
  --c-cream-soft:   #F4EFE5;
  --c-white:        #FFFFFF;
  --c-text:         #141415;
  --c-text-muted:   #5C5D60;
  --c-text-subtle:  #8A8B8E;
  --c-border:       #E8E4DA;
  --c-border-soft:  #F0EBDF;
  --c-border-strong:#D4CFC0;
  --c-success:      #4F7942;
  --c-success-tint: #EEF3EB;
  --c-error:        #B34545;
  --font-display:   'Avenir', 'Avenir Next', 'Nunito Sans', system-ui, sans-serif;
  --font-body:      'Avenir', 'Avenir Next', 'Nunito Sans', system-ui, sans-serif;
  --shadow-xs:  0 1px 2px rgba(20, 20, 21, 0.04);
  --shadow-sm:  0 1px 2px rgba(20, 20, 21, 0.05), 0 2px 6px rgba(20, 20, 21, 0.04);
  --shadow-md:  0 4px 12px rgba(20, 20, 21, 0.08), 0 2px 4px rgba(20, 20, 21, 0.04);
  --shadow-lg:  0 12px 32px rgba(20, 20, 21, 0.12), 0 4px 8px rgba(20, 20, 21, 0.06);
  --shadow-cta: 0 6px 18px rgba(20, 20, 21, 0.18);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ── */
.lhb-scope *, .lhb-scope *::before, .lhb-scope *::after {
  box-sizing: border-box;
}

.lhb-scope {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

.lhb-scope::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(244, 190, 125, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(227, 234, 254, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(20, 20, 21, 0.025) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.lhb-scope button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
.lhb-scope input, .lhb-scope textarea, .lhb-scope select { font: inherit; color: inherit; }
.lhb-scope a { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lhb-scope a:hover { text-decoration-color: var(--c-peach-deep); }

/* ── App Shell ── */
.lhb-scope .bp-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* ── Hauteur de vue (lot 6) ────────────────────────────────────────────
     Chaque écran occupe au minimum toute la hauteur de la fenêtre, écran
     d'accueil compris. « min-height » et non « height » : un écran plus long
     que la fenêtre s'étend normalement et défile, rien n'est jamais tronqué.
     Deux déclarations, dans cet ordre : vh sert de repli aux navigateurs qui
     ignorent dvh ; dvh tient compte de l'apparition et de la disparition des
     barres d'outils mobiles, que vh ne reflète pas. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Rétablit l'attribut « hidden », que des règles d'affichage plus spécifiques
   annulaient. C'est ce qui faisait apparaître le compteur « 01 / 07 PROJETS »
   et la barre d'action sur l'écran d'accueil : le script les marquait bien
   masqués, mais « display: flex » l'emportait sur le display:none implicite. */
.lhb-scope [hidden] { display: none !important; }

/* ── Header ── */
.lhb-scope .bp-header {
  padding: 24px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lhb-scope .bp-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}
.lhb-scope .bp-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.lhb-scope .bp-logo:hover { text-decoration: none; }
.lhb-scope .bp-logo svg { height: 38px; width: auto; display: block; }
.lhb-scope .bp-header__contact {
  font-size: 13px;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lhb-scope .bp-header__contact strong { color: var(--c-black); font-weight: 700; letter-spacing: -0.01em; }
/* Lien de prise de rendez-vous du bandeau (lot 7). Reprend exactement la
   graisse et la couleur du numéro qu'il remplace : à cet emplacement, seul
   le soulignement signale qu'on peut désormais cliquer. */
.lhb-scope .bp-header__rdv {
  color: var(--c-black);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lhb-scope .bp-header__rdv:hover,
.lhb-scope .bp-header__rdv:focus-visible { color: var(--c-black); text-decoration-thickness: 2px; }

/* ── Progress ── */
.lhb-scope .bp-progress {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.lhb-scope .bp-progress__bar {
  flex: 1;
  height: 2px;
  background: var(--c-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.lhb-scope .bp-progress__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--c-peach-deep), var(--c-peach));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.lhb-scope .bp-progress__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
}
.lhb-scope .bp-progress__label strong { color: var(--c-black); font-weight: 900; }

/* ── Main ── */
.lhb-scope .bp-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 32px 24px;
  width: 100%;
  min-height: 0;              /* laisse la rangée 1fr se comprimer sans rogner */
}

/* Centrage vertical par marges automatiques plutôt que par « align-items:
   center ». Les marges automatiques se résolvent à zéro dès que le contenu
   dépasse la hauteur disponible : l'écran reste centré quand il est court, et
   ne peut jamais voir son haut devenir inatteignable quand il est long — ce
   que le centrage par alignement provoque. Vaut pour l'étape 03 et l'écran
   final, les deux plus hauts du parcours. */
.lhb-scope .bp-stage {
  width: 100%;
  max-width: 760px;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}

/* ── Steps ── */
.lhb-scope .bp-step { display: none; animation: lhbStepIn 480ms cubic-bezier(0.16, 1, 0.3, 1); }
.lhb-scope .bp-step.is-active { display: block; }

@keyframes lhbStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lhb-scope .bp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-black);
  font-weight: 700;
  margin-bottom: 20px;
}
.lhb-scope .bp-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--c-peach);
}

.lhb-scope .bp-step__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-black);
  margin-bottom: 14px;
  margin-top: 0;
}
.lhb-scope .bp-step__title em {
  font-style: italic;
  font-weight: 900;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.lhb-scope .bp-step__title em::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: 4px;
  height: 0.32em;
  background: var(--c-peach);
  z-index: -1;
  border-radius: 2px;
}

.lhb-scope .bp-step__subtitle {
  font-size: 16px;
  color: var(--c-text-muted);
  max-width: 580px;
  margin-bottom: 36px;
  line-height: 1.6;
  margin-top: 0;
}

.lhb-scope .bp-question { margin-bottom: 32px; }
.lhb-scope .bp-question:last-child { margin-bottom: 0; }
.lhb-scope .bp-question__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-black);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

/* ── Option Cards ── */
.lhb-scope .bp-options { display: grid; gap: 10px; }
.lhb-scope .bp-options--2 { grid-template-columns: repeat(2, 1fr); }
.lhb-scope .bp-options--3 { grid-template-columns: repeat(3, 1fr); }
.lhb-scope .bp-options--4 { grid-template-columns: repeat(4, 1fr); }

.lhb-scope .bp-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  transition: all var(--transition);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-text);
  cursor: pointer;
  overflow: hidden;
}
.lhb-scope .bp-option::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-peach-tint);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: 0;
}
.lhb-scope .bp-option > * { position: relative; z-index: 1; }
.lhb-scope .bp-option:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.lhb-scope .bp-option.is-selected {
  border-color: var(--c-peach-deep);
  box-shadow: 0 0 0 1px var(--c-peach-deep), var(--shadow-sm);
}
.lhb-scope .bp-option.is-selected::after { opacity: 1; }

.lhb-scope .bp-option__check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong);
  display: grid;
  place-items: center;
  transition: all var(--transition);
  background: var(--c-white);
}
.lhb-scope .bp-option__check svg {
  width: 12px; height: 12px;
  color: var(--c-white);
  opacity: 0;
  transition: opacity var(--transition);
}
.lhb-scope .bp-option.is-selected .bp-option__check {
  border-color: var(--c-black);
  background: var(--c-black);
}
.lhb-scope .bp-option.is-selected .bp-option__check svg { opacity: 1; }
.lhb-scope .bp-option--multi .bp-option__check { border-radius: 5px; }
.lhb-scope .bp-option__label { flex: 1; line-height: 1.35; }
.lhb-scope .bp-option__sub {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* ── Inputs ── */
.lhb-scope .bp-field { margin-bottom: 18px; }
.lhb-scope .bp-field__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-black);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.lhb-scope .bp-field__label--required::after {
  content: '*';
  color: var(--c-peach-deep);
  font-weight: 900;
}
.lhb-scope .bp-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--c-text);
  transition: all var(--transition);
  font-family: var(--font-body);
  font-weight: 500;
}
.lhb-scope .bp-input::placeholder { color: var(--c-text-subtle); font-weight: 400; }
.lhb-scope .bp-input:hover { border-color: var(--c-border-strong); }
.lhb-scope .bp-input:focus {
  outline: none;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(244, 190, 125, 0.35);
}
.lhb-scope .bp-input.is-error {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(179, 69, 69, 0.08);
}
.lhb-scope .bp-field__error {
  visibility: hidden;
  min-height: 18px;
  font-size: 12px;
  color: var(--c-error);
  margin-top: 6px;
  font-weight: 500;
}
.lhb-scope .bp-field.has-error .bp-field__error,
.lhb-scope .bp-field__error.is-visible { visibility: visible; }
.lhb-scope .bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Erreur de question (groupe d'options) — hauteur réservée pour éviter tout CLS ── */
.lhb-scope .bp-question__error {
  visibility: hidden;
  min-height: 18px;
  font-size: 12px;
  color: var(--c-error);
  margin: 8px 0 0;
  font-weight: 500;
}
.lhb-scope .bp-question__error.is-visible { visibility: visible; }

/* ── Consent ── */
.lhb-scope .bp-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--c-cream-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.55;
  margin-top: 8px;
  user-select: none;
}
.lhb-scope .bp-consent:hover { border-color: var(--c-border-strong); background: var(--c-white); }
.lhb-scope .bp-consent input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.lhb-scope .bp-consent__box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-white);
  display: grid; place-items: center;
  transition: all var(--transition);
  margin-top: 1px;
}
.lhb-scope .bp-consent__box svg {
  width: 10px; height: 10px;
  color: var(--c-white);
  opacity: 0;
  transition: opacity var(--transition);
}
.lhb-scope .bp-consent.is-checked .bp-consent__box { background: var(--c-black); border-color: var(--c-black); }
.lhb-scope .bp-consent.is-checked .bp-consent__box svg { opacity: 1; }
.lhb-scope .bp-consent a { color: var(--c-black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lhb-scope .bp-consent--optional { margin-top: 10px; background: transparent; }
.lhb-scope .bp-consent__legal {
  font-size: 12px;
  color: var(--c-text-subtle);
  margin: 10px 2px 0;
}
.lhb-scope .bp-consent__legal a { color: var(--c-text-muted); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ── Restitution (Lot 2) — dimensions cohérentes, remplies avant affichage de l'étape ── */
.lhb-scope .bp-restitution { margin-top: 8px; text-align: left; }
.lhb-scope .bp-restitution__block {
  padding: 20px 0;
  border-top: 1px solid var(--c-border);
}
.lhb-scope .bp-restitution__block:first-child { border-top: none; padding-top: 0; }
.lhb-scope .bp-restitution__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-peach-deep);
  margin: 0 0 10px;
}
.lhb-scope .bp-restitution__parts,
.lhb-scope .bp-restitution__intro {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0 0 6px;
  line-height: 1.6;
}
.lhb-scope .bp-restitution__parts strong { color: var(--c-black); }
.lhb-scope .bp-restitution__note { font-size: 12px; color: var(--c-text-subtle); margin: 0; }
/* ── Vos sujets d'attention (1.2.5) ──────────────────────────────────────
   Le plafond de trois a été levé : la liste peut désormais compter jusqu'à
   huit entrées, une par objectif coché. En colonne unique sur un écran de
   760 px, huit puces forment une bande étroite et haute, avec beaucoup de
   vide à droite. Au-delà de quatre entrées, la liste passe donc sur deux
   colonnes sur large écran.

   Le seuil est porté par :has(), qui compte les éléments. Les navigateurs qui
   ne le connaissent pas ignorent la règle et conservent la colonne unique —
   c'est-à-dire le comportement actuel, jamais une mise en page cassée.

   Puce dessinée en ::before plutôt que par list-style : un marqueur natif se
   fait rogner en multi-colonnes. */
.lhb-scope .bp-restitution__themes {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}
.lhb-scope .bp-restitution__themes li {
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-text-muted);
  padding: 3px 0 3px 18px;
  break-inside: avoid;
}
.lhb-scope .bp-restitution__themes li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-peach);
}

@media (min-width: 641px) {
  .lhb-scope .bp-restitution__themes:has(li:nth-child(5)) {
    columns: 2;
    column-gap: 28px;
  }
}
.lhb-scope .bp-restitution__blocks .bp-restitution__block { padding-top: 20px; }
.lhb-scope .bp-restitution-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-black);
  margin: 0 0 8px;
}
.lhb-scope .bp-restitution-item__line {
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0 0 6px;
}
.lhb-scope .bp-restitution-item__question {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-black);
  margin: 8px 0 0;
}
#bpCabinetPhone { color: var(--c-black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ── Bloc D restitution — conseiller (Lot 4.2) ── */
/* ═══════════════════════════════════════════════════════════════════════
   ENCART CONSEILLER — écran final (lot 5)
   ═══════════════════════════════════════════════════════════════════════
   Élément dominant de l'écran : fond contrasté, large photo, bouton unique.
   Contraintes tenues : rayon 4 px maximum, aucune ombre portée marquée,
   aucun dégradé, aucune icône décorative multicolore.
   La hauteur est réservée dès le chargement (min-height) : le bloc est
   rempli par le script après la réponse serveur, il ne doit provoquer
   aucun décalage cumulé de mise en page. */

.lhb-scope .bp-advisor {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 28px;
  margin: 0 0 24px;
  text-align: left;
  min-height: 300px;                 /* réservation de hauteur, anti-CLS */
}

.lhb-scope .bp-advisor__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-text-subtle);
  margin: 0 0 18px;
}

.lhb-scope .bp-advisor__inner {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

/* ── Média : le repli d'initiales occupe la même boîte que la photo ── */
.lhb-scope .bp-advisor__media {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 5 / 6;               /* format portrait */
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg);
}

.lhb-scope .bp-advisor__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
}

/* Médaillon d'initiales : toujours présent sous la photo. Si l'image ne
   charge pas, il reste visible — jamais de zone vide. */
.lhb-scope .bp-advisor__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  color: var(--c-text-subtle);
  background: var(--c-bg);
  letter-spacing: 1px;
}

.lhb-scope .bp-advisor__body { flex: 1 1 auto; min-width: 0; }

.lhb-scope .bp-advisor__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--c-black);
  line-height: 1.15;
  margin: 0 0 6px;
}

.lhb-scope .bp-advisor__role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0 0 14px;
}

.lhb-scope .bp-advisor__office {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0 0 4px;
}
.lhb-scope .bp-advisor__office strong { color: var(--c-black); font-weight: 700; }

.lhb-scope .bp-advisor__addresses { margin: 0 0 6px; }
.lhb-scope .bp-advisor__address {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0 0 2px;
}

.lhb-scope .bp-advisor__visio {
  font-size: 13px;
  color: var(--c-text-subtle);
  margin: 0 0 6px;
}

/* ── Action principale ── */
.lhb-scope .bp-advisor__cta-wrap { margin: 20px 0 12px; }

.lhb-scope .bp-advisor__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-black);
  color: var(--c-peach);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.lhb-scope .bp-advisor__cta:hover,
.lhb-scope .bp-advisor__cta:focus-visible {
  background: #2A2A2C;
  transform: translateY(-1px);
  color: var(--c-peach);
}
.lhb-scope .bp-advisor__cta-arrow { width: 18px; height: 18px; flex-shrink: 0; }

.lhb-scope .bp-advisor__phone {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 0;
}
.lhb-scope .bp-advisor__phone a { color: var(--c-black); font-weight: 700; }

/* ── Point d'entrée haut vers la prise de rendez-vous (lot 7) ──────────
   Reprend .bp-advisor__cta sans le redéfinir : les deux boutons de l'écran
   final ouvrent le même calendrier, ils doivent se ressembler. Seul le
   centrage et l'espacement sont propres à cet emplacement.
   La marge basse remplace celle de .bp-thanks__sub, qui reste inchangée
   pour les cas où le bouton n'est pas affiché. */
.lhb-scope .bp-thanks__cta-wrap { margin: 0 0 36px; text-align: center; }
@media (max-width: 700px) {
  .lhb-scope .bp-thanks__cta { width: 100%; justify-content: center; }
}

/* ── Lien secondaire vers le blog, volontairement discret ── */
.lhb-scope .bp-thanks__secondary { margin: 0; text-align: center; }
.lhb-scope .bp-thanks__secondary a {
  font-size: 13px;
  color: var(--c-text-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lhb-scope .bp-thanks__secondary a:hover { color: var(--c-black); }

/* ── Mobile : encart pleine largeur, photo au-dessus du texte ── */
@media (max-width: 640px) {
  .lhb-scope .bp-advisor { padding: 20px; min-height: 420px; }
  .lhb-scope .bp-advisor__inner { flex-direction: column; gap: 18px; }
  .lhb-scope .bp-advisor__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
  .lhb-scope .bp-advisor__body { text-align: center; }
  .lhb-scope .bp-advisor__cta { width: 100%; justify-content: center; }
}

/* ── Encart cabinet — étape 02 (Lot 4.2) ──────────────────────────────────
   Hauteur réservée fixe dès le rendu initial : aucun décalage à l'apparition
   du contenu, pas de fond/bordure tant qu'il n'est pas rempli. */
.lhb-scope .bp-cabinet-hint {
  min-height: 48px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.lhb-scope .bp-cabinet-hint:empty { visibility: hidden; }
.lhb-scope .bp-cabinet-hint strong { color: var(--c-black); }
.lhb-scope .bp-cabinet-hint__visio { display: block; font-size: 12px; color: var(--c-text-subtle); }

/* ── Carte conseiller — étape 03 (Lot 4.2, point d'insertion prioritaire) ──
   Peuplée avant l'affichage de l'étape (cf. lhb-form.js), dimensions figées
   pour ne provoquer aucun décalage visuel. */
.lhb-scope .bp-advisor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-cream-soft);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  min-height: 84px;
}
.lhb-scope .bp-advisor-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-border-soft);
}
.lhb-scope .bp-advisor-card__lead { font-size: 14px; color: var(--c-text); margin: 0 0 2px; line-height: 1.45; }
.lhb-scope .bp-advisor-card__lead strong { color: var(--c-black); }
.lhb-scope .bp-advisor-card__fonction { font-size: 12px; color: var(--c-text-subtle); margin: 0; }

/* ── Option discrète "échappatoire" (Lot 4.4) ── */
.lhb-scope .bp-option--skip {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  font-weight: 400;
  color: var(--c-text-muted);
  justify-content: center;
}
.lhb-scope .bp-option--skip:hover { border-color: var(--c-border-strong); transform: none; box-shadow: none; }
.lhb-scope .bp-option--skip.is-selected { border-color: var(--c-border-strong); box-shadow: none; }
.lhb-scope .bp-option--skip.is-selected::after { opacity: 0; }

/* ── Boutons ── */
.lhb-scope .bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-body);
  border: 1px solid transparent;
  text-decoration: none;
}
.lhb-scope .bp-btn--primary {
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: var(--shadow-cta);
}
.lhb-scope .bp-btn--primary:hover {
  background: var(--c-black-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(20, 20, 21, 0.28);
  color: var(--c-white);
  text-decoration: none;
}
.lhb-scope .bp-btn--primary:active { transform: translateY(0); }
.lhb-scope .bp-btn--primary:disabled {
  background: var(--c-border-strong);
  color: var(--c-text-subtle);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.lhb-scope .bp-btn--ghost {
  background: transparent;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  text-decoration: none;
}
.lhb-scope .bp-btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-border-strong);
  text-decoration: none;
}
.lhb-scope .bp-btn--lg { padding: 18px 36px; font-size: 16px; }
.lhb-scope .bp-btn__arrow { width: 18px; height: 18px; transition: transform var(--transition); }
.lhb-scope .bp-btn--primary:hover .bp-btn__arrow { transform: translateX(3px); }

/* ── Footer Nav ── */
.lhb-scope .bp-footer {
  padding: 24px 32px 32px;
  border-top: 1px solid var(--c-border);
  background: var(--c-cream);
  position: relative;
  z-index: 20;
}
.lhb-scope .bp-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lhb-scope .bp-footer__hint {
  font-size: 12px;
  color: var(--c-text-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.lhb-scope .bp-footer__hint svg { width: 14px; height: 14px; }

/* ── Welcome (Step 0) ── */
.lhb-scope .bp-welcome {
  text-align: center;
  padding: 48px 0 24px;
  max-width: 680px;
  margin: 0 auto;
}
.lhb-scope .bp-welcome__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--c-blue-tint);
  color: var(--c-black);
  border: 1px solid rgba(20, 20, 21, 0.06);
  border-radius: var(--radius-full);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 28px;
}
.lhb-scope .bp-welcome__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-peach-deep);
}
.lhb-scope .bp-welcome__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-black);
  margin-bottom: 24px;
  margin-top: 0;
}
.lhb-scope .bp-welcome__title em {
  font-style: italic;
  font-weight: 900;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.lhb-scope .bp-welcome__title em::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: 6px;
  height: 0.28em;
  background: var(--c-peach);
  z-index: -1;
  border-radius: 3px;
}
.lhb-scope .bp-welcome__sub {
  font-size: 18px;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}
.lhb-scope .bp-welcome__bullets {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 40px;
  font-size: 13px;
  color: var(--c-text);
  font-weight: 600;
}
.lhb-scope .bp-welcome__bullet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lhb-scope .bp-welcome__bullet svg { width: 18px; height: 18px; color: var(--c-black); flex-shrink: 0; }
.lhb-scope .bp-welcome__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lhb-scope .bp-welcome__note { font-size: 12px; color: var(--c-text-subtle); letter-spacing: 0.04em; font-weight: 500; margin: 0; }

/* ── Ornement ── */
.lhb-scope .bp-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 32px;
  max-width: 200px;
}
.lhb-scope .bp-ornament__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-peach), transparent);
}
.lhb-scope .bp-ornament__diamond {
  width: 6px; height: 6px;
  background: var(--c-peach-deep);
  transform: rotate(45deg);
}

/* ── Thank You ── */
.lhb-scope .bp-thanks {
  text-align: center;
  padding: 48px 0 24px;
  max-width: 640px;
  margin: 0 auto;
}
.lhb-scope .bp-thanks__icon {
  width: 96px; height: 96px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-peach-tint) 0%, var(--c-cream) 100%);
  display: grid;
  place-items: center;
  position: relative;
  animation: lhbThanksPop 600ms cubic-bezier(0.16, 1, 0.3, 1) 100ms backwards;
}
.lhb-scope .bp-thanks__icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed var(--c-peach-deep);
  opacity: 0.4;
  animation: lhbThanksRotate 24s linear infinite;
}
.lhb-scope .bp-thanks__icon svg { width: 44px; height: 44px; color: var(--c-black); }

@keyframes lhbThanksPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lhbThanksRotate { to { transform: rotate(360deg); } }

.lhb-scope .bp-thanks__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-black);
  margin-bottom: 16px;
  margin-top: 0;
}
.lhb-scope .bp-thanks__sub {
  font-size: 17px;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: 36px;
}
.lhb-scope .bp-thanks__sub strong { color: var(--c-black); font-weight: 700; }
.lhb-scope .bp-thanks__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  text-align: left;
}
.lhb-scope .bp-thanks__step {
  padding: 20px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.lhb-scope .bp-thanks__step-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--c-black);
  line-height: 1;
  margin-bottom: 12px;
  display: inline-block;
  position: relative;
}
.lhb-scope .bp-thanks__step-num::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: 1px;
  height: 0.3em;
  background: var(--c-peach);
  z-index: -1;
}
.lhb-scope .bp-thanks__step-title { font-size: 14px; font-weight: 700; color: var(--c-black); margin-bottom: 4px; }
.lhb-scope .bp-thanks__step-desc { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; margin: 0; }

/* ── Spinner ── */
.lhb-scope .bp-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: lhbSpin 700ms linear infinite;
}
@keyframes lhbSpin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 700px) {
  .lhb-scope .bp-header { padding: 18px 18px 0; gap: 16px; }
  .lhb-scope .bp-header__contact { display: none; }
  .lhb-scope .bp-logo svg { height: 32px; }
  .lhb-scope .bp-main { padding: 28px 18px 160px; }
  .lhb-scope .bp-options--2,
  .lhb-scope .bp-options--3,
  .lhb-scope .bp-options--4 { grid-template-columns: 1fr; }
  .lhb-scope .bp-row { grid-template-columns: 1fr; gap: 0; }
  .lhb-scope .bp-footer { padding: 18px 18px 24px; position: sticky; bottom: 0; }
  .lhb-scope .bp-footer__inner { flex-direction: column-reverse; align-items: stretch; }
  .lhb-scope .bp-btn { width: 100%; }
  .lhb-scope .bp-footer__hint { justify-content: center; margin-top: 4px; }
  .lhb-scope .bp-welcome { padding: 28px 0 16px; }
  .lhb-scope .bp-welcome__sub { font-size: 16px; }
  .lhb-scope .bp-welcome__bullets { gap: 10px 20px; font-size: 12px; }
  .lhb-scope .bp-thanks { padding: 28px 0 16px; }
  .lhb-scope .bp-thanks__steps { grid-template-columns: 1fr; }
  .lhb-scope .bp-step__title { font-size: 28px; }
}

@media (max-width: 420px) {
  .lhb-scope .bp-header__contact { display: none; }
}

/* ── Desktop (Lot 4.3) — additif uniquement, aucune règle < 1024px modifiée ── */
@media (min-width: 1024px) {
  .lhb-scope .bp-stage { max-width: 860px; }

  /* Groupes de 3+ options sans modificateur de grille : passage en 2 colonnes.
     Ciblage explicite par data-field pour ne pas toucher aux groupes déjà en
     --3/--4 (âge, enfants) qui doivent rester tels quels. */
  .lhb-scope .bp-options[data-field="matrimoniale"],
  .lhb-scope .bp-options[data-field="revenu"],
  .lhb-scope .bp-options[data-field="epargne"] {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Étape 03 — carte conseiller en colonne latérale */
  .lhb-scope .bp-step3-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
  }
  .lhb-scope .bp-step3-layout .bp-advisor-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHOTOS DE CONSEILLERS — traitement visuel uniforme (lot 6)
   ═══════════════════════════════════════════════════════════════════════
   Les fichiers de la médiathèque n'ont pas subi le même traitement : celle de
   Bastien BARON était en noir et blanc, celles de Kévin LE CALVEZ et de
   Tiphanie JUE ne le sont pas nécessairement. L'harmonisation se fait ici, en
   CSS, et non en retouchant les fichiers : les mêmes images servent ailleurs
   sur le site, où le traitement voulu peut différer, et une reprise de la
   médiathèque serait irréversible.

   Appliqué aux trois emplacements où une photo de conseiller apparaît :
   encart de l'étape 02, carte de l'étape 03, encart de l'écran final.
   La désaturation est totale, pour que l'ajout d'un conseiller dont la photo
   serait en couleur ne rompe pas l'uniformité. */
.lhb-scope .bp-advisor-card__photo,
.lhb-scope .bp-advisor__photo {
  filter: grayscale(100%);
}

/* Le repli d'initiales de l'écran final n'est pas une image : il n'a rien à
   désaturer, mais il doit rester visuellement cohérent avec les photos. */
.lhb-scope .bp-advisor__fallback { filter: none; }


/* ═══════════════════════════════════════════════════════════════════════
   RÉCAPITULATIF DES RÉPONSES — bloc A (1.2.3)
   ═══════════════════════════════════════════════════════════════════════
   Depuis que les blocs thématiques ne sont plus servis, ce récapitulatif
   porte l'essentiel du contenu de l'écran final. Il est donc traité comme
   un contenu à part entière, et non comme une annexe.
   Grille à deux colonnes sur large écran, empilée sur mobile. */
.lhb-scope .bp-recap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-border);
}
.lhb-scope .bp-recap__label {
  font-size: 13px;
  color: var(--c-text-subtle);
  margin: 0;
  align-self: baseline;
}
.lhb-scope .bp-recap__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-black);
  margin: 0;
  align-self: baseline;
}
@media (max-width: 640px) {
  .lhb-scope .bp-recap { grid-template-columns: 1fr; gap: 2px; }
  .lhb-scope .bp-recap__label { margin-top: 10px; }
}