:root{--ink:#1b1f3b;--bg:#edf0f5;--card:#fff;--line:#d9dee8;--muted:#667085;
  --live:#e5322d;--rec:#0f7c80;--red:#d92d20;--orange:#c77700;--blue:#3454d1;--green:#1a7f45;--grey:#667085}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--blue)} :focus-visible{outline:3px solid #8ba3ff;outline-offset:2px}
.top{background:var(--ink);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:10px 28px}
.top a{color:#fff;text-decoration:none}
.brand{font-weight:800;font-size:23px;letter-spacing:-.03em}.brand b{color:var(--live)}.brand img{height:38px;display:block}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{padding:6px 13px;border-radius:8px;opacity:.78}.top nav a:hover,.top nav a.on{background:rgba(255,255,255,.14);opacity:1}
.me{font-size:14px;opacity:.85}
main{max-width:1200px;margin:0 auto;padding:26px 24px 60px}
h1{font-size:30px;letter-spacing:-.03em;margin:0 0 20px;line-height:1.15}
h2{font-size:18px;margin:0 0 12px}h3{font-size:15px;margin:22px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:18px}
.narrow{max-width:560px}.narrow.wide{max-width:760px}
.muted{color:var(--muted)}.big{font-size:19px;font-weight:600;margin:4px 0 12px}.err{color:var(--red)}
.hero{border-left:6px solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
a.show{color:inherit;text-decoration:none;display:block;margin:0}a.show:hover{border-color:var(--ink)}
.livetxt{color:var(--live)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}@media(max-width:900px){.cols{grid-template-columns:1fr}}
/* bulles d'alerte */
.bubbles{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.bubble{display:block;padding:11px 18px 11px 20px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;border:1px solid;position:relative}
.bubble::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:11px;background:currentColor}
.bubble.red{background:#fdecea;color:var(--red);border-color:#f6b8b2}
.bubble.orange{background:#fff3dc;color:var(--orange);border-color:#f2d08c}
.bubble.blue{background:#e8eeff;color:var(--blue);border-color:#bccbff}
.bubble.green{background:#e6f5ec;color:var(--green);border-color:#a9dcbd}
/* tableaux, formulaires */
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:13px;color:var(--muted);font-weight:600}
.users input,.users select{width:100%;min-width:130px}.nowrap{white-space:nowrap}
label{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
input,select,textarea{display:block;width:100%;font:inherit;padding:8px 10px;border:1px solid #b9c1d1;border-radius:8px;background:#fff;color:var(--ink);margin-top:4px}
label.check{display:flex;gap:8px;align-items:center;font-weight:500}label.check input{width:auto;margin:0}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 14px;padding:10px 14px}legend{font-weight:600;font-size:14px}
.inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.inline label{margin-bottom:0}.inline input,.inline select{width:auto}.inline .grow{flex:1;min-width:200px}.inline .grow input{width:100%}
.sep{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.stack{display:grid;gap:8px;margin-bottom:6px}
.btn{display:inline-block;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:8px 16px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:#2c3266}.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:#e2e6f0}
.btn.danger{background:#fff;color:var(--red);border-color:#f0b3ad}.btn.danger:hover{background:#fdecea}
button.link{background:none;border:0;padding:0;font:inherit;color:var(--blue);cursor:pointer;text-decoration:underline}button.link.danger{color:var(--red)}
.inline-form{display:inline;margin-left:8px}
.flash{padding:10px 16px;border-radius:8px;margin-bottom:16px;font-weight:600}
.flash.ok{background:#e6f5ec;color:var(--green)}.flash.err{background:#fdecea;color:var(--red)}.flash.warn{background:#fff3dc;color:var(--orange)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;background:#eef0f5;color:var(--grey)}
.badge.red{background:#fdecea;color:var(--red)}.badge.orange{background:#fff3dc;color:var(--orange)}.badge.blue{background:#e8eeff;color:var(--blue)}.badge.green{background:#e6f5ec;color:var(--green)}
.badge.live{background:var(--live);color:#fff}.badge.rec{background:#dff3f3;color:var(--rec)}
.res{list-style:none;padding:0;margin:0}.res li{padding:10px 0;border-bottom:1px solid var(--line)}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.slots button{font:inherit;font-weight:600;padding:7px 14px;border-radius:8px;border:1px solid var(--rec);background:#fff;color:var(--rec);cursor:pointer}
.slots button:hover{background:var(--rec);color:#fff}
/* calendrier hebdomadaire */
.weeknav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.legend{margin-left:auto;font-size:14px;color:var(--muted)}.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 6px 0 14px;vertical-align:-1px}
.sw.live{background:var(--live)}.sw.rec{background:var(--rec)}.sw.shade{background:#d3d8e3}
.calwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.cal{display:grid;grid-template-columns:48px repeat(7,minmax(150px,1fr));min-width:1100px}
.col{border-left:1px solid var(--line)}.col.hours{border-left:0}
.dh{height:64px;padding:8px 10px;border-bottom:1px solid var(--line);background:#f7f8fb;line-height:1.25}
.dh small{display:block;color:var(--muted);font-size:12px}.dh .note{color:var(--orange)}.dh.today{background:var(--ink);color:#fff}.dh.today small{color:#c9cfe8}
.lane{position:relative;background-image:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 1px,transparent 1px,transparent 66px)}
.hours .lane span{position:absolute;left:8px;font-size:12px;color:var(--muted);transform:translateY(-8px);background:#fff;padding-right:2px}
.shade{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,#e3e7ef 0,#e3e7ef 6px,#d6dbe6 6px,#d6dbe6 12px);opacity:.8}
.blk{position:absolute;left:4px;right:4px;border-radius:6px;padding:3px 7px;font-size:13px;line-height:1.25;overflow:hidden;text-decoration:none;color:var(--ink);border-left:5px solid}
.blk small{display:block;color:#4b5266;font-size:12px}
.blk.live{background:#fde3e1;border-color:var(--live)}.blk.rec{background:#d9f0f0;border-color:var(--rec)}
a.blk:hover{filter:brightness(.96)}
@media print{.top,.weeknav,.btn{display:none}.calwrap{border:0}}
@media(prefers-reduced-motion:no-preference){.bubble{transition:transform .12s}.bubble:hover{transform:translateX(3px)}}