Promotions : la page publique suit le gabarit des pages internes

La première version reprenait le style d'une *section* de l'accueil — un grand
cartouche blanc arrondi — qui détonnait à côté de l'annuaire et de
« L'association ». Elle suit maintenant le même gabarit que l'annuaire :

- `SiteHeader … logo` : toutes les pages internes affichent le logo, seule
  l'accueil s'en passe.
- Bloc de titre sur le fond beige (pastille « N offres en cours », `<h1>` au
  même `clamp`, chapeau, étincelles) au lieu du cartouche.
- Grille de cartes à même la page, `gap` aligné sur les autres listes.
- Bandeau d'adhésion bleu en pied de page, identique à celui de l'annuaire.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb

src/app/promotions/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Sparkle } from "@/components/Sparkle";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
+import { MembershipModalButton } from "@/components/MembershipModalButton";
 import { PromoCard } from "@/components/PromoCard";
 import { JsonLd } from "@/components/JsonLd";
 import { getLivePromotions } from "@/lib/queries";
@@ -31,7 +32,7 @@ export default async function PromotionsPage() {
 
   return (
     <div style={{ background: "#F6F2E8", minHeight: "100vh", fontFamily: "'Public Sans',sans-serif", color: "#33291D" }}>
-      <SiteHeader active="promotions" />
+      <SiteHeader active="promotions" logo />
       <JsonLd
         data={[
           breadcrumbJsonLd(baseUrl, [
@@ -42,28 +43,18 @@ export default async function PromotionsPage() {
         ]}
       />
 
-      <main className="container">
-        <section
-          style={{
-            position: "relative",
-            margin: "30px 0 10px",
-            background: "#fff",
-            border: "1px solid #e6dcc6",
-            borderRadius: 24,
-            padding: "38px 36px 42px",
-            overflow: "hidden",
-            boxShadow: "0 26px 60px -40px rgba(40,30,15,0.5)",
-          }}
-        >
-          <Sparkle color="#E0A63C" size={20} style={{ top: 28, right: 44 }} duration={3.4} />
-          <Sparkle color="#6FB0C6" size={13} style={{ top: 64, right: 96 }} duration={2.7} delay={0.5} />
-
+      <main className="container" style={{ paddingBottom: 56 }}>
+        {/* title block */}
+        <section style={{ position: "relative", padding: "14px 0 22px", overflow: "hidden" }}>
+          <Sparkle color="#E0A63C" size={18} style={{ top: 22, right: 30 }} duration={3.2} />
+          <Sparkle color="#6FB0C6" size={12} style={{ top: 60, right: 90 }} duration={2.7} delay={0.5} />
           <div
             style={{
               display: "inline-flex",
               alignItems: "center",
-              gap: 8,
-              background: "#fdeccd",
+              gap: 9,
+              background: "#fff",
+              border: "1px solid #e6dcc6",
               color: "#9a6638",
               fontSize: 12,
               letterSpacing: "0.12em",
@@ -71,62 +62,79 @@ export default async function PromotionsPage() {
               fontWeight: 800,
               padding: "6px 13px",
               borderRadius: 999,
-              marginBottom: 12,
+              marginBottom: 14,
             }}
           >
-            Bons plans
+            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#E0A63C" }} />
+            {promos.length} offre{promos.length > 1 ? "s" : ""} en cours
           </div>
-          <h1
-            className="font-display"
-            style={{ fontWeight: 800, fontSize: "clamp(24px, 5vw, 34px)", letterSpacing: "-0.02em", margin: 0, color: "#26201a" }}
-          >
-            Les promotions de nos adhérents
+          <h1 className="font-display" style={{ fontWeight: 800, fontSize: "clamp(26px, 6vw, 40px)", letterSpacing: "-0.02em", margin: "0 0 8px", color: "#26201a" }}>
+            Les bons plans de nos adhérents
           </h1>
-          <p style={{ margin: "8px 0 0", color: "#8c8068", fontSize: 15, maxWidth: 640, lineHeight: 1.6 }}>
+          <p style={{ margin: 0, fontSize: 16.5, color: "#6c6150", maxWidth: 560 }}>
             Toutes les offres en cours chez les commerçants, artisans et entreprises du réseau.
             Chaque promotion renvoie vers la fiche de son commerce.
           </p>
-
-          {promos.length === 0 ? (
-            <div
-              style={{
-                marginTop: 26,
-                border: "1px dashed #d8cdb4",
-                borderRadius: 16,
-                padding: "34px 20px",
-                textAlign: "center",
-                color: "#8c8068",
-                fontSize: 14.5,
-                lineHeight: 1.6,
-              }}
-            >
-              Aucune promotion en cours pour le moment.
-              <br />
-              <Link href="/annuaire" style={{ color: "#9a6638", fontWeight: 700 }}>
-                Parcourir l&apos;annuaire des adhérents →
-              </Link>
-            </div>
-          ) : (
-            <>
-              <div style={{ marginTop: 22, fontSize: 13, color: "#a99c82", fontWeight: 600 }}>
-                {promos.length} offre{promos.length > 1 ? "s" : ""} en cours
-              </div>
-              <div className="grid grid-3" style={{ marginTop: 14 }}>
-                {promos.map((p) => (
-                  <PromoCard key={p.id} promo={p} />
-                ))}
-              </div>
-            </>
-          )}
         </section>
 
-        <p style={{ margin: "22px 0 40px", fontSize: 14, color: "#8c8068" }}>
-          Vous êtes commerçant du Bassin de Pompey ?{" "}
-          <Link href="/association" style={{ color: "#9a6638", fontWeight: 700 }}>
-            Rejoignez Plein R
-          </Link>{" "}
-          pour publier vos offres ici.
-        </p>
+        {promos.length === 0 ? (
+          <section
+            style={{
+              background: "#fff",
+              border: "1px solid #e6dcc6",
+              borderRadius: 18,
+              padding: "38px 24px",
+              textAlign: "center",
+              color: "#8c8068",
+              fontSize: 15,
+              lineHeight: 1.7,
+            }}
+          >
+            Aucune promotion en cours pour le moment.
+            <br />
+            <Link href="/annuaire" style={{ color: "#9a6638", fontWeight: 700 }}>
+              Parcourir l&apos;annuaire des adhérents →
+            </Link>
+          </section>
+        ) : (
+          <div className="grid grid-3" style={{ gap: 20 }}>
+            {promos.map((p) => (
+              <PromoCard key={p.id} promo={p} />
+            ))}
+          </div>
+        )}
+
+        {/* join CTA */}
+        <section
+          style={{
+            marginTop: 34,
+            position: "relative",
+            background: "linear-gradient(120deg,#13324F,#1d4a72)",
+            borderRadius: 20,
+            padding: "34px 40px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 28,
+            overflow: "hidden",
+            flexWrap: "wrap",
+          }}
+        >
+          <Sparkle color="#E0A63C" size={18} style={{ top: 20, right: 40 }} duration={3.2} />
+          <div>
+            <div style={{ fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "#9fc6e6", fontWeight: 700, marginBottom: 8 }}>
+              Vous êtes commerçant du Bassin de Pompey ?
+            </div>
+            <h2 className="font-display" style={{ fontWeight: 800, fontSize: 26, margin: 0, color: "#fff" }}>
+              Publiez vos offres sur Plein R
+            </h2>
+          </div>
+          <MembershipModalButton
+            label="Adhérer à l'association"
+            className="font-display"
+            style={{ border: "none", background: "#E0A63C", color: "#33291D", fontWeight: 700, fontSize: 15.5, padding: "14px 26px", borderRadius: 12, whiteSpace: "nowrap" }}
+          />
+        </section>
       </main>
 
       <SiteFooter />