/* Altura — bilan d'entrée
   Chargé après styles.css : reprend ses variables, ses polices et ses boutons.
   Mise en page des maquettes du bilan ; système visuel de la landing (décision du 25/09/2026).
   Points de rupture : 360px (petits écrans), 960px (desktop : colonne latérale, logo à gauche). */

:root {
  /* Seule variable ajoutée : bordure des champs de saisie. #D3DCE5 (maquette) n'atteint que 1,39:1 ;
     WCAG 1.4.11 demande 3:1 pour identifier un champ. #8190A1 : 3,26:1 sur blanc. */
  --border-control: #8190A1;

  --b-width: 1120px;
  --b-side: 104px; /* largeur fixe des deux zones latérales de l'en-tête mobile (centrage optique du logo) */}

.bilan { background: var(--bg); }
.bilan [hidden] { display: none !important; } /* l'attribut hidden prime sur les display des composants */

/* ---------- En-tête : retour · logo · étape ---------- */
.b-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.b-header__inner {
  width: min(100% - 2 * var(--gutter), var(--b-width));
  margin-inline: auto;
  height: 64px;
  display: grid;
  grid-template-columns: var(--b-side) minmax(0, 1fr) var(--b-side);
  align-items: center;
}

.b-back {
  justify-self: start;
  width: 44px;
  height: 44px;
  margin-left: -12px; /* aligne la flèche sur la marge, la zone cliquable déborde */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
}
.b-back:hover { color: var(--accent); background: var(--bg-alt); }
.b-back.is-hidden { visibility: hidden; } /* garde sa place : le logo reste centré */

.b-logo {
  justify-self: center;
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}
/* Logo : lien vers la landing (20/10/2026), comme sur les autres pages ; zone tactile de 44 px */
a.b-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.b-step {
  justify-self: end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

@media (min-width: 960px) {
  .b-header__inner {
    height: 72px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
  }
  .b-logo { justify-self: start; font-size: 24px; }
  .b-step { font-size: 12px; letter-spacing: 0.1em; }
}

/* ---------- Barre de progression ---------- */
.b-progress {
  height: 4px;
  background: var(--border);
}
.b-progress.is-hidden { visibility: hidden; } /* garde ses 4px : pas de saut de mise en page */
.b-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}

/* ---------- Mise en page ---------- */
.b-main { padding: 28px 0 48px; }
.b-main:focus { outline: none; }

.b-layout {
  width: min(100% - 2 * var(--gutter), var(--b-width));
  margin-inline: auto;
}

.b-screen {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.b-screen[hidden] { display: none; }
/* Changement d'écran (18/10/2026) : fondu et montée de 8 px, en CSS seul. L'animation repart chaque fois qu'un écran
   quitte [hidden] ; la navigation et le focus restent immédiats (app.js inchangé). */
@media (prefers-reduced-motion: no-preference) {
  .b-screen:not([hidden]) { animation: b-enter 0.35s var(--ease-out) both; }
}
@keyframes b-enter {
  from { opacity: 0; transform: translateY(8px); }
}

/* Changements d'état des réponses, cases, champs et liens : fondus courts */
.b-option,
.b-answer,
.b-input,
.b-back,
.b-textlink {
  transition:
    border-color 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}

.b-title {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.b-title:focus { outline: none; }
.b-title:focus-visible { outline: var(--focus); outline-offset: 4px; }
.b-title--xl { font-size: 34px; }

.b-lead {
  max-width: 34em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-strong);
}

/* Colonne latérale « Ce bilan » : desktop uniquement, comme la maquette */
.b-aside { display: none; }

@media (min-width: 960px) {
  .b-main { padding: 56px 0 72px; }

  .b-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
  }

  .b-screen { gap: 26px; }
  .b-title { font-size: 40px; }
  .b-title--xl { font-size: 48px; }
  .b-lead { font-size: 17px; }

  .b-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
  }
}

.b-aside__list { display: flex; flex-direction: column; gap: 14px; }
.b-aside__list li,
.b-aside__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-strong);
}
.b-aside__check { stroke: var(--accent); stroke-width: 1.9; margin-top: 2px; }
.b-aside__rule { height: 1px; margin: 4px 0; background: var(--border); }
.b-aside__note { font-size: 13px; color: var(--ink-muted); }
.b-aside__note .icon { margin-top: 2px; }
.b-aside__fine { font-size: 13px; line-height: 1.55; color: var(--ink-muted); } /* « pas un diagnostic » */

/* ---------- Boutons (complète .btn de styles.css) ---------- */
button.btn {
  border: 0;
  cursor: pointer;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-accent);
  color: var(--ink-label);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Questions : groupe de champs ---------- */
/* Chaque question est un fieldset dont la légende porte le titre de l'écran. */
.b-form,
.b-group {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.b-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.b-group > legend {
  float: left; /* rend la légende stylable comme un élément ordinaire */
  width: 100%;
  padding: 0;
}
.b-title { overflow-wrap: anywhere; } /* un prénom très long ne déborde pas */

.b-sub {
  max-width: 34em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* Champ texte */
.b-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.b-field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.b-input {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 2px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.b-input::placeholder { color: var(--ink-label); opacity: 1; font-weight: 400; }
.b-input:hover { border-color: var(--ink-label); }
.b-input:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
  border-radius: var(--radius-md);
}

.b-input[aria-invalid="true"] { border-color: var(--ink); }

/* Message d'erreur : identifié par le texte, pas seulement par la couleur */
.b-error {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.b-error:empty { display: none; }

/* Choix sous forme de cartes (boutons radio visibles, comme les cases à cocher) */
.b-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}
.b-options--narrow { max-width: 520px; }

.b-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 60px;
  padding: 17px 22px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.b-option:hover { border-color: var(--border-control); }
.b-option:has(:checked) {
  border-color: var(--accent);
  background: var(--surface-accent);
}
.b-option input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Cases à cocher de l'écran de sécurité */
.b-options--wide { max-width: 40em; gap: 10px; }
.b-option--check {
  gap: 16px;
  padding: 20px 22px;
  font-weight: 400;
  line-height: 1.5;
}
.b-option--check input { margin-top: 2px; }

.b-title--sm { font-size: 26px; }
.b-title--md { font-size: 28px; }
.b-sub--wide { max-width: 40em; }

/* Réponses d'orientation (O1 à O7) : un clic choisit et passe à l'écran suivant */
.b-answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 17px 22px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.b-answer:hover { border-color: var(--border-control); }
/* Réponse déjà donnée (retour arrière) : bordure, fond et coche, pas seulement la couleur */
.b-answer[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--surface-accent);
}
.b-answer__check {
  stroke: var(--accent);
  stroke-width: 2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out), visibility 0.2s;
}
.b-answer[aria-pressed="true"] .b-answer__check { visibility: visible; opacity: 1; }

/* ---------- Résultat ---------- */
.b-title--lg { font-size: 32px; }
.b-lead--wide { max-width: 42em; }

.b-result {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Étiquette de la peur dominante. Encre foncée : l'accent sur fond bleu clair n'atteint que 4,39:1. */
.b-chip {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-strong);
}

.b-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.b-card--alt { background: var(--bg-alt); }

/* Question de contrôle */
.b-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.b-control > legend { float: left; width: 100%; padding: 0; }
.b-control__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.b-control__sub { font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.b-control__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-control__list { display: flex; flex-direction: column; gap: 10px; }

.b-option--sm {
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px;
}
.b-option--sm input { margin: 0; }

.b-result__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

/* Cases avant paiement (CGV, renonciation) : même case que l'accueil (.b-check) */
.b-terms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 40em;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 359px) {
  .b-result__cta .btn { padding-inline: 18px; } /* le libellé tient sur une ligne à 320px */
}

@media (min-width: 960px) {
  .b-title--lg { font-size: 44px; }
  .b-result { gap: 26px; }
}

/* ---------- Résultat : sections B à F (18/10/2026) ----------
   Mêmes ingrédients que le reste du bilan (serif léger, intitulés en mono, filets fins, cartes discrètes) :
   aucune couleur ni ombre nouvelle. */
.b-verify { max-width: 42em; }

.b-part {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 42em;
  margin-top: 20px;
}
.b-part__head { display: flex; flex-direction: column; gap: 6px; }
.b-part__title {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}
.b-part__sub,
.b-part__note { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* B · ce que le bilan a retenu : trois lignes sous filet, intitulé en mono au-dessus de la valeur */
.b-facts { margin: 0; border-top: 1px solid var(--rule); }
.b-facts__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.b-facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.b-facts dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}
.b-facts__more {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-strong);
}

/* C · quatre étapes numérotées, posées sur le fond */
.b-steps { display: flex; flex-direction: column; gap: 18px; }
.b-steps li { display: flex; align-items: flex-start; gap: 16px; }
.b-steps__num {
  flex: none;
  min-width: 22px;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.b-steps__title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.b-steps p { margin-top: 2px; font-size: 15px; line-height: 1.6; color: var(--ink-strong); }

/* E · praticien : portrait réel et deux lignes, sans carte */
.b-trust {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.b-trust__photo { flex: none; width: 72px; }
.b-trust__photo img { display: block; width: 72px; height: 90px; object-fit: cover; border-radius: 16px; }
.b-trust__text { display: flex; flex-direction: column; gap: 4px; }
.b-trust__title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.b-trust__text p { font-size: 15px; line-height: 1.6; color: var(--ink-strong); }

/* F · carte sombre du tarif de la landing (.price, styles.css), adaptée au bilan. Depuis le 19/10/2026 : « Altura · en
   préparation », intention d'achat et inscription à l'ouverture (.b-launch), sans paiement. */
.b-buy { max-width: 42em; margin-top: 20px; }
.b-buy .price__row { padding: 4px 0; }
.b-buy .b-check { color: var(--on-dark-body); }
.b-buy .b-check a { color: var(--on-dark); text-underline-offset: 3px; }
.b-buy .b-check input { accent-color: var(--on-dark-check); }
/* Bouton désactivé (aucune réponse choisie) : le gris clair du bilan se confondrait avec le bouton clair actif */
.b-buy .btn:disabled {
  background: rgba(238, 243, 248, 0.12);
  color: var(--on-dark-muted);
}

/* Raccourci vers l'offre, sous la question de contrôle : lien discret, flèche vers le bas */
.b-jump { gap: 8px; margin-top: -6px; }
.b-jump .icon { flex-shrink: 0; }
#t-achat { scroll-margin-top: 24px; }
#t-achat:focus { outline: none; }
#t-achat:focus-visible { outline: var(--focus); outline-color: var(--on-dark); outline-offset: 4px; }

.b-launch__lead { display: flex; flex-direction: column; gap: 10px; }
/* Transparence, avant la question : filet clair, texte courant sur fond sombre (pas une alerte) */
.b-launch__notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--dark-rule);
  border-radius: var(--radius-md);
  background: rgba(238, 243, 248, 0.04);
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark);
}
.b-launch__notice .icon { margin-top: 2px; color: var(--on-dark-check); }

.b-launch__form { display: flex; flex-direction: column; gap: 18px; }
.b-launch__form[hidden] { display: none; }
.b-launch__question {
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--on-dark);
}
.b-launch__subquestion { font-size: 15px; font-weight: 600; color: var(--on-dark); }
.b-launch__frein { padding-top: 18px; border-top: 1px solid var(--dark-rule); }
.b-launch__frein[hidden] { display: none; }
.b-launch__fine { font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); }
.b-launch__done {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark);
}
.b-launch__done:focus { outline: none; }
.b-launch__done:focus-visible { outline: var(--focus); outline-color: var(--on-dark); outline-offset: 4px; }

/* Les trois réponses (et les freins) : la même carte que le questionnaire, en version sombre, toutes de même poids */
.b-option--dark {
  border-color: rgba(238, 243, 248, 0.16);
  background: rgba(238, 243, 248, 0.04);
  color: var(--on-dark);
  font-weight: 400;
}
.b-option--dark:hover { border-color: rgba(238, 243, 248, 0.4); }
.b-option--dark:has(:checked) {
  border-color: var(--on-dark-check);
  background: rgba(159, 184, 211, 0.16);
}
.b-option--dark input { accent-color: var(--on-dark-check); }
.b-option--dark.b-option--sm { font-size: 14.5px; }
.b-launch .b-textlink { margin-top: 0; color: var(--on-dark-muted); }
.b-launch .b-textlink:hover { color: var(--on-dark); }
.b-launch .b-error { color: var(--on-dark); }
.b-launch .b-error:not(:empty)::before { content: '! '; font-family: var(--font-mono); color: var(--on-dark-check); }

/* Inscription à l'ouverture, sous un filet */
.b-launch__signup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-rule);
}
.b-launch__signup[hidden] { display: none; }
.b-launch__subtitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--on-dark);
}
.b-launch__text { font-size: 15px; line-height: 1.6; color: var(--on-dark-body); }
.b-launch .b-field__label { color: var(--on-dark); }
.b-launch .b-input { border-color: transparent; }
.b-launch .b-input[aria-invalid="true"] { border-color: var(--on-dark-check); }
.b-launch__consent { display: flex; flex-direction: column; gap: 4px; }
.b-launch__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 34px; /* aligné sur le texte de la case */
  font-size: 14px;
  color: var(--on-dark);
  text-underline-offset: 3px;
}
.b-launch__link:hover { color: #FFFFFF; }
.b-launch .btn[aria-busy="true"] { cursor: progress; }
@media (max-width: 479.98px) {
  .b-launch .b-result__cta .btn { width: 100%; }
}
@media (min-width: 960px) {
  .b-launch__question { font-size: 26px; }
  .b-launch__subtitle { font-size: 26px; }
}

@media (min-width: 960px) {
  .b-part, .b-buy { margin-top: 32px; }
  .b-part__title { font-size: 32px; }
}

/* ---------- Blocage ---------- */
.b-block {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Lien de rattrapage : discret, mais 44px de zone cliquable */
.b-textlink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.b-textlink:hover { color: var(--ink); }

@media (min-width: 960px) {
  .b-form,
  .b-group,
  .b-block { gap: 26px; }
  .b-title--sm { font-size: 36px; }
  .b-title--md { font-size: 38px; }
}

/* ---------- Accueil : consentement ---------- */
.b-consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 34em;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.b-consent p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.b-consent__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}
.b-consent__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

/* Case à cocher : toute la ligne est cliquable, 44px minimum */
.b-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.b-check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}