:root{--navy:#1f3864;--ink:#1c2433;--muted:#5d6778;--line:#dde2ea;--bg:#f4f6fa;--card:#fff;--accent:#2a5bd7;
--r1:#d64545;--r2:#e8c13a;--r3:#5dbb7a;--r4:#1e7a46;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1{font-size:1.5rem;margin:0 0 .25rem;letter-spacing:-.01em}h2{font-size:1.15rem;margin:0 0 .75rem}
p{margin:.25rem 0 1rem;color:var(--muted)}
label{display:block;font-weight:600;font-size:.875rem;margin:.9rem 0 .3rem}
input,select{width:100%;font:inherit;font-size:16px;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #9db8f5;outline-offset:1px}
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:.7rem 1.1rem;background:var(--accent);color:#fff;cursor:pointer;touch-action:manipulation}
button.sec{background:#e8ecf4;color:var(--ink)}button.danger{background:#fbe7e7;color:#9b2222}
button:disabled{opacity:.55;cursor:default}
@media(hover:hover){button:not(:disabled):hover{filter:brightness(.94)}}
a{color:var(--accent)}
.msg{padding:.7rem .9rem;border-radius:10px;font-size:.9rem;margin:.8rem 0;background:#e8f0ff;color:#173a8a}
.msg.err{background:#fbe7e7;color:#9b2222}.msg.ok{background:#e3f4ea;color:#14573a}
.link{background:none;color:var(--accent);padding:0;font-weight:500;text-decoration:underline}
/* page de connexion */
.auth{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}
.brand{background:var(--navy);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between}
.brand h1{font-size:2rem;line-height:1.15}.brand p{color:#c9d5ee;max-width:32ch}
.scale{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.8rem}
.scale span{display:flex;align-items:center;gap:.4rem}.scale .c0{background:#9aa3b2}.scale .c1{background:var(--r1)}.scale .c2{background:var(--r2)}.scale .c3{background:var(--r3)}.scale .c4{background:var(--r4)}
.scale i{width:14px;height:14px;border-radius:4px;display:inline-block}
.panel{display:flex;align-items:center;justify-content:center;padding:2rem}
.card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.75rem;box-shadow:0 8px 30px rgba(31,56,100,.07)}
.card button[type=submit]{width:100%;margin-top:1.1rem}
@media(max-width:800px){.auth{grid-template-columns:1fr}.brand{padding:1.5rem}.brand h1{font-size:1.4rem}.brand p{display:none}}
/* application */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100dvh}
.side{background:var(--navy);color:#fff;padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.side .who{font-size:.85rem;color:#c9d5ee;margin-bottom:1rem}
.side button{background:none;color:#dbe4f7;text-align:left;font-weight:500;padding:.6rem .75rem}
.side button[aria-current=true]{background:rgba(255,255,255,.14);color:#fff}
.side button:disabled{opacity:.45}
.side .out{margin-top:auto;background:rgba(255,255,255,.1)}
main{padding:1.5rem;max-width:980px;width:100%}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem;margin-bottom:1.25rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
.wrap{overflow-x:auto}
.tag{font-size:.75rem;padding:.15rem .5rem;border-radius:99px;background:#e8ecf4}
.tag.off{background:#fbe7e7;color:#9b2222}
td button{padding:.35rem .7rem;font-size:.8rem;margin-right:.3rem}
@media(max-width:768px){
 .shell{grid-template-columns:1fr;padding-bottom:4.5rem}
 .side{position:fixed;bottom:0;left:0;right:0;flex-direction:row;overflow-x:auto;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));z-index:5}
 .side .who{display:none}.side button{white-space:nowrap;text-align:center;padding:.6rem .8rem}.side .out{margin:0}
 .grid2{grid-template-columns:1fr}main{padding:1rem}}
@media(prefers-reduced-motion:no-preference){.card,.box{animation:in .25s ease-out}@keyframes in{from{opacity:0;transform:translateY(6px)}}}