/* ══════════════════════════════════════
   RESPONSIVE — Tablette (768px à 1024px)
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
  }

  #text-title {
    font-size: 20px;
  }

  #empty-msg {
    left: calc(var(--icon-rail-width) + 220px + 50%);
  }

  .btn-devenir-membre-vertical.panel-ouvert {
    left: calc(var(--icon-rail-width) + 220px);
  }
}


/* ══════════════════════════════════════
   RESPONSIVE — Mobile (< 768px)
   ══════════════════════════════════════ */
@media (max-width: 768px) {

  :root {
    --icon-rail-width: 60px;
  }
  /* La sidebar devient un panneau plein écran par-dessus la carte */
  .sidebar {
    position: fixed;
    top: 0;
    left: var(--icon-rail-width);
    width: calc(100% - var(--icon-rail-width));
    height: 100dvh;
    z-index: 2000;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }

  /* La carte reprend toute la largeur*/
  .main {
    position: relative;
  }

  #map {
    width: 100%;
  }

  /* Header compact */
  header {
    padding: 10px 12px;
  }

  .btn-devenir-membre {
    right: 5px;
    padding: 6px 10px;
    font-size: 11px;
  }

  #text-title{
    font-size: 16px;
  }

  .icon-btn {
    min-height: 44px;
    font-size: 8px;
    gap: 3px;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .logo-img-rail {
    width: 28px;
    height: 28px;
  }

  /* Message "aucun résultat" recentré sur mobile */
  #empty-msg {
    left: 50%;
    width: 80%;
  }

  /* Popups Leaflet plus étroites */
  .leaflet-popup-content-wrapper {
    max-width: 240px;
  }

  .popup-nom {
    font-size: 14px;
  }
}