/* Ajustements pour petits écrans.
   Chargé APRÈS le <style> de chaque page : à spécificité égale, le dernier
   déclaré gagne, ce qui permet de corriger sans toucher aux six pages. */

/* Sans retour à la ligne, les sept onglets d'un techno débordent de l'écran et
   emportent la page entière avec eux : on se retrouve à faire défiler vers la
   droite pour atteindre le contenu. index.html et materiel.html — les deux
   pages les plus utilisées — l'avaient oublié. */
.tabs { flex-wrap: wrap; }

/* Un code de salle ou un mot très long ne doit jamais élargir la page. */
.salle, .texte, .desc, .tuto-titre, .tuto-resume { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* 1,5 rem de marge sur un téléphone, c'est un tiers de la largeur perdu. */
  body { padding: 0.9rem 0.8rem 1.6rem; }

  .tabs { gap: 6px; margin-bottom: 12px; }
  .tab { font-size: 12px; padding: 5px 10px; }

  h1 { font-size: 19px; }
  header { gap: 10px; margin-bottom: 1rem; }
  .panel { padding: 1rem; }

  /* Les en-têtes mettent le titre et les boutons sur une même ligne : à
     l'étroit, ils doivent pouvoir passer dessous plutôt que se comprimer. */
  header > div { min-width: 0; }

  /* Le formulaire de signalement occupe presque tout l'écran : autant lui
     laisser la place. */
  .plan-overlay { padding: 8px; }
  .plan-panel { max-height: 92vh; }

  /* Les grilles du plan défilent déjà dans leur carte ; on réduit encore la
     marge pour qu'un bâtiment large tienne plus souvent d'un seul tenant. */
  .bat-card { padding: 10px 10px 12px; }

  /* Suggestions : la colonne du bouton de vote peut se resserrer. */
  .item { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 12px; }

  /* Tutos : l'indentation du corps mangeait la largeur du texte. */
  .tuto-corps { padding-left: 16px; padding-right: 12px; }
  .barre { flex-wrap: wrap; }
  .barre input { min-width: 100%; }
}

/* Un tableau ne se replie pas. Plutôt que de laisser la page partir de
   travers, on le fait défiler dans son propre cadre. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .table-scroll table { min-width: 540px; }
}