/* css/auth.css
   Écran de connexion (ÉTAPE 3) : saisie du username, bouton "Entrer".
   Design extrêmement simple, pas de gros formulaire (section 6). */

.screen-auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + var(--safe-top));
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(217, 114, 76, 0.12), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(232, 163, 61, 0.12), transparent 40%);
  animation: fade-in var(--duration-slow) var(--ease-standard);
}

.auth-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-logo .logo-text {
  font-size: var(--fs-3xl);
}

.auth-tagline {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  margin-top: calc(-1 * var(--space-4));
}

.auth-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form .field-input {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

.auth-footnote {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: 320px;
}