/* ============================================================================
   SONCRUSH — AUTHENTIFICATION & ONBOARDING
   Écrans épurés, centrés, ambiance premium sombre.
   ============================================================================ */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  position: relative;
  overflow: hidden;
}
.auth-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(255, 62, 127, 0.18), transparent 55%),
    radial-gradient(80% 60% at 10% 100%, rgba(212, 175, 55, 0.12), transparent 55%),
    var(--sc-black);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--sc-black-2);
  border: var(--border-soft);
  border-radius: var(--r-modal);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);
}
@media (max-width: 480px) {
  .auth-card { padding: var(--sp-6); border: none; background: transparent; box-shadow: none; }
}

.auth-logo { display: block; height: 54px; width: auto; margin: 0 auto var(--sp-6); }

.auth-title { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-2); }
.auth-sub { color: var(--sc-grey); text-align: center; font-size: var(--fs-sm); margin-bottom: var(--sp-8); }

/* Barre de progression onboarding (dégradé rose→or) */
.auth-progress { height: 4px; background: var(--sc-black-3); border-radius: 999px; margin-bottom: var(--sp-8); overflow: hidden; }
.auth-progress__bar { height: 100%; background: var(--grad-crush); border-radius: 999px; transition: width var(--dur-emo) var(--ease); }

/* Liens & pied de carte */
.auth-foot { text-align: center; margin-top: var(--sp-6); color: var(--sc-grey); font-size: var(--fs-sm); }
.auth-foot a { color: var(--sc-rose-soft); font-weight: 600; }
.auth-link { color: var(--sc-rose-soft); font-size: var(--fs-sm); }

/* Séparateur « ou » */
.auth-sep { display: flex; align-items: center; gap: var(--sp-3); color: var(--sc-grey-2); font-size: var(--fs-xs); margin: var(--sp-6) 0; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }

/* Boutons sociaux */
.social-btns { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: 50px; border-radius: var(--r-pill);
  background: var(--sc-white); color: #1a1a1a; font-weight: 600;
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-std) var(--ease);
}
.btn-social:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-social svg { width: 20px; height: 20px; }
.btn-social--fb { background: #1877F2; color: #fff; }

/* Case à cocher conditions */
.auth-terms { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--sc-grey); margin: var(--sp-2) 0 var(--sp-6); }
.auth-terms input { margin-top: 3px; accent-color: var(--sc-rose); width: 18px; height: 18px; }
.auth-terms a { color: var(--sc-rose-soft); }

/* Champ mot de passe avec bouton afficher */
.pw-field { position: relative; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sc-grey); background: none; padding: 6px; }

/* Force du mot de passe */
.pw-meter { height: 4px; border-radius: 999px; background: var(--sc-black-3); margin-top: var(--sp-2); overflow: hidden; }
.pw-meter__bar { height: 100%; width: 0; border-radius: 999px; transition: width var(--dur-std) var(--ease), background var(--dur-std) var(--ease); }
.pw-hint { font-size: var(--fs-xs); color: var(--sc-grey); margin-top: 6px; }

/* ---- OTP (6 cases) ---- */
.otp-inputs { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-6) 0; }
.otp-box {
  width: 52px; height: 62px; text-align: center;
  font-size: var(--fs-xl); font-weight: 700;
  background: var(--sc-black-3); border: 1px solid transparent; border-radius: var(--r-input);
  color: var(--sc-white); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-std) var(--ease), box-shadow var(--dur-std) var(--ease);
}
.otp-box:focus { outline: none; border-color: var(--sc-rose); box-shadow: 0 0 0 3px rgba(255, 62, 127, 0.15); }
.otp-box.filled { border-color: var(--sc-rose-soft); }
@media (max-width: 400px) { .otp-box { width: 44px; height: 54px; font-size: var(--fs-lg); } }

.resend-row { text-align: center; color: var(--sc-grey); font-size: var(--fs-sm); margin-top: var(--sp-4); }

/* Icône ronde d'état (résultat de vérification) */
.result-icon {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto var(--sp-6);
  display: flex; align-items: center; justify-content: center; font-size: 42px;
}
.result-icon--ok { background: rgba(52, 199, 123, 0.15); color: var(--sc-success); }
.result-icon--ko { background: rgba(255, 77, 77, 0.15); color: var(--sc-danger); }

/* Astuce de confidentialité */
.auth-note { display: flex; gap: var(--sp-2); align-items: flex-start; background: var(--sc-black-3); border-radius: var(--r-input); padding: var(--sp-3); font-size: var(--fs-xs); color: var(--sc-grey); margin-top: var(--sp-6); }