/*
 * Pages d'authentification : tenir sans ascenseur sur les ecrans bas.
 *
 * Sur un portable (1366 x 768, moins la barre du navigateur), la connexion
 * depassait de 120 a 250 px : marges proportionnelles a la hauteur, logo de
 * 90 px, grands intervalles. Rien ne change sur un grand ecran ; sous 900 px
 * de haut l'ensemble se resserre, sous 760 px il se resserre encore et les
 * elements secondaires se replient.
 *
 * Chargee apres les styles propres a chaque page (layouts/base) : memes
 * selecteurs, donc elle l'emporte. Colonnes cote a cote seulement (au-dessus
 * de 1060 px de large) : en une colonne, la page defile naturellement.
 */

@media (min-width: 1061px) and (max-height: 900px) {
    .mesrs-panel, .auth-panel, .reset-panel, .otp-panel {
        padding-top: clamp(0.9rem, 3vh, 1.8rem);
        padding-bottom: clamp(0.9rem, 3vh, 1.8rem);
    }

    .mesrs-logo-block, .auth-logo-block, .reset-logo-block, .otp-logo-block {
        margin-bottom: 0.9rem;
        padding-bottom: 0.8rem;
    }
    .mesrs-logo-block img, .auth-logo-block img, .reset-logo-block img, .otp-logo-block img {
        max-height: 74px;
    }

    .mesrs-brand { margin-bottom: 0.7rem; }
    .reset-badge, .auth-badge, .otp-badge { margin-bottom: 0.6rem; }

    .mesrs-title, .auth-title, .reset-title, .otp-title {
        font-size: clamp(1.3rem, 1.75vw, 1.7rem);
    }
    .mesrs-subtitle {
        margin-top: 0.45rem;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        line-height: 1.45;
    }
    .auth-sub, .reset-sub, .otp-sub {
        margin: 0.45rem 0 0.7rem;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .mesrs-form, .auth-form, .reset-form, .otp-form {
        gap: 0.65rem;
        margin-top: 0.35rem;
    }
    .mesrs-field label, .auth-field label, .reset-field label, .otp-field label {
        margin-bottom: 0.3rem;
    }
    .mesrs-field input, .auth-field input, .reset-field input, .otp-field input {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .mesrs-submit, .auth-submit, .reset-submit, .otp-submit {
        padding-top: 0.68rem;
        padding-bottom: 0.68rem;
    }

    .mesrs-alert, .auth-alert, .reset-alert, .otp-alert {
        margin-bottom: 0.6rem;
        padding: 0.55rem 0.8rem;
    }

    .mesrs-portal-switch { margin-top: 0.4rem; }
    .mesrs-footnote {
        margin-top: 0.6rem;
        padding-top: 0.5rem;
        font-size: 0.78rem;
        line-height: 1.4;
    }
    .auth-foot { margin-top: 0.7rem; padding-top: 0.5rem; font-size: 0.78rem; }
    .auth-links, .reset-links { margin-top: 0.5rem; }
    .otp-back { margin-top: 0.7rem; }

    .reset-strength { padding: 0.5rem 0.7rem; }
    .reset-strength__row { margin-bottom: 0.35rem; }
    .reset-strength__tips { margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.4; }
}

@media (min-width: 1061px) and (max-height: 760px) {
    .mesrs-logo-block, .auth-logo-block, .reset-logo-block, .otp-logo-block {
        margin-bottom: 0.6rem;
        padding-bottom: 0.55rem;
    }
    .mesrs-logo-block img, .auth-logo-block img, .reset-logo-block img, .otp-logo-block img {
        max-height: 58px;
    }

    .mesrs-title, .auth-title, .reset-title, .otp-title { font-size: 1.3rem; }

    /* Le sous-titre repete ce que dit le panneau voisin : il cede la place
       au formulaire. Les mentions legales restent. */
    .mesrs-subtitle { display: none; }
    .mesrs-title { margin-bottom: 0.7rem; }
    .mesrs-brand { margin-bottom: 0.5rem; }
    .mesrs-footnote + .mesrs-footnote { margin-top: 0.3rem; border-top: 0; padding-top: 0; }

    /* Conseils de mot de passe : la jauge et son verdict suffisent ; les
       regles s'affichent de toute facon si la saisie est refusee. */
    .reset-strength__tips { display: none; }
}

/* Tres bas (petit portable, fenetre non maximisee) : derniers millimetres. */
@media (min-width: 1061px) and (max-height: 640px) {
    .mesrs-panel, .auth-panel, .reset-panel, .otp-panel {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .mesrs-form, .auth-form, .reset-form, .otp-form { gap: 0.5rem; }
    .mesrs-logo-block img, .auth-logo-block img, .reset-logo-block img, .otp-logo-block img { max-height: 48px; }
}