Responsive mobile

- Anti-debordement horizontal global (overflow-x hidden, img max-width)
- Container : padding reduit a 16px sous 640px
- En-tete/pied de page : padding horizontal fluide (clamp), en-tete wrap
- Titres principaux en clamp() (accueil hero/h2, annuaire, fiche) pour
  ne plus deborder sur petit ecran
- Liste adherents du back-office : defilement horizontal (.table-scroll)
  au lieu de colonnes ecrasees

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/globals.css

@@ -270,6 +270,24 @@ button {
   .grid-3 {
     grid-template-columns: 1fr;
   }
+  .container {
+    padding: 0 16px;
+  }
+}
+
+/* Évite tout débordement horizontal sur mobile. */
+html,
+body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+img {
+  max-width: 100%;
+}
+/* Tables/listes larges du back-office : défilement horizontal contenu. */
+.table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ---- Backend layout ---- */