/* Styles déplacés depuis templates/partials/auth_split_styles.html — même ordre de chargement qu'avant */

/* ── Connexion / inscription plein écran : photo à gauche, formulaire à droite ── */
body { background: var(--ab-canvas); }

.login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Panneau photo — s'étire sur toute la hauteur du formulaire */
.login-visual {
  position: relative;
  overflow: hidden;
  background: #1a1a1a center / cover no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
}
.login-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.60) 60%, rgba(0,0,0,.90) 100%);
}
.login-visual > * { position: relative; z-index: 1; }
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}
.login-brand img { height: 48px; width: auto; filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.login-brand:hover { color: #fff; }
.login-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 16px;
  max-width: 12ch;
}
.login-headline span { font-style: italic; color: var(--ab-primary); white-space: nowrap; }
.login-tagline { font-size: 18px; opacity: .92; margin: 0; max-width: 40ch; }

/* Panneau formulaire */
.login-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 96px 24px 48px;
}
.login-back {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-ink);
  text-decoration: none;
  border: 1px solid var(--ab-hairline);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .15s;
}
.login-back:hover { background: var(--ab-surface-soft); color: var(--ab-ink); }
.login-form-wrap { width: 100%; max-width: 420px; }
.login-mobile-brand { display: none; }
.login-panel .auth-title { font-family: var(--font-display); font-size: 26px; }
.login-panel .auth-subtitle { font-size: 15px; }
.login-panel .lc-alert { font-size: 14px; }

@media (max-width: 991.98px) {
  .login-split { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { padding: 88px 16px 40px; align-items: flex-start; }
  .login-mobile-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .login-mobile-brand img { height: 60px; width: auto; }
}

/* ── Pages « mot de passe oublié » et erreurs de connexion (templates/auth-base.html) ── */
.auth-state {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.auth-state--info   { background: var(--cl-info-bg);   color: var(--cl-info); }
.auth-state--ok     { background: var(--cl-ok-bg);     color: var(--cl-ok); }
.auth-state--warn   { background: var(--cl-warn-bg);   color: var(--cl-warn); }
.auth-state--danger { background: var(--cl-danger-bg); color: var(--ab-error); }
.auth-steps { display: grid; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; text-align: left; }
.auth-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ab-body); }
.auth-steps i { color: var(--ab-muted); font-size: 16px; line-height: 1.4; }
.auth-field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ab-error); }
.auth-hint { margin-top: 6px; font-size: 13px; color: var(--ab-muted); }
.login-panel .btn-lc-primary.auth-submit, .login-panel .btn-lc-outline.auth-submit { width: 100%; justify-content: center; gap: 8px; }