/* MCD Roadbook — ajustements pour affichage mobile (smartphone / iPhone)
   Ce fichier est ADDITIF : il ne modifie aucun fichier existant, il ajoute
   seulement des règles qui ne s'appliquent qu'en dessous de 860px de large. */

@media (max-width: 860px) {

  /* La barre latérale (formulaire) et la carte passent l'une au-dessus de
     l'autre au lieu d'être côte à côte (ce qui provoquait un débordement
     horizontal et rendait la carte quasiment invisible sur un téléphone). */
  .app-layout {
    flex-direction: column;
  }

  /* La barre latérale prend toute la largeur, garde un défilement interne,
     et est limitée en hauteur pour laisser de la place à la carte. */
  .sidebar {
    width: 100%;
    min-width: 0;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }

  /* La carte occupe le reste de l'écran, avec une hauteur minimale garantie. */
  .map-pane {
    flex: 1 1 auto;
    min-height: 280px;
  }

  /* La barre de navigation du haut (Roadbook / Aide / Sorties / Forum / ...)
     devient défilable horizontalement au lieu de couper les liens. */
  .top-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .top-nav-link {
    padding: 7px 10px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .top-nav-brand {
    margin-right: 8px;
    flex-shrink: 0;
  }

  .top-nav-account {
    white-space: nowrap;
    margin-left: 6px;
    flex-shrink: 0;
  }

  /* Les 4 boutons (Créer une boucle / Mes lieux / ...) restent lisibles. */
  .library-buttons button {
    font-size: 12px;
    padding: 9px 4px;
  }

  .sidebar-header h1 {
    font-size: 19px;
  }
}