/* =========================================================
   PAGE ONBOARDING
   ========================================================= */

.onboarding-body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background-color: var(--color-bg);
}

/* ---------- En-tête ---------- */
.onboarding-header {
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.onboarding-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 60px;
}

.onboarding-header__brand {
  font-size: 1.25rem;
  color: var(--color-ink);
}

.onboarding-header__quit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--tap-target);
  padding-inline: var(--space-2xs);
  margin-right: calc(var(--space-2xs) * -1);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  transition: color var(--duration-fast) var(--ease-out);
}

.onboarding-header__quit:hover { color: var(--color-ink); }
.onboarding-header__quit-icon { width: 18px; height: 18px; }

/* ---------- Corps ---------- */
.onboarding {
  flex: 1;
  padding-block: var(--space-xl) var(--space-2xl);
}

.onboarding__form { border: none; }

/* Sans JS : toutes les étapes visibles à la suite.
   Avec JS : une seule étape à la fois. */
.step {
  border: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  min-inline-size: 0;   /* corrige le comportement de flex dans un fieldset */
}

.onboarding__form.is-stepped .step { display: none; }
.onboarding__form.is-stepped .step.is-active { display: block; }

.onboarding__form.is-stepped .step.is-active {
  animation: step-in var(--duration-base) var(--ease-out);
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.step__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.step__header .text-lead { font-size: var(--text-small); }

/* ---------- Navigation ---------- */
.step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.step-nav__next,
.step-nav__submit { margin-left: auto; }

.step-nav__prev[hidden],
.step-nav__skip[hidden],
.step-nav__next[hidden],
.step-nav__submit[hidden] { display: none; }

/* Sans JS : seul le bouton d'envoi a du sens */
.onboarding__form:not(.is-stepped) [data-prev],
.onboarding__form:not(.is-stepped) [data-next],
.onboarding__form:not(.is-stepped) [data-skip] { display: none !important; }

.onboarding__form:not(.is-stepped) [data-submit] {
  display: inline-flex !important;
}

@media (max-width: 479px) {
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav__next,
  .step-nav__submit,
  .step-nav__prev,
  .step-nav__skip { margin-left: 0; width: 100%; }
}

/* ---------- Récapitulatif ---------- */
.summary {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.summary__title { margin-bottom: var(--space-sm); }

.summary__list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
}

.summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
}

.summary__row:last-child { border-bottom: none; }

.summary__row dt {
  flex: 0 0 40%;
  color: var(--color-ink-soft);
}

.summary__row dd {
  flex: 1;
  margin: 0;
  font-weight: var(--weight-medium);
  min-width: 12ch;
}

/* ---------- Confirmation ---------- */
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-block: var(--space-2xl);
}

.confirmation[hidden] { display: none; }

.confirmation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-green-soft);
  color: var(--color-green-deep);
}

.confirmation__icon svg { width: 34px; height: 34px; }
.confirmation .text-lead { max-width: 46ch; }
.confirmation__note { color: var(--color-ink-muted); max-width: 46ch; }
.confirmation .btn { margin-top: var(--space-sm); }

/* ---------- Pied de page ---------- */
.onboarding-footer {
  padding-block: var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-soft);
}

.onboarding-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.onboarding-footer a { text-decoration: underline; text-underline-offset: 0.2em; }
.onboarding-footer a:hover { color: var(--color-ink); }

.onboarding-footer__legal {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-small);
}