/* ==========================================================================
   Jura-Start - auth.css (connexion / inscription)
   ========================================================================== */

.js-auth { min-height: 100vh; display: flex; align-items: center; }
.js-auth-wrap { width: 100%; display: flex; justify-content: center; padding-top: calc(var(--js-nav-h) + 40px); padding-bottom: 60px; }
.js-auth-card {
  width: 100%; max-width: 480px; background: var(--js-white); color: var(--js-ink);
  border-radius: var(--js-radius-lg); padding: 44px 44px 40px; box-shadow: var(--js-shadow-lg);
}
.js-auth-head { text-align: center; margin-bottom: 26px; }
.js-auth-head .js-brand-mark { color: var(--js-amber); }
.js-auth-head .js-brand-mark svg { width: 40px; height: 40px; margin: 0 auto 14px; }
.js-auth-title { font-size: 1.9rem; }
.js-auth-sub { color: var(--js-ink-soft); font-size: 0.96rem; margin-top: 8px; }

.js-auth-tabs { display: flex; gap: 6px; background: var(--js-paper-warm); padding: 5px; border-radius: var(--js-pill); margin-bottom: 26px; }
.js-auth-tab { flex: 1; padding: 11px; border: 0; background: none; border-radius: var(--js-pill); font-weight: 600; font-size: 0.92rem; color: var(--js-ink-soft); transition: background 0.3s, color 0.3s; }
.js-auth-tab.is-active { background: var(--js-night); color: var(--js-paper); }

.js-auth-form { display: block; }
.js-auth-alt { text-align: center; margin-top: 16px; font-size: 0.9rem; }
.js-auth-alt a { color: var(--js-amber-deep); text-decoration: underline; }
.js-auth-legal { font-size: 0.82rem; color: var(--js-ink-soft); text-align: center; margin-top: 16px; }

/* La carte est blanche dans une section sombre : on force des champs clairs,
   sinon les champs heritent du style « champ sur fond noir » (texte blanc sur blanc). */
.js-auth-card .js-field input,
.js-auth-card .js-field select,
.js-auth-card .js-field textarea {
  background: var(--js-white); color: var(--js-ink); border-color: var(--js-line-strong);
}
.js-auth-card .js-field input::placeholder { color: var(--js-ink-soft); }

@media (max-width: 520px) {
  .js-auth-card { padding: 32px 26px 30px; }
}