/*
 * BnBike GPS — Page Parcours reconstruite depuis une feuille blanche.
 * Aucun sélecteur de l'ancienne page n'est réutilisé.
 * v460 — Design carrousel horizontal identique à la page Tous les vélos.
 */

#routesCleanPage {
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:block !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  padding:0 0 88px !important;
  background:#fff !important;
  color:#071b3b !important;
  font-family:Poppins,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased !important;
}

#routesCleanPage.hidden {
  display:none !important;
}

#routesCleanPage,
#routesCleanPage * {
  box-sizing:border-box !important;
}

#routesCleanPage button {
  font:inherit !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* ── Shell & Hero ── */
#routesCleanPage .routes-clean-shell {
  width:100% !important;
  margin:0 !important;
  padding:13px 13px 0 !important;
  background:#fff !important;
}

#routesCleanPage .routes-clean-hero {
  position:relative !important;
  width:100% !important;
  height:116px !important;
  margin:0 !important;
  padding:18px 44% 15px 18px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:22px !important;
  background:linear-gradient(116deg,#0967ee 0%,#087fe9 48%,#10c9df 100%) !important;
  box-shadow:0 10px 22px rgba(6,102,199,.16) !important;
}

#routesCleanPage .routes-clean-hero::after {
  content:"" !important;
  position:absolute !important;
  width:145px !important;
  height:145px !important;
  right:-58px !important;
  bottom:-78px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.07) !important;
}

#routesCleanPage .routes-clean-copy {
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  text-align:left !important;
}

#routesCleanPage .routes-clean-kicker {
  display:block !important;
  margin:0 0 9px !important;
  color:rgba(255,255,255,.97) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.035em !important;
  white-space:nowrap !important;
}

#routesCleanPage .routes-clean-title {
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:clamp(25px,7.3vw,31px) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}

#routesCleanPage .routes-clean-subtitle {
  margin:0 !important;
  color:rgba(255,255,255,.97) !important;
  font-size:clamp(11px,3.2vw,14px) !important;
  line-height:1.15 !important;
  font-weight:550 !important;
  white-space:nowrap !important;
}

#routesCleanPage .routes-clean-art {
  position:absolute !important;
  z-index:2 !important;
  top:9px !important;
  right:8px !important;
  width:43% !important;
  height:98px !important;
}

#routesCleanPage .routes-clean-art svg {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:100% !important;
  height:78px !important;
  overflow:visible !important;
}

#routesCleanPage .routes-clean-art-line,
#routesCleanPage .routes-clean-art-pin,
#routesCleanPage .routes-clean-art-trees,
#routesCleanPage .routes-clean-art-cloud {
  fill:none !important;
  stroke:rgba(255,255,255,.91) !important;
  stroke-width:2.6 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#routesCleanPage .routes-clean-art-line {
  stroke-dasharray:5 5 !important;
}

#routesCleanPage .routes-clean-art-dot {
  fill:#fff !important;
  stroke:none !important;
}

#routesCleanPage .routes-clean-art-trees,
#routesCleanPage .routes-clean-art-cloud {
  opacity:.50 !important;
  stroke-width:2 !important;
}

#routesCleanPage .routes-clean-selection {
  position:absolute !important;
  right:1px !important;
  bottom:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:22px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff8e14,#ff6800) !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:0 5px 12px rgba(214,73,0,.22) !important;
}

/* ── Barre de filtres ── */
#routesCleanFilterBar {
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  margin:12px 0 0 !important;
  padding:0 0 1px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  background:#fff !important;
  scrollbar-width:none !important;
}

#routesCleanFilterBar::-webkit-scrollbar {
  display:none !important;
}

#routesCleanFilterBar .routes-clean-filter {
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:37px !important;
  margin:0 !important;
  padding:0 13px !important;
  border:1.4px solid #b9cde8 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#071c3f !important;
  box-shadow:none !important;
  font-size:clamp(10px,2.85vw,12px) !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap !important;
}

#routesCleanFilterBar .routes-clean-filter.active {
  border-color:#ff7900 !important;
  background:linear-gradient(135deg,#ff9319,#ff6800) !important;
  color:#fff !important;
  box-shadow:0 7px 15px rgba(255,105,0,.22) !important;
}

/* ── Carte de la vue d'ensemble ── */
#routesCleanPage .routes-clean-map-wrap {
  position:relative !important;
  width:auto !important;
  height:182px !important;
  margin:11px 13px 0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:19px !important;
  background:#dff0f6 !important;
  box-shadow:0 9px 20px rgba(16,75,130,.12) !important;
}

#routesCleanOverviewMap {
  width:100% !important;
  height:100% !important;
  min-height:182px !important;
  border-radius:19px !important;
  overflow:hidden !important;
  background:#dff0f6 !important;
}

#routesCleanPage .routes-clean-map-loading {
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  color:#54708d !important;
  font-size:12px !important;
  font-weight:750 !important;
}

#routesCleanLocateBtn {
  position:absolute !important;
  left:10px !important;
  bottom:10px !important;
  z-index:500 !important;
  display:grid !important;
  place-items:center !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.98) !important;
  color:#0875e6 !important;
  box-shadow:0 7px 16px rgba(11,70,132,.17) !important;
}

#routesCleanLocateBtn svg {
  width:22px !important;
  height:22px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
}

#routesCleanLocateBtn.is-loading {
  opacity:.7 !important;
  transform:scale(.94) !important;
}

#routesCleanMapCount {
  position:absolute !important;
  right:9px !important;
  bottom:9px !important;
  z-index:500 !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:32px !important;
  padding:6px 11px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff8e14,#ff6500) !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:850 !important;
  box-shadow:0 7px 15px rgba(255,101,0,.24) !important;
}

#routesCleanMapCount::before {
  content:"🚶" !important;
  margin-right:5px !important;
  font-size:13px !important;
}

#routesCleanPage .routes-clean-marker-wrap {
  border:0 !important;
  background:transparent !important;
}

#routesCleanPage .routes-clean-marker {
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  border:2.5px solid #fff !important;
  border-radius:50% !important;
  background:#0874e6 !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:950 !important;
  box-shadow:0 5px 12px rgba(0,73,158,.30) !important;
}

/* ── Heading section ── */
#routesCleanPage .routes-clean-heading {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:14px 14px 8px !important;
}

#routesCleanPage .routes-clean-heading h2 {
  margin:0 !important;
  color:#061a35 !important;
  font-size:16px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
}

#routesCleanVisibleCount {
  display:none !important;
}

#routesCleanVisibleCount::after {
  content:"" !important;
  display:none !important;
}

/* ── Liste principale — v460 : carrousel horizontal identique aux vélos ── */
#routesCleanList {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:1px 0 105px !important;
  overflow:visible !important;
  background:#fff !important;
}

/* Rayon (shelf) — conteneur bleu identique aux vélos */
#routesCleanList .routes-clean-shelf {
  width:auto !important;
  margin:10px 13px 13px !important;
  padding:13px 0 9px !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 82% 9%,rgba(255,255,255,.17),transparent 26%),
    linear-gradient(118deg,#075acb 0%,#0879ed 50%,#11cbdc 100%) !important;
  box-shadow:0 11px 25px rgba(6,102,199,.17) !important;
}

/* Tête du rayon */
#routesCleanList .routes-clean-shelf-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:0 12px 11px !important;
}

/* Badge titre orange du rayon */
#routesCleanList .routes-clean-shelf-title {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:37px !important;
  height:37px !important;
  margin:0 !important;
  padding:0 13px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff9418,#ff6800) !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  box-shadow:0 8px 17px rgba(209,74,0,.28) !important;
  white-space:nowrap !important;
}

/* Lien "Voir tout" */
#routesCleanList .routes-clean-viewall {
  color:#fff !important;
  font-size:11px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 4px rgba(0,45,105,.20) !important;
}

/* Track horizontal (carrousel) */
#routesCleanList .routes-clean-track {
  display:flex !important;
  align-items:stretch !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 12px 7px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-left:12px !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}

#routesCleanList .routes-clean-track::-webkit-scrollbar {
  display:none !important;
}

/* Indicateurs de pagination (dots) */
#routesCleanList .routes-clean-dots {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  height:12px !important;
  margin-top:2px !important;
}

#routesCleanList .routes-clean-dots i {
  display:block !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.52) !important;
}

#routesCleanList .routes-clean-dots i:first-child {
  background:#fff !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.20) !important;
}

/* ── Carte parcours — v460 : design identique aux cartes vélos ── */
#routesCleanList .routes-clean-card {
  position:relative !important;
  flex:0 0 82% !important;
  display:block !important;
  width:82% !important;
  max-width:330px !important;
  height:310px !important;
  min-height:310px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.96) !important;
  border-radius:21px !important;
  background:#fff !important;
  box-shadow:0 10px 23px rgba(1,45,99,.24) !important;
  scroll-snap-align:start !important;
  isolation:isolate !important;
}

/* Fond blanc derrière l'image */
#routesCleanList .routes-clean-card::before {
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 0 72px !important;
  background:#fff !important;
}

/* Fondu bas pour transition douce vers le corps blanc */
#routesCleanList .routes-clean-card::after {
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  left:0 !important;
  right:0 !important;
  bottom:72px !important;
  height:36px !important;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 88%) !important;
  pointer-events:none !important;
}

/* Zone image — object-fit:contain sur fond blanc */
#routesCleanList .routes-clean-media {
  position:absolute !important;
  z-index:1 !important;
  inset:34px 8px 72px !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  cursor:pointer !important;
}

#routesCleanList .routes-clean-media img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:drop-shadow(0 9px 9px rgba(7,48,86,.15)) !important;
}

/* Badge catégorie — vert, en haut à gauche */
#routesCleanList .routes-clean-category {
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  max-width:calc(100% - 58px) !important;
  min-height:26px !important;
  padding:4px 9px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#22c55e,#129447) !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:850 !important;
  box-shadow:0 5px 11px rgba(18,148,71,.22) !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#routesCleanList .routes-clean-category > span {
  font-size:12px !important;
  line-height:1 !important;
}

/* Bouton favori — en haut à droite */
#routesCleanList .routes-clean-fav {
  position:absolute !important;
  top:9px !important;
  right:9px !important;
  z-index:6 !important;
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.97) !important;
  color:#082c60 !important;
  box-shadow:0 6px 15px rgba(7,48,88,.14) !important;
  font-size:24px !important;
  line-height:1 !important;
  text-shadow:none !important;
}

#routesCleanList .routes-clean-fav span {
  color:inherit !important;
  font-size:24px !important;
  line-height:1 !important;
}

#routesCleanList .routes-clean-fav.active,
#routesCleanList .routes-clean-fav.is-active {
  color:#ef334e !important;
}

/* Corps de la carte — fond blanc en bas à gauche */
#routesCleanList .routes-clean-body {
  position:absolute !important;
  z-index:4 !important;
  left:0 !important;
  right:50px !important;
  bottom:0 !important;
  display:block !important;
  width:auto !important;
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  margin:0 !important;
  padding:9px 5px 7px 12px !important;
  overflow:hidden !important;
  border-top:1px solid #edf2f7 !important;
  background:#fff !important;
  color:#071b3b !important;
  text-align:left !important;
}

#routesCleanList .routes-clean-body h2 {
  width:100% !important;
  margin:0 0 4px !important;
  overflow:hidden !important;
  color:#071b3b !important;
  font-size:15px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}

#routesCleanList .routes-clean-meta {
  margin:0 !important;
  overflow:hidden !important;
  color:#087bef !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}

/* Badge électrique masqué */
#routesCleanList .routes-clean-electric {
  display:none !important;
}

/* Bouton CTA — bleu rond en bas à droite */
#routesCleanList .routes-clean-cta {
  position:absolute !important;
  right:9px !important;
  bottom:14px !important;
  z-index:6 !important;
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#168ff0,#0873df) !important;
  color:#fff !important;
  box-shadow:0 7px 16px rgba(8,115,223,.28) !important;
  font-size:22px !important;
  line-height:1 !important;
}

#routesCleanList .routes-clean-cta span {
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
}

/* Message vide */
#routesCleanPage .routes-clean-empty {
  margin:20px 14px !important;
  padding:26px 16px !important;
  border-radius:16px !important;
  background:#f1f7ff !important;
  color:#315473 !important;
  text-align:center !important;
  font-size:13px !important;
  font-weight:700 !important;
}

/* ── Responsive ── */
@media (min-width:600px) {
  #routesCleanPage .routes-clean-shell,
  #routesCleanPage .routes-clean-map-wrap,
  #routesCleanPage .routes-clean-heading,
  #routesCleanList {
    width:min(100%,720px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:430px) {
  #routesCleanList .routes-clean-card {
    height:286px !important;
    min-height:286px !important;
    max-height:286px !important;
  }
}

@media (min-width:700px) {
  #routesCleanList .routes-clean-card {
    flex-basis:58% !important;
    width:58% !important;
    min-width:58% !important;
    max-width:430px !important;
    height:350px !important;
    min-height:350px !important;
    max-height:350px !important;
  }
  #routesCleanList .routes-clean-shelf {
    width:min(calc(100% - 48px),900px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:1024px) {
  #routesCleanPage .routes-clean-shell,
  #routesCleanPage .routes-clean-map-wrap,
  #routesCleanPage .routes-clean-heading,
  #routesCleanList {
    width:480px !important;
  }
}