/* ============================================================
   CLASSMIRROR LOGIN TABLET V5
   Compact PC / tablette / téléphone
   ============================================================ */


/* La bannière commerciale n'est pas utile sur /login */

body:has(.login-container)
#cm-top-banner,

body:has(.login-container)
#cm-top-banner-v2,

body:has(.login-container)
#cm-top-banner-v21-slot{
    display:none!important;
}


/* ============================================================
   TABLETTE PAYSAGE + TABLETTE CLASSIQUE
   701px -> 1100px
   ============================================================ */

@media
(min-width:701px)
and
(max-width:1100px){


    /*
     * Toute la connexion tient dans une zone compacte.
     */

    .login-section{
        display:flex!important;

        align-items:center!important;
        justify-content:center!important;

        min-height:
            calc(100svh - 72px)!important;

        padding:
            12px 14px 18px!important;
    }


    .login-container{
        width:
            min(
                960px,
                calc(100vw - 28px)
            )!important;

        max-width:960px!important;

        margin:
            0 auto!important;
    }


    /*
     * IMPORTANT :
     * on annule l'empilement V4 à 980px.
     *
     * Formulaire gauche + univers ClassMirror droite.
     */

    .login-layout{
        display:grid!important;

        grid-template-columns:
            minmax(315px,.90fr)
            minmax(345px,1.10fr)!important;

        min-height:
            min(
                610px,
                calc(100svh - 100px)
            )!important;

        align-items:stretch!important;
    }


    /* ========================================================
       FORMULAIRE
       ======================================================== */

    .login-form-panel{
        padding:
            25px
            28px
            22px!important;

        border-radius:
            24px
            0
            0
            24px!important;
    }


    .login-heading{
        margin-bottom:
            16px!important;
    }


    .login-heading h1{
        margin-bottom:
            6px!important;

        font-size:
            clamp(
                27px,
                3.5vw,
                34px
            )!important;

        line-height:
            1.06!important;
    }


    .login-heading p{
        font-size:
            12px!important;

        line-height:
            1.4!important;
    }


    /*
     * Logo / marque plus compact.
     */

    .login-brand,
    .login-logo,
    .login-branding{
        margin-bottom:
            12px!important;
    }


    .login-form,
    #login-form{
        gap:
            10px!important;
    }


    .login-form .form-group,
    #login-form .form-group{
        margin-bottom:
            10px!important;
    }


    .login-form label,
    #login-form label{
        margin-bottom:
            4px!important;

        font-size:
            11px!important;
    }


    .login-form input,
    #login-form input{
        min-height:
            43px!important;

        height:
            43px!important;

        padding:
            9px 12px!important;

        font-size:
            13px!important;

        border-radius:
            11px!important;
    }


    .login-form button[type="submit"],
    #login-form button[type="submit"]{
        min-height:
            44px!important;

        margin-top:
            5px!important;

        padding:
            9px 15px!important;

        font-size:
            13px!important;

        border-radius:
            11px!important;
    }


    /*
     * Mot de passe oublié / inscription :
     * visibles sans rallonger la page.
     */

    .login-links,
    .login-help,
    .login-secondary-links,
    .forgot-password,
    .register-link{
        margin-top:
            8px!important;

        font-size:
            10px!important;

        line-height:
            1.35!important;
    }


    /* ========================================================
       PANNEAU DROIT
       ======================================================== */

    .login-side{
        min-height:0!important;

        overflow:hidden!important;

        border-radius:
            0
            24px
            24px
            0!important;
    }


    .cm4-premium{
        display:flex!important;

        flex-direction:column!important;

        justify-content:center!important;

        min-height:100%!important;

        padding:
            25px
            24px
            21px!important;
    }


    .cm4-kicker{
        margin-bottom:
            5px!important;

        font-size:
            9px!important;
    }


    .cm4-title{
        margin:
            0 0 8px!important;

        font-size:
            clamp(
                30px,
                4vw,
                42px
            )!important;

        line-height:
            .98!important;
    }


    .cm4-desc{
        max-width:
            480px!important;

        margin-bottom:
            14px!important;

        font-size:
            11px!important;

        line-height:
            1.4!important;
    }


    /*
     * Les trois personnages sont compacts.
     */

    .cm4-personas{
        display:grid!important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;

        gap:
            7px!important;

        padding-top:
            8px!important;
    }


    .cm4-persona,
    .cm4-persona.lina-card,
    .cm4-persona.jad-card,
    .cm4-persona.maya-card{
        display:flex!important;

        flex-direction:column!important;

        align-items:center!important;
        justify-content:flex-start!important;

        min-height:
            125px!important;

        padding:
            10px 7px!important;

        text-align:center!important;

        transform:none!important;

        border-radius:
            15px!important;
    }


    .cm4-photo{
        width:
            54px!important;

        height:
            54px!important;

        margin:
            0 auto 7px!important;
    }


    .cm4-persona h3,
    .cm4-persona strong{
        margin:
            0 0 3px!important;

        font-size:
            11px!important;
    }


    .cm4-persona p{
        margin:
            0!important;

        font-size:
            8px!important;

        line-height:
            1.28!important;
    }


    /*
     * Décorations volumineuses masquées sur tablette.
     */

    .cm4-book-wrap,
    .cm4-book,
    .cm4-note,
    .cm4-hand,
    .cm4-star{
        display:none!important;
    }


    .login-side-footer{
        display:none!important;
    }

}


/* ============================================================
   TABLETTE PORTRAIT ÉTROITE
   ============================================================ */

@media
(min-width:701px)
and
(max-width:820px){


    .login-layout{
        grid-template-columns:
            minmax(300px,.98fr)
            minmax(330px,1.02fr)!important;
    }


    .login-form-panel{
        padding:
            22px
            22px
            19px!important;
    }


    .cm4-premium{
        padding:
            22px
            18px!important;
    }


    .cm4-title{
        font-size:
            31px!important;
    }


    .cm4-personas{
        grid-template-columns:
            1fr!important;

        gap:
            6px!important;
    }


    .cm4-persona,
    .cm4-persona.lina-card,
    .cm4-persona.jad-card,
    .cm4-persona.maya-card{
        display:grid!important;

        grid-template-columns:
            43px 1fr!important;

        min-height:
            58px!important;

        padding:
            7px 9px!important;

        text-align:left!important;
    }


    .cm4-photo{
        width:
            43px!important;

        height:
            43px!important;

        margin:
            0!important;
    }

}


/* ============================================================
   TELEPHONE
   <= 700 px
   ============================================================ */

@media(max-width:700px){


    .login-section{
        padding:
            10px 9px 24px!important;
    }


    .login-container{
        width:
            100%!important;

        max-width:
            470px!important;
    }


    .login-layout{
        display:block!important;

        min-height:auto!important;
    }


    .login-form-panel{
        padding:
            24px
            20px
            21px!important;

        border-radius:
            20px!important;
    }


    .login-heading{
        margin-bottom:
            14px!important;
    }


    .login-heading h1{
        font-size:
            29px!important;
    }


    /*
     * Sur téléphone on garde l'essentiel :
     * formulaire d'abord.
     */

    .login-side{
        margin-top:
            9px!important;

        border-radius:
            20px!important;
    }


    .cm4-premium{
        min-height:auto!important;

        padding:
            20px
            18px!important;
    }


    .cm4-title{
        font-size:
            30px!important;
    }


    .cm4-desc{
        margin-bottom:
            10px!important;

        font-size:
            10px!important;
    }


    .cm4-personas{
        display:none!important;
    }


    .cm4-book-wrap,
    .cm4-note,
    .cm4-hand,
    .cm4-star{
        display:none!important;
    }

}


/* ============================================================
   PETIT ÉCRAN EN HAUTEUR
   Ex. tablette paysage
   ============================================================ */

@media
(min-width:701px)
and
(max-height:720px){


    .login-section{
        min-height:auto!important;

        padding-top:
            8px!important;

        padding-bottom:
            8px!important;
    }


    .login-layout{
        min-height:
            530px!important;
    }


    .login-form-panel{
        padding-top:
            18px!important;

        padding-bottom:
            16px!important;
    }


    .login-heading{
        margin-bottom:
            10px!important;
    }


    .cm4-premium{
        padding-top:
            18px!important;

        padding-bottom:
            16px!important;
    }


    .cm4-desc{
        margin-bottom:
            8px!important;
    }

}