/* Page de connexion « fenêtre flottante » (Metallux v6.2) */
.auth-overlay {
  background: #05060e;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(48, 51, 141, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(227, 0, 15, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 55%);
  overflow: hidden;
  perspective: 1200px;
}
.auth-overlay::before, .auth-overlay::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
  animation: authBlob 14s ease-in-out infinite alternate;
}
.auth-overlay::before { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: #30338d; }
.auth-overlay::after  { width: 36vw; height: 36vw; right: -10vw; bottom: -12vw; background: #e3000f; animation-delay: -7s; }
@keyframes authBlob { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw, 4vw, 0) scale(1.15); } }

.auth-card {
  position: relative; max-width: 420px; padding: 0; overflow: hidden; text-align: center;
  background: rgba(12, 13, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 60px rgba(48, 51, 141, 0.25);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
  animation: authWindowIn 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both, authFloat 7s ease-in-out 0.7s infinite;
}
@keyframes authWindowIn { from { opacity: 0; transform: translateY(40px) scale(0.92) rotateX(8deg); } to { opacity: 1; transform: none; } }
@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Barre de titre façon fenêtre */
.auth-titlebar {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px; color: var(--text-secondary); letter-spacing: .4px; user-select: none;
}
.auth-titlebar .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.auth-titlebar .dot.r { background: #ff5f57; } .auth-titlebar .dot.y { background: #febc2e; } .auth-titlebar .dot.g { background: #28c840; }
.auth-titlebar .title { flex: 1; text-align: center; margin-right: 44px; }
.auth-card .auth-body { padding: 30px 34px 28px; }
.auth-card .brand-logo { filter: drop-shadow(0 8px 24px rgba(227, 0, 15, 0.35)); animation: authLogo 6s ease-in-out infinite; }
@keyframes authLogo { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(2deg); } }
.auth-header h2 { background: linear-gradient(90deg, #ffffff, #c7c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-form .form-control { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); transition: border-color .2s, box-shadow .2s; }
.auth-form .form-control:focus { border-color: #ff4d4d; box-shadow: 0 0 0 3px rgba(227, 0, 15, 0.22); }
.auth-form .btn-primary { background: var(--accent-gradient-primary); box-shadow: 0 10px 30px rgba(227, 0, 15, 0.35); transition: transform .2s, box-shadow .2s; }
.auth-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(227, 0, 15, 0.5); }
@media (max-width: 480px) { .auth-card { max-width: 94vw; } .auth-card .auth-body { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .auth-card, .auth-overlay::before, .auth-overlay::after, .auth-card .brand-logo { animation: none !important; } }