*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial;
}


body{
    background:#f5f7fb;
}


.login-container{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


.login-card{

    background:white;

    width:380px;

    padding:30px;

    border-radius:15px;

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

}


.login-card h2{

    text-align:center;

    color:#0d6efd;

    margin-bottom:10px;

}


.login-card h3{

    text-align:center;

    margin-bottom:25px;

}


.login-card input{

    width:100%;

    padding:12px;

    margin-bottom:20px;

    border-radius:8px;

    border:1px solid #ddd;

}


.login-card button{

    width:100%;

    padding:12px;

    background:#0d6efd;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

}


.message{

    color:red;

    text-align:center;

    margin-bottom:15px;

}

/* ESPACE EMPLOYE */
.employe-container{

min-height:100vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}


.profil{

background:white;

padding:25px;

border-radius:15px;

text-align:center;

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

width:350px;

}


.profil img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

}


.profil h2{

margin:15px 0;

color:#0d6efd;

}



.camera-box{

margin-top:25px;

background:white;

padding:25px;

border-radius:15px;

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

text-align:center;

}


.camera-box video{

width:320px;

height:240px;

background:black;

border-radius:10px;

}



.camera-box button{

padding:12px 20px;

margin:15px 5px;

border:none;

border-radius:8px;

color:white;

cursor:pointer;

}


.btn-arrivee{

background:#198754;

}


.btn-depart{

background:#dc3545;

}


.deconnexion{

margin-top:20px;

color:red;

text-decoration:none;

}

.btn-arrivee,
.btn-depart {
    display: block;
    margin: 0 auto 16px auto; /* espace entre les deux boutons */
}