/* ============================================================
   CLASSMIRROR LOGIN COMPACT V5.1
   ============================================================ */


/* ============================================================
   BASE DESKTOP
   ============================================================ */

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

    padding:
        16px 18px
        24px!important;

    align-items:flex-start!important;
}


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

    margin:
        0 auto!important;
}


.login-layout{
    display:grid!important;

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

    gap:12px!important;

    min-height:570px!important;

    align-items:stretch!important;
}


/* ============================================================
   PANNEAU GAUCHE
   ============================================================ */

.login-form-panel{
    padding:
        28px 38px
        24px!important;

    border-radius:
        24px!important;
}


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


.login-heading .badge{
    padding:
        5px 11px!important;

    font-size:
        11px!important;
}


.login-heading h1{
    margin:
        11px 0 5px!important;

    font-size:
        35px!important;

    line-height:
        1.02!important;
}


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

    line-height:
        1.38!important;
}


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


.login-field{
    gap:
        5px!important;
}


.login-field label{
    font-size:
        11px!important;
}


.login-input{
    min-height:
        44px!important;

    height:
        44px!important;

    padding:
        9px 12px!important;

    font-size:
        13px!important;

    border-radius:
        11px!important;
}


.cm-v4-password-row,
.cm-v3-password-label-row{
    gap:
        8px!important;
}


.cm-v4-password-row a,
.cm-v3-password-label-row a{
    font-size:
        10px!important;
}


.login-submit{
    min-height:
        46px!important;

    margin-top:
        2px!important;

    font-size:
        13px!important;

    border-radius:
        12px!important;
}


.login-submit::after{
    font-size:
        20px!important;
}


.login-register{
    margin:
        13px 0 0!important;

    padding:
        11px 0 0!important;

    font-size:
        12px!important;
}


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

.login-side{
    min-height:570px!important;

    border-radius:
        24px!important;

    overflow:hidden!important;
}


.cm4-premium{
    grid-template-columns:
        minmax(300px,1fr)
        225px!important;

    gap:
        16px!important;

    min-height:
        570px!important;

    padding:
        29px 25px
        22px 32px!important;
}


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

    font-size:
        9px!important;
}


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

    line-height:
        .98!important;
}


.cm4-description{
    margin:
        12px 0 10px!important;

    font-size:
        12px!important;

    line-height:
        1.4!important;
}


/* bénéfices */

.cm4-benefits{
    gap:
        0!important;
}


.cm4-benefit{
    grid-template-columns:
        38px 1fr!important;

    gap:
        9px!important;

    padding:
        5px!important;
}


.cm4-icon{
    width:
        38px!important;

    height:
        38px!important;

    font-size:
        16px!important;
}


.cm4-benefit strong{
    font-size:
        12px!important;
}


.cm4-benefit small{
    font-size:
        9px!important;

    line-height:
        1.25!important;
}


/* ============================================================
   LINA / JAD / MAYA
   ============================================================ */

.cm4-personas{
    gap:
        9px!important;

    padding-top:
        25px!important;
}


.cm4-persona{
    grid-template-columns:
        55px 1fr!important;

    gap:
        9px!important;

    min-height:
        78px!important;

    padding:
        8px 10px!important;

    transform:none!important;

    border-radius:
        17px!important;
}


.cm4-persona.lina-card,
.cm4-persona.jad-card,
.cm4-persona.maya-card{
    transform:none!important;
}


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

    height:
        55px!important;
}


.cm4-persona-badge{
    display:none!important;
}


/*
 * On retire les décorations responsables
 * du grand encombrement observé.
 */

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


/* ============================================================
   TABLETTE
   ============================================================ */

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


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


    .login-container{
        width:
            calc(100vw - 20px)!important;

        max-width:
            980px!important;
    }


    .login-layout{
        grid-template-columns:
            minmax(300px,.90fr)
            minmax(370px,1.10fr)!important;

        gap:
            9px!important;

        min-height:
            520px!important;
    }


    .login-form-panel{
        padding:
            21px
            23px
            18px!important;
    }


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


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


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


    .login-input{
        min-height:
            41px!important;

        height:
            41px!important;
    }


    .login-submit{
        min-height:
            43px!important;
    }


    .login-side{
        min-height:
            520px!important;
    }


    .cm4-premium{
        grid-template-columns:
            minmax(210px,1fr)
            135px!important;

        gap:
            9px!important;

        min-height:
            520px!important;

        padding:
            20px
            15px
            17px!important;
    }


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


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

        font-size:
            10px!important;
    }


    .cm4-benefit{
        grid-template-columns:
            32px 1fr!important;

        gap:
            6px!important;
    }


    .cm4-icon{
        width:
            32px!important;

        height:
            32px!important;

        font-size:
            14px!important;
    }


    .cm4-benefit strong{
        font-size:
            10px!important;
    }


    .cm4-benefit small{
        display:none!important;
    }


    .cm4-personas{
        gap:
            6px!important;

        padding-top:
            10px!important;
    }


    .cm4-persona{
        display:flex!important;

        flex-direction:column!important;

        align-items:center!important;

        min-height:
            100px!important;

        padding:
            7px!important;

        text-align:center!important;
    }


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

        height:
            45px!important;
    }


    .cm4-persona p{
        display:none!important;
    }

}


/* ============================================================
   TELEPHONE
   ============================================================ */

@media(max-width:760px){


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


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

        max-width:
            470px!important;
    }


    .login-layout{
        display:block!important;

        min-height:
            auto!important;
    }


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

        border-radius:
            20px!important;
    }


    /*
     * Sur téléphone :
     * priorité absolue à la connexion.
     */

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


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

}


/* ============================================================
   PETITE HAUTEUR
   ============================================================ */

@media
(min-width:761px)
and
(max-height:760px){


    .login-section{
        padding-top:
            6px!important;

        padding-bottom:
            6px!important;
    }


    .login-layout,
    .login-side,
    .cm4-premium{
        min-height:
            500px!important;
    }


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

        padding-bottom:
            15px!important;
    }


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


    .login-heading .badge{
        display:none!important;
    }


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


    .cm4-description{
        margin:
            6px 0!important;
    }

}