From c199d7a7db1ca5968bcba9ee74e50f28cbd61103 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Sat, 27 Jun 2026 11:07:07 +0200
Subject: [PATCH] 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/adherents/[id]/page.tsx    |  2 +-
 src/app/annuaire/page.tsx          |  2 +-
 src/app/backend/adherents/page.tsx |  4 +++-
 src/app/globals.css                | 18 ++++++++++++++++++
 src/app/page.tsx                   |  8 ++++----
 src/components/SiteFooter.tsx      |  2 +-
 src/components/SiteHeader.tsx      |  3 ++-
 7 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/app/adherents/[id]/page.tsx b/src/app/adherents/[id]/page.tsx
index 658e305..7854917 100644
--- a/src/app/adherents/[id]/page.tsx
+++ b/src/app/adherents/[id]/page.tsx
@@ -136,7 +136,7 @@ export default async function FicheAdherentPage({
             </div>
             <div style={{ flex: 1, minWidth: 240, paddingTop: 20 }}>
               <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
-                <h1 className="font-display" style={{ fontWeight: 800, fontSize: 32, letterSpacing: "-0.02em", margin: 0, color: "#26201a" }}>{member.name}</h1>
+                <h1 className="font-display" style={{ fontWeight: 800, fontSize: "clamp(22px, 5vw, 32px)", letterSpacing: "-0.02em", margin: 0, color: "#26201a" }}>{member.name}</h1>
                 {member.categoryLabel && (
                   <span style={{ background: "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 13px", fontSize: 12, fontWeight: 700 }}>{member.categoryLabel}</span>
                 )}
diff --git a/src/app/annuaire/page.tsx b/src/app/annuaire/page.tsx
index 82036eb..3d46ac1 100644
--- a/src/app/annuaire/page.tsx
+++ b/src/app/annuaire/page.tsx
@@ -72,7 +72,7 @@ export default async function AnnuairePage({
             <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#E0A63C" }} />
             {members.length} adhérents
           </div>
-          <h1 className="font-display" style={{ fontWeight: 800, fontSize: 40, letterSpacing: "-0.02em", margin: "0 0 8px", color: "#26201a" }}>
+          <h1 className="font-display" style={{ fontWeight: 800, fontSize: "clamp(26px, 6vw, 40px)", letterSpacing: "-0.02em", margin: "0 0 8px", color: "#26201a" }}>
             L&apos;annuaire des commerçants &amp; entreprises
           </h1>
           <p style={{ margin: 0, fontSize: 16.5, color: "#6c6150", maxWidth: 560 }}>
diff --git a/src/app/backend/adherents/page.tsx b/src/app/backend/adherents/page.tsx
index df7589b..a50b472 100644
--- a/src/app/backend/adherents/page.tsx
+++ b/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>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 8932bd0..bcdba34 100644
--- a/src/app/globals.css
+++ b/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 ---- */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 787d49d..87e9697 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -83,8 +83,8 @@ export default async function AccueilPage() {
               className="font-display"
               style={{
                 fontWeight: 800,
-                fontSize: 52,
-                lineHeight: 1.03,
+                fontSize: "clamp(30px, 7vw, 52px)",
+                lineHeight: 1.05,
                 letterSpacing: "-0.02em",
                 margin: "0 0 8px",
                 color: "#26201a",
@@ -199,7 +199,7 @@ export default async function AccueilPage() {
               </div>
               <h2
                 className="font-display"
-                style={{ fontWeight: 800, fontSize: 32, letterSpacing: "-0.02em", margin: 0, color: "#26201a" }}
+                style={{ fontWeight: 800, fontSize: "clamp(22px, 5vw, 32px)", letterSpacing: "-0.02em", margin: 0, color: "#26201a" }}
               >
                 Les promotions de nos adhérents
               </h2>
@@ -332,7 +332,7 @@ export default async function AccueilPage() {
           <Sparkle color="#E0A63C" size={18} style={{ top: 24, left: 60 }} duration={3.4} />
           <Sparkle color="#6FB0C6" size={22} style={{ bottom: 26, right: 80 }} duration={2.8} delay={0.7} />
           <Reveal className="reveal">
-            <h2 className="font-display" style={{ fontWeight: 800, fontSize: 30, margin: "0 0 10px", color: "#fff" }}>
+            <h2 className="font-display" style={{ fontWeight: 800, fontSize: "clamp(22px, 5vw, 30px)", margin: "0 0 10px", color: "#fff" }}>
               Faites partie de l&apos;aventure Plein R
             </h2>
             <p style={{ margin: "0 auto 22px", fontSize: 15.5, color: "#f4e6d3", maxWidth: 480 }}>
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index b45f01c..60befff 100644
--- a/src/components/SiteFooter.tsx
+++ b/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" }}
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index a5211f8..4acf716 100644
--- a/src/components/SiteHeader.tsx
+++ b/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 && (