.home-traffic-premium {
  position: relative;
}
.home-traffic-title-row {
  position: relative;
  min-width: 0;
}
.home-traffic-title-row h2 {
  margin-top: 0;
}

/* Palette identique aux cartes de l'onglet Perturbations. */
.home-major-alert-badge,
.home-major-alert-item {
  --alert-color: #a7a728;
  --alert-bg: rgba(34, 34, 10, .94);
}
.home-major-alert-badge[data-level="critical"],
.home-major-alert-item[data-level="critical"] {
  --alert-color: #dc3545;
  --alert-bg: rgba(57, 11, 17, .95);
}
.home-major-alert-badge[data-level="warning"],
.home-major-alert-item[data-level="warning"] {
  --alert-color: #ffc107;
  --alert-bg: rgba(57, 42, 3, .95);
}
.home-major-alert-badge[data-level="delay"],
.home-major-alert-item[data-level="delay"] {
  --alert-color: #fd7e14;
  --alert-bg: rgba(57, 27, 4, .95);
}
.home-major-alert-badge[data-level="info"],
.home-major-alert-item[data-level="info"] {
  --alert-color: #17a2b8;
  --alert-bg: rgba(5, 40, 47, .95);
}

.home-major-alert-badge {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto !important;
  min-width: 0 !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  border: 1px solid var(--alert-color) !important;
  border-radius: 6px !important;
  background: var(--alert-bg) !important;
  color: var(--alert-color) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--alert-color) 28%, transparent) !important;
  font: 800 .62rem/1 "Orbitron", system-ui, sans-serif !important;
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
}
.home-major-alert-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.home-major-alert-badge:hover,
.home-major-alert-badge:focus-visible {
  background: color-mix(in srgb, var(--alert-color) 15%, #08141b);
  outline: none;
}
.home-major-alert-badge[hidden] {
  display: none !important;
}
.home-major-alert-modal.is-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 14000 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
.home-major-alert-panel {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: min(620px, calc(100vw - 24px));
  max-height: min(calc(100dvh - 24px), 720px);
  overflow: hidden !important;
  overscroll-behavior: contain;
}
#homeMajorAlertTitle {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 38px 10px 0;
}
#homeMajorAlertClose {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
}
.home-major-alert-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
  margin-top: 0;
  padding: 2px 4px 4px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.home-major-alert-item {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--alert-color);
  border-left-width: 3px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--alert-bg), rgba(13, 25, 31, .97) 72%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--alert-color) 7%, transparent);
}
.home-major-alert-item h4 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  color: var(--alert-color);
  font-size: .98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.home-major-alert-item-icon {
  flex: 0 0 auto;
  line-height: 1.1;
}
.home-major-alert-item p {
  margin: 0;
  color: #d9f6ff;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.home-major-alert-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 10px;
}
.home-major-alert-links a {
  color: #55eaff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .home-traffic-title-row {
    position: relative;
    display: block;
    min-width: 0;
    text-align: center;
  }
  .home-traffic-title-row > h2 {
    width: 100%;
    text-align: center;
  }
  .home-major-alert-badge {
    position: absolute;
    top: -7px;
    right: 0;
    z-index: 4;
    width: auto !important;
    min-width: 21px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: .47rem !important;
    line-height: 1 !important;
    letter-spacing: 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--alert-color) 24%, transparent);
  }
  #homeMajorAlertLabel {
    display: none !important;
  }
  .home-major-alert-badge::before {
    width: 4px;
    height: 4px;
    flex-basis: 4px;
  }
  .home-major-alert-panel {
    width: min(calc(100vw - 16px), 620px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }
  #homeMajorAlertClose {
    top: 10px !important;
    right: 10px !important;
  }
  .home-major-alert-item {
    padding: 11px;
  }
  .home-major-alert-item h4 {
    font-size: .88rem;
  }
}

;

.disruption-description p,
.alert-detail-desc p { margin: .4rem 0; }
.disruption-description a,
.alert-detail-desc a {
  color: #55eaff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.disruption-description a:hover,
.alert-detail-desc a:hover { color: #ffffff; }

;

.disruption-grid,
.disruption-box {
  min-width: 0;
}
.disruption-box {
  overflow: hidden;
}
.disruption-title-text,
.disruption-description,
.alert-detail-desc {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.disruption-trains {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.disruption-train-pill {
  flex: 0 0 auto;
  max-width: 100%;
}
.disruption-more {
  margin-top: 8px;
  min-width: 0;
}
.disruption-more summary {
  color: #55eaff;
  cursor: pointer;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.disruption-description--full {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(85, 234, 255, .25);
}
.disruption-source {
  margin-top: 7px;
  color: #7897a0;
  font-size: .72rem;
  text-align: right;
}

;

#trainInfo td.terminal-arrival-cell,
#trainInfo td.terminal-start-cell { vertical-align: middle; }
#trainInfo .partial-service-label {
  display: block;
  width: max-content;
  max-width: 92px;
  margin: 3px auto 0;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
  text-align: center;
  white-space: normal;
  text-transform: uppercase;
}
#trainInfo .partial-service-label--terminus { color: #ffb21a; }
#trainInfo .partial-service-label--start { color: #55eaff; }
#trainInfo .terminal-partial-stack,
#trainInfo .terminal-arrival-cell .gtfs-retard,
#trainInfo .terminal-start-cell .gtfs-retard {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
#trainInfo .terminal-partial-base {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-decoration-line: line-through !important;
  text-decoration-color: #ffffff !important;
  text-decoration-thickness: 1.4px !important;
  text-shadow: none !important;
  filter: none !important;
}
#trainInfo .terminal-partial-new {
  color: #39a8ff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  text-shadow: 0 0 8px rgba(57,168,255,.72), 0 0 14px rgba(57,168,255,.34) !important;
}

/* Une gare non desservie reste rouge et barrée dans tous les thèmes.
   La couleur ne doit pas dépendre du mode visuel actif. */
#trainInfo td > .deleted {
  color: #ff3045 !important;
  -webkit-text-fill-color: #ff3045 !important;
  font-weight: 900 !important;
  text-decoration-line: line-through !important;
  text-decoration-color: #ff3045 !important;
  text-decoration-thickness: 2px !important;
  opacity: 1 !important;
}

/* Même code couleur dans la fiche : retard orange, terminus bleu, tronçon supprimé rouge. */
#trainDetailStops .lb-train-profile__stop.is-effective-endpoint .lb-train-profile__times s {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
  opacity: 1 !important;
}
#trainDetailStops .lb-train-profile__stop.is-effective-endpoint .lb-train-profile__times b {
  color: #39a8ff !important;
  text-shadow: 0 0 7px rgba(57,168,255,.5) !important;
}
#trainDetailStops .lb-train-profile__stop.is-cancel {
  opacity: .78;
}
#trainDetailStops .lb-train-profile__stop.is-cancel .lb-train-profile__times b,
#trainDetailStops .lb-train-profile__stop.is-cancel .lb-train-profile__stop-name strong {
  color: #8f9aa1 !important;
  text-decoration: line-through !important;
  text-decoration-color: #8f9aa1 !important;
}
#trainDetailStops .lb-train-profile__stop.is-cancel .lb-train-profile__stop-name span {
  color: #c95a60 !important;
}
#trainDetailStops .lb-train-profile__stop.is-cancel .lb-train-profile__dot {
  border-color: #8b262a !important;
  background: #8b262a !important;
  box-shadow: 0 0 0 4px #09202b, 0 0 8px rgba(255,69,69,.32) !important;
}
#trainDetailStops .lb-train-profile__stop.is-cancel .lb-train-profile__delay {
  display: inline-flex;
  width: max-content;
  padding: 2px 6px;
  color: #ff5a5f !important;
  border: 1px solid rgba(255,69,69,.25);
  border-radius: 5px;
  background: rgba(120,16,20,.42);
}
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  #trainInfo .partial-service-label {
    max-width: 74px;
    margin-top: 2px;
    font-size: 7.5px;
    line-height: .95;
  }
}
