#nav-guidance-start-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 4900;
  background: var(--accent, #1f6fd1);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#nav-guidance-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 4900;
  background: #1f2430;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#nav-guidance-panel.nav-guidance-active {
  display: flex;
}

.nav-guidance-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.nav-guidance-stop {
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-guidance-3d-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-guidance-3d-btn.nav-guidance-3d-on {
  background: var(--accent, #1f6fd1);
}

/* Effet "caméra inclinée" façon Waze/Google Maps pendant le guidage : la
   carte (à plat, sans vrais bâtiments/relief — ça demanderait de changer
   le moteur de carte) est visuellement penchée pour donner une sensation
   de survol de la route. On incline le conteneur Leaflet lui-même ; les
   boutons de zoom/calque de Leaflet sont masqués pendant ce temps car ils
   pencheraient aussi et deviendraient difficiles à toucher — nos propres
   boutons (Vue 3D / Arrêter) restent en dehors de la carte et ne penchent
   jamais. */
body.nav-guidance-tilt .map-pane {
  background: linear-gradient(#0e1726, #3a4a5a);
}

body.nav-guidance-tilt .leaflet-container {
  transform: perspective(900px) rotateX(32deg) scale(2.1);
  transform-origin: 50% 100%;
  transition: transform 0.4s ease;
}

body.nav-guidance-tilt .leaflet-control-container {
  display: none;
}

/* Mode plein écran pendant le guidage : on masque le bandeau du haut et le
   panneau latéral pour que la carte occupe tout l'écran. Ce sont les seuls
   deux éléments frères de la carte dans la mise en page (flexbox), donc
   les masquer suffit à faire grandir automatiquement la carte, sans avoir
   besoin de fixer sa hauteur en dur. */
body.nav-guidance-fullscreen .top-nav,
body.nav-guidance-fullscreen .sidebar {
  display: none !important;
}

/* Bandeau "Rejoindre le point de départ", proposé juste après le calcul
   d'un roadbook si la position actuelle est loin du départ. Même
   emplacement/style que le bandeau de guidage (les deux n'apparaissent
   jamais en même temps). */
#approach-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 4950;
  background: #1f2430;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#approach-prompt.approach-prompt-active {
  display: flex;
}

.approach-prompt-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.approach-prompt-yes {
  appearance: none;
  background: var(--accent, #1f6fd1);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.approach-prompt-no,
.approach-prompt-close {
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}