body { font-family: Arial, sans-serif; background: #f5f7fa; margin: 0; }
.container {
    max-width: 400px;
    margin: 40px auto;
    background: #fff;
    padding: 2em;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
h1 { text-align: center; color: #2266aa; }
.login-box, .register-box { margin-bottom: 2em; }
form { display: flex; flex-direction: column; gap: 1em; }
input, button { padding: 0.7em; border-radius: 6px; border: 1px solid #ccc; }
button { background: #2266aa; color: #fff; border: none; cursor: pointer; transition: background 0.2s; }
button:hover { background: #114477; }
.encadre {
    background: #f8fafd;
    border: 1px solid #dde3ee;
    border-radius: 12px;
    padding: 2em 2em 1.5em 2em;
    max-width: 1000px;
    margin: 0 auto 2em auto;
    box-shadow: 0 4px 16px 0 #e7eaf3;
}

.table-align th, .table-align td,
#heuresTable th, #heuresTable td,
#agentsTable th, #agentsTable td {
    text-align: left;
    padding: 8px 12px;
    vertical-align: middle;
}
.error { color: #c00; text-align: center; margin-top: 0.5em; }
@media (max-width: 600px) {
    .container { max-width: 98vw; padding: 1em; }
    h1 { font-size: 1.4em; }
}