/* ==========================================================================
   login.css : CSS propre à la page de connexion (/admin/connexion)
   Chargé EN PLUS de style.css, grâce à $page_css = 'login'.
   ========================================================================== */

/* Fond : deux halos colorés très doux, en bas à gauche et en haut à droite */
.page-login {
    background:
        radial-gradient(circle at 6% 94%, rgba(40, 101, 208, .14), transparent 34%),
        radial-gradient(circle at 94% 6%, rgba(232, 87, 127, .11), transparent 32%),
        var(--color-bg);
}

/* La zone de contenu centre la carte de connexion (Flexbox) */
.login-main {
    display: flex;
    align-items: center;              /* centrage vertical */
    justify-content: center;          /* centrage horizontal */
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-card h1 {
    margin-bottom: .35rem;
    text-align: center;
    font-size: 1.375rem;
}

.login-intro {
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: .9375rem;
    color: var(--color-muted);
}

.login-card .btn {
    width: 100%;
    margin-top: 1.5rem;
}

/* « Mot de passe oublié ? » sous le champ, et « Retour à la connexion » sous le bouton */
.login-forgot,
.login-back {
    display: block;
    width: fit-content;
    font-size: .875rem;
}
.login-forgot { margin: .5rem 0 0 auto; }
.login-back   { margin: 1.25rem auto 0; }

@media (min-width: 768px) {
    .login-card { padding: 2.5rem 2.25rem; }
}