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/components/SiteFooter.tsx

@@ -2,7 +2,7 @@ import { ContactModalButton } from "./ContactModalButton";
 
 export function SiteFooter() {
   return (
-    <footer style={{ background: "#EFE9DA", borderTop: "1px solid #e2d6bd", padding: "28px 56px" }}>
+    <footer style={{ background: "#EFE9DA", borderTop: "1px solid #e2d6bd", padding: "28px clamp(16px, 5vw, 56px)" }}>
       <div
         className="container"
         style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}

src/components/SiteHeader.tsx

@@ -15,8 +15,9 @@ export function SiteHeader({ active, logo = false }: { active?: string; logo?: b
         display: "flex",
         alignItems: "center",
         justifyContent: logo ? "space-between" : "flex-end",
-        padding: "18px 56px",
+        padding: "18px clamp(16px, 5vw, 56px)",
         gap: 20,
+        flexWrap: "wrap",
       }}
     >
       {logo && (