/* ============================================================
   MAPAYER — mp31-auth.css (refonte v3.1, pages compte)
   Couche « standing » des écrans auth : aurora sur le panneau
   gauche, Fraunces sur l'accroche, submit or, stats de preuve.
   Chargée uniquement sur les routes auth. Aucune logique touchée.
   ============================================================ */

/* ---------- Panneau gauche : atmosphère ---------- */
.mp-auth-left {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mp-auth-left::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(46% 40% at 20% 12%, rgba(27, 107, 53, 0.45), transparent 70%),
    radial-gradient(30% 34% at 88% 88%, rgba(201, 162, 39, 0.14), transparent 72%);
  filter: blur(44px);
  animation: mp31-aurora 42s var(--ease-inout) infinite alternate-reverse;
  pointer-events: none;
}
/* Les pièces flottantes cèdent la place à l'aurora (v3.1) */
.mp-auth-floating-coins { display: none; }
.mp-auth-left .mp-grid-overlay { display: none; }
.mp-auth-left-content { position: relative; z-index: 1; }

/* ---------- Accroche : Fraunces + or italique ---------- */
.mp-auth-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 80;
  letter-spacing: -0.015em;
}
.mp-auth-headline .gold {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--gold-text);
  font-style: italic;
}

/* ---------- Submit : le seul bouton or de l'écran ---------- */
html[data-theme] .mp-auth-wrapper .mp-auth-submit {
  position: relative;
  overflow: hidden;
  background: var(--gold-fill);
  /* !important requis : une règle héritée du thème pose le blanc sur les
     boutons et bat la cascade normale (constaté au computed style). */
  color: var(--gold-ink) !important;
  border: none;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-inout),
              box-shadow var(--dur-base) var(--ease-inout),
              background var(--dur-fast) var(--ease-inout);
}
html[data-theme] .mp-auth-wrapper .mp-auth-submit:hover {
  background: var(--gold-fill-hover);
  color: var(--gold-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(201, 162, 39, 0.55);
}
html[data-theme] .mp-auth-wrapper .mp-auth-submit:active { transform: translateY(0) scale(0.985); }
.mp-auth-submit::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.mp-auth-submit:hover::after { transform: translateX(420%) skewX(-18deg); }

/* ---------- Rangée de preuves chiffrées (pied du panneau gauche) ---------- */
.mp-auth-proof {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-5);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-base);
}
.mp-auth-proof b {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.mp-auth-proof span {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Cases OTP (challenge / 2FA) : focus or cohérent ---------- */
.mp-otp-input:focus,
.otp-row input:focus {
  border-color: var(--gold-fill) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22) !important;
  outline: none;
}

/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-auth-left::before { animation: none; }
  .mp-auth-submit::after { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .mp-auth-left::before { filter: blur(36px); }
  .mp-auth-proof { gap: var(--space-4); }
}