* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #map {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.legend-control {
  background: white;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  font: 13px/1.4 sans-serif;
  color: #222;
}

.legend-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

.legend-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #ddd;
  cursor: pointer;
}

.layers-control {
  background: white;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  font: 13px/1.4 sans-serif;
  color: #222;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layers-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.line-filter {
  margin-top: 4px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

.data-status-control {
  background: white;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  font: 13px/1.6 sans-serif;
  color: #222;
  margin-top: 8px;
}

.data-status-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.data-status-secondary {
  color: #888;
  font-size: 11px;
}

#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 48px;
  background: #1d6fd4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.topbar-title {
  font: 700 15px/1 sans-serif;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-btn {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.topbar-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

#controls-toggle-btn.active {
  background: rgba(255, 255, 255, 0.4);
}

/* Inutile sur desktop : la légende/les filtres/le statut y restent
   toujours visibles (voir la media query mobile ci-dessous). */
@media (min-width: 769px) {
  #controls-toggle-btn {
    display: none;
  }
}

/* Sur écran étroit, les boutons de la topbar passent en icône seule pour
   ne pas se chevaucher avec le titre. */
@media (max-width: 400px) {
  .btn-label {
    display: none;
  }
}

.vehicle-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.vehicle-marker-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  pointer-events: auto;
}

.vehicle-marker-label {
  margin-top: 1px;
  font: 700 11px/1 sans-serif;
  background: white;
  padding: 1px 4px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: auto;
}

.traffic-blocked {
  animation: traffic-pulse 1.4s ease-in-out infinite;
}

@keyframes traffic-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.35; }
}

#controls-backdrop {
  display: none;
}

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.4);
  padding: 16px;
}

/* :not([hidden]) plutôt qu'un display: flex inconditionnel : la spécificité
   de .help-modal { display: flex } est identique à celle de la règle
   navigateur [hidden] { display: none } et gagnait car chargée après,
   rendant la modale toujours visible (et cliquable par-dessus tout) même
   avec l'attribut hidden posé par le JS. */
.help-modal:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-modal-content {
  position: relative;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  font: 14px/1.5 sans-serif;
  color: #222;
}

.help-modal-content h2 {
  font-size: 18px;
  margin: 0 0 12px;
  padding-right: 24px;
}

.help-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.staleness-banner {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 2000;
  background: #c0392b;
  color: white;
  text-align: center;
  padding: 8px 12px;
  font: 600 13px/1.4 sans-serif;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* Décale le panneau vers le bas quand le bandeau d'alerte est affiché,
   pour qu'ils ne se chevauchent pas (sélecteur de sibling général : le
   bandeau précède .panel dans le DOM). Le bandeau du haut (#topbar) est
   toujours visible, son offset est déjà dans le top: 60px par défaut.
   Desktop uniquement : sur mobile .panel est ancré en bas (top: auto,
   bottom: 0) et cette règle, plus spécifique, écrasait cet ancrage en
   forçant un top explicite -> panneau blanc étiré depuis le haut. */
@media (min-width: 769px) {
  .staleness-banner:not([hidden]) ~ .panel {
    top: 104px;
  }
}

.panel {
  position: absolute;
  top: 60px;
  right: 12px;
  width: 320px;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  z-index: 1000;
  font: 14px/1.4 sans-serif;
  color: #222;
}

.panel-search {
  position: relative;
}

#stop-search {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  font-size: 15px;
}

.stop-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.stop-suggestion {
  padding: 8px 12px;
  cursor: pointer;
}

.stop-suggestion:hover,
.stop-suggestion.active {
  background: #eef3fb;
}

.panel-result {
  position: relative;
  margin-top: 8px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  padding: 12px;
  max-height: 60vh;
  overflow-y: auto;
}

.panel-result h2 {
  font-size: 16px;
  margin-right: 24px;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.departures-list {
  list-style: none;
  margin-top: 8px;
}

.departures-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.departure-line {
  font-weight: 600;
}

.departure-direction {
  color: #555;
  flex: 1;
  margin: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure-time {
  white-space: nowrap;
}

.departure-delay-late {
  color: #c0392b;
}

.departure-delay-early {
  color: #2980b9;
}

.alerts-panel {
  margin-top: 8px;
  max-height: 40vh;
}

.alerts-panel h2 {
  font-size: 15px;
  margin-bottom: 6px;
}

.alerts-list {
  list-style: none;
}

.alerts-list li {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.alerts-list li:last-child {
  border-bottom: none;
}

.alert-icon {
  flex-shrink: 0;
}

.alert-body {
  min-width: 0;
}

.alert-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-line;
  cursor: pointer;
}

.alert-text.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.alert-meta {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}

/* Tabs : masqués sur desktop (les deux sections restent empilées et visibles) */
.panel-tabs {
  display: none;
}

.panel-tab-content + .panel-tab-content {
  margin-top: 8px;
}

/* Sur mobile/tablette, la légende + les filtres + le statut des données
   empilés dans le coin haut-gauche masquaient jusqu'à 80% de la carte
   (3 panneaux blancs l'un sous l'autre). On les cache par défaut et on ne
   les affiche que dans un tiroir déclenché par le bouton "Affichage" de la
   topbar, pour laisser la carte visible par défaut. Le contrôle de zoom
   Leaflet (même coin) n'est volontairement pas concerné : il reste toujours
   visible. */
@media (max-width: 768px) {
  .legend-control,
  .layers-control,
  .data-status-control {
    display: none;
  }

  body.controls-open .legend-control,
  body.controls-open .layers-control,
  body.controls-open .data-status-control {
    display: block;
    max-width: calc(100vw - 20px);
  }

  #controls-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.25);
  }

  body.controls-open #controls-backdrop {
    display: block;
  }
}

/* Mobile / tablette : panel devient un panneau coulissant ancré en bas d'écran,
   avec des onglets pour basculer entre recherche d'arrêt et messages */
@media (max-width: 768px) {
  .panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 70%, rgba(255, 255, 255, 0));
    border-radius: 14px 14px 0 0;
    max-height: 55vh;
    display: flex;
    flex-direction: column;
  }

  .panel-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .panel-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    cursor: pointer;
  }

  .panel-tab.active {
    background: #1d6fd4;
    color: white;
    font-weight: 600;
  }

  .panel-tab-content {
    display: none;
    min-height: 0;
    overflow-y: auto;
  }

  .panel-tab-content.active {
    display: block;
  }

  .panel-tab-content + .panel-tab-content {
    margin-top: 0;
  }

  .panel-result,
  .alerts-panel {
    max-height: none;
  }
}