/* M'safara — carte réseau interactive data-driven */
.msafara-network-shell{position:relative;isolation:isolate}
.msafara-network-shell::before{content:"";position:absolute;inset:0 0 auto;height:340px;background:radial-gradient(circle at 12% 15%,rgba(46,75,155,.14),transparent 28%),radial-gradient(circle at 86% 8%,rgba(255,226,0,.16),transparent 18%);z-index:-1;pointer-events:none}
.msafara-network-heading p{max-width:760px}.network-board{display:grid;grid-template-columns:330px minmax(0,1fr) 360px;gap:18px;padding:18px;border-radius:34px;overflow:hidden}.network-control-panel,.network-detail-panel{border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(246,249,255,.66));border:1px solid rgba(46,75,155,.12);padding:22px;min-width:0}.network-control-panel__top h3{margin:8px 0 8px;font-size:1.45rem;letter-spacing:-.04em}.network-control-panel__top p,.network-detail-panel p{color:var(--ink-soft);line-height:1.55;font-size:.92rem}.network-search{display:grid;gap:8px;margin:18px 0}.network-search span{font-weight:800;color:var(--ink-soft);font-size:.82rem}.network-search input{border-radius:18px}.network-layer-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.network-layer-tabs button,.network-admin-tools button,.network-map-toolbar button{border:1px solid rgba(46,75,155,.12);background:rgba(255,255,255,.72);border-radius:14px;padding:11px 10px;font-weight:900;color:var(--ink);cursor:pointer;transition:.22s ease}.network-layer-tabs button.is-active,.network-layer-tabs button:hover,.network-admin-tools button:hover,.network-map-toolbar button:hover{background:linear-gradient(135deg,var(--blue),#5d7fe5);color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(46,75,155,.20)}.network-line-list{display:grid;gap:10px;overflow:auto;padding-right:4px}.network-line-button{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid rgba(46,75,155,.10);border-radius:18px;padding:10px;background:rgba(255,255,255,.64);color:var(--ink);cursor:pointer;transition:.2s ease}.network-line-button[aria-pressed="true"],.network-line-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(18,39,80,.10);border-color:var(--line-color,rgba(46,75,155,.3))}.network-line-button img{width:42px;height:32px;object-fit:contain}.network-line-button strong{display:block;font-size:.9rem;line-height:1.2}.network-line-button small{display:block;color:var(--ink-soft);font-size:.76rem;margin-top:2px}.network-line-count{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:var(--line-color,var(--blue));color:#fff;font-size:.76rem;font-weight:950}.network-admin-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.network-admin-tools button{font-size:.78rem}.network-map-zone{display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-width:0}.network-map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:20px;background:rgba(9,24,51,.92);color:#eaf0ff;border:1px solid rgba(120,160,255,.18)}.network-map-toolbar__legend,.network-map-toolbar__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.network-map-toolbar__legend span{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800}.dot{width:10px;height:10px;border-radius:999px;display:inline-block}.dot-launch{background:#e30613}.dot-future{background:#2e9f44}.dot-hub{background:#ffe200;box-shadow:0 0 0 3px rgba(255,226,0,.25)}.network-map-toolbar button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff;padding:8px 10px}.network-map-stage{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#dff3ff 0%,#eff9ff 52%,#d3edff 100%);border:1px solid rgba(46,75,155,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 26px 66px rgba(18,39,80,.13)}.network-map-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 20%,rgba(255,255,255,.85),transparent 16%),radial-gradient(circle at 78% 56%,rgba(255,255,255,.75),transparent 15%),linear-gradient(135deg,rgba(46,75,155,.08),transparent 38%);pointer-events:none}.network-map-stage.is-editing{outline:3px solid rgba(255,226,0,.75);outline-offset:-8px}.network-map-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(.95) contrast(1.05);z-index:0}.network-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;cursor:grab}.network-svg:active{cursor:grabbing}.network-island{fill:rgba(255,255,255,.88);stroke:rgba(46,75,155,.16);stroke-width:2;filter:drop-shadow(0 20px 28px rgba(42,73,120,.18))}.network-island--petite{fill:rgba(255,255,255,.83)}.network-grid-line{stroke:rgba(46,75,155,.07);stroke-width:1}.network-route-underlay{fill:none;stroke:rgba(255,255,255,.92);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.96}.network-route{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));transition:opacity .22s ease,stroke-width .22s ease}.network-route.is-muted{opacity:.18;stroke-width:5}.network-route.is-active{opacity:1;stroke-width:10;animation:networkDash 1.4s ease-out}.network-route--barge{stroke-dasharray:14 10}.network-route--future{stroke-dasharray:5 8;opacity:.55}.network-stop{cursor:pointer;transition:transform .18s ease,opacity .18s ease}.network-stop circle{fill:#fff;stroke:var(--stop-color,var(--blue));stroke-width:3;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}.network-stop text{font-size:12px;font-weight:900;fill:#10234b;paint-order:stroke;stroke:#fff;stroke-width:4;stroke-linejoin:round;opacity:.92}.network-stop.is-muted{opacity:.25}.network-stop:hover circle,.network-stop.is-active circle{fill:var(--stop-color,var(--blue));stroke:#fff;stroke-width:4}.network-hub circle{fill:#ffe200;stroke:#fff;stroke-width:4}.network-hub .hub-ring{fill:none;stroke:#2e4b9b;stroke-width:2;stroke-dasharray:4 4;animation:spinRing 8s linear infinite;transform-origin:center}.network-poi text{font-size:18px;font-weight:950;fill:rgba(46,75,155,.28);letter-spacing:.08em}.network-tooltip{position:absolute;z-index:8;max-width:260px;padding:12px 14px;border-radius:16px;background:rgba(6,18,39,.92);color:#fff;box-shadow:0 18px 38px rgba(0,0,0,.25);font-size:.86rem;pointer-events:none}.network-tooltip strong{display:block;margin-bottom:3px}.network-tooltip small{color:rgba(255,255,255,.72)}.network-detail-panel{display:grid;align-content:start;gap:14px}.network-detail-card{display:grid;gap:14px}.network-detail-line{display:flex;gap:12px;align-items:center}.network-detail-line img{width:58px;height:42px;object-fit:contain}.network-detail-line h3{margin:0;font-size:1.45rem;line-height:1.05}.network-detail-badges{display:flex;flex-wrap:wrap;gap:8px}.network-detail-badges span{padding:8px 10px;border-radius:999px;background:rgba(46,75,155,.08);border:1px solid rgba(46,75,155,.10);font-size:.76rem;font-weight:900}.network-stop-list{display:grid;gap:7px;max-height:390px;overflow:auto;padding-right:4px}.network-stop-row{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;padding:9px;border-radius:14px;background:rgba(46,75,155,.05);border:1px solid rgba(46,75,155,.08);font-size:.86rem}.network-stop-index{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--detail-color,var(--blue));color:#fff;font-size:.72rem;font-weight:950}.network-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.network-detail-actions .btn{padding:12px 14px;border-radius:16px}.network-edit-output textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.8rem}.network-edit-output span{font-weight:800;color:var(--ink-soft);display:block;margin-bottom:6px}@keyframes networkDash{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}@keyframes spinRing{to{transform:rotate(360deg)}}html[data-theme="dark"] .network-control-panel,html[data-theme="dark"] .network-detail-panel{background:linear-gradient(180deg,rgba(10,22,42,.94),rgba(14,28,52,.86));border-color:rgba(255,255,255,.08)}html[data-theme="dark"] .network-line-button{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}html[data-theme="dark"] .network-map-stage{background:linear-gradient(180deg,#0d2442,#0a192f)}html[data-theme="dark"] .network-island{fill:rgba(24,43,72,.88);stroke:rgba(255,255,255,.10)}html[data-theme="dark"] .network-stop text{fill:#edf3ff;stroke:#061223}html[data-theme="dark"] .network-poi text{fill:rgba(255,255,255,.22)}html[data-theme="dark"] .network-stop-row{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}@media (min-width:1700px){.network-board{grid-template-columns:380px minmax(0,1fr) 420px}.network-map-stage{}}@media (max-width:1320px){.network-board{grid-template-columns:300px minmax(0,1fr)}.network-detail-panel{grid-column:1/-1}.network-map-stage{min-height:680px}}@media (max-width:980px){.network-board{grid-template-columns:1fr}.network-control-panel{order:1}.network-map-zone{order:2}.network-detail-panel{order:3}.network-line-list{grid-template-columns:repeat(1,minmax(0,1fr));display:grid;max-height:none}.network-map-stage{min-height:620px}}@media (max-width:640px){.network-board{padding:12px;border-radius:24px}.network-control-panel,.network-detail-panel{padding:16px;border-radius:22px}.network-line-list{grid-template-columns:1fr}.network-layer-tabs{grid-template-columns:1fr}.network-map-stage{min-height:520px;border-radius:22px}.network-map-toolbar{align-items:flex-start}.network-detail-actions{grid-template-columns:1fr}.network-stop text{font-size:10px}.network-route{stroke-width:6}.network-route.is-active{stroke-width:8}}

.map-popup-rich{
  min-width:220px;
}

.map-popup-rich__type{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(46,75,155,.22);
  color:#dbe7ff;
  font-weight:900;
  font-size:.75rem;
}

.map-popup-rich h4{
  margin:10px 0 6px;
  font-size:1rem;
  color:#fff;
}

.map-popup-rich p{
  margin:0 0 10px;
  color:rgba(255,255,255,.72);
}

.map-popup-rich__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.map-popup-rich__chips span{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  font-size:.72rem;
}

.network-line-button{
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:12px;
  align-items:center;
  width:100%;
  padding:13px;
  border-radius:18px;
  border:1px solid rgba(46,75,155,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(246,249,255,.72));
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  transition:.22s ease;
  position:relative;
  overflow:hidden;
}

.network-line-button::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:var(--line-color);
}

.network-line-button:hover,
.network-line-button[aria-pressed="true"]{
  transform:translateY(-2px);
  border-color:var(--line-color);
  box-shadow:0 18px 42px rgba(20,38,82,.14);
}

.network-line-button img{
  width:48px;
  height:48px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.12));
}

.network-line-button strong{
  display:block;
  font-size:.92rem;
  line-height:1.25;
}

.network-line-button small{
  display:block;
  margin-top:4px;
  color:var(--ink-soft);
  font-size:.78rem;
}

.network-line-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  width: 40px;
  border-radius:999px;
  background:var(--line-color);
  color:#fff;
  font-weight:900;
  font-size:.78rem;
}

.network-layer-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 14px;
}

.network-layer-tabs button{
  border:1px solid rgba(46,75,155,.14);
  background:rgba(255,255,255,.72);
  color:var(--ink);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.network-layer-tabs button.is-active{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),#5f7fe0);
  border-color:transparent;
}

.hero-network-map__lines{
  display:grid;
  gap:10px;
  overflow:auto;
  padding-right:6px;
  padding-top: 2px;
}

.network-detail-panel{
  margin-top:14px;
}

.network-detail-card{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,255,.8));
  border:1px solid rgba(46,75,155,.12);
}

.network-detail-line{
  display:flex;
  gap:12px;
  align-items:center;
}

.network-detail-line img{
  width:56px;
  height:56px;
  object-fit:contain;
}

.network-detail-line h3{
  margin:0;
  font-size:1.2rem;
}

.network-detail-line p{
  margin:4px 0 0;
  color:var(--ink-soft);
}

.network-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}

.network-detail-badges span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(46,75,155,.08);
  border:1px solid rgba(46,75,155,.12);
  font-weight:800;
  font-size:.78rem;
}

.network-stop-list{
  display:grid;
  gap:8px;
  max-height:260px;
  overflow:auto;
}

.network-stop-row{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  border:none;
  border-radius:14px;
  padding:10px;
  background:rgba(46,75,155,.06);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.network-stop-index{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--detail-color,#2e4b9b);
  color:#fff;
  font-weight:900;
}

@media (max-width:980px){
  .leaflet-network-map,
  .hero-network-map__stage{
    min-height:500px;
  }
}

@media (max-width:760px){
  .leaflet-network-map,
  .hero-network-map__stage{
    min-height:420px;
  }

  .network-line-button{
    grid-template-columns:44px 1fr;
  }

  .network-line-count{
    grid-column:1 / -1;
    width:max-content;
  }
}


  /* ===== CONTENEUR CARTE ===== */
.network-map-stage{
    position:relative;
    width:100%;
    aspect-ratio:2834 / 2598;
    overflow:hidden;
    border-radius:30px;
    background:#071326;
    border:1px solid rgba(120,160,255,.18);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 30px 80px rgba(0,0,0,.35);
  }
  
  /* Désactive l'image HTML, la carte est dans le SVG */
  .network-map-preview{
    display:none !important;
  }
  
  /* ===== SVG ===== */
  .network-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    cursor:grab;
    touch-action:none;
  }
  
  .network-svg:active{
    cursor:grabbing;
  }
  
  .network-svg-basemap{
    pointer-events:none;
    user-select:none;
  }
  
  /* ===== ROUTES ===== */
  .network-route-underlay{
    fill:none;
    stroke:#fff;
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.9;
  }
  
  .network-route{
    fill:none;
    stroke-width:11;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.2s ease;
  }
  
  .network-route.is-active{
    stroke-width:9;
    filter:drop-shadow(0 0 16px rgba(255,255,255,.4));
  }
  
  .network-route.is-muted{
    opacity:.12;
  }
  
  .network-route--future{
    stroke-dasharray:18 14;
  }
  
  .network-route--barge{
    stroke-dasharray:28 16;
  }
  
  /* ===== LABEL LIGNE ===== */
  .network-line-label{
    cursor:pointer;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));
    transition:.2s ease;
  }
  
  .network-line-label rect{
    rx:14;
  }
  
  .network-line-label text{
    fill:#fff;
    font-weight:950;
    font-size:26px;
    pointer-events:none;
  }
  
  .network-line-label.is-active{
    transform:scale(1.12);
  }
  
  /* ===== ARRÊTS ===== */
  .network-stop{
    cursor:pointer;
    transition:.2s ease;
  }
  
  .network-stop.is-muted{
    opacity:.15;
  }
  
  .network-stop-dot{
    fill:#fff;
    stroke:var(--stop-color);
    stroke-width:6;
  }
  
  .network-stop-core{
    fill:var(--stop-color);
  }
  
  .network-stop:hover .network-stop-dot,
  .network-stop.is-selected .network-stop-dot{
    fill:var(--stop-color);
    stroke:#fff;
    stroke-width:8;
  }
  
  .network-stop-label{
    font-size:24px;
    font-weight:950;
    fill:#fff;
    paint-order:stroke;
    stroke:#000;
    stroke-width:6;
    letter-spacing:.02em;
  }
  
  /* HUB */
  .network-hub .hub-ring{
    fill:none;
    stroke:#ffe200;
    stroke-width:6;
    stroke-dasharray:10 10;
    animation:spinRing 10s linear infinite;
  }
  
  /* ===== POINTS DE TRACÉ ===== */
  .network-shape-point{
    cursor:grab;
    transition:.15s ease;
  }
  
  .network-shape-point circle{
    fill:#fff;
    stroke:#111;
    stroke-width:5;
  }
  
  .network-shape-point text{
    font-size:18px;
    font-weight:900;
    fill:#111;
    paint-order:stroke;
    stroke:#fff;
    stroke-width:5;
  }
  
  .network-shape-point:hover{
    transform:scale(1.2);
  }
  
  .network-shape-point.is-selected circle{
    fill:#ffe200;
    stroke:#000;
  }
  
  /* ===== TOOLTIP ===== */
  .network-tooltip{
    position:absolute;
    z-index:10;
    max-width:260px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(6,18,39,.95);
    color:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.4);
    font-size:.85rem;
    pointer-events:none;
  }
  
  .network-tooltip strong{
    display:block;
    margin-bottom:4px;
  }
  
  .network-tooltip small{
    opacity:.7;
  }
  
  /* ===== PANEL ÉDITEUR ===== */
  .network-editor-panel{
    margin:14px 0;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
  }
  
  .network-editor-panel strong{
    display:block;
    margin-bottom:6px;
  }
  
  .network-editor-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
  }
  
  .network-editor-actions button{
    border:1px solid rgba(255,255,255,.12);
    background:rgb(239 241 250);
    border-radius:999px;
    padding:8px 12px;
    font-size:.75rem;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
    
  }
  
  .network-editor-actions button:hover{
    background:rgba(255,255,255,.2);
  }
  
  .network-editor-actions button.is-active{
    background:#ffe200;
    color:#000;
    border-color:transparent;
  }
  
  /* ===== LISTE ARRÊTS ===== */
  .network-stop-list{
    display:grid;
    gap:6px;
    max-height:320px;
    overflow:auto;
  }
  
  .network-stop-row{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px;
    align-items:center;
    padding:8px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
    text-align:left;
  }
  
  .network-stop-row:hover{
    background:rgba(255,255,255,.55);
  }
  
  .network-stop-row.is-current{
    background:#ffe200;
    color:#000;
  }
  
  .network-stop-index{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:999px;
    background:var(--detail-color,#2e4b9b);
    font-weight:900;
    font-size:.75rem;
  }
  
  /* ===== MODE ÉDITION ===== */
  .network-map-stage.is-editing{
    outline:4px solid #ffe200;
    outline-offset:-8px;
  }
  
  /* ===== ANIMATION ===== */
  @keyframes spinRing{
    to{transform:rotate(360deg)}
  }
  
  /* ===== RESPONSIVE ===== */
  @media (max-width:900px){
    .network-stop-label{
      font-size:18px;
    }
  
    .network-line-label text{
      font-size:20px;
    }
  }

  .network-curve-guide {
    fill: none;
    stroke: rgba(15, 23, 42, 0.35);
    stroke-width: 3;
    stroke-dasharray: 10 10;
    pointer-events: none;
  }
  
  .network-curve-point circle {
    fill: #fff;
    stroke: #111827;
    stroke-width: 4;
  }
  
  .network-curve-point text {
    font-size: 22px;
    font-weight: 800;
    fill: #111827;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 5px;
  }
  
  .network-stop-media-host {
    margin-top: 1rem;
  }
  
  .network-stop-media-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28);
    backdrop-filter: blur(18px);
  }
  
  .network-stop-media-card-head {
    display: grid;
    gap: 0.2rem;
  }
  
  .network-stop-media-card-head strong {
    font-size: 1.05rem;
  }
  
  .network-stop-media-card-head small {
    opacity: 0.75;
  }
  
  .network-stop-media {
    display: grid;
    gap: 0.7rem;
  }
  
  .network-stop-media img,
  .network-stop-media video {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 1rem;
    background: #020617;
  }
  
  .network-stop-media-empty {
    padding: 0.85rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
  }

  .network-detail-card--futuristic {
    position: relative;
    overflow: hidden;
  }
  
  .network-detail-card--futuristic::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--detail-color) 45%, transparent), transparent 28%),
      radial-gradient(circle at 80% 0%, rgba(255,255,255,0.12), transparent 26%);
    pointer-events: none;
  }
  
  .network-detail-card--futuristic > * {
    position: relative;
    z-index: 1;
  }
  
  .network-detail-line {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .network-detail-line-icon {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--detail-color) 22%, rgba(255,255,255,0.08));
    border: 1px solid color-mix(in srgb, var(--detail-color) 55%, rgba(255,255,255,0.18));
    box-shadow: 0 18px 42px color-mix(in srgb, var(--detail-color) 28%, transparent);
  }
  
  .network-detail-line-icon img {
    width: 2.65rem;
    height: 2.65rem;
    object-fit: contain;
  }
  
  .network-detail-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--detail-color) 22%, rgba(255,255,255,0.08));
    color: color-mix(in srgb, var(--detail-color) 78%, white);
  }
  
  .network-stop-list--timeline {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
  }
  
  .network-stop-list--timeline .network-stop-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.85rem;
    border-radius: 1.1rem;
    border: 1px solid rgb(208 208 208 / 55%);
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    backdrop-filter: blur(14px);
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }
  
  .network-stop-list--timeline .network-stop-row:hover,
  .network-stop-list--timeline .network-stop-row.is-current {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--detail-color) 70%, rgba(255,255,255,0.18));
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--detail-color) 18%, rgba(255,255,255,0.12)),
      rgba(255,255,255,0.05)
    );
  }
  
  .network-stop-list--timeline .network-stop-index {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--detail-color) 28%, rgba(255,255,255,0.08));
    border: 1px solid color-mix(in srgb, var(--detail-color) 50%, rgba(255,255,255,0.18));
    font-size: 0.9rem;
    font-weight: 900;
    color: white;
  }
  
  .network-stop-main {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
  }
  
  .network-stop-main strong {
    font-size: 0.96rem;
    line-height: 1.2;
  }
  
  .network-stop-main small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    opacity: 1;
  }
  
  .network-stop-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    background: rgba(255,255,255,0.09);
    
  }
  
  .network-stop-chip--media {
    background: color-mix(in srgb, var(--detail-color) 24%, rgba(255,255,255,0.09));
    color: white;
  }
  
  .network-stop-arrow {
    font-size: 1.55rem;
    line-height: 1;
    opacity: 0.5;
  }
  
  .network-stop-row:hover .network-stop-arrow,
  .network-stop-row.is-current .network-stop-arrow {
    opacity: 1;
    color: color-mix(in srgb, var(--detail-color) 80%, white);
  }

  .network-detail-card--line-focus {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--detail-color) 28%, transparent), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78));
    border: 1px solid color-mix(in srgb, var(--detail-color) 28%, rgba(226, 232, 240, 0.85));
    box-shadow:
      0 26px 70px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  
  .network-detail-card--line-focus::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%);
    pointer-events: none;
  }
  
  .network-detail-card--line-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--detail-color) 18%, transparent), transparent 28%),
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.72), transparent 30%);
    pointer-events: none;
  }
  
  .network-detail-card--line-focus > * {
    position: relative;
    z-index: 1;
  }
  
  .network-detail-line {
    display: grid;
    grid-template-columns: 4.35rem 1fr;
    gap: 0.95rem;
    align-items: center;
    padding: 0.9rem;
    margin-bottom: 0.9rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.72);
    border: 1px solid color-mix(in srgb, var(--detail-color) 18%, rgba(226,232,240,0.9));
    box-shadow: 0 18px 42px rgba(15,23,42,0.07);
  }
  
  .network-detail-line-icon {
    display: grid;
    place-items: center;
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 1.15rem;
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--detail-color) 28%, white),
        color-mix(in srgb, var(--detail-color) 10%, white)
      );
    border: 1px solid color-mix(in srgb, var(--detail-color) 38%, white);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--detail-color) 20%, transparent);
  }
  
  .network-detail-line-icon img {
    width: 2.7rem;
    height: 2.7rem;
    object-fit: contain;
  }
  
  .network-detail-line-code {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.28rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--detail-color) 78%, #111827);
    background: color-mix(in srgb, var(--detail-color) 13%, white);
    border: 1px solid color-mix(in srgb, var(--detail-color) 24%, white);
  }
  
  .network-detail-line h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #111827;
  }
  
  .network-detail-line p {
    margin: 0.28rem 0 0;
    font-size: 0.78rem;
    font-weight: 750;
    color: #64748b;
  }
  
  .network-stop-list {
    display: grid;
    gap: 0.55rem;
    max-height: 25.5rem;
    overflow: auto;
    padding: 0.15rem 0.15rem 0.35rem;
  }
  
  .network-stop-row {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
    width: 100%;
    padding: 0.72rem 0.78rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background:
      linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,250,252,0.72));
    color: #111827;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition:
      transform 160ms ease,
      border-color 160ms ease,
      background 160ms ease,
      box-shadow 160ms ease;
  }
  
  .network-stop-row:hover,
  .network-stop-row.is-current {

    border-color: color-mix(in srgb, var(--detail-color) 42%, rgba(226,232,240,1));
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--detail-color) 10%, white),
        rgba(255,255,255,0.84)
      );
    box-shadow:
      0 16px 34px rgba(15,23,42,0.08),
      0 0 0 3px color-mix(in srgb, var(--detail-color) 10%, transparent);
  }
  
  .network-stop-index {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
    color: color-mix(in srgb, var(--detail-color) 84%, #111827);
    background:
      radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--detail-color) 14%, white));
    border: 1px solid color-mix(in srgb, var(--detail-color) 34%, rgba(226,232,240,1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  }
  
  .network-stop-content {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
  }
  
  .network-stop-content strong {
    font-size: 0.88rem;
    line-height: 1.15;
    font-weight: 850;
    color: #111827;
  }
  
  .network-stop-content small {
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
  }
  
  .network-stop-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
  }
  
  .network-stop-tool {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.65rem;
    color: color-mix(in srgb, var(--detail-color) 78%, #111827);
    background: color-mix(in srgb, var(--detail-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--detail-color) 22%, rgba(226,232,240,1));
    font-size: 0.76rem;
    font-weight: 900;
  }
  
  .network-stop-access {
    display: inline-flex;
    align-items: center;
    min-width: 3.4rem;
    justify-content: center;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 900;
    color: #334155;
    background: rgba(241,245,249,0.9);
    border: 1px solid rgba(226,232,240,0.95);
  }
  
  .network-stop-row:hover .network-stop-access,
  .network-stop-row.is-current .network-stop-access {
    color: white;
    background: var(--detail-color);
    border-color: var(--detail-color);
  }
  
  .network-stop-media-host {
    margin-bottom: 0.75rem;
  }

  .hero-network-intro {
    position: relative;
    z-index: 3;
    padding: clamp(1.2rem, 2.6vw, 2.3rem) 0 clamp(1rem, 2vw, 1.6rem);
  }
  
  .hero-network-intro .container-wide {
    display: grid;
    gap: 0.75rem;
  }
  
  .hero-network-intro .hero-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
  }
  
  .hero-network-intro p {
    max-width: 48rem;
    margin: 0;
    color: #475569;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.55;
    font-weight: 600;
  }
  
  @media (min-width: 900px) {
    .hero-network-intro .container-wide {
      grid-template-columns: 0.9fr 1fr;
      align-items: end;
    }
  
    .hero-network-intro p {
      justify-self: end;
      max-width: 42rem;
      text-align: right;
    }
  }
  
  @media (max-width: 640px) {
    .hero-network-intro {
      padding-top: 1rem;
    }
  }

  .hero-network-heading {
    position: relative;
    z-index: 3;
    padding: clamp(1.4rem, 3vw, 2.8rem) 0 clamp(1.2rem, 2.4vw, 2rem);
  }
  
  .hero-network-heading .container-wide {
    display: grid;
    gap: 0.75rem;
  }
  
  .hero-network-heading .hero-kicker {
    width: fit-content;
  }
  
  .hero-network-heading h1 {
    max-width: 75%;
    margin: 0;
    font-size: clamp(3.2rem, 5vw, 5.3rem);
	  letter-spacing: -.07em;
  }
  
  .hero-network-heading p {
    max-width: 52rem;
    margin: 0;
  }
  
  @media (max-width: 900px) {
    .hero-network-heading h1 {
      max-width: 100%;
    }
  
    .hero-network-heading p {
      max-width: 100%;
    }
  }

  .hero-network-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(620px, 2.25fr) minmax(290px, 0.95fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
  align-items: stretch;
}

.hero-network-map__mini-controls,
.hero-network-map,
.network-detail-panel {
  height: var(--network-panel-height);
  min-height: var(--network-panel-height);
}

.hero-network-map {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.hero-network-map__stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 1.65rem;
}

.network-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-network-map__mini-controls,
.network-detail-panel {
  overflow: hidden;
}

.hero-network-map__lines,
.network-line-list,
.network-stop-list {
  max-height: calc(var(--network-panel-height) - 5.5rem);
  overflow: auto;
  scrollbar-width: thin;
}

.network-detail-card {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.network-detail-panel .network-stop-list {
  min-height: 0;
  max-height: none;
  overflow: auto;
}



.hero-network-map__stage {
  background: linear-gradient(145deg, #eaf4ff, #f8fbff);
}

.network-svg {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(145deg, #eaf4ff, #f8fbff);
}

.hero-network-map__stage,
.network-map-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  overflow: hidden;
  border-radius: 1.65rem;
  background: linear-gradient(145deg, #eaf4ff, #f8fbff);
  box-shadow:
    0 26px 70px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(145deg, #dfeffb, #deeffb);
}

.network-svg-basemap {
  pointer-events: none;
  user-select: none;
}

.network-map-preview {
  display: none !important;
}

@media (max-width: 820px) {
  .hero-network-map__stage,
  .network-map-stage {
    min-height: 460px;
    border-radius: 1.25rem;
  }
}

@media (max-width: 520px) {
  .hero-network-map__stage,
  .network-map-stage {
    min-height: 390px;
  }
}

.network-stop-media-host,
.network-stop-media-host[hidden] {
  display: none !important;
}

.network-stop-inline-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.85rem;
  margin: -0.2rem 0 0.45rem 3.1rem;
  padding: 1rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--detail-color) 28%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.82));
  border: 1px solid color-mix(in srgb, var(--detail-color) 36%, rgba(255,255,255,0.16));
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.16);
  color: #fff;
  animation: stopCardReveal 240ms ease both;
}

.network-stop-inline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 74%);
  pointer-events: none;
}

.network-stop-inline-card > * {
  position: relative;
  z-index: 1;
}

.network-stop-inline-card__head {
  display: grid;
  gap: 0.22rem;
}

.network-stop-inline-card__head span {
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--detail-color) 34%, rgba(255,255,255,0.12));
  color: white;
}

.network-stop-inline-card__head strong {
  font-size: 1rem;
  line-height: 1.15;
}

.network-stop-inline-card__head small {
  color: rgba(255,255,255,0.68);
  font-weight: 750;
}

.network-stop-inline-card__media {
  display: grid;
  gap: 0.7rem;
}

.network-stop-inline-card__media figure {
  margin: 0;
}

.network-stop-inline-card__media img,
.network-stop-inline-card__media video {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 0.95rem;
  background: #020617;
  border: 1px solid rgba(255,255,255,0.12);
}

.network-stop-inline-card__empty {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border-radius: 0.95rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.network-stop-inline-card__empty span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--detail-color) 35%, rgba(255,255,255,0.12));
}

.network-stop-inline-card__empty p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
  line-height: 1.35;
}

@keyframes stopCardReveal {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .network-stop-inline-card {
    margin-left: 0;
  }
}


.network-stop-list {
  display: grid;
  gap: 0.55rem;
  overflow: auto;
}

.network-stop-item {
  display: grid;
  gap: 0.45rem;
}

.network-stop-inline-card {
  margin: 0 0 0.35rem 3.05rem;
  padding: 0rem;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--detail-color) 34%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,41,59,0.88));
  border: 1px solid color-mix(in srgb, var(--detail-color) 42%, rgba(255,255,255,0.16));
  box-shadow: 0 18px 44px rgba(15,23,42,0.24);
  color: #fff;
  animation: stopCardReveal 220ms ease both;
}

.network-stop-inline-card__head {
  display: grid;
  gap: 0.25rem;
}

.network-stop-inline-card__head span {
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--detail-color) 34%, rgba(255,255,255,0.12));
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-stop-inline-card__media img,
.network-stop-inline-card__media video {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 0.9rem;
  margin-top: 0.75rem;
}

@keyframes stopCardReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.network-map-stop-card {
  position: absolute;
  z-index: 12;
  pointer-events: auto;
  animation: mapStopCardIn 260ms cubic-bezier(.2,.8,.2,1) both;
}

.network-map-stop-card[hidden] {
  display: none !important;
}

.network-map-stop-card .network-stop-inline-card {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--detail-color, #2e4b9b) 36%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
  border: 1px solid color-mix(in srgb, var(--detail-color, #2e4b9b) 45%, rgba(255,255,255,0.18));
  box-shadow:
    0 26px 70px rgba(2, 6, 23, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(18px) saturate(145%);
  color: white;
}

.network-map-stop-card .network-stop-inline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 74%);
  pointer-events: none;
}

.network-stop-inline-card__head,
.network-stop-inline-card__media,
.network-stop-inline-card__empty {
  position: relative;
  z-index: 1;
}

.network-stop-inline-card__head {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1rem 0.75rem;
}

.network-stop-inline-card__head span {
  width: fit-content;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--detail-color, #2e4b9b) 38%, rgba(255,255,255,0.12));
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-stop-inline-card__head strong {
  font-size: 1.05rem;
  line-height: 1.12;
}

.network-stop-inline-card__head small {
  color: rgba(255,255,255,0.68);
  font-weight: 750;
}

.network-stop-inline-card__media {
  display: grid;
  gap: 0.65rem;
}

.network-stop-inline-card__media img,
.network-stop-inline-card__media video {
  width: 100%;
  max-height: 210px;
  object-fit: cover;
  border-radius: 0.95rem;
  background: #020617;
  border: 1px solid rgba(255,255,255,0.12);
}

.network-stop-inline-card__empty {
  margin: 0 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border-radius: 0.95rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

@keyframes mapStopCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .network-map-stop-card {
    left: 1rem !important;
    right: 1rem !important;
    top: auto !important;
    bottom: 1rem !important;
    width: auto !important;
  }
}

.timetable-command-shell {
  position: relative;
  isolation: isolate;
}

.timetable-command-shell::before {
  content: "";
  position: absolute;
  inset: 8% 0 auto;
  height: 420px;
  background:
    radial-gradient(circle at 18% 20%, rgba(46,75,155,.18), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(255,226,0,.20), transparent 24%),
    radial-gradient(circle at 55% 70%, rgba(81,190,202,.16), transparent 30%);
  pointer-events: none;
  z-index: -1;
}

.timetable-command {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-radius: 2rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(245,248,255,.72)),
    radial-gradient(circle at 0% 0%, rgba(46,75,155,.16), transparent 34%);
  border: 1px solid rgba(46,75,155,.13);
  box-shadow: 0 30px 90px rgba(15,23,42,.12);
}

.timetable-command::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(46,75,155,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(46,75,155,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
  pointer-events: none;
}

.timetable-command > * {
  position: relative;
  z-index: 1;
}

.timetable-command__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.35rem;
}

.timetable-command__hero h2 {
  max-width: 820px;
  margin: .35rem 0 .55rem;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.timetable-command__hero p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-weight: 650;
  line-height: 1.55;
}

.timetable-command__badge {
  min-width: 160px;
  padding: 1rem;
  border-radius: 1.3rem;
  background:
    linear-gradient(145deg, rgba(9,24,51,.94), rgba(46,75,155,.86));
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 50px rgba(15,23,42,.22);
}

.timetable-command__badge strong {
  display: block;
  font-size: 1.1rem;
}

.timetable-command__badge span {
  display: block;
  margin-top: .25rem;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  font-weight: 800;
}

.timetable-command__search {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(240px, .9fr) auto;
  gap: .8rem;
  align-items: end;
  margin-bottom: 1.2rem;
  padding: .85rem;
  border-radius: 1.35rem;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(46,75,155,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.timetable-field {
  display: grid;
  gap: .45rem;
}

.timetable-field label {
  font-size: .78rem;
  font-weight: 950;
  color: var(--ink-soft);
}

.timetable-searchbox {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(46,75,155,.12);
  overflow: hidden;
}

.timetable-searchbox span {
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 950;
  font-size: 1.1rem;
}

.timetable-searchbox input,
.timetable-field select {
  width: 100%;
  min-height: 3.15rem;
  border: 1px solid rgba(46,75,155,.12);
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  padding: 0 .95rem;
}

.timetable-searchbox input {
  border: 0;
  border-radius: 0;
  padding-left: 0;
}

.timetable-search-submit {
  min-height: 3.15rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.timetable-command__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .95rem;
}

.timetable-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--line-color) 26%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.78));
  border: 1px solid color-mix(in srgb, var(--line-color) 30%, rgba(226,232,240,.95));
  box-shadow:
    0 18px 46px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.timetable-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid var(--line-color);
  pointer-events: none;
}

.timetable-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-color);
  box-shadow:
    0 26px 70px rgba(15,23,42,.13),
    0 0 0 4px color-mix(in srgb, var(--line-color) 10%, transparent);
}

.timetable-card__top {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.timetable-card__icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--line-color) 12%, white);
  border: 1px solid color-mix(in srgb, var(--line-color) 26%, white);
}

.timetable-card__icon img {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: contain;
}

.timetable-card__top span {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  color: var(--ink-soft);
}

.timetable-card__top h3 {
  margin: .1rem 0 0;
  font-size: 1.7rem;
  line-height: 1;
  color: color-mix(in srgb, var(--line-color) 78%, #111827);
}

.timetable-card > strong {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}

.timetable-card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.45;
}

.timetable-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.timetable-card__meta span {
  display: inline-flex;
  padding: .35rem .62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-color) 12%, white);
  border: 1px solid color-mix(in srgb, var(--line-color) 24%, white);
  color: #334155;
  font-size: .68rem;
  font-weight: 950;
}

.timetable-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .1rem;
}

.timetable-card__actions .btn {
  border-radius: .95rem;
  padding: .78rem .8rem;
  font-size: .78rem;
}

@media (max-width: 1120px) {
  .timetable-command__search {
    grid-template-columns: 1fr 1fr;
  }

  .timetable-search-submit {
    grid-column: 1 / -1;
  }

  .timetable-command__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .timetable-command__hero {
    grid-template-columns: 1fr;
  }

  .timetable-command__search,
  .timetable-command__grid {
    grid-template-columns: 1fr;
  }

  .timetable-card__actions {
    grid-template-columns: 1fr;
  }
}

.fare-command-shell{position:relative;isolation:isolate}
.fare-command-shell::before{content:"";position:absolute;inset:6% 0 auto;background:radial-gradient(circle at 12% 10%,rgba(46,75,155,.18),transparent 30%),radial-gradient(circle at 82% 8%,rgba(255,226,0,.22),transparent 24%),radial-gradient(circle at 52% 70%,rgba(227,6,19,.12),transparent 28%);z-index:-1;pointer-events:none}

.fare-command{position:relative;overflow:hidden;padding:clamp(1.2rem,2.4vw,2rem);border-radius:2rem;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,249,255,.76));border:1px solid rgba(46,75,155,.13);box-shadow:0 32px 90px rgba(15,23,42,.12)}
.fare-command::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,75,155,.045) 1px,transparent 1px),linear-gradient(180deg,rgba(46,75,155,.04) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%);pointer-events:none}
.fare-command>*{position:relative;z-index:1}

.fare-command__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:start;margin-bottom:1.3rem}
.fare-command__head h2{max-width:820px;margin:.35rem 0 .55rem;font-size:clamp(2.1rem,3.6vw,4rem);line-height:.96;letter-spacing:-.065em}
.fare-command__head p{max-width:760px;margin:0;color:var(--ink-soft);font-weight:650;line-height:1.55}
.fare-command__cta{white-space:nowrap;border-radius:1rem}

.fare-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.fare-tabs button{position:relative;overflow:hidden;display:grid;gap:.35rem;min-height:5.1rem;padding:.9rem;border:1px solid rgba(46,75,155,.13);border-radius:1.25rem;background:rgba(255,255,255,.72);color:var(--ink);text-align:left;font-weight:950;cursor:pointer;transition:.22s ease}
.fare-tabs button span{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:999px;background:rgba(46,75,155,.09);font-size:.72rem;color:var(--blue)}
.fare-tabs button:hover,.fare-tabs button.is-active{transform:translateY(-2px);background:linear-gradient(135deg,#0b1d3b,#2e4b9b);color:#fff;box-shadow:0 18px 44px rgba(15,23,42,.18);height: 200px;border-color:transparent}
.fare-tabs button.is-active span,.fare-tabs button:hover span{background:#ffe200;color:#111827}

.fare-panels{position:relative}
.fare-panel{display:none;grid-template-columns:minmax(260px,.72fr) minmax(0,1fr);gap:1rem;align-items:stretch}
.fare-panel.is-active{display:grid;animation:fareReveal .25s ease both}

.fare-panel__visual{position:relative;display:grid;place-items:center;min-height:430px;border-radius:1.6rem;overflow:hidden;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 68px rgba(15,23,42,.12)}
.fare-panel__visual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 80%)}
.fare-panel__visual img{position:relative;z-index:1;max-width:82%;max-height:78%;object-fit:contain;filter:drop-shadow(0 28px 38px rgba(15,23,42,.22))}
.fare-panel__visual--red{background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.9),transparent 25%),linear-gradient(145deg,#fff3f3,#ffdede)}
.fare-panel__visual--yellow{background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.9),transparent 25%),linear-gradient(145deg,#fffbe4,#fff2aa)}
.fare-panel__visual--blue{background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.9),transparent 25%),linear-gradient(145deg,#eef5ff,#dbe8ff)}
.fare-panel__visual--vehicle{background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.9),transparent 25%),linear-gradient(145deg,#edf7ff,#d9efff)}

.fare-panel__content{display:grid;align-content:center;gap:1rem;padding:clamp(1rem,2vw,1.4rem);border-radius:1.6rem;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,250,252,.70));border:1px solid rgba(46,75,155,.11)}
.fare-kicker{width:fit-content;padding:.42rem .72rem;border-radius:999px;background:rgba(46,75,155,.09);color:var(--blue);font-size:.75rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.fare-panel__content h3{margin:0;font-size:clamp(1.7rem,2.8vw,3rem);line-height:1;letter-spacing:-.055em;color:#111827}
.fare-panel__content p{margin:0;color:var(--ink-soft);font-weight:650;line-height:1.55}

.fare-price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.fare-price-grid span{display:grid;gap:.25rem;padding:.9rem;border-radius:1rem;background:#fff;border:1px solid rgba(46,75,155,.1);box-shadow:0 12px 30px rgba(15,23,42,.06);font-size:.75rem;font-weight:850;color:var(--ink-soft)}
.fare-price-grid strong{font-size:1.65rem;color:#111827;line-height:1}

.fare-profile-list{display:grid;gap:.65rem}
.fare-profile-list div{display:grid;gap:.2rem;padding:.78rem .9rem;border-radius:1rem;background:#fff;border:1px solid rgba(46,75,155,.1);box-shadow:0 10px 28px rgba(15,23,42,.055)}
.fare-profile-list strong{color:#111827}
.fare-profile-list span{color:var(--ink-soft);font-size:.86rem;font-weight:700}

.fare-note-box{padding:1rem;border-radius:1.15rem;background:linear-gradient(145deg,#0b1d3b,#2e4b9b);color:#fff;box-shadow:0 20px 50px rgba(15,23,42,.18)}
.fare-note-box strong{display:block;margin-bottom:.25rem}
.fare-note-box p{color:rgba(255,255,255,.75)}

.fare-panel__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.25rem}
.fare-panel__actions .btn{border-radius:1rem}

@keyframes fareReveal{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1080px){
  .fare-command__head,.fare-panel{grid-template-columns:1fr}
  .fare-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fare-panel__visual{min-height:320px}
  .fare-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .fare-tabs,.fare-price-grid{grid-template-columns:1fr}
  .fare-command__cta{width:100%;justify-content:center}
}

.hero-network-map__top--neo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.map-quick-actions {
  display: flex;
  gap: .5rem;
}

.map-icon-btn,
.map-pro-controls button {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  border: 1px solid rgba(46,75,155,.16);
  background: rgba(255,255,255,.86);
  color: #10234b;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  transition: .18s ease;
}

.map-icon-btn:hover,
.map-pro-controls button:hover {
  transform: translateY(-2px);
  background: #10234b;
  color: #fff;
}

.map-pro-controls {
  position: absolute;
  z-index: 11;
  display: grid;
  gap: .45rem;
}

.map-pro-controls--left {
  left: .85rem;
  top: .85rem;
}

.map-pro-controls--right {
  right: .85rem;
  top: .85rem;
}

.map-legend-pill {
  position: absolute;
  left: 50%;
  bottom: .85rem;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: 999px;
  background: rgba(7,19,38,.82);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,.24);
  backdrop-filter: blur(18px);
}

.map-legend-pill span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.legend-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  display: inline-block;
}

.legend-dot--launch { background: #e30613; }
.legend-dot--future { background: #2e9f44; }
.legend-dot--barge { background: #575756; }

@media (max-width: 640px) {
  .map-pro-controls button,
  .map-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .82rem;
  }

  .map-legend-pill {
    left: .75rem;
    right: .75rem;
    transform: none;
    bottom: .65rem;
    border-radius: 1rem;
  }
}

.map-quick-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.map-pro-controls--top {
  position: static;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.map-pro-controls--left,
.map-pro-controls--right {
  display: none !important;
}

.map-pro-controls button,
.map-icon-btn {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  border: 1px solid rgba(46,75,155,.16);
  background: rgba(255,255,255,.88);
  color: #10234b;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  transition: .18s ease;
}

.map-pro-controls button:hover,
.map-icon-btn:hover {
  transform: translateY(-2px);
  background: #10234b;
  color: #fff;
}


.move-page .cockpit-stop-focus-head{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "code title icon"
    "code subtitle icon";
  gap:.25rem .7rem;
  align-items:center;
  text-align:left;
  cursor:pointer;
}

.move-page .cockpit-stop-focus-head span{
  grid-area:code;
}

.move-page .cockpit-stop-focus-head strong{
  grid-area:title;
}

.move-page .cockpit-stop-focus-head small{
  grid-area:subtitle;
}

.move-page .cockpit-stop-focus-head__icon{
  grid-area:icon;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border-radius:.9rem;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
}

.move-page .cockpit-stop-focus-head__icon svg{
  width:1.15rem;
  height:1.15rem;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s ease;
}

.move-page .cockpit-times-direction.is-collapsed .cockpit-stop-focus-head__icon svg{
  transform:rotate(-90deg);
}

.move-page .cockpit-times-direction.is-collapsed .cockpit-times-table-wrap{
  display:none !important;
}

@media (max-width: 760px) {
  .hero-network-map__top--neo {
    align-items: flex-start;
  }

  .map-quick-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .map-pro-controls--top {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .map-pro-controls button,
  .map-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: .8rem;
  }
}


.timetable-command--neo {
  padding: clamp(1rem, 2vw, 1.45rem);
  border-radius: 1.8rem;
}

.timetable-command__hero--neo {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 1rem;
}

.timetable-command__hero--neo h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3vw, 3.2rem);
}

.timetable-command__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: .55rem;
}

.timetable-command__stats span {
  display: grid;
  gap: .12rem;
  min-width: 6.8rem;
  padding: .8rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(46,75,155,.12);
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 900;
}

.timetable-command__stats strong {
  color: var(--blue);
  font-size: 1rem;
}

.timetable-command__search--neo {
  grid-template-columns: minmax(260px, 1.1fr) minmax(260px, .9fr) auto;
  padding: .7rem;
  border-radius: 1.25rem;
  margin-bottom: .9rem;
}

.timetable-command__grid--neo {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.timetable-card--neo {
  position: relative;
  overflow: hidden;
  padding: .95rem;
  border-radius: 1.25rem;
  gap: .7rem;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--line-color) 18%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.78));
}

.timetable-card__line {
  position: absolute;
  inset: 0 auto 0 0;
  width: .34rem;
  background: var(--line-color);
}

.timetable-card--neo .timetable-card__top {
  display: grid;
  grid-template-columns: 3.3rem 1fr;
  gap: .7rem;
}

.timetable-card--neo .timetable-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .95rem;
}

.timetable-card--neo .timetable-card__icon img {
  width: 2.2rem;
  height: 2.2rem;
}

.timetable-card--neo h3 {
  font-size: 1.65rem;
}

.timetable-card__body {
  display: grid;
  gap: .25rem;
  min-height: 4.15rem;
}

.timetable-card__body strong {
  font-size: .95rem;
  line-height: 1.22;
}

.timetable-card__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 750;
}

.timetable-card--neo .timetable-card__meta {
  gap: .35rem;
}

.timetable-card--neo .timetable-card__meta span {
  padding: .3rem .55rem;
  font-size: .64rem;
}

.timetable-card--neo .timetable-card__actions {
  grid-template-columns: 1fr auto;
}

.timetable-card--neo .timetable-card__actions .btn {
  padding: .68rem .75rem;
  font-size: .72rem;
}

@media (max-width: 1120px) {
  .timetable-command__hero--neo,
  .timetable-command__search--neo {
    grid-template-columns: 1fr;
  }

  .timetable-command__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timetable-command__grid--neo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .timetable-command__stats,
  .timetable-command__grid--neo {
    grid-template-columns: 1fr;
  }

  .timetable-card--neo .timetable-card__actions {
    grid-template-columns: 1fr;
  }
}

.timetable-command--neo{
  position:relative;
  overflow:hidden;
  padding:clamp(1.1rem,2.2vw,2rem);
  border-radius:2rem;
  background:
    radial-gradient(circle at 12% 0%,rgba(46,75,155,.20),transparent 32%),
    radial-gradient(circle at 88% 12%,rgba(255,226,0,.18),transparent 24%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,249,255,.82));
}

.timetable-command--neo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(46,75,155,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(46,75,155,.045) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%);
  pointer-events:none;
}

.timetable-command--neo > *{
  position:relative;
  z-index:1;
}

.timetable-command__hero--neo{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:start;
  margin-bottom:1.25rem;
}

.timetable-command__hero--neo h2{
  margin:.35rem 0;
  font-size:clamp(1.7rem,3vw,2.7rem);
  letter-spacing:-.05em;
}

.timetable-command__hero--neo p{
  max-width:50rem;
  margin:0;
  color:#64748b;
  font-weight:650;
  line-height:1.5;
}

.timetable-command__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  min-width:min(34rem,100%);
}

.timetable-command__stats span{
  display:grid;
  gap:.15rem;
  padding:.9rem;
  border-radius:1.15rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(46,75,155,.12);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  font-size:.72rem;
  font-weight:850;
  color:#64748b;
}

.timetable-command__stats strong{
  font-size:.98rem;
  color:#111827;
}

.timetable-command__search--neo{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) minmax(240px,1fr) auto;
  gap:.85rem;
  align-items:end;
  padding:.9rem;
  border-radius:1.45rem;
  background:rgb(255 255 255 / 54%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  margin-bottom:1.25rem;
}

.timetable-field{
  display:grid;
  gap:.45rem;
}

.timetable-field label{
  color: rgb(0 0 0 / 78%);
  font-size:.76rem;
  font-weight:900;
}

.timetable-searchbox,
.timetable-field select{
  min-height:3.15rem;
  border-radius:1rem;
  border:1px solid rgb(29 29 29 / 21%)
  background:rgba(255,255,255,.08);
  color:white;
}

.timetable-searchbox{
  display:grid;
  grid-template-columns:2.75rem 1fr;
  align-items:center;
}

.timetable-searchbox span{
  display:grid;
  place-items:center;
  font-size:1.2rem;
  color:#ffe200;
}

.timetable-searchbox input{
  width:100%;
  border:0;
  outline:0;
  font-weight:750;
}

.timetable-searchbox input::placeholder{
  color:rgba(255,255,255,.5);
}

.timetable-field select{
  padding:0 1rem;
  color: #000000;
  font-weight:750;
}

.timetable-field select option{
  color:#111827;
}

.timetable-search-submit{
  min-height:3.15rem;
  white-space:nowrap;
}

.timetable-command__grid--neo{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.timetable-card--neo{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:.95rem;
  padding:1rem;
  border-radius:1.45rem;
  background:
    radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--line-color) 22%,transparent),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,250,252,.82));
  border:1px solid color-mix(in srgb,var(--line-color) 26%,rgba(226,232,240,1));
  box-shadow:0 20px 50px rgba(15,23,42,.10);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.timetable-card--neo:hover{
  transform:translateY(-5px);
  border-color:var(--line-color);
  box-shadow:0 28px 70px rgba(15,23,42,.16);
}

.timetable-card__line{
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:var(--line-color);
}

.timetable-card__top{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.timetable-card__icon{
  display:grid;
  place-items:center;
  width:3.6rem;
  height:3.6rem;
  border-radius:1.05rem;
  background:color-mix(in srgb,var(--line-color) 14%,white);
  border:1px solid color-mix(in srgb,var(--line-color) 30%,white);
}

.timetable-card__icon img{
  width:2.4rem;
  height:2.4rem;
  object-fit:contain;
}

.timetable-card__top span{
  display:inline-flex;
  padding:.22rem .55rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--line-color) 12%,white);
  color:color-mix(in srgb,var(--line-color) 70%,#111827);
  font-size:.68rem;
  font-weight:950;
}

.timetable-card__top h3{
  margin:.18rem 0 0;
  font-size:1.8rem;
  line-height:1;
  letter-spacing:-.05em;
}

.timetable-card__body strong{
  display:block;
  font-size:1rem;
  line-height:1.25;
  color:#111827;
}

.timetable-card__body p{
  margin:.35rem 0 0;
  color:#64748b;
  font-size:.84rem;
  font-weight:700;
}

.timetable-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.timetable-card__meta span{
  padding:.45rem .65rem;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.07);
  font-size:.72rem;
  font-weight:900;
  color:#334155;
}

.timetable-card__actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.55rem;
}

.timetable-card__actions .btn{
  border-radius:.95rem;
  padding:.75rem .9rem;
}

@media (max-width:1100px){
  .timetable-command__hero--neo,
  .timetable-command__search--neo{
    grid-template-columns:1fr;
  }

  .timetable-command__grid--neo{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .timetable-command--neo{
    padding:1rem;
    border-radius:1.35rem;
  }

  .timetable-command__stats{
    grid-template-columns:1fr;
  }

  .timetable-command__grid--neo{
    grid-template-columns:1fr;
  }

  .timetable-card__actions{
    grid-template-columns:1fr;
  }
}

.timetable-card__actions--icons{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
}

.timetable-icon-action{
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:1rem;
  text-decoration:none;
  font-size:1.35rem;
  font-weight:950;
  color:#fff;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  transition:.2s ease;
}

.timetable-icon-action:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 20px 44px rgba(15,23,42,.24);
}

.timetable-icon-action.is-download{
  background:linear-gradient(135deg,var(--line-color),#111827);
}

.timetable-icon-action.is-map{
  color:var(--line-color);
  background:rgba(255,255,255,.86);
  border-color:color-mix(in srgb,var(--line-color) 32%,rgba(226,232,240,1));
}

.map-pro-controls button.is-active{
  background:linear-gradient(135deg,var(--blue),#51beca);
  color:#fff;
  box-shadow:0 14px 30px rgba(46,75,155,.22);
}

.network-map-stage.is-fullscreen-map{
  width:100vw;
  height:100vh;
  border-radius:0;
  background:#eaf4ff;
}

.network-map-stage.is-fullscreen-map .network-svg{
  width:100%;
  height:100%;
}

.network-map-stage.is-fullscreen-map .map-pro-controls--top{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:30;
}

.network-stop-inline-card__close{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:5;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(12px);
}

.network-stop-inline-card__close:hover{
  background:#e30613;
  transform:scale(1.06);
}

/* FULLSCREEN MAP — style Google Maps */
:fullscreen.hero-network-layout,
:fullscreen.move-map-module,
.hero-network-layout.is-network-fullscreen,
.move-map-module.is-network-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;

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

:fullscreen .hero-network-map,
:fullscreen .move-map-main,
.is-network-fullscreen .hero-network-map,
.is-network-fullscreen .move-map-main {
  height: 100vh !important;
  border-radius: 0 !important;
  background: #dfe8f3 !important;
  overflow: hidden !important;
}

:fullscreen .hero-network-map__top,
.is-network-fullscreen .hero-network-map__top {
  position: absolute !important;
  z-index: 40 !important;
  top: 18px !important;
  left: 280px !important;
  right: 320px !important;
  width: auto !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 18px 45px rgba(7, 19, 38, .18) !important;
}

:fullscreen .network-map-stage,
.is-network-fullscreen .network-map-stage {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  background: #dfe8f3 !important;
}

:fullscreen .network-svg,
.is-network-fullscreen .network-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

:fullscreen .hero-network-map__mini-controls,
:fullscreen .move-map-lines,
.is-network-fullscreen .hero-network-map__mini-controls,
.is-network-fullscreen .move-map-lines {
  height: 100vh !important;
  border-radius: 0 !important;
  padding: 18px 12px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #062b64, #041936) !important;
  z-index: 45 !important;
}

:fullscreen .network-detail-panel,
.is-network-fullscreen .network-detail-panel {
  height: 100vh !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  z-index: 45 !important;
  background: linear-gradient(180deg, #24265d, #061b3d) !important;
}

:fullscreen .map-legend-pill,
.is-network-fullscreen .map-legend-pill {
  left: 50% !important;
  bottom: 26px !important;
  transform: translateX(-50%) !important;
  z-index: 42 !important;
}

:fullscreen .network-map-stop-card,
.is-network-fullscreen .network-map-stop-card {
  z-index: 60 !important;
}

@media (max-width: 980px) {
  :fullscreen.hero-network-layout,
  :fullscreen.move-map-module,
  .hero-network-layout.is-network-fullscreen,
  .move-map-module.is-network-fullscreen {
    grid-template-columns: 1fr !important;
  }

  :fullscreen .hero-network-map__mini-controls,
  :fullscreen .move-map-lines,
  :fullscreen .network-detail-panel,
  .is-network-fullscreen .hero-network-map__mini-controls,
  .is-network-fullscreen .move-map-lines,
  .is-network-fullscreen .network-detail-panel {
    position: absolute !important;
    width: 86vw !important;
    max-width: 340px !important;
    height: calc(100vh - 96px) !important;
    top: 78px !important;
    border-radius: 24px !important;
  }

  :fullscreen .hero-network-map__mini-controls,
  :fullscreen .move-map-lines,
  .is-network-fullscreen .hero-network-map__mini-controls,
  .is-network-fullscreen .move-map-lines {
    left: 12px !important;
  }

  :fullscreen .network-detail-panel,
  .is-network-fullscreen .network-detail-panel {
    right: 12px !important;
  }

  :fullscreen .hero-network-map__top,
  .is-network-fullscreen .hero-network-map__top {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
  }
}


.network-stop-inline-card__media,
.network-stop-media {
  display: grid;
  gap: 12px;
}

.network-stop-inline-card__media img,
.network-stop-inline-card__media video,
.network-stop-inline-card__media iframe,
.network-stop-media img,
.network-stop-media video,
.network-stop-media iframe {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}

.network-stop-inline-card__media video,
.network-stop-inline-card__media iframe,
.network-stop-media video,
.network-stop-media iframe {
  aspect-ratio: 16 / 9;
  background: #000;
}

.network-stop-media-link {
  display: block;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  text-decoration: none;
}

.network-map-stage::after {
  content: "Double-cliquez pour activer le zoom";
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(7, 19, 38, .82);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
  z-index: 80;
}

.network-map-stage.is-wheel-zoom-hint::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.network-map-stage.is-wheel-zoom-unlocked::after {
  content: "Zoom activé";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



.move-page .hero-network-layout--cockpit {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  align-items: stretch;
}


.move-page .cockpit-trip-search__row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 2.7rem minmax(0,1fr) !important;
  gap:.7rem !important;
  align-items:end !important;
}

.move-page .cockpit-trip-field{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}

.move-page .cockpit-trip-field select{
  width:100% !important;
  min-width:0 !important;
}

.move-page .cockpit-trip-swap{
  width:2.7rem !important;
  height:2.7rem !important;
  align-self:end !important;
  margin:0 !important;
}

@media(max-width:760px){
  .move-page .cockpit-trip-search__row{
    grid-template-columns:1fr !important;
  }

  .move-page .cockpit-trip-swap{
    justify-self:center !important;
  }
}


/* =========================================================
   M'SAFARA — Cockpit Trip Search premium
========================================================= */

.move-page .cockpit-trip-search{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:1rem;
  border-radius:1.75rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(81,190,202,.18), transparent 34%),
    radial-gradient(circle at 96% 8%, rgba(227,6,19,.12), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,247,255,.72));
  box-shadow:
    0 24px 70px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.move-page .cockpit-trip-search::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(46,75,155,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(46,75,155,.04) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, black, transparent 86%);
}

.move-page .cockpit-trip-search__head{
  margin-bottom:.85rem;
}

.move-page .cockpit-trip-search__head .eyebrow{
  color:#2e4b9b;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.1em;
}

.move-page .cockpit-trip-search__head strong{
  display:block;
  margin-top:.18rem;
  color:#071326;
  font-size:1.05rem;
  font-weight:950;
}

.move-page .cockpit-trip-search__head p{
  max-width:42rem;
  margin:.35rem 0 0;
  color:#52627a;
  font-size:.82rem;
  line-height:1.45;
  font-weight:700;
}

.move-page .cockpit-trip-search__row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 2.8rem minmax(0,1fr) !important;
  gap:.7rem !important;
  align-items:end !important;
}

.move-page .cockpit-trip-field{
  display:grid;
  gap:.35rem;
  min-width:0;
  margin:0 !important;
}

.move-page .cockpit-trip-field small{
  color:#415170;
  font-size:.66rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.move-page .cockpit-trip-field select{
  width:100%;
  min-width:0;
  min-height:3rem;
  padding:0 2.2rem 0 .9rem;
  border-radius:1rem;
  border:1px solid rgba(46,75,155,.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,255,.9));
  color:#071326;
  font-size:.82rem;
  font-weight:850;
  outline:none;
  box-shadow:
    0 12px 26px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.move-page .cockpit-trip-field select:focus{
  border-color:#51beca;
  box-shadow:
    0 0 0 4px rgba(81,190,202,.15),
    0 14px 30px rgba(15,23,42,.08);
}

.move-page .cockpit-trip-swap{
  width:2.8rem !important;
  height:3rem !important;
  margin:0 !important;
  align-self:end !important;
  border:0;
  border-radius:1rem;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:1.2rem;
  font-weight:950;
  cursor:pointer;
  box-shadow:
    0 14px 32px rgba(81,190,202,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}

.move-page .cockpit-trip-swap:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 38px rgba(81,190,202,.32),
    0 0 0 5px rgba(81,190,202,.13);
}

.move-page .cockpit-trip-search__actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.85rem;
}

.move-page .cockpit-trip-search__actions .btn{
  min-height:2.7rem;
  border-radius:1rem;
  font-size:.78rem;
  font-weight:950;
}

@media(max-width:760px){
  .move-page .cockpit-trip-search__row{
    grid-template-columns:1fr !important;
  }

  .move-page .cockpit-trip-swap{
    justify-self:center !important;
  }

  .move-page .cockpit-trip-search__actions .btn{
    width:100%;
  }
}


.move-page .cockpit-line-times{
  margin-bottom:1rem;
  padding:1rem;
  border-radius:1.6rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(81,190,202,.18), transparent 34%),
    linear-gradient(145deg, rgba(7,19,38,.94), rgba(16,42,92,.88));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 24px 70px rgba(7,19,38,.18);
}

.move-page .cockpit-line-times__head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:.85rem;
}

.move-page .cockpit-line-times__head strong{
  display:block;
  margin-top:.2rem;
  font-size:1rem;
}

.move-page .cockpit-line-times__head small{
  color:rgba(255,255,255,.65);
  font-weight:800;
}

.move-page .cockpit-line-times__body{
  display:grid;
  gap:.85rem;
  max-height:360px;
  overflow:auto;
  padding-right:.25rem;
}

.move-page .cockpit-line-times__direction{
  padding:.8rem;
  border-radius:1.15rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
}

.move-page .cockpit-line-times__direction h4{
  margin:0 0 .65rem;
  font-size:.86rem;
}

.move-page .cockpit-line-times__days{
  display:grid;
  gap:.55rem;
}

.move-page .cockpit-line-times__day{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:.55rem;
  align-items:start;
}

.move-page .cockpit-line-times__day strong{
  color:#ffe200;
  font-size:.72rem;
}

.move-page .cockpit-line-times__day div{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.move-page .cockpit-line-times__day span{
  padding:.32rem .48rem;
  border-radius:.65rem;
  background:rgba(255,255,255,.12);
  font-size:.72rem;
  font-weight:850;
}

.move-page .cockpit-line-times__day em,
.move-page .cockpit-line-times__empty{
  color:rgba(255,255,255,.62);
  font-size:.8rem;
}


.move-page .cockpit-times-board{
	margin-top: 14px;
  margin-bottom:1rem;
  padding:1rem;
  border-radius:1.7rem;
  background:
    radial-gradient(circle at 8% 0%, rgba(81,190,202,.18), transparent 34%),
    radial-gradient(circle at 95% 10%, rgba(255,226,0,.14), transparent 30%),
    linear-gradient(145deg, rgba(7,19,38,.96), rgba(14,34,76,.92));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 28px 80px rgba(7,19,38,.26);
  overflow:hidden;
}

.move-page .cockpit-times-board__head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:.85rem;
}

.move-page .cockpit-times-board__head strong{
  display:block;
  margin-top:.2rem;
  font-size:1.05rem;
  font-weight:950;
}

.move-page .cockpit-times-board__head p{
  margin:.3rem 0 0;
  color:rgba(255,255,255,.66);
  font-size:.78rem;
  line-height:1.45;
}

.move-page .cockpit-times-board__tabs{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.move-page .cockpit-times-board__tabs button{
  min-height:2.25rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:.45rem .7rem;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  cursor:pointer;
}

.move-page .cockpit-times-board__tabs button.is-active{
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  border-color:transparent;
}

.move-page .cockpit-times-table-wrap{
  overflow:auto;
  max-height:420px;
  border-radius:1.15rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,10,28,.42);
}

.move-page .cockpit-times-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
}

.move-page .cockpit-times-table th,
.move-page .cockpit-times-table td{
  padding:.65rem .7rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.06);
  font-size:.74rem;
  text-align:center;
  white-space:nowrap;
}

.move-page .cockpit-times-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(7,19,38,.96);
  color:#51beca;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.move-page .cockpit-times-table th:first-child,
.move-page .cockpit-times-table td:first-child{
  position:relative;
  left:0;
  z-index:3;
  text-align:left;
  min-width:190px;
  background:rgba(7,19,38,.96);
}

.move-page .cockpit-times-table td:first-child{
  color:#fff;
  font-weight:950;
}

.move-page .cockpit-times-table td{
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.035);
}

.move-page .cockpit-times-table tr:hover td{
  background:rgba(81,190,202,.12);
}

.move-page .cockpit-time-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.15rem;
  padding:.35rem .5rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-weight:900;
}

.move-page .cockpit-time-pill.is-next{
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  box-shadow:0 0 18px rgba(81,190,202,.28);
}

.move-page .cockpit-times-board__empty{
  padding:1rem;
  color:rgba(255,255,255,.68);
  font-size:.82rem;
}

@media(max-width:760px){
  .move-page .cockpit-times-board__head{
    display:grid;
  }

  .move-page .cockpit-times-board__tabs{
    justify-content:flex-start;
  }
}


.move-page .cockpit-stop-focus-head{
  display:grid;
  gap:.25rem;
  margin-bottom:.75rem;
  padding:.85rem;
  border-radius:1.15rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(81,190,202,.25), transparent 38%),
    rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.move-page .cockpit-stop-focus-head span{
  width:max-content;
  padding:.3rem .6rem;
  border-radius:999px;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:.72rem;
  font-weight:950;
}

.move-page .cockpit-stop-focus-head strong{
  color:#fff;
  font-size:1.2rem;
  font-weight:950;
}

.move-page .cockpit-stop-focus-head small{
  color:rgba(255,255,255,.65);
  font-weight:800;
}

.move-page .cockpit-times-table--stop-focus td:first-child{
  color:#ffe200;
  font-size:.82rem;
}

.move-page .cockpit-times-direction--stop-focus{
  animation:cockpitStopReveal .25s ease both;
}

@keyframes cockpitStopReveal{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

.move-page .cockpit-times-direction + .cockpit-times-direction{
  margin-top:1rem !important;
}

.move-page .cockpit-times-table-wrap{
  margin-top:.85rem !important;
}



.move-page .cockpit-times-direction--stop-focus{
  padding-bottom:.25rem;
}


.move-page .network-stop-item.is-open > .network-stop-row{
  border-color: var(--detail-color, #e30613) !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--detail-color, #e30613) 20%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,247,.94)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--detail-color, #e30613) 18%, transparent),
    0 14px 34px rgba(15,23,42,.12) !important;
}

.move-page .network-stop-item.is-open > .network-stop-row .network-stop-access{
  background: var(--detail-color, #e30613) !important;
  color:#fff !important;
}

.move-page .cockpit-trip-result{
  margin-top:1rem;
}

.move-page .cockpit-trip-result__empty{
  padding:.85rem 1rem;
  border-radius:1rem;
  background:rgba(7,19,38,.08);
  color:#52627a;
  font-size:.82rem;
  font-weight:800;
}

.move-page .cockpit-trip-result__card{
  padding:1rem;
  border-radius:1.4rem;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--line-color, #e30613) 22%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(7,19,38,.94), rgba(16,42,92,.9));
  border:1px solid color-mix(in srgb, var(--line-color, #e30613) 28%, rgba(255,255,255,.14));
  color:#fff;
  box-shadow:0 22px 60px rgba(7,19,38,.22);
}

.move-page .cockpit-trip-result__head{
  display:grid;
  gap:.25rem;
  margin-bottom:.9rem;
}

.move-page .cockpit-trip-result__head span{
  width:max-content;
  padding:.28rem .6rem;
  border-radius:999px;
  background:var(--line-color, #e30613);
  color:#fff;
  font-size:.72rem;
  font-weight:950;
}

.move-page .cockpit-trip-result__head strong{
  font-size:1rem;
  font-weight:950;
}

.move-page .cockpit-trip-result__head small{
  color:rgba(255,255,255,.68);
  font-weight:800;
}

.move-page .cockpit-trip-result__rail{
  display:grid;
  gap:.45rem;
  position:relative;
}

.move-page .cockpit-trip-result__stop{
  display:grid;
  grid-template-columns:1rem minmax(0,1fr) auto;
  gap:.65rem;
  align-items:center;
  width:100%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:1rem;
  padding:.62rem .75rem;
  background:rgba(255,255,255,.07);
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.move-page .cockpit-trip-result__stop i{
  width:.8rem;
  height:.8rem;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--line-color, #e30613);
}

.move-page .cockpit-trip-result__stop span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}

.move-page .cockpit-trip-result__stop small{
  color:rgba(255,255,255,.62);
  font-size:.72rem;
  font-weight:850;
}

.move-page .cockpit-trip-result__stop.is-start i{
  background:#22c55e;
}

.move-page .cockpit-trip-result__stop.is-end i{
  background:#ffe200;
}

.move-page .cockpit-trip-result__stop:hover{
  border-color:color-mix(in srgb, var(--line-color, #e30613) 60%, white);
  background:color-mix(in srgb, var(--line-color, #e30613) 20%, rgba(255,255,255,.08));
}


.move-page .cockpit-trip-result{
  margin-top:1rem;
}

.move-page .cockpit-trip-mini{
  position:relative;
  overflow:hidden;
  padding:1rem;
  border-radius:1.35rem;
  background:
    radial-gradient(circle at 8% 0%, rgba(81,190,202,.24), transparent 36%),
    radial-gradient(circle at 92% 12%, rgba(255,226,0,.16), transparent 34%),
    linear-gradient(145deg, rgba(7,19,38,.96), rgba(16,42,92,.92));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow:
    0 22px 60px rgba(7,19,38,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.move-page .cockpit-trip-mini::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, black, transparent 88%);
}

.move-page .cockpit-trip-mini strong{
  display:block;
  position:relative;
  z-index:1;
  font-size:1rem;
  line-height:1.25;
  font-weight:950;
}

.move-page .cockpit-trip-mini span{
  display:inline-flex;
  position:relative;
  z-index:1;
  width:max-content;
  margin-top:.65rem;
  padding:.4rem .7rem;
  border-radius:999px;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:.78rem;
  font-weight:950;
}

.move-page .cockpit-trip-mini small{
  display:block;
  position:relative;
  z-index:1;
  margin-top:.55rem;
  color:rgba(255,255,255,.72);
  font-size:.78rem;
  font-weight:850;
}

.move-page .cockpit-trip-mini small::before{
  content:"⏱ ";
  color:#ffe200;
}

.move-page .cockpit-trip-mini__stops{
  display:grid;
  gap:.38rem;
  margin-top:.85rem;
}

.move-page .cockpit-trip-mini__stops em{
  display:grid;
  grid-template-columns:.8rem minmax(0,1fr);
  align-items:center;
  gap:.55rem;
  padding:.5rem .65rem;
  border-radius:.85rem;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-style:normal;
  font-size:.78rem;
  font-weight:850;
}

.move-page .cockpit-trip-mini__stops em i{
  width:.65rem;
  height:.65rem;
  border-radius:999px;
  background:rgba(255,255,255,.75);
}

.move-page .cockpit-trip-mini__stops em.is-start{
  background:rgba(34,197,94,.2);
}

.move-page .cockpit-trip-mini__stops em.is-start i{
  background:#22c55e;
}

.move-page .cockpit-trip-mini__stops em.is-end{
  background:rgba(255,226,0,.2);
}

.move-page .cockpit-trip-mini__stops em.is-end i{
  background:#ffe200;
}

.move-page .cockpit-trip-segments-grid{
  display:grid;
  grid-template-columns:repeat(var(--segments-count), minmax(220px, 1fr));
  gap:.85rem;
  margin-top:1rem;
  overflow-x:auto;
  padding-bottom:.25rem;
}

.move-page .cockpit-trip-segment{
  min-width:220px;
  padding:.85rem;
  border-radius:1.15rem;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--line-color) 28%, transparent), transparent 42%),
    rgba(255,255,255,.08);
  border:1px solid color-mix(in srgb, var(--line-color) 38%, rgba(255,255,255,.12));
}

.move-page .cockpit-trip-segment__head span{
  display:inline-flex;
  padding:.3rem .6rem;
  border-radius:999px;
  background:var(--line-color);
  color:#fff;
  font-size:.72rem;
  font-weight:950;
}

.move-page .cockpit-trip-segment__head strong{
  display:block;
  margin-top:.55rem;
  font-size:.86rem;
  line-height:1.25;
}

.move-page .cockpit-trip-segment__head small{
  display:block;
  margin-top:.3rem;
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  font-weight:850;
}

.move-page .cockpit-trip-metrics{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.25rem .45rem;
  margin:.75rem 0;
  padding:.65rem;
  border-radius:.95rem;
  background:rgba(7,19,38,.28);
}

.move-page .cockpit-trip-metrics b{
  color:#ffe200;
  font-size:.82rem;
}

.move-page .cockpit-trip-metrics span{
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-weight:800;
}

@media(max-width:900px){
  .move-page .cockpit-trip-segments-grid{
    grid-template-columns:1fr;
  }
}

.move-page .cockpit-trip-stops-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
  gap:.35rem;
  margin-top:.75rem;
}

.move-page .cockpit-trip-stop-cell{
  min-height:4rem;
  padding:.45rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.move-page .cockpit-trip-stop-cell small{
  display:block;
  color:#51beca;
  font-size:.62rem;
  font-weight:950;
}

.move-page .cockpit-trip-stop-cell strong{
  display:block;
  margin-top:.2rem;
  color:#fff;
  font-size:.68rem;
  line-height:1.15;
}

.move-page .cockpit-trip-stop-cell.is-start{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.16);
}

.move-page .cockpit-trip-stop-cell.is-end{
  border-color:rgba(255,226,0,.45);
  background:rgba(255,226,0,.16);
}

.move-page .cockpit-stop-number{
  display:inline-grid;
  place-items:center;
  width:1.45rem;
  height:1.45rem;
  margin-right:.45rem;
  border-radius:.55rem;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:.68rem;
  font-weight:950;
}

.move-page .cockpit-stop-name{
  font-size:.78rem;
  font-weight:950;
  color:inherit;
}

.move-page .cockpit-trip-mini small::before{
  content:none !important;
}

.move-page .cockpit-trip-current-time{
  margin-top:.6rem;
  padding:.55rem .65rem;
  border-radius:.85rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
}

.move-page .cockpit-trip-current-time b{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:.62rem;
  font-weight:950;
  text-transform:uppercase;
}

.move-page .cockpit-trip-current-time strong{
  display:block;
  margin-top:.15rem;
  color:#ffe200;
  font-size:1rem;
  font-weight:950;
}

.move-page .cockpit-trip-segment__head{
  position:relative;
  overflow:hidden;
  padding:.9rem;
  border-radius:1.15rem;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--line-color, #51beca) 28%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(7,19,38,.88), rgba(16,42,92,.76));
  border:1px solid color-mix(in srgb, var(--line-color, #51beca) 35%, rgba(255,255,255,.14));
  box-shadow:
    0 18px 45px rgba(7,19,38,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.move-page .cockpit-trip-segment__head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, black, transparent 88%);
}

.move-page .cockpit-trip-segment__head > *{
  position:relative;
  z-index:1;
}

.move-page .cockpit-trip-segment__head span{
  display:inline-flex;
  width:max-content;
  padding:.28rem .6rem;
  border-radius:999px;
  background:var(--line-color, #51beca);
  color:#fff;
  font-size:.72rem;
  font-weight:950;
}

.move-page .cockpit-trip-segment__head strong{
  display:block;
  margin-top:.55rem;
  color:#fff;
  font-size:.92rem;
  line-height:1.25;
  font-weight:950;
}

.move-page .cockpit-trip-segment__head small{
  display:inline-flex;
  width:max-content;
  margin-top:.55rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#ffe200;
  font-size:.74rem;
  font-weight:950;
}

.move-page .cockpit-trip-stop-time{
  display:inline-flex;
  width:max-content;
  margin-top:.4rem;
  padding:.26rem .48rem;
  border-radius:999px;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:.68rem;
  font-weight:950;
}

.move-page .cockpit-trip-stop-cell{
  display:grid;
  gap:.55rem;
  align-items:center;
  padding:.65rem;
  border-radius:1rem;
}

.move-page .cockpit-trip-stop-cell__index{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:.8rem;
  background:linear-gradient(135deg,#51beca,#ffe200);
  color:#071326;
  font-size:.78rem;
  font-weight:950;
}

.move-page .cockpit-trip-stop-cell__content strong{
  display:block;
}

.move-page .cockpit-trip-stop-cell__content b{
  display:inline-flex;
  margin-top:.32rem;
  opacity: 0.8;
}


/* =========================================================
   M'SAFARA — Cockpit 1/3 + 2/3 dans le gabarit site
========================================================= */

.move-page #plan-du-reseau > .container-wide.hero-network-layout--cockpit,
.move-page .hero-network-layout--cockpit{
  width:100% !important;
  max-width:min(1600px, calc(100vw - 56px)) !important;
  margin-inline:auto !important;

  display:grid !important;
  grid-template-columns:minmax(300px, 1fr) minmax(0, 2fr) !important;
  gap:clamp(.9rem, 1.25vw, 1.25rem) !important;
  align-items:start !important;
}

.move-page .hero-network-layout__left{
  grid-column:1 !important;
  min-width:0 !important;
  width:100% !important;
}

.move-page .hero-network-layout__center{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;

  gap:1rem !important;
  align-content:start !important;
}

.move-page .hero-network-layout__center > *,
.move-page .cockpit-times-board,
.move-page .cockpit-trip-search,
.move-page .hero-network-thermometer-shell{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.move-page .hero-network-layout__map{
  min-height:clamp(420px, 54vh, 640px) !important;
}

/* Desktop large : garde le site cadré mais donne plus d’air */
@media(min-width:1600px){
  .move-page #plan-du-reseau > .container-wide.hero-network-layout--cockpit,
  .move-page .hero-network-layout--cockpit{
    grid-template-columns:minmax(340px, 1fr) minmax(0, 2fr) !important;
  }
}

/* Tablette */
@media(max-width:1100px){
  .move-page #plan-du-reseau > .container-wide.hero-network-layout--cockpit,
  .move-page .hero-network-layout--cockpit{
    max-width:min(900px, calc(100vw - 32px)) !important;
    grid-template-columns:1fr !important;
  }

  .move-page .hero-network-layout__left,
  .move-page .hero-network-layout__center{
    grid-column:auto !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .move-page #plan-du-reseau > .container-wide.hero-network-layout--cockpit,
  .move-page .hero-network-layout--cockpit{
    max-width:calc(100vw - 24px) !important;
    gap:.85rem !important;
  }

  .move-page .hero-network-layout__map{
    min-height:400px !important;
  }
}


/* 3 par ligne si l’espace baisse */
@media (max-width:1200px){
  #plan-du-reseau .network-line-list.hero-network-map__lines{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 2 par ligne tablette */
@media (max-width:900px){
  #plan-du-reseau .network-line-list.hero-network-map__lines{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 1 par ligne mobile */
@media (max-width:520px){
  #plan-du-reseau .network-line-list.hero-network-map__lines{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Rendre les tabs invisibles + inactifs */
#plan-du-reseau .network-layer-tabs{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}


/* Trajet rapide — arrêts premium futuristes */
#plan-du-reseau .cockpit-trip-stops-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap:.55rem !important;
}

#plan-du-reseau .cockpit-trip-stop-cell{
  position:relative;
  min-height:5.35rem;
  display:grid !important;
  grid-template-rows:auto 1fr;
  align-items:center;
  justify-items:center;
  gap:.25rem;
  padding:.55rem .5rem .65rem !important;
  border-radius:1rem !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(81,190,202,.16), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}

#plan-du-reseau .cockpit-trip-stop-cell__index{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:.12rem .42rem !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.62) !important;
  font-size:.62rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  box-shadow:none !important;
}

#plan-du-reseau .cockpit-trip-stop-cell__content{
  width:100%;
  min-width:0;
  display:grid !important;
  justify-items:center;
  text-align:center;
}

#plan-du-reseau .cockpit-trip-stop-cell__content strong{
  width:100%;
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#fff !important;
  font-size:.72rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}

#plan-du-reseau .cockpit-trip-stop-cell__content b{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:3.25rem;
  padding:.26rem .55rem;
  border-radius:999px;
  background:
    linear-gradient(135deg, rgba(81,190,202,.95), rgba(255,226,0,.92));
  color:#071326 !important;
  font-size:.72rem !important;
  font-weight:1000 !important;
  letter-spacing:.01em;
  box-shadow:
    0 0 0 3px rgba(81,190,202,.12),
    0 10px 22px rgba(81,190,202,.18);
}

/* Départ / arrivée plus lisibles mais sobres */
#plan-du-reseau .cockpit-trip-stop-cell.is-start,
#plan-du-reseau .cockpit-trip-stop-cell.is-end{
  border-color:color-mix(in srgb, var(--line-color, #51beca) 55%, white 16%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 3px color-mix(in srgb, var(--line-color, #51beca) 12%, transparent);
}

#plan-du-reseau .cockpit-trip-stop-cell.is-start::after,
#plan-du-reseau .cockpit-trip-stop-cell.is-end::after{
  position:absolute;
  top:.38rem;
  right:.42rem;
  padding:.12rem .34rem;
  border-radius:999px;
  font-size:.48rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#071326;
  background:#fff;
  opacity:.85;
}

#plan-du-reseau .cockpit-trip-stop-cell.is-start::after{
  content:"Départ";
}

#plan-du-reseau .cockpit-trip-stop-cell.is-end::after{
  content:"Arrivée";
}

@media (max-width:620px){
  #plan-du-reseau .cockpit-trip-stops-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Chiffre en angle + arrêt dessous */
#plan-du-reseau .cockpit-trip-stop-cell{
  position:relative !important;
  grid-template-rows:1fr !important;
  padding:.95rem .5rem .65rem !important;
}

#plan-du-reseau .cockpit-trip-stop-cell__index{
  position:absolute !important;
  top:.38rem !important;
  left:.38rem !important;
  z-index:2;
  min-width:1.35rem !important;
  height:1.35rem !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:.45rem !important;
  background:rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.72) !important;
  font-size:.58rem !important;
  font-weight:1000 !important;
}

#plan-du-reseau .cockpit-trip-stop-cell__content{
  margin-top: .91rem;
}

#plan-du-reseau .cockpit-trip-stop-cell__content strong{
  text-align:center !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}


/* COCKPIT — design dynamique par couleur de ligne */
#plan-du-reseau{
  --cockpit-accent: var(--line-color, #2e4b9b);
}

#plan-du-reseau .cockpit-times-board,
#plan-du-reseau .cockpit-trip-search,
#plan-du-reseau .cockpit-trip-result,
#plan-du-reseau .cockpit-trip-segment{
  --line-color: var(--cockpit-accent);
  border-color: color-mix(in srgb, var(--cockpit-accent) 38%, rgba(255,255,255,.14)) !important;
  box-shadow:
    0 24px 70px rgba(7,19,38,.16),
    0 0 0 1px color-mix(in srgb, var(--cockpit-accent) 14%, transparent) !important;
}

/* Boutons jours futuristes */
#plan-du-reseau .cockpit-times-board__tabs{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  padding:.35rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

#plan-du-reseau .cockpit-times-board__tabs button{
  min-height:2.35rem;
  padding:.55rem .85rem;
  border:0;
  border-radius:999px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.08);
  font-size:.72rem;
  font-weight:950;
  cursor:pointer;
}

#plan-du-reseau .cockpit-times-board__tabs button.is-active{
  color:#071326;
  background:linear-gradient(
    135deg,
    color-mix(in srgb, var(--cockpit-accent) 82%, #fff),
    #ffe200
  );
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cockpit-accent) 18%, transparent);
}

/* Accordéon arrêt : M3 / Laboratoire / direction */
#plan-du-reseau .cockpit-stop-focus-head{
  position:relative;
  overflow:hidden;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "code title icon"
    "code sub icon";
  gap:.18rem .75rem;
  align-items:center;
  padding:.75rem .85rem;
  border:1px solid color-mix(in srgb, var(--cockpit-accent) 35%, rgba(255,255,255,.12));
  border-radius:1.05rem;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cockpit-accent) 26%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  color:#fff;
  cursor:pointer;
}

#plan-du-reseau .cockpit-stop-focus-head span{
  grid-area:code;
  display:grid;
  place-items:center;
  width:2.45rem;
  height:2.45rem;
  border-radius:.8rem;
  background:var(--cockpit-accent);
  color:#fff;
  font-size:.78rem;
  font-weight:1000;
  box-shadow:0 12px 24px color-mix(in srgb, var(--cockpit-accent) 32%, transparent);
}

#plan-du-reseau .cockpit-stop-focus-head strong{
  grid-area:title;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:1rem;
  line-height:1.1;
  font-weight:1000;
}

#plan-du-reseau .cockpit-stop-focus-head small{
  grid-area:sub;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  font-weight:850;
}

#plan-du-reseau .cockpit-stop-focus-head__icon{
  grid-area:icon;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border-radius:.8rem;
  color:#071326;
  background:linear-gradient(135deg,#fff,#ffe200);
}

#plan-du-reseau .cockpit-stop-focus-head__icon svg{
  width:1.05rem;
  height:1.05rem;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  transition:transform .2s ease;
}

#plan-du-reseau .cockpit-times-direction.is-collapsed .cockpit-stop-focus-head__icon svg{
  transform:rotate(-90deg);
}


/* =========================================================
   FIX BOUTON CALCULER LE TRAJET
========================================================= */

.move-page .cockpit-trip_search_actions .btn.btn-primary,
.move-page .cockpit-trip-search_actions .btn.btn-primary,
button.btn.btn-primary[data-cockpit-trip-submit]{

  min-height: 2.9rem;
  padding: 0 1.2rem;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;

  color: #fff !important;
  font-weight: 900;
  letter-spacing: -.01em;

  background:
    linear-gradient(
      135deg,
      #e30613 0%,
      #ff4d57 22%,
      #2e4b9b 100%
    ) !important;

  box-shadow:
    0 18px 38px rgba(46,75,155,.24),
    inset 0 1px 0 rgba(255,255,255,.22);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;

  cursor: pointer;
}

/* Hover */
.move-page .cockpit-trip_search_actions .btn.btn-primary:hover,
.move-page .cockpit-trip-search_actions .btn.btn-primary:hover,
button.btn.btn-primary[data-cockpit-trip-submit]:hover{

  transform: translateY(-2px);

  filter: brightness(1.04);

  box-shadow:
    0 24px 52px rgba(46,75,155,.34),
    0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* Active */
button.btn.btn-primary[data-cockpit-trip-submit]:active{
  transform: scale(.98);
}

/* Mobile */
@media (max-width:760px){

  button.btn.btn-primary[data-cockpit-trip-submit]{
    width: 100%;
    min-height: 3rem;
    border-radius: 1rem;
    font-size: .82rem;
  }
}

/* =========================================================
   INDEX.PHP ONLY — DETAIL CARD SCROLL APRÈS 7 ARRÊTS
   Scope unique : .hero-network-layout
   Ne touche pas se-deplacer.php
========================================================= */

.hero-network-layout .network-detail-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus {
  height: 100% !important;
  max-height: var(--network-panel-height, 760px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) !important;
  overflow: hidden !important;
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus .network-stop-list {
  max-height: calc((3.85rem * 7) + (0.55rem * 6)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: .35rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,75,155,.55) rgba(46,75,155,.08);
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus .network-stop-row {
  min-height: 3.85rem !important;
  flex-shrink: 0 !important;
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus .network-stop-list::-webkit-scrollbar {
  width: 7px;
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus .network-stop-list::-webkit-scrollbar-track {
  background: rgba(46,75,155,.08);
  border-radius: 999px;
}

.hero-network-layout .network-detail-card.network-detail-card--line-focus .network-stop-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #51beca, #2e4b9b);
  border-radius: 999px;
}
.network-layer-tabs.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 1181px et + : panneau détail à droite */
@media (min-width: 1181px) {
  .hero-network-layout {
    grid-template-columns: minmax(220px, 0.78fr) minmax(620px, 2.25fr) minmax(290px, 0.95fr) !important;
    grid-template-areas: none !important;
  }

  .network-detail-panel,
  .hero-network-map__detail {
    grid-column: auto !important;
    grid-area: auto !important;
  }
}

/* 1180px et - : tablette, le panneau descend */
@media (max-width: 1180px) {
  .hero-network-layout {

  }

  .hero-network-map__mini-controls {
    grid-area: lines;
  }

  .hero-network-map {
    grid-area: map;
  }

  .network-detail-panel,
  .hero-network-map__detail {
    grid-area: detail;
    width: 100%;
    height: auto;
    min-height: 320px;
  }
}

.hero-network-map__mini-controls--left .network-line-button,
.hero-network-map__mini-controls .network-line-button {
  grid-template-columns: 52px minmax(0, 1fr) !important;
}

.hero-network-map__mini-controls--left .network-line-count,
.hero-network-map__mini-controls .network-line-count,
.hero-network-map__mini-controls--left .network-line-button small,
.hero-network-map__mini-controls .network-line-button small {
  display: none !important;
}

.hero-network-map__mini-controls--left .network-line-button strong,
.hero-network-map__mini-controls .network-line-button strong {
  white-space: normal;
  overflow: visible;
  display: block;
}


/* MOBILE PRO : le sélecteur de lignes passe sous la carte */
@media (max-width: 760px) {
  .hero-network-layout,
  .hero-network-layout--cockpit,
  .hero-network-layout--move-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "map"
      "lines"
      "detail" !important;
  }

  .hero-network-map,
  .hero-network-layout__map {
    grid-area: map !important;
  }

  .hero-network-map__mini-controls,
  .hero-network-map__mini-controls--left,
  .hero-network-layout__controls {
    grid-area: lines !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 14px;
  }

  .network-detail-panel,
  .hero-network-map__detail {
    grid-area: detail !important;
    width: 100% !important;
  }

  .hero-network-map__lines,
  .network-line-list {
    display: flex !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none !important;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
  }

  .network-line-button {
    min-width: 245px !important;
    max-width: 245px;

    scroll-snap-align: start;
  }

  .network-line-button small,
  .network-line-count {
    display: none !important;
  }

  .network-line-button strong {
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
    font-size: 0.82rem;
    line-height: 1.2;
  }
}

/* FIX MOBILE PRO — titres lignes non coupés */
@media (max-width: 760px) {
  .hero-network-map__mini-controls--left .network-line-list,
  .hero-network-map__mini-controls--left .hero-network-map__lines {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .hero-network-map__mini-controls--left .network-line-button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
  }

  .hero-network-map__mini-controls--left .network-line-button span {
    min-width: 0 !important;
  }

  .hero-network-map__mini-controls--left .network-line-button strong {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    font-size: 0.9rem !important;
    line-height: 1.18 !important;
  }

  .hero-network-map__mini-controls--left .network-line-button small,
  .hero-network-map__mini-controls--left .network-line-count {
    display: none !important;
  }
}

/* FIX FINAL MOBILE — titres des lignes non coupés */
@media (max-width: 760px) {


  #plan-du-reseau .network-line-list .network-line-button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
    overflow: visible !important;
  }

  #plan-du-reseau .network-line-list .network-line-button strong {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    font-size: .95rem !important;
    line-height: 1.25 !important;
  }
}



/* FIX RESPONSIVE — barre outils carte jamais coupée */
@media (max-width: 1320px) {
  #plan-du-reseau .hero-network-map__top--neo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    align-items: start !important;
  }

  #plan-du-reseau .hero-network-map__top--neo > span {
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15 !important;
  }

  #plan-du-reseau .map-quick-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: .25rem !important;
    -webkit-overflow-scrolling: touch;
  }

  #plan-du-reseau .map-pro-controls--top {
    width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .45rem !important;
  }

  #plan-du-reseau .map-pro-controls--top button {
    flex: 0 0 2.35rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
  }
}

/* téléphone : barre encore plus compacte */
@media (max-width: 520px) {
  #plan-du-reseau .hero-network-map__top--neo {
    padding: .7rem !important;
  }

  #plan-du-reseau .map-pro-controls--top button {
    flex-basis: 2.15rem !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    font-size: .78rem !important;
  }
}

/* =========================================================
   RESPONSIVE PRO — PAGE SE DÉPLACER / PLAN RÉSEAU
========================================================= */

/* Desktop / laptop */
@media (min-width: 1181px) {
  .move-page .hero-network-layout--cockpit {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr) !important;
    align-items: start !important;
  }
}

/* Tablette + petit desktop */
@media (max-width: 1180px) {
  .move-page .hero-network-layout--cockpit {
    max-width: min(1040px, calc(100vw - 32px)) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .move-page .hero-network-layout__left,
  .move-page .hero-network-layout__center {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .move-page .hero-network-map {
    min-height: 0 !important;
  }

  .move-page .hero-network-map__stage,
  .move-page .network-map-stage {
    min-height: clamp(420px, 56vw, 620px) !important;
    height: auto !important;
    aspect-ratio: 2834 / 2598 !important;
  }

  .move-page .hero-network-map__top--neo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }

  .move-page .map-quick-actions {
    width: 100% !important;
    overflow-x: auto !important;
  }

  .move-page .map-pro-controls--top {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }

  .move-page .map-pro-controls--top button {
    flex: 0 0 2.35rem !important;
  }



  #plan-du-reseau .network-line-list .network-line-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    padding: .8rem .9rem !important;
  }

  #plan-du-reseau .network-line-list .network-line-button strong {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    font-size: .86rem !important;
    line-height: 1.22 !important;
  }

}

/* Mobile */
@media (max-width: 760px) {
  .move-page .hero-network-heading h1,
  .move-page .section-heading h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1 !important;
  }

  .move-page .section-heading {
    display: grid !important;
    gap: 1rem !important;
  }

  .move-page .section-heading .btn {
    width: 100% !important;
    justify-content: center !important;
  }



  .move-page .cockpit-times-board__head {
    display: grid !important;
    gap: .8rem !important;
  }

  .move-page .cockpit-times-board__tabs {
    justify-content: flex-start !important;
  }

  .move-page .cockpit-times-table-wrap {
    max-height: 520px !important;
    overflow: auto !important;
  }

  .move-page .cockpit-trip-search__row {
    grid-template-columns: 1fr !important;
  }

  .move-page .cockpit-trip-search__actions .btn {
    width: 100% !important;
  }
}

/* FIX TABLETTE 1024 — se-deplacer */
@media (max-width: 1180px) {
  .move-page #plan-du-reseau > .container-wide.hero-network-layout--cockpit,
  .move-page .hero-network-layout--cockpit {
    display: grid !important;
   
    margin-inline: auto !important;
    gap: 1rem !important;
  }

  .move-page .hero-network-layout__left,
  .move-page .hero-network-layout__center {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .move-page .hero-network-map,
  .move-page .hero-network-map__stage,
  .move-page .network-map-stage {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .move-page .hero-network-map__stage,
  .move-page .network-map-stage {
    aspect-ratio: 2834 / 2598 !important;
    min-height: clamp(420px, 56vw, 620px) !important;
  }
}


@media (max-width: 820px) {
  .hero-network-map,
  .hero-network-map__stage,
  .network-map-stage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    overflow: hidden !important;
  }

  .network-svg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .network-map-loader {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .hero-network-map__stage,
  .network-map-stage {
    min-height: 360px !important;
  }
}


/* =========================================================
   FIX FINAL 1024 / TABLETTE — STOP DÉBORDEMENT HORIZONTAL
========================================================= */

@media (max-width: 1180px) {


  .move-page .hero-network-layout__left,
  .move-page .hero-network-layout__center,
  .move-page .hero-network-layout__controls,
  .move-page .hero-network-map,
  .move-page .network-detail-panel,
  .move-page .hero-network-map__detail {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 1rem !important;
    grid-column: auto !important;
    grid-area: auto !important;
  }

  .move-page .hero-network-map__stage,
  .move-page .network-map-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 560px !important;
    aspect-ratio: 2834 / 2598 !important;
  }
}



/* FIX 1024x600 TABLETTE PAYSAGE */
@media (min-width: 900px) and (max-width: 1180px) and (max-height: 700px) {
  #plan-du-reseau .hero-network-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    grid-template-areas:
      "lines map"
      "detail detail" !important;
    gap: 1rem !important;
    width: min(100% - 24px, 1024px) !important;
    max-width: 1024px !important;
    margin-inline: auto !important;
    align-items: start !important;
  }

  #plan-du-reseau .hero-network-map__mini-controls,
  #plan-du-reseau .hero-network-layout__controls {
    grid-area: lines !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #plan-du-reseau .hero-network-map {
    grid-area: map !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #plan-du-reseau .network-detail-panel,
  #plan-du-reseau .hero-network-map__detail {
    grid-area: detail !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  #plan-du-reseau .hero-network-map__stage,
  #plan-du-reseau .network-map-stage {
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    aspect-ratio: auto !important;
  }

  #plan-du-reseau .network-line-list.hero-network-map__lines {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    overflow: visible !important;
    max-height: none !important;
  }

  #plan-du-reseau .network-line-button {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: .55rem .65rem !important;
  }

  #plan-du-reseau .network-line-button img {
    width: 34px !important;
    height: 34px !important;
  }

  #plan-du-reseau .network-line-button strong {
    font-size: .76rem !important;
    line-height: 1.12 !important;
  }
}

/* FIX FINAL INDEX 1024x600 — lignes gauche / carte droite / détail dessous */
@media (min-width: 900px) and (max-width: 1180px) and (max-height: 700px) {

  #plan-du-reseau .hero-network-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    grid-template-areas:
      "lines map"
      "detail detail" !important;
    width: min(100% - 24px, 1024px) !important;
    max-width: 1024px !important;
    margin-inline: auto !important;
    gap: 1rem !important;
    align-items: start !important;
    overflow: visible !important;
  }

  #plan-du-reseau .hero-network-map__mini-controls {
    grid-area: lines !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #plan-du-reseau .hero-network-map {
    grid-area: map !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #plan-du-reseau .network-detail-panel,
  #plan-du-reseau .hero-network-map__detail {
    grid-area: detail !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #plan-du-reseau .hero-network-map__stage,
  #plan-du-reseau .network-map-stage {
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    aspect-ratio: auto !important;
  }

  #plan-du-reseau .network-line-list.hero-network-map__lines {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #plan-du-reseau .network-line-button {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: .55rem .65rem !important;
  }

  #plan-du-reseau .network-line-button img {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
  }

  #plan-du-reseau .network-line-button strong {
    white-space: normal !important;
    overflow: visible !important;
    font-size: .76rem !important;
    line-height: 1.12 !important;
  }
}

/* =========================================================
   FIX PRO — Plein écran carte uniquement
========================================================= */

.network-map-stage:fullscreen,
.network-map-stage.is-fullscreen-map {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;

  border-radius: 0 !important;
  background: #eaf4ff !important;
  overflow: hidden !important;
}

.network-map-stage:fullscreen .network-svg,
.network-map-stage.is-fullscreen-map .network-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Cache les panneaux en plein écran */
.network-map-stage:fullscreen ~ *,
.network-map-stage.is-fullscreen-map ~ * {
  display: none !important;
}

/* Contrôles au-dessus de la carte */
.network-map-stage:fullscreen .map-pro-controls--top,
.network-map-stage.is-fullscreen-map .map-pro-controls--top {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 1000000 !important;
  display: flex !important;
  gap: 8px !important;
}

.network-map-stage:fullscreen .map-legend-pill,
.network-map-stage.is-fullscreen-map .map-legend-pill {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  z-index: 1000000 !important;
}

/* Neutralise l'ancien fullscreen global */
.hero-network-layout.is-network-fullscreen,
.move-map-module.is-network-fullscreen {
  display: block !important;
  background: transparent !important;
}
	
	
	
	
	
	
/* =========================================================
   M'SAFARA — Sélection arrêt premium + bus dynamique
   Ne touche pas au background global
========================================================= */

.premium-stop-overlay{
  position:absolute;
  z-index:80;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.premium-stop-radar{
  position:absolute;
  inset:-50px;
  border-radius:999px;
  border:3px solid var(--line-color);
  animation:premiumRadar 1.6s ease-out infinite;
  box-shadow:
    0 0 20px var(--line-color),
    0 0 60px color-mix(in srgb,var(--line-color) 70%,transparent);
}

.premium-stop-pin{
  position:relative;
  width:76px;
  height:76px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,#fff 0 32%,var(--line-color) 34% 100%);
  color:#fff;
  font-size:1.45rem;
  font-weight:900;
  box-shadow:
    0 0 0 10px color-mix(in srgb,var(--line-color) 18%,transparent),
    0 0 35px var(--line-color),
    0 20px 50px rgba(5,15,45,.22);
}

.premium-stop-card{
  position:absolute;
  left:96px;
  top:50%;
  transform:translateY(-50%);
  min-width:320px;

  padding:22px 24px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      rgba(17,27,70,.96),
      rgba(42,28,95,.92)
    );

  border:1px solid color-mix(in srgb,var(--line-color) 65%,white);

  box-shadow:
    0 25px 60px rgba(7,18,50,.26),
    0 0 40px color-mix(in srgb,var(--line-color) 45%,transparent);

  backdrop-filter:blur(18px);

  color:#fff;
}

.premium-stop-card::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  transform:translateY(-50%);

  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-right:18px solid rgba(42,28,95,.92);
}

.premium-stop-card span{
  display:block;
  margin-bottom:8px;

  color:var(--line-color);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
}

.premium-stop-card strong{
  display:block;

  font-size:2rem;
  line-height:1;

  font-weight:950;
}

.premium-stop-card small{
  display:inline-flex;

  margin-top:14px;
  padding:7px 14px;

  border-radius:999px;

  background:rgba(255,255,255,.12);

  font-weight:800;
}

.network-route.is-active{
  stroke-dasharray:18 12;
  animation:premiumFlow 1s linear infinite;

  filter:
    drop-shadow(0 0 12px var(--line-color))
    drop-shadow(0 0 30px color-mix(in srgb,var(--line-color) 70%,transparent));
}

.network-route-bus{
  animation:premiumBus 2s ease-in-out infinite;

  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,.24))
    drop-shadow(0 0 24px rgba(255,184,0,.72));
}

@keyframes premiumRadar{
  0%{
    opacity:.95;
    transform:scale(.4);
  }

  100%{
    opacity:0;
    transform:scale(1.8);
  }
}

@keyframes premiumFlow{
  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:-60;
  }
}

@keyframes premiumBus{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}
	
	
	
	
.network-map-stage {
  position: relative !important;
  overflow: hidden !important;
}

.premium-stop-overlay {
  position: absolute;
  z-index: 90;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.premium-stop-beam {
  position: absolute;
  width: 180px;
  height: 3px;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--line-color), rgba(255,255,255,.85), transparent);
  box-shadow: 0 0 18px var(--line-color);
}

.premium-stop-radar {
  position: absolute;
  inset: -52px;
  border-radius: 999px;
  border: 3px solid var(--line-color);
  box-shadow:
    0 0 24px var(--line-color),
    0 0 70px color-mix(in srgb, var(--line-color) 70%, transparent);
}

.premium-stop-radar--one {
  animation: premiumRadar 1.5s ease-out infinite;
}

.premium-stop-radar--two {
  animation: premiumRadar 1.5s ease-out infinite .45s;
}

.premium-stop-pin {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 22%, var(--line-color) 24% 100%);
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--line-color) 18%, transparent),
    0 0 36px var(--line-color),
    0 24px 55px rgba(8, 22, 55, .30);
}

.premium-stop-pin span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111b46;
  color: #fff;
  font-weight: 950;
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

.premium-stop-card {
  position: absolute;
  left: 112px;
  top: 50%;
  transform: translateY(-50%);
  width: min(360px, 42vw);
  padding: 22px 24px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--line-color) 30%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(8,20,55,.96), rgba(36,24,88,.94));
  border: 1px solid color-mix(in srgb, var(--line-color) 70%, white);
  box-shadow:
    0 28px 70px rgba(8,20,55,.32),
    0 0 44px color-mix(in srgb, var(--line-color) 50%, transparent);
  backdrop-filter: blur(18px);
}

.premium-stop-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.premium-stop-card__top span {
  color: var(--line-color);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .17em;
}

.premium-stop-card__top b {
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--line-color);
  color: #fff;
}

.premium-stop-card strong {
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 2.25rem);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.04em;
}

.premium-stop-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.premium-stop-card__meta small {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-weight: 850;
}

.network-route.is-active {
  stroke-dasharray: 18 12;
  animation: premiumRouteFlow 1s linear infinite;
  filter:
    drop-shadow(0 0 12px var(--line-color))
    drop-shadow(0 0 28px color-mix(in srgb, var(--line-color) 65%, transparent));
}

.network-route-bus {
  pointer-events: none;
  filter:
    drop-shadow(0 18px 18px rgba(8,20,55,.25))
    drop-shadow(0 0 25px rgba(250,180,0,.75));
}

.network-detail-panel .network-stop-row.is-current,
.network-detail-panel .network-stop-row.is-active-stop {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line-color) 18%, white), #fff) !important;
  border-color: var(--line-color) !important;
  box-shadow:
    0 20px 45px color-mix(in srgb, var(--line-color) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--line-color) 48%, white) !important;
}

@keyframes premiumRadar {
  0% { opacity: .9; transform: scale(.45); }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes premiumRouteFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -60; }
}
	
	

	
	
	
.network-stop{
  transform-box: fill-box;
  transform-origin: center;
}

.network-stop.is-current,
.network-stop.is-active-stop{
  animation: premiumStopFloat 1.4s ease-in-out infinite;
}

.network-stop.is-current .network-stop-dot,
.network-stop.is-active-stop .network-stop-dot{
  fill: var(--stop-color) !important;
  stroke: #fff !important;
  stroke-width: 10 !important;
  filter:
    drop-shadow(0 0 12px var(--stop-color))
    drop-shadow(0 0 30px var(--stop-color)) !important;
}

.network-stop-radar-svg{
  fill: none !important;
  stroke: var(--stop-color) !important;
  stroke-width: 6 !important;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px var(--stop-color))
    drop-shadow(0 0 24px var(--stop-color));
  transform-box: fill-box;
  transform-origin: center;
}

.network-stop-radar-svg--a{
  animation: networkStopRadarSvg 1.55s ease-out infinite;
}

.network-stop-radar-svg--b{
  animation: networkStopRadarSvg 1.55s ease-out infinite .45s;
}

.network-stop-label.is-premium-label,
.network-stop.is-current .network-stop-label,
.network-stop.is-active-stop .network-stop-label{
  fill: #fff !important;
  stroke: #071326 !important;
  stroke-width: 8 !important;
  paint-order: stroke;
  filter:
    drop-shadow(0 0 8px var(--stop-color))
    drop-shadow(0 0 22px var(--stop-color));
  animation: premiumStopNameGlow 1.25s ease-in-out infinite;
}

@keyframes networkStopRadarSvg{
  0%{
    opacity: .95;
    transform: scale(.45);
  }
  100%{
    opacity: 0;
    transform: scale(2.25);
  }
}

@keyframes premiumStopFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-4px) scale(1.08); }
}

@keyframes premiumStopNameGlow{
  0%,100%{ opacity:1; }
  50%{ opacity:.78; }
}
	
	.network-route-bus-premium{
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  filter:
    drop-shadow(0 18px 18px rgba(7,19,38,.28))
    drop-shadow(0 0 28px color-mix(in srgb, var(--line-color) 70%, transparent));
}

.network-route-bus-img{
  transform-origin:center;
}

.network-route-bus-glow{
  fill:color-mix(in srgb, var(--line-color) 25%, transparent);
  stroke:var(--line-color);
  stroke-width:4;
  opacity:.75;
  filter:drop-shadow(0 0 24px var(--line-color));
}

.network-route-bus-premium.is-departing .network-route-bus-img{
  animation:busDepartureBoost .55s ease-out infinite;
}

.network-route-bus-premium.is-arriving .network-route-bus-img{
  animation:busSlowArrival .75s ease-in-out infinite;
}

.network-route-bus-premium.is-stopped .network-route-bus-glow{
  animation:busStopPulse 1.4s ease-out infinite;
}

@keyframes busDepartureBoost{
  0%,100%{ transform:translateX(0) scale(1); }
  50%{ transform:translateX(8px) scale(1.04); }
}

@keyframes busSlowArrival{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-4px); }
}

@keyframes busStopPulse{
  0%{ opacity:.85; transform:scale(.55); }
  100%{ opacity:0; transform:scale(1.45); }
}
	
	
	

.network-route-bus-premium{
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 8px 10px rgba(7,19,38,.18));
}

.network-route-bus-aura{
  fill:var(--line-color);
  opacity:.14;
  stroke:var(--line-color);
  stroke-width:3;
  filter:drop-shadow(0 0 14px var(--line-color));
}

.network-route-bus-img{
  filter:none !important;
  transform-origin:center;
}

.network-route-bus-premium.is-departing .network-route-bus-img{
  animation:busRollStart .72s ease-in-out infinite;
}

.network-route-bus-premium.is-arriving .network-route-bus-img{
  animation:busBrake .9s ease-in-out infinite;
}

.network-route-bus-premium.is-stopped .network-route-bus-aura{
  animation:busParkPulse 1.45s ease-out infinite;
}

@keyframes busRollStart{
  0%,100%{ transform:translateX(0) scale(1); }
  50%{ transform:translateX(6px) scale(1.025); }
}

@keyframes busBrake{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-5px); }
}

@keyframes busParkPulse{
  0%{ opacity:.22; transform:scale(.75); }
  100%{ opacity:0; transform:scale(1.65); }
}

	
	.network-route-bus-premium,
.network-route-bus-img{
  filter: none !important;
  box-shadow: none !important;
}

.network-route-bus-glow{
  display: none !important;
}

.network-route-bus-aura{
  fill: transparent !important;
  stroke: var(--line-color) !important;
  stroke-width: 3 !important;
  opacity: .22 !important;
  filter: none !important;
}
	
	.network-route-bus-aura,
.network-route-bus-glow{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

.network-route-bus-premium{
  filter:none !important;
}

.network-route-bus-img{
  filter:none !important;
}
	
	
.network-map-stop-card{
  z-index:90 !important;
  pointer-events:auto;
}

.network-stop-future-card{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  width:260px;
  min-height:82px;
  padding:12px 40px 12px 12px;
  border-radius:20px;
  background:linear-gradient(145deg, rgba(7,19,38,.96), rgba(16,42,92,.94)) !important;
  border:1px solid color-mix(in srgb, var(--line-color) 55%, rgba(255,255,255,.24));
  box-shadow:
    0 18px 42px rgba(7,19,38,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff !important;
  backdrop-filter:blur(18px) saturate(150%);
  overflow:hidden;
}

.network-stop-future-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--line-color) 38%, transparent), transparent 45%),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto, 18px 18px, 18px 18px;
  pointer-events:none;
}

.network-stop-future-card__pin{
  position:relative;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:12px;
 
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--line-color) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.65);
  overflow:hidden;
}

.network-stop-future-card__pin::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:url("/assets/img/icons/bus-msafara.png") center / 26px auto no-repeat;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

.network-stop-future-card__body{
  position:relative;
  z-index:2;
  display:grid;
  gap:3px;
  min-width:0;
}

.network-stop-future-card__body span{
  width:max-content;
  max-width:100%;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.network-stop-future-card__body strong{
  color:#fff !important;
  font-size:14px;
  line-height:1.1;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.network-stop-future-card__body small{
  color:rgba(255,255,255,.74) !important;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

.network-stop-future-card__close{
  position:absolute;
  z-index:4;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
}

.network-stop-future-card__close:hover{
  background:#e30613;
}


#plan-du-reseau .network-map-stop-card .network-stop-future-card{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  width:260px !important;
  min-height:82px !important;
  padding:12px 40px 12px 12px !important;
  border-radius:20px !important;
  background:linear-gradient(145deg, rgba(7,19,38,.98), rgba(16,42,92,.96)) !important;
  color:#fff !important;
  overflow:hidden !important;
}

#plan-du-reseau .network-stop-future-card__body strong,
#plan-du-reseau .network-stop-future-card__body span,
#plan-du-reseau .network-stop-future-card__body small{
  color:#fff !important;
}


.network-tooltip {
  display: none !important;
}

.smart-stop-rollover {
  position: absolute;
  z-index: 120;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.smart-stop-rollover.is-visible {
  opacity: 1;
}

.smart-stop-rollover__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--line-color);
  box-shadow:
    0 0 18px var(--line-color),
    0 0 38px color-mix(in srgb, var(--line-color) 65%, transparent);
  animation: smartStopPulse 1.15s ease-out infinite;
}

.smart-stop-rollover__card {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  min-width: 210px;
  padding: 13px 15px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--line-color) 34%, transparent), transparent 48%),
    linear-gradient(135deg, rgba(7,19,38,.96), rgba(20,35,85,.93));
  border: 1px solid color-mix(in srgb, var(--line-color) 62%, white);
  box-shadow:
    0 18px 44px rgba(7,19,38,.25),
    0 0 26px color-mix(in srgb, var(--line-color) 42%, transparent);
  backdrop-filter: blur(16px);
}

.smart-stop-rollover__card span {
  display: block;
  color: var(--line-color);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.smart-stop-rollover__card strong {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 950;
}

.smart-stop-rollover__card small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 850;
}

@keyframes smartStopPulse {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(.55);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}

/* Future card visible uniquement au rollover */
.network-stop-future-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(.96) !important;
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease !important;
}

.network-stop:hover .network-stop-future-card,
.network-stop:focus-within .network-stop-future-card,
.network-stop.is-hover .network-stop-future-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Supprime les numéros techniques isolés sur la carte */
.network-shape-points,
.network-shape-point,
.network-curve-point,
.network-shape-point text,
.network-curve-point text {
  display: none !important;
}

.network-tooltip {
  display: none !important;
}

.network-stop-future-card {
  display: none !important;
}

.network-stop:hover .network-stop-future-card {
  display: block !important;
}

.network-stop-premium-index,
.premium-radar-core strong {
  display: none !important;
}




/* =========================================================
   M'SAFARA — NEO MATRIX LED SYSTEM
========================================================= */

.move-page {
  --cockpit-line: #22d3ee;
}

/* PANNEAUX PRINCIPAUX */
.cockpit-trip-segment,
.cockpit-times-board,
.cockpit-trip-search{

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--cockpit-line) 22%, transparent),
      transparent 32%),

    linear-gradient(
      180deg,
      rgba(6,16,28,.96),
      rgba(2,6,14,.985)
    );

  border: 1px solid
    color-mix(in srgb, var(--cockpit-line) 42%, rgba(255,255,255,.12));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 30px color-mix(in srgb, var(--cockpit-line) 18%, transparent),
    0 30px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    border-color .45s ease,
    box-shadow .45s ease,
    background .45s ease;
}

/* GRILLE MATRIX */
.cockpit-trip-segment::before,
.cockpit-times-board::before,
.network-detail-panel::before,
.cockpit-trip-search::before,
.hero-network-thermometer-shell::before {

  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 8px
    );

  opacity: .22;
}

/* LED LINE */
.cockpit-trip-segment::after,
.cockpit-times-board::after,
.network-detail-panel::after,
.cockpit-trip-search::after,
.hero-network-thermometer-shell::after {

  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cockpit-line),
      transparent
    );

  box-shadow:
    0 0 18px var(--cockpit-line),
    0 0 38px var(--cockpit-line);

  animation: cockpitLedMove 5s linear infinite;
}

@keyframes cockpitLedMove {
  0% {
    transform: translateX(-35%);
  }
  100% {
    transform: translateX(135%);
  }
}

/* MODULE ACTIF = COULEUR DE LA LIGNE */
.move-page[data-active-line="M1"] { --cockpit-line: #e30613; }
.move-page[data-active-line="M3"] { --cockpit-line: #fab400; }
.move-page[data-active-line="M20"] { --cockpit-line: #944091; }
.move-page[data-active-line="M21"] { --cockpit-line: #51beca; }
.move-page[data-active-line="B1"],
.move-page[data-active-line="B2"] { --cockpit-line: #8b8b8b; }

/* TITRES / BADGES */
.cockpit-times-board__head strong,
.cockpit-trip-search__head strong,
.cockpit-trip-segment__head strong {
  color: #f4ffff;
  text-shadow: 0 0 16px color-mix(in srgb, var(--cockpit-line) 42%, transparent);
}

.cockpit-stop-focus-head span,
.cockpit-trip-segment__head > span,
.network-detail-line-code,
.cockpit-stop-number {
  background: var(--cockpit-line);
  color: #05070d;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--cockpit-line) 70%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

/* PILULES HORAIRES */
.cockpit-time-pill,
.cockpit-trip-stop-cell__content b {
  color: #ffffff;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cockpit-line) 72%, #ffffff 8%),
      color-mix(in srgb, var(--cockpit-line) 48%, #000000 30%)
    );
  border: 1px solid color-mix(in srgb, var(--cockpit-line) 72%, white);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--cockpit-line) 42%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* CARTES ARRÊTS */
.cockpit-trip-stop-cell {
  border-color: color-mix(in srgb, var(--cockpit-line) 28%, rgba(255,255,255,.12));
}

.cockpit-trip-stop-cell:hover,
.cockpit-trip-stop-cell.is-selected,
.cockpit-trip-stop-cell.is-triggered {
  border-color: var(--cockpit-line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cockpit-line) 45%, transparent),
    0 0 26px color-mix(in srgb, var(--cockpit-line) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.cockpit-trip-stop-cell__index {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      color-mix(in srgb, var(--cockpit-line) 55%, #dffcff)
    );
  color: #05070d;
}

/* TABLEAUX */
.cockpit-times-table th {
  color: color-mix(in srgb, var(--cockpit-line) 78%, white);
}

.cockpit-times-table tbody tr:hover {
  background: color-mix(in srgb, var(--cockpit-line) 12%, transparent);
}

/* TABS */
.cockpit-times-board__tabs button.is-active {
  color: #05070d;
  background: var(--cockpit-line);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--cockpit-line) 58%, transparent);
}

/* Numéro d’arrêt + badge ligne dynamiques */
.cockpit-stop-number,
.cockpit-stop-focus-head > span,
.cockpit-trip-segment__head > span {
  color: #05070d !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--cockpit-line) 62%, #eaffff) 42%,
      var(--cockpit-line) 100%
    ) !important;

  border: 1px solid color-mix(in srgb, var(--cockpit-line) 72%, white);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cockpit-line) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--cockpit-line) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.22);

  text-shadow: none;
}

/* Version active / sélectionnée encore plus LED */
.cockpit-times-direction--stop-focus .cockpit-stop-number,
.cockpit-stop-focus-head:hover > span,
.cockpit-trip-segment:hover .cockpit-trip-segment__head > span {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cockpit-line) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--cockpit-line) 75%, transparent),
    0 0 42px color-mix(in srgb, var(--cockpit-line) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* Texte M1/M3 dans le bouton horaire */
.cockpit-stop-focus-head > span {
  min-width: 44px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Numéro d’arrêt */
.cockpit-stop-number {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 950;
}

/* =========================================================
   M'SAFARA — TIME PILLS LED PLUS
   Plus opaque, plus lisible, plus premium
========================================================= */

.cockpit-times-table td {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.085);
}

.cockpit-time-pill {
  color: #ffffff !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cockpit-line) 88%, #ffffff 12%) 0%,
      color-mix(in srgb, var(--cockpit-line) 72%, #06101f 28%) 48%,
      color-mix(in srgb, var(--cockpit-line) 58%, #000000 42%) 100%
    ) !important;

  border: 1px solid
    color-mix(in srgb, var(--cockpit-line) 86%, #ffffff 14%) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 14px color-mix(in srgb, var(--cockpit-line) 62%, transparent),
    0 0 34px color-mix(in srgb, var(--cockpit-line) 36%, transparent),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 0 rgba(0,0,0,.28);

  opacity: 1;
  font-weight: 950;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 12px rgba(255,255,255,.25);
}

/* Cellule entière plus visible autour de l'heure */
.cockpit-times-table td:has(.cockpit-time-pill) {
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--cockpit-line) 18%, transparent),
      rgba(255,255,255,.035) 68%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 18px color-mix(in srgb, var(--cockpit-line) 10%, transparent);
}

/* Hover très classe */
.cockpit-times-table td:has(.cockpit-time-pill):hover {
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--cockpit-line) 32%, transparent),
      rgba(255,255,255,.06) 70%
    );
}

.cockpit-times-table td:hover .cockpit-time-pill {
  transform: translateY(-1px) scale(1.035);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 18px color-mix(in srgb, var(--cockpit-line) 72%, transparent),
    0 0 46px color-mix(in srgb, var(--cockpit-line) 46%, transparent),
    inset 0 1px 0 rgba(255,255,255,.48);
}

/* Les autres badges aussi plus opaques */
.cockpit-stop-number,
.cockpit-stop-focus-head > span,
.cockpit-trip-segment__head > span,
.cockpit-trip-stop-cell__index,
.cockpit-trip-stop-cell__content b {
  opacity: 1 !important;
  filter: saturate(1.18) contrast(1.08);
}

/* Heures : contour LED uniquement, sans fond */
.cockpit-time-pill {
  background: transparent !important;
  color: color-mix(in srgb, var(--cockpit-line) 82%, #ffffff) !important;

  border: 1px solid
    color-mix(in srgb, var(--cockpit-line) 48%, #ffffff 12%) !important;

  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cockpit-line) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--cockpit-line) 42%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--cockpit-line) 14%, transparent) !important;

  text-shadow:
    0 0 10px color-mix(in srgb, var(--cockpit-line) 55%, transparent);
}

/* Supprime aussi le fond de la cellule autour */
.cockpit-times-table td:has(.cockpit-time-pill) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover : garde seulement contour lumineux */
.cockpit-times-table td:hover .cockpit-time-pill {
  background: transparent !important;
  border-color: #ffffff !important;

  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cockpit-line) 50%, transparent),
    0 0 18px color-mix(in srgb, var(--cockpit-line) 70%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--cockpit-line) 22%, transparent) !important;
}

/* Heures : texte blanc, contour LED couleur ligne */
.cockpit-time-pill {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  text-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 14px color-mix(in srgb, var(--cockpit-line) 42%, transparent) !important;
}


/* =========================================================
   TRAJET RAPIDE — départ / arrivée intelligents
========================================================= */

.cockpit-trip-search {
  --trip-from: #43ffb4;
  --trip-to: #ffd84d;
  --trip-active: var(--line-color, var(--cockpit-line, #22d3ee));
}

.cockpit-trip-field--from {
  --field-color: var(--trip-from);
}

.cockpit-trip-field--to {
  --field-color: var(--trip-to);
}

.cockpit-trip-field {
  position: relative;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--field-color) 42%, rgba(255,255,255,.14));
  background:
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb, var(--field-color) 18%, transparent),
      transparent 44%),
    rgba(255,255,255,.035);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--field-color) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.cockpit-trip-field small {
  color: color-mix(in srgb, var(--field-color) 78%, #ffffff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--field-color) 42%, transparent);
}

.cockpit-trip-field select {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--field-color) 34%, rgba(255,255,255,.18));
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 18px color-mix(in srgb, var(--field-color) 12%, transparent);
}

.cockpit-trip-field:focus-within {
  border-color: var(--field-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--field-color) 42%, transparent),
    0 0 32px color-mix(in srgb, var(--field-color) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Départ / arrivée suivent la ligne active intelligemment */
.cockpit-trip-search[data-active-line="M1"] {
  --trip-from: #ff5b5b;
  --trip-to: #ffcf5a;
}

.cockpit-trip-search[data-active-line="M3"] {
  --trip-from: #ffe071;
  --trip-to: #ffae32;
}

.cockpit-trip-search[data-active-line="M20"] {
  --trip-from: #c984ff;
  --trip-to: #ff72d8;
}

.cockpit-trip-search[data-active-line="M21"] {
  --trip-from: #7cf7ff;
  --trip-to: #55d9ff;
}

.cockpit-trip-search[data-active-line="B1"],
.cockpit-trip-search[data-active-line="B2"] {
  --trip-from: #d9d9d9;
  --trip-to: #9fb7c8;
}

/* Supprime cadre coloré jaune/vert autour des selects */
.cockpit-trip-field,
.cockpit-trip-field--from,
.cockpit-trip-field--to {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cockpit-trip-field::before,
.cockpit-trip-field::after,
.cockpit-trip-field--from::before,
.cockpit-trip-field--from::after,
.cockpit-trip-field--to::before,
.cockpit-trip-field--to::after {
  display: none !important;
  content: none !important;
}

/* Garde seulement le select propre */
.cockpit-trip-field select {
  border: 1px solid rgba(15, 35, 60, .12) !important;
  box-shadow: 0 10px 24px rgba(20, 40, 70, .08) !important;
}

/* Badge ligne M1/M3/M20... dynamique */
.cockpit-trip-segment__head > span,
.cockpit-stop-focus-head > span {
  background: var(--line-color, var(--cockpit-line, #22d3ee)) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--line-color, var(--cockpit-line)) 70%, #ffffff);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--line-color, var(--cockpit-line)) 55%, transparent),
    0 0 34px color-mix(in srgb, var(--line-color, var(--cockpit-line)) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Départ = accent vert discret */
.cockpit-trip-segment:first-child .cockpit-trip-segment__head > span {
  box-shadow:
    0 0 14px color-mix(in srgb, var(--line-color, var(--cockpit-line)) 55%, transparent),
    0 0 0 2px rgba(67,255,180,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Arrivée = accent doré discret */
.cockpit-trip-segment:last-child .cockpit-trip-segment__head > span {
  box-shadow:
    0 0 14px color-mix(in srgb, var(--line-color, var(--cockpit-line)) 55%, transparent),
    0 0 0 2px rgba(255,216,77,.30),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Supprime la ligne LED horizontale qui coulisse */
.cockpit-trip-segment::after,
.cockpit-times-board::after,
.network-detail-panel::after,
.cockpit-trip-search::after,
.hero-network-thermometer-shell::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}
.hero-network-layout:fullscreen,
.hero-network-layout.is-network-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  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) 340px !important;
  gap: 0 !important;
  background: #061b3d !important;
  overflow: hidden !important;
}

.hero-network-layout:fullscreen .hero-network-layout__controls,
.hero-network-layout.is-network-fullscreen .hero-network-layout__controls {
  grid-column: 1 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  z-index: 20 !important;
}

.hero-network-layout:fullscreen .hero-network-layout__map,
.hero-network-layout.is-network-fullscreen .hero-network-layout__map {
  grid-column: 2 !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

.hero-network-layout:fullscreen .hero-network-layout__detail,
.hero-network-layout.is-network-fullscreen .hero-network-layout__detail {
  grid-column: 3 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  z-index: 20 !important;
}

.hero-network-layout:fullscreen .network-map-stage,
.hero-network-layout.is-network-fullscreen .network-map-stage {
  height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
}

.network-arrival-radar {
  fill: var(--stop-color, #2e4b9b);
  stroke: #fff;
  stroke-width: 3;
  pointer-events: none;
}

.network-stop.is-arrival-radar .network-stop-dot {
  fill: var(--stop-color, #2e4b9b);
  stroke: #fff;
  stroke-width: 8;
}

.network-stop-label--arrival-focus {
  fill: #ffffff !important;
  stroke: var(--stop-color, #2e4b9b) !important;
  stroke-width: 8 !important;
  paint-order: stroke;
  filter:
    drop-shadow(0 0 8px var(--stop-color, #2e4b9b))
    drop-shadow(0 0 18px rgba(255,255,255,.85));
  animation: arrivalLabelFocus 1.4s ease-in-out infinite;
}

.network-stop.is-arrival-radar .network-stop-label {
  font-size: 31px;
  letter-spacing: .04em;
}

@keyframes arrivalLabelFocus {
  0%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  50% {
    opacity: .82;
    transform: translateY(-4px) scale(1.08);
  }
}


@media (max-width: 760px) {
  .move-page .network-detail-panel .network-stop-row {
    touch-action: manipulation;
  }

  .move-page .hero-network-map,
  .move-page .hero-network-layout__map,
  .move-page [data-network-stage] {
    scroll-margin-top: 88px;
  }
}


/* Stop animations réseau après 3 sec */
.network-line-group.is-animation-paused .network-route,
.network-map-stage.is-animation-paused .network-route.is-active,
.network-map-stage.is-animation-paused .network-arrival-radar,
.network-map-stage.is-animation-paused .network-stop-radar-svg,
.network-map-stage.is-animation-paused .network-stop.is-current,
.network-map-stage.is-animation-paused .network-stop.is-active-stop,
.network-map-stage.is-animation-paused .network-stop-label,
.network-map-stage.is-animation-paused .network-route-bus-premium,
.network-map-stage.is-animation-paused .network-route-bus-img,
.network-map-stage.is-animation-paused .network-route-bus-aura,
.network-map-stage.is-animation-paused .network-route-bus-glow {
  animation: none !important;
  transition: none !important;
}

/* Sécurité si tu ajoutes la classe sur un groupe ligne */
.network-line-group.is-animation-paused .network-route,
.network-line-group.is-animation-paused .network-route-underlay {
  animation: none !important;
}

/* Radar figé proprement */
.network-map-stage.is-animation-paused .network-arrival-radar,
.network-map-stage.is-animation-paused .network-stop-radar-svg {
  opacity: 0 !important;
}

/* Texte arrêt stable */
.network-map-stage.is-animation-paused .network-stop-label {
  transform: none !important;
}