/* ═══════════════════════════════════════════════════════════════════════
   Login — direction « Linear futuriste »
   Fond nébuleuse (posée par la fondation : #bgfx) + anneaux orbitaux en
   rotation lente, wordmark « Orbit » en dégradé, carte en verre 392px,
   bordure-énergie, OTP (primitives .otp-row/.otp-cell), co-branding.
   Aucune couleur en dur — uniquement les tokens de css/index.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Scène : remplit la zone applicative sous le header ─── */
.auth-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* ─── Anneaux orbitaux en rotation lente (28–64 s) ─── */
.auth-rings {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; z-index: 0;
}
.auth-ring { position: absolute; border-radius: 50%; }
.auth-ring.r1 {
  width: 340px; height: 340px; padding: 1px;
  background: var(--grad-soft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.32;
  animation: auth-ring-spin 30s linear infinite;
}
.auth-ring.r2 {
  width: 520px; height: 520px;
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  opacity: 0.6;
  animation: auth-ring-spin 46s linear infinite reverse;
}
.auth-ring.r3 {
  width: 720px; height: 720px;
  border: 1px solid color-mix(in srgb, var(--accent2) 18%, transparent);
  opacity: 0.6;
  animation: auth-ring-spin 64s linear infinite;
}
@keyframes auth-ring-spin { to { transform: rotate(360deg); } }

/* ─── Orbes lumineux dérivants (renfort de la nébuleuse au centre) ─── */
.auth-orb {
  position: absolute; width: 760px; height: 760px; border-radius: 50%;
  top: -180px; right: -120px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent) 38%, transparent 62%);
  filter: blur(8px);
  animation: auth-orb-drift 26s var(--ease) infinite alternate;
}
.auth-orb.two {
  width: 520px; height: 520px; left: -160px; bottom: -200px; top: auto; right: auto;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent2) 14%, transparent), transparent 60%);
  animation-duration: 32s;
}
@keyframes auth-orb-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }

/* ─── Carte centrée 392px ─── */
.auth-card {
  width: 100%; max-width: 392px;
  position: relative; z-index: 1;
}

/* ─── Wordmark « Orbit » en dégradé ─── */
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin-bottom: 30px;
}
.auth-glyph {
  width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));
}
.auth-wm {
  font-size: 21px; font-weight: 600; letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ─── Panneau en verre + bordure-énergie ─── */
.auth-panel {
  position: relative;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.auth-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-soft); opacity: 0.35; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--t-base) var(--ease);
}
.auth-panel:hover::before { opacity: 0.5; }

/* ─── Titre & sous-titre ─── */
.auth-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.auth-sub { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin-bottom: 24px; }

/* ─── Formulaire ─── */
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-field { display: flex; flex-direction: column; }
.auth-field .field-label { margin-bottom: 6px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-row .field-label { margin-bottom: 0; }
.auth-form .btn-grad { height: 38px; margin-top: 4px; }

/* ─── Lien (« Mot de passe oublié ? », « Retour ») ─── */
.auth-link {
  color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
.auth-back { text-align: center; margin-top: 16px; font-size: 13px; }

/* ─── Bandeau d'erreur (masqué par défaut via v-if) ─── */
.auth-alert {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger-soft); background: var(--danger-soft);
  color: var(--text); font-size: 13px; line-height: 1.4;
}
.auth-alert svg { width: 16px; height: 16px; flex: none; color: var(--danger); }

/* ─── Avertissement (réinitialisation 2FA) ─── */
.auth-notice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning-soft); background: var(--warning-soft);
  color: var(--text); font-size: 12.5px; line-height: 1.5;
}
.auth-notice svg { width: 16px; height: 16px; flex: none; color: var(--warning); margin-top: 1px; }

/* ─── QR code d'enrôlement ─── */
.auth-qr { display: flex; justify-content: center; margin: 16px 0 10px; }
.auth-qr img, .auth-qr > div {
  width: 180px; height: 180px; background: #fff;
  border-radius: var(--radius); padding: 6px;
}
.auth-key { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.auth-key b { display: inline-block; margin-left: 4px; color: var(--text); user-select: all; font-weight: 500; }

/* ─── Espacements boutons des étapes OTP ─── */
.auth-mt { margin-top: 18px; }
.auth-mt-sm { margin-top: 8px; }

/* ─── Pied de carte : co-branding (login uniquement) ─── */
.auth-foot {
  margin-top: 22px; text-align: center;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.auth-foot b { color: var(--text-muted); font-weight: 600; }

/* ─── Mouvement réduit : on coupe rotation et dérive ─── */
@media (prefers-reduced-motion: reduce) {
  .auth-ring, .auth-orb { animation: none !important; }
}

/* ─── Responsive : carte pleine largeur en mobile ─── */
@media (max-width: 480px) {
  .auth-wrap { padding: 16px; }
  .auth-panel { padding: 24px 20px; }
  .auth-ring.r2, .auth-ring.r3 { display: none; }
}