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/backend/adherents/page.tsx

@@ -89,7 +89,8 @@ export default async function AdherentsPage({
 
       <AddMemberPanel categories={cats} />
 
-      <div style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 16, overflow: "hidden" }}>
+      <div className="table-scroll">
+      <div style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 16, overflow: "hidden", minWidth: 560 }}>
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 22px", borderBottom: "1px solid #f0e8d6", gap: 12, flexWrap: "wrap" }}>
           <form style={{ display: "flex", alignItems: "center", gap: 10, background: "#faf7ef", border: "1px solid #e6dcc6", borderRadius: 10, padding: "8px 14px" }}>
             <span style={{ width: 9, height: 9, border: "2px solid #9a8d72", borderRadius: "50%" }} />
@@ -156,6 +157,7 @@ export default async function AdherentsPage({
           );
         })}
       </div>
+      </div>
     </div>
   );
 }