/* ===== Page de connexion Visa (même langage visuel que la HomeHero) =====
   Mise en page 2 colonnes et footer partagés → layout/auth-layout.css.
   Boîte case à cocher partagée → components/checkbox.css.
   Ce fichier ne contient que les styles propres à la page de connexion. */

/* min-height propre à la connexion ; modificateur de fondu.
   align-items: center (comme .register, register.css) : centre login__inner comme
   bloc (hauteur de contenu, pas étiré) dans la hauteur de la ligne — pas de stretch qui
   forcerait son propre centrage interne à s'appliquer sur toute la hauteur de la photo. */
.login {
    min-height: 60vh;
    align-items: center;

    /* Paysage mobile : le formulaire dépasse 60vh avec le clavier virtuel. */
    @media (max-height: 48em) and (orientation: landscape) {
        min-height: auto;
    }

    &.login--visible {
        opacity: 1;
    }
}

/* Contenu plafonné à 442px, comme .register__panel (register.css) — le conteneur
   .login__inner garde ses 4/10 de page (auth-layout.css), seul le panneau est limité.
   Le dépassement responsive (70rem) est géré dans auth-layout.css. */
.login__panel {
    max-width: 27.625rem; /* 442px (1rem = 16px) */
}

/* La photo s'ancre en haut de la colonne et conserve son ratio natif (idem register__photo). */
.login__photo {
    aspect-ratio: 1024 / 762;
    align-self: flex-start;
}

/* ===== Alerte d'erreur serveur (identifiants incorrects, lien expiré…) ===== */
/* La boîte (fond, bordure, icône) est fournie par .callout.callout--error (components/callout.css) ;
   .login__error (CssClass du partial _Callout) ne porte que la marge et les surcharges du contenu
   ValidationSummary. La classe est aussi ciblée par login.js (querySelector('.login__error')). */
.login__error {
    margin-bottom: var(--spacing-lg2);

    & p {
        margin: 0;
    }

    /* Neutralise le style global ValidationSummary (fond rouge + centrage). */
    & .validation-summary-errors {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }

    & .validation-summary-errors ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & .validation-summary-errors li {
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
    }

    & .validation-summary-errors li:first-child {
        margin-bottom: var(--spacing-xs3);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
    }

    /* Chaîné via .callout__content pour dépasser la spécificité de .callout--error .callout__content a
       (components/callout.css) — couleur alignée sur celle-ci (rouge) plutôt que la primaire. */
    & .callout__content .error-login-show-hide-anonymized {
        display: inline-block;
        margin-top: var(--spacing-xs4);
        color: var(--color-error);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-base);
        text-decoration: none;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* Panneau « En savoir plus… » (anonymisation CNIL) : dépliable via animation grid-template-rows. */
.login__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-accordion);
}

.login__more.is-open {
    grid-template-rows: 1fr;
}

.login__more-content {
    /* Pas de padding ici : un item de grille avec overflow:hidden ET padding ne collapse
       pas toujours à 0 (bug de rendu navigateur sur grid-template-rows: 0fr) — laisser cet
       élément « nu » garantit un collapse total ; le padding est reporté sur .login__more-inner. */
    overflow: hidden;
}

.login__more-inner {
    /* outline = 0.2rem + offset 0.2rem = 0.4rem ; le padding laisse de la place
       pour que l'anneau de focus des liens ne soit pas rogné par overflow. */
    padding: var(--spacing-xs2) var(--spacing-xs3) var(--spacing-xs3);
}

/* Indicateur « Verrouillage des majuscules » : popover ancré au-dessus du champ,
   masqué par défaut, affiché par login.js (.is-visible) quand focus + Caps Lock actif. */
.login-capslock {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--spacing-xs2));
    z-index: 5;
    box-sizing: border-box;
    max-width: 100%;
    align-items: center;
    gap: var(--spacing-xs4);
    padding: var(--spacing-xs2) var(--spacing-sm2);
    background: var(--color-text-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    box-shadow: var(--shadow-tooltip);

    &.is-visible {
        display: flex;
    }

    & svg {
        flex-shrink: 0;
        width: 1.6rem;
        height: 1.6rem;
    }

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 1.6rem;
        border: 0.6rem solid transparent;
        border-top-color: var(--color-text-primary);
    }

    @media (max-width: 38.75em) {
        font-size: 1.1rem;
        padding: var(--spacing-xs4) var(--spacing-sm);
        max-width: 22rem;
    }
}

/* ===== Options : « Se souvenir de moi » + « Mot de passe oublié » ===== */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm2);
    margin: var(--spacing-xs3) 0 var(--spacing-sm);

    @media (max-width: 38.75em) {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* Case à cocher « Se souvenir de moi » — wrapper uniquement.
   La boîte visuelle partagée (login-checkbox__box) ET la police/taille/couleur du texte
   sont dans checkbox.css. */
.login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs2);
    cursor: pointer;
}