.transit-map { --tm-blue: #244cf4; --tm-red: #a72b3b; --tm-ink: #15171c; --tm-muted: #565d68; --tm-line: #ccd0d8; color: var(--tm-ink); container: transit / inline-size; font-family: Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.6; }
.transit-map *, .transit-map *::before, .transit-map *::after { box-sizing: border-box; }
.transit-map ::selection { background: #f4f640; color: #15171c; }
.transit-map h2 { margin: 0; font-size: clamp(26px, 3.3vw, 34px); font-weight: 900; line-height: 1.3; letter-spacing: -.025em; }
.transit-map p { margin: 0; }
.transit-map .tm-date { margin: 12px 0 20px; font-size: 14px; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.tm-summary { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-block: 1px solid var(--tm-ink); }
.tm-line-id { display: inline-grid; place-items: center; flex: 0 0 52px; height: 52px; background: var(--tm-blue); color: white; font-weight: 900; font-size: 24px; }
.tm-summary strong { display: block; color: var(--tm-red); font-size: 19px; line-height: 1.4; }
.tm-summary span:not(.tm-line-id) { display: block; font-size: 15px; margin-top: 5px; }
.tm-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 20px 0 0; font-size: 14px; }
.tm-legend span { display: inline-flex; align-items: center; gap: 9px; }
.tm-legend i { display: inline-block; width: 30px; border-top: 4px solid var(--tm-blue); }
.tm-legend .tm-broken { border-top: 4px dashed var(--tm-red); }
.tm-track { position: relative; min-height: 278px; padding: 0; margin: 16px 0 0; list-style: none; }
.tm-track::before, .tm-track::after { content: ''; position: absolute; left: 6%; right: 18.57%; top: 126px; border-top: 5px dashed var(--tm-red); }
.tm-track::after { left: 81.43%; right: 6%; border-top: 5px solid var(--tm-blue); }
.tm-track li { position: absolute; top: 104px; left: var(--stop-x); width: 44px; transform: translateX(-50%); }
.tm-stop { appearance: none; display: block; width: 44px; height: 48px; padding: 0; background: transparent; color: var(--tm-ink); border: 0; cursor: pointer; font: inherit; text-align: center; }
.tm-stop:hover .tm-name, .tm-stop[aria-pressed='true'] .tm-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tm-stop:focus-visible { outline: 3px solid var(--tm-blue); outline-offset: 5px; }
.tm-marker { position: absolute; top: 13px; left: 12px; width: 22px; height: 22px; border: 3px solid var(--tm-red); border-radius: 50%; background: white; }
.tm-marker::before, .tm-marker::after { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 2px; background: var(--tm-red); transform: rotate(45deg); }
.tm-marker::after { transform: rotate(-45deg); }
.tm-running .tm-marker { border-color: var(--tm-blue); }
.tm-running .tm-marker::before, .tm-running .tm-marker::after { display: none; }
.tm-stop[aria-pressed='true'] .tm-marker { outline: 3px solid var(--tm-ink); outline-offset: 4px; }
.tm-label { position: absolute; bottom: 58px; left: 50%; width: 144px; transform: translateX(-50%); font-size: 14px; line-height: 1.4; }
.tm-track li:nth-child(even) .tm-label { bottom: auto; top: 63px; }
.tm-track li:first-child .tm-label { left: 2px; transform: none; text-align: left; }
.tm-track li:last-child .tm-label { left: auto; right: 0; transform: none; text-align: right; }
.tm-name { display: block; font-weight: 750; overflow-wrap: anywhere; }
.tm-state { display: block; margin-top: 5px; color: var(--tm-red); font-size: 12px; }
.tm-running .tm-state { color: #1639c7; }
.transit-map .tm-map-note { margin-top: -12px; color: var(--tm-muted); font-size: 13px; }
.tm-station-info { margin-top: 22px; padding: 19px 22px; background: #edf1ff; }
.transit-map .tm-station-title { font-size: 19px; font-weight: 800; margin-bottom: 5px; }
.transit-map .tm-station-detail { font-size: 15px; }
.tm-network { margin-top: 28px; }
.transit-map .tm-network h3 { font-size: 19px; margin: 0 0 10px; }
.tm-network dl { margin: 0; }
.tm-network dl > div { display: grid; grid-template-columns: 130px 110px minmax(0,1fr); align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--tm-line); font-size: 14px; }
.tm-network dt { font-weight: 800; }
.tm-network dd { margin: 0; }
.tm-network dd:last-child { color: var(--tm-muted); }
.transit-map .tm-source { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tm-ink); color: var(--tm-muted); font-size: 13px; }
.tm-source a, .tm-station-info a { color: #1639c7; text-decoration: underline; text-underline-offset: 4px; }
.tm-source a:focus-visible { outline: 3px solid var(--tm-blue); outline-offset: 4px; }
.tm-source span { display: block; margin-top: 6px; }
.detail-section.transit-section { max-width: 1040px; margin: 52px auto; }
@container transit (max-width: 700px) {
  .tm-summary { align-items: flex-start; gap: 12px; }
  .tm-summary strong { font-size: 17px; }
  .tm-track { min-height: 0; margin: 20px 0 12px; padding: 0; }
  .tm-track::before, .tm-track::after { display: none; }
  .tm-track li { position: relative; top: auto; left: auto; width: 100%; transform: none; min-height: 73px; }
  .tm-track li::before { content: ''; position: absolute; top: 32px; bottom: -32px; left: 22px; border-left: 4px dashed var(--tm-red); }
  .tm-track li.tm-running::before { border-left-style: solid; border-color: var(--tm-blue); }
  .tm-track li:last-child { min-height: 64px; }
  .tm-track li:last-child::before { display: none; }
  .tm-track li:nth-last-child(2) { min-height: 102px; }
  .tm-track li:nth-last-child(2)::after { content: attr(data-omitted); position: absolute; top: 66px; left: 46px; color: var(--tm-muted); font-size: 12px; }
  .tm-stop { width: 100%; min-height: 64px; height: auto; text-align: left; padding: 7px 0 7px 50px; }
  .tm-marker { top: 20px; left: 13px; }
  .tm-label, .tm-track li:nth-child(even) .tm-label, .tm-track li:first-child .tm-label, .tm-track li:last-child .tm-label { position: static; display: block; transform: none; width: auto; text-align: left; font-size: 15px; }
  .tm-state { font-size: 12px; margin-top: 3px; }
  .transit-map .tm-map-note { margin-top: 8px; }
  .tm-network dl > div { grid-template-columns: 110px minmax(0,1fr); gap: 3px 12px; }
  .tm-network dd:last-child { grid-column: 2; }
  .tm-station-info { padding: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tm-station-info { transition: background-color 180ms ease-out; }
}

#toulouse-t1-nov4-map .toulouse-traffic-link {display:inline-flex;align-items:center;min-height:44px;max-width:100%;color:#1639c7;text-decoration:underline;text-underline-offset:4px;}
#toulouse-t1-nov4-map .toulouse-traffic-link:focus-visible {outline:2px solid #244cf4;outline-offset:3px;}