/* ============================================
   RESPONSIVE - Cartophonie participative
   3 breakpoints : 1024px, 750px, 480px
   ============================================ */

/* ============================================
   BREAKPOINT 1 : Tablettes (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

  .player-custom {
    gap: 15px;
  }

  .category-filter {
    padding-right: 15px;
    gap: 10px;
  }
}

/* ============================================
   BREAKPOINT 2 : Tablettes portrait / grands mobiles (max-width: 750px)
   ============================================ */
@media (max-width: 750px) {

  /* Titre : basculer desktop -> mobile */
  .titre_carte {
    visibility: hidden;
  }

  .titre_carte_mobile {
    visibility: visible;
  }

  /* Menu haut : colonne unique */
  /* .menu_haut {
    grid-template-columns: 1fr;
  } */

  /* Filtre catégories */
  .category-filter {
    justify-content: center;
    flex-wrap: wrap;
    padding-right: 10px;
    padding-left: 10px;
    gap: 6px;
  }

  .category-checkbox {
    font-size: 13px;
    padding: 4px 8px;
    gap: 8px;
  }

  /* Player : colonne unique */
  .player-custom {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  /* Icône play/pause réduite */
  .play-icon,
  .pause-icon {
    width: 40px;
    height: 40px;
  }

  .waveform {
    height: 25px;
  }

  /* Info panel : limiter la hauteur pour garder la carte visible */
  .info-panel.open {
    max-height: 30vh;
    overflow-y: auto;
  }

  /* Footer : masqué en mobile */
  .footer {
    display: none;
  }

  /* Bouton fermeture : zone tactile agrandie */
  #info-panel-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2px;
  }

  
}

/* ============================================
   BREAKPOINT 3 : Mobiles (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {


  /* Player : encore plus compact */
  .player-custom {
    padding: 12px;
  }

  .player-titre {
    font-size: 16px;
  }

  .player-description {
    font-size: 13px;
  }

  /* Filtre catégories : très compact */
  .category-filter {
    gap: 6px;
  }

  .category-checkbox {
    font-size: 11px;
    padding: 3px 6px;
    gap: 5px;
  }

  /* Icône play/pause réduite */
  .play-icon,
  .pause-icon {
    width: 30px;
    height: 30px;
  }

  /* Info panel : encore plus limité */
  .info-panel.open {
    max-height: 50vh;
  }

  /* Titre mobile : image plus petite */
  .titre_carte_mobile img {
    width: 80px;
  }
}