/* ================================================================
   responsive.css — Observatoire Montluçonnais
   Corrections responsives globales : tous les écrans de 320px à 2K
   ================================================================ */

/* ── Reset box-sizing global ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Body / Root ─────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
}

/* ── Container responsive ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Images / SVG responsive ─────────────────────────────────────── */
img, svg {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   NAV / HEADER
   ================================================================ */

/* Le header React a z-50 (50), mais les overlays carte montent jusqu'à
   z-index 9999. On force le header au-dessus pour que le menu mobile
   (hamburger) reste visible et cliquable. */
header {
  z-index: 100000 !important;
}

header nav,
header .container {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ================================================================
   HERO SECTION (page d'accueil)
   ================================================================ */
/* La section hero du SPA React */
[class*="hero"],
section:first-of-type {
  width: 100%;
  overflow: hidden;
}

/* ================================================================
   GRILLES & LAYOUTS REACT
   Tailwind breakpoints: sm=640px md=768px lg=1024px xl=1280px
   ================================================================ */

/* ── Indicateurs chips (_ai_section) ─────────────────────────────── */
#_ai_section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#_ai_grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 7px !important;
}

/* ── Panneau indicateur (_ap_panel) ──────────────────────────────── */
/* SVG box plot — responsive */
#_ap_panel svg {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* Grille top/bottom 5 dans le panneau */
#_ap_panel > div:last-child > div:last-child {
  overflow: hidden;
}

/* Comparaison EPCI : stack sur très petits écrans */
@media (max-width: 400px) {
  #_ap_panel [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Overlay carte France (_dfm_overlay) ─────────────────────────── */
#_dfm_overlay {
  max-width: 100vw;
}

/* Sidebar en mode desktop : largeur adaptée */
@media (min-width: 768px) and (max-width: 1024px) {
  #_dfm_sidebar {
    width: 220px !important;
    min-width: 200px !important;
  }
}

/* Fiche comparative : responsive */
@media (max-width: 480px) {
  #_dfm_comparison_card {
    width: calc(100% - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 90px !important;
    padding: 10px 12px !important;
    font-size: 10px !important;
  }
}

/* Panneau de classement : tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  #_dfm_ranking_panel {
    width: 240px !important;
  }
}

/* ── Carte Leaflet ────────────────────────────────────────────────── */
.leaflet-container {
  width: 100% !important;
}

/* Contrôles Leaflet — plus grands sur mobile pour faciliter le toucher */
@media (max-width: 767px) {
  .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
  }

  .leaflet-popup-content {
    max-width: calc(100vw - 60px) !important;
    font-size: 12px !important;
  }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px) !important;
  }
}

/* ================================================================
   FOOTER
   ================================================================ */
footer .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ================================================================
   PAGES INTÉRIEURES (Observatoire, Mentions légales…)
   ================================================================ */
/* Empêcher tout débordement horizontal dans les pages de contenu */
main > * {
  max-width: 100%;
}

/* Tableaux potentiels */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* ================================================================
   MOBILE — 767px et moins
   ================================================================ */
@media (max-width: 767px) {

  /* ── Navigation ──────────────────────────────────────────────── */
  header .container {
    height: auto !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* ── Hero / page d'accueil ───────────────────────────────────── */
  /* Réduction de la taille de titre */
  h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: clamp(1.1rem, 5vw, 1.75rem) !important;
  }

  /* ── Section indicateurs ─────────────────────────────────────── */
  #_ai_grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  ._ai_chip {
    padding: 7px 8px !important;
  }

  /* ── Panneau indicateur (drawer depuis le bas) ───────────────── */
  /* Déjà géré dans accueil-panel.js mais on renforce */
  #_ap_panel {
    touch-action: pan-y !important;
  }

  #_ap_panel #_ap_search_input {
    font-size: 16px !important; /* Évite le zoom auto iOS */
  }

  /* Grille desc dans le panneau */
  #_ap_panel [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Box plot SVG */
  #_ap_panel svg {
    min-height: 120px;
  }

  /* ── Champs de recherche (éviter zoom iOS) ───────────────────── */
  input[type="text"],
  input[type="search"],
  input[type="email"] {
    font-size: 16px !important;
  }

  /* ── Bouton flottant "Indicateurs" ───────────────────────────── */
  #_dfm_mobile_toggle button {
    padding: 10px 18px !important;
    font-size: 12px !important;
  }

  /* ── Overlay Tendances ───────────────────────────────────────── */
  #_tg_overlay > div {
    padding: 24px 16px !important;
    max-width: calc(100vw - 32px) !important;
  }

  #_tg_overlay h2,
  #_tg_overlay [style*="font-size:26px"] {
    font-size: 20px !important;
  }

  #_tg_overlay [style*="font-size:14px"] {
    font-size: 12px !important;
  }

  /* ── Scroll lock body ────────────────────────────────────────── */
  body._ap_noscroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ================================================================
   TRÈS PETIT ÉCRAN — 375px et moins
   ================================================================ */
@media (max-width: 375px) {

  #_ai_grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  ._ai_chip {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  /* Panneau : padding réduit */
  #_ap_panel > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Panneaux latéraux */
  #_dfm_ranking_panel [style*="font-size:14px"] {
    font-size: 12px !important;
  }
}

/* ================================================================
   TABLETTE — 768px à 1023px
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

  #_ai_grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }

  /* Sidebar carte France */
  #_dfm_sidebar {
    width: 230px !important;
  }

  /* Panneau indicateur */
  #_ap_panel {
    width: 400px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ================================================================
   DESKTOP — 1024px et plus
   ================================================================ */
@media (min-width: 1024px) {

  #_ai_grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
  }

  #_ap_panel {
    width: 440px !important;
  }

  #_dfm_sidebar {
    width: 260px !important;
  }
}

/* ================================================================
   ACCESSIBILITÉ — focus visible
   ================================================================ */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #1d3a8a;
  outline-offset: 2px;
}

/* ================================================================
   PRINT — masquer les éléments interactifs
   ================================================================ */
@media print {
  #_ap_panel,
  #_ap_backdrop,
  #_dfm_overlay,
  #_dfm_mobile_toggle,
  #_ai_section {
    display: none !important;
  }
}