/* La Bétaillère — tableau dynamique PRO v1
   Objectif : lecture plus calme, scroll plus fluide et colonne Gare réellement opaque/fixe.
   CSS uniquement : aucune logique métier ni donnée modifiée. */

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo {
  --lb-table-bg: #061722;
  --lb-table-bg-alt: #071b27;
  --lb-table-head: #082331;
  --lb-table-line: rgba(86, 219, 231, .10);
  --lb-table-line-strong: rgba(71, 225, 238, .24);
  --lb-table-sticky: #061722;
  --lb-table-cyan: #4ce9f4;
}

/* Le cadre devient plus net : pas de gros halo permanent, pas de blur coûteux. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .table-scroll {
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid var(--lb-table-line-strong) !important;
  border-radius: 14px !important;
  background: var(--lb-table-bg) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22) !important;
  overscroll-behavior: contain !important;
  touch-action: pan-x pan-y !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--lb-table-bg) !important;
  box-shadow: none !important;
}

/* Pas d'animation sur des dizaines de cellules pendant le scroll. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo :is(tbody tr, th, td) {
  transition: none !important;
}

/* Grille très légère : le contenu prime sur les traits. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody td {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--lb-table-line) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Les cellules métier particulières gardent leur rendu historique (terminus/départ exceptionnel, composition réduite). */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody td:not(.terminal-arrival-cell):not(.terminal-start-cell):not(.reduced-service):not([data-terminal-arrival="1"]):not([data-terminal-start="1"]) {
  border-right: 1px solid rgba(86, 219, 231, .055) !important;
  background: var(--lb-table-bg) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:nth-child(even) td:not(:first-child):not(.terminal-arrival-cell):not(.terminal-start-cell):not(.reduced-service):not([data-terminal-arrival="1"]):not([data-terminal-start="1"]) {
  background: var(--lb-table-bg-alt) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:last-child td {
  border-bottom-color: transparent !important;
}

/* En-tête : compact, opaque, stable pendant le scroll vertical. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  min-height: 50px !important;
  background: linear-gradient(180deg, #0a2a39 0%, var(--lb-table-head) 100%) !important;
  border-right: 1px solid rgba(86, 219, 231, .10) !important;
  border-bottom: 1px solid rgba(76, 233, 244, .28) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo thead .train-num {
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 0 7px rgba(0, 231, 245, .20) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo thead .train-state {
  margin-top: 4px !important;
  opacity: .92;
}

/*
 * FIX IMPORTANT : la colonne Gare est un vrai calque opaque au-dessus du tableau.
 * Les séparateurs/horaires qui défilent ne peuvent plus "passer dessus".
 */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo :is(th, td):first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 20 !important;
  isolation: isolate !important;
  background: var(--lb-table-sticky) !important;
  background-color: var(--lb-table-sticky) !important;
  background-image: none !important;
  background-clip: padding-box !important;
  border-right: 1px solid rgba(76, 233, 244, .34) !important;
  box-shadow: 7px 0 12px rgba(0, 0, 0, .30) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo thead th:first-child {
  z-index: 60 !important;
  background: #082331 !important;
  box-shadow: 7px 0 12px rgba(0, 0, 0, .30), 0 5px 12px rgba(0, 0, 0, .12) !important;
}

/* Petit masque de sécurité Safari/iOS au bord de la colonne fixe. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo :is(th, td):first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 7px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 23, 34, .98), rgba(6, 23, 34, 0));
  z-index: 3;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo thead th:first-child::after {
  background: linear-gradient(90deg, rgba(8, 35, 49, .98), rgba(8, 35, 49, 0));
}

/* Gare : meilleure hiérarchie sans agrandir le tableau. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:first-child .gare-label,
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:first-child .gare-link {
  color: #50e7ef !important;
  font-weight: 780 !important;
  text-shadow: none !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:first-child .wx {
  opacity: .58 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Heures : prévue discrète, temps réel immédiatement identifiable. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:not(:first-child) {
  color: rgba(245, 252, 253, .94) !important;
  font-weight: 690 !important;
  text-align: center !important;
  letter-spacing: -.012em !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .delay-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  line-height: 1 !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .delay-strike {
  opacity: .45 !important;
  font-weight: 620 !important;
  text-shadow: none !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo :is(.delayed, .retard) {
  color: #ffb02e !important;
  font-weight: 880 !important;
  text-shadow: 0 0 7px rgba(255, 176, 46, .18) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .voie-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  margin-top: 2px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(43, 224, 241, .48) !important;
  border-radius: 999px !important;
  background: rgba(0, 157, 187, .12) !important;
  color: #52ebf4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

/* Cellules sans desserte : présentes mais très calmes. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td.lb-empty-cell,
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:not(:first-child):where(:not([data-base-time])) {
  text-shadow: none !important;
}

/* Repères structurants du sillon : un trait, pas un sapin de Noël. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:is(
  [data-gare="Nancy"],
  [data-gare="Metz"],
  [data-gare="Thionville"],
  [data-gare="Luxembourg"]
) td {
  border-bottom-color: rgba(76, 233, 244, .20) !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:is(
  [data-gare="Nancy"],
  [data-gare="Metz"],
  [data-gare="Thionville"],
  [data-gare="Luxembourg"]
) td:first-child {
  box-shadow: inset 3px 0 rgba(76, 233, 244, .58), 7px 0 12px rgba(0, 0, 0, .30) !important;
}

/* Repère tactile : discret, mais conservé après le nettoyage visuel. */
html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr.lb-touch-row > td:not(:first-child):not(.terminal-arrival-cell):not(.terminal-start-cell):not(.reduced-service) {
  background: #0a2230 !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo :is(th, td).lb-touch-col:not(:first-child) {
  background: #0b2837 !important;
}

html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr.lb-touch-row > td:first-child {
  background: #08202d !important;
  box-shadow: inset 3px 0 rgba(76, 233, 244, .72), 7px 0 12px rgba(0, 0, 0, .30) !important;
}

/* Desktop : survol uniquement si une souris existe. */
@media (hover: hover) and (pointer: fine) {
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:hover td:not(:first-child):not(.terminal-arrival-cell):not(.terminal-start-cell):not(.reduced-service):not([data-terminal-arrival="1"]):not([data-terminal-start="1"]) {
    background: #0a2230 !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo tbody tr:hover td:first-child {
    background: #08202d !important;
  }
}

/* Mobile : densité proche de l'existant, avec une colonne fixe légèrement plus nette. */
@media (max-width: 768px) {
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .table-scroll {
    border-radius: 12px !important;
    scrollbar-width: thin !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table th:first-child,
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table td:first-child {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    padding-left: 7px !important;
    padding-right: 5px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table th:not(:first-child),
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table td:not(:first-child) {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table thead th {
    height: 50px !important;
    min-height: 50px !important;
    padding: 5px 4px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table tbody td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo td:first-child .gare-label {
    max-width: 104px !important;
    padding-right: 20px !important;
    line-height: 1.05 !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .voie-badge {
    min-height: 17px !important;
    padding: 1px 5px !important;
    font-size: 9.5px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo .lb-table-swipe-hint {
    min-height: 24px !important;
    padding: 4px 10px !important;
    color: rgba(199, 229, 234, .72) !important;
    background: #061722 !important;
    border-block-color: rgba(76, 233, 244, .10) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: .01em !important;
  }
}

/* PC/tablette : un peu plus d'air, sans perdre de colonnes utiles. */
@media (min-width: 769px) {
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table th:first-child,
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table td:first-child {
    min-width: 190px !important;
    width: 190px !important;
    max-width: 190px !important;
  }

  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table th:not(:first-child),
  html[data-lb-v4-live="1"] body.lb-v3 #trainInfo table td:not(:first-child) {
    min-width: 76px !important;
    width: 76px !important;
  }
}