/* Page de connexion — charte UMS (rouge #CC3333, anthracite #24282B) */
:root {
  --red: #CC3333;
  --red-dark: #A82828;
  --red-tint: #FBEDED;
  --ink: #24282B;
  --ink-2: #3A3F44;
  --slate: #5B6268;
  --muted: #8A9197;
  --silver: #C9CED2;
  --border: #DDE1E4;
  --bg: #F5F6F7;
  --ok-bg: #E6F2EA;
  --ok-ink: #1F6B3E;
  --warn-ink: #8A5A00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fond plein écran : illustration UMS ---------- */
.login {
  min-height: 100vh; position: relative;
  background: #F2F3F5 url("../../images/bg_ums.png") center top / cover no-repeat;
}

.login-panel {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 48px 16px;
}

/* ---------- Carte centrée ---------- */
.login-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px;
  padding: 40px 36px 32px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(36, 40, 43, 0.06), 0 24px 60px -16px rgba(36, 40, 43, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade-in 0.35s ease-out both;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Le logo est déjà dans l'illustration : on ne l'affiche dans la carte que sur mobile */
.login-card-logo { display: none; height: 38px; width: auto; align-self: center; margin-bottom: 4px; }
.login-eyebrow {
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--red);
}
.login-title { margin: -10px 0 0; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.3px; }
.login-sub { margin: -10px 0 6px; font-size: 15px; color: var(--slate); }

.login-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: 8px; background: var(--red-tint); color: var(--red-dark);
  font-size: 14px; line-height: 1.4;
}
.login-alert.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.login-alert svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.login-input { position: relative; }
.login-field input {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input::placeholder { color: var(--muted); }
.login-field input:hover { border-color: var(--silver); }
.login-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.12); }
.login-field input[aria-invalid="true"] { border-color: var(--red); }
/* Remplissage automatique du navigateur : garde le fond blanc au lieu du bleu par défaut */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--ink);
}
.login-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(204, 51, 51, 0.12); }
.login-error { margin: 0; font-size: 13px; color: var(--red-dark); }

.login-password input { padding-right: 48px; }
.login-show {
  position: absolute; right: 4px; top: 4px; width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.login-show svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-show .icon-hide { display: none; }
.login-show[aria-pressed="true"] .icon-show { display: none; }
.login-show[aria-pressed="true"] .icon-hide { display: block; }
.login-show:hover, .login-show:focus-visible { color: var(--ink); background: var(--bg); outline: none; }

.login-caps { display: none; margin: 0; font-size: 13px; font-weight: 600; color: var(--warn-ink); }
.login-caps.is-on { display: block; }

.login-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; margin-top: 4px; border: 0; border-radius: 8px;
  background: var(--red); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(204, 51, 51, 0.8);
  transition: background 0.15s;
}
.login-submit:hover { background: var(--red-dark); }
.login-submit:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.login-submit[aria-busy="true"] { cursor: progress; background: var(--red-dark); }
.login-submit[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px; line-height: 1.45;
}
.login-note svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.login-footer {
  margin: 0; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); font-size: 13px; color: var(--slate);
}

/* Mobile : l'illustration serait trop rognée, on garde un fond uni et le logo dans la carte */
@media (max-width: 860px) {
  .login { background: var(--bg); }
  .login-panel { justify-content: flex-start; padding-top: 32px; }
  .login-card { padding: 32px 22px 24px; }
  .login-card-logo { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}