/*====================================================
                    LOGIN PAGE
====================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

.login-page{

    background:#f8f5ef;

}


/*====================================================
                    HERO
====================================================*/

.login-hero{

    min-height:calc(122vh - 220px);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:140px 20px 60px;

    background:
    url("../images/hero-login.webp")
    center center / cover no-repeat;

}


/*====================================================
                    CARD
====================================================*/

.login-card{

    width:100%;

    max-width:440px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(3px);

    border-radius:28px;

    padding:35px;

    box-shadow:0 20px 45px rgba(0,0,0,.20);

    text-align:center;

}


/*====================================================
                    LOGO
====================================================*/

.login-logo{

    width:120px;

    display:block;

    margin:0 auto 25px;

}


/*====================================================
                    TITRE
====================================================*/

.login-card h1{

    font-family:'Oswald',sans-serif;

    font-size:52px;

    color:var(--primary-dark);

    margin-bottom:15px;

    text-transform:uppercase;

    letter-spacing:2px;

}


.login-card p{

    color:var(--text);

    font-size:18px;

    margin-bottom:35px;

}


/*====================================================
                    FORM
====================================================*/

.form-group{

    margin-bottom:25px;

    text-align:left;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    color:var(--primary-dark);

    font-weight:600;

}

.form-group input{

    width:100%;

    padding:15px 18px;

    border-radius:14px;

    border:1px solid var(--border);

    background:#fff;

    font-size:16px;

    transition:.3s;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(126,150,105,.20);

}


/*====================================================
                    BUTTON
====================================================*/

.btn-login{

    width:100%;

    margin-top:15px;

    padding:16px;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.btn-login:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


/*====================================================
                    ERROR
====================================================*/

.login-error{

    background:#f9e3e0;

    color:#963e31;

    border-left:5px solid #963e31;

    padding:15px;

    border-radius:12px;

    margin-bottom:25px;

    text-align:left;

}


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

@media (max-width:768px){

    .login-card{

        max-width:400px;

        padding:30px;

    }

}

    .login-card h1{

        font-size:42px;

    }

}


/*====================================================
                    MOBILE
====================================================*/

@media (max-width:576px){

    .login-hero{

        min-height:calc(100vh - 80px);

        padding:20px 15px;

        align-items:center;

    }

    .login-card{

        max-width:360px;

        padding:22px;

        border-radius:22px;

    }

    .login-logo{

        width:70px;

        margin-bottom:15px;

    }

    .login-card h1{

        font-size:28px;

        margin-bottom:8px;

    }

    .login-card p{

        font-size:15px;

        margin-bottom:20px;

    }

    .form-group{

        margin-bottom:15px;

    }

    .form-group label{

        font-size:15px;

        margin-bottom:6px;

    }

    .form-group input{

        height:46px;

        padding:10px 14px;

        font-size:15px;

        border-radius:12px;

    }

    .btn-login{

        height:48px;

        font-size:16px;

        margin-top:10px;

    }

}


/*====================================================
                INSCRIPTION
====================================================*/


.register-card{

    max-width:520px;

}



/* Logo */

.login-logo img{

    max-width:130px;

}



/* Formulaire plus long */

.register-card form{

    margin-top:25px;

}





/* Espacement champs */

.register-card .form-group{

    margin-bottom:18px;

}





/* Bouton */

.register-card .login-btn{

    width:100%;

    margin-top:15px;

}





/* Message erreur */

.alert.error{

    background:#fbe8e7;

    color:#a94442;

    border:1px solid #e5b7b5;

    padding:12px 15px;

    border-radius:12px;

    margin-bottom:20px;

    text-align:center;

}





/* Retour connexion */

.login-footer{

    margin-top:25px;

    text-align:center;

}



.login-footer a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}



.login-footer a:hover{

    text-decoration:underline;

}






/*====================================================
                MOBILE
====================================================*/


@media(max-width:768px){



.register-card{

    width:90%;

    padding:30px 20px;

}



.register-card h1{

    font-size:1.8rem;

}



}