/* =========================================================
   M'SAFARA — SE-DEPLACE.CSS
   Page : se-deplacer.php
   Scope : .move-page
========================================================= */

.move-page {
  position: relative;
}

.move-page *,
.move-page *::before,
.move-page *::after {
  box-sizing: border-box;
  min-width: 0;
}

/* Base layout */
.move-page #plan-du-reseau {
  position: relative;
}

.move-page .hero-network-layout--cockpit {
  align-items: start;
}

.move-page .hero-network-layout__left,
.move-page .hero-network-layout__center {
  min-width: 0;
}

/* SE-DÉPLACER — téléphone : 5 arrêts visibles strict */
@media (max-width: 760px) {
  .move-page .hero-network-layout__detail {
    --visible-stops: 5 !important;
    height: auto !important;
    max-height: none !important;
  }

  .move-page .hero-network-layout__detail .network-detail-card.network-detail-card--line-focus {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .move-page .hero-network-layout__detail .network-detail-line {
    flex: 0 0 auto !important;
  }

  .move-page .hero-network-layout__detail .network-stop-list {
    display: block !important;
    height: 364px !important;
    max-height: 364px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
  }
}


.move-page .network-stop-access {
  display: none !important;
}

.move-page .network-stop-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.move-page .network-stop-content {
  min-width: 0 !important;
}

.move-page .network-stop-content strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* SE-DÉPLACER — réduire l’espace interne autour de la carte */
.move-page .hero-network-layout__map,
.move-page .hero-network-map {
  padding: 15px !important;
}

.move-page .hero-network-map__stage,
.move-page .network-map-stage {
  margin-top: 10px !important;
}

/* Tablette / téléphone : encore plus compact */
@media (max-width: 1100px) {
  .move-page .hero-network-layout__map,
  .move-page .hero-network-map {
    padding: 10px !important;
  }

  .move-page .hero-network-map__stage,
  .move-page .network-map-stage {
    margin-top: 10px !important;
  }
}

/* SE-DÉPLACER — état initial carte */
.move-page .network-map-stage {
  --stop-names-visible: 1;
}

.move-page .network-map-stage.is-stop-names-hidden .network-stop-label,
.move-page .network-map-stage.is-stop-names-hidden .network-stop-name {
  opacity: 1 !important;
  visibility: visible !important;
}

.move-page .network-stop-label {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: none !important;
}

.move-page .network-map-stage.is-stop-names-hidden .network-stop-label {
  opacity: 1 !important;
  visibility: visible !important;
}

.move-page .network-line-orbit [data-network-lines],
.move-page .network-line-orbit .hero-network-map__lines,
.move-page .network-line-orbit .network-line-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.move-page .network-line-orbit .network-line-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 118px !important;
  display: grid !important;
  grid-template-columns: 54px 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

.move-page .network-line-orbit .network-line-button img {
  width: 54px !important;
  height: 54px !important;
}

@media (max-width: 520px) {
  .move-page .network-line-orbit [data-network-lines],
  .move-page .network-line-orbit .hero-network-map__lines,
  .move-page .network-line-orbit .network-line-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .move-page .network-line-orbit .network-line-button {
    grid-template-columns: 42px 1fr !important;
    min-height: 96px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  .move-page .network-line-orbit .network-line-button img {
    width: 42px !important;
    height: 42px !important;
  }
}


/* =========================================================
   Sélecteur lignes — 
========================================================= */

.move-page .network-line-orbit {
  position: relative !important;
  width: 100% !important;
  padding: clamp(14px, 2vw, 22px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(232,240,255,.46)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 26px 70px rgba(15,35,75,.16),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
}

.move-page .network-line-orbit::before,
.move-page .network-line-orbit::after {
  display: none !important;
  content: none !important;
}

.move-page .network-line-orbit__head {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.move-page .network-line-orbit .eyebrow {
  color: #24498f !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
}

.move-page .network-line-orbit .network-layer-tabs {
  display: flex !important;
  gap: 7px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: inset 0 0 0 1px rgba(28,54,110,.08) !important;
}

.move-page .network-line-orbit .network-layer-tabs button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  color: #29436f !important;
  background: transparent !important;
}

.move-page .network-line-orbit .network-layer-tabs button:hover,
.move-page .network-line-orbit .network-layer-tabs button.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #24498f, #e30613) !important;
  box-shadow: 0 10px 24px rgba(36,73,143,.24) !important;
}

.move-page .network-line-orbit [data-network-lines],
.move-page .network-line-orbit .hero-network-map__lines,
.move-page .network-line-orbit .network-line-list {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.5vw, 16px) !important;
  align-items: stretch !important;
	    padding: 14px;
}

.move-page .network-line-orbit .network-line-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(92px, 10vw, 118px) !important;
  display: grid !important;
  grid-template-columns: clamp(42px, 5vw, 58px) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: clamp(10px, 1.4vw, 16px) !important;
  padding: clamp(12px, 1.6vw, 18px) !important;
  border-radius: clamp(18px, 2vw, 26px) !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 42%, rgba(255,255,255,.78)) !important;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--line-color) 30%, white), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(245,248,255,.76)) !important;
  color: #10234a !important;
  transform: translateY(0) scale(1) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.move-page .network-line-orbit .network-line-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      color-mix(in srgb, var(--line-color) 20%, white) 45%,
      transparent 72%
    ) !important;
  opacity: 0 !important;
  transform: translateX(-120%) !important;
  transition: opacity .22s ease, transform .5s ease !important;
}

.move-page .network-line-orbit .network-line-button::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 10px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--line-color) !important;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--line-color) 70%, transparent),
    0 0 22px color-mix(in srgb, var(--line-color) 45%, transparent) !important;
  opacity: .75 !important;
}

.move-page .network-line-orbit .network-line-button img {
  width: clamp(42px, 5vw, 58px) !important;
  height: clamp(42px, 5vw, 58px) !important;
  padding: 7px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9),
    0 12px 26px color-mix(in srgb, var(--line-color) 30%, transparent) !important;
}

.move-page .network-line-orbit .network-line-button__text {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

.move-page .network-line-orbit .network-line-button__text strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #10234a !important;
  font-size: clamp(.78rem, 1.2vw, 1rem) !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.move-page .network-line-orbit .network-line-button__text small {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 8px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--line-color) 14%, white) !important;
  color: color-mix(in srgb, var(--line-color) 72%, #10234a) !important;
  font-size: .68rem !important;
  font-weight: 950 !important;
}

.move-page .network-line-orbit .network-line-button:hover {
  transform: translateY(0px) scale(1.012) !important;
  border-color: color-mix(in srgb, var(--line-color) 72%, white) !important;
  box-shadow:
    0 24px 54px color-mix(in srgb, var(--line-color) 24%, transparent),
    inset 0 -5px 0 var(--line-color),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.move-page .network-line-orbit .network-line-button:hover::before {
  opacity: .8 !important;
  transform: translateX(120%) !important;
}

.move-page .network-line-orbit .network-line-button:not(:hover) {
  filter: saturate(.96) !important;
}

.move-page .network-line-orbit .network-line-button.is-active,
.move-page .network-line-orbit .network-line-button.is-focused,
.move-page .network-line-orbit .network-line-button.is-linked-active {
  transform: translateY(1px) scale(1.018) !important;
  border-color: var(--line-color) !important;
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--line-color) 44%, white), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--line-color) 18%, white), rgba(255,255,255,.92)) !important;

}

.move-page .network-line-orbit .network-line-button.is-active::after,
.move-page .network-line-orbit .network-line-button.is-focused::after,
.move-page .network-line-orbit .network-line-button.is-linked-active::after {
  height: 4px !important;
  opacity: 1 !important;
  box-shadow:
    0 0 14px var(--line-color),
    0 0 32px color-mix(in srgb, var(--line-color) 70%, transparent) !important;
}

/* Responsive mondial : reste en 2 colonnes même téléphone */
@media (max-width: 760px) {
  .move-page .network-line-orbit {
    padding: 12px !important;
    border-radius: 24px !important;
  }

  .move-page .network-line-orbit__head {
    align-items: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 12px !important;
  }

  .move-page .network-line-orbit .network-layer-tabs {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .move-page .network-line-orbit .network-layer-tabs button {
    flex: 1 1 0 !important;
    padding: 0 8px !important;
    font-size: .68rem !important;
  }

  .move-page .network-line-orbit [data-network-lines],
  .move-page .network-line-orbit .hero-network-map__lines,
  .move-page .network-line-orbit .network-line-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .move-page .network-line-orbit .network-line-button {
    min-height: 92px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .move-page .network-line-orbit .network-line-button img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    padding: 5px !important;
  }

  .move-page .network-line-orbit .network-line-button__text strong {
    font-size: .72rem !important;
    line-height: 1.12 !important;
  }

  .move-page .network-line-orbit .network-line-button__text small {
    margin-top: 6px !important;
    padding: 4px 8px !important;
    font-size: .58rem !important;
  }
}

@media (max-width: 380px) {
  .move-page .network-line-orbit .network-line-button {
    min-height: 86px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .move-page .network-line-orbit .network-line-button img {
    width: 34px !important;
    height: 34px !important;
  }

  .move-page .network-line-orbit .network-line-button__text strong {
    font-size: .66rem !important;
  }

  .move-page .network-line-orbit .network-line-button__text small {
    display: none !important;
  }
}

/* Fix disparition SVG / carte sur se-deplacer */
.move-page .hero-network-layout--cockpit {
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.35fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.move-page .hero-network-layout__left,
.move-page .hero-network-layout__center,
.move-page .hero-network-map,
.move-page .network-map-stage {
  min-width: 0 !important;
}

.move-page .network-map-stage {
  width: 100% !important;
  aspect-ratio: 2834 / 2598 !important;
  min-height: 420px !important;
}

.move-page .network-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
}

/* Garde 2 colonnes aussi à cette largeur */
@media (max-width: 1180px) and (min-width: 761px) {
  .move-page .hero-network-layout--cockpit {
    grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr) !important;
    gap: 18px !important;
  }

  .move-page .network-map-stage,
  .move-page .network-svg {
    min-height: 520px !important;
  }
}

/* Mobile seulement : on empile */
@media (max-width: 760px) {
  .move-page .hero-network-layout--cockpit {
    grid-template-columns: 1fr !important;
  }

  .move-page .network-map-stage,
  .move-page .network-svg {
    min-height: 430px !important;
  }
}


/* SE-DÉPLACER — rendre le sélecteur lignes comme index.php */
.move-page .network-line-orbit {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.move-page .network-line-orbit::before,
.move-page .network-line-orbit::after {
  display: none !important;
}

.move-page .network-line-orbit__head {
  margin-bottom: 12px !important;
}

.move-page .network-line-orbit [data-network-lines],
.move-page .network-line-orbit .network-line-list,
.move-page .network-line-orbit .hero-network-map__lines {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 0 !important;
}

.move-page .network-line-orbit .network-line-button {
  min-width: 0 !important;
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 90%, white) !important;
  border-left: 4px solid var(--line-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

.move-page .network-line-orbit .network-line-button::before,
.move-page .network-line-orbit .network-line-button::after {
  display: none !important;
}

.move-page .network-line-orbit .network-line-button img {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.move-page .network-line-orbit .network-line-button__text strong {
  color: #102652 !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
}

.move-page .network-line-orbit .network-line-button__text small {
  display: block !important;
  margin-top: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(16,38,82,.58) !important;
  font-size: .68rem !important;
}

.move-page .network-line-orbit .network-line-button:hover,
.move-page .network-line-orbit .network-line-button.is-active,
.move-page .network-line-orbit .network-line-button.is-focused,
.move-page .network-line-orbit .network-line-button.is-linked-active,
.move-page .network-line-orbit .network-line-button[aria-pressed="true"] {
  background: rgba(255,255,255,.98) !important;
  border-color: var(--line-color) !important;
  border-left-color: var(--line-color) !important;
}

/* Même en mobile : 2 colonnes */
@media (max-width: 760px) {
  .move-page .network-line-orbit [data-network-lines],
  .move-page .network-line-orbit .network-line-list,
  .move-page .network-line-orbit .hero-network-map__lines {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .move-page .network-line-orbit .network-line-button {
    min-height: 92px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 12px !important;
  }
}

/* FORCE GRID 2 COLONNES — version téléphone */
@media (max-width: 760px) {
  .move-page .network-line-orbit > .network-line-list.hero-network-map__lines[data-network-lines] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .move-page .network-line-orbit > .network-line-list.hero-network-map__lines[data-network-lines] > .network-line-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1100px) {
  .move-page .network-line-orbit {
    margin-bottom: 16px !important;
  }
}

/* FULLSCREEN SE-DÉPLACER — lignes / carte / détail */
.move-page .hero-network-layout--cockpit.is-network-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) 320px !important;
  grid-template-areas: "lines map detail" !important;
  gap: 0 !important;

  background: #061b3d !important;
  overflow: hidden !important;
}

/* On expose les enfants réels au grid fullscreen */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-layout__left,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-layout__center {
  display: contents !important;
}

/* Colonne gauche : boutons lignes */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .network-line-orbit {
  grid-area: lines !important;
  height: 100vh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 18px 12px !important;
  border-radius: 0 !important;
  background: #061b3d !important;
}

/* Centre : vraie carte */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-map,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-layout__map {
  grid-area: map !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* La carte SVG prend tout l’espace */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .network-map-stage,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-map__stage {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.move-page .hero-network-layout--cockpit.is-network-fullscreen .network-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Colonne droite : détail ligne */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .network-detail-panel,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-map__detail {
  grid-area: detail !important;
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
}

/* On masque les blocs cockpit qui ne doivent pas entrer dans le fullscreen */
.move-page .hero-network-layout--cockpit.is-network-fullscreen .cockpit-times-board,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .cockpit-trip-search,
.move-page .hero-network-layout--cockpit.is-network-fullscreen .hero-network-thermometer-shell {
  display: none !important;
}

.move-page .cockpit-trip-stop-cell__action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--line-color, #2e4b9b);
  background: color-mix(in srgb, var(--line-color, #2e4b9b) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-color, #2e4b9b) 18%, white);
}

.move-page .cockpit-trip-stop-cell:hover .cockpit-trip-stop-cell__action,
.move-page .cockpit-trip-stop-cell.is-selected .cockpit-trip-stop-cell__action {
  color: #fff;
  background: var(--line-color, #2e4b9b);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--line-color, #2e4b9b) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--line-color, #2e4b9b) 48%, transparent);
}