/* ============================================================================
   WIZARD — quatre questions, puis le contrat (DS §03).

   Écrans pleins échangés par fragment htmx : aucun carrousel, aucun état JS à
   synchroniser. Le serveur sait à quelle question on est ; le client n'a rien à
   deviner. Zéro hexa : uniquement des var(--ds-*).
   ========================================================================== */

.wizard {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: calc(-1 * var(--ds-sp-4));
}

.wizard__tete {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: calc(var(--ds-safe-top) + var(--ds-sp-4)) var(--ds-sp-4) var(--ds-sp-4);
}
.wizard__retour {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ds-border);
  display: grid;
  place-items: center;
  color: var(--ds-text-2);
  text-decoration: none;
}
.wizard__retour[aria-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
.wizard__barre {
  flex: 1;
}
.wizard__compteur {
  font: 600 var(--ds-fs-xs) var(--ds-font-mono);
  color: var(--ds-text-3);
  min-width: 34px;
  text-align: right;
}

.wizard__corps {
  flex: 1;
  padding: var(--ds-sp-2) var(--ds-sp-5) calc(var(--ds-sp-5) + var(--ds-safe-bottom));
}

.ecran {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-4);
  flex: 1;
  animation: ecran-in var(--ds-t-slow) var(--ds-ease);
}
@keyframes ecran-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ecran__q {
  font: 800 var(--ds-fs-2xl) / 1.15 var(--ds-font-display);
  letter-spacing: -0.02em;
}
.ecran__q em {
  font-style: normal;
  color: var(--ds-accent-texte);
}
.ecran__aide {
  color: var(--ds-text-2);
  font-size: var(--ds-fs-sm);
  margin-top: calc(-1 * var(--ds-sp-2));
}
.ecran__choix {
  display: grid;
  gap: var(--ds-sp-3);
}
.ecran__puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
}
.ecran__pied {
  margin-top: auto;
  display: grid;
  gap: var(--ds-sp-2);
  padding-top: var(--ds-sp-4);
}

/* La projection « heures récupérables » vend le produit dès la première question. */
.projection {
  text-align: center;
  padding-top: var(--ds-sp-3);
}
.projection strong {
  display: block;
  font: 800 3.2rem / 1 var(--ds-font-display);
  font-variation-settings: "wdth" 110;
  font-variant-numeric: tabular-nums;
}
.projection span {
  display: block;
  color: var(--ds-text-2);
  font-size: var(--ds-fs-sm);
  margin-top: var(--ds-sp-1);
}
.projection .est-gain {
  color: var(--ds-energy);
}

.recap {
  display: grid;
}
.recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) 0;
  border-bottom: 1px dashed var(--ds-border);
  font-size: var(--ds-fs-sm);
}
.recap__ligne:last-child {
  border-bottom: 0;
}
.recap__ligne dt {
  color: var(--ds-text-2);
}
.recap__ligne dd {
  font: 600 var(--ds-fs-sm) var(--ds-font-mono);
  text-align: right;
  max-width: 60%;
}

.note-vie-privee {
  display: flex;
  gap: var(--ds-sp-2);
  align-items: flex-start;
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-3);
}
.note-vie-privee .ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ds-success);
}