From 4b12dc51649e6236fe80f5764a2e15ff5e4c0517 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 6 Sep 2026 15:10:41 +0000
Subject: [PATCH] =?UTF-8?q?Espace=20adh=C3=A9rent=20:=20r=C3=A9capitulatif?=
 =?UTF-8?q?=20des=20dates,=20aper=C3=A7u=20ramen=C3=A9=20=C3=A0=20sa=20tai?=
 =?UTF-8?q?lle=20r=C3=A9elle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La colonne de droite portait un aperçu étiré sur toute sa largeur : le visuel
carré rendait la carte démesurée, très loin de ce que verra le visiteur.

- L'aperçu est borné à 320 px, la largeur d'une carte dans la grille du site.
- Au-dessus, un récapitulatif « Dates de votre offre » : durée de validité et
  moment de publication, les deux informations que la carte ne montre pas.
  Sans saisie il affiche les valeurs par défaut en gris (« Sans date limite »,
  « Dès la validation par l'association ») ; des bornes incohérentes s'y
  signalent en rouge, comme sous le champ.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
---
 src/app/backend/espace/MemberSpaceForm.tsx | 55 +++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/app/backend/espace/MemberSpaceForm.tsx b/src/app/backend/espace/MemberSpaceForm.tsx
index b19315f..20596b8 100644
--- a/src/app/backend/espace/MemberSpaceForm.tsx
+++ b/src/app/backend/espace/MemberSpaceForm.tsx
@@ -19,6 +19,38 @@ const NETWORK_LABELS: Record<SocialNetwork, string> = {
   linkedin: "LinkedIn",
 };
 
+/** Une ligne du récapitulatif de dates, à droite du formulaire. */
+function SummaryRow({
+  label,
+  value,
+  tone,
+  last = false,
+}: {
+  label: string;
+  value: string;
+  tone: "set" | "muted" | "error";
+  last?: boolean;
+}) {
+  const color = tone === "error" ? "#d8472b" : tone === "set" ? "#3c3322" : "#a99c82";
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "baseline",
+        justifyContent: "space-between",
+        gap: 14,
+        padding: "12px 0",
+        borderBottom: last ? "none" : "1px solid #f0e8d6",
+      }}
+    >
+      <span style={{ fontSize: 12.5, color: "#9a8d72", fontWeight: 700, whiteSpace: "nowrap" }}>{label}</span>
+      <span style={{ fontSize: 13, color, fontWeight: tone === "muted" ? 500 : 700, textAlign: "right" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
 export function MemberSpaceForm({
   memberName,
   memberLogoUrl,
@@ -331,10 +363,31 @@ export function MemberSpaceForm({
 
       {/* LIVE PREVIEW */}
       <div>
+        {/* Récapitulatif des dates : quand l'offre paraît, combien de temps
+            elle reste. Deux informations que la carte ne montre pas. */}
+        <div style={{ fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "#9a8d72", fontWeight: 700, marginBottom: 12 }}>
+          Dates de votre offre
+        </div>
+        <div style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 14, padding: "4px 16px", marginBottom: 26 }}>
+          <SummaryRow
+            label="Durée de validité"
+            value={badRange ? "Dates incohérentes" : validity ?? "Sans date limite"}
+            tone={badRange ? "error" : validity ? "set" : "muted"}
+          />
+          <SummaryRow
+            label="Publication"
+            value={scheduleHint ? `Programmée ${scheduleHint}` : "Dès la validation par l'association"}
+            tone={scheduleHint ? "set" : "muted"}
+            last
+          />
+        </div>
+
         <div style={{ fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "#9a8d72", fontWeight: 700, marginBottom: 12 }}>
           Aperçu en direct
         </div>
-        <article style={{ background: "#fff", border: "1px solid #ece3d0", borderRadius: 18, overflow: "hidden", boxShadow: "0 18px 40px -26px rgba(40,30,15,0.5)" }}>
+        {/* Largeur bornée : la carte doit ressembler à celle du site, pas
+            occuper toute la colonne (le visuel carré la rendait démesurée). */}
+        <article style={{ maxWidth: 320, background: "#fff", border: "1px solid #ece3d0", borderRadius: 18, overflow: "hidden", boxShadow: "0 18px 40px -26px rgba(40,30,15,0.5)" }}>
           <div
             style={{
               position: "relative",