/* =====================================================================
   pages/auth.css — connexion, installation, mot de passe oublié
   Carte centrée, halo orange très subtil derrière la carte.
   ===================================================================== */

.page-auth::before {
  background:
    radial-gradient(38% 32% at 50% 38%, rgba(223, 99, 58, 0.14), transparent 70%),
    radial-gradient(40% 35% at 15% 10%, rgba(223, 99, 58, 0.06), transparent 70%),
    radial-gradient(45% 40% at 85% 85%, rgba(140, 150, 170, 0.06), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, #121214, transparent 100%);
}

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  padding: var(--s6) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
}

.auth-carte {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  width: min(400px, 100%);
  padding: var(--s6);
  background: rgba(22, 22, 24, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--shadow);
}
.auth-carte:hover { border-color: var(--border); }

@media (max-width: 479px) {
  .auth-carte { padding: var(--s5); }
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  align-self: flex-start;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.auth-logo:hover { color: var(--text); }
.auth-logo-marque {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  color: #fff;
  box-shadow: 0 6px 20px rgba(223, 99, 58, 0.35);
}

.auth-entete h1 { font-size: var(--fs-xl); }
.auth-entete p { margin-top: var(--s2); color: var(--text-2); font-size: var(--fs-sm); }

.auth-form { display: flex; flex-direction: column; gap: var(--s4); }
.auth-form .btn-principal { margin-top: var(--s2); height: 48px; font-size: var(--fs-md); }

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.auth-lien-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.auth-lien-retour:hover { color: var(--text); }

.auth-pied { letter-spacing: 0.04em; }

/* Lien de debug (APP_ENV=dev uniquement) */
.debug-lien {
  padding: var(--s3) var(--s4);
  border: 1px dashed rgba(255, 214, 10, 0.4);
  border-radius: var(--radius);
  background: rgba(255, 214, 10, 0.06);
  font-size: var(--fs-xs);
  word-break: break-all;
}
.debug-lien strong { display: block; margin-bottom: var(--s1); color: var(--warning); font-size: var(--fs-xs); }