/* ============================================================
   Responsive overrides – L'Observatoire Montluçonnais
   Cible : écrans < 768 px (iPhone 13 mini = 375 px de large)
   ============================================================ */

/* ---------- base mobile ---------- */
@media (max-width: 767px) {

  /* Autoriser le scroll vertical sur tout le site */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Conteneurs generaux */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ---- HERO / section principale ---- */
  section.relative.overflow-hidden.bg-foreground {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Titre hero – taille réduite sur petit écran */
  section.relative.overflow-hidden.bg-foreground h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }

  /* Sous-titre hero */
  section.relative.overflow-hidden.bg-foreground p {
    font-size: 0.95rem !important;
  }

  /* ---- Grille des 6 dimensions ---- */
  .grid.grid-cols-1.gap-4 {
    gap: 0.75rem !important;
  }

  /* Carte dimension – padding réduit */
  .group.relative.overflow-hidden.rounded-xl.border.p-6 {
    padding: 1rem !important;
  }

  /* ---- Section map + radar (lg:grid-cols-5) ---- */
  /* La carte et le radar passent en colonne sur mobile */
  .grid.grid-cols-1.gap-6 {
    gap: 1rem !important;
  }

  /* Hauteur de la carte Leaflet réduite sur mobile */
  .h-\[480px\] {
    height: 260px !important;
  }

  /* Hauteur du radar chart réduite sur mobile */
  .h-\[360px\] {
    height: 240px !important;
  }

  /* Radar card : enlever h-full pour qu'elle ne prenne que ce qu'il faut */
  .lg\:col-span-2 > div {
    height: auto !important;
  }

  /* ---- Grille des sous-indicateurs ---- */
  .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  /* Boutons sous-indicateurs – réduire le padding */
  .group.rounded-lg.border.px-3.py-3 {
    padding: 0.5rem 0.625rem !important;
  }

  /* Texte dans les boutons sous-indicateurs */
  .group.rounded-lg.border.px-3.py-3 p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  /* ---- CORRECTION CHEVAUCHEMENT box plot / sélecteur ----
     Le conteneur Framer-Motion (height: 0 → auto) qui wraps
     le panneau graphique doit avoir overflow visible pour que
     le recharts SVG ne passe pas par-dessus les boutons. */

  /* Panneau graphique sous-indicateur sélectionné */
  .mt-6.rounded-lg.border.border-border.bg-muted\/20.p-5 {
    margin-top: 0.75rem !important;
    padding: 0.75rem !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* Hauteur du graphique d'évolution (AreaChart/LineChart) */
  .h-\[280px\] {
    height: 200px !important;
  }

  /* Éviter que le SVG recharts déborde et chevauche les boutons */
  .h-\[280px\] svg,
  .h-\[200px\] svg,
  .h-\[360px\] svg,
  .h-\[480px\] svg {
    overflow: hidden !important;
  }

  /* Les wrappers ResponsiveContainer recharts */
  .recharts-responsive-container {
    overflow: hidden !important;
  }

  /* ---- Wrapper animé Framer-Motion du panneau graphique ----
     overflow:hidden sur le wrapper bloque les SVG recharts,
     on le passe à visible ici pour éviter le chevauchement */
  .mt-8.overflow-hidden {
    overflow: visible !important;
  }

  /* Mais on remet overflow:hidden sur l'animation de hauteur
     pour que l'entrée reste propre : on cible le div intérieur */
  .mt-8.overflow-hidden > div {
    overflow: hidden !important;
  }

  /* ---- Section sous-indicateurs : header ---- */
  .mb-5.flex.flex-col.gap-2 {
    margin-bottom: 0.75rem !important;
  }

  .mb-5.flex.flex-col.gap-2 h3 {
    font-size: 0.95rem !important;
  }

  /* Source / info box : masqué sur mobile (sm:flex) – déjà géré */

  /* ---- Section Tendances / Données ---- */
  /* Grilles avec lg:grid-cols-3 */
  .grid.grid-cols-1.lg\:grid-cols-3.gap-8 {
    gap: 1.25rem !important;
  }

  /* ---- Hauteur des graphiques 300px ---- */
  .h-\[300px\] {
    height: 220px !important;
  }

  /* ---- Hauteur des graphiques 400px ---- */
  .h-\[400px\] {
    height: 250px !important;
  }

  /* ---- Section Tendances : padding vertical ---- */
  section.bg-background.px-4.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section.border-y.border-border.bg-background.px-4.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* ---- Titres de section ---- */
  .text-3xl.font-bold {
    font-size: 1.5rem !important;
  }

  .text-2xl.font-bold,
  .text-2xl.font-semibold {
    font-size: 1.25rem !important;
  }

  /* ---- Grille statistiques (md:grid-cols-5) ---- */
  .grid.grid-cols-2.gap-6.text-center {
    gap: 0.75rem !important;
  }

  /* ---- Footer ---- */
  footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ---- Page Tendances : grilles ---- */
  .grid.grid-cols-1.lg\:grid-cols-2.gap-8 {
    gap: 1rem !important;
  }

  /* ---- BOX PLOT injecté par choropleth-overlay.js ---- */
  #_choro_boxplot_wrap {
    overflow: hidden !important;
    margin-top: 16px !important;
    border-radius: 0 0 12px 12px;
  }

  #_choro_boxplot_wrap svg {
    overflow: hidden !important;
  }

  /* Badge Montluçon : repositionner sur petit écran */
  #_choro_montlucon_badge {
    top: auto !important;
    bottom: 8px !important;
    right: 8px !important;
    min-width: 160px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  /* Panneau de comparaison EPCI sur mobile */
  #_choro_comparison_panel {
    max-height: 180px !important;
    overflow-y: auto !important;
  }
}

/* ---------- très petit écran (≤ 374 px, ex. iPhone SE 1st gen) ---------- */
@media (max-width: 374px) {

  .h-\[480px\] {
    height: 220px !important;
  }

  .h-\[360px\] {
    height: 200px !important;
  }

  .h-\[280px\] {
    height: 180px !important;
  }

  .h-\[300px\] {
    height: 180px !important;
  }

  section.relative.overflow-hidden.bg-foreground h1 {
    font-size: 1.65rem !important;
  }

  .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}