/* assets/mobile.css — adaptation mobile/tablette COMMUNE à toutes les applis.
   Injectée automatiquement dans chaque page générée (tools/build-frontend.js).
   Ne touche pas au rendu desktop ; ne fait qu'assouplir la mise en page sur
   petits écrans et rendre les résultats larges défilables. */

/* Résultats larges (tableaux, schémas SVG) : défilement horizontal propre
   plutôt qu'un débordement qui casse la page. Valable à toutes tailles. */
#schema, #details, #details2, #details3,
.schema, .schemaScroll, #res .card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#schema svg, .schema svg { max-width: 100%; height: auto; }
/* Les tableaux gardent leur largeur naturelle et défilent dans leur conteneur. */
#details table, #details2 table, #details3 table, #schema table, .schema table {
  min-width: max-content;
}

/* La page elle-même ne défile jamais horizontalement. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Tablette et téléphone : grilles de saisie resserrées + cibles tactiles. */
@media (max-width: 820px) {
  .wrap { padding: 8px; }
  /* Mise en page 2 colonnes (formulaire | résultats) -> EMPILÉE : données en
     haut, résultats en dessous. Corrige le plancher (main: 390px 1fr) et toute
     appli au même schéma, évite le défilement horizontal. */
  main { display: block !important; grid-template-columns: 1fr !important; }
  .grid.g8, .grid.g6, .grid.g5, .grid.g4, .grid.g3, .metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 16px sur les champs = pas de zoom automatique iOS au focus. */
  input, select { font-size: 16px !important; padding: 8px 8px; }
  button { padding: 9px 12px; }
  .head { font-size: 15px; flex-wrap: wrap; }
  #authbar { font-size: 12px; }
  table th, table td { padding: 6px 5px; }
}

/* Téléphone : une seule colonne pour la saisie. */
@media (max-width: 520px) {
  .grid.g8, .grid.g6, .grid.g5, .grid.g4, .grid.g3, .metrics {
    grid-template-columns: 1fr !important;
  }
  .metric b { font-size: 15px; }
  h2 { font-size: 14px; }
}

/* CARTES DE RÉSULTATS (plancher & poutres) : sur petit écran, elles doivent
   TENIR dans la largeur et s'empiler verticalement — sans largeur minimale fixe
   qui forcerait un défilement horizontal (et le mode paysage). Les grands
   tableaux de détail conservent, eux, leur défilement horizontal. */
@media (max-width: 700px) {
  .resGrid { grid-template-columns: 1fr !important; }
  .resBand { flex-wrap: wrap !important; overflow-x: visible !important; }
  .resCard { min-width: 0 !important; width: auto !important; flex: 1 1 100% !important; }
  .schema { min-height: 0 !important; }
}