:root{--ink:#05332a;--sage:#79bbae;--tint:#79bbae24;--surface:#fff;--background:#f8f8f8;--line:#e0e0e0;--accent:#ff4000;--green:#1f7a4d;--green-bg:#e6f4ec;--orange:#a25a00;--orange-bg:#fdf0dd;--red:#b02a1a;--red-bg:#fbe9e6;font:15px/1.35 Archivo,system-ui,sans-serif;color:var(--ink);background:var(--background)}
*{box-sizing:border-box}
main{max-width:920px;margin:auto;padding:24px}
main.wide{max-width:none;padding:10px 14px}
h2{font-size:1.25rem;margin:0 0 12px}
section{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:32px auto;max-width:420px}
label{display:block;margin-block:14px}
input,button{font:inherit;border-radius:7px;border:1px solid var(--line)}
#login input{width:100%;min-height:44px;padding:9px 12px}
#login button{background:var(--ink);color:#fff;cursor:pointer;width:100%;min-height:44px}
button:disabled{opacity:.55}
input:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* Barre haute compacte : studios à gauche, réglages à droite, tout sur une ligne. */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;border-bottom:2px solid var(--line)}
.bar-right{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-bottom:4px}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;cursor:pointer;padding:6px 12px;color:#4a6a63;margin-bottom:-2px;font-size:.92rem}
.tab[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);background:var(--tint)}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{background:var(--surface);color:var(--ink);cursor:pointer;padding:4px 11px;border-radius:999px;font-size:.82rem}
.chip[aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.toggle[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.toggle.green[aria-pressed=true]{background:var(--green);border-color:var(--green)}
.chip.toggle.orange[aria-pressed=true]{background:var(--orange);border-color:var(--orange)}
.chip.toggle.red[aria-pressed=true]{background:var(--red);border-color:var(--red)}
#refresh{background:var(--ink);color:#fff;cursor:pointer;padding:4px 13px;border-radius:999px;border-color:var(--ink);font-size:.82rem}
#refresh:disabled{cursor:progress}

.head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:7px 0 6px}
.averages{display:flex;flex-wrap:wrap;gap:5px}
.badge{padding:3px 10px;border-radius:999px;font-size:.82rem;border:1px solid transparent;white-space:nowrap}
.badge b{font-weight:600}
.badge i{font-style:normal;opacity:.75;font-size:.92em}
.badge.green{background:var(--green-bg);color:var(--green);border-color:#bfe0cd}
.badge.orange{background:var(--orange-bg);color:var(--orange);border-color:#efd5ab}
.badge.red{background:var(--red-bg);color:var(--red);border-color:#f0c5bd}
.badge.none{background:var(--tint);color:var(--ink);border-color:#bcdcd4}

.thresholds{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.82rem}
.thresholds label{display:flex;align-items:center;gap:4px;margin:0;color:#4a6a63}
.thresholds input{width:68px;padding:3px 7px;font-size:.82rem}
.thresholds button{background:var(--surface);color:var(--ink);cursor:pointer;padding:4px 11px;border-radius:999px;font-size:.82rem}
#thresholds-status,#refresh-status{color:#4a6a63}

.legend{display:flex;gap:4px 10px;flex-wrap:wrap;font-size:.75rem;margin:0;align-items:center;color:#4a6a63}
.key{padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.key.green{background:var(--green-bg);color:var(--green);border-color:#bfe0cd}
.key.orange{background:var(--orange-bg);color:var(--orange);border-color:#efd5ab}
.key.red{background:var(--red-bg);color:var(--red);border-color:#f0c5bd}
.key.arrows{background:var(--tint);color:var(--ink);border-color:#bcdcd4}

.summary{margin:14px 2px;font-size:.92rem}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);max-height:calc(100vh - 140px)}
table.grid{border-collapse:collapse;width:100%;font-size:.76rem;table-layout:fixed}
table.grid th,table.grid td{border:1px solid var(--line);vertical-align:top;padding:2px}
table.grid thead th{background:var(--ink);color:#fff;position:sticky;z-index:2;padding:4px 5px;font-weight:600;text-align:center}
table.grid thead tr:first-child th{top:0}
table.grid thead tr:nth-child(2) th{top:23px}
th.day-head{border-left:2px solid var(--surface);font-size:.82rem}
th.room-head{font-size:.66rem;font-weight:500;opacity:.85;background:#0a4437}
th.hour{background:var(--tint);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;font-weight:600;position:sticky;left:0;z-index:1}
th.hour,th.hour-head{width:46px;min-width:46px}
th.hour-head{position:sticky;left:0;z-index:3}
td.empty{background:#fcfcfc}

/* Nom sur une ligne, taux en dessous : les colonnes peuvent rester etroites. */
.course{display:flex;flex-direction:column;gap:0;padding:2px 4px;border-radius:5px;border-left:3px solid;margin-bottom:2px;cursor:help;line-height:1.2}
.course:last-child{margin-bottom:0}
.course .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94em}
.course .value{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Separation franche entre deux journees, et colonne reduite pour une salle inoccupee. */
table.grid th.day-start,table.grid td.day-start{border-left:3px solid var(--ink)}
table.grid thead th.day-head{border-left:3px solid var(--surface)}
/* Une salle sans cours garde sa colonne, son nom et sa capacité : le vide se voit, en gris. */
table.grid td.unused{background:#eceeed}
table.grid thead th.room-head.unused{background:#5b7a72;color:#e8efed}
/* Vue par salle : colonnes calibrees pour dix caracteres, la semaine entiere tient a l'ecran. */
table.grid.view-room{table-layout:fixed;width:auto;font-size:.68rem}
/* Les largeurs exactes sont posees a l'affichage, selon le studio et la place disponible. */
table.grid.view-room .course{padding:1px 3px}
.course .teacher{font-weight:400;opacity:.8;margin-left:3px}
.course.green{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.course.orange{background:var(--orange-bg);border-color:var(--orange);color:var(--orange)}
.course.red{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.course.none{background:var(--tint);border-color:var(--sage)}
.course.removed{opacity:.6;border-left-style:dashed}
.course.removed .name{text-decoration:line-through}
.arrow{font-weight:400}
.note{color:#4a6a63;font-size:.75rem;margin:8px 2px 16px}

@media(max-width:700px){main.wide{padding:8px}table.grid{font-size:.72rem}.table-wrap{max-height:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}