/* ============================================================
   Inscription web — habillage de l'app (12 novembre 2026)

   Reprend à l'identique le thème « Cuberto » de l'inscription de l'app
   (`starvance-app/src/global.css`, classes `.su-*`) : blanc cassé chaud,
   deux taches de couleur floues, titres géants qui montent, cartes blanches
   qui passent au noir une fois choisies, champs blancs à filet fin, bouton
   pilule noir avec sa flèche. Mêmes couleurs, rayons, courbes et durées.
   Posé APRÈS onboarding.css et ob-theme.css : il les recouvre, il ne les
   remplace pas. Retirer la ligne <link> de cette feuille suffit à revenir.
   ============================================================ */
@font-face { font-family: 'Mona Sans'; src: url('fonts/MonaSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('fonts/MonaSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.ob-body.su-app {
  --su-ink: #0E0E10;
  --su-paper: #F6F5F1;
  --su-line: rgba(14, 14, 16, 0.10);
  --su-accent: #1B3FF0;
  --su-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --su-swap: cubic-bezier(0.76, 0, 0.24, 1);
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 110% -10%, rgba(27, 63, 240, 0.16) 0%, rgba(27, 63, 240, 0) 55%),
    radial-gradient(90% 50% at -20% 105%, rgba(255, 122, 89, 0.14) 0%, rgba(255, 122, 89, 0) 60%),
    var(--su-paper);
  background-attachment: fixed;
  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--su-ink);
  -webkit-font-smoothing: antialiased;
}
.su-app * { font-family: inherit; }

/* ── Barre du haut : transparente, logo et « Quitter » seulement ── */
.su-app .ob-top { position: static; background: transparent; backdrop-filter: none; border: 0; }
.su-app .ob-top-inner { max-width: 1080px; padding: 18px 24px 0; }
.su-app .ob-save { display: none; }
.su-app .ob-exit { font-size: 14px; font-weight: 600; color: #8A8A94; }
.su-app .ob-exit:hover { color: var(--su-ink); }

/* ── Mise en page : une colonne, comme sur téléphone ─────────── */
.su-app .ob-layout {
  display: block; max-width: 460px; margin: 0 auto; padding: 8px 20px 180px;
}
.su-app .ob-panel { min-height: 0; }
.su-app .ob-stepwrap { animation: none; }
/* L'aperçu de la page ne sert qu'à l'étape de personnalisation, où l'app
   le montre aussi : ailleurs, il distrayait d'un formulaire à remplir. */
.su-app .ob-preview, .su-app .ob-preview-toggle { display: none !important; }
@media (min-width: 1020px) {
  .su-app[data-step="custom"] .ob-layout {
    max-width: 920px; display: grid; grid-template-columns: 460px 340px;
    justify-content: center; gap: 64px; align-items: start;
  }
  .su-app[data-step="custom"] .ob-preview { display: block !important; position: sticky; top: 24px; margin-top: 110px; }
}
.su-app .ob-panel > p:last-child { display: none; } /* « Vous reprenez là où… » : repris dans l'en-tête */

/* ── En-tête d'étape : retour rond, 01/03, intitulé, barre fine ── */
.su-head { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.su-back {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--su-ink); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--su-ink);
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.su-back:hover, .su-back:active { background: var(--su-ink); color: #fff; }
.su-back[disabled] { opacity: 0; pointer-events: none; }
.su-count { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.su-count small { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #A3A3AB; margin-left: 2px; }
.su-kicker {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #8A8A94;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-restart { margin-left: auto; background: none; border: 0; font-size: 12px; color: #8A8A94; cursor: pointer; }
.su-restart:hover { color: var(--su-ink); }
.su-progress { height: 2px; margin-top: 16px; border-radius: 999px; background: var(--su-line); overflow: hidden; }
.su-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--su-ink); transition: width 0.7s var(--su-swap); }
.su-app .ob-steps { display: block; max-width: none; padding: 0; }

/* ── Titres : géants, serrés, qui montent de sous la ligne ────── */
.su-app .ob-eyebrow { display: none; }
.su-app .ob-h {
  margin: 36px 0 0; font-size: 42px; line-height: 0.98; font-weight: 700; letter-spacing: -0.055em; color: var(--su-ink);
}
.su-app .ob-h .ob-opt { font-size: 15px; letter-spacing: 0; color: #8A8A94; }
.su-app .ob-sub { margin-top: 14px; font-size: 16px; line-height: 1.45; color: #6E6E78; max-width: none; }
.su-app .ob-panel-inner p { color: #6E6E78; }

@keyframes su-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* Uniquement quand on change d'étape : un clic sur une carte ne rejoue rien. */
.su-enter .ob-h { animation: su-rise 0.8s var(--su-ease) both; }
.su-enter .ob-sub { animation: su-rise 0.8s 0.06s var(--su-ease) both; }
.su-enter .ob-panel-inner > :not(.ob-h):not(.ob-sub):not(.ob-eyebrow):not(.ob-choices) { animation: su-rise 0.8s 0.12s var(--su-ease) both; }
.su-enter .ob-choices > * { animation: su-rise 0.7s var(--su-ease) both; }
.su-enter .ob-choices > :nth-child(1) { animation-delay: 0.10s; }
.su-enter .ob-choices > :nth-child(2) { animation-delay: 0.16s; }
.su-enter .ob-choices > :nth-child(3) { animation-delay: 0.22s; }
.su-enter .ob-choices > :nth-child(4) { animation-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .su-enter *, .su-progress > span { animation: none !important; transition: none !important; }
}

/* ── Cartes de choix : blanches, puis noires une fois choisies ── */
.su-app .ob-choices, .su-app .ob-choices.cols-2, .su-app .ob-choices.cols-3 {
  display: flex; flex-direction: column; gap: 12px; margin-top: 22px;
}
.su-app .ob-choice {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  width: 100%; padding: 18px; border-radius: 28px; border: 0;
  background: #fff; box-shadow: inset 0 0 0 1px var(--su-line);
  transition: background-color 0.35s var(--su-swap), transform 0.2s;
}
.su-app .ob-choice:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(14, 14, 16, 0.22); border: 0; }
.su-app .ob-choice:active { transform: scale(0.97); }
.su-app .ob-choice.sel { background: var(--su-ink); box-shadow: none; }
.su-app .ob-choice.reco { box-shadow: inset 0 0 0 1px var(--su-line); border: 0; }
.su-app .ob-choice .su-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.su-app .ob-choice .t { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--su-ink); padding: 0; }
.su-app .ob-choice .d { font-size: 13px; line-height: 1.4; color: #6B6B76; }
.su-app .ob-choice.sel .t { color: #fff; }
.su-app .ob-choice.sel .d { color: rgba(255, 255, 255, 0.62); }
.su-app .ob-choice .ob-radio { display: none; }
.su-emoji {
  width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--su-paper); color: var(--su-ink);
}
.su-app .ob-choice.sel .su-emoji { background: rgba(255, 255, 255, 0.12); color: #fff; }
.su-tick {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #D6D6DC; color: var(--su-ink); transition: background-color 0.2s, border-color 0.2s;
}
.su-app .ob-choice.sel .su-tick { background: #fff; border-color: #fff; }
.su-app .ob-reco {
  position: static; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: rgba(27, 63, 240, 0.10); color: var(--su-accent); vertical-align: 1px;
}
.su-app .ob-choice.sel .ob-reco { background: #fff; color: var(--su-ink); }

/* ── Champs : blancs, filet fin, contour noir au focus ────────── */
.su-app .ob-fields, .su-app .ob-fields.cols-2 { margin-top: 24px; gap: 16px; max-width: none !important; }
.su-app .ob-field label, .su-app .ob-fields label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8A8A94;
}
.su-app .ob-field input, .su-app .ob-field select, .su-app .ob-fields input, .su-app .ob-fields select {
  min-height: 56px; padding: 0 18px; border-radius: 18px; font-size: 16px;
  background: #fff; color: var(--su-ink); border: 1.5px solid var(--su-line); box-shadow: none;
  transition: border-color 0.2s;
}
.su-app .ob-field input::placeholder { color: #A3A3AB; }
.su-app .ob-field input:focus, .su-app .ob-field select:focus, .su-app .ob-fields input:focus, .su-app .ob-fields select:focus {
  border-color: var(--su-ink); box-shadow: none; outline: none;
}
.su-app .ob-field.err input, .su-app .ob-fields .ob-field.err input { border-color: #E5484D; background: #FFF7F7; }
.su-app .ob-err { color: #C62828; font-size: 12px; }
.su-app .ob-phone select { min-height: 56px; border-radius: 18px; }
.su-app .hint { font-size: 12px; color: #8A8A94; }
.su-app .ob-panel a[href], .su-link {
  color: var(--su-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.su-app .su-ghost { background: none; border: 0; padding: 0; margin-top: 16px; cursor: pointer; }

/* ── Encarts : la seule surface sombre de l'écran ─────────────── */
.su-app .ob-tax, .su-app .ob-handoff, .su-app .ob-info.su-dark {
  border-radius: 24px; padding: 18px; background: var(--su-ink); border: 0; color: #fff;
}
.su-app .ob-tax strong, .su-app .ob-handoff h3 { color: #fff; }
.su-app .ob-tax p, .su-app .ob-handoff p, .su-app .ob-info.su-dark p { color: rgba(255, 255, 255, 0.66) !important; }
.su-app .ob-tax-ic, .su-app .ob-handoff-ic { color: #fff; background: rgba(255, 255, 255, 0.12); border: 0; }
.su-app .ob-info {
  margin-top: 18px; border-radius: 20px; padding: 14px 16px; border: 0;
  background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--su-line); color: #6E6E78; font-size: 13px;
}
.su-app .ob-info svg { color: var(--su-ink); }

/* ── Montants : pastilles en pilule ───────────────────────────── */
.su-app .ob-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.su-app .ob-amount {
  height: 52px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #fff; color: var(--su-ink); box-shadow: inset 0 0 0 1px var(--su-line); transition: all 0.15s;
}
.su-app .ob-amount.on { background: var(--su-ink); color: #fff; box-shadow: none; }

/* Collaborateurs */
.su-app .ob-collab input { min-height: 52px; border-radius: 16px; border: 1.5px solid var(--su-line); background: #fff; }
.su-app .ob-add-collab { border-radius: 999px; border: 1.5px dashed rgba(14, 14, 16, 0.25); background: transparent; color: var(--su-ink); font-weight: 700; }

/* ── Socle d'action : fondu, bouton pilule noir et sa flèche ──── */
.su-app .ob-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
  display: block; padding: 28px 20px max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(246, 245, 241, 0) 0%, var(--su-paper) 34%);
}
.su-app .ob-nav:empty { display: none; }
.su-app .ob-nav .su-dock-in { max-width: 460px; margin: 0 auto; }
.su-app[data-step="custom"] .ob-nav .su-dock-in { max-width: 460px; }
.su-cta {
  position: relative; width: 100%; height: 62px; border-radius: 999px; padding: 0 64px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; background: var(--su-ink);
  overflow: hidden; isolation: isolate; transition: background-color 0.2s, opacity 0.2s;
}
.su-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--su-accent);
  transform: translateY(101%); transition: transform 0.45s var(--su-swap);
}
.su-cta:not(:disabled):hover::before, .su-cta:not(:disabled):active::before { transform: translateY(0); }
.su-cta:not(:disabled)::after {
  content: '→'; position: absolute; right: 7px; top: 7px; width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: #fff; color: var(--su-ink); transition: transform 0.35s var(--su-swap);
}
.su-cta:not(:disabled):hover::after { transform: translateX(-4px) rotate(-45deg); }
.su-cta:disabled { background: rgba(14, 14, 16, 0.08); color: #A3A3AB; cursor: default; }
.su-dock-hint { margin: 0 0 8px; text-align: center; font-size: 12px; color: #8A8A94; }
.su-dock-note { margin: 8px 0 0; text-align: center; font-size: 12px; color: #8A8A94; }

/* Le bouton de fin vit dans l'écran ; on le pose dans le socle visuellement. */
.su-app .ob-cta-bar { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }

@media (max-width: 560px) {
  .su-app .ob-layout { padding: 4px 18px 180px; }
  .su-app .ob-h { font-size: 38px; }
  .su-app .ob-fields.cols-2 { grid-template-columns: 1fr; }
}

/* Retouches après relecture à 390 px. */
.su-app .ob-steps { max-width: 460px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.su-head { min-width: 0; }
.su-app .ob-top .nav-logo img { height: 22px !important; }
.su-app .ob-field label.su-logo-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--su-ink);
  background: #fff; box-shadow: inset 0 0 0 1px var(--su-line);
}
.su-app .ob-field label.su-logo-btn:hover { box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-app .su-logo-del { background: none; border: 0; font-size: 13px; color: #8A8A94; cursor: pointer; text-decoration: underline; }
.su-app .ob-nav { padding-top: 40px; background: linear-gradient(180deg, rgba(246, 245, 241, 0) 0%, var(--su-paper) 28%); }
@media (max-width: 400px) { .su-restart { display: none; } }
.su-app .ob-nav { max-width: none; width: auto; }
.su-app .ob-top .nav-logo img { height: 22px !important; width: auto !important; }
/* Personnalisation sur grand écran : la colonne reste centrée, sous
   l'en-tête et au-dessus du bouton ; l'aperçu se pose à côté. */
@media (min-width: 1020px) {
  .su-app[data-step="custom"] .ob-layout { display: block; max-width: 460px; position: relative; }
  .su-app[data-step="custom"] .ob-preview {
    position: absolute !important; top: 0; left: calc(100% + 56px); width: 300px; margin-top: 40px;
  }
}

/* ── Aperçu de la page (12 novembre, 2e passe) ────────────────
   Le téléphone dessiné à droite est retiré partout : l'app montre un
   encart d'aperçu dans le formulaire, on fait pareil. */
.su-app .ob-preview, .su-app .ob-preview-toggle,
.su-app[data-step="custom"] .ob-preview { display: none !important; }
@media (min-width: 1020px) { .su-app[data-step="custom"] .ob-layout { max-width: 460px; } }
.su-panel {
  border-radius: 28px; padding: 20px;
  background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--su-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.su-preview { background: linear-gradient(180deg, rgba(245, 247, 255, 0.9) 0%, rgba(255, 255, 255, 0.85) 60%); }
.su-label { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6B6B76 !important; }
.su-pv { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
.su-pv-logo, .su-pv-ini { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; background: #F1F1F4; }
.su-pv-ini { display: flex; align-items: center; justify-content: center; background: #E2E6F0; font-size: 19px; font-weight: 700; color: #4A4A57; }
.su-pv-name { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: #151515 !important; text-align: center; }
.su-pv-amounts { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.su-pv-amounts span { border-radius: 999px; background: #F1F6FF; padding: 4px 12px; font-size: 14px; font-weight: 700; color: #1B3FF0; font-variant-numeric: tabular-nums; }
.su-pv-free { margin: 12px 0 0; font-size: 12px; color: #8A8A94 !important; text-align: center; }
.su-logo-row { margin-top: 12px; display: flex; gap: 8px; }
.su-app .su-logo-row label.su-logo-btn {
  flex: 1; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #F7F7FA; color: #1B3FF0; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none;
  text-transform: none; letter-spacing: 0;
}
.su-app .su-logo-row .su-logo-del {
  flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 12px; border: 0;
  background: #F7F7FA; color: #6B6B76; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.su-amounts-block { margin-top: 20px; }
.su-h3 { margin: 0; font-size: 15px; font-weight: 700; color: #151515 !important; }
.su-app .su-amounts-block .ob-amounts { margin-top: 12px; }