/* Page de connexion du back-office : mêmes couleurs que l'interface (app.css), sans dépendre d'elle */
:root {
  --green: #337059;
  --green-deep: #264f40;
  --green-wash: #f0f6f3;
  --bg: #f4f7f5;
  --card: #ffffff;
  --ink: #14201b;
  --muted: #5b6963;
  --line: #dde5e0;
  --danger: #c0443f;
  --danger-wash: #fbeceb;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, var(--green-wash) 0%, var(--bg) 60%);
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 2px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 32px 32px; box-shadow: 0 1px 2px rgba(20, 32, 27, .06), 0 18px 50px rgba(20, 32, 27, .10);
  display: flex; flex-direction: column; gap: 16px;
}
.login-logo { height: 40px; width: auto; align-self: flex-start; }
.login h1 { margin: 6px 0 0; font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
.login-sub { margin: -10px 0 4px; color: var(--muted); }
.login-field { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: 13.5px; }
.login-field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 400; font-size: 15px;
}
.login-field input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.login-pw { position: relative; display: block; }
.login-pw input { padding-right: 92px; }
.login-show {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--green-wash); color: var(--green-deep);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 650; cursor: pointer;
}
.login-show:hover { background: color-mix(in srgb, var(--green) 14%, #fff); }
.login-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-wash); color: var(--danger); font-size: 14px; font-weight: 600; }
.login-submit {
  margin-top: 4px; padding: 13px 16px; border: 0; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 35%, transparent);
}
.login-submit:hover:not(:disabled) { background: var(--green-deep); }
.login-submit:disabled { opacity: .65; cursor: progress; }
@media (max-width: 420px) { .login-card { padding: 28px 20px 24px; } }