header{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    text-align: center;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    padding: 20px;
}

header>img{
    height: 70px;
}

.connexion{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 300px 0;
    width: 100vw;
}

.connexion>h1{
    text-align: center;
}

.btnBackOffice{
    font-size: 20px;
    border: none;
    color: var(--mainColor);
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid var(--mainColor);
    cursor: pointer;
    margin-top: 50px;
    transition: 0.5s;
}

.btnBackOffice:hover{
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 50%);
}

.btnConnexion{
    font-size: 20px;
    border: none;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    background: var(--mainColor);
    cursor: pointer;
    margin-top: 50px;
    transition: 0.5s;
}

.btnConnexion:hover{
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 50%);
}

.errorConnexion{
    display: none;
    width: 100%;
    text-align: center;
    color: rgb(201, 0, 0);
}