/* ============================================================
   CLASSMIRROR LOGIN COMPACT V5.2
   Objectif : login complet visible sans scroll
   ============================================================ */


/* ------------------------------------------------------------
   PAGE
------------------------------------------------------------ */

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

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


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

    margin:
        0 auto!important;
}


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

    max-height:
        calc(100vh - 145px)!important;

    align-items:stretch!important;
}


/* ------------------------------------------------------------
   GAUCHE
------------------------------------------------------------ */

.login-form-panel{
    padding:
        20px 38px
        17px!important;
}


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


.login-heading .badge{
    padding:
        4px 10px!important;

    font-size:
        10px!important;
}


.login-heading h1{
    margin:
        7px 0 3px!important;

    font-size:
        31px!important;

    line-height:
        1!important;
}


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

    line-height:
        1.3!important;
}


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


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


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


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

    height:
        39px!important;

    padding:
        7px 11px!important;

    font-size:
        12px!important;
}


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


/* mémoriser */

.login-remember,
.remember-email,
.remember-row{
    margin:
        6px 0!important;

    font-size:
        10px!important;
}


/* message sécurité */

.login-security,
.security-note,
.password-security-note{
    min-height:auto!important;

    margin:
        6px 0!important;

    padding:
        9px 11px!important;

    font-size:
        10px!important;
}


/* bouton */

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

    height:
        41px!important;

    margin-top:
        2px!important;

    font-size:
        12px!important;
}


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


/* inscription */

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

    padding:
        8px 0 0!important;

    font-size:
        10px!important;
}


/* ------------------------------------------------------------
   DROITE
------------------------------------------------------------ */

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

    max-height:
        calc(100vh - 145px)!important;
}


.cm4-premium{
    min-height:
        500px!important;

    max-height:
        calc(100vh - 145px)!important;

    grid-template-columns:
        minmax(285px,1fr)
        215px!important;

    gap:
        13px!important;

    padding:
        22px
        21px
        15px
        29px!important;
}


/* titre */

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


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

    line-height:
        .96!important;
}


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

    font-size:
        10px!important;

    line-height:
        1.32!important;
}


/* ------------------------------------------------------------
   AVANTAGES
------------------------------------------------------------ */

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


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

    gap:
        7px!important;

    padding:
        3px 4px!important;

    min-height:
        47px!important;
}


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

    height:
        32px!important;

    font-size:
        14px!important;
}


.cm4-benefit strong{
    margin-bottom:
        0!important;

    font-size:
        10px!important;

    line-height:
        1.15!important;
}


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

    line-height:
        1.17!important;
}


/* ------------------------------------------------------------
   LINA / JAD / MAYA
------------------------------------------------------------ */

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

    padding-top:
        15px!important;
}


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

    gap:
        7px!important;

    min-height:
        67px!important;

    padding:
        6px 8px!important;

    border-radius:
        15px!important;
}


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

    height:
        47px!important;
}


.cm4-persona h3,
.cm4-persona strong{
    font-size:
        11px!important;

    line-height:
        1.05!important;
}


.cm4-persona p{
    margin-top:
        2px!important;

    font-size:
        8px!important;

    line-height:
        1.18!important;
}


.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:
            6px 8px!important;
    }


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


    .login-layout{
        grid-template-columns:
            minmax(285px,.92fr)
            minmax(350px,1.08fr)!important;

        min-height:
            470px!important;

        max-height:none!important;
    }


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


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


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

        max-height:none!important;
    }


    .cm4-premium{
        min-height:
            470px!important;

        max-height:none!important;

        grid-template-columns:
            minmax(205px,1fr)
            125px!important;

        padding:
            16px
            13px!important;
    }


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


    .cm4-description{
        font-size:
            9px!important;
    }


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

        min-height:
            40px!important;
    }


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

        height:
            28px!important;
    }


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


    .cm4-personas{
        padding-top:
            7px!important;
    }


    .cm4-persona{
        min-height:
            72px!important;

        padding:
            5px!important;
    }


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

        height:
            40px!important;
    }

}


/* ------------------------------------------------------------
   PETITE HAUTEUR PC / TABLETTE
------------------------------------------------------------ */

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

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


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


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


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


    .cm4-benefit{
        min-height:
            41px!important;
    }

}


/* ------------------------------------------------------------
   TELEPHONE
------------------------------------------------------------ */

@media(max-width:760px){

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


    .login-layout{
        display:block!important;

        max-height:none!important;
    }


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

}


/* ============================================================
   CLASSMIRROR_LOGIN_FIELDS_CLEAN_V521
   Champs propres : pas d'enveloppe, pas de cadenas.
   L'oeil du mot de passe est conservé.
   ============================================================ */


/* Email : suppression enveloppe */

#login-form #email{

    background-image:
        none!important;

    background-repeat:
        no-repeat!important;

    padding-left:
        12px!important;

    padding-right:
        12px!important;
}


/* Mot de passe : suppression cadenas gauche */

#login-form .password-wrapper::before{

    content:
        none!important;

    display:
        none!important;

    background:
        none!important;
}


/* Mot de passe :
   espace normal à gauche,
   espace réservé uniquement pour l'oeil à droite.
 */

#login-form #password{

    padding-left:
        12px!important;

    padding-right:
        52px!important;
}


/* Oeil : reste bien centré à droite */

#login-form .password-toggle{

    right:
        8px!important;

    top:
        50%!important;
}


/* ============================================================
   CLASSMIRROR_LOGIN_FIELDS_CLEAN_V521_END
   ============================================================ */