/* ---------- Connexion à l'administration ---------- */

.login-page {
    background:
        radial-gradient(60rem 40rem at 85% -10%, var(--night-2), transparent 70%),
        var(--night);
    color: var(--ink);
}

.login {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1.5rem;
    padding: 2.5rem var(--gutter);
}

.login-brand { margin: 0; }
.login-brand .brand { color: var(--night-text); font-size: 1.75rem; }
.login-brand .brand svg { width: 1.75rem; height: 1.75rem; }
.login-brand .brand svg rect:last-child { fill: var(--signal); }
.login-brand .brand:focus-visible { outline-color: var(--signal); }

.login-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.45);
}
@media (min-width: 30rem) { .login-card { padding: 2.5rem 2.25rem; } }

.login-card h1 { font-size: var(--step-2); letter-spacing: -0.03em; }
.login-intro { margin: 0.5rem 0 1.5rem; color: var(--slate); font-size: var(--step--1); }

.login-card .form-alert,
.login-notice { margin: 0 0 1.25rem; font-size: var(--step--1); }
.login-notice {
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.login-card .form { gap: 1.1rem; }
.login-card .btn { width: 100%; margin-top: 0.4rem; }
.login-card .btn:disabled { opacity: 0.7; cursor: progress; }

.password-field { position: relative; }
.password-field input { padding-right: 6rem; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    cursor: pointer;
}
.password-toggle:hover { background: var(--paper-2); color: var(--accent-ink); }
.password-toggle:focus-visible { outline-offset: 0; }

.login-back { margin: 0; font-size: var(--step--1); }
.login-back a { color: var(--night-muted); text-decoration: none; }
.login-back a:hover { color: var(--night-text); text-decoration: underline; }
.login-back a:focus-visible { outline-color: var(--signal); }