:root {
  color-scheme: dark;
  --ink: #edf2f2;
  --muted: #91a0a5;
  --panel: #121e27;
  --line: #293943;
  --mint: #72e0ba;
  --orange: #ffb36b;
  --red: #ff827c;
  --paper: #fafbf7;
  --paper-ink: #233238;
  --paper-muted: #6c7b7d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #101a22;
  color: var(--ink);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: 100dvh; }
/* Entre les deux bandeaux fixes (bars.css) */
body.with-bars .app {
  margin-top: calc(var(--rs-top-h) + env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--rs-top-h) - var(--rs-bottom-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.sidebar { z-index: 500; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }

.brand { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; }
.brand > .brand-subtitle { margin-top: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #10251e; background: var(--mint); }
.brand-mark svg { width: 23px; height: 23px; }
.brand-name { font-size: 19px; line-height: 1; letter-spacing: -.7px; font-weight: 760; }
.brand-subtitle { margin-top: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); }
.live-badge { margin-left: auto; display: flex; gap: 7px; align-items: center; padding: 6px 9px; border: 1px solid #335347; border-radius: 20px; color: var(--mint); font-size: 10px; font-weight: 700; letter-spacing: .6px; white-space: nowrap; }
.live-badge.stale { color: var(--orange); border-color: #5a4630; }
.live-badge.stale .live-dot { background: var(--orange); box-shadow: none; animation: none; }
.live-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #72e0ba88; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 18px 14px; }
.kpi { padding: 10px 10px 9px; border: 1px solid var(--line); border-radius: 10px; background: #0f1a22; }
.kpi-value { display: block; font-size: 19px; font-weight: 760; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-label { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.25; }

.search-wrap { position: relative; margin: 0 18px 12px; }
.search-icon { position: absolute; top: 12px; left: 13px; width: 17px; height: 17px; color: #90a2a8; pointer-events: none; }
.search { width: 100%; padding: 12px 40px 12px 39px; color: var(--ink); background: #0e1820; border: 1px solid #2a3b46; outline: 0; border-radius: 10px; }
.search:focus { border-color: #5da98c; box-shadow: 0 0 0 3px #72e0ba1c; }
.search::placeholder { color: #788a91; }
.shortcut { position: absolute; right: 12px; top: 11px; color: #75878e; font-size: 11px; }

.tabs { display: flex; margin: 0 18px; border-bottom: 1px solid var(--line); }
.tab { flex: 1; padding: 10px 8px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; }
.tab.active { color: var(--mint); border-bottom-color: var(--mint); }

.filters { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 8px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cc { display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 3px; background: #2a3b45; color: #c5d2d5; font-size: 9px; font-weight: 750; letter-spacing: .4px; line-height: 15px; }
.filter-chip.active .cc { background: #10251e22; color: inherit; }
.gps { padding: 0 4px; border-radius: 3px; background: #1d4d3d; color: var(--mint); font-size: 9px; font-weight: 750; line-height: 15px; }
.stop-main { display: flex; justify-content: space-between; gap: 8px; }
.platform { flex: 0 0 auto; align-self: flex-start; min-width: 22px; padding: 1px 5px; border-radius: 4px; background: #1f3a4d; color: #fff; font-size: 10px; font-weight: 750; text-align: center; }
.platform.changed { background: #c2410c; }
.board-platform { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; color: #71807e; font-size: 9.5px; font-weight: 600; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: #adbac0; border: 1px solid #33454f; border-radius: 20px; background: transparent; cursor: pointer; font-size: 10.5px; }
.filter-chip:hover { border-color: #71838a; }
.filter-chip.active { color: #10251e; background: var(--mint); border-color: var(--mint); font-weight: 700; }
.filter-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.filter-chip .n { opacity: .7; font-variant-numeric: tabular-nums; }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 20px 9px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.head-tools { display: flex; align-items: center; gap: 10px; }
.head-tools select { padding: 3px 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: #0f1a22; font-size: 10px; text-transform: none; letter-spacing: 0; }
.count { color: var(--ink); font-size: 11px; letter-spacing: 0; }
.results { min-height: 0; flex: 1; overflow: auto; border-top: 1px solid var(--line); scrollbar-color: #3a4b53 transparent; scrollbar-width: thin; }
.section-title { padding: 12px 20px 6px; color: var(--muted); font-size: 9.5px; font-weight: 750; letter-spacing: .9px; text-transform: uppercase; }

.card { display: block; width: 100%; padding: 12px 20px; text-align: left; color: inherit; border: 0; border-bottom: 1px solid #25353e; background: transparent; cursor: pointer; }
.card:hover { background: #192831; }
.card.selected { background: #1b302e; box-shadow: inset 3px 0 var(--mint); }
.card-top, .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.operator { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; }
.operator-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--c, var(--mint)); }
.train-number { color: #a9b7bb; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.card-route { display: block; margin-top: 7px; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-arrow { color: #72858b; font-size: 12px; }
.card-meta { margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.card-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delay { flex: 0 0 auto; color: var(--mint); font-weight: 700; }
.delay.late { color: var(--orange); }
.delay.very-late, .delay.canceled { color: var(--red); }
.empty { padding: 25px 22px; color: var(--muted); text-align: center; font-size: 12px; }
.more { padding: 12px 20px 18px; color: var(--muted); font-size: 11px; text-align: center; }

.stats { padding: 14px 20px 24px; }
.stat-block { margin-bottom: 20px; }
.stat-block h3 { margin: 0 0 10px; color: var(--muted); font-size: 9.5px; letter-spacing: .9px; text-transform: uppercase; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 40px; gap: 8px; align-items: center; margin: 7px 0; font-size: 11px; }
.bar { height: 8px; border-radius: 4px; background: #1d2c35; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.meta-list { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.meta-list b { color: var(--ink); font-weight: 600; }

.sidebar-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 20px 13px; border-top: 1px solid var(--line); color: #85959b; font-size: 10px; }
.sidebar-foot strong { color: #b5c1c3; }
.link-btn { padding: 0; color: var(--mint); border: 0; background: none; cursor: pointer; font-size: 10.5px; font-weight: 650; }

/* ---------- Carte ---------- */
.map-shell { position: relative; min-width: 0; background: #dfe7df; }
#map { position: absolute; inset: 0; background: #e8ece6; }
.leaflet-container { font-family: inherit; }
.tiles-light { filter: grayscale(.9) brightness(1.06) contrast(.88); }
.leaflet-control-attribution { font-size: 9px !important; }
.map-toolbar { position: absolute; z-index: 450; top: 16px; right: 17px; display: flex; gap: 7px; }
.map-action { display: flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 12px; color: #24333a; border: 1px solid #c8d1c9; border-radius: 9px; background: #f7f8f2ed; box-shadow: 0 2px 8px #18302a20; cursor: pointer; font-size: 11px; font-weight: 650; }
.map-action:hover { background: #fff; }
.map-action.active { color: #12392e; border-color: #72c4a4; background: #dff7e9; }
.map-action svg { width: 15px; height: 15px; }
.layers-panel { position: absolute; z-index: 460; top: 60px; right: 17px; width: 220px; padding: 12px 14px; color: #2b3a3f; border: 1px solid #d5ddd4; border-radius: 12px; background: #fbfcf9f7; box-shadow: 0 8px 26px #182f2c2a; font-size: 12px; }
.layers-panel label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.layers-panel .legend-title:not(:first-child) { margin-top: 12px; }
.map-legend { position: absolute; z-index: 400; right: 60px; bottom: 26px; padding: 11px 13px; border: 1px solid #d5ddd4; border-radius: 10px; color: #35444a; background: #f8f9f4ed; box-shadow: 0 3px 12px #20352d1a; font-size: 10.5px; }
.legend-title { margin-bottom: 6px; color: #68777a; font-size: 9px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--c); border: 1px solid #fff; box-shadow: 0 0 0 1px #0002; }
.map-status { position: absolute; z-index: 400; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 8px 12px; color: #4a5b5e; border: 1px solid #d0dad0; border-radius: 9px; background: #f8f9f4ed; font-size: 10.5px; white-space: nowrap; }
.map-status .live-dot { flex: 0 0 auto; width: 6px; height: 6px; background: #2f9d76; box-shadow: none; }
.train-label { padding: 1px 4px !important; color: #1b2b2e !important; border: 0 !important; border-radius: 3px !important; background: #ffffffe6 !important; box-shadow: 0 1px 3px #1b302d44 !important; font-size: 9px !important; font-weight: 700 !important; }
.train-label:before { display: none; }
.tip b { display: block; font-size: 11px; }
.tip span { color: #5d6c6f; font-size: 10px; }

/* ---------- Fiches ---------- */
.detail-overlay { position: absolute; z-index: 600; top: 16px; left: 16px; width: min(370px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 18px; border: 1px solid #d4ddd5; border-radius: 14px; color: var(--paper-ink); background: #fafbf7f7; box-shadow: 0 8px 30px #182f2c24; }
.detail-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #536368; background: #e8eee8; cursor: pointer; font-size: 16px; line-height: 1; }
.detail-kicker { display: flex; align-items: center; gap: 7px; color: #5f7771; font-size: 9.5px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; }
.detail-title { margin: 6px 34px 3px 0; font-size: 20px; letter-spacing: -.5px; line-height: 1.2; }
.detail-subtitle { color: var(--paper-muted); font-size: 11.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge { padding: 3px 8px; border-radius: 20px; background: #e8efe9; color: #355247; font-size: 10px; font-weight: 700; }
.badge.ok { background: #dcf5e8; color: #17694a; }
.badge.late { background: #fdecd9; color: #9a5310; }
.badge.very-late, .badge.canceled { background: #fde0dd; color: #a8261d; }
.badge.muted { background: #edf0ed; color: #66767a; font-weight: 600; }
.progress { margin: 16px 0 4px; }
.progress-bar { height: 6px; border-radius: 3px; background: #e2e9e3; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--c, #3aa57f); }
.progress-text { display: flex; justify-content: space-between; margin-top: 6px; color: var(--paper-muted); font-size: 10.5px; }
.progress-text b { color: var(--paper-ink); }
.detail-actions { display: flex; gap: 6px; margin: 12px 0 4px; }
.detail-actions button { flex: 1; padding: 7px 8px; color: #2d4a40; border: 1px solid #cfdcd3; border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 650; }
.detail-actions button.active { color: #fff; border-color: #2f8a69; background: #2f8a69; }
.section-label { margin: 16px 0 8px; color: #64736f; font-size: 9.5px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; }

.stop { position: relative; display: grid; grid-template-columns: 50px 17px 1fr; gap: 6px; min-height: 40px; color: #4d5d61; font-size: 11.5px; }
.stop:not(:last-child):before { position: absolute; top: 12px; bottom: -1px; left: 62px; width: 2px; background: #cbd7d0; content: ""; }
.stop.passed:not(:last-child):before { background: #7cbca5; }
.stop-time { font-variant-numeric: tabular-nums; text-align: right; line-height: 1.25; }
.stop-time s { display: block; color: #9aa5a6; font-size: 10px; }
.stop-time .est { color: #b45f0c; font-weight: 700; }
.stop-dot { position: relative; z-index: 1; width: 11px; height: 11px; margin: 2px 0 0 3px; border: 2px solid #6dafa0; border-radius: 50%; background: #f9fbf7; }
.stop.passed { color: #8a9799; }
.stop.passed .stop-dot { background: #72b99f; border-color: #72b99f; }
.stop.current { color: #183a30; font-weight: 750; }
.stop.current .stop-dot { border-color: #2f8a69; background: #72e0ba; box-shadow: 0 0 0 4px #72e0ba55; }
.stop.skipped { color: #b0453c; }
.stop.skipped .stop-name { text-decoration: line-through; }
.stop-name { cursor: pointer; }
.stop-name:hover { text-decoration: underline; }
.stop-note { display: block; color: #b0453c; font-size: 10px; font-weight: 600; }
.train-in-between { margin: -6px 0 6px 56px; color: #2f8a69; font-size: 10px; font-weight: 700; }
.spark { width: 100%; height: 64px; display: block; }
.detail-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid #dfe6df; color: #73817f; font-size: 10.5px; }

.board-tabs { display: flex; gap: 4px; margin-top: 14px; padding: 3px; border-radius: 9px; background: #e9efe9; }
.board-tabs button { flex: 1; padding: 6px; border: 0; border-radius: 7px; background: transparent; color: #58696a; cursor: pointer; font-size: 11px; font-weight: 700; }
.board-tabs button.active { background: #fff; color: #1f3a31; box-shadow: 0 1px 3px #0001; }
.board-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; width: 100%; padding: 9px 2px; text-align: left; border: 0; border-top: 1px solid #e4e9e3; background: none; cursor: pointer; font-size: 11.5px; color: var(--paper-ink); }
.board-row:hover { background: #f0f5f0; }
.board-row.gone { opacity: .5; }
.board-time { font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.25; }
.board-time s { display: block; color: #9aa5a6; font-weight: 500; font-size: 10px; }
.board-line { display: flex; align-items: center; gap: 5px; color: #71807e; font-size: 10px; }
.board-line .operator-dot { width: 7px; height: 7px; }
.board-status { align-self: center; font-size: 10.5px; font-weight: 700; color: #17694a; text-align: right; }
.board-status.late { color: #b45f0c; }
.board-status.very-late, .board-status.canceled { color: #b9342a; }

.about { max-width: 560px; width: calc(100% - 32px); padding: 24px 26px; color: var(--paper-ink); border: 0; border-radius: 16px; background: var(--paper); box-shadow: 0 20px 60px #0006; font-size: 13px; }
.about::backdrop { background: #0b141a99; }
.about h2 { margin: 0 0 10px; font-size: 20px; }
.about h3 { margin: 18px 0 6px; font-size: 13px; }
.about p, .about li { color: #445357; }

/* ---------- Fiches enrichies ---------- */
.muted-s { color: #7a8789; font-size: 10.5px; }
.delay.unknown { color: #8d9a9e; font-weight: 600; }
.spec-box { margin-bottom: 8px; padding: 8px 10px; border-left: 3px solid #2f8a69; border-radius: 6px; background: #edf3ee; font-size: 11.5px; line-height: 1.5; }
body.dark .spec-box { background: #22313a; }
.seats-box { padding: 10px 12px; border-radius: 9px; background: #edf3ee; font-size: 11.5px; }
.seats-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.seats-main .badge { margin-left: auto; }
.seats-help { margin-top: 8px; font-size: 11px; color: #3d4b4e; }
.seats-help summary { color: #2f8a69; font-weight: 650; cursor: pointer; }
.seats-help ol { margin: 6px 0 4px; padding-left: 18px; }
.seats-form { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.seats-form select, .seats-form input { min-width: 0; padding: 5px 7px; border: 1px solid #cfdcd3; border-radius: 7px; background: #fff; color: #233238; font-size: 11px; }
.seats-form button { grid-column: 1 / -1; }
body.dark .seats-box { background: #22313a; }
body.dark .seats-help { color: #cfd8da; }
.stop-why { display: block; color: #b45f0c; font-size: 10px; font-weight: 600; }
.alerts { display: grid; gap: 6px; margin-top: 12px; }
.alert-box { padding: 8px 10px; border-left: 3px solid #e5602b; border-radius: 6px; background: #fdf1e9; color: #5a3416; font-size: 11px; }
.alert-box div { white-space: pre-line; }
.alert-box b { display: block; margin-bottom: 2px; color: #8a3b0d; }
.mini-btn { padding: 5px 9px; border: 1px solid #cfdcd3; border-radius: 7px; background: #fff; color: #2d4a40; cursor: pointer; font-size: 10.5px; font-weight: 650; white-space: nowrap; }
.mini-btn:hover { border-color: #2f8a69; }
.unit-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #e4e9e3; font-size: 11.5px; }
.inline-form { display: flex; gap: 5px; margin-top: 8px; }
.inline-form input { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid #cfdcd3; border-radius: 7px; background: #fff; color: #233238; font-size: 11px; }
.detail-overlay { color-scheme: light; }
body.dark .detail-overlay { color-scheme: dark; }
.chips-s { display: flex; flex-wrap: wrap; gap: 5px; }
.chips-s span { padding: 3px 8px; border-radius: 12px; background: #e8efe9; color: #355247; font-size: 10.5px; }
.detail-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; }
.detail-links a { color: #2f8a69; font-weight: 650; text-decoration: none; }
.day-tabs { display: flex; gap: 4px; margin-top: 12px; }
.day-tabs button { flex: 1; padding: 5px; border: 1px solid #d6e0d8; border-radius: 7px; background: #fff; color: #58696a; cursor: pointer; font-size: 10.5px; font-weight: 650; }
.day-tabs button.active { background: #1f3a31; border-color: #1f3a31; color: #fff; }
.desc { margin: 0 0 4px; color: #3d4b4e; font-size: 11.5px; line-height: 1.5; }
.desc-img { float: right; width: 92px; margin: 2px 0 6px 10px; border-radius: 6px; }
.journey-form { display: grid; gap: 6px; padding: 10px; margin-top: 8px; border-radius: 9px; background: #edf3ee; font-size: 11px; }
.journey-form label { display: grid; gap: 2px; }
.journey-form select { padding: 5px; border: 1px solid #cfdcd3; border-radius: 6px; font-size: 11px; }
.flash { position: sticky; top: -18px; z-index: 2; margin: -6px 0 10px; padding: 8px 10px; border-radius: 8px; background: #1f3a31; color: #fff; font-size: 11px; }
.me { padding-bottom: 16px; }
.me-account { margin: 12px 20px 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.me-account a, .more a { color: var(--mint); }
.me-account b { color: var(--ink); }
.me-stats { display: flex; justify-content: space-around; padding: 6px 20px 10px; color: var(--muted); font-size: 11px; }
.me-stats b { display: block; color: var(--ink); font-size: 17px; text-align: center; }
a.card { text-decoration: none; }
.sidebar-foot a.link-btn { text-decoration: none; }
.pk { display: inline-block; transform: translate(-50%, -50%); padding: 0 3px; border-radius: 3px; background: #fff; border: 1px solid #556; color: #223; font-size: 9px; font-weight: 700; white-space: nowrap; }
.osm-status { color: #8a5a2c; font-size: 10.5px; min-height: 0; }

/* ---------- Thème sombre ---------- */
body.dark .map-shell, body.dark #map { background: #1b2329; }
body.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92); }
body.dark .detail-overlay, body.dark .map-legend, body.dark .map-status, body.dark .layers-panel, body.dark .map-action {
  color: #dfe7e8; background: #17232bf5; border-color: #2c3c46;
}
body.dark .map-action.active { background: #1d3a33; color: var(--mint); }
body.dark .detail-close, body.dark .board-tabs, body.dark .detail-route, body.dark .journey-form { background: #22313a; color: #cfd8da; }
body.dark .board-tabs button.active, body.dark .day-tabs button, body.dark .mini-btn, body.dark .detail-actions button, body.dark .inline-form input { background: #1c2a32; color: #dfe7e8; border-color: #34464f; }
body.dark .day-tabs button.active, body.dark .detail-actions button.active { background: #2f8a69; border-color: #2f8a69; }
body.dark .board-row { color: #dfe7e8; border-color: #2a3942; }
body.dark .board-row:hover { background: #1f2d35; }
body.dark .stop, body.dark .desc, body.dark .stop.current { color: #cfd8da; }
body.dark .stop-dot { background: #17232b; }
body.dark .badge { background: #23353d; color: #b9d6c9; }
body.dark .alert-box { background: #3a2a1f; color: #f3d2bb; }
body.dark .chips-s span { background: #23353d; color: #b9d6c9; }
body.dark .legend-title, body.dark .detail-kicker, body.dark .section-label { color: #9fb0b3; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55% 45%; height: 100dvh; }
  body { overflow: hidden !important; }
  .map-shell { grid-row: 1; }
  .sidebar { grid-row: 2; border-top: 1px solid var(--line); border-right: 0; }
  .brand { padding: 10px 16px 8px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand-name { font-size: 16px; }
  .kpis { padding: 0 14px 8px; gap: 6px; }
  .kpi { padding: 6px 8px; }
  .kpi-value { font-size: 15px; }
  .search-wrap { margin: 0 14px 8px; }
  .search { padding-top: 9px; padding-bottom: 9px; }
  .search-icon { top: 9px; }
  .shortcut { display: none; }
  .tabs { margin: 0 14px; }
  .filters { padding: 8px 14px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-chip { flex: 0 0 auto; }
  .sidebar-foot { display: none; }
  .map-toolbar { top: 10px; right: 10px; gap: 5px; }
  .map-action span { display: none; }
  .map-action { width: 36px; justify-content: center; padding: 0; }
  .layers-panel { top: 52px; right: 10px; }
  .map-legend { display: none; }
  .map-status { bottom: 10px; }
  .detail-overlay { top: 10px; left: 10px; width: calc(100% - 66px); max-height: calc(100% - 20px); padding: 14px; }
}

/* Matériel (fiche train sur la carte) */
.mat-label { display: flex; align-items: center; gap: 6px; }
.icon-edit { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid #cfdcd3; border-radius: 6px; background: #fff; color: #2f8a69; cursor: pointer; }
.icon-edit:hover, .icon-edit.on { background: #2f8a69; border-color: #2f8a69; color: #fff; }
.mat-box { padding: 8px 10px; border-left: 3px solid #2f8a69; border-radius: 6px; background: #edf3ee; font-size: 12px; }
.mat-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.mat-k { flex: 0 0 auto; color: #64736f; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.mat-seats { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mat-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid #cfdcd3; }
.mat-empty { color: #64736f; }
.link-btn { padding: 0; border: 0; background: none; color: #2f8a69; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.spec-edit { display: grid; gap: 6px; padding: 9px 10px; border-radius: 8px; background: #edf3ee; font-size: 11.5px; }
.spec-formation { display: flex; gap: 12px; font-weight: 650; }
.spec-formation label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.spec-rame { display: grid; grid-template-columns: 52px 1fr 76px; align-items: center; gap: 5px; }
.spec-rame input { min-width: 0; padding: 5px 7px; border: 1px solid #cfdcd3; border-radius: 7px; background: #fff; color: #233238; font-size: 11.5px; }
.spec-actions { display: flex; align-items: center; gap: 6px; }
.spec-total { margin-right: auto; font-weight: 750; }
.mini-btn.ghost { background: transparent; color: #2f8a69; border: 1px solid #2f8a69; }
body.dark .mat-box, body.dark .spec-edit { background: #22313a; }
body.dark .icon-edit { background: #1b2a33; border-color: #3a4d57; color: #8fd9bd; }
body.dark .spec-rame input { background: #16232b; border-color: #3a4d57; color: #e3ecec; }

/* Filtre par produit (TER, Car TER…) */
.product-filter { width: 100%; }
.product-filter > summary { list-style: none; width: fit-content; max-width: 100%; }
.product-filter > summary::-webkit-details-marker { display: none; }
.product-summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.product-summary .caret { font-size: 9px; opacity: .8; }
.product-filter[open] .caret { transform: rotate(180deg); }
.product-panel { margin-top: 6px; padding: 8px; border: 1px solid #33454f; border-radius: 10px; background: #0f1b22; }
.product-tools { display: flex; gap: 6px; margin-bottom: 6px; }
.product-tools input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid #33454f; border-radius: 7px; background: #16252e; color: #e3ecec; font-size: 11px; }
.product-tools .mini-btn[disabled] { opacity: .45; cursor: default; }
.product-list { display: grid; gap: 1px; max-height: 210px; overflow-y: auto; }
.product-opt { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; color: #c5d2d5; font-size: 11px; cursor: pointer; }
.product-opt:hover { background: #1b2a33; }
.product-opt input { accent-color: #72e0ba; margin: 0; }
.product-opt .cc { margin-right: 0; }
.product-opt .product-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-opt .n { opacity: .6; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .product-filter { flex: 0 0 auto; } }
/* Focus : choix dans la barre latérale, bandeau sur la carte */
.focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid #22323b; }
.focus-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-right: 2px; }
.focus-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.focus-chip.active { background: var(--c, var(--mint)); border-color: var(--c, var(--mint)); color: #fff; }
.focus-chip.active .dot { background: #fff; }
.focus-chip[data-focus=""].active { color: #10251e; }
.focus-manage { margin-left: auto; color: #8fa3a8; font-size: 10.5px; }
.focus-manage:hover { color: var(--mint); }
.focus-banner { position: absolute; z-index: 455; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(640px, calc(100% - 32px)); padding: 7px 8px 7px 12px; border: 1px solid var(--c); border-left-width: 4px; border-radius: 9px; background: #f8f9f4f2; color: #33464a; box-shadow: 0 3px 12px #20352d1a; font-size: 11.5px; }
.focus-banner .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.focus-banner b { white-space: nowrap; color: #17262b; }
.focus-banner span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.focus-banner button { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #4a5b5e; font-size: 16px; line-height: 1; cursor: pointer; }
.focus-banner button:hover { background: #e3e9e2; }
body.dark .focus-banner { background: #1b2a33f2; color: #c5d2d5; }
body.dark .focus-banner b { color: #eef4f4; }
@media (max-width: 760px) { .focus-banner { bottom: 50px; max-width: calc(100% - 20px); } .focus-row { flex-wrap: nowrap; overflow-x: auto; } }

/* Trois volets de filtre empilés (pays, type, produit) */
.dd-row { display: flex; flex-direction: column; gap: 6px; }
.dd-hint { flex: 1; align-self: center; color: #7f9097; font-size: 10.5px; }
.product-opt .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend-arrow { display: inline-block; width: 12px; color: #33504a; font-size: 11px; transform: rotate(-90deg); }