/* ============================================================
   STARVANCE — Thème du parcours d'inscription
   Aligné sur le dashboard : Averta, dégradé bleu → violet,
   surfaces blanches à filet fin, couleur réservée aux actions.
   À charger APRÈS style.css et onboarding.css.
   ============================================================ */

@font-face{
  font-family:'Averta';
  src:url('fonts/averta-regular.woff') format('woff'),
      url('fonts/averta-regular.otf') format('opentype');
  font-weight:300 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Averta';
  src:url('fonts/averta-bold.woff') format('woff'),
      url('fonts/averta-bold.ttf') format('truetype');
  font-weight:700 900;font-style:normal;font-display:swap;
}

:root{
  --c1:#2E6BFF; --c2:#7C4DFF; --c3:#A855F7;
  --blue:#2E6BFF; --violet:#7C4DFF; --accent:#C4B5FD;
  --gradient:linear-gradient(135deg,var(--c1),var(--c2));
  --gradient-soft:linear-gradient(135deg,rgba(46,107,255,.08),rgba(124,77,255,.08));
  --ink:#0D1230; --gray:#5D6590; --gray-light:#98A0C0;
  --bg:#FFFFFF; --bg-soft:#FAFAFC; --bg-softer:#F2F5FE;
  --border:rgba(13,18,48,.07);
  --shadow-sm:0 1px 2px rgba(13,18,48,.04);
  --shadow-md:0 6px 22px rgba(13,18,48,.06);
  --shadow-lg:0 18px 46px rgba(13,18,48,.10);
  --shadow-glow:0 10px 28px rgba(46,107,255,.24);
  --radius:18px; --radius-lg:24px;
  --font:'Averta','Figtree',system-ui,sans-serif;
  --font-display:'Averta','Figtree',sans-serif;
  --font-serif:'Averta','Figtree',sans-serif;   /* on abandonne le serif */
}

body,.ob-body{
  font-family:var(--font);
  background:
    radial-gradient(700px 460px at 12% -12%, rgba(46,107,255,.07), transparent 60%),
    radial-gradient(620px 420px at 90% -6%, rgba(124,77,255,.07), transparent 62%),
    var(--bg-soft);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.ob-h{letter-spacing:-.022em;font-family:var(--font-display);font-weight:700}

/* Barre supérieure */
.ob-top{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.ob-exit{font-weight:600}
.ob-exit:hover{color:var(--c2)}
.logo-mark{background:var(--gradient);box-shadow:0 6px 18px rgba(46,107,255,.32)}

/* Progression */
.ob-step-pill .bar{height:4px;background:var(--border)}
.ob-step-pill .bar span{background:var(--gradient)}
.ob-step-pill .lbl{font-size:.7rem;letter-spacing:.01em}
.ob-step-pill.current .lbl{color:var(--c1)}

/* Panneau principal */
.ob-panel-inner{font-size:1rem}
.ob-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--c1);
}
.ob-h{font-size:1.85rem;line-height:1.18;margin-bottom:10px}
.ob-sub,.ob-panel-inner p{color:var(--gray)}

/* Cartes de choix */
.ob-choice,.ob-plan,.ob-radio,.ob-collab,.ob-estab,.ob-adv-item,.ob-handoff,.ob-info,.ob-recap,.ob-order{
  border-radius:var(--radius);border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);
}
.ob-choice{padding:18px 20px;transition:.16s}
.ob-choice:hover{border-color:rgba(46,107,255,.35);box-shadow:0 10px 26px rgba(46,107,255,.10);transform:translateY(-1px)}
.ob-choice.on,.ob-radio.on,.ob-plan.on{
  border-color:var(--c2);background:linear-gradient(135deg,rgba(46,107,255,.06),rgba(124,77,255,.06));
  box-shadow:0 10px 26px rgba(124,77,255,.14);
}
.ob-choice-ic{border-radius:13px;background:var(--gradient-soft);color:var(--c1)}
.ob-choice.on .ob-choice-ic{background:var(--gradient);color:#fff}

/* Champs */
.ob-field label,.ob-fields label{font-weight:600;font-size:.82rem;color:var(--ink)}
.ob-field input,.ob-field select,.ob-field textarea,
.ob-fields input,.ob-fields select,.ob-fields textarea{
  border:1px solid var(--border);border-radius:12px;padding:13px 14px;font:inherit;font-size:.98rem;
  background:#fff;color:var(--ink);transition:.15s;
}
.ob-field input:focus,.ob-field select:focus,.ob-field textarea:focus,
.ob-fields input:focus,.ob-fields select:focus,.ob-fields textarea:focus{
  outline:none;border-color:var(--c2);box-shadow:0 0 0 3px rgba(124,77,255,.14);
}

/* Boutons */
.ob-next,.ob-cta-btn{
  background:var(--gradient);color:#fff;border:none;border-radius:12px;
  font-weight:600;letter-spacing:-.01em;box-shadow:var(--shadow-glow);transition:.18s;
}
.ob-next:hover,.ob-cta-btn:hover{box-shadow:0 14px 34px rgba(124,77,255,.34);transform:translateY(-1px)}
.ob-next:disabled,.ob-cta-btn:disabled{opacity:.5;box-shadow:none;transform:none}
.ob-finish{background:transparent;box-shadow:none}
.ob-back{background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--gray);font-weight:600}
.ob-back:hover{border-color:rgba(13,18,48,.2);color:var(--ink)}
.ob-preview-toggle{border:1px solid var(--border);border-radius:12px;color:var(--gray);font-weight:600}
.ob-preview-toggle:hover{border-color:var(--c2);color:var(--c2)}

/* Récapitulatif / commande */
.ob-order-total,.ob-plan-price{font-family:var(--font-display);font-weight:700}
.ob-plan-tag{background:var(--gradient);color:#fff;border-radius:999px;font-weight:600}

/* Aperçu téléphone */
.ob-preview-label{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gray)}
.pv-phone{box-shadow:var(--shadow-lg);border-radius:38px}
.pv-hero-card{background:var(--gradient)}
.pv-pay{background:var(--ink)}
.pv-avatar{background:rgba(255,255,255,.2)}

/* Détails */
.badge-dot{background:var(--green)}
a{color:inherit}
.ob-panel a[href]{color:var(--c1);font-weight:600}

/* Option recommandée (Recevoir des paiements) */
.ob-choice.reco{border-color:var(--c1);box-shadow:0 0 0 1px var(--c1) inset}
.ob-reco{position:absolute;top:10px;right:10px;background:var(--gradient);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:999px}
.ob-choice{position:relative}