:root, :root[data-theme="dark"] {
  --bg: #0b2a4a; --surface: #12365a; --surface-alt: #1a4269; --surface-deep: #0a2340;
  --line: #2b5278; --line-strong: #4a6f94; --line-soft: #214566;
  --ink: #ffffff; --muted: #b7c4d2; --faint: #7f91a5;
  --yellow: #f5b301; --yellow-dark: #d99e00; --yellow-ink: #0b2a4a; --yellow-soft: #3a3a1c; --yellow-line: #6a5a14; --yellow-text: #ffcf3f;
  --blue: #7fb0ff; --blue-soft: #1a4269;
  --green: #3ec47a; --green-soft: #14402f; --orange: #f0a030; --orange-soft: #3f2f12; --red: #ff6b5a; --red-soft: #4a2426;
  --sel: #3a3a1c; --zebra: #11325a; --hover: #1c4670; --input-line: #d99e00; --th-top: #1f4a72; --th-bottom: #153a5f; --btn-top: #244f7a; --btn-bottom: #163b60; --btn-line: #4a6f94; --btn-top-h: #2d5b88; --btn-bottom-h: #1b4369; --inset: rgba(0,0,0,.35); --th-text: #ffcf3f; --input-bg: #0b2a4a;
  --bar-top: #061a30;
  --font: Tahoma, "Segoe UI", Verdana, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;
  --r: 3px;
  --appbar: 44px; --menubar: 38px; --statusbar: 26px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef1f5; --surface: #ffffff; --surface-alt: #f4f6f9; --surface-deep: #e6eaf0;
  --line: #d5dae2; --line-strong: #aeb7c3; --line-soft: #e8ecf1;
  --ink: #0b2a4a; --muted: #5b6b7c; --faint: #8a95a3;
  --yellow: #f5b301; --yellow-dark: #d99e00; --yellow-ink: #0b2a4a; --yellow-soft: #fff0c4; --yellow-line: #e6c75a; --yellow-text: #0b2a4a;
  --blue: #1e56d6; --blue-soft: #e4ecfc;
  --green: #1f8a4c; --green-soft: #e0f2e7; --orange: #c47a12; --orange-soft: #fbefd6; --red: #c8402f; --red-soft: #f9e3df;
  --sel: #fff1bf; --zebra: #f7f9fc; --hover: #eef3f9; --input-line: #aab4c2; --th-top: #1a4b78; --th-bottom: #0f3858; --btn-top: #ffffff; --btn-bottom: #e6e9ee; --btn-line: #aab3bf; --btn-top-h: #ffffff; --btn-bottom-h: #f3f5f8; --inset: rgba(0,0,0,.06); --th-text: #ffd45c; --input-bg: #ffffff; --legend: #0b2a4a; --th-sub: #c9d6e4;
  --bar-top: #0b2a4a;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 12px/1.35 var(--font); }
a { color: var(--yellow-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 13px; } h2 { font-size: 12px; } h3 { font-size: 12px; }
code { font: 12px var(--mono); color: var(--yellow-text); }
.ico { width: 16px; height: 16px; fill: currentColor; stroke: none; flex: none; vertical-align: -3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.y { color: var(--yellow-text); }

.app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--statusbar); }
.appbar { height: var(--appbar); background: var(--bar-top); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px; flex: none; }
.appbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .5px; white-space: nowrap; color: var(--yellow); }
.embleme { display: inline-flex; width: 26px; height: 26px; flex: none; }
.embleme svg { width: 100%; height: 100%; display: block; }
.embleme.grand { width: 44px; height: 44px; }
.appbar .brand .nom { color: #fff; font-weight: 900; letter-spacing: -0.3px; text-transform: none; }
.appbar .brand small { font-weight: 400; font-size: 12px; color: #d4d8de; letter-spacing: 0; margin-left: 2px; }
.appbar .spacer { flex: 1; }
.appbar .who { font-size: 12px; line-height: 1.25; text-align: right; color: #d4d8de; white-space: nowrap; }
.appbar .who b { display: block; font-size: 12.5px; color: #fff; }
.appbar .abtn { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #3a3f47; border-radius: 2px; background: linear-gradient(180deg, #2b3038, #15181d); color: #e8ebef; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.appbar .abtn:hover { border-color: var(--yellow); color: var(--yellow); }
.appbar .abtn.icon { width: 26px; padding: 0; justify-content: center; }

.menubar { height: var(--menubar); background: linear-gradient(180deg, #ffd84d 0%, #f7c21a 45%, #f0b400 70%, #d99f00 100%); border-top: 1px solid #ffe88a; border-bottom: 1px solid #a67c00; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.15), 0 2px 5px rgba(0,0,0,.45); display: flex; align-items: stretch; padding: 0 8px; overflow-x: auto; scrollbar-width: none; flex: none; position: relative; z-index: 2; }
.menubar::-webkit-scrollbar { display: none; }
.menubar a { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; color: #0b2a4a; border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.menubar a:hover { background: rgba(255,255,255,.28); text-decoration: none; }
.menubar a.active { background: linear-gradient(180deg, #23272e, #0b2a4a); color: var(--yellow); border-bottom-color: var(--yellow); text-shadow: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.menubar a .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #0b2a4a; color: var(--yellow); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

.work { flex: 1; padding: 14px 16px 18px; min-width: 0; }
.win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; }
.win-title { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--th-top), var(--th-bottom)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); flex-wrap: wrap; }
.win-title h1, .win-title h2 { font-size: 12px; font-weight: 700; color: var(--th-text); }
.win-title .sub { color: var(--th-sub, var(--muted)); font-size: 12px; }
.win-title .right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.win-tools { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: var(--surface-alt); flex-wrap: wrap; }
.win-tools .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.win-tools .grow { flex: 1; }
.win-tools form { display: contents; }
.win-body { padding: 14px; }
.win-body.flush { padding: 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cols-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .cols2, .cols-3-2 { grid-template-columns: 1fr; } }
.dash { align-items: stretch; }
.dash > div { display: flex; flex-direction: column; min-width: 0; }
.dash > div > .win { display: flex; flex-direction: column; }
.dash > div > .win:last-child { flex: 1; }
.dash > div > .win:last-child > .win-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash > .live-side > .win:last-child > .win-body { justify-content: flex-start; }

.btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--btn-line); border-radius: 2px; background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); color: var(--ink); cursor: pointer; white-space: nowrap; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.25); }
.btn:hover { background: linear-gradient(180deg, var(--btn-top-h), var(--btn-bottom-h)); border-color: var(--yellow); text-decoration: none; }
.btn:active { background: var(--surface-deep); box-shadow: inset 0 1px 2px var(--inset); }
.btn.primary { background: linear-gradient(180deg, #ffd84d, #e8b000); border-color: #a67c00; color: var(--yellow-ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 1px rgba(0,0,0,.3); }
.btn.primary:hover { background: linear-gradient(180deg, #ffe066, #f5b301); color: var(--yellow-ink); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.btn.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.btn.icon { width: 24px; padding: 0; justify-content: center; }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn.link { border-color: transparent; background: transparent; color: var(--yellow-text); }
.btn.link:hover { text-decoration: underline; }

.input, select.input, textarea.input { height: 22px; padding: 0 5px; border: 1px solid var(--input-line); border-radius: 0; background: var(--input-bg); color: var(--ink); width: 100%; min-width: 0; box-shadow: inset 1px 1px 2px var(--inset); }

select.input { padding-right: 24px; }
textarea.input { height: auto; min-height: 76px; padding: 6px 8px; resize: vertical; }
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: #ffd84d; box-shadow: 0 0 0 2px var(--yellow-soft); }
.input[disabled] { background: var(--surface-alt); color: var(--muted); border-color: var(--line); }
.input.w-auto { width: auto; }
.input.w-s { width: 130px; } .input.w-m { width: 200px; }
.form { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px; align-items: center; }
.form > label { color: var(--muted); text-align: right; padding-right: 2px; }
.form > .span { grid-column: 1 / -1; }
.form > label:has(+ textarea), .form > label:has(+ div textarea) { align-self: start; padding-top: 4px; }
.form .input[type="file"] { padding: 0; height: 24px; line-height: 22px; }
.form.wide { grid-template-columns: 250px 1fr; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin: 0 0 12px; min-width: 0; }
legend { padding: 0 5px; color: var(--legend, var(--th-text)); font-weight: 700; font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { margin: 0; accent-color: var(--yellow); }
.hint { color: var(--muted); font-size: 12px; }
.error { color: var(--red); font-size: 12.5px; margin: 6px 0 0; min-height: 1em; }
.error:empty { display: none; }

.grid-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; padding: 3px 7px; height: 22px; background: linear-gradient(180deg, var(--th-top), var(--th-bottom)); color: var(--th-text); font-weight: 700; font-size: 11px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); white-space: nowrap; position: sticky; top: 0; }
.grid th:last-child { border-right: 0; }
.grid td { padding: 3px 7px; height: 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; }
.grid td:last-child { border-right: 0; }
.grid tbody tr:nth-child(even) td { background: var(--zebra); }
.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.sel td { background: var(--yellow); color: #0b2a4a; }
.grid tbody tr.sel td .sub, .grid tbody tr.sel td.num, .grid tbody tr.sel td a { color: #0b2a4a; }
.grid tbody tr.sel td:first-child { box-shadow: none; }
.grid tbody tr[data-id] { cursor: default; user-select: none; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.nowrap { white-space: nowrap; }
.menubar a .count.sos { background: #c8402f; color: #fff; }
.grid tbody tr.sos-ouverte td { background: rgba(200,64,47,.18); }
.grid tbody tr.sos-ouverte td:first-child { box-shadow: inset 3px 0 0 #ff6b5a; }
.grid td.notes { max-width: 420px; min-width: 240px; }
.grid td.num { color: var(--yellow-text); }
.grid td .sub { display: block; color: var(--muted); font-size: 11px; }
.grid td b { font-weight: 600; }
.grid tfoot td { background: var(--surface-alt); font-weight: 600; border-top: 1px solid var(--line-strong); }
.grid .mini { font-size: 12px; }
.empty { padding: 28px 14px; text-align: center; color: var(--muted); }
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 7px 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.pager .btn { height: 22px; width: 24px; padding: 0; justify-content: center; }

.etat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.etat.blue::before { background: var(--blue); } .etat.green::before { background: var(--green); } .etat.orange::before { background: var(--orange); } .etat.red::before { background: var(--red); } .etat.yellow::before { background: var(--yellow); }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; color: var(--muted); background: var(--surface-alt); }

.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; padding: 5px 10px 3px; color: var(--th-text); font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--th-top), var(--th-bottom)); }
.kv td { padding: 3px 10px; height: 22px; border-bottom: 1px solid var(--line); }
.kv td:first-child { color: var(--muted); width: 58%; }
.kv td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--yellow-text); }
.kv td small { font-weight: 400; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .axis { stroke: var(--line-strong); }
.chart .gridline { stroke: var(--line-soft); }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .bar { fill: var(--yellow); }
.chart .bar.alt { fill: #8a95a5; }
.chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; margin-top: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: var(--yellow); }
.chart-legend i.alt { background: #8a95a5; }

.trace-map { height: 280px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-alt); z-index: 0; }
.trace-map .leaflet-tooltip { font: 12px var(--font); color: var(--ink); background: var(--surface); border-color: var(--line-strong); border-radius: var(--r); box-shadow: none; }
.trace-map .leaflet-bar a { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.trace-map .leaflet-control-attribution { background: rgba(0,0,0,.55); color: #ccc; }
:root:not([data-theme="light"]) .trace-map:not(.mt) .leaflet-tile { filter: brightness(.82) contrast(1.05) saturate(.75); }
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.piece { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-alt); min-width: 0; }
.piece-img { height: 150px; display: grid; place-items: center; background: #0a0a0a; }
.piece-img img { width: 100%; height: 100%; object-fit: contain; }
.piece-txt { padding: 8px 10px 10px; display: grid; gap: 3px; font-size: 13px; }
.hint.red, .red { color: var(--red); }
@media (max-width: 720px) { .pieces { grid-template-columns: 1fr; } .piece-img { height: 200px; } }
.live-map { height: 520px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-alt); z-index: 0; }
.live-map .leaflet-tile { filter: none; }
:root:not([data-theme="light"]) .live-map:not(.mt) .leaflet-tile { filter: brightness(.82) contrast(1.05) saturate(.75); }
.live-map .leaflet-tooltip { font: 12px var(--font); color: var(--ink); background: var(--surface); border-color: var(--line-strong); border-radius: var(--r); box-shadow: none; }
.live-map .leaflet-tooltip::before { display: none; }
.live-map .leaflet-bar a { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.live-map .leaflet-control-attribution { background: rgba(0,0,0,.55); color: #ccc; }
.car-pin { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #111; display: grid; place-items: center; color: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.car-pin.free { background: var(--yellow); } .car-pin.busy { background: var(--orange); }
.car-pin .ico { width: 15px; height: 15px; stroke-width: 2; }
.pt-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #111; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.pt-pin.o { background: #ffffff; } .pt-pin.d { background: var(--yellow); }
.live-side { display: flex; flex-direction: column; gap: 14px; }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.map-legend .line { display: inline-block; width: 18px; border-top: 2px dashed var(--yellow); vertical-align: middle; margin-right: 5px; }
.map-legend .line.o { border-color: var(--orange); border-top-style: solid; }
@media (max-width: 760px) { .live-map { height: 340px; } }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialog { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); width: 100%; max-width: 600px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.dialog.wide { max-width: 820px; }
.dlg-title { background: var(--bar-top); color: var(--yellow); padding: 0 6px 0 12px; height: 30px; display: flex; align-items: center; gap: 10px; font-weight: 700; border-radius: 2px 2px 0 0; border-bottom: 2px solid var(--yellow); }
.dlg-title h2 { color: var(--yellow); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-title .x { width: 26px; height: 26px; border: 0; background: transparent; color: #e8ebef; border-radius: var(--r); display: grid; place-items: center; cursor: pointer; }
.dlg-title .x:hover { background: rgba(255,255,255,.15); color: var(--yellow); }
.dlg-body { padding: 14px 16px; overflow: auto; }
.dlg-body p { margin: 0 0 10px; }
.dlg-foot { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-alt); border-radius: 0 0 2px 2px; }
.dlg-foot .left { margin-right: auto; }
.detail { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px; align-items: baseline; }
.detail dt { color: var(--muted); } .detail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.detail dd .input { max-width: 260px; }

.statusbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--statusbar); background: var(--bar-top); border-top: 1px solid var(--line); display: flex; align-items: stretch; font-size: 11px; color: #c9ced6; z-index: 40; }
.statusbar > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-right: 1px solid #2a2f38; white-space: nowrap; }
.statusbar > span:last-child { border-right: 0; }
.statusbar .msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--yellow); }
.statusbar .msg.ok { color: var(--green); } .statusbar .msg.err { color: var(--red); font-weight: 600; }
.statusbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.statusbar .dot.ok { background: var(--green); } .statusbar .dot.ko { background: var(--red); }
.statusbar .ico { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .appbar { padding: 0 10px; gap: 8px; }
  .appbar .brand small { display: none; }
  .appbar .who { display: none; }
  .appbar .abtn span { display: none; }
  .appbar .abtn { width: 32px; padding: 0; justify-content: center; }
  .work { padding: 10px 8px 14px; }
  .win-title { padding: 8px 10px; }
  .win-body { padding: 10px; }
  .form, .form.wide { grid-template-columns: 1fr; gap: 4px 0; }
  .form > label { text-align: left; margin-top: 6px; }
  .detail { grid-template-columns: 1fr; gap: 2px; }
  .detail dt { margin-top: 8px; font-size: 12px; }
  .dialog { max-height: calc(100vh - 16px); }
  .modal-bg { padding: 8px; align-items: end; }
  .statusbar > span:not(.msg):not(.keep) { display: none; }
  .input, select.input { font-size: 16px; height: 34px; }
  .btn { height: 34px; }
  .btn.sm { height: 30px; }
  .win-tools .input.w-s, .win-tools .input.w-m { width: 100%; }
  .grid th, .grid td { padding: 8px 8px; }
  .live-map { height: 300px; }
}
@media print { .appbar, .menubar, .statusbar, .win-tools { display: none; } .win { border: 0; } body { background: #fff; color: #000; } }

@media (max-width: 1000px) and (min-width: 641px) {
  .menubar { height: auto; flex-wrap: wrap; padding: 0 6px; }
  .menubar a { height: 36px; padding: 0 11px; }
  .live-map { height: 420px; }
}

@media (max-width: 640px) {
  .menubar { padding: 0 4px; }
  .menubar a { padding: 0 10px; font-size: 12.5px; }
  .work { padding: 8px 6px 14px; }
  .win-title { gap: 4px 10px; }
  .win-title .right { margin-left: 0; width: 100%; }
  .win-tools { padding: 8px; gap: 6px; }
  .win-tools .input.w-s, .win-tools .input.w-m, .win-tools form .input { width: 100%; }
  .win-tools .sep { display: none; }
  .win-tools .btn { flex: 1 1 auto; justify-content: center; }
  .win-tools .hint { width: 100%; }
  .grid-wrap { overflow: visible; }
  table.grid, .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
  .grid thead, .grid tfoot { display: none; }
  .grid tbody tr { border: 1px solid var(--line); border-radius: var(--r); margin: 8px; width: auto; background: var(--surface); overflow: hidden; }
  .grid tbody tr:nth-child(even) td { background: transparent; }
  .grid tbody tr.sel { border-color: var(--yellow); }
  .grid tbody tr.sel td, .grid tbody tr.sel td .sub { background: var(--sel); color: var(--ink); }
  .grid tbody tr.sel td.num { color: var(--yellow-text); }
  .grid tbody tr.sel td:first-child { box-shadow: none; }
  .grid td { display: grid; grid-template-columns: 108px 1fr; gap: 8px; padding: 5px 10px; height: auto; border-bottom: 1px solid var(--line-soft); border-right: 0; text-align: left; align-items: start; }
  .grid td:last-child { border-bottom: 0; }
  .grid td::before { content: attr(data-l); color: var(--muted); font-size: 12px; padding-top: 1px; }
  .grid td:not([data-l]), .grid td[data-l=""] { grid-template-columns: 1fr; }
  .grid td.num { text-align: left; }
  .grid td.empty { display: block; text-align: center; padding: 20px; }
  .grid td.empty::before { content: none; }
  .grid td > * { grid-column: 2; min-width: 0; }
  .grid td .sub { display: block; }
  .pager { justify-content: center; }
  .cols2 > *, .cols-3-2 > * { min-width: 0; }
  .dlg-foot { flex-wrap: wrap; }
  .dlg-foot .btn { flex: 1 1 auto; justify-content: center; }
  .dlg-foot .left { width: 100%; margin: 0 0 4px; text-align: center; }
  .map-legend { gap: 8px 12px; }
  .chart text { font-size: 13px; }
}

.jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding: 12px; }
.jours a { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; color: var(--ink); text-decoration: none; background: var(--surface-alt); min-height: 72px; }
.jours a:hover { border-color: var(--yellow); text-decoration: none; }
.jours a.auj { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.jours a.actif { background: rgba(245,184,0,.08); }
.jours .jd { display: block; font-size: 11px; color: var(--muted); }
.jours .jn { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.jours .jn small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.jours .nb { display: block; font-size: 12px; margin-top: 3px; }
.jours .nb.zero { color: var(--faint); }
.jours .ca { display: block; font-size: 12px; color: var(--yellow-text); font-variant-numeric: tabular-nums; }
.jours-mois { padding: 12px 12px 0; }
.jours-mois h3 { color: var(--yellow-text); font-size: 13px; text-transform: capitalize; margin: 0; }
.jours-mois h3 .hint { text-transform: none; font-weight: 400; }
@media (max-width: 640px) {
  .jours { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; padding: 8px; }
  .jours a { padding: 5px 6px; min-height: 64px; }
}

.kv td:last-child { padding-right: 8px; }
.kv .val { display: inline-block; min-width: 56px; text-align: right; padding: 2px 8px; border-radius: 2px; background: #d6b03c; color: #0b2a4a; font-weight: 700; line-height: 1.3; }
.kv .val .etat { color: #0b2a4a; }
.kv .val .etat::before { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
:root[data-theme="light"] .kv .val { background: #e7c14a; }

.etat { gap: 0; }
.etat::before { content: none; }
.kv .val { width: 112px; min-width: 0; box-sizing: border-box; }

.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px 16px 46px; background: var(--bg); }
.login-win { max-width: 380px; width: 100%; }
.win-bande { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: linear-gradient(180deg, #ffd84d 0%, #f7c21a 45%, #f0b400 70%, #d99f00 100%); color: #0b2a4a; font-weight: 700; border-bottom: 1px solid #a67c00; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.login-win .dlg-body { padding: 14px 14px 4px; }
.login-win fieldset { margin: 0; }
.login-win .form { grid-template-columns: 96px 1fr; }
.login-win .dlg-foot .left { color: var(--muted); font-size: 11px; }
.login-pied { color: var(--faint); font-size: 11px; }
.login-win { max-width: 420px; }
.login-win .win-bande .embleme { width: 20px; height: 20px; }
.login-win .win-bande small { font-weight: 400; color: #0b2a4a; margin-left: 2px; }
.login-win .dlg-body { padding: 16px 16px 6px; }
.login-win fieldset { padding: 12px 14px 14px; }
.login-win .form { grid-template-columns: 110px 1fr; gap: 10px 12px; }
.login-win .input { height: 26px; padding: 0 8px; }
.login-win .dlg-foot { padding: 10px 16px; }
.login-win .dlg-foot .btn { height: 28px; padding: 0 18px; }
.login-pied { display: none; }
@media (max-width: 640px) { .login-win .form { grid-template-columns: 1fr; } }

.appbar .burger { display: none; }
.tiroir-fond { display: none; }
@media (max-width: 640px) {
  .menubar { display: none; }
  .appbar .burger { display: inline-flex; }
  .appbar { gap: 10px; }
  .appbar .brand { font-size: 15px; }
  .appbar .brand small, .appbar .who, .appbar #theme, .appbar #logout { display: none; }
  .tiroir-fond { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .tiroir-fond.open { opacity: 1; pointer-events: auto; }
  .tiroir { position: absolute; top: 0; left: 0; bottom: 0; width: 290px; max-width: 86vw; background: var(--bar-top); border-right: 2px solid var(--yellow); transform: translateX(-100%); transition: transform .18s; display: flex; flex-direction: column; }
  .tiroir-fond.open .tiroir { transform: none; }
  .tiroir .tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--yellow); font-weight: 700; font-size: 16px; letter-spacing: 1px; border-bottom: 1px solid #2a2f38; }
  .tiroir .tete .x { margin-left: auto; width: 32px; height: 32px; border: 0; background: transparent; color: #e8ebef; display: grid; place-items: center; border-radius: 2px; }
  .tiroir .liens { overflow-y: auto; }
  .tiroir .liens a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: #e8ebef; font-size: 14px; border-bottom: 1px solid #1d2128; text-decoration: none; }
  .tiroir .liens a .ico { width: 18px; height: 18px; }
  .tiroir .liens a.active { background: var(--yellow); color: #0b2a4a; font-weight: 700; }
  .tiroir .liens a .count { margin-left: auto; background: #0b2a4a; color: var(--yellow); }
  .tiroir .liens a.active .count { background: #0b2a4a; }
  .tiroir .pied { margin-top: auto; padding: 12px 16px 14px; border-top: 1px solid #2a2f38; color: #c9ced6; font-size: 12px; display: flex; flex-direction: column; gap: 8px; }
  .tiroir .pied b { color: #fff; font-size: 13px; }
  .tiroir .pied .btn { justify-content: center; height: 36px; }
  .work { padding: 10px 10px 16px; }
  .win { margin-bottom: 12px; }
  .win-title { padding: 10px 12px; }
  .win-title h1, .win-title h2 { font-size: 14px; }
  .win-tools { padding: 10px 12px; gap: 8px; }
  .win-tools > *, .win-tools form > * { width: 100%; }
  .win-tools .grow, .win-tools .sep { display: none; }
  .win-tools .hint { color: var(--muted); font-size: 12px; margin: 2px 0 -4px; }
  .win-tools .btn, .win-tools .input, .win-tools select.input { width: 100%; }
  .win-tools .check { padding: 4px 0; }
  .input, select.input { height: 38px; font-size: 15px; padding: 0 10px; }
  textarea.input { font-size: 15px; }
  .btn { height: 38px; font-size: 14px; padding: 0 14px; }
  .btn.sm { height: 34px; font-size: 13px; }
  .pager { justify-content: center; gap: 12px; }
  .pager .btn { height: 34px; width: 40px; }
  .form { grid-template-columns: 1fr; gap: 4px 0; }
  .form > label { margin-top: 10px; font-size: 12px; }
  .form .input, .form select.input { width: 100%; }
  .input.w-s, .input.w-m { width: 100%; }
  fieldset { padding: 10px 12px 14px; }
  .modal-bg { padding: 0; align-items: end; }
  .dialog { max-width: none; max-height: 92vh; border-radius: 8px 8px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .dlg-title { height: 40px; font-size: 14px; }
  .dlg-body { padding: 12px; }
  .dlg-foot { padding: 12px; gap: 8px; }
  .dlg-foot .btn { flex: 1 1 auto; justify-content: center; }
  .dlg-foot .left { width: 100%; text-align: center; margin: 0 0 4px; }
  .detail { grid-template-columns: 1fr; gap: 2px; }
  .detail dt { margin-top: 8px; font-size: 12px; }
  .detail dd .input { max-width: none; }
  .kv td:first-child { width: auto; }
  .kv .val { width: 100px; }
  .jours { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
  .jours a { min-height: 70px; padding: 6px 8px; }
  .jours .nb i { display: inline; }
  .live-map { height: 320px; }
  .map-legend { gap: 8px 12px; padding: 0 2px; }
  .grid td { padding: 6px 10px; }
  .grid tbody tr { margin: 8px 0; }
  .statusbar > span:not(.msg):not(.keep) { display: none; }
}

.grid td.plus-btn { display: none; }
@media (max-width: 640px) {
  .grid td[data-plus] { display: none; }
  .grid tr.ouvert td[data-plus] { display: grid; }
  .grid td.plus-btn { display: block; padding: 8px 10px; border-bottom: 0; }
  .grid td.plus-btn::before { content: none; }
  .grid td.plus-btn .btn { width: 100%; justify-content: center; }
}

.grid td .btn { vertical-align: middle; }
.grid td .btn.sm + .btn.sm { margin-left: 4px; }
.grid td code { font: 12px/1.4 ui-monospace, Consolas, monospace; background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.upload-prog { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.upload-bar { height: 8px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
.upload-bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s; }