/* ═══════════════════════════════════════════════════════════════════════════
   BnBike GPS — Desktop Premium Experience v2
   Inspired by Komoot · Strava · AllTrails · RideWithGPS
   ─────────────────────────────────────────────────────────────────────────
   RULE #1: Everything below is ≥1024 px only.
   Mobile (<1024 px) is NEVER touched.
   RULE #2: GPS, Leaflet, navigation-active, service-worker,
            admin, GPX, localStorage — NEVER modified.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap') screen and (min-width: 1024px);


/* ══════════════════════════════════════════════════════════════════════════
   TIER 1 — 1024 px+  (tablet landscape / small desktop)
   Foundation: widen, grid, typography, premium surface
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Design tokens ─────────────────────────────────────────────────── */
  :root {
    --max: 100%;
    --dk-max: 1640px;
    --dk-gap: 32px;
    --dk-pad: 28px;
    --radius: 22px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    /* depth system */
    --shadow-xs: 0 1px 3px rgba(10,40,80,.04);
    --shadow-sm: 0 4px 12px rgba(10,40,80,.05), 0 1px 3px rgba(10,40,80,.03);
    --shadow-md: 0 8px 28px rgba(10,40,80,.07), 0 2px 6px rgba(10,40,80,.03);
    --shadow-lg: 0 16px 48px rgba(10,40,80,.09), 0 4px 12px rgba(10,40,80,.04);
    --shadow-xl: 0 24px 64px rgba(10,40,80,.11), 0 6px 20px rgba(10,40,80,.05);
    /* glass */
    --glass-bg: rgba(255,255,255,.68);
    --glass-border: rgba(255,255,255,.5);
    /* brand */
    --bnb-blue: #1780ee;
    --bnb-blue-dark: #0c5fbf;
    --bnb-blue-deep: #0a4f7a;
    --bnb-orange: #ff7a00;
    --bnb-orange-dark: #e86800;
    /* surface */
    --surface-primary: #ffffff;
    --surface-secondary: #f6f8fb;
    --surface-canvas: #edf1f7;
    --border-subtle: rgba(15,50,90,.06);
    --border-medium: rgba(15,50,90,.10);
  }

  /* ── Canvas ────────────────────────────────────────────────────────── */
  html, body {
    background: var(--surface-canvas);
  }

  /* ── App container ─────────────────────────────────────────────────── */
  body:not(.navigation-active) .app {
    max-width: var(--dk-max);
    padding: var(--dk-pad);
  }

  /* ── Typography — editorial scale ──────────────────────────────────── */
  body:not(.navigation-active) h1 {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.12;
  }
  body:not(.navigation-active) h2 {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.18;
  }
  body:not(.navigation-active) .sub {
    font-size: 14px;
    letter-spacing: 0;
  }

  /* ── Section head — accent bar ─────────────────────────────────────── */
  body:not(.navigation-active) .section-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
  }

  /* ── Blocks — elevated cards ───────────────────────────────────────── */
  body:not(.navigation-active) .block {
    padding: 28px 30px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    transition: box-shadow .3s cubic-bezier(.4,0,.2,1);
  }

  /* ── Hero — panoramic feel ─────────────────────────────────────────── */
  body:not(.navigation-active) .hero {
    border-radius: var(--radius);
    padding: 40px 44px 36px;
    min-height: 150px;
    background:
      radial-gradient(circle at 8% 90%, rgba(255,255,255,.15) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 10%, rgba(255,122,0,.18) 0%, transparent 40%),
      linear-gradient(155deg, #062b50 0%, #0c5fbf 40%, #1780ee 70%, #43a2ff 100%);
    box-shadow:
      var(--shadow-xl),
      inset 0 1px 0 rgba(255,255,255,.12);
    border: none;
    position: relative;
    overflow: hidden;
  }
  body:not(.navigation-active) .hero::after {
    content: '';
    position: absolute;
    top: -60%; right: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,0,.10) 0%, transparent 70%);
    pointer-events: none;
  }
  body:not(.navigation-active) .hero h1 {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-shadow: 0 2px 16px rgba(0,0,0,.15);
  }
  body:not(.navigation-active) .hero .sub {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
  }
  body:not(.navigation-active) .hero .mini {
    font-size: 13px;
    padding: 9px 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
  body:not(.navigation-active) .hero .pill {
    font-size: 10px;
    padding: 6px 14px;
    letter-spacing: .06em;
  }
  body:not(.navigation-active) .hero .mini-row {
    margin-top: 16px;
  }

  /* ── Pills — refined ───────────────────────────────────────────────── */
  body:not(.navigation-active) .pill {
    font-size: 10px;
    padding: 5px 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* ── Section divider ───────────────────────────────────────────────── */
  body:not(.navigation-active) .section-divider {
    margin: 4px 0;
    height: 0;
    border: none;
    background: none;
  }

  /* ── Filter buttons — tactile chips ────────────────────────────────── */
  body:not(.navigation-active) .filter-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-medium);
    background: var(--surface-primary);
    transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-xs);
  }
  body:not(.navigation-active) .filter-btn:hover {
    border-color: var(--bnb-blue);
    color: var(--bnb-blue);
    background: rgba(23,128,238,.04);
    box-shadow: 0 4px 14px rgba(23,128,238,.10);
    transform: translateY(-1px);
  }
  body:not(.navigation-active) .filter-btn.active {
    background: var(--bnb-blue);
    border-color: var(--bnb-blue);
    box-shadow: 0 4px 16px rgba(23,128,238,.30);
  }

  /* ── Route cards — editorial magazine style ────────────────────────── */
  body:not(.navigation-active) #routeList.cards-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    overflow: visible;
    padding: 8px 4px 16px;
    scroll-snap-type: none;
  }
  body:not(.navigation-active) #routeList .card {
    flex: none;
    min-width: 0;
    width: 100%;
    scroll-snap-align: none;
  }
  body:not(.navigation-active) .card {
    border-radius: var(--radius);
    padding: 0;
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    position: relative;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  body:not(.navigation-active) .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(23,128,238,.18);
  }
  /* image area — cinematic ratio */
  body:not(.navigation-active) .card-image {
    height: 200px;
    border-radius: 0;
    margin: 0;
    border: none;
    position: relative;
  }
  body:not(.navigation-active) .card-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
    pointer-events: none;
    border-radius: 0;
  }
  body:not(.navigation-active) .card-image img {
    border-radius: 0;
  }
  /* text content zone */
  body:not(.navigation-active) .card-media {
    position: relative;
  }
  body:not(.navigation-active) .card-title {
    font-size: 17px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    padding: 16px 18px 0;
  }
  body:not(.navigation-active) .card-meta {
    font-size: 12px;
    padding: 0 18px;
    color: #64748b;
  }
  body:not(.navigation-active) .card-desc {
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    padding: 0 18px;
    margin-top: 6px;
  }
  body:not(.navigation-active) .card .difficulty-bar {
    padding: 0 18px;
    margin-top: 8px;
  }
  body:not(.navigation-active) .card .more-toggle {
    margin: 6px 18px 0;
  }
  /* chips row */
  body:not(.navigation-active) .card .chips {
    padding: 0 18px;
    margin-top: 12px;
    gap: 6px;
    justify-content: flex-start;
  }
  body:not(.navigation-active) .card .chip {
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-xs);
    padding: 5px 10px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
  }
  /* actions */
  body:not(.navigation-active) .card .route-actions {
    padding: 0 18px;
    margin-top: 14px;
  }
  body:not(.navigation-active) .card .btn-start-navigation-card {
    margin: 10px 18px 18px;
    border-radius: var(--radius-xs);
  }
  /* selected tag */
  body:not(.navigation-active) .selected-tag {
    font-size: 10px;
    border-radius: var(--radius-xs);
    padding: 5px 12px;
    box-shadow: 0 4px 14px rgba(23,128,238,.30);
  }
  /* fav button */
  body:not(.navigation-active) .fav-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* ── Bike cards — grid ─────────────────────────────────────────────── */
  body:not(.navigation-active) .bikes-cards-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 8px 2px 12px;
  }
  body:not(.navigation-active) .bike-card {
    flex: none;
    min-width: 0;
    width: 100%;
    scroll-snap-align: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-primary);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  body:not(.navigation-active) .bike-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
  }
  body:not(.navigation-active) .bike-card-image {
    height: 180px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  body:not(.navigation-active) .bike-card-title {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
  }
  body:not(.navigation-active) .bike-card-desc {
    font-size: 12px;
    -webkit-line-clamp: 3;
  }
  body:not(.navigation-active) .price-badge {
    font-size: 13px;
    padding: 7px 16px;
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 14px rgba(249,115,22,.30);
  }

  /* ── Map — taller on desktop ───────────────────────────────────────── */
  body:not(.navigation-active) #map {
    height: 480px;
    border-radius: var(--radius);
    box-shadow:
      0 12px 36px rgba(10,40,80,.08),
      inset 0 0 0 1px rgba(10,40,80,.06);
  }
  body:not(.navigation-active) .map-frame.expanded #map {
    height: 540px;
  }

  /* ── Badges ────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .badges {
    gap: 8px;
    margin-bottom: 12px;
  }
  body:not(.navigation-active) .badge {
    font-size: 11px;
    padding: 5px 14px;
    border-radius: var(--radius-xs);
  }

  /* ── Detail grid — magazine layout ─────────────────────────────────── */
  body:not(.navigation-active) .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* ── Reviews ────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .review-card {
    padding: 18px 22px;
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
  }
  body:not(.navigation-active) .review-card-comment {
    font-size: 14px;
    line-height: 1.6;
  }

  /* ── Similar cards — grid ──────────────────────────────────────────── */
  body:not(.navigation-active) .similar-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
  }
  body:not(.navigation-active) .similar-card {
    scroll-snap-align: none;
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  }
  body:not(.navigation-active) .similar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  /* ── Accessories — grid ────────────────────────────────────────────── */
  body:not(.navigation-active) .accessories-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  body:not(.navigation-active) .accessory-card {
    scroll-snap-align: none;
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  body:not(.navigation-active) .accessory-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  body:not(.navigation-active) .accessory-name {
    font-size: 11px;
    font-weight: 700;
  }

  /* ── Detail toggle ─────────────────────────────────────────────────── */
  body:not(.navigation-active) .detail-toggle-wrap {
    max-width: var(--dk-max);
    padding: 0 var(--dk-pad);
  }

  /* ── Buttons — premium ─────────────────────────────────────────────── */
  body:not(.navigation-active) .btn-primary,
  body:not(.navigation-active) .btn-launch {
    border-radius: var(--radius-sm);
    font-size: 14px;
    min-height: 48px;
    font-weight: 700;
    transition: all .2s cubic-bezier(.4,0,.2,1);
  }

  /* ── CTA ────────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .home-all-bikes-cta {
    max-width: var(--dk-max);
    padding: 0 var(--dk-pad);
  }

  /* ── Footer ────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .bnbike-legal-footer {
    max-width: var(--dk-max);
    margin: 0 auto;
    padding: 20px var(--dk-pad);
  }

  /* ── Weather panel ─────────────────────────────────────────────────── */
  body:not(.navigation-active) .weather-days {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  body:not(.navigation-active) .weather-day {
    padding: 14px 10px;
    border-radius: var(--radius-sm);
  }

  /* ── Reservation modal ─────────────────────────────────────────────── */
  .reservation-modal-card {
    max-width: 520px;
    border-radius: var(--radius);
    padding: 44px 40px;
  }

  /* ── Client access gate ────────────────────────────────────────────── */
  .client-access-card {
    max-width: 480px;
    border-radius: var(--radius);
  }

  /* ── Nav footer ────────────────────────────────────────────────────── */
  body:not(.navigation-active) .nav-footer-float {
    border-radius: var(--radius);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIER 2 — 1200 px+  ★ Full desktop experience ★
   Two-panel layout · map sticky sidebar · premium surfaces
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  /* ── Canvas — layered depth ────────────────────────────────────────── */
  html {
    background:
      radial-gradient(ellipse at 0% 0%, rgba(23,128,238,.05) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(255,122,0,.04) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(23,128,238,.02) 0%, transparent 70%),
      var(--surface-canvas);
  }

  /* ══ TWO-PANEL LAYOUT ═══════════════════════════════════════════════ */
  body:not(.navigation-active) .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 540px);
    gap: 0 var(--dk-gap);
    max-width: var(--dk-max);
    padding: 28px 40px;
    align-items: start;
  }
  body:not(.navigation-active) .app > * {
    grid-column: 1;
  }

  /* ═══════════════════════════════════════════════════════════════════
     MAP SIDEBAR — the centrepiece of the desktop experience
     ═══════════════════════════════════════════════════════════════════ */
  body:not(.navigation-active) .app > #mapSection {
    grid-column: 2;
    grid-row: 1 / span 30;
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(23,128,238,.18) transparent;
    /* the container */
    border-radius: var(--radius);
    background: var(--surface-primary);
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-subtle);
    box-shadow:
      var(--shadow-xl),
      0 0 0 1px rgba(23,128,238,.04);
    /* inner scroll polish */
    scroll-behavior: smooth;
  }
  body:not(.navigation-active) .app > #mapSection::-webkit-scrollbar {
    width: 4px;
  }
  body:not(.navigation-active) .app > #mapSection::-webkit-scrollbar-thumb {
    background: rgba(23,128,238,.16);
    border-radius: 4px;
  }

  /* ── Map panel: dark header strip ──────────────────────────────────── */
  body:not(.navigation-active) #mapSection > .section-head {
    margin: 0;
    padding: 20px 24px 16px;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background:
      linear-gradient(135deg, #062b50 0%, #0c5fbf 60%, #1780ee 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  body:not(.navigation-active) #mapSection > .section-head::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,0,.15) 0%, transparent 70%);
    pointer-events: none;
  }
  body:not(.navigation-active) #mapSection .section-head h2 {
    font-size: 20px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
  }
  body:not(.navigation-active) #mapSection .section-head .sub {
    color: rgba(255,255,255,.7);
  }
  body:not(.navigation-active) #mapSection .pill {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: none;
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
  }

  /* ── Map panel: body area ──────────────────────────────────────────── */
  body:not(.navigation-active) #mapSection .badges,
  body:not(.navigation-active) #mapSection .offroute-alert,
  body:not(.navigation-active) #mapSection .map-sound-fab-wrap,
  body:not(.navigation-active) #mapSection .next-turn-panel,
  body:not(.navigation-active) #mapSection .gps-banner,
  body:not(.navigation-active) #mapSection .progress-wrap,
  body:not(.navigation-active) #mapSection .elevation-wrap,
  body:not(.navigation-active) #mapSection .map-frame,
  body:not(.navigation-active) #mapSection .nav-footer-float,
  body:not(.navigation-active) #mapSection .map-actions,
  body:not(.navigation-active) #mapSection .arrival-premium {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* ── Badges inside map panel ───────────────────────────────────────── */
  body:not(.navigation-active) #mapSection .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 12px;
  }
  body:not(.navigation-active) #mapSection .badge {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: var(--radius-xs);
    font-weight: 700;
  }

  /* ── GPS banner — info widget ──────────────────────────────────────── */
  body:not(.navigation-active) .gps-banner {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-top: 12px;
    /* reset navigation-active positioning */
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    width: auto; max-width: none;
    z-index: auto;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
    color: var(--bnb-blue-deep);
  }
  body:not(.navigation-active) .gps-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bnb-blue-deep) !important;
  }
  body:not(.navigation-active) .gps-sub {
    font-size: 12px !important;
    color: #64748b !important;
  }

  /* ── Map — the hero of the sidebar ─────────────────────────────────── */
  body:not(.navigation-active) #map {
    height: calc(100vh - 400px);
    min-height: 380px;
    max-height: 560px;
    border-radius: var(--radius-sm);
    box-shadow:
      0 8px 24px rgba(10,40,80,.08),
      inset 0 0 0 1px rgba(10,40,80,.05);
    border: none;
  }
  body:not(.navigation-active) .map-frame {
    margin-top: 0;
  }
  body:not(.navigation-active) .map-frame.expanded #map {
    height: calc(100vh - 320px);
    max-height: 640px;
  }

  /* ── Elevation ─────────────────────────────────────────────────────── */
  body:not(.navigation-active) .elevation-wrap {
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-top: 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
  }
  body:not(.navigation-active) .elevation-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bnb-blue-deep);
  }

  /* ── Map actions ───────────────────────────────────────────────────── */
  body:not(.navigation-active) .map-actions {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  body:not(.navigation-active) .map-actions-row {
    flex-direction: column;
    gap: 10px;
  }
  body:not(.navigation-active) .btn-launch {
    font-size: 15px !important;
    min-height: 54px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--bnb-blue) 0%, var(--bnb-blue-dark) 100%);
    border: none;
    box-shadow: 0 8px 28px rgba(23,128,238,.30);
    transition: all .25s cubic-bezier(.4,0,.2,1);
  }
  body:not(.navigation-active) .btn-launch:hover {
    box-shadow: 0 14px 36px rgba(23,128,238,.40);
    transform: translateY(-2px);
  }
  body:not(.navigation-active) .btn-start-point-maps {
    font-size: 13px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
  }
  body:not(.navigation-active) .ride-disclaimer-inline {
    font-size: 12px;
    max-width: none;
    text-align: left;
    padding: 8px 0 0;
    color: #94a3b8;
  }

  /* ── Nav footer float — stats widget ───────────────────────────────── */
  body:not(.navigation-active) .nav-footer-float {
    border-radius: var(--radius-sm);
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
  }
  body:not(.navigation-active) .nav-footer-stats {
    gap: 12px;
  }
  body:not(.navigation-active) .nav-footer-stat-value {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--bnb-blue-deep);
  }
  body:not(.navigation-active) .nav-footer-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════════════
     LEFT COLUMN — content sections
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Hero — left column ────────────────────────────────────────────── */
  body:not(.navigation-active) .app > .hero {
    grid-column: 1;
  }
  body:not(.navigation-active) .hero h1 {
    font-size: 38px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 900;
    letter-spacing: -0.045em;
  }
  body:not(.navigation-active) .hero .sub {
    font-size: 16px;
    font-weight: 500;
  }

  /* ── PWA banner ────────────────────────────────────────────────────── */
  body:not(.navigation-active) .app > .pwa-banner {
    grid-column: 1;
  }

  /* ── Section divider ───────────────────────────────────────────────── */
  body:not(.navigation-active) .app > .section-divider {
    margin: 4px 0;
  }

  /* ── Search block — glass surface ──────────────────────────────────── */
  body:not(.navigation-active) .search-unified-block {
    padding: 26px 30px 28px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(246,248,251,.92) 100%);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(226,232,240,.5);
  }
  body:not(.navigation-active) .search-unified-block .section-head {
    border-bottom: none;
  }
  body:not(.navigation-active) .search-unified-block .filter-subgroup-label {
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--bnb-blue-deep);
    letter-spacing: .03em;
  }
  body:not(.navigation-active) .unified-filters-container .filters,
  body:not(.navigation-active) .unified-filters-container .bikes-filter-row {
    gap: 8px !important;
  }

  /* ── Route cards — 2 columns ───────────────────────────────────────── */
  body:not(.navigation-active) #routeList.cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* ── Bike cards — 2 columns ────────────────────────────────────────── */
  body:not(.navigation-active) .bikes-cards-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px;
  }

  /* ── History ────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .history-block {
    border-radius: var(--radius);
    padding: 18px 22px;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
  }
  body:not(.navigation-active) .history-title {
    font-size: 15px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
  }

  /* ── Detail toggle ─────────────────────────────────────────────────── */
  body:not(.navigation-active) .detail-toggle-wrap {
    padding: 0;
    max-width: none;
  }
  body:not(.navigation-active) .detail-toggle-btn {
    font-size: 14px !important;
    min-height: 50px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700;
  }

  /* ── Reviews — 2-col grid ──────────────────────────────────────────── */
  body:not(.navigation-active) #reviewsSection .reviews-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  body:not(.navigation-active) .btn-review-open {
    max-width: 320px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    padding: 14px 20px;
  }

  /* ── Detail section ────────────────────────────────────────────────── */
  body:not(.navigation-active) .info-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
    padding: 11px 0;
    font-size: 14px;
  }
  body:not(.navigation-active) .info-item:last-child {
    border-bottom: none;
  }
  body:not(.navigation-active) .info-item strong {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
  }
  body:not(.navigation-active) .info-item span {
    color: #64748b;
    font-size: 13px;
  }
  body:not(.navigation-active) .detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
  }
  body:not(.navigation-active) .poi-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ── Similar routes ────────────────────────────────────────────────── */
  body:not(.navigation-active) .similar-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px;
  }

  /* ── CTA buttons ───────────────────────────────────────────────────── */
  body:not(.navigation-active) .home-all-bikes-cta {
    padding: 0;
    max-width: none;
  }
  body:not(.navigation-active) .btn-all-bikes,
  body:not(.navigation-active) .similar-all-routes-btn {
    border-radius: var(--radius-sm) !important;
    font-size: 14px;
    min-height: 52px;
    font-weight: 700;
  }

  /* ── Accessories ───────────────────────────────────────────────────── */
  body:not(.navigation-active) .accessories-title {
    font-size: 15px;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
  }
  body:not(.navigation-active) .accessories-row {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 14px;
  }
  body:not(.navigation-active) #accessoriesBlock.accessories-block-blue {
    border-radius: var(--radius);
  }

  /* ── Footer ────────────────────────────────────────────────────────── */
  body:not(.navigation-active) .bnbike-legal-footer {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 16px;
  }
  body:not(.navigation-active) .bnbike-legal-link {
    font-size: 13px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     ALL ROUTES / ALL BIKES PAGES — enhanced
     ═══════════════════════════════════════════════════════════════════ */
  #allRoutesPage .all-routes-list-premium {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
  #allBikesPage .all-bikes-list-premium {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .route-card-premium {
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  .route-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl) !important;
  }
  .route-card-premium h2 {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
  }
  .route-card-content-premium {
    padding: 20px;
  }
  .all-bike-card {
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  .all-bike-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     PREMIUM VISUAL EFFECTS
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Card selection glow ───────────────────────────────────────────── */
  body:not(.navigation-active) .card.active {
    border-color: rgba(23,128,238,.35);
    box-shadow:
      0 16px 48px rgba(23,128,238,.16),
      0 0 0 3px rgba(23,128,238,.06);
  }

  /* ── Premium button hover ──────────────────────────────────────────── */
  body:not(.navigation-active) .route-btn-premium:hover {
    background: rgba(23,128,238,.04);
    border-color: var(--bnb-blue);
    box-shadow: 0 4px 16px rgba(23,128,238,.12);
    transform: translateY(-1px);
  }
  body:not(.navigation-active) .btn-book-bike:hover {
    background: var(--bnb-blue);
    color: #fff;
    border-color: var(--bnb-blue);
    box-shadow: 0 6px 20px rgba(23,128,238,.25);
    transform: translateY(-1px);
  }

  /* ── More actions menu ─────────────────────────────────────────────── */
  body:not(.navigation-active) .more-actions-menu {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    border: 1px solid var(--border-subtle);
  }

  /* ── Offroute alert ────────────────────────────────────────────────── */
  body:not(.navigation-active) .offroute-alert {
    border-radius: var(--radius-sm);
    font-size: 13px;
  }

  /* ── Map floating controls — refined ───────────────────────────────── */
  body:not(.navigation-active) .map-mode-fab,
  body:not(.navigation-active) .map-zoom-fab,
  body:not(.navigation-active) .map-gps-fab {
    box-shadow: var(--shadow-md);
    transition: box-shadow .2s ease, transform .2s ease;
  }

  /* ── Scrollbar global ──────────────────────────────────────────────── */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(23,128,238,.12) transparent;
  }
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    background: rgba(23,128,238,.12);
    border-radius: 6px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(23,128,238,.25);
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ── Entrance animations ───────────────────────────────────────────── */
  @keyframes dkReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes dkRevealRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  body:not(.navigation-active) .app > .block,
  body:not(.navigation-active) .app > .section-divider,
  body:not(.navigation-active) .app > .detail-toggle-wrap {
    animation: dkReveal .5s cubic-bezier(.22,1,.36,1) both;
  }
  body:not(.navigation-active) .app > #mapSection {
    animation: dkRevealRight .6s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .15s;
  }
  body:not(.navigation-active) .app > *:nth-child(1) { animation-delay: 0s; }
  body:not(.navigation-active) .app > *:nth-child(2) { animation-delay: .06s; }
  body:not(.navigation-active) .app > *:nth-child(3) { animation-delay: .12s; }
  body:not(.navigation-active) .app > *:nth-child(4) { animation-delay: .18s; }
  body:not(.navigation-active) .app > *:nth-child(5) { animation-delay: .24s; }
  body:not(.navigation-active) .app > *:nth-child(6) { animation-delay: .30s; }
  body:not(.navigation-active) .app > *:nth-child(7) { animation-delay: .36s; }
  body:not(.navigation-active) .app > *:nth-child(8) { animation-delay: .42s; }
  body:not(.navigation-active) .app > *:nth-child(9) { animation-delay: .48s; }
  body:not(.navigation-active) .app > *:nth-child(10) { animation-delay: .54s; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIER 3 — 1440 px+  (wide desktop)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  :root {
    --dk-gap: 40px;
    --dk-pad: 36px;
  }

  body:not(.navigation-active) .app {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 600px);
    padding: 32px 56px;
  }

  /* Hero */
  body:not(.navigation-active) .app > .hero {
    padding: 44px 48px 40px;
  }
  body:not(.navigation-active) .hero h1 {
    font-size: 42px;
  }

  /* Route cards — 3 columns */
  body:not(.navigation-active) #routeList.cards-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Bike cards — 3 columns */
  body:not(.navigation-active) .bikes-cards-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px;
  }

  /* Map */
  body:not(.navigation-active) #map {
    min-height: 420px;
    max-height: 620px;
  }

  /* Blocks */
  body:not(.navigation-active) .block {
    padding: 30px 34px;
    margin-bottom: 24px;
  }

  /* Map panel header */
  body:not(.navigation-active) #mapSection > .section-head {
    padding: 24px 28px 18px;
  }
  body:not(.navigation-active) #mapSection .section-head h2 {
    font-size: 22px;
  }
  body:not(.navigation-active) #mapSection .badges,
  body:not(.navigation-active) #mapSection .offroute-alert,
  body:not(.navigation-active) #mapSection .gps-banner,
  body:not(.navigation-active) #mapSection .elevation-wrap,
  body:not(.navigation-active) #mapSection .map-frame,
  body:not(.navigation-active) #mapSection .nav-footer-float,
  body:not(.navigation-active) #mapSection .map-actions {
    margin-left: 24px;
    margin-right: 24px;
  }

  /* All Routes / Bikes pages */
  #allRoutesPage .all-routes-list-premium {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 30px !important;
  }
  #allBikesPage .all-bikes-list-premium {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIER 4 — 1920 px+  (Full HD)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {

  body:not(.navigation-active) .app {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 680px);
    padding: 36px 72px;
    max-width: 1860px;
  }

  body:not(.navigation-active) .hero h1 {
    font-size: 46px;
  }
  body:not(.navigation-active) .hero .sub {
    font-size: 18px;
  }

  body:not(.navigation-active) #map {
    min-height: 480px;
    max-height: 720px;
  }

  body:not(.navigation-active) .block {
    padding: 34px 38px;
  }

  body:not(.navigation-active) #mapSection > .section-head {
    padding: 28px 32px 20px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIER 5 — 2560 px+  (4K / Ultra-wide)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {

  body:not(.navigation-active) .app {
    max-width: 2200px;
    grid-template-columns: minmax(0, 1fr) 760px;
    padding: 48px 96px;
  }

  body:not(.navigation-active) .hero h1 {
    font-size: 52px;
  }

  body:not(.navigation-active) #map {
    min-height: 540px;
    max-height: 820px;
  }

  body:not(.navigation-active) #routeList.cards-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  body:not(.navigation-active) .bikes-cards-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 26px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   INTERACTION STATES — Desktop (hover: hover)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (hover: hover) {

  /* Card image zoom */
  body:not(.navigation-active) .card-image img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  body:not(.navigation-active) .card:hover .card-image img {
    transform: scale(1.07);
  }

  /* Bike card image */
  body:not(.navigation-active) .bike-card-image img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  body:not(.navigation-active) .bike-card:hover .bike-card-image img {
    transform: scale(1.05);
  }

  /* Filter chips */
  body:not(.navigation-active) .filter-btn:hover:not(.active) {
    background: rgba(23,128,238,.04);
    border-color: var(--bnb-blue);
    color: var(--bnb-blue);
  }

  /* Price badge */
  body:not(.navigation-active) .price-badge {
    transition: box-shadow .2s ease, transform .2s ease;
  }
  body:not(.navigation-active) .price-badge:hover {
    box-shadow: 0 6px 20px rgba(249,115,22,.40);
    transform: translateY(-1px);
  }

  /* Map floating controls */
  body:not(.navigation-active) .map-mode-fab:hover,
  body:not(.navigation-active) .map-zoom-fab:hover,
  body:not(.navigation-active) .map-gps-fab:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.06);
  }

  /* Similar cards */
  body:not(.navigation-active) .similar-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

  /* Route card premium pages */
  .route-image-wrap-premium img,
  .all-bike-image-wrap img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  .route-card-premium:hover .route-image-wrap-premium img,
  .all-bike-card:hover .all-bike-image-wrap img {
    transform: scale(1.05);
  }

  /* Accessory micro-interactions */
  body:not(.navigation-active) .accessory-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  body:not(.navigation-active) .accessory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-medium);
  }

  /* Fav button */
  body:not(.navigation-active) .fav-btn {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  body:not(.navigation-active) .fav-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════════════ */
@media print and (min-width: 1200px) {
  body:not(.navigation-active) .app {
    display: block;
    max-width: 100%;
  }
  body:not(.navigation-active) .app > #mapSection {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    max-height: none;
    page-break-inside: avoid;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BnBike GPS — Desktop plein écran premium v286
   Objectif : vraie plateforme desktop sans modifier mobile (<1024px).
   Toutes les règles ci-dessous sont isolées desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  :root{
    --bnb-desktop-blue:#1780EE;
    --bnb-desktop-blue-dark:#0C5FBF;
    --bnb-desktop-orange:#FF7A00;
    --bnb-desktop-orange-dark:#E86600;
    --bnb-desktop-ink:#0f172a;
    --bnb-desktop-muted:#64748b;
    --bnb-desktop-surface:#ffffff;
    --bnb-desktop-canvas:#eef5ff;
    --bnb-desktop-line:rgba(15,23,42,.08);
    --bnb-desktop-shadow:0 24px 70px rgba(15,23,42,.11),0 4px 14px rgba(15,23,42,.06);
    --bnb-desktop-soft-shadow:0 14px 42px rgba(15,23,42,.08),0 2px 8px rgba(15,23,42,.04);
  }

  html,body{
    min-height:100%;
    background:
      radial-gradient(circle at 8% 0%, rgba(23,128,238,.12), transparent 34%),
      radial-gradient(circle at 96% 6%, rgba(255,122,0,.11), transparent 30%),
      linear-gradient(180deg,#f7fbff 0%,#edf5ff 48%,#f8fbff 100%) !important;
  }

  body:not(.navigation-active) .app{
    width:min(100%,1760px);
    max-width:none !important;
    margin:0 auto;
    padding:28px clamp(26px,3vw,64px) 44px !important;
    box-sizing:border-box;
  }

  body:not(.navigation-active) .block{
    border:1px solid rgba(255,255,255,.72);
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(16px) saturate(1.22);
    -webkit-backdrop-filter:blur(16px) saturate(1.22);
    box-shadow:var(--bnb-desktop-soft-shadow);
  }

  body:not(.navigation-active) .hero{
    min-height:190px !important;
    padding:42px 48px !important;
    background:
      radial-gradient(circle at 15% 25%, rgba(255,255,255,.22), transparent 33%),
      radial-gradient(circle at 88% 20%, rgba(255,122,0,.23), transparent 28%),
      linear-gradient(135deg,#073b70 0%,#0c5fbf 48%,#1780ee 100%) !important;
    border-radius:34px !important;
    color:#fff;
  }
  body:not(.navigation-active) .hero h1{font-size:clamp(36px,3vw,58px)!important;line-height:.98!important;color:#fff!important;max-width:760px;}
  body:not(.navigation-active) .hero .sub{font-size:clamp(16px,1.2vw,21px)!important;color:rgba(255,255,255,.82)!important;}
  body:not(.navigation-active) .hero .section-head{border:0!important;margin:0 0 20px!important;padding:0!important;}
  body:not(.navigation-active) .hero .pill{background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;}

  body:not(.navigation-active) .search-unified-block .filter-subgroup,
  body:not(.navigation-active) .search-unified-block .filters{
    display:flex;flex-wrap:wrap;gap:10px;
  }
  body:not(.navigation-active) .filter-btn,
  body:not(.navigation-active) .quick-btn,
  body:not(.navigation-active) .bike-filter-btn,
  body:not(.navigation-active) .size-btn{
    border-radius:999px!important;
    padding:10px 18px!important;
    background:#fff!important;
    box-shadow:0 7px 20px rgba(15,23,42,.06)!important;
  }

  body:not(.navigation-active) #routeList.cards-row,
  body:not(.navigation-active) .bikes-cards-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px!important;
    overflow:visible!important;
  }
  body:not(.navigation-active) #routeList .card,
  body:not(.navigation-active) .bike-card{
    min-width:0!important;width:100%!important;box-shadow:var(--bnb-desktop-soft-shadow)!important;
  }

  body:not(.navigation-active) #mapSection{
    border-radius:34px!important;
    overflow:hidden;
  }
  body:not(.navigation-active) #map{
    min-height:460px!important;
    border-radius:24px!important;
  }

  /* Pages liste plein écran : base desktop premium */
  body:not(.navigation-active) .all-routes-page{
    background:
      radial-gradient(circle at 10% 0%, rgba(255,122,0,.12), transparent 32%),
      radial-gradient(circle at 92% 8%, rgba(23,128,238,.12), transparent 34%),
      linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%)!important;
  }
  body:not(.navigation-active) .all-routes-page:not(.hidden){
    padding:28px clamp(28px,4vw,76px) 56px!important;
    overflow:auto;
  }
  body:not(.navigation-active) .all-routes-page .list-page-sticky-shell,
  body:not(.navigation-active) .all-routes-page .page-filter-bar,
  body:not(.navigation-active) .all-routes-list-premium,
  body:not(.navigation-active) .all-bikes-list-premium{
    width:min(100%,1760px)!important;
    max-width:1760px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box;
  }
  body:not(.navigation-active) .all-routes-page .list-page-sticky-shell{
    position:relative!important;top:auto!important;z-index:20!important;padding:0!important;margin-bottom:18px!important;background:transparent!important;
  }
  body:not(.navigation-active) .all-routes-header-premium{
    min-height:160px!important;
    border-radius:34px!important;
    padding:34px 42px!important;
    display:grid!important;
    grid-template-columns:60px 1fr 60px!important;
    align-items:center!important;
    gap:20px!important;
    background:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.24), transparent 30%),
      radial-gradient(circle at 92% 18%, rgba(255,255,255,.12), transparent 26%),
      linear-gradient(135deg,#ff8a00 0%,#ff7a00 52%,#f36500 100%)!important;
    box-shadow:0 28px 72px rgba(255,122,0,.22),0 8px 18px rgba(15,23,42,.06)!important;
    border:1px solid rgba(255,255,255,.35)!important;
    color:#fff!important;
  }
  body:not(.navigation-active) .all-routes-header-premium > div{grid-column:2;text-align:center;}
  body:not(.navigation-active) .all-routes-header-premium h1{
    margin:0!important;color:#fff!important;font-size:clamp(34px,3.4vw,58px)!important;letter-spacing:-.055em!important;line-height:1!important;text-shadow:0 10px 26px rgba(109,45,0,.18)!important;
  }
  body:not(.navigation-active) .all-routes-header-premium p{
    margin:10px 0 0!important;color:rgba(255,255,255,.84)!important;font-size:clamp(15px,1.1vw,20px)!important;font-weight:700!important;
  }
  body:not(.navigation-active) .all-routes-back{
    grid-column:1!important;
    width:56px!important;height:56px!important;border-radius:999px!important;
    border:1px solid rgba(255,255,255,.68)!important;background:rgba(255,255,255,.94)!important;color:#f36500!important;
    box-shadow:0 14px 30px rgba(126,53,0,.20)!important;
    font-size:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  }
  body:not(.navigation-active) .all-routes-back::before{content:'‹';font-size:42px;line-height:1;font-weight:800;transform:translateY(-2px);}
  body:not(.navigation-active) .all-routes-back:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(126,53,0,.26)!important;}

  body:not(.navigation-active) .page-filter-bar{
    position:sticky!important;top:18px!important;z-index:30!important;
    margin-bottom:24px!important;padding:14px!important;border-radius:26px!important;
    background:rgba(255,255,255,.90)!important;backdrop-filter:blur(18px) saturate(1.25)!important;-webkit-backdrop-filter:blur(18px) saturate(1.25)!important;
    box-shadow:0 18px 44px rgba(15,23,42,.10)!important;border:1px solid rgba(255,255,255,.74)!important;
    display:grid!important;grid-auto-flow:column!important;grid-template-rows:repeat(2,auto)!important;grid-auto-columns:max-content!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
  }
  body:not(.navigation-active) .page-filter-bar::-webkit-scrollbar{display:none;}
  body:not(.navigation-active) .page-filter-chip{
    min-height:44px!important;padding:0 22px!important;border-radius:999px!important;font-size:15px!important;font-weight:900!important;
    border:1px solid rgba(23,128,238,.10)!important;background:#fff!important;color:#0f3b66!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
    white-space:nowrap!important;
  }
  body:not(.navigation-active) .page-filter-chip.active{
    color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,#1780ee,#0c5fbf)!important;box-shadow:0 12px 28px rgba(23,128,238,.28)!important;
  }

  body:not(.navigation-active) .all-routes-list-premium,
  body:not(.navigation-active) .all-bikes-list-premium{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;padding:0!important;
  }

  body:not(.navigation-active) .route-discovery-card{
    min-height:300px!important;height:300px!important;border-radius:30px!important;box-shadow:var(--bnb-desktop-shadow)!important;border:1px solid rgba(255,255,255,.6)!important;overflow:hidden!important;
  }
  body:not(.navigation-active) .route-discovery-card img{filter:saturate(1.05) contrast(1.02)!important;}
  body:not(.navigation-active) .route-discovery-overlay{background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.10) 35%,rgba(0,0,0,.48) 100%)!important;}
  body:not(.navigation-active) .route-discovery-top-row{top:18px!important;left:18px!important;right:18px!important;align-items:flex-start!important;}
  body:not(.navigation-active) .route-discovery-badges{max-width:70%!important;display:flex!important;flex-wrap:wrap!important;gap:7px!important;}
  body:not(.navigation-active) .route-discovery-badge{font-size:12px!important;padding:7px 11px!important;border-radius:999px!important;box-shadow:0 8px 20px rgba(0,0,0,.18)!important;}
  body:not(.navigation-active) .route-discovery-fav{
    width:42px!important;height:42px!important;min-width:42px!important;border-radius:999px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 12px 26px rgba(0,0,0,.20)!important;display:flex!important;align-items:center!important;justify-content:center!important;
  }
  body:not(.navigation-active) .route-discovery-fav span{font-size:24px!important;color:#2c6fc8!important;text-shadow:0 1px 0 #fff!important;}
  body:not(.navigation-active) .route-discovery-fav.active span{color:#ef3340!important;}
  body:not(.navigation-active) .route-discovery-content{left:22px!important;right:22px!important;bottom:20px!important;display:flex!important;flex-direction:column!important;gap:10px!important;}
  body:not(.navigation-active) .route-discovery-content h2{font-size:clamp(24px,2vw,36px)!important;line-height:1.02!important;max-width:88%!important;margin:0!important;color:#fff!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-shadow:0 10px 26px rgba(0,0,0,.30)!important;}
  body:not(.navigation-active) .route-discovery-meta{font-size:14px!important;font-weight:800!important;color:rgba(255,255,255,.92)!important;gap:10px!important;}
  body:not(.navigation-active) .route-discovery-bottom{margin-top:auto!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;}
  body:not(.navigation-active) .route-discovery-cta{min-height:46px!important;border-radius:999px!important;padding:0 22px!important;font-size:14px!important;font-weight:900!important;background:linear-gradient(135deg,#1780ee,#0c5fbf)!important;box-shadow:0 14px 32px rgba(23,128,238,.30)!important;}

  body:not(.navigation-active) .all-bike-card{
    border-radius:30px!important;overflow:hidden!important;background:#fff!important;box-shadow:var(--bnb-desktop-soft-shadow)!important;border:1px solid rgba(255,255,255,.65)!important;
  }
  body:not(.navigation-active) .all-bike-image-wrap{height:280px!important;border-radius:0!important;}
  body:not(.navigation-active) .all-bike-image-wrap img{width:100%!important;height:100%!important;object-fit:cover!important;}
  body:not(.navigation-active) .all-bike-content{padding:22px 24px 24px!important;}
  body:not(.navigation-active) .all-bike-content h2{font-size:clamp(22px,1.8vw,32px)!important;line-height:1.08!important;}
}

@media (min-width:1200px){
  body:not(.navigation-active) .app{
    display:grid!important;
    grid-template-columns:minmax(640px,1fr) minmax(430px,34vw)!important;
    grid-template-rows:auto auto auto auto;
    gap:26px 34px!important;
    align-items:start!important;
  }
  body:not(.navigation-active) .app > *{grid-column:1!important;}
  body:not(.navigation-active) .app > #mapSection{
    grid-column:2!important;grid-row:1 / span 12!important;position:sticky!important;top:24px!important;max-height:calc(100vh - 48px)!important;overflow:auto!important;padding:22px!important;background:#fff!important;
  }
  body:not(.navigation-active) #map{height:calc(100vh - 330px)!important;min-height:480px!important;max-height:760px!important;}
  body:not(.navigation-active) #routeList.cards-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body:not(.navigation-active) .bikes-cards-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (min-width:1440px){
  body:not(.navigation-active) .all-routes-list-premium,
  body:not(.navigation-active) .all-bikes-list-premium{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px!important;}
  body:not(.navigation-active) #routeList.cards-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body:not(.navigation-active) .bikes-cards-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body:not(.navigation-active) .route-discovery-card{height:330px!important;min-height:330px!important;}
}

@media (min-width:1920px){
  body:not(.navigation-active) .app,
  body:not(.navigation-active) .all-routes-page .list-page-sticky-shell,
  body:not(.navigation-active) .all-routes-page .page-filter-bar,
  body:not(.navigation-active) .all-routes-list-premium,
  body:not(.navigation-active) .all-bikes-list-premium{width:min(100%,1880px)!important;max-width:1880px!important;}
  body:not(.navigation-active) .all-routes-list-premium{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body:not(.navigation-active) .all-bikes-list-premium{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body:not(.navigation-active) .route-discovery-card{height:340px!important;min-height:340px!important;}
}

@media (min-width:2560px){
  body:not(.navigation-active) .app,
  body:not(.navigation-active) .all-routes-page .list-page-sticky-shell,
  body:not(.navigation-active) .all-routes-page .page-filter-bar,
  body:not(.navigation-active) .all-routes-list-premium,
  body:not(.navigation-active) .all-bikes-list-premium{width:min(100%,2180px)!important;max-width:2180px!important;}
  body:not(.navigation-active) .all-routes-list-premium{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body:not(.navigation-active) .all-bikes-list-premium{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
  body:not(.navigation-active) .route-discovery-card{height:380px!important;min-height:380px!important;}
}

/* ======================================================================
   BnBike GPS — Desktop Platform v289
   Goal: real full-screen desktop layout, mobile untouched (<1024px)
   ====================================================================== */
@media (min-width:1024px){
  body:not(.navigation-active){
    background:
      radial-gradient(circle at 7% 12%, rgba(255,122,0,.16), transparent 26%),
      radial-gradient(circle at 93% 8%, rgba(23,128,238,.16), transparent 30%),
      linear-gradient(180deg,#f4f8ff 0%,#eef5ff 48%,#f8fbff 100%) !important;
    overflow-x:hidden!important;
  }

  body:not(.navigation-active) .app{
    width:min(96vw,1680px)!important;
    max-width:min(96vw,1680px)!important;
    margin:0 auto!important;
    padding:28px 0 54px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(380px,34vw)!important;
    gap:28px!important;
    align-items:start!important;
  }

  body:not(.navigation-active) .app > *:not(#mapSection){
    grid-column:1!important;
    min-width:0!important;
  }

  body:not(.navigation-active) .pwa-banner{
    grid-column:1 / -1!important;
  }

  body:not(.navigation-active) #mapSection{
    grid-column:2!important;
    grid-row:1 / span 8!important;
    position:sticky!important;
    top:24px!important;
    min-height:calc(100vh - 48px)!important;
    max-height:calc(100vh - 48px)!important;
    display:flex!important;
    flex-direction:column!important;
    padding:22px!important;
    overflow:hidden!important;
    border-radius:32px!important;
    background:rgba(255,255,255,.78)!important;
    box-shadow:0 30px 90px rgba(14,65,120,.16), inset 0 1px 0 rgba(255,255,255,.9)!important;
    border:1px solid rgba(255,255,255,.86)!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  }

  body:not(.navigation-active) #mapSection .section-head{
    margin-bottom:12px!important;
    padding:18px 18px 16px!important;
    border-radius:24px!important;
    border:0!important;
    background:linear-gradient(135deg,#0c5fbf 0%,#1780ee 70%,#55b3ff 100%)!important;
    color:white!important;
  }
  body:not(.navigation-active) #mapSection .section-head h2,
  body:not(.navigation-active) #mapSection .section-head .pill{color:white!important;}
  body:not(.navigation-active) #mapSection .badges{margin:4px 0 10px!important;}
  body:not(.navigation-active) #mapFrame{
    flex:1 1 auto!important;
    min-height:480px!important;
    height:auto!important;
    border-radius:28px!important;
    overflow:hidden!important;
    box-shadow:0 18px 54px rgba(11,74,130,.16)!important;
    border:8px solid rgba(255,255,255,.9)!important;
  }
  body:not(.navigation-active) #mapFrame .map-frame-inner,
  body:not(.navigation-active) #map{
    height:100%!important;
    min-height:480px!important;
  }
  body:not(.navigation-active) #mapSection .map-actions{
    margin-top:14px!important;
    padding:0!important;
  }

  body:not(.navigation-active) .hero,
  body:not(.navigation-active) .search-unified-block,
  body:not(.navigation-active) #routeSection,
  body:not(.navigation-active) #bikesSection,
  body:not(.navigation-active) #similarRoutesBlock,
  body:not(.navigation-active) .accessories-block-blue,
  body:not(.navigation-active) #detailSection,
  body:not(.navigation-active) #reviewsSection{
    border-radius:32px!important;
    box-shadow:0 22px 70px rgba(11,74,130,.10)!important;
    border:1px solid rgba(255,255,255,.85)!important;
  }

  body:not(.navigation-active) .hero{
    min-height:210px!important;
    padding:42px 48px!important;
    background:
      linear-gradient(90deg,rgba(9,56,112,.78),rgba(23,128,238,.58)),
      url('/assets/img/splash-bnbike-bg.jpg') center/cover no-repeat!important;
  }
  body:not(.navigation-active) .hero h1{font-size:clamp(42px,3vw,62px)!important;}
  body:not(.navigation-active) .hero .sub{font-size:18px!important;}

  body:not(.navigation-active) .search-unified-block{
    display:grid!important;
    grid-template-columns:minmax(260px,.35fr) 1fr!important;
    gap:24px!important;
    align-items:center!important;
    padding:30px 34px!important;
    background:linear-gradient(135deg,#0c5fbf 0%,#1780ee 55%,#54b2ff 100%)!important;
    color:white!important;
  }
  body:not(.navigation-active) .search-unified-block .section-head{border:0!important;margin:0!important;padding:0!important;}
  body:not(.navigation-active) .search-unified-block h2,
  body:not(.navigation-active) .search-unified-block .sub{color:white!important;}
  body:not(.navigation-active) .search-unified-block .unified-filters-container{margin:0!important;}
  body:not(.navigation-active) .filter-subgroup-label{color:rgba(255,255,255,.9)!important;}

  body:not(.navigation-active) #routeList.cards-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px!important;
  }
  body:not(.navigation-active) #routeList .card img,
  body:not(.navigation-active) .route-image,
  body:not(.navigation-active) .route-img{
    height:210px!important;
    object-fit:cover!important;
  }

  body:not(.navigation-active) .bikes-cards-row,
  body:not(.navigation-active) #bikesGrid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:20px!important;
    overflow:visible!important;
  }
}

@media (min-width:1200px){
  /* Full-screen list pages: not phone-sized any more */
  body:not(.navigation-active) #allRoutesPage.all-routes-page:not(.hidden),
  body:not(.navigation-active) #allBikesPage.all-routes-page:not(.hidden){
    position:fixed!important;
    inset:0!important;
    z-index:9999!important;
    width:100vw!important;
    height:100vh!important;
    overflow:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(360px,30vw)!important;
    grid-template-rows:auto auto 1fr!important;
    gap:24px 28px!important;
    padding:28px max(2.5vw,32px)!important;
    background:
      radial-gradient(circle at 12% 8%, rgba(255,122,0,.16), transparent 24%),
      radial-gradient(circle at 88% 6%, rgba(23,128,238,.20), transparent 28%),
      linear-gradient(180deg,#f4f8ff 0%,#edf5ff 100%)!important;
    align-items:start!important;
  }

  body:not(.navigation-active) #allRoutesPage .list-page-sticky-shell,
  body:not(.navigation-active) #allBikesPage .list-page-sticky-shell{
    grid-column:1 / -1!important;
    position:static!important;
    width:min(96vw,1680px)!important;
    max-width:min(96vw,1680px)!important;
    justify-self:center!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body:not(.navigation-active) #allRoutesPage .all-routes-header-premium,
  body:not(.navigation-active) #allBikesPage .all-routes-header-premium{
    width:100%!important;
    min-height:150px!important;
    padding:32px 42px!important;
    border-radius:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:28px!important;
    background:
      radial-gradient(circle at 12% 15%,rgba(255,255,255,.25),transparent 23%),
      linear-gradient(135deg,#ff9d1b 0%,#ff7a00 48%,#ff5d00 100%)!important;
    box-shadow:0 26px 74px rgba(255,122,0,.25), inset 0 1px 0 rgba(255,255,255,.28)!important;
    border:1px solid rgba(255,255,255,.38)!important;
    color:white!important;
    overflow:hidden!important;
  }
  body:not(.navigation-active) #allRoutesPage .all-routes-header-premium h1,
  body:not(.navigation-active) #allBikesPage .all-routes-header-premium h1{
    font-size:clamp(44px,3.2vw,70px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    color:white!important;
    text-align:left!important;
    margin:0!important;
  }
  body:not(.navigation-active) #allRoutesPage .all-routes-header-premium p,
  body:not(.navigation-active) #allBikesPage .all-routes-header-premium p{
    font-size:18px!important;
    color:rgba(255,255,255,.88)!important;
    margin-top:6px!important;
    text-align:left!important;
  }
  body:not(.navigation-active) #allRoutesPage .all-routes-back,
  body:not(.navigation-active) #allBikesPage .all-routes-back{
    position:static!important;
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.96)!important;
    color:#ff7a00!important;
    box-shadow:0 18px 44px rgba(99,45,0,.18)!important;
    font-size:30px!important;
    font-weight:900!important;
    border:0!important;
  }

  body:not(.navigation-active) #allRoutesFilterBar,
  body:not(.navigation-active) #allBikesFilterBar{
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    position:sticky!important;
    top:18px!important;
    z-index:10!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    padding:18px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 18px 54px rgba(11,74,130,.12)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body:not(.navigation-active) #allRoutesFilterBar .page-filter-chip,
  body:not(.navigation-active) #allBikesFilterBar .page-filter-chip{
    min-height:44px!important;
    padding:0 22px!important;
    font-size:15px!important;
    border-radius:999px!important;
    box-shadow:0 8px 20px rgba(11,74,130,.08)!important;
  }

  body:not(.navigation-active) #allRoutesList{
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:24px!important;
    padding:0!important;
  }
  body:not(.navigation-active) #allRoutesList .route-discovery-card{
    min-height:310px!important;
    height:auto!important;
    border-radius:30px!important;
    box-shadow:0 22px 70px rgba(11,74,130,.15)!important;
    overflow:hidden!important;
    transform:translateZ(0)!important;
  }
  body:not(.navigation-active) #allRoutesList .route-discovery-card:hover{
    transform:translateY(-6px)!important;
    box-shadow:0 32px 90px rgba(11,74,130,.20)!important;
  }
  body:not(.navigation-active) #allRoutesList .route-discovery-overlay{
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(3,20,40,.18) 35%,rgba(3,20,40,.72) 100%)!important;
  }
  body:not(.navigation-active) #allRoutesList .route-discovery-content h2{
    font-size:clamp(25px,1.55vw,34px)!important;
    line-height:1.02!important;
    max-height:2.08em!important;
    overflow:hidden!important;
    text-wrap:balance!important;
  }
  body:not(.navigation-active) #allRoutesList .route-discovery-cta{
    min-height:50px!important;
    font-size:15px!important;
    border-radius:18px!important;
  }

  body:not(.navigation-active) #allBikesList{
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:24px!important;
    padding:0!important;
  }
  body:not(.navigation-active) #allBikesList .all-bike-card{
    min-width:0!important;
    width:100%!important;
    border-radius:30px!important;
    box-shadow:0 22px 70px rgba(11,74,130,.12)!important;
    transition:transform .22s ease, box-shadow .22s ease!important;
  }
  body:not(.navigation-active) #allBikesList .all-bike-card:hover{
    transform:translateY(-6px)!important;
    box-shadow:0 32px 90px rgba(11,74,130,.18)!important;
  }
  body:not(.navigation-active) #allBikesList .all-bike-image-wrap{
    height:220px!important;
  }
  body:not(.navigation-active) #allBikesList .all-bike-content h2{
    font-size:23px!important;
    line-height:1.03!important;
  }

  body:not(.navigation-active) #allRoutesPage.all-routes-page:not(.hidden)::after,
  body:not(.navigation-active) #allBikesPage.all-routes-page:not(.hidden)::after{
    content:'Carte & actions BnBike\A\A Sélectionnez une balade ou un vélo.\A Gardez la carte, la réservation et les infos utiles visibles pendant votre exploration.';
    white-space:pre-line!important;
    grid-column:2!important;
    grid-row:2 / span 2!important;
    position:sticky!important;
    top:28px!important;
    min-height:calc(100vh - 56px)!important;
    border-radius:34px!important;
    padding:34px!important;
    color:#0a315f!important;
    font-family:'Plus Jakarta Sans','Poppins',sans-serif!important;
    font-size:19px!important;
    font-weight:800!important;
    line-height:1.4!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62)),
      url('/assets/img/splash-bnbike-bg.jpg') center/cover no-repeat!important;
    box-shadow:0 30px 90px rgba(11,74,130,.16), inset 0 1px 0 rgba(255,255,255,.9)!important;
    border:1px solid rgba(255,255,255,.9)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
}

@media (min-width:1440px){
  body:not(.navigation-active) #routeList.cards-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body:not(.navigation-active) #allRoutesList{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body:not(.navigation-active) #allBikesList{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}

@media (min-width:1920px){
  body:not(.navigation-active) .app,
  body:not(.navigation-active) #allRoutesPage .list-page-sticky-shell,
  body:not(.navigation-active) #allBikesPage .list-page-sticky-shell{
    width:min(94vw,1760px)!important;
    max-width:min(94vw,1760px)!important;
  }
  body:not(.navigation-active) .app{
    grid-template-columns:minmax(0,1fr) 560px!important;
  }
  body:not(.navigation-active) #allRoutesPage.all-routes-page:not(.hidden),
  body:not(.navigation-active) #allBikesPage.all-routes-page:not(.hidden){
    grid-template-columns:minmax(0,1fr) 520px!important;
    padding-left:max(3vw,48px)!important;
    padding-right:max(3vw,48px)!important;
  }
  body:not(.navigation-active) #allRoutesList{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body:not(.navigation-active) #allBikesList{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}

/* V345 — desktop : mêmes cartes compactes uniformes en grille */
@media (min-width:1024px){
  body:not(.navigation-active) #allRoutesPage .all-routes-list-premium,
  body:not(.navigation-active) #allBikesPage .all-bikes-list-premium{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important;
    gap:22px !important;
    max-width:1500px !important;
    margin:0 auto !important;
    padding:30px 28px 120px !important;
  }
  body:not(.navigation-active) #allRoutesPage .bnb-compact-card,
  body:not(.navigation-active) #allBikesPage .bnb-compact-card{
    min-height:190px !important;
    grid-template-columns:148px minmax(0,1fr) !important;
  }
  body:not(.navigation-active) #allRoutesPage .bnb-compact-media,
  body:not(.navigation-active) #allBikesPage .bnb-compact-media{
    width:148px !important;
    min-height:190px !important;
  }
}

/* V346 — desktop alignment for compact mobile-first cards */
@media (min-width:1024px){
  body:not(.navigation-active) #allRoutesPage .all-routes-list-premium,
  body:not(.navigation-active) #allBikesPage .all-bikes-list-premium{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px !important;
    max-width:980px !important;
    padding:24px 24px 140px !important;
  }
  body:not(.navigation-active) #allRoutesPage .bnb-compact-card,
  body:not(.navigation-active) #allBikesPage .bnb-compact-card{
    max-width:none !important;
  }
}