/* ============================================================
   ONBOARDING LAYOUT — Figma 87:18634 · 26:6416 · 39:362
                             39:471 · 40:3838
   ------------------------------------------------------------
   Desktop: a 500px column centred in the viewport, starting 80
            from the top. The step rail floats at the left gutter
            (80/80) and the account link at the right one (80/40).
   Mobile:  a single padded column; the rail becomes the ring,
            which sits inline with the page title.

   Four steps, five screens — step 1 is asked in two passes:

     1.1  the website alone, in a bare panel        (87:18634)
     1.2  the same panel confirmed, form unfolded   (26:6416)

   Both are step 1, so the counter and the rail do not move
   between them. See data-step-view="1.1" in the markup.
   ============================================================ */

.ice-onboarding {
  position: relative;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- The column --------------------------------------------- */
.ice-onboarding__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  inline-size: 100%;
  padding: var(--space-20);
  padding-block-start: var(--space-64);
}

@media (min-width: 1024px) {
  .ice-onboarding__col {
    inline-size: var(--width-onboarding);
    margin-inline: auto;
    padding: 0;
    padding-block: var(--space-80);
  }
  /* Step 4 breathes: 20 between blocks instead of 12. */
  .ice-onboarding__col[data-rhythm="wide"] { gap: var(--space-20); }

  /* The featured panel hangs 12 outside the column on each side, so
     the field it wraps lines up with every field under it. Only
     here — on mobile the column is already the full width. */
  .ice-onboarding__col > [data-featured] {
    margin-inline: calc(var(--space-12) * -1);
  }
}

/* --- Head ---------------------------------------------------- */
.ice-onboarding__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding-inline: var(--space-12);
  padding-block-end: var(--space-24);
}

.ice-onboarding__headtext {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1 0 0;
  min-inline-size: 0;
}

/* H2 Medium, and the one place the vivid ramp carries a title —
   the onboarding is louder than the app. */
.ice-onboarding__title {
  font-size: var(--type-h2-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-track);
  color: var(--vivid-blue-900);
}

.ice-onboarding__lede {
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-leading);
  letter-spacing: var(--type-body-m-track);
  color: var(--fg-medium);
}
.ice-onboarding__lede > b { font-weight: var(--weight-semibold); color: var(--fg-high); }

/* On desktop the counter is inline text, not a ring. */
.ice-onboarding__count {
  display: none;
  align-items: center;
  gap: var(--space-2);
  /* The one label with no style of its own on the sheet: an H4
     size carrying the caps tracking. Flagged, not invented. */
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-caps-l-track);
  text-transform: uppercase;
  white-space: nowrap;
}
.ice-onboarding__count > b { font-weight: var(--weight-semibold); color: var(--fg-high); }
.ice-onboarding__count > span { font-weight: var(--weight-regular); color: var(--fg-low); }

@media (min-width: 1024px) {
  .ice-onboarding__head { padding-block-end: var(--space-20); }
  .ice-onboarding__count { display: flex; }
  .ice-onboarding .ice-ring { display: none; }
}

/* --- The rail -----------------------------------------------
   Selector carries .ice-stepper too, so it outranks
   `.ice-stepper[data-variant="rail"] { display: flex }` in
   components/_stepper.css. Without that the rail leaks onto
   mobile and lands on top of the form. */
.ice-onboarding__rail.ice-stepper {
  display: none;
  position: absolute;
  inset-inline-start: var(--space-80);
  inset-block-start: var(--space-80);
}
@media (min-width: 1024px) {
  .ice-onboarding__rail.ice-stepper { display: flex; }
}

/* --- "Déjà un compte ?" --------------------------------------
   Pinned to the opposite gutter, right-aligned, and out of the
   column's flow so it never pushes the form down. */
.ice-onboarding__account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-20);
}
.ice-onboarding__account > span {
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-medium);
  opacity: .8;
}
.ice-onboarding__account > .ice-link {
  font-size: var(--type-body-m-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-body-m-leading);
  letter-spacing: var(--type-body-m-track);
}
@media (min-width: 1024px) {
  .ice-onboarding__account {
    position: absolute;
    inset-inline-end: var(--space-80);
    inset-block-start: var(--space-40);
    padding: 0;
  }
}

/* --- Groups -------------------------------------------------- */
.ice-onboarding__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ice-onboarding__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Step 3 puts its two options side by side on desktop. */
@media (min-width: 1024px) {
  .ice-onboarding__options[data-layout="split"] {
    flex-direction: row;
    gap: var(--space-12);
  }
  .ice-onboarding__options[data-layout="split"] > * { flex: 1 0 0; min-inline-size: 0; }
}

.ice-onboarding__row {
  display: flex;
  gap: var(--space-8);
  padding-block-start: var(--space-20);
}
.ice-onboarding__row > * { flex: 1 0 0; min-inline-size: 0; }
@media (min-width: 1024px) { .ice-onboarding__row { gap: var(--space-16); } }

/* A run of stacked field groups, each set off from the last. */
.ice-onboarding__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block-start: var(--space-12);
}
.ice-onboarding__fields > .ice-field-group { padding-block-start: var(--space-12); }

/* --- Actions -------------------------------------------------
   The primary CTA fills the column; the two step-1 buttons sit
   inside the featured panel instead, right-aligned. "Retour" is
   the ghost button at size M — the component decides its metrics,
   not the screen. */
.ice-onboarding__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block-start: var(--space-12);
  align-items: flex-start;
}
.ice-onboarding__actions > .ice-btn[data-variant="primary"] { inline-size: 100%; }

/* Back sits a little further off the CTA than the row's own gap. */
.ice-onboarding__back { margin-block-start: var(--space-8); }