/* ============================================================
   RESPONSIVE — correctifs mobile / tablette
   Desktop (>= 1024px) non modifié.
   Stratégie : cibler les classes Tailwind utilisées dans les
   templates pour éviter de modifier chaque fichier HTML.
   ============================================================ */

/* ── 1. Empêcher tout débordement horizontal ──────────────── */
html, body {
  overflow-x: hidden;
}

/* ── 2. Images nativement responsive ─────────────────────── */
/* height: auto retiré — écraserait les classes h-* de Tailwind (ex: logo h-12) */
img {
  max-width: 100%;
}

/* ── 3. Padding conteneur (px-[120px] → réduit) ──────────── */
/* Tablette : 2rem de chaque côté                             */
@media (max-width: 1023px) {
  .px-\[120px\] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
/* Mobile : 1rem de chaque côté                               */
@media (max-width: 639px) {
  .px-\[120px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── 4. Grilles multi-colonnes ────────────────────────────── */
/* Tablette : 4 et 3 colonnes → 2 colonnes                   */
@media (min-width: 640px) and (max-width: 1023px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Mobile : toutes les grilles → 1 colonne                   */
@media (max-width: 639px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ── 5. Hero accueil (flex côte à côte → colonne) ─────────── */
/* Seul élément avec gap-16 dans le projet                    */
@media (max-width: 767px) {
  .gap-16 {
    flex-direction: column;
    gap: 2rem !important;
  }
}

/* ── 6. Section "À venir" (flex row → colonne) ───────────── */
/* .flex.gap-8 cible uniquement les flex avec gap-8           */
/* (le nav desktop avec gap-8 est caché sur mobile)           */
@media (max-width: 767px) {
  .flex.gap-8 {
    flex-direction: column;
    gap: 1.5rem !important;
  }
}

/* ── 7. Barres de filtres (wrap au lieu de déborder) ──────── */
@media (max-width: 767px) {
  .flex.items-center.gap-4 {
    flex-wrap: wrap;
  }
}

/* ── 8. Navbar mobile ─────────────────────────────────────── */
#nav-desktop {
  display: flex;
}
#hamburger {
  display: none;
}
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block !important;
}

@media (max-width: 767px) {
  #nav-desktop {
    display: none;
  }
  #hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
}