/* mobile.css — améliorations responsive GLOBALES (chargé APRÈS main.css/themes.css).
 * 100% additif et scopé à des @media : n'affecte que les petits écrans, ne touche pas le desktop.
 * Objectif : lisibilité + cibles tactiles + anti-débordement sur smartphone. */

/* ═══════════════ Tablettes & téléphones (≤ 760px) ═══════════════ */
@media (max-width: 760px) {

  /* Rien ne doit déborder horizontalement. */
  img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
  pre, code { overflow-x: auto; overflow-wrap: anywhere; }
  a { overflow-wrap: anywhere; }

  /* ── Cibles tactiles : boutons et liens confortables au doigt (≥ ~44px) ── */
  .btn {
    min-height: 44px; padding: .55rem 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  }
  .btn-sm { min-height: 38px; padding: .4rem .75rem; }
  .site-nav__link { padding: .75rem .9rem; font-size: 16px; }
  .site-nav__dropdown a, .topbar__dropdown a { padding: .7rem .9rem; }
  .pagination a, .pagination span, .page-link, .pager a {
    min-height: 42px; min-width: 42px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Formulaires : champs lisibles, jamais tronqués ── */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea, .form-control {
    max-width: 100% !important;
    font-size: 16px;   /* ≥16px : empêche le zoom automatique iOS au focus */
  }
  .form-control { width: 100%; }

  /* ── Barres d'actions : les boutons passent à la ligne au lieu de déborder ── */
  .btn-row, .actions, .toolbar { flex-wrap: wrap; }
}

/* ═══════════════ Téléphones (≤ 600px) ═══════════════ */
@media (max-width: 600px) {

  /* Récupère de la largeur utile partout. */
  .container { padding-left: .85rem; padding-right: .85rem; }

  /* Typographie : titres proportionnés (le .page-title 37px est énorme sur mobile). */
  .page-title { font-size: 26px !important; line-height: 1.2; }
  .page-title small { font-size: 15px !important; }
  h1 { font-size: 25px; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }

  /* Cartes un peu plus compactes. */
  .card__body { padding: .85rem .9rem; }
  .card__header { padding: .7rem .9rem; }

  /* Grilles 2 colonnes génériques → 1 colonne. */
  .layout-two-col { grid-template-columns: 1fr !important; }

  /* Tables : défilement horizontal propre plutôt qu'un débordement de page.
     (technique standard : le tableau devient un bloc scrollable). */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody { width: 100%; }
}

/* ═══════════════ Petits téléphones (≤ 400px) ═══════════════ */
@media (max-width: 400px) {
  .container { padding-left: .6rem; padding-right: .6rem; }
  .page-title { font-size: 23px !important; }
  .card__body { padding: .7rem .75rem; }
}

/* ═══════════════ Menu hamburger : toujours défilable ═══════════════
   Le menu ouvert peut être plus haut que l'écran (sous-menus en accordéon) : on garantit
   qu'il défile pour atteindre les dernières entrées (l'ancien calc() pouvait le figer). */
@media (max-width: 760px) {
  .site-nav.site-nav--open {
    max-height: 82vh;
    max-height: 82dvh;                 /* tient compte de la barre d'URL mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ═══════════════ Contenu trop large : se déplacer / atteindre le reste ═══════════════ */
@media (max-width: 600px) {
  /* Les grilles 2 colonnes en style inline passent en 1 colonne (éditeurs, formulaires). */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Blocs plus larges que l'écran → défilement horizontal interne plutôt que page coupée. */
  .table-wrap, .fp-scroll, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════ Cartes interactives (Leaflet) : ne plus « capturer » le doigt ═══════════════
   Leaflet met touch-action:none → la page ne peut plus défiler quand le doigt est sur la carte.
   La classe .fm-coop (ajoutée par FlightMap.js sur mobile) rétablit le défilement vertical :
   1 doigt = fait défiler la PAGE, 2 doigts = déplacent/zooment la carte. */
.leaflet-container.fm-coop { touch-action: pan-y !important; }

/* ═══════════════ Menu « Mon compte » ouvrable au doigt ═══════════════
   Sur desktop il s'ouvre au survol ; au tactile le survol n'existe pas.
   Le JS (footer.php) ajoute .open sur .topbar__item au tap → on l'affiche ici. */
@media (max-width: 760px) {
  .topbar__item.open > .topbar__dropdown {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    transform: none !important; pointer-events: auto !important;
  }
}