/* LEAV·U — base : appareil, écran, typographie. Dépend de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--color-brand-fluo); color: var(--color-brand-nuit); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hôte : page du simulateur ---------- */
.app-host {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-neutral-100);
  padding: 24px;
}
[data-theme="dark"] .app-host { background: var(--color-neutral-1000); }
.app-host.is-embed { padding: 0; background: var(--bg); display: block; }

/* ---------- Appareil (cadre téléphone, 393×852 pt) ---------- */
.device {
  position: relative;
  width: var(--size-device-width);
  height: var(--size-device-height);
  border-radius: 55px;
  padding: 0;
  background: var(--bg);
  box-shadow:
    0 0 0 10px #0F1114,
    0 0 0 11px #3D434C,
    0 40px 80px -20px rgba(15,17,20,.45);
  overflow: hidden;
  isolation: isolate;
}
.is-embed .device { position: fixed; top: 0; left: 0; border-radius: 0; box-shadow: none; }
.device__island {
  position: absolute; z-index: 60; top: 11px; left: 50%; translate: -50% 0;
  width: 124px; height: 36px; border-radius: 20px; background: #000;
  pointer-events: none;
}
.is-embed .device__island { display: none; }

/* ---------- Écran ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.screen--surface { background: var(--surface); }
.screen--night { background: var(--color-brand-nuit); color: var(--color-neutral-25); }
.screen--fluo { background: var(--color-brand-fluo); color: var(--color-brand-nuit); }
.screen__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.screen__scroll::-webkit-scrollbar { display: none; }
.screen__body { padding: 0 var(--space-gutter); }
.screen__footer {
  padding: var(--space-4) var(--space-gutter) calc(var(--size-home-indicator) + var(--space-2));
  display: grid; gap: var(--space-3);
}
.screen__footer--floating { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; }

/* Barre d'état iOS (9:41) */
.statusbar {
  position: relative; z-index: 50;
  flex: none;
  height: var(--size-statusbar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 36px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  color: currentColor;
}
.statusbar--overlay { position: absolute; top: 0; left: 0; right: 0; }
.statusbar--light { color: #fff; }
.statusbar--scrim { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 55%, transparent 100%); }
.statusbar__icons { display: flex; gap: 6px; align-items: center; }
.statusbar__icons svg { display: block; }

/* Indicateur d'accueil */
.home-indicator {
  position: absolute; z-index: 70; left: 50%; bottom: 8px; translate: -50% 0;
  width: 134px; height: 5px; border-radius: 3px;
  background: currentColor; opacity: .9; pointer-events: none;
}

/* ---------- Typographie ---------- */
.t-display, .t-large-title, .t-title-1, .t-title-2, .t-title-3 { text-wrap: balance; }
.t-display { font: var(--type-display-weight) var(--type-display-size)/var(--type-display-line) var(--font-display); letter-spacing: var(--type-display-tracking); }
.t-large-title { font: var(--type-large-title-weight) var(--type-large-title-size)/var(--type-large-title-line) var(--font-display); letter-spacing: var(--type-large-title-tracking); }
.t-title-1 { font: var(--type-title-1-weight) var(--type-title-1-size)/var(--type-title-1-line) var(--font-display); letter-spacing: var(--type-title-1-tracking); }
.t-title-2 { font: var(--type-title-2-weight) var(--type-title-2-size)/var(--type-title-2-line) var(--font-display); letter-spacing: var(--type-title-2-tracking); }
.t-title-3 { font: var(--type-title-3-weight) var(--type-title-3-size)/var(--type-title-3-line) var(--font-display); letter-spacing: var(--type-title-3-tracking); }
.t-headline { font: var(--type-headline-weight) var(--type-headline-size)/var(--type-headline-line) var(--font-ui); letter-spacing: var(--type-headline-tracking); }
.t-body { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-ui); letter-spacing: var(--type-body-tracking); }
.t-callout { font: var(--type-callout-weight) var(--type-callout-size)/var(--type-callout-line) var(--font-ui); letter-spacing: var(--type-callout-tracking); }
.t-subhead { font: var(--type-subhead-weight) var(--type-subhead-size)/var(--type-subhead-line) var(--font-ui); letter-spacing: var(--type-subhead-tracking); }
.t-footnote { font: var(--type-footnote-weight) var(--type-footnote-size)/var(--type-footnote-line) var(--font-ui); letter-spacing: var(--type-footnote-tracking); }
.t-caption-1 { font: var(--type-caption-1-weight) var(--type-caption-1-size)/var(--type-caption-1-line) var(--font-ui); letter-spacing: var(--type-caption-1-tracking); }
.t-caption-2 { font: var(--type-caption-2-weight) var(--type-caption-2-size)/var(--type-caption-2-line) var(--font-ui); letter-spacing: var(--type-caption-2-tracking); }
.t-amount-xl { font: var(--type-amount-xl-weight) var(--type-amount-xl-size)/var(--type-amount-xl-line) var(--font-numeric); letter-spacing: var(--type-amount-xl-tracking); font-variant-numeric: tabular-nums; }
.t-amount-l { font: var(--type-amount-l-weight) var(--type-amount-l-size)/var(--type-amount-l-line) var(--font-numeric); letter-spacing: var(--type-amount-l-tracking); font-variant-numeric: tabular-nums; }
.t-timer { font: var(--type-timer-weight) var(--type-timer-size)/var(--type-timer-line) var(--font-numeric); letter-spacing: var(--type-timer-tracking); font-variant-numeric: tabular-nums; }
.t-code { font: var(--type-code-weight) var(--type-code-size)/var(--type-code-line) var(--font-numeric); letter-spacing: var(--type-code-tracking); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss02" 1; }
.t-signature { font: var(--type-signature-weight) var(--type-signature-size)/var(--type-signature-line) var(--font-ui); letter-spacing: var(--type-signature-tracking); text-transform: uppercase; }
.t-overline { font: var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-line) var(--font-ui); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-success { color: var(--success-ink); }
.c-accent { color: var(--accent-ink); }
.c-danger { color: var(--danger-ink); }
.c-fluo-on-dark { color: var(--color-brand-fluo); }
.w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; }

/* Pile verticale utilitaire (espacement du système uniquement) */
.stack { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-5 { margin-bottom: var(--space-5); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Assistant : le compteur d'étapes est porté par la barre de progression (libellé réservé au lecteur d'écran) */
.steps + .sr-only + * { margin-top: var(--space-5); }