/* Page de connexion.
 *
 * Tout est confiné sous `.auth-login` : `.login-card` et `.fadeIn`, qu'utilisait
 * l'ancienne page, sont partagés par environ deux cents gabarits.
 *
 * Couleurs tirées des jetons `--premium-*`, qui basculent déjà entre clair et
 * sombre (theme_system.css). Seul le texte posé sur le bleu primaire a besoin
 * de son propre couple : en sombre le primaire devient #60a5fa, sur lequel un
 * texte blanc tomberait à environ 2,5:1.
 *
 * Points de rupture pris dans l'inventaire du design system (900, 480) — voir
 * apps/core/tests/test_ui_design_system_governance.py.
 */

.auth-login {
  --auth-bg: var(--premium-bg, #f7f9fc);
  --auth-card: var(--premium-card, #ffffff);
  --auth-fg: var(--premium-fg, #1a1a1a);
  --auth-muted: var(--premium-muted, #4b5563);
  --auth-border: var(--premium-border, #e6e9ef);
  --auth-primary: var(--premium-primary-500, #1f3c88);
  --auth-primary-hover: var(--premium-primary-600, #1a357a);
  --auth-on-primary: #ffffff;
  --auth-danger: #b4232f;
  --auth-danger-bg: #fdf2f3;
  --auth-danger-border: #f2c7cc;
  --auth-warn: #8a5300;
  --auth-warn-bg: #fff7e6;
  --auth-navy-1: var(--navxxxl-blue-1, #0a3d62);
  --auth-navy-2: var(--navxxxl-blue-3, #1b4f72);
  --auth-ring: rgba(31, 60, 136, .28);

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(78vh, 760px);
  padding: 40px 16px 56px;
  color: var(--auth-fg);
  /* Transparent : un fond propre se découpait en rectangle pâle à l'intérieur
     de `.page-container`, plus étroit que la page. */
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .auth-login {
    --auth-on-primary: #0b1220;
    --auth-danger: #ffb4bd;
    --auth-danger-bg: rgba(195, 0, 47, .16);
    --auth-danger-border: rgba(255, 180, 189, .35);
    --auth-warn: #ffd58a;
    --auth-warn-bg: rgba(255, 186, 73, .14);
    --auth-ring: rgba(96, 165, 250, .38);
  }
}

:is(html[data-theme="dark"], .theme-dark, body.theme-dark, .dark-mode, body.dark-mode) .auth-login {
  --auth-on-primary: #0b1220;
  --auth-danger: #ffb4bd;
  --auth-danger-bg: rgba(195, 0, 47, .16);
  --auth-danger-border: rgba(255, 180, 189, .35);
  --auth-warn: #ffd58a;
  --auth-warn-bg: rgba(255, 186, 73, .14);
  --auth-ring: rgba(96, 165, 250, .38);
}

/* ── Carte ─────────────────────────────────────────────────────────────── */

.auth-login__shell {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 960px;
  overflow: hidden;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 44px rgba(15, 23, 42, .10);
  animation: auth-login-entree .32s ease-out both;
}

@keyframes auth-login-entree {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-login__shell { animation: none; }
}

/* ── Panneau de marque ─────────────────────────────────────────────────── */

.auth-login__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--auth-navy-1), var(--auth-navy-2));
}

.auth-login__logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 5px;
  background: #ffffff;
  border-radius: 10px;
}

.auth-login__brand-text { min-width: 0; }

.auth-login__brand-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.auth-login__brand-tag {
  margin: 2px 0 0;
  font-size: .85rem;
  color: rgba(255, 255, 255, .82);
}

.auth-login__points { display: none; }

/* ── Neutralisation des styles génériques du socle ──────────────────────
   Mesuré dans le navigateur, pas supposé :
   - `main.page-content h1, main.page-content h2` (components_system.css,
     spécificité 0,1,2) centre le titre et le peint en dégradé sur texte
     transparent — en thème sombre, bleu foncé sur fond presque noir ;
   - `main.page-content a:not(…):not(…):not(…)` (spécificité 0,4,2) impose
     graisse 800, couleur, soulignement dégradé, marges et ombre au survol.
   Les deux battent une simple classe. `#loginCard`, propre à cette page,
   l'emporte sans déclaration forcée et sans toucher aux feuilles partagées. */

#loginCard .auth-login__title {
  text-align: left;
  color: var(--auth-fg);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

#loginCard .auth-login__forgot,
#loginCard .auth-login__forgot:hover {
  padding: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
#loginCard .auth-login__forgot { color: var(--auth-primary); }
#loginCard .auth-login__forgot:hover { color: var(--auth-primary-hover); }
#loginCard .auth-login__forgot:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 2px;
}

/* ── Panneau du formulaire ─────────────────────────────────────────────── */

.auth-login__panel {
  padding: 32px 24px 28px;
}

.auth-login__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--auth-fg);
}

.auth-login__lede {
  margin: 8px 0 24px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--auth-muted);
}

.auth-login__alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--auth-danger);
  background: var(--auth-danger-bg);
  border: 1px solid var(--auth-danger-border);
  border-left-width: 4px;
  border-radius: 10px;
}
.auth-login__alert p { margin: 0; }
.auth-login__alert ul { margin: 0; padding-left: 18px; }

.auth-login__form {
  display: grid;
  gap: 18px;
  margin: 0;
}

.auth-login__field { display: grid; gap: 6px; }

.auth-login__label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.auth-login__label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--auth-fg);
}

.auth-login__forgot { font-size: .88rem; }

/* 16 px minimum : en dessous, iOS agrandit la page à la prise de focus. */
.auth-login__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--auth-fg);
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* États ancrés sur `#loginCard` : en thème sombre, `dark_mode_patches.css`
   pose `input[type="text"]…` sous une portée de spécificité 0,2,2 qui
   ramenait la bordure d'erreur au gris neutre — mesuré rgb(43, 52, 66). */
#loginCard .auth-login__input:hover { border-color: var(--auth-muted); }
#loginCard .auth-login__input:focus {
  outline: none;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px var(--auth-ring);
}
#loginCard .auth-login__input[aria-invalid="true"] { border-color: var(--auth-danger); }

.auth-login__password { position: relative; }
.auth-login__password .auth-login__input { padding-right: 104px; }

/* Retrait de 2 px dans un champ de 48 : 44 px, seuil de cible tactile. */
.auth-login__reveal {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 88px;
  padding: 0 12px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--auth-primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.auth-login__reveal:hover { background: var(--auth-bg); }
.auth-login__reveal:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 1px;
}

.auth-login__capslock {
  margin: 2px 0 0;
  padding: 6px 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--auth-warn);
  background: var(--auth-warn-bg);
  border-radius: 8px;
}

.auth-login__field-error {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--auth-danger);
}

.auth-login__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--auth-on-primary);
  cursor: pointer;
  background: var(--auth-primary);
  border: 0;
  border-radius: 10px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.auth-login__submit:hover { background: var(--auth-primary-hover); }
.auth-login__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--auth-card), 0 0 0 6px var(--auth-primary);
}
.auth-login__submit[aria-busy="true"] {
  cursor: progress;
  opacity: .75;
}

.auth-login__help {
  margin: 22px 0 0;
  padding-top: 18px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--auth-muted);
  border-top: 1px solid var(--auth-border);
}

/* ── Grands écrans : deux colonnes ─────────────────────────────────────── */

@media (min-width: 900px) {
  .auth-login__shell { grid-template-columns: minmax(300px, 5fr) 7fr; }

  .auth-login__brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 48px 40px;
  }

  .auth-login__logo { width: 52px; height: 52px; margin-bottom: 22px; }
  .auth-login__brand-name { font-size: 1.45rem; }
  .auth-login__brand-tag { margin-top: 6px; font-size: .95rem; }

  .auth-login__points {
    display: grid;
    gap: 14px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
  }

  .auth-login__points li {
    position: relative;
    padding-left: 22px;
    font-size: .92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .9);
  }

  .auth-login__points li::before {
    position: absolute;
    top: .5em;
    left: 0;
    width: 8px;
    height: 8px;
    content: "";
    background: #7fb3e6;
    border-radius: 50%;
  }

  .auth-login__panel { padding: 52px 48px 44px; }
  .auth-login__title { font-size: 2rem; }
}

/* ── Petits téléphones ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .auth-login { padding: 16px 10px 32px; align-items: flex-start; }
  .auth-login__panel { padding: 26px 18px 22px; }
  .auth-login__title { font-size: 1.55rem; }
}