Améliore les modales et les informations du site

src/components/ContactModalButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { Modal } from "./Modal";
 import { submitContactMessage } from "@/app/actions/public";
 
@@ -74,6 +75,13 @@ export function ContactModalButton({
 
             {error && <div style={errorBox}>{error}</div>}
 
+            <p style={{ margin: "0 0 12px", fontSize: 11.5, lineHeight: 1.5, color: "#8c8068" }}>
+              Vos informations servent uniquement à répondre à votre message. Consultez notre{" "}
+              <Link href="/confidentialite" target="_blank" rel="noopener noreferrer" style={{ color: "#9a6638", fontWeight: 700 }}>
+                politique de confidentialité
+              </Link>.
+            </p>
+
             <button type="submit" className="lift-cta" disabled={pending} style={{ ...primaryBtn, opacity: pending ? 0.6 : 1 }}>
               {pending ? "Envoi…" : "Envoyer le message"}
             </button>

src/components/LegalPage.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { SiteFooter } from "./SiteFooter";
+import { SiteHeader } from "./SiteHeader";
+
+export function LegalPage({ title, intro, children }: { title: string; intro: string; children: ReactNode }) {
+  return (
+    <div style={{ background: "#F6F2E8", minHeight: "100vh", fontFamily: "'Public Sans',sans-serif", color: "#33291D" }}>
+      <SiteHeader logo />
+      <main className="container" style={{ paddingTop: 24, paddingBottom: 64 }}>
+        <Link href="/" style={{ color: "#9a6638", fontSize: 13.5, fontWeight: 700, textDecoration: "none" }}>
+          ← Retour à l&apos;accueil
+        </Link>
+        <article
+          className="legal-content"
+          style={{ maxWidth: 860, marginTop: 22, background: "#fff", border: "1px solid #e6dcc6", borderRadius: 22, padding: "clamp(24px, 5vw, 48px)", boxShadow: "0 24px 55px -42px rgba(40,30,15,0.55)" }}
+        >
+          <div style={{ color: "#9a6638", fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, marginBottom: 10 }}>
+            Informations du site
+          </div>
+          <h1 className="font-display" style={{ fontSize: "clamp(30px, 6vw, 44px)", letterSpacing: "-0.03em", color: "#26201a", margin: "0 0 12px" }}>
+            {title}
+          </h1>
+          <p style={{ fontSize: 16, maxWidth: 680 }}>{intro}</p>
+          {children}
+        </article>
+      </main>
+      <SiteFooter />
+    </div>
+  );
+}

src/components/MembershipModalButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { Modal } from "./Modal";
 import { submitMembershipRequest } from "@/app/actions/public";
 
@@ -75,6 +76,13 @@ export function MembershipModalButton({
 
             {error && <div style={errorBox}>{error}</div>}
 
+            <p style={{ margin: "0 0 12px", fontSize: 11.5, lineHeight: 1.5, color: "#8c8068" }}>
+              Vos informations servent uniquement à traiter votre demande. Consultez notre{" "}
+              <Link href="/confidentialite" target="_blank" rel="noopener noreferrer" style={{ color: "#9a6638", fontWeight: 700 }}>
+                politique de confidentialité
+              </Link>.
+            </p>
+
             <button type="submit" className="lift-cta" disabled={pending} style={{ ...primaryBtn, opacity: pending ? 0.6 : 1 }}>
               {pending ? "Envoi…" : "Envoyer ma demande"}
             </button>

src/components/Modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import { createPortal } from "react-dom";
 
 export function Modal({
   open,
@@ -31,7 +32,7 @@ export function Modal({
 
   if (!open) return null;
 
-  return (
+  return createPortal(
     <div
       role="dialog"
       aria-modal="true"
@@ -88,6 +89,7 @@ export function Modal({
         </div>
         {children}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }

src/components/SiteFooter.tsx

@@ -1,28 +1,49 @@
+import Link from "next/link";
 import { ContactModalButton } from "./ContactModalButton";
 
 export function SiteFooter() {
+  const year = new Date().getFullYear();
+
   return (
-    <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" }}
-      >
-        <div style={{ fontSize: 13, color: "#8c8068", textAlign: "right", lineHeight: 1.7 }}>
-          <ContactModalButton
-            label="Nous contacter"
-            style={{
-              background: "none",
-              border: "none",
-              padding: 0,
-              font: "inherit",
-              color: "#9a6638",
-              fontWeight: 700,
-              textDecoration: "underline",
-            }}
-          />
-          {" · Bassin de Pompey"}
-          <br />
-          Réseau · Rencontre · Réussite
+    <footer style={{ background: "#EFE9DA", borderTop: "1px solid #e2d6bd" }}>
+      <div className="container" style={{ paddingTop: 34, paddingBottom: 24 }}>
+        <div className="footer-grid">
+          <div>
+            <Link href="/" aria-label="Plein R — accueil" style={{ display: "inline-flex" }}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src="/assets/logo.png" alt="Plein R" style={{ width: 118, height: "auto", display: "block" }} />
+            </Link>
+            <p style={{ margin: "12px 0 0", maxWidth: 370, fontSize: 13.5, lineHeight: 1.65, color: "#6c6150" }}>
+              Association des commerçants et entreprises du Bassin de Pompey.
+              Réseau · Rencontre · Réussite.
+            </p>
+          </div>
+
+          <div>
+            <div className="footer-title">Accès rapide</div>
+            <div className="footer-links">
+              <Link href="/annuaire">Annuaire</Link>
+              <Link href="/#promotions">Promotions</Link>
+              <Link href="/login">Connexion</Link>
+            </div>
+          </div>
+
+          <div>
+            <div className="footer-title">Informations</div>
+            <div className="footer-links">
+              <ContactModalButton
+                label="Nous contacter"
+                style={{ background: "none", border: "none", padding: 0, font: "inherit", color: "inherit", textAlign: "left" }}
+              />
+              <Link href="/mentions-legales">Mentions légales</Link>
+              <Link href="/confidentialite">Confidentialité</Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <span>© {year} Plein R. Tous droits réservés.</span>
+          <span>Bassin de Pompey</span>
         </div>
       </div>
     </footer>