:root { --fond: #f6f7fb; --carte: #fff; --encre: #1b2233; --doux: #5b6478; --accent: #1f2a44; --alerte: #a3261b; --ok: #1d6b3a; --ligne: #dfe3ec; }
@media (prefers-color-scheme: dark) { :root { --fond: #111522; --carte: #1a2033; --encre: #eef1f8; --doux: #a8b0c3; --accent: #8fb0ff; --alerte: #ff8a7f; --ok: #79d39a; --ligne: #2c3550; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fond); color: var(--encre); }
header { display: flex; justify-content: space-between; align-items: center; padding: 16px; }
h1 { margin: 0; font-size: 1.4rem; }
main { padding: 0 16px 32px; max-width: 560px; margin: 0 auto; }
.carte, form#connexion { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
h2 { margin: 0 0 4px; font-size: 1.2rem; }
.etat { font-weight: 600; margin: 4px 0; }
.etat.service { color: var(--ok); } .etat.repos { color: var(--alerte); }
.traitement, small, .message { color: var(--doux); }
label { display: block; margin: 10px 0; }
fieldset { border: 1px solid var(--ligne); border-radius: 10px; margin: 10px 0; }
input[type=email], input[type=password], input[type=time] { font: inherit; padding: 8px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--fond); color: var(--encre); }
input[type=email], input[type=password], input[type=text] { width: 100%; }
button { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); margin: 4px 6px 4px 0; cursor: pointer; }
button.principal { background: var(--accent); color: var(--carte); font-weight: 600; }
button.discret { border-color: transparent; }
button:disabled { opacity: .5; }
.lumieres { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.lumieres p { margin: 0 0 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button { margin: 0; }
.erreur { color: var(--alerte); }
.journal { padding-left: 18px; color: var(--doux); font-size: .9rem; }