/* ============================================================
   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. Pages légales / contenu standard ─────────────────── */
.legal-content {
  max-width: 900px;
  font-family: var(--font-corps, Inter, sans-serif);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-texte, #1C1C1A);
}

.legal-content h2 {
  font-family: var(--font-titre, "Playfair Display", serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-vert-principal, #2D5016);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-vert-clair, #4A7C28);
}

.legal-content h3 {
  font-family: var(--font-titre, "Playfair Display", serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-texte, #1C1C1A);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gris-chaud, #6B6560);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  margin-bottom: 1.25rem;
}

.legal-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.legal-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.legal-content li {
  margin-bottom: 0.4rem;
  line-height: 1.7;
}

.legal-content li::marker {
  color: var(--color-vert-clair, #4A7C28);
}

.legal-content a {
  color: var(--color-vert-principal, #2D5016);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: var(--color-vert-clair, #4A7C28);
}

.legal-content blockquote {
  border-left: 4px solid var(--color-vert-clair, #4A7C28);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(74, 124, 40, 0.06);
  color: var(--color-gris-chaud, #6B6560);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

.legal-content hr {
  border: none;
  border-top: 1px solid var(--color-bordure, #E8E2D9);
  margin: 2.5rem 0;
}

.legal-content strong {
  font-weight: 700;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.legal-content th {
  background: var(--color-vert-principal, #2D5016);
  color: var(--color-creme, #FAFAF7);
  padding: 0.6rem 1rem;
  text-align: left;
  font-weight: 600;
}

.legal-content td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-bordure, #E8E2D9);
}

.legal-content tr:last-child td {
  border-bottom: none;
}

/* Premier titre : pas de marge haute superflue */
.legal-content > h2:first-child,
.legal-content > h3:first-child,
.legal-content .rich-text > h2:first-child,
.legal-content .rich-text > h3:first-child {
  margin-top: 0;
}

@media (max-width: 639px) {
  .legal-content h2 {
    font-size: 1.4rem;
  }
  .legal-content h3 {
    font-size: 1.15rem;
  }
  .legal-content table {
    font-size: 0.8rem;
  }
}

/* ── 9. Richtext (rendu Wagtail) ──────────────────────────── */
.richtext p {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.richtext p:last-child {
  margin-bottom: 0;
}

/* ── 10. 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;
  }
}