/* ==========================================================================
   Petits écrans (PDA Honeywell de Loudun, téléphones) — chargé EN DERNIER dans
   le <head> de chaque page MVP, après le <style> de la page, pour l'emporter à
   spécificité égale. Uniquement de la mise en page : aucune règle ici ne change
   un comportement.

   Cible : ≈ 360 × 480 px CSS utiles, et 288 × 384 quand Android agrandit le
   texte à 125 % (le zoom réduit d'autant la largeur CSS). D'où le seuil 600 px :
   les PC et tablettes ne sont pas concernés.

   Compatibilité : les PDA CT40 tournent sous un Chrome ancien (64) — pas de
   `inset`, `:has()`, `min()/clamp()` ni `dvh` ici.
   ========================================================================== */
@media (max-width: 600px) {
  /* En-têtes : les liens passent à la ligne au lieu de sortir de l'écran
     (Déconnexion, Stats… devenaient inatteignables, la page débordait en
     largeur). L'en-tête n'est plus collé en haut : sur 384 px de haut, un
     en-tête collant de 3 lignes masquait la moitié de l'écran. */
  .app-header, .header, .topbar {
    flex-wrap: wrap;
    position: static;
  }
  .app-header > *, .header > *, .topbar > * { min-width: 0; max-width: 100%; }
  /* Liens de navigation de l'en-tête : une seule rangée qui défile au doigt
     (jusqu'à 10 liens côté master : empilés, ils occupaient tout l'écran). */
  .app-header > .nav-links, .header > .nav-links {
    -webkit-box-flex: 1; flex: 1 1 100%;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-top: 8px; padding-bottom: 2px;
  }
  .app-header > .nav-links > a, .header > .nav-links > a { flex-shrink: 0; white-space: nowrap; }
  .nav-links { flex-wrap: wrap; }
  .app-header h1, .header h1 { overflow-wrap: break-word; }
  /* Cibles tactiles ≥ 40 px dans les en-têtes (liens de navigation). */
  .app-header a, .header .nav-links a, .nav-links a {
    display: inline-flex; align-items: center;
    min-height: 40px;
    margin-top: 2px; margin-bottom: 2px;
  }
  .header .nav-links a:first-child { margin-left: 0; }

  /* Messages de création (create_product, poste Tremblay) : ils étaient
     accrochés sous l'en-tête collant ; l'en-tête ne colle plus, ils restent
     donc visibles en haut de l'écran. Le conteneur vide ne capte pas les
     appuis destinés à la page. */
  #toastContainer {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    -webkit-transform: none; transform: none;
    z-index: 60; pointer-events: none;
  }
  #toastContainer .toast { pointer-events: auto; }

  /* Fenêtre caméra plein écran (photos, situation, contrôle catalogue) : si
     l'aperçu ne tient pas en hauteur, on peut défiler jusqu'à « Fermer ». */
  #camOverlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Tableaux larges (souvent construits en JS) : chaque tableau défile en
     largeur dans son propre cadre au lieu d'élargir toute la page. En bloc, le
     tableau garde sa largeur naturelle et ne défile que s'il ne tient pas. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Champs : app.css impose min-width 240 px — plus large que la carte sur
     288 px (texte à 125 %) ; le bouton caméra à côté sortait de l'écran. */
  input, select { min-width: 0; }
  input, select, textarea { max-width: 100%; }

  /* Éléments de grille : sans min-width 0, un graphique ou un tableau impose
     sa largeur à la colonne et pousse la page en largeur. */
  .charts-grid > *, .stats-grid > *, .grid > *, .cards > * { min-width: 0; }
  canvas { max-width: 100%; }

  /* Cibles tactiles ≥ 40 px (gants, gâchette en main) : boutons, listes,
     champs. Les cases à cocher et le sélecteur de fichier ne sont pas visés. */
  button, select, .btn,
  input[type=text], input[type=search], input[type=number], input[type=date],
  input[type=email], input[type=password], input[type=tel], input:not([type]) {
    min-height: 40px;
  }
}