/* ═══════════════════════════════════════════════════════════════
       CONFIGURATION VISUELLE — couleurs principales modifiables ici
       ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   Splash PWA
   ═══════════════════════════════════════════════════════════════════════ */
.bemove-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .36s ease, visibility 0s linear .36s;
}

.bemove-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bemove-splash-center {
  display: grid;
  justify-items: center;
  gap: 22px;
}

.bemove-splash-logo {
  position: relative;
  z-index: 1;
  width: min(56vw, 255px);
  max-height: 140px;
  object-fit: contain;
}

.bemove-splash-progress {
  width: 25px;
  height: 25px;
  border: 3px solid rgba(233, 73, 134, .2);
  border-top-color: #e94986;
  border-radius: 50%;
  animation: bemoveSplashSpin .78s linear infinite;
}

.bemove-splash-status {
  color: #6d6863;
  font: 650 13px/1.1 Outfit, sans-serif;
}

.bemove-splash-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(102px, 18vh, 175px);
  background: #e94986;
}

.bemove-splash-footer {
  position: absolute;
  top: clamp(-148px, -16vw, -100px);
  left: 50%;
  width: min(88vw, 650px);
  max-height: 245px;
  transform: translateX(-50%);
  object-fit: contain;
}

.bemove-splash-credit {
  position: absolute;
  right: 18px;
  bottom: 24px;
  left: 18px;
  color: rgba(255, 255, 255, .92);
  font: 500 12px/1.2 Outfit, sans-serif;
  letter-spacing: .02em;
  text-align: center;
}

@keyframes bemoveSplashSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .bemove-splash-center { gap: 18px; }
  .bemove-splash-logo { width: min(54vw, 205px); max-height: 112px; }
  .bemove-splash-progress { width: 22px; height: 22px; border-width: 3px; }
  .bemove-splash-bottom { height: clamp(88px, 15vh, 130px); }
  .bemove-splash-footer { width: 88vw; max-height: 175px; top: -78px; }
  .bemove-splash-credit { right: 12px; bottom: 20px; left: 12px; font-size: 11px; }
}

    :root {
      --bg:        #F9F9F9;
      --surface:   #E2E2E2;
      --surface2:  #E2E2E2;
      --border:    rgba(0,0,0,0.00);
      --text:      #18160f;
      --muted:     #888580;
      --accent:    #e94986;
      --radius:    5px;
      --shadow:    0 0px 0px rgba(61,61,195,0.08);
      --shadow-lg: 0 0px 0px rgba(61,61,195,0.13);
      --op-bg:     #F9F9F9;
      --op-text:   #1a1814;
      --ink:       #0a080c;
      --font-app:  'Outfit', sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    html, body,
    button, input, select, textarea, option {
      font-family: var(--font-app);
    }
    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    /* ══ VIEWS ══ */
    .view { display: none; min-height: 100vh; flex-direction: column; }
    .view.active { display: flex; }

    /* ══ HOME ══ */
    #homeView {
      position: relative;
      min-height: 100vh;
      padding: 0;
      background: var(--bg);
      overflow: hidden;
    }

    .home-map {
      position: absolute;
      inset: 0;
      z-index: auto;
      background: #e8e8e8;
    }

    #homeMap {
      width: 100%;
      height: 100%;
      min-height: 100vh;
    }

    .home-map-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: none;
    }

    .bemove-beta-signature {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 1200;
      min-height: 38px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 9px 7px 11px;
      border: 0;
      border-radius: 5px;
      background: rgba(255,255,255,.94);
      font-family: var(--font-app);
      pointer-events: none;
    }

    .bemove-beta-signature img {
      width: auto;
      height: 22px;
      max-width: 94px;
      object-fit: contain;
    }

    .bemove-beta-signature span {
      padding: 3px 6px;
      border-radius: 3px;
      background: var(--accent);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .08em;
    }

    .home-panel {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 520px;
      min-height: 100vh;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      box-shadow: 10px 0 35px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    .sheet-drag-handle {
      display: none;
    }

    /* La recherche et les départs partagent le même volet de gauche. */
    .panel-screen { display: none; width: 100%; }
    .panel-screen.active { display: flex; }
    #homePanelHome {
      min-height: 100vh;
      height: 100vh;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
    }
    .home-panel.departures-open {
      height: 100vh;
      min-height: 0;
      padding: 0;
      justify-content: flex-start;
      overflow: hidden;
    }
    .home-panel.departures-open #stopView {
      height: 100vh;
      min-height: 0;
      flex-direction: column;
      background: var(--bg);
    }
    .home-panel.departures-open #tripView,
    .home-panel.departures-open #plannerView { height: 100%; }

    .home-inner {
      width: 100%;
      min-height: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      overflow: hidden;
    }

    .home-logo { height: 40px; width: auto; }
    .home-top {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      padding: 40px 38px 34px;
      color: #fff;
      background: var(--ink);
    }
    .home-greeting {
      max-width: 100%;
      font-size: clamp(30px, 4vw, 42px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.8px;
      overflow-wrap: anywhere;
    }
    .home-heading-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-width: 0;
    }
    .home-menu-button {
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(255,255,255,.14);
      cursor: pointer;
      transition: transform .18s ease, background .18s ease;
    }
    .home-menu-button:hover { background: rgba(255,255,255,.2); }
    .home-menu-button:active { transform: scale(.94); }
    .home-menu-button .material-icons-outlined { font-size: 25px; }
    .home-menu-backdrop {
      position: fixed;
      inset: 0;
      z-index: 3190;
      display: none;
      background: rgba(0,0,0,.34);
    }
    .home-menu-backdrop.open { display: block; }
    .home-menu {
      position: absolute;
      z-index: 3200;
      top: 76px;
      right: 18px;
      width: min(290px, calc(100% - 36px));
      display: none;
      padding: 8px;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
    }
    .home-menu.open {
      display: grid;
      animation: homeMenuIn .2s cubic-bezier(.16,1,.3,1);
    }
    @keyframes homeMenuIn {
      from { opacity: 0; transform: translateY(-7px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .home-menu-title {
      padding: 8px 10px 6px;
      font-size: 12px;
      font-weight: 800;
      color: #767676;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .home-menu button,
    .home-menu a {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 9px 10px;
      border: 0;
      border-radius: 5px;
      color: var(--ink);
      background: transparent;
      font: inherit;
      font-weight: 650;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }
    .home-menu button:hover,
    .home-menu a:hover { background: #f1f1f1; }
    .home-menu .home-menu-donation {
      color: #14833b;
      font-weight: 850;
    }
    .home-menu .home-menu-donation:hover {
      color: #0d6f30;
      background: #e9f7ee;
    }
    .home-menu .home-menu-hard-reload { color: #d42d3b; }
    .home-menu .home-menu-hard-reload:hover { background: #fff0f1; }
    .home-menu button:active,
    .home-menu a:active { transform: scale(.98); }
    .home-menu button[hidden] { display: none; }
    .home-menu .material-icons-outlined {
      flex: 0 0 24px;
      font-size: 22px;
    }
    .home-menu-version {
      padding: 9px 10px 6px;
      border-top: 1px solid #ececec;
      margin-top: 5px;
      color: #777;
      font-size: 12px;
      font-weight: 600;
    }
    .home-menu button.is-checking {
      pointer-events: none;
      color: #777;
    }
    .home-menu button.is-checking .material-icons-outlined {
      animation: homeMenuSpin .8s linear infinite;
    }
    @keyframes homeMenuSpin { to { transform: rotate(360deg); } }
    .home-content {
      flex: 1;
      min-height: 0;
      padding: 0 38px 44px;
      background: #fff;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .nearest-departure {
      position: relative;
      width: calc(100% + 76px);
      min-height: 88px;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 -38px 0;
      padding: 14px 22px;
      overflow: hidden;
      border: 0;
      border-bottom: 1px solid rgba(0,0,0,.06);
      color: var(--ink);
      background: #FCFCFC;
      font-family: var(--font-app);
      text-align: left;
      cursor: pointer;
      transition: background .18s ease, transform .16s ease;
    }
    .nearest-departure[hidden] { display: none; }
    .nearest-departure:hover { background: #F8F8F8; }
    .nearest-departure:active { transform: scale(.992); }
    .nearest-departure-logo {
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      background: #dedede;
      transition: background-color .2s ease;
    }
    .nearest-departure-logo img {
      width: auto;
      height: auto;
      max-width: 45px;
      max-height: 34px;
      object-fit: contain;
    }
    .nearest-departure.is-loading {
      cursor: default;
      pointer-events: none;
    }
    .nearest-departure.is-loading::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.65) 48%,
        transparent 66%
      );
      transform: translateX(-120%);
      animation: nearestDepartureShimmer 1.25s ease-in-out infinite;
    }
    .nearest-departure.is-loading .nearest-departure-logo,
    .nearest-departure.is-loading .nearest-departure-stop,
    .nearest-departure.is-loading .nearest-departure-line,
    .nearest-departure.is-loading .nearest-departure-destination,
    .nearest-departure.is-loading .nearest-departure-countdown {
      color: transparent !important;
      background: #d8d8d8 !important;
      border-radius: 4px;
    }
    .nearest-departure.is-loading .nearest-departure-stop { width: 132px; }
    .nearest-departure.is-loading .nearest-departure-destination { width: min(190px, 52vw); }
    .nearest-departure.is-loading .nearest-departure-countdown {
      width: 58px;
      height: 22px;
    }
    @keyframes nearestDepartureShimmer {
      to { transform: translateX(120%); }
    }
    .nearest-departure-main {
      min-width: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
    }
    .nearest-departure-stop {
      overflow: hidden;
      color: #6b6b6b;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nearest-departure-service {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nearest-departure-line {
      min-width: 42px;
      min-height: 32px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      border-radius: 3px;
      font-size: 19px;
      font-weight: 900;
      line-height: 1;
    }
    .nearest-departure-destination {
      min-width: 0;
      overflow: hidden;
      font-size: 17px;
      font-weight: 850;
      line-height: 1.08;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nearest-departure-countdown {
      min-width: 70px;
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 21px;
      font-weight: 900;
      line-height: 1;
      text-align: right;
      white-space: nowrap;
    }
    .nearest-departure-countdown.is-date {
      max-width: 125px;
      font-size: 16px;
      line-height: 1.12;
      white-space: normal;
    }
    .quick-access-section {
      width: calc(100% + 76px);
      margin: 0 -38px 22px;
    }
    .quick-access-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
    }
    .quick-route-card {
      position: relative;
      min-width: 0;
      min-height: 126px;
      overflow: hidden;
      color: var(--ink);
      background: #EEEEEE;
    }
    .quick-route-card:nth-child(2) { background: #F5F5F5; }
    .quick-route-card:only-child,
    .quick-route-state:only-child {
      grid-column: 1 / -1;
    }
    .quick-route-slider {
      width: 100%;
      height: 100%;
      min-height: 126px;
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      touch-action: pan-x;
    }
    .quick-route-slider::-webkit-scrollbar { display: none; }
    .quick-route-slide {
      width: 100%;
      min-width: 100%;
      min-height: 126px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      gap: 8px;
      padding: 13px;
      border: 0;
      color: inherit;
      background: transparent;
      text-align: left;
      cursor: pointer;
      scroll-snap-align: start;
    }
    .quick-route-slide:active { transform: scale(.985); }
    .quick-route-arrow {
      position: absolute;
      z-index: 3;
      top: 50%;
      width: 28px;
      height: 38px;
      display: none;
      place-items: center;
      border: 0;
      color: #222;
      background: rgba(255,255,255,.82);
      cursor: pointer;
      transform: translateY(-50%);
    }
    .quick-route-arrow.prev { left: 0; border-radius: 0 5px 5px 0; }
    .quick-route-arrow.next { right: 0; border-radius: 5px 0 0 5px; }
    .quick-route-arrow .material-icons-outlined { font-size: 20px; }
    @media (hover: hover) and (pointer: fine) {
      .quick-route-card.has-slides:hover .quick-route-arrow { display: grid; }
    }
    .quick-route-name {
      overflow: hidden;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .quick-route-duration {
      font-size: 24px;
      font-weight: 900;
      line-height: 1;
    }
    .quick-route-lines {
      min-height: 24px;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow: hidden;
    }
    .quick-route-line {
      min-width: 27px;
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 6px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }
    .quick-route-walk {
      display: inline-flex;
      align-items: center;
      color: #555;
    }
    .quick-route-walk .material-icons-outlined { font-size: 18px; }
    .quick-route-times {
      color: #666;
      font-size: 11px;
      font-weight: 700;
    }
    .quick-departure-kicker {
      color: #666;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .quick-departure-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .quick-departure-destination {
      min-width: 0;
      overflow: hidden;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.05;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .quick-departure-countdown {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
    }
    .quick-route-dots {
      position: absolute;
      z-index: 2;
      right: 8px;
      bottom: 7px;
      display: flex;
      gap: 4px;
      pointer-events: none;
    }
    .quick-route-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(0,0,0,.22);
    }
    .quick-route-dot.active { background: rgba(0,0,0,.72); }
    .quick-route-state {
      min-height: 126px;
      display: grid;
      place-items: center;
      padding: 14px;
      border-radius: 0;
      color: #777;
      background: #EEEEEE;
      font-size: 12px;
      text-align: center;
    }
    .quick-route-state:nth-child(2) { background: #F5F5F5; }
    .quick-route-placeholder {
      gap: 10px;
      align-content: center;
    }
    .quick-route-placeholder-name {
      font-size: 15px;
      font-weight: 800;
      color: #1f1f1f;
    }
    .quick-route-placeholder-btn {
      min-width: 98px;
      min-height: 34px;
      padding: 6px 14px;
      border: 0;
      border-radius: 999px;
      background: #111;
      color: #fff;
      font: 800 12px/1 var(--font-app);
      cursor: pointer;
    }
    .quick-route-placeholder-btn:active { transform: scale(.97); }
    .quick-route-state.loading {
      position: relative;
      overflow: hidden;
    }
    .quick-route-state.loading::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.65) 48%, transparent 68%);
      transform: translateX(-110%);
      animation: nearestDepartureShimmer 1.25s ease-in-out infinite;
    }
    .quick-access-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 10px 38px 5px;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    .quick-access-row::-webkit-scrollbar { display: none; }
    .quick-access-chip {
      min-height: 42px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 190px;
      padding: 7px 14px 7px 9px;
      border: 0;
      border-radius: 999px;
      color: var(--ink);
      background: #ededed;
      font: 750 13px/1 var(--font-app);
      cursor: pointer;
      scroll-snap-align: start;
    }
    .quick-access-chip:hover { background: #e4e4e4; }
    .quick-access-chip:active { transform: scale(.97); }
    .quick-access-chip .material-icons-outlined {
      width: 29px;
      height: 29px;
      display: grid;
      flex: 0 0 29px;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #111;
      font-size: 18px;
    }
    .quick-access-chip span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .quick-access-chip.add {
      width: 42px;
      max-width: 42px;
      padding: 6px;
      justify-content: center;
      color: #555;
    }
    .quick-access-chip.add .material-icons-outlined {
      color: #333;
      background: transparent;
    }
    .quick-access-empty {
      padding: 8px 3px;
      color: #777;
      font-size: 12px;
    }
    .home-top .search-bar input {
      background: #fff;
      border-color: transparent;
      color: var(--ink);
      box-shadow: 0 5px 20px rgba(0,0,0,.18);
    }
    .home-top .search-bar input:focus {
      border-color: rgba(255,255,255,.65);
      box-shadow: 0 6px 24px rgba(0,0,0,.25);
    }

    .home-tagline {
      display: none;
      text-align: center;
      flex-direction: column;
      gap: 4px;
      margin-top: -10px;
    }

    .home-tagline h1 {
      font-size: clamp(22px,4vw,34px);
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.1;
    }

    .home-tagline p {
      font-size: clamp(14px,2vw,16px);
      color: var(--muted);
      font-weight: 400;
    }

    .home-location-btn {
      position: absolute;
      right: 18px;
      bottom: 34px;
      z-index: 1000;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 50%;
      background: #111;
      color: #fff;
      box-shadow: 0 3px 15px rgba(0,0,0,0.24);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .15s, box-shadow .15s;
    }

    .home-location-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 18px rgba(0,0,0,0.22);
    }

    .home-location-btn .material-icons-outlined {
      font-size: 22px;
    }

    .map-controls-btn {
      position: absolute;
      right: 18px;
      bottom: 86px;
      z-index: 1000;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 8px;
      background: #111;
      color: #fff;
      box-shadow: 0 3px 15px rgba(0,0,0,.24);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .map-controls-panel {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 3100;
      width: min(480px, calc(100vw - 28px));
      max-height: min(720px, calc(100dvh - 28px));
      padding: 18px;
      overflow-y: auto;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 60px rgba(0,0,0,.34);
      font-family: 'Outfit', sans-serif;
      display: none;
      transform: translate(-50%, -50%);
    }
    .map-controls-panel.open { display: block; }
    .pwa-install-button {
      width: 100%;
      min-height: 42px;
      margin: 12px 0;
      padding: 8px 12px;
      border: 0;
      border-radius: 5px;
      background: #000;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .pwa-install-button[hidden] { display: none; }
    .pwa-install-button:active { transform: scale(.98); }
    .pwa-install-button .material-icons-outlined { font-size: 20px; }
    .map-controls-backdrop {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: none;
      background: rgba(0,0,0,.48);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .map-controls-backdrop.open { display: block; }
    .map-controls-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .map-controls-title {
      font-size: 18px;
      font-weight: 900;
    }
    .map-controls-close {
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 6px;
      background: #eee;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .map-layer-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      margin-bottom: 12px;
    }
    .map-layer-toggle {
      padding: 7px 5px;
      border: 1px solid #d8d8d8;
      border-radius: 5px;
      background: #f4f4f4;
      font: 700 11px/1 'Outfit', sans-serif;
      cursor: pointer;
    }
    .map-layer-toggle.active {
      border-color: #111;
      background: #111;
      color: #fff;
    }
    .vehicle-search-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 5px;
      margin-top: 6px;
    }
    .vehicle-search-row input {
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      outline: none;
      font: 600 12px 'Outfit', sans-serif;
    }
    .vehicle-search-row button {
      padding: 8px 10px;
      border: none;
      border-radius: 5px;
      background: #111;
      color: #fff;
      font: 800 11px 'Outfit', sans-serif;
      cursor: pointer;
    }
    .vehicle-search-results {
      max-height: 190px;
      margin-top: 8px;
      overflow-y: auto;
    }
    .line-search-results {
      max-height: 210px;
      margin-top: 5px;
      overflow-y: auto;
      border-radius: 5px;
      background: #fafafa;
    }
    .line-search-result {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: none;
      border-top: 1px solid #e8e8e8;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }
    .line-search-result:first-child { border-top: none; }
    .line-search-badge {
      min-width: 38px;
      padding: 5px 7px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }
    .line-search-info strong {
      display: block;
      font-size: 11px;
      line-height: 1.15;
    }
    .line-search-info span {
      display: block;
      margin-top: 2px;
      color: #777;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .vehicle-search-result {
      width: 100%;
      padding: 8px;
      border: none;
      border-top: 1px solid #eee;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }
    .vehicle-search-result strong { font-size: 12px; }
    .vehicle-search-result span {
      display: block;
      margin-top: 2px;
      color: #777;
      font-size: 10px;
    }
    .vehicle-search-message {
      padding: 9px 2px 2px;
      color: #777;
      font-size: 11px;
    }

    .map-vehicle-marker.search-highlight .map-vehicle-disc {
      outline: 4px solid #e11d48;
      outline-offset: 3px;
    }

    .home-map-status {
      position: absolute;
      left: min(538px, calc(100vw - 278px));
      bottom: 18px;
      z-index: 1000;
      max-width: 260px;
      padding: 8px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 3px 15px rgba(0,0,0,0.12);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      pointer-events: none;
    }

    .map-stop-marker {
      position: absolute;
      top: 0;
      left: 0;
      width: 180px;
      height: 70px;
      overflow: visible;
      will-change: transform;
      pointer-events: auto;
    }

    .map-stop-labels {
      position: absolute;
      left: 50%;
      bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transform: translateX(-50%);
      white-space: nowrap;
      pointer-events: none;
      transition: left .34s cubic-bezier(.2,.8,.2,1), bottom .34s cubic-bezier(.2,.8,.2,1);
    }
    .home-map-status.panel-collapsed { left: 18px; }

    .map-stop-name {
      max-width: 175px;
      padding: 5px 9px;
      overflow: hidden;
      border-radius: 5px;
      background: #050505;
      color: #fff;
      font: 800 11px/1.15 'Outfit', sans-serif;
      text-overflow: ellipsis;
      box-shadow: none;
    }

    .map-stop-operator {
      padding: 2px 7px;
      border-radius: 4px;
      font: 900 9px/1.2 'Outfit', sans-serif;
      letter-spacing: .35px;
      text-transform: uppercase;
      box-shadow: none;
    }

    .map-stop-disc {
      position: absolute;
      left: 50%;
      bottom: -13px;
      width: 26px;
      height: 26px;
      border: 5px solid #050505;
      border-radius: 50%;
      background: #fff;
      transform: translateX(-50%);
      box-shadow: none;
    }

    .map-stop-marker.label-hidden .map-stop-labels { display: none; }
    .map-stops-compact .map-stop-marker { width: 14px; height: 14px; }
    .map-stops-compact .map-stop-labels { display: none; }
    .map-stops-compact .map-stop-disc {
      bottom: -5px;
      width: 10px;
      height: 10px;
      border-width: 2px;
      background: var(--operator-color, #777);
      box-shadow: none;
    }

    .map-vehicle-marker {
      position: absolute;
      top: 0;
      left: 0;
      width: 46px;
      height: 54px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: auto;
      will-change: transform;
    }
    .map-vehicle-line {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 3;
      min-width: 28px;
      max-width: 52px;
      padding: 2px 6px;
      transform: translateX(-50%);
      overflow: hidden;
      border-radius: 4px;
      font: 900 11px/1.2 'Outfit', sans-serif;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-shadow: none;
    }
    .map-vehicle-pulse {
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 40px;
      height: 40px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: var(--vehicle-color);
      opacity: .52;
      filter: saturate(1.35);
      animation: vehiclePulse 1.35s ease-out infinite;
    }
    .map-vehicle-pulse::after {
      content: '';
      position: absolute;
      inset: 4px;
      border: 3px solid var(--vehicle-color);
      border-radius: inherit;
      opacity: .75;
      animation: vehiclePulseInner 1.35s .32s ease-out infinite;
    }
    .map-vehicle-disc {
      position: relative;
      z-index: 2;
      width: 30px;
      height: 30px;
      margin-bottom: 6px;
      border: none;
      border-radius: 50%;
      background: var(--vehicle-color);
      box-shadow: none;
      color: var(--vehicle-text-color);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .map-vehicle-disc .material-icons-outlined {
      font-size: 18px;
      line-height: 1;
    }
    .map-vehicle-marker.estimated .map-vehicle-line {
      opacity: .82;
    }
    .map-vehicle-marker.estimated .map-vehicle-disc {
      opacity: .78;
      background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.16) 0 3px,
        transparent 3px 6px
      );
    }
    .map-vehicles-compact .map-vehicle-marker { width: 12px; height: 12px; }
    .map-vehicles-compact .map-vehicle-line,
    .map-vehicles-compact .map-vehicle-pulse,
    .map-vehicles-compact .map-vehicle-disc .material-icons-outlined {
      display: none;
    }
    .map-vehicles-compact .map-vehicle-disc {
      width: 10px;
      height: 10px;
      margin: 0;
      border: 2px solid #111;
      opacity: 1;
      background-image: none;
      box-shadow: none;
    }
    .map-stops-hidden .map-stop-marker { display: none; }
    .map-vehicles-hidden .map-vehicle-marker { display: none; }
    @keyframes vehiclePulse {
      0% { transform: translateX(-50%) scale(.48); opacity: .72; }
      78%, 100% { transform: translateX(-50%) scale(1.85); opacity: 0; }
    }
    @keyframes vehiclePulseInner {
      0% { transform: scale(.55); opacity: .9; }
      78%, 100% { transform: scale(1.65); opacity: 0; }
    }

    .map-popup-name {
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: #18160f;
    }

    .map-popup-sub {
      margin-top: 2px;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      color: #777;
    }

    .map-popup-btn {
      margin-top: 8px;
      width: 100%;
      padding: 7px 10px;
      border: none;
      border-radius: 7px;
      background: #18160f;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .vehicle-popup {
      min-width: 205px;
      font-family: 'Outfit', sans-serif;
    }
    .vehicle-popup-top {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px;
    }
    .vehicle-popup-line {
      min-width: 38px;
      padding: 5px 8px;
      border-radius: 5px;
      font-size: 15px;
      font-weight: 900;
      text-align: center;
    }
    .vehicle-popup-destination {
      min-width: 0;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
    }
    .vehicle-popup-meta {
      margin-top: 4px;
      color: #777;
      font-size: 11px;
      font-weight: 600;
    }
    .vehicle-popup-operator {
      display: inline-flex;
      margin-top: 7px;
      padding: 3px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    /* Search bar */
    .search-bar { width: 100%; position: relative; }
    .search-bar input {
      width: 100%;
      font-family: 'Outfit', sans-serif;
      font-size: 17px;
      font-weight: 500;
      padding: 14px 52px 14px 48px;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      outline: none;
      box-shadow: var(--shadow);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .search-bar input:focus { border-color: rgba(61,61,195,0.25); box-shadow: var(--shadow-lg); }
    .search-bar input::placeholder { color: var(--muted); }
    .search-bar .s-icon {
      position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
      font-size: 22px; color: var(--muted); pointer-events: none; user-select: none;
    }
    .search-bar .s-clear {
      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      font-size: 22px; color: var(--muted); cursor: pointer; display: none;
      background: none; border: none; padding: 4px; border-radius: 50%;
      transition: background 0.15s;
    }
    .search-bar .s-clear:hover { background: var(--surface2); }

    /* Results dropdown */
    .search-results {
      position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 100;
      background: var(--bg);
      border-radius: 5px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      display: none;
      max-height: 70vh;
      overflow-y: auto;
      color: var(--text);
    }
    .search-results.open { display: block; }
    .res-section-title {
      padding: 10px 16px 6px;
      font-size: 10px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1.2px;
    }
    .res-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px; cursor: pointer; transition: background 0.1s;
      border-top: 1px solid var(--border);
    }
    .res-item:first-of-type { border-top: none; }
    .res-item:hover, .res-item:active { background: var(--surface); }
    .res-item-icon {
      width: 40px; height: 40px; border-radius: 50px 50px 50px 50px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; overflow: hidden;
    }
    .res-item-icon img { height: 22px; width: auto; object-fit: contain; max-width: 32px; }
    .res-item-icon.stop-icon { background: var(--surface2); }
    .res-item-info { flex: 1; min-width: 0; }
    .res-item-name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .res-item-sub  { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 1px; }
    .res-item-arrow { font-size: 18px; color: var(--muted); flex-shrink: 0; }
    .res-favorite-btn {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #8a8a8a;
      cursor: pointer;
      flex-shrink: 0;
    }
    .res-favorite-btn .material-icons-outlined { font-size: 19px; }
    .res-favorite-btn.active {
      color: #f59e0b;
      background: rgba(245,158,11,.12);
    }
    .res-favorite-btn:hover { background: rgba(0,0,0,.06); }
    .res-item.disabled { opacity: 0.45; cursor: default; }
    .res-item.disabled:hover { background: var(--surface); }
    .res-loading, .res-empty {
      padding: 20px 16px; text-align: center; font-size: 14px; color: var(--muted);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .res-spinner {
      width: 16px; height: 16px; border: 2px solid var(--border);
      border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite;
    }

    /* Lieux récents — même langage visuel que la recherche */
    .home-suggestions {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .sug-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }
    .sug-head-left {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .sug-switch {
      min-height: 32px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #8f8f8f;
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
    }
    .sug-switch.active {
      color: #111;
      font-weight: 900;
    }
    .sug-clear {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 6px;
      border: 0;
      color: var(--muted);
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .sug-clear:hover { color: var(--text); }
    .sug-clear .material-icons-outlined { font-size: 15px; }
    .sug-list {
      overflow: hidden;
      border-top: 1px solid rgba(0,0,0,.08);
      border-bottom: 1px solid rgba(0,0,0,.08);
      background: #fff;
    }
    .recent-empty {
      padding: 15px 16px;
      font-size: 13px;
    }
    .recent-item {
      width: 100%;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.08);
      color: var(--text);
      background: #fff;
      text-align: left;
      font-family: var(--font-app);
    }
    .recent-item:first-child { border-top: 0; }
    .recent-item .res-item-icon {
      width: 36px;
      height: 36px;
    }
    .recent-item .res-item-icon img {
      width: auto;
      height: auto;
      max-width: 25px;
      max-height: 18px;
      object-fit: contain;
    }

    /* ══ STOP VIEW ══ */
    #stopView { background: #fff; }

    /* Header opérateur */
    .stop-header {
      background: #000;
      color: #fff;
      border-radius: 0;
      padding: 0 16px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 50;
      overflow: hidden;
      isolation: isolate;
    }
    .stop-header-route {
      position: absolute;
      z-index: 0;
      top: -35px;
      left: -10px;
      width: 128px;
      height: 143px;
      border-right: 25px solid var(--op-bg, #e94986);
      border-bottom: 25px solid var(--op-bg, #e94986);
      border-bottom-right-radius: 64px;
      pointer-events: none;
    }
    .stop-header-inner {
      max-width: 700px; margin: 0 auto;
      min-height: 132px; height: auto; padding: 14px 0 13px;
      position: relative;
      z-index: 1;
    }
    .stop-header-main {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 78px;
    }
    .back-btn {
      background: rgba(255,255,255,0.12); border: none; cursor: pointer; padding: 9px;
      border-radius: 6px; display: flex; align-items: center; justify-content: center;
      color: #fff; transition: background 0.15s; flex-shrink: 0;
    }
    .back-btn:hover { background: rgba(0,0,0,0.15); }
    .back-btn .material-icons-outlined { font-size: 22px; }
    .stop-header-logo-shell {
      width: 72px;
      height: 72px;
      padding: 5px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border: 7px solid #fff;
      border-radius: 50%;
      background: #000;
    }
    .stop-header-op-logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .stop-header-name {
      font-size: clamp(21px, 2.5vw, 27px); font-weight: 900; flex: 1; min-width: 0;
      line-height: .98;
      letter-spacing: -.55px;
      overflow: hidden; text-overflow: ellipsis;
      color: #fff;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .header-favorite-btn {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 6px;
      background: rgba(255,255,255,.14);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .header-favorite-btn.active,
    .trip-material-btn.active {
      background: rgba(255,208,0,.25);
      color: #ffd400;
    }
    .stop-header-datetime {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      margin: 6px auto 0;
      color: #fff;
      text-align: center;
    }
    .stop-header-date-input,
    .stop-header-time-input {
      width: auto;
      min-width: 0;
      padding: 2px 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      color-scheme: dark;
      cursor: pointer;
    }
    .stop-header-date-input { width: 126px; }
    .stop-header-time-input { width: 70px; }
    .stop-header-date-input::-webkit-calendar-picker-indicator,
    .stop-header-time-input::-webkit-calendar-picker-indicator {
      opacity: .78;
      cursor: pointer;
    }
    .stop-header-datetime-separator {
      color: rgba(255,255,255,.62);
      font-weight: 800;
    }
    .stop-tools { display: flex; gap: 6px; flex-shrink: 0; }
    .tool-btn {
      background: rgba(255,255,255,0.12); border: none; border-radius: 6px; padding: 8px 10px;
      cursor: pointer; display: flex; align-items: center; gap: 5px;
      font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
      color: #fff; transition: all 0.15s; white-space: nowrap;
    }
    .tool-btn .material-icons-outlined { font-size: 16px; }
    .tool-btn:hover { background: rgba(0,0,0,0.22); }

	.stop-body {
		flex: 1;
		overflow-y: auto;
		padding: 0;
        background: #fff;
	}

    .stop-body-inner {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px 0;
	}

    /* Refresh info */
    .refresh-info {
      display: flex; align-items: center; justify-content: space-between; padding: 0 4px;
    }
    .refresh-time { font-size: 12px; color: var(--muted); font-weight: 500; }
    .refresh-btn {
      background: none; border: none; cursor: pointer; padding: 4px 8px;
      border-radius: 8px; display: flex; align-items: center; gap: 4px;
      font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600;
      color: var(--muted); transition: all 0.15s;
    }
    .refresh-btn:hover { background: var(--surface2); color: var(--text); }
    .refresh-btn .material-icons-outlined { font-size: 15px; }
    .refresh-btn.spinning .material-icons-outlined { animation: spin 0.7s linear infinite; }

    /* ══ TABBAR STIB ══ */
    .stib-tabs { display: none; gap: 4px; padding: 0 4px; }
    .stib-tabs.visible { display: flex; }
    .stib-tab {
      flex: 1; padding: 8px 12px; border: none; border-radius: 5px;
      font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700;
      background: var(--surface); color: var(--muted); cursor: pointer; transition: all 0.15s;
    }
    .stib-tab.active { background: #0077C0; color: #fff; }

    /* Datetime picker */
    .datetime-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
    .dt-input {
      font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
      padding: 6px 10px; background: var(--surface); border: none; border-radius: 5px;
      color: var(--text); outline: none; cursor: pointer;
      box-shadow: var(--shadow);
    }
    .dt-input:focus { outline: 2px solid rgba(61,61,195,0.15); }
    .dt-now-btn {
      font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
      padding: 6px 12px; background: var(--surface); border: none; border-radius: 5px;
      color: var(--muted); cursor: pointer; transition: all 0.15s; white-space: nowrap;
      display: flex; align-items: center; gap: 4px; box-shadow: var(--shadow);
    }
    .dt-now-btn:hover { background: var(--surface2); color: var(--text); }
    .dt-now-btn .material-icons-outlined { font-size: 14px; }
    .dt-active { color: var(--text) !important; background: var(--surface2) !important; }

    .departure-filters {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 16px;
    }

    .departure-filter-row {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 30px;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }

    .departure-filter-track {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .departure-filter-track::-webkit-scrollbar { display: none; }

    .departure-filter-option {
      flex: 0 0 auto;
      min-height: 37px;
      max-width: 220px;
      overflow: hidden;
      padding: 8px 14px;
      border: 1px solid transparent;
      border-radius: 3px;
      background: #ececef;
      color: #17151a;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      scroll-snap-align: start;
      transition:
        border-radius .22s ease,
        background-color .18s ease,
        color .18s ease,
        transform .24s cubic-bezier(.22, .75, .32, 1);
    }

    .departure-filter-option:hover {
      background: #dedee2;
    }

    .departure-filter-option.selected {
      border-color: var(--filter-color, var(--op-bg, #17151a));
      border-radius: 999px;
      background: var(--filter-color, var(--op-bg, #17151a));
      color: var(--filter-text, var(--op-text, #fff));
      animation: departureFilterBounce .34s cubic-bezier(.22, .75, .32, 1);
    }

    .departure-filter-option:active {
      transform: scale(.93);
    }

    .departure-filter-arrow {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #ececef;
      color: #17151a;
      cursor: pointer;
    }

    .departure-filter-arrow:hover { background: #dcdce1; }
    .departure-filter-arrow .material-icons-outlined { font-size: 19px; }

    @keyframes departureFilterBounce {
      0% { transform: scale(1); }
      42% { transform: scale(.92); }
      100% { transform: scale(1); }
    }

    @media (hover: none) and (pointer: coarse) {
      .departure-filter-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .departure-filter-arrow { display: none; }
    }

    .departure-page-button {
      width: calc(100% - 32px);
      min-height: 32px;
      margin: 3px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #555158;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: color .16s ease, transform .16s ease, opacity .16s ease;
    }
    .departure-page-button[hidden] { display: none; }
    .departure-page-button:hover { background: transparent; color: #000; }
    .departure-page-button:active { transform: scale(.98); }
    .departure-page-button:disabled { opacity: .45; cursor: wait; }
    .departure-page-button .material-icons-outlined { font-size: 19px; }

    /* Day separator */
    .day-sep { display: flex; align-items: center; gap: 10px; padding: 12px 2px 6px; }
    .day-sep-line { flex: 1; height: 1px; background: var(--border); }
    .day-sep-label {
      font-size: 11px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
    }

.dep-card + .dep-card {
		margin-top: 0px;
	}

    .dep-card {
		background: #ffffff;
		border-radius: 0;
		padding: 13px 15px;
		position: relative;
		overflow: hidden;
		animation: fadeUp 0.18s ease both;
	}

	.dep-card:nth-child(even) {
		background: #F0F0F0;
	}

	.dep-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 24px;
		width: 53px;
		height: 18px;
		background: var(--line-color);
	}

	.dep-card.canceled {
		opacity: 0.45;
	}

	@keyframes fadeUp {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.dep-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 11px;
	}

	.dep-left {
		display: flex;
		align-items: flex-start;
		gap: 9px;
		flex: 1;
		min-width: 0;
	}

	.dep-mode {
		width: 40px;
		height: 40px;
		border-radius: 999px;
		background: #fff;
		border: 5px solid #000;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative;
		z-index: 2;
	}

	.dep-mode .material-icons-outlined {
		font-size: 20px;
		color: #111;
	}

	.dep-line {
		position: relative;
		min-width: 70px;
		height: 38px;
		padding: 0 14px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
        gap: 6px;
		flex-shrink: 0;
		z-index: 2;
		margin-left: 6px;
	}

	.dep-line::before {
		content: '';
		position: absolute;
		left: -7px;
		top: 50%;
		width: 18px;
		height: 18px;
		background: inherit;
		transform: translateY(-50%) rotate(45deg);
		border-radius: 2px;
	}

	.dep-line-num {
		position: relative;
		z-index: 2;
		font-size: 20px;
		font-weight: 900;
		letter-spacing: -1px;
        white-space: nowrap;
	}
    .dep-line-logo {
      position: relative;
      z-index: 2;
      display: block;
      flex: 0 0 auto;
      width: auto;
      height: auto;
      max-width: 25px;
      max-height: 18px;
      object-fit: contain;
    }
    .dep-line-divider {
      position: relative;
      z-index: 2;
      width: 1px;
      height: 17px;
      background: currentColor;
      opacity: .35;
    }

	.dep-main {
		display: none;
	}

	.dep-to {
		font-size: 11px;
		font-weight: 700;
		color: #444;
		margin-bottom: 2px;
		text-transform: lowercase;
	}

	.dep-dest {
		font-size: 22px;
		line-height: 0.98;
		font-weight: 900;
		letter-spacing: -1px;
		color: #111;
		white-space: normal;
		word-break: break-word;
		overflow: visible;
		text-overflow: unset;
	}

	.dep-dest.canceled {
		text-decoration: line-through;
		color: #dc2626;
	}

	.dep-time-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
	}

	.dep-time {
		font-size: 22px;
		line-height: 1;
		font-weight: 900;
		letter-spacing: -1px;
		color: #111;
	}

    .dep-time-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }

    .dep-time.delayed {
      color: #777;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
    }

    .dep-delay-inline {
      color: #dc2626;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }

    .dep-real-time {
      margin-top: 3px;
      color: #dc2626;
      font-size: 13px;
      font-weight: 900;
    }

    .dep-realtime-signal {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #159447;
    }

    .dep-realtime-signal .material-icons-outlined {
      font-size: 20px;
      animation: realtimeSignal 1.45s ease-in-out infinite;
      transform-origin: center;
    }

    @keyframes realtimeSignal {
      0%, 100% { opacity: .52; transform: scale(.88); }
      50% { opacity: 1; transform: scale(1.12); }
    }

    .dep-route-long {
      margin-top: 4px;
      color: #666;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.2;
    }

	.dep-delay {
		margin-top: 3px;
		font-size: 14px;
		font-weight: 800;
		color: #d97706;
	}

	.dep-bottom {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-top: 0px;
		padding-left: 49px;
	}

	.dep-bottom-pills {
		display: flex;
		gap: 6px;
		flex-wrap: wrap;
	}

    .dep-pill {
		height: 29px;
		padding: 0 11px;
		border-radius: 5px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 12px;
		font-weight: 800;
		font-family: 'Outfit', sans-serif;
	}

	.dep-pill .material-icons-outlined {
		font-size: 15px;
	}

	.dep-pill.line {
		background: var(--line-color);
		color: var(--line-text);
	}

    .dep-pill.light {
		background: #fff;
		color: #111;
	}

    /* ══ DÉTAIL DU TRAJET DANS LE VOLET ══ */
    #tripView {
      min-height: 0;
      height: 100vh;
      flex-direction: column;
      background: var(--bg);
      --trip-color: #888;
      --trip-bar-w: 12px;
      --trip-bar-x: 22px;
    }
    .trip-header {
      position: sticky;
      top: 0;
      z-index: 50;
      flex-shrink: 0;
      padding: 0 16px 5px;
      background: #000;
      color: #fff;
      border-radius: 0;
      overflow: hidden;
      isolation: isolate;
    }
    .trip-header-route {
      position: absolute;
      z-index: 0;
      top: -35px;
      left: -10px;
      width: 128px;
      height: 143px;
      border-right: 25px solid var(--trip-color);
      border-bottom: 25px solid var(--trip-color);
      border-bottom-right-radius: 64px;
      pointer-events: none;
    }
    .trip-header-inner {
      max-width: 700px;
      min-height: 106px;
      margin: 0 auto;
      padding: 14px 0 8px;
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .trip-header .back-btn {
      color: #fff;
      background: rgba(255,255,255,.12);
    }
    .trip-header-logo-shell {
      width: 72px;
      height: 72px;
      padding: 5px;
      box-sizing: border-box;
      flex: 0 0 72px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 7px solid #fff;
      border-radius: 50%;
      background: #000;
    }
    .trip-header-logo-shell[hidden] { display: none; }
    .trip-header-logo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .trip-header-line-stack {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
    .trip-header-line {
      min-width: 0;
      height: auto;
      padding: 0;
      display: none;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      color: #fff;
      font-size: clamp(25px, 4vw, 32px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
    }
    .trip-header-direction {
      margin-top: 3px;
      color: rgba(255,255,255,.72);
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
    }
    .trip-header-info { flex: 1; min-width: 0; }
    .trip-header-headsign {
      color: #fff;
      font-size: 19px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .trip-header-sub {
      margin-top: 2px;
      color: rgba(255,255,255,.65);
      font-size: 12px;
      font-weight: 600;
    }
    .trip-material-btn {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 6px;
      background: rgba(255,255,255,.14);
      color: #fff;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .trip-material-btn.visible { display: flex; }
    .trip-header-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .trip-material-btn.is-refreshing .material-icons-outlined {
      animation: spin .75s linear infinite;
    }
    .trip-other-departures {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 5px;
      width: calc(100% + 32px);
      margin: -3px -16px 0;
      padding: 4px 16px 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .trip-other-departures[hidden] { display: none; }
    .trip-other-departures::-webkit-scrollbar { display: none; }
    .trip-departure-time {
      min-width: 58px;
      min-height: 34px;
      flex: 0 0 auto;
      padding: 6px 12px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: transparent;
      font: 800 16px/1 var(--font-app);
      cursor: pointer;
      transition: color .16s ease, background-color .16s ease, transform .16s ease;
    }
    .trip-departure-time.selected {
      color: #080808;
      background: #fff;
    }
    .trip-body {
      flex: 1;
      min-height: 0;
      height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px 16px 40px;
    }
    .trip-timeline {
      position: relative;
      min-height: 100%;
      padding-left: calc(var(--trip-bar-x) + var(--trip-bar-w) + 24px);
    }
    .trip-timeline::before {
      content: '';
      position: absolute;
      left: var(--trip-bar-x);
      top: -8px;
      bottom: -40px;
      width: var(--trip-bar-w);
      background: var(--trip-color);
    }
    .trip-stop-row {
      position: relative;
      min-height: 62px;
      padding: 8px 0;
      animation: fadeUp .18s ease both;
    }
    .trip-stop-disk {
      position: absolute;
      left: calc(-1 * (var(--trip-bar-w) + 24px) + var(--trip-bar-w) / 2 - 15px);
      top: 50%;
      z-index: 2;
      width: 30px;
      height: 30px;
      transform: translateY(-50%);
      border: 6px solid #000;
      border-radius: 50%;
      background: #fff;
    }
    .trip-stop-disk.next {
      background: #fff;
      box-shadow: none;
    }
    .trip-stop-disk.alert {
      border: none;
      border-radius: 2px;
      background: #050505;
      transform: translateY(-50%) rotate(45deg);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .trip-stop-disk.alert .material-icons-outlined {
      color: #ffd400;
      font-size: 18px;
      transform: rotate(-45deg);
    }
    .trip-stop-disk.alert.next::after { display: none; }
    .trip-stop-disk.next::after {
      content: '';
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      background: #ef4444;
      animation: tripCurrentPulse 1.1s ease-in-out infinite;
    }
    @keyframes tripCurrentPulse {
      0%, 100% { transform: scale(.72); opacity: .65; }
      50% { transform: scale(1); opacity: 1; }
    }
    .trip-stop-card {
      padding: 4px 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .trip-stop-card.past,
    .trip-stop-card.canceled { opacity: .42; }
    .trip-stop-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .trip-stop-name {
      flex: 1;
      min-width: 0;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.2;
    }
    .trip-stop-name.canceled {
      color: #dc2626;
      text-decoration: line-through;
    }
    .trip-times-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
    }
    .trip-time-arr { color: var(--muted); font-size: 9px; font-weight: 600; line-height: 1; }
    .trip-times-row { display: flex; align-items: center; gap: 4px; }
    .trip-time-dep,
    .trip-time-real { font-size: 18px; font-weight: 900; white-space: nowrap; }
    .trip-time-dep.delayed { font-size: 13px; opacity: .45; text-decoration: line-through; }
    .trip-delay { color: #dc2626; font-size: 11px; font-weight: 800; }
    .trip-badges,
    .trip-transfers { display: flex; flex-wrap: wrap; gap: 5px; }
    .trip-badges,
    .trip-transfers-wrap { margin-top: 7px; }
    .trip-badge,
    .trip-transfer {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 24px;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
    }
    .trip-badge .material-icons-outlined { font-size: 12px; }
    .trip-badge.skipped { background: #fef2f2; color: #dc2626; }
    .trip-badge.moved { background: #fff7ed; color: #c2410c; }
    .trip-badge.rt { background: #dcfce7; color: #16a34a; }
    .trip-more-btn {
      margin-top: 5px;
      padding: 2px 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: 700 11px 'Outfit', sans-serif;
      cursor: pointer;
    }
    .trip-state {
      display: flex;
      min-height: 220px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--muted);
      text-align: center;
    }
    .trip-state .material-icons-outlined { font-size: 46px; opacity: .3; }

    .trip-map-stop-marker {
      position: absolute;
      width: 190px;
      height: 66px;
      overflow: visible;
      pointer-events: auto;
      font-family: var(--font-app);
    }
    .map-trip-hidden .trip-map-stop-marker,
    .map-trip-hidden .map-vehicle-marker {
      display: none;
    }
    .map-trip-compact .trip-map-stop-card { display: none; }
    .map-trip-compact .trip-map-stop-marker {
      width: 18px;
      height: 18px;
    }
    .map-trip-compact .map-vehicle-marker {
      width: 12px;
      height: 12px;
    }
    .map-trip-compact .map-vehicle-line,
    .map-trip-compact .map-vehicle-pulse,
    .map-trip-compact .map-vehicle-disc .material-icons-outlined {
      display: none;
    }
    .map-trip-compact .map-vehicle-disc {
      width: 10px;
      height: 10px;
      margin: 0;
      border: 2px solid #111;
      background-image: none;
    }
    .trip-map-stop-card {
      position: absolute;
      left: 50%;
      bottom: 18px;
      width: max-content;
      max-width: 185px;
      padding: 5px 7px;
      border-radius: 5px;
      background: #050505;
      color: #fff;
      transform: translateX(-50%);
      box-shadow: none;
      white-space: nowrap;
      font-family: var(--font-app);
    }
    .maplibregl-popup-content {
      box-shadow: none !important;
      font-family: var(--font-app);
    }
    .trip-map-stop-name {
      max-width: 170px;
      overflow: hidden;
      font-size: 12px;
      font-weight: 800;
      text-overflow: ellipsis;
    }
    .trip-map-stop-times {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 800;
    }
    .trip-map-stop-times .scheduled.delayed {
      color: #bbb;
      text-decoration: line-through;
    }
    .trip-map-stop-times .delay,
    .trip-map-stop-times .actual { color: #ff5454; }
    .trip-map-stop-dot {
      position: absolute;
      left: 50%;
      bottom: -7px;
      width: 18px;
      height: 18px;
      border: 4px solid #050505;
      border-radius: 50%;
      background: #fff;
      transform: translateX(-50%);
    }
    .trip-map-stop-marker.has-alert .trip-map-stop-dot {
      border: none;
      border-radius: 2px;
      background: #050505;
      transform: translateX(-50%) rotate(45deg);
    }
    .trip-map-stop-marker.has-alert .trip-map-stop-dot::after {
      content: '!';
      position: absolute;
      inset: 0;
      color: #ffd400;
      font: 900 13px/18px 'Outfit', sans-serif;
      text-align: center;
      transform: rotate(-45deg);
    }

    .info-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 4000;
      display: none;
      background: rgba(0,0,0,.52);
      backdrop-filter: blur(3px);
    }
    .info-modal-backdrop.open { display: block; }
    .info-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 4100;
      display: none;
      width: min(520px, calc(100vw - 28px));
      max-height: calc(100dvh - 32px);
      padding: 18px;
      overflow-y: auto;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 65px rgba(0,0,0,.38);
      transform: translate(-50%, -50%);
    }
    .info-modal.open { display: block; }
    .info-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .info-modal-title { font-size: 18px; font-weight: 900; }
    .info-modal-body { font-size: 13px; line-height: 1.45; }
    .info-modal.material-modal {
      padding: 0;
      overflow: hidden auto;
      border-radius: 8px;
    }
    .material-modal .info-modal-header {
      min-height: 56px;
      margin: 0;
      padding: 0 18px;
      color: #fff;
      background: #000;
    }
    .material-modal .info-modal-title {
      font: 900 19px/1 var(--font-app);
    }
    .material-modal .map-controls-close {
      color: #fff;
      background: rgba(255,255,255,.12);
    }
    .material-modal .info-modal-body { line-height: 1.4; }
    .welcome-modal-content p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
    .welcome-modal-content ul { margin: 0 0 16px 18px; padding: 0; font-size: 13px; line-height: 1.6; }
    .welcome-button {
      width: 100%;
      padding: 12px;
      background: #0077C0;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }
    .welcome-button:hover { background: #005fa3; }
    .quick-access-editor { display: grid; gap: 15px; }
    .quick-access-editor label {
      display: grid;
      gap: 6px;
      color: #666;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .quick-access-editor input {
      width: 100%;
      min-height: 44px;
      padding: 9px 12px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      color: var(--ink);
      background: #f5f5f5;
      font: 650 15px/1 var(--font-app);
      outline: none;
    }
    .quick-access-icons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .quick-access-icon-option {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      border: 2px solid transparent;
      border-radius: 50%;
      color: #222;
      background: #ededed;
      cursor: pointer;
    }
    .quick-access-icon-option.selected {
      border-color: #111;
      color: #fff;
      background: #111;
    }
    .quick-access-editor-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
    .quick-access-editor-actions button {
      min-height: 42px;
      padding: 8px 15px;
      border: 0;
      border-radius: 5px;
      font: 750 13px/1 var(--font-app);
      cursor: pointer;
    }
    .quick-access-editor-actions .primary {
      color: #fff;
      background: #111;
    }
    .quick-access-manage-list { display: grid; gap: 8px; }
    .quick-access-manage-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px;
      border-radius: 6px;
      background: #f1f1f1;
    }
    .quick-access-manage-item > .material-icons-outlined {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #111;
    }
    .quick-access-manage-item strong {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .quick-access-manage-item button {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }
    .quick-access-manage-item button:disabled {
      opacity: .28;
      cursor: default;
    }
    .quick-access-manage-item button[onclick*="moveQuickAccess"] { display: none; }
    .quick-access-manage-item button .material-icons-outlined {
      font-size: 18px;
    }

    .unified-search-backdrop {
      position: fixed;
      inset: 0;
      z-index: 5000;
      visibility: hidden;
      opacity: 0;
      background: rgba(0,0,0,.44);
      backdrop-filter: blur(3px);
      transition: opacity .2s ease, visibility .2s ease;
    }
    .unified-search-backdrop.open {
      visibility: visible;
      opacity: 1;
    }
    .unified-search-sheet {
      --unified-search-height: min(720px, 100dvh);
      position: fixed;
      z-index: 5010;
      left: 50%;
      bottom: 18px;
      width: min(620px, calc(100vw - 28px));
      height: var(--unified-search-height);
      max-height: calc(100dvh - 36px);
      display: flex;
      flex-direction: column;
      padding: 25px 18px 18px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 24px 80px rgba(0,0,0,.34);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, calc(100% + 36px));
      transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }
    .unified-search-sheet::before {
      position: absolute;
      z-index: 0;
      inset: 0 0 auto;
      height: 146px;
      border-radius: 16px 16px 0 0;
      background: #050505;
      content: "";
      pointer-events: none;
    }
    .unified-search-sheet.open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    .unified-search-sheet.dragging { transition: none; }
    .unified-search-handle {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: ns-resize;
      touch-action: none;
    }
    .unified-search-handle::after {
      width: 44px;
      height: 5px;
      border-radius: 99px;
      background: rgba(255,255,255,.72);
      content: "";
    }
    .unified-search-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 13px;
    }
    .unified-search-close {
      width: 40px;
      height: 40px;
      display: grid;
      flex: 0 0 40px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(255,255,255,.14);
      cursor: pointer;
    }
    .unified-search-title { color: #fff; font-size: 20px; font-weight: 900; }
    .unified-search-subtitle { color: rgba(255,255,255,.62); font-size: 12px; }
    .unified-search-field {
      position: relative;
      z-index: 1;
      min-height: 50px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px 0 14px;
      border-radius: 7px;
      border: 1px solid #fff;
      background: #fff;
    }
    .unified-search-field > .material-icons-outlined { color: #4f4f4f; }
    .unified-search-field input {
      min-width: 0;
      flex: 1;
      border: 0;
      outline: 0;
      color: #111;
      background: transparent;
      font: 650 16px/1 var(--font-app);
    }
    .unified-search-field button {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #555;
      background: transparent;
      cursor: pointer;
    }
    .unified-search-field input::placeholder { color: #858585; }
    .unified-search-results {
      position: relative;
      z-index: 1;
      min-height: 0;
      flex: 1;
      width: calc(100% + 36px);
      margin: 13px -18px -18px;
      padding: 10px 18px 18px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #fff;
    }
    .unified-search-results .res-item {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(0,0,0,.07);
      background: #fff;
      text-align: left;
    }
    .unified-line-result {
      min-height: 72px;
      align-items: center;
    }
    .line-result-symbols {
      position: relative;
      width: 68px;
      height: 44px;
      flex: 0 0 68px;
    }
    .line-result-operator,
    .line-result-mode {
      position: absolute;
      top: 2px;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
    }
    .line-result-operator {
      z-index: 2;
      left: 0;
    }
    .line-result-operator img {
      width: auto;
      height: auto;
      max-width: 28px;
      max-height: 20px;
      object-fit: contain;
    }
    .line-result-mode {
      z-index: 1;
      left: 27px;
      border: 4px solid #0a080c;
      color: #0a080c;
      background: #fff;
    }
    .line-result-mode .material-icons-outlined { font-size: 20px; }
    .line-result-content {
      min-width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .line-result-chip {
      position: relative;
      min-width: 42px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      padding: 5px 10px;
      border-radius: 3px;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
    }
    .line-result-chip::before {
      position: absolute;
      top: 50%;
      left: -8px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-right: 8px solid var(--line-result-color);
      border-bottom: 8px solid transparent;
      content: "";
      transform: translateY(-50%);
    }
    .line-result-long-name {
      min-width: 0;
      overflow: hidden;
      color: #252525;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
      text-overflow: ellipsis;
    }
    .release-note {
      overflow: hidden;
      margin: -4px;
    }
    .release-note-image {
      display: block;
      width: calc(100% + 8px);
      max-height: 260px;
      margin: -4px -4px 16px;
      object-fit: cover;
      border-radius: 8px;
    }
    .release-note-kicker {
      margin-bottom: 7px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .release-note-description {
      color: #323232;
      font-size: 15px;
      line-height: 1.5;
    }
    .release-note-list {
      display: grid;
      gap: 8px;
      margin: 15px 0 0;
      padding: 0;
      list-style: none;
    }
    .release-note-list li {
      position: relative;
      padding: 9px 11px 9px 32px;
      border-radius: 5px;
      background: #f1f1f1;
      font-size: 13px;
      font-weight: 650;
    }
    .release-note-list li::before {
      content: '✓';
      position: absolute;
      left: 11px;
      color: var(--accent);
      font-weight: 900;
    }
    .release-note-button {
      width: 100%;
      min-height: 44px;
      margin-top: 17px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      background: #000;
      font: inherit;
      font-weight: 850;
      cursor: pointer;
    }
    .release-note-button:active { transform: scale(.98); }
    .material-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      margin: 0;
      border-radius: 0;
      object-fit: cover;
      display: block;
    }
    .material-modal-content { padding: 0 18px 18px; }
    .material-modal-content.no-image { padding-top: 18px; }
    .material-name {
      margin: 17px 0 2px;
      color: #101010;
      font: 900 23px/1.13 var(--font-app);
    }
    .material-internal-id {
      margin: 0;
      color: #747474;
      font: 700 11px/1.3 var(--font-app);
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .material-features {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .material-feature {
      min-height: 33px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 9px;
      border: 1px solid #dedede;
      border-radius: 4px;
      color: #222;
      background: #f4f4f4;
      font: 750 11px/1.1 var(--font-app);
    }
    .material-feature > .material-icons-outlined { font-size: 17px; }
    .material-feature .material-status { margin-left: 1px; font-size: 16px; }
    .material-feature .is-true { color: #168a48; }
    .material-feature .is-false { color: #d92d2d; }
    .material-feature.capacity-high { border-color: #b9dfc9; background: #eef9f1; }
    .material-feature.capacity-mid { border-color: #f3c887; background: #fff7e9; }
    .material-feature.capacity-low { border-color: #efb7b7; background: #fff0f0; }
    .material-feature.capacity-high > .material-icons-outlined { color: #168a48; }
    .material-feature.capacity-mid > .material-icons-outlined { color: #df7f00; }
    .material-feature.capacity-low > .material-icons-outlined { color: #d92d2d; }
    .material-image-credit {
      margin: 12px 0 0;
      color: #777;
      font: 600 10px/1.35 var(--font-app);
    }
    .alert-card {
      padding: 12px 0;
      border-top: 1px solid #e5e5e5;
    }
    .alert-card:first-child { border-top: none; padding-top: 0; }
    .alert-card h4 { margin-bottom: 5px; font-size: 14px; }
    .alert-card p { color: #555; white-space: pre-line; }

    /* Loading / empty */
    .stop-loading, .stop-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px; padding: 60px 20px; color: var(--muted); text-align: center;
    }
    .stop-spinner {
      width: 32px; height: 32px; border: 3px solid var(--border);
      border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite;
    }
    .stop-loading p, .stop-empty p { font-size: 15px; font-weight: 500; }
    .stop-empty .material-icons-outlined { font-size: 48px; opacity: 0.25; }

    /* ══ PLANIFICATEUR ══ */
    #plannerView {
      height: 100%;
      min-height: 0;
      flex-direction: column;
      background: var(--bg);
    }
    .planner-header {
      flex: 0 0 auto;
      padding: 18px 16px 14px;
      color: #fff;
      background: #0a080c;
    }
    .planner-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .planner-title {
      flex: 1;
      font-size: 20px;
      font-weight: 900;
    }
    .planner-icon-btn {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #0a080c;
      background: #fff;
      cursor: pointer;
    }
    .planner-fields-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .planner-fields {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .planner-field {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 7px 12px;
      color: #0a080c;
      background: #fff;
      border: 1px solid rgba(10,8,12,.14);
    }
    .planner-field:first-child { border-radius: 5px 5px 0 0; }
    .planner-field:last-child { border-radius: 0 0 5px 5px; }
    .planner-field input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      font: inherit;
      color: inherit;
      background: transparent;
    }
    .planner-field .material-icons-outlined { font-size: 19px; }
    .planner-search-results {
      position: absolute;
      z-index: 1500;
      top: calc(100% + 5px);
      left: 0;
      right: 0;
      max-height: min(48vh, 420px);
      overflow-y: auto;
      color: #0a080c;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
    .planner-search-results:empty { display: none; }
    .planner-search-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      text-align: left;
      border: 0;
      border-bottom: 1px solid #ececec;
      background: #fff;
      cursor: pointer;
    }
    .planner-search-item:last-child { border-bottom: 0; }
    .planner-search-item strong,
    .planner-search-item small { display: block; }
    .planner-search-item small { margin-top: 2px; color: #737373; }
    .planner-search-op {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 3px solid #111;
      border-radius: 50%;
      background: #fff;
    }
    .planner-search-op img {
      width: auto;
      height: auto;
      max-width: 24px;
      max-height: 18px;
      object-fit: contain;
      filter: brightness(0);
    }
    .planner-search-op .material-icons-outlined { font-size: 20px; }
    .planner-datetime {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 6px;
      margin-top: 10px;
    }
    .planner-datetime input,
    .planner-arrive-toggle {
      min-width: 0;
      height: 34px;
      padding: 4px 8px;
      border: 0;
      border-radius: 0;
      color: #fff;
      background: transparent;
      font: inherit;
      font-size: 12px;
    }
    .planner-arrive-toggle {
      padding-inline: 13px;
      border-radius: 999px;
      color: #0a080c;
      background: #fff;
      font-weight: 800;
      cursor: pointer;
    }
    .planner-datetime input::-webkit-calendar-picker-indicator {
      filter: invert(1);
      opacity: .85;
    }
    .planner-datetime input { color-scheme: dark; }
    .planner-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-bottom: 82px;
    }
    .planner-state {
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 30px;
      text-align: center;
      color: var(--muted);
    }
    .planner-day {
      padding: 17px 16px 8px;
      font-size: 22px;
      font-weight: 900;
    }
    .planner-card {
      width: 100%;
      padding: 13px 0 15px;
      border: 0;
      border-bottom: 1px solid rgba(10,8,12,.1);
      text-align: left;
      color: inherit;
      background: transparent;
      cursor: pointer;
    }
    .planner-card:nth-of-type(even) { background: rgba(0,0,0,.035); }
    .planner-best {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0 12px 9px;
      padding: 4px 8px;
      border-radius: 3px;
      color: #fff;
      background: var(--accent);
      font-size: 12px;
      font-weight: 900;
    }
    .planner-line-viz {
      display: flex;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 10px;
      min-height: 40px;
      width: 100%;
      padding: 0 14px;
      box-sizing: border-box;
      overflow: visible;
    }
    .planner-leg-group {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      min-width: 0;
      break-inside: avoid;
    }
    .planner-leg-node {
      flex: 0 0 auto;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .planner-mode-disc {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #0a080c;
    }
    .planner-mode-disc.transport {
      color: #0a080c;
      background: #fff;
      border: 4px solid #0a080c;
    }
    .planner-mode-disc .material-icons-outlined { font-size: 17px; }
    .planner-line-chip {
      flex: 0 0 auto;
      position: relative;
      min-height: 36px;
      width: max-content;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1;
      white-space: nowrap;
      overflow: visible;
    }
    .planner-line-chip::before {
      content: '';
      position: absolute;
      left: -7px;
      top: 50%;
      width: 15px;
      height: 15px;
      border-radius: 2px;
      background: inherit;
      transform: translateY(-50%) rotate(45deg);
    }
    .planner-line-chip > * {
      position: relative;
      z-index: 1;
    }
    .planner-line-chip img {
      display: block;
      flex: 0 0 auto;
      width: auto;
      height: 18px;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
    }
    .planner-line-number {
      display: block;
      flex: 0 0 auto;
      min-width: max-content;
      line-height: 1.1;
      text-align: center;
      white-space: nowrap;
    }
    .planner-card-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 12px 0;
      font-size: 12px;
    }
    .planner-card-times {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-right: auto;
      font-size: 18px;
      font-weight: 900;
    }
    .planner-card-times.delayed { color: #d80000; }
    .planner-meta-part {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      white-space: nowrap;
    }
    .planner-meta-part .material-icons-outlined { font-size: 15px; }
    .planner-settings-fab {
      position: absolute;
      z-index: 10;
      right: 16px;
      bottom: 24px;
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: var(--ink);
      background: var(--accent);
      box-shadow: 0 4px 14px rgba(0,0,0,.25);
      cursor: pointer;
    }
	/* Modal globale */
	.info-modal {
	  border-radius: 10px;
	  background: #fff;
	}
	.info-modal-header {
	  background: #000;
	  color: #fff;
	  margin: -18px -18px 14px;
	  padding: 14px 18px;
	}
	.info-modal-title {
	  font-size: 28px;
	  font-weight: 900;
	  letter-spacing: -0.6px;
	}

	/* Bouton fermer : sans fond */
	.info-modal .map-controls-close {
	  background: transparent;
	  border: 0;
	  color: #fff;
	  box-shadow: none;
	}

	/* Actions */
	.place-action-grid {
	  display: grid;
	  gap: 10px;
	}

	/* Boutons gris, sans contour, contenu aligné à gauche */
	.place-action-btn {
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  gap: 12px;

	  background: #ececec;
	  color: #111;
	  border: 0;
	  border-radius: 8px;
	  padding: 14px 14px;

	  text-align: left;
	}

	/* Icône dans disque, plus grand, bien à gauche */
	.place-action-btn .material-icons-outlined {
	  width: 38px;
	  height: 38px;
	  flex: 0 0 38px;
	  border-radius: 50%;
	  display: grid;
	  place-items: center;
	  font-size: 21px;
	  line-height: 1;
	}

	/* Texte à droite, aligné à gauche */
	.place-action-btn span:last-child {
	  display: block;
	  text-align: left;
	}
	.place-action-btn strong {
	  display: block;
	  font-size: 17px;   /* titre plus grand */
	  font-weight: 900;
	  line-height: 1.1;
	}
	.place-action-btn small {
	  display: block;
	  margin-top: 3px;
	  font-size: 12px;
	  color: #555;
	  line-height: 1.25;
	}

	/* Couleurs des disques */
	.place-action-btn:nth-child(1) .material-icons-outlined {
	  background: #E94986;
	  color: #fff;
	}
	.place-action-btn:nth-child(2) .material-icons-outlined {
	  background: #56E18E;
	  color: #0f2418;
	}
	.place-action-btn:nth-child(3) .material-icons-outlined {
	  background: #cfcfcf;
	  color: #222;
	}
    .planner-settings-section { margin-bottom: 18px; }
    .planner-settings-section h4 { margin-bottom: 8px; }
    .planner-settings-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .planner-setting-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 9px;
      border: 1px solid #ddd;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: color .2s, background .2s, border-color .2s, transform .2s;
    }
    .planner-setting-chip input { position: absolute; opacity: 0; pointer-events: none; }
    .planner-setting-chip .material-icons-outlined { font-size: 18px; }
    .planner-setting-chip:has(input:checked) { background:#e94986; border-color:#e94986; color:#fff; animation:departureFilterBounce .34s cubic-bezier(.22,.75,.32,1); }
    .planner-setting-chip:active { transform:scale(.95); }

    .home-menu-theme { display:flex; align-items:center; gap:12px; padding:11px 14px; }
    .home-menu-theme-copy { display:flex; flex:1; flex-direction:column; }
    .home-menu-theme-copy small { color:#777; font-size:11px; }
    .theme-switch input { position:absolute; opacity:0; }
    .theme-switch > span { display:block; width:44px; height:25px; padding:3px; border-radius:99px; background:#ccc; transition:.2s; }
    .theme-switch > span::after { content:''; display:block; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0004; transition:.25s cubic-bezier(.22,.75,.32,1); }
    .theme-switch input:checked + span { background:#e94986; }
    .theme-switch input:checked + span::after { transform:translateX(19px); }

    html[data-theme="dark"] body, html[data-theme="dark"] .home-panel, html[data-theme="dark"] .panel-screen, html[data-theme="dark"] .planner-itinerary-detail { background:#17151a; color:#f7f4f7; }
    html[data-theme="dark"] .home-menu, html[data-theme="dark"] .info-modal, html[data-theme="dark"] .planner-card, html[data-theme="dark"] .search-bar, html[data-theme="dark"] .planner-field { background:#242127; color:#f7f4f7; }
    html[data-theme="dark"] input, html[data-theme="dark"] select { background:#302c33; color:#fff; border-color:#4a454d; }
    html[data-theme="dark"] .home-menu a, html[data-theme="dark"] .home-menu button, html[data-theme="dark"] .planner-detail-leg { border-color:#39343c; color:#f7f4f7; }
    html[data-theme="dark"] .planner-card:nth-of-type(even) { background:#211e23; }
    .planner-setting-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }
    .planner-setting-row select {
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .planner-detail-leg {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      padding: 11px 0;
      border-bottom: 1px solid #e8e8e8;
    }
    .planner-detail-leg:last-child { border-bottom: 0; }

    /* Détail d’un itinéraire — reste dans le volet */
    .planner-itinerary-detail {
      display: none;
      height: 100%;
      min-height: 0;
      flex-direction: column;
      background: #fff;
    }
    #plannerView.detail-open > .planner-header,
    #plannerView.detail-open > .planner-body,
    #plannerView.detail-open > .planner-settings-fab { display: none; }
    #plannerView.detail-open > .planner-itinerary-detail { display: flex; }
    .planner-detail-header {
      flex: 0 0 auto;
      min-height: 90px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 16px;
      color: #fff;
      background: var(--ink);
    }
    .planner-detail-heading {
      flex: 1;
      min-width: 0;
    }
    .planner-detail-heading h2 {
      font-size: 28px;
      font-weight: 900;
      line-height: 1;
    }
    .planner-detail-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      margin-top: 7px;
      color: rgba(255,255,255,.75);
      font-size: 12px;
      font-weight: 700;
    }
    .planner-detail-content {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 18px 0 34px;
    }
    .planner-route-axis {
      --axis-x: 35px;
      position: relative;
    }
    .planner-route-axis::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 20px;
      bottom: 20px;
      left: var(--axis-x);
      width: 5px;
      background: var(--ink);
    }
    .planner-detail-point,
    .planner-walk-step,
    .planner-transit-step {
      position: relative;
      z-index: 1;
    }
    .planner-detail-point {
      min-height: 54px;
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: center;
      padding-right: 16px;
    }
    .planner-point-dot {
      width: 28px;
      height: 28px;
      justify-self: center;
      border: 5px solid var(--ink);
      border-radius: 50%;
      background: #fff;
    }
    .planner-point-name {
      font-size: 17px;
      font-weight: 900;
    }
    .planner-walk-step {
      min-height: 62px;
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: center;
      padding-right: 16px;
    }
    .planner-walk-icon {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      justify-self: center;
      border-radius: 50%;
      color: #fff;
      background: var(--ink);
    }
    .planner-walk-copy strong { display: block; font-size: 15px; }
    .planner-walk-copy small { color: var(--muted); }
    .planner-transit-step {
      margin: 8px 0 14px 55px;
      padding-right: 12px;
    }
    .planner-transit-connector {
      position: absolute;
      z-index: -1;
      top: 25px;
      right: calc(100% - 1px);
      width: 55px;
      height: 12px;
      background: var(--leg-color);
    }
    .planner-transit-card {
      position: relative;
      min-height: 150px;
      padding: 16px 14px 14px 28px;
      color: var(--text);
      background: var(--bg);
      border-radius: 0;
    }
    .planner-transit-disc {
      position: absolute;
      top: 9px;
      left: -22px;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 5px solid var(--ink);
      border-radius: 50%;
      color: var(--ink);
      background: var(--bg);
    }
    .planner-transit-main {
      min-width: 0;
      padding-right: 98px;
    }
    .planner-transit-line {
      width: max-content;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 7px 10px;
      border-radius: 5px;
      font-weight: 900;
    }
    .planner-transit-line img {
      display: block;
      width: auto;
      height: 18px;
      max-width: none;
      max-height: none;
      object-fit: contain;
    }
    .planner-transit-destination {
      margin-top: 9px;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.1;
    }
    .planner-transit-agency {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }
    .planner-transit-time {
      position: absolute;
      top: 18px;
      right: 12px;
      text-align: right;
    }
    .planner-transit-time-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }
    .planner-transit-scheduled {
      font-size: 21px;
      font-weight: 900;
      line-height: 1;
    }
    .planner-transit-scheduled.delayed { text-decoration: line-through; }
    .planner-transit-delay,
    .planner-transit-actual {
      color: #d00000;
      font-weight: 900;
    }
    .planner-transit-actual { margin-top: 2px; font-size: 17px; }
    .planner-transit-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 13px;
    }
    .planner-transit-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 9px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 800;
    }
    .planner-stop-list-toggle {
      margin-top: 12px;
      border: 0;
      color: inherit;
      background: transparent;
      font-weight: 800;
      cursor: pointer;
    }
    .planner-intermediate-stops {
      display: none;
      margin-top: 10px;
      border-top: 1px solid rgba(0,0,0,.1);
    }
    .planner-intermediate-stops.open { display: block; }
    .planner-intermediate-stop {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(0,0,0,.08);
      font-size: 12px;
    }

    /* Fidélité au PlannerResult Flutter */
    .planner-detail-header {
      height: 78px;
      min-height: 78px;
      display: block;
      padding: 13px 16px;
      border-radius: 0;
    }
    .planner-detail-header-row {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .planner-detail-header-row h2 {
      margin-right: auto;
      font-size: 27px;
      font-weight: 800;
      line-height: 1;
    }
    .planner-detail-summary {
      display: block;
      margin: 0 12px 0 0;
      text-align: right;
      color: #fff;
    }
    .planner-detail-summary strong,
    .planner-detail-summary small { display: block; }
    .planner-detail-summary strong {
      font-size: 20px;
      line-height: 1;
    }
    .planner-detail-summary small {
      margin-top: 3px;
      font-size: 13px;
      font-weight: 400;
    }
    .planner-detail-content {
      padding: 10px 0 30vh;
      background: #fff;
    }
    .planner-route-axis { --axis-x: 41px; }
    .planner-route-axis::before { display: none; }
    .planner-detail-point,
    .planner-walk-step {
      grid-template-columns: 82px 1fr;
      min-height: 50px;
      padding-right: 16px;
    }
    .planner-point-dot,
    .planner-walk-icon {
      width: 30px;
      height: 30px;
      border: 0;
      color: #fff;
      background: var(--ink);
    }
    .planner-point-dot {
      display: grid;
      place-items: center;
    }
    .planner-point-dot .material-icons-outlined { font-size: 18px; }
    .planner-point-name { font-size: 16px; }
    .planner-walk-copy strong { font-size: 15px; }
    .planner-transit-step {
      position: relative;
      z-index: 1;
      margin: 6px 0;
      padding: 0;
    }
    .planner-transit-connector {
      display: none;
    }
    .planner-transit-card {
      overflow: visible;
      min-height: 132px;
      width: 100%;
      margin: 0;
      padding: 16px 14px 14px 71px;
      background: #f0f0f0;
    }
    .planner-transit-card::before {
      display: none;
    }
    .planner-transit-disc {
      z-index: 2;
      top: 7px;
      left: 19px;
      width: 44px;
      height: 44px;
      border-width: 5px;
    }
    .planner-transit-main {
      position: relative;
      z-index: 2;
    }
    .planner-transit-line {
      position: relative;
      min-height: 38px;
      margin-left: 7px;
      padding: 0 14px;
      gap: 6px;
      border-radius: 5px;
      font-size: 20px;
      line-height: 1;
    }
    .planner-transit-line::before {
      content: '';
      position: absolute;
      left: -9px;
      top: 50%;
      width: 18px;
      height: 18px;
      border-radius: 2px;
      background: inherit;
      transform: translateY(-50%) rotate(45deg);
    }
    .planner-transit-line > * {
      position: relative;
      z-index: 1;
    }
    .planner-leg-stops {
      position: relative;
      padding: 4px 0 6px;
    }
    .planner-leg-stops::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 23px;
      bottom: var(--planner-line-bottom, 23px);
      left: 34px;
      width: 14px;
      border-radius: 50px;
      background: var(--leg-color);
    }
    .planner-stop-row {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 82px minmax(0,1fr);
      align-items: start;
      min-height: 52px;
    }
    .planner-stop-disc {
      padding: 0;
      font-family: 'Outfit', sans-serif;
      z-index: 1;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      justify-self: center;
      margin-top: 8px;
      border: 6px solid var(--ink);
      border-radius: 50%;
      background: #fff;
      cursor: default;
    }
    .planner-stop-disc.alert {
      border: 0;
      border-radius: 4px;
      color: #ff5252;
      background: var(--ink);
      transform: rotate(45deg);
    }
    .planner-stop-disc.alert > span { transform: rotate(-45deg); font-weight: 900; }
    .planner-stop-disc.alert { cursor: pointer; }
    .planner-stop-card {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 8px;
      padding: 9px 14px 10px 0;
    }
    .planner-stop-name {
      min-width: 0;
      font-size: 15px;
      font-weight: 800;
    }
    .planner-stop-time {
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
    }
    .planner-stop-delay {
      margin-left: 4px;
      color: #d00000;
      font-size: 12px;
    }
    .planner-stop-list-toggle {
      margin: 7px 0 10px 82px;
    }

    /* La carte d'un transport reprend exactement la DepartureCard. */
    .planner-transit-card.dep-card {
      overflow: hidden;
      min-height: 0;
      width: 100%;
      margin: 0;
      padding: 13px 15px;
      background: #f0f0f0;
    }
    .planner-transit-card.dep-card::before { display: block; }
    .planner-stop-transfers {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 3px;
    }
    .planner-transfer {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }
    .planner-transfer-extra {
      display: none;
      flex-wrap: wrap;
      gap: 4px;
    }
    .planner-transfer-extra.open { display: contents; }
    .planner-transfer-more,
    .planner-line-alert {
      border: 0;
      border-radius: 3px;
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      cursor: pointer;
    }
    .planner-transfer-more {
      min-height: 24px;
      padding: 3px 7px;
      background: #dedede;
      color: var(--ink);
      font-size: 11px;
    }
    .planner-line-alert {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      padding: 6px 9px;
      background: var(--ink);
      color: #ffd600;
    }
    .planner-line-alert .material-icons-outlined { font-size: 17px; }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 480px) {
      .home-inner { gap: 0; }
      .tool-btn span.label { display: none; }
      .planner-card-times {
        flex: 1 0 100%;
        margin-right: 0;
        margin-bottom: 2px;
      }
      .planner-card-meta { row-gap: 5px; }
      .planner-line-chip { padding-inline: 7px; }
    }

    /* ══ HOME RESPONSIVE ══ */
    @media (max-width: 900px) {
      #homeView {
        background: transparent;
      }

      .home-map-overlay {
        background: none;
      }

      .home-panel {
        max-width: 560px;
        min-height: auto;
        height: auto;
        max-height: calc(100vh - 32px);
        margin: 16px auto;
        padding: 0;
        border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.20);
        overflow-y: auto;
      }

      .home-panel.departures-open {
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
      }

      .home-panel.departures-open #stopView {
        height: 100%;
      }

      .home-inner {
        gap: 0;
      }

      .home-logo {
        height: 36px;
      }

      .home-tagline h1 {
        font-size: 28px;
      }

      .home-map-status {
        bottom: 14px;
        left: 14px;
      }

      .home-location-btn {
        bottom: 14px;
        right: 14px;
      }
    }

    @media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
      .bemove-beta-signature {
        top: max(12px, calc(env(safe-area-inset-top) + 6px));
        right: auto;
        left: 14px;
        min-height: 34px;
        gap: 7px;
        padding: 6px 7px 6px 9px;
      }

      .bemove-beta-signature img {
        height: 19px;
        max-width: 82px;
      }

      .bemove-beta-signature span {
        font-size: 9px;
      }

      :root {
        --mobile-sheet-height: 42dvh;
      }

      .home-panel {
        position: fixed;
        z-index: 1200;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        height: var(--mobile-sheet-height);
        max-height: 88dvh;
        margin: 0;
        padding: 0;
        border-radius: 14px 14px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 35px rgba(0,0,0,.22);
        transition: height .24s cubic-bezier(.2,.8,.2,1);
        overscroll-behavior: contain;
      }

      .home-panel.departures-open {
        height: var(--mobile-sheet-height);
        max-height: 88dvh;
        padding: 0 0 max(0px, env(safe-area-inset-bottom));
      }

      .home-panel.sheet-dragging {
        transition: none;
        user-select: none;
      }

      .sheet-drag-handle {
        position: absolute;
        z-index: 200;
        top: 0;
        left: 0;
        right: 0;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: ns-resize;
        touch-action: none;
      }

      .sheet-drag-handle::after {
        content: '';
        width: 46px;
        height: 5px;
        border-radius: 99px;
        background: rgba(0,0,0,.28);
      }

      .home-panel:not(.departures-open) .sheet-drag-handle::after {
        background: rgba(255,255,255,.72);
      }

      .home-panel.departures-open .sheet-drag-handle::after {
        background: rgba(255,255,255,.72);
      }

      .home-panel .panel-screen.active {
        min-height: 0;
        height: 100%;
      }

      #homePanelHome {
        min-height: 0;
        height: 100%;
        overflow: hidden;
      }

      .home-top {
        gap: 12px;
        padding: 30px 18px 14px;
      }

      .home-greeting {
        font-size: clamp(29px, 8vw, 36px);
      }

      .home-content {
        padding: 0 18px max(22px, env(safe-area-inset-bottom));
        background: #fff;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }

      .nearest-departure {
        width: calc(100% + 36px);
        min-height: 78px;
        gap: 10px;
        margin: 0 -18px 0;
        padding: 11px 15px;
      }

      .nearest-departure-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
      }

      .nearest-departure-logo img {
        max-width: 36px;
        max-height: 28px;
      }

      .nearest-departure-main { gap: 6px; }
      .nearest-departure-stop { font-size: 11px; }
      .nearest-departure-service { gap: 8px; }
      .nearest-departure-line {
        min-width: 38px;
        min-height: 29px;
        padding: 4px 8px;
        font-size: 17px;
      }
      .nearest-departure-destination { font-size: 15px; }
      .nearest-departure-countdown {
        min-width: 58px;
        font-size: 18px;
      }
      .nearest-departure-countdown.is-date {
        max-width: 92px;
        font-size: 13px;
      }
      .quick-access-section {
        width: calc(100% + 36px);
        margin: 0 -18px 18px;
      }
      .quick-access-row { padding: 9px 18px 5px; }
      .unified-search-sheet {
        left: 0;
        bottom: 0;
        width: 100%;
        height: var(--unified-search-height, 82dvh);
        max-height: 92dvh;
        padding: 27px 14px max(14px, env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
      }
      .unified-search-sheet.open { transform: translateY(0); }
      .unified-search-sheet::before {
        height: 148px;
        border-radius: 16px 16px 0 0;
      }
      .unified-search-results {
        width: calc(100% + 28px);
        margin: 13px -14px -14px;
        padding: 10px 14px max(14px, env(safe-area-inset-bottom));
      }

      .home-top .search-results {
        max-height: calc(88dvh - 170px);
      }

      .home-panel.departures-open #stopView,
      .home-panel.departures-open #tripView,
      .home-panel.departures-open #plannerView {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .home-panel.departures-open .stop-header,
      .home-panel.departures-open .trip-header {
        padding-top: 7px;
      }

      .home-panel.departures-open .stop-header-inner {
        min-height: 116px;
        padding-top: 5px;
        padding-bottom: 7px;
      }

      .home-panel.departures-open .stop-header-main {
        min-height: 68px;
      }

      .home-panel.departures-open .stop-header-logo-shell {
        width: 68px;
        height: 68px;
        transform: translateY(-3px);
      }

      .home-panel.departures-open .trip-header-inner {
        min-height: 96px;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .home-panel.departures-open .trip-header-logo-shell {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
        border-width: 7px;
        transform: translateY(-3px);
      }

      .home-panel.departures-open .planner-header {
        padding-top: 18px;
      }
      .home-panel.departures-open .planner-detail-header {
        height: 82px;
        min-height: 82px;
        padding: 8px 14px;
      }

      .trip-header-actions .trip-material-btn {
        width: 34px;
        height: 34px;
      }
      .trip-header-actions .material-icons-outlined { font-size: 19px; }

      .home-location-btn {
        top: max(22px, calc(env(safe-area-inset-top) + 8px));
        right: 14px;
        bottom: auto;
        z-index: 1300;
      }

      .map-controls-btn {
        top: max(78px, calc(env(safe-area-inset-top) + 64px));
        right: 14px;
        bottom: auto;
        z-index: 1300;
      }

      .map-controls-panel {
        top: 50%;
        right: auto;
      }

      .home-map-status {
        bottom: calc(var(--mobile-sheet-height) + 14px);
        transition: bottom .24s cubic-bezier(.2,.8,.2,1);
      }

      .home-inner {
        gap: 0;
      }

      .home-tagline h1 {
        font-size: 24px;
      }

      .home-tagline p {
        font-size: 13px;
      }

      .home-map-status {
        max-width: 190px;
        font-size: 10px;
      }
    }

    /* ══ SCROLLBAR ══ */
    /* Volet repliable et recherche ancrée au volet sur ordinateur. */
    .panel-collapse-btn {
      position: fixed;
      z-index: 2500;
      top: 0;
      left: min(520px, calc(100vw - 42px));
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 0 0 9px 0;
      color: #fff;
      background: #0a080c;
      cursor: pointer;
      transition: left .34s cubic-bezier(.2,.8,.2,1), bottom .34s cubic-bezier(.2,.8,.2,1), transform .18s ease;
    }
    .panel-collapse-btn:hover { transform: scale(1.04); }
    .panel-collapse-btn .material-icons-outlined { font-size: 25px; }
    .home-panel { transition: transform .34s cubic-bezier(.2,.8,.2,1); will-change: transform; }
    .home-panel.panel-collapsed { transform: translateX(-100%); box-shadow: none; }
    .panel-collapse-btn.is-collapsed { left: 0; border-radius: 0 0 9px 0; }
    @media (min-width: 901px) {
      .unified-search-sheet { left: 0; bottom: 0; width: min(520px, 100vw); height: 100dvh; max-height: none; border-radius: 0; transform: translateX(-105%); }
      .unified-search-sheet.open { transform: translateX(0); }
      .unified-search-sheet::before { border-radius: 0; }
    }
    .quick-access-manage-item[draggable="true"] { cursor: grab; touch-action: none; }
    .quick-access-manage-item.dragging { opacity: .42; }
    .quick-access-manage-item.drag-over { outline: 2px dashed #111; outline-offset: 2px; }
    .vehicle-dialog-header { display:flex; align-items:center; gap:12px; margin:-18px -18px 16px; padding:14px 18px; }
    .vehicle-dialog-logo { width:38px; height:38px; padding:5px; border-radius:50%; background:#fff; object-fit:contain; }
    .vehicle-dialog-line { margin-left:auto; font-size:27px; font-weight:900; letter-spacing:-.05em; }
    .vehicle-dialog-destination { font-size:17px; font-weight:900; line-height:1.08; }
    @media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
      .home-panel { transition: height .34s cubic-bezier(.2,.8,.2,1); will-change:height; }
      .panel-collapse-btn { top:auto; right:0; bottom:calc(var(--mobile-sheet-height) - 12px); left:auto; width:42px; height:28px; border-radius:8px 0 0 0; transform:none; }
      .panel-collapse-btn:hover { transform:none; }
      .home-panel.panel-collapsed { height:0 !important; transform:none; padding:0; }
      .panel-collapse-btn.is-collapsed { right:0; bottom:0; left:auto; border-radius:9px 0 0 0; }
      .home-map-status.panel-collapsed { bottom:14px; left:14px; }
    }

    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: rgba(61,61,195,0.15); border-radius: 2px; }

    /* Recherche unifiée — filtres cohérents avec les filtres de départs */
    .unified-type-filters { position:relative; z-index:1; display:flex; gap:8px; padding:0 0 12px; overflow-x:auto; scrollbar-width:none; }
    .unified-type-filters::-webkit-scrollbar { display:none; }
    .unified-type-filters button, .unified-operator-filters button, .map-layer-toggle {
      min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px;
      border:0; border-radius:999px; background:var(--chip-bg,#ece9ee); color:var(--text); font:700 13px var(--font-app); cursor:pointer;
      transition:background .2s,color .2s,transform .2s; white-space:nowrap;
    }
    .unified-type-filters button.selected, .unified-operator-filters button.selected, .map-layer-toggle.active { background:var(--accent); color:#fff; animation:departureFilterBounce .34s cubic-bezier(.22,.75,.32,1); }
    .unified-type-filters button:active, .unified-operator-filters button:active, .map-layer-toggle:active { transform:scale(.95); }
    .unified-type-filters button:disabled { opacity:.3; cursor:default; }
    .unified-type-filters .material-icons-outlined { font-size:18px; }
    .unified-operator-filters { display:flex; gap:8px; min-height:0; padding:10px 0 2px; overflow-x:auto; scrollbar-width:none; }
    .unified-operator-filters[hidden] { display:none; }
    .unified-operator-filters button { min-width:52px; height:42px; padding:7px 12px; }
    .unified-operator-filters img { max-width:52px; max-height:25px; object-fit:contain; }

    /* Dialogue d'affichage de la carte */
    .map-controls-panel { padding:0; border:0; border-radius:22px; background:var(--panel); overflow:hidden; }
    .map-controls-header { margin:0; padding:20px 22px 16px; background:var(--header); }
    .map-controls-panel > .map-layer-options, .map-controls-panel > .vehicle-search-row, .map-controls-panel > .line-search-results, .map-controls-panel > .vehicle-search-results { margin-left:20px; margin-right:20px; }
    .map-layer-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; margin-bottom:18px; }
    .map-layer-toggle { width:100%; }
    .vehicle-search-row { grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:10px; }
    .vehicle-search-row input { width:100%; min-height:48px; padding:0 16px; border:0; border-radius:14px; background:var(--field); color:var(--text); font-size:14px; }
    .vehicle-search-row button { min-width:98px; border-radius:999px; background:var(--accent); font-size:12px; }
    #vehicleRouteSearch[readonly] { cursor:pointer; }
    .line-search-results, .vehicle-search-results { background:transparent; }

    /* Palette sémantique intégrale */
    :root { --panel:#fff; --header:#ece9ee; --card-a:#fff; --card-b:#f1eef2; --field:#ece9ee; --chip-bg:#ece9ee; }
    html[data-theme="dark"] {
      --bg:#121114; --panel:#19171b; --header:#29262c; --surface:#242127; --surface2:#2d2930;
      --card-a:#1d1b20; --card-b:#27242a; --field:#2d2930; --chip-bg:#302c33;
      --text:#f5f1f5; --muted:#aaa2ad; --border:transparent; --ink:#f5f1f5; --op-bg:#302c33; --op-text:#fff;
      --shadow:none; --shadow-lg:none;
    }
    html[data-theme="dark"] body, html[data-theme="dark"] .view, html[data-theme="dark"] .home-panel,
    html[data-theme="dark"] .panel-screen, html[data-theme="dark"] .home-inner, html[data-theme="dark"] .home-content,
    html[data-theme="dark"] .stop-body, html[data-theme="dark"] .trip-body, html[data-theme="dark"] .planner-body { background:var(--bg); color:var(--text); }
    html[data-theme="dark"] .home-top, html[data-theme="dark"] .stop-header, html[data-theme="dark"] .trip-header,
    html[data-theme="dark"] .planner-header, html[data-theme="dark"] .planner-detail-header,
    html[data-theme="dark"] .info-modal-header, html[data-theme="dark"] .unified-search-header { background:var(--header); color:var(--text); }
    html[data-theme="dark"] .home-menu, html[data-theme="dark"] .map-controls-panel, html[data-theme="dark"] .info-modal,
    html[data-theme="dark"] .unified-search-sheet, html[data-theme="dark"] .planner-itinerary-detail,
    html[data-theme="dark"] .search-results, html[data-theme="dark"] .planner-search-results { background:var(--panel); color:var(--text); border:0; box-shadow:none; }
    html[data-theme="dark"] .dep-card { background:var(--card-a); color:var(--text); border:0; box-shadow:none; }
    html[data-theme="dark"] .dep-card:nth-child(even) { background:var(--card-b); }
    html[data-theme="dark"] .planner-card, html[data-theme="dark"] .nearest-departure,
    html[data-theme="dark"] .quick-access-card, html[data-theme="dark"] .res-item { background:var(--card-a); color:var(--text); border:0; box-shadow:none; }
    html[data-theme="dark"] .planner-card:nth-of-type(even), html[data-theme="dark"] .res-item:nth-of-type(even) { background:var(--card-b); }
    html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] .search-bar,
    html[data-theme="dark"] .planner-field, html[data-theme="dark"] .unified-search-field { background:var(--field); color:var(--text); border:0; box-shadow:none; }
    html[data-theme="dark"] button:not(.line-result-chip):not(.departure-filter-option), html[data-theme="dark"] .home-menu a { border:0; box-shadow:none; }
    html[data-theme="dark"] .map-controls-close, html[data-theme="dark"] .unified-search-close,
    html[data-theme="dark"] .planner-icon-btn, html[data-theme="dark"] .refresh-btn { background:var(--surface2); color:var(--text); }
    html[data-theme="dark"] .home-menu-theme-copy small, html[data-theme="dark"] .res-item-sub,
    html[data-theme="dark"] .planner-state, html[data-theme="dark"] small { color:var(--muted); }
    html[data-theme="dark"] .info-modal-backdrop, html[data-theme="dark"] .map-controls-backdrop,
    html[data-theme="dark"] .unified-search-backdrop { background:rgba(0,0,0,.72); }
    html[data-theme="dark"] hr, html[data-theme="dark"] .dep-card + .dep-card,
    html[data-theme="dark"] .planner-detail-leg, html[data-theme="dark"] .home-menu > * { border-color:transparent; }

    /* Zone système immersive iOS / Android */
    html, body { min-height:100%; background:var(--header); }
    body { padding-right:env(safe-area-inset-right, 0px); padding-left:env(safe-area-inset-left, 0px); }
    .home-map { top:0; min-height:100dvh; }
    .unified-search-sheet { padding-bottom:max(14px, env(safe-area-inset-bottom, 0px)); }
    @media (display-mode:standalone) {
      .home-top { padding-top:max(30px, calc(env(safe-area-inset-top, 0px) + 12px)); }
      .unified-search-sheet { padding-top:max(27px, calc(env(safe-area-inset-top, 0px) + 14px)); }
      .map-controls-panel { max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }
    }

    .offline-estimate { display:flex; align-items:center; gap:12px; margin:18px 0; padding:14px; border-radius:16px; background:var(--surface); }
    .offline-estimate > .material-icons-outlined { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; }
    .offline-estimate strong,.offline-estimate small { display:block; }
    .offline-estimate small,.offline-warning { color:var(--muted); }
    .offline-warning { font-size:12px; line-height:1.45; }
    .offline-library { width:100%; padding:18px; }
    .offline-library-heading { display:flex; gap:13px; align-items:center; margin-bottom:18px; }
    .offline-library-heading > .material-icons-outlined { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:var(--accent); color:#fff; }
    .offline-library-heading h2,.offline-library-heading p { margin:0; }
    .offline-library-heading p { margin-top:3px; color:var(--muted); font-size:12px; }
    .offline-library-card { display:grid; grid-template-columns:1fr auto; align-items:center; margin-bottom:9px; border-radius:18px; background:var(--card-a); overflow:hidden; }
    .offline-library-card:nth-child(even) { background:var(--card-b); }
    .offline-library-card button { display:flex; align-items:center; gap:12px; min-width:0; padding:15px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
    .offline-library-card button > span:nth-child(2) { min-width:0; }
    .offline-library-card strong,.offline-library-card small { display:block; }
    .offline-library-card small { margin-top:4px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .offline-library-card .offline-delete { padding:15px 16px; color:var(--muted); }
    .offline-recent-main { min-width:0; flex:1; display:flex; align-items:center; gap:12px; padding:12px 8px 12px 16px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
    .offline-recent-main .res-item-info { min-width:0; flex:1; }
    .offline-recent-main .res-item-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .recent-item:has(.offline-recent-main) { display:flex; align-items:center; }
    .recent-item:has(.offline-recent-main) > .offline-delete { width:46px; align-self:stretch; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); cursor:pointer; }
    body.is-offline .res-spinner { display:block; animation:spin .7s linear infinite!important; }

    body.is-offline .home-map, body.is-offline .nearest-departure,
    body.is-offline .quick-access-section, body.is-offline .panel-collapse-btn { display:none!important; }
    body.is-offline .home-panel { position:fixed; inset:0; width:100%; max-width:none; height:100dvh!important; max-height:none; border-radius:0; transform:none; }
    body.is-offline .home-content { height:100%; padding:max(22px,env(safe-area-inset-top)) 0 max(22px,env(safe-area-inset-bottom)); overflow-y:auto; background:var(--bg); }
    body.is-offline .home-top { position:absolute; z-index:20; top:max(10px,env(safe-area-inset-top)); right:12px; width:auto; padding:0; background:transparent; }
    body.is-offline .home-heading-row { display:block; }
    body.is-offline .home-greeting, body.is-offline .home-tagline, body.is-offline .search-bar { display:none!important; }
    body.is-offline .sheet-drag-handle { display:none; }
    body.is-offline .home-menu > a, body.is-offline .home-menu > button:not(.home-menu-hard-reload),
    body.is-offline .home-menu-theme, body.is-offline .home-menu-version { display:none!important; }
    body.is-offline .offline-download-btn, body.is-offline .header-favorite-btn,
    body.is-offline #tripVehicleBtn, body.is-offline #tripRouteBtn, body.is-offline #tripRefreshBtn,
    body.is-offline .refresh-btn { display:none!important; }
    body.is-offline .stop-body, body.is-offline .trip-body { background:var(--bg); }