From a4915b445d62c1c8a37710388e3db6d74c7f613f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 27 Jun 2026 21:18:18 +0000
Subject: [PATCH] =?UTF-8?q?Cartes=20promo=20:=20cadre=20image=20carr=C3=A9?=
 =?UTF-8?q?=201:1=20(adapt=C3=A9=20aux=20visuels=20Facebook)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les visuels promo sont carrés (posts Facebook) : un cadre 1200/630 laissait des
bandes floues sur les côtés. Passage du cadre image en 1:1 partout (accueil,
fiche, aperçu espace adhérent, modération) → les images carrées remplissent
sans bords. Conseil d'upload : image carrée (1080×1080).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL
---
 src/app/adherents/[id]/page.tsx            | 2 +-
 src/app/backend/espace/MemberSpaceForm.tsx | 4 ++--
 src/app/backend/promotions/page.tsx        | 2 +-
 src/app/page.tsx                           | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/adherents/[id]/page.tsx b/src/app/adherents/[id]/page.tsx
index 6dd82cc..4ca7316 100644
--- a/src/app/adherents/[id]/page.tsx
+++ b/src/app/adherents/[id]/page.tsx
@@ -267,7 +267,7 @@ export default async function FicheAdherentPage({
               ) : (
                 promos.map((p, idx) => (
                   <article key={p.id} className="lift" style={{ border: "1px solid #ece3d0", borderRadius: 16, overflow: "hidden", marginBottom: idx === promos.length - 1 ? 0 : 14 }}>
-                    <div style={{ position: "relative", aspectRatio: "1200 / 630", background: STRIPE_WARM, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <div style={{ position: "relative", aspectRatio: "1 / 1", background: STRIPE_WARM, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
                       {p.imageUrl && <PromoImage src={p.imageUrl} alt={p.title} />}
                       {!p.imageUrl && (<span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>photo de l&apos;offre</span>)}
                       {p.badge && (
diff --git a/src/app/backend/espace/MemberSpaceForm.tsx b/src/app/backend/espace/MemberSpaceForm.tsx
index 11dbeba..d26ecfc 100644
--- a/src/app/backend/espace/MemberSpaceForm.tsx
+++ b/src/app/backend/espace/MemberSpaceForm.tsx
@@ -105,7 +105,7 @@ export function MemberSpaceForm({
                 <div style={{ fontSize: 13.5, fontWeight: 700, color: "#6c6150" }}>
                   Cliquez pour choisir une image
                 </div>
-                <div style={{ fontSize: 12, color: "#a99c82" }}>JPG ou PNG · 1200×630 conseillé</div>
+                <div style={{ fontSize: 12, color: "#a99c82" }}>JPG ou PNG · image carrée conseillée (ex. 1080×1080)</div>
               </>
             )}
           </div>
@@ -188,7 +188,7 @@ export function MemberSpaceForm({
           <div
             style={{
               position: "relative",
-              aspectRatio: "1200 / 630",
+              aspectRatio: "1 / 1",
               background: STRIPE_WARM,
               overflow: "hidden",
               display: "flex",
diff --git a/src/app/backend/promotions/page.tsx b/src/app/backend/promotions/page.tsx
index cf98351..902d140 100644
--- a/src/app/backend/promotions/page.tsx
+++ b/src/app/backend/promotions/page.tsx
@@ -75,7 +75,7 @@ export default async function PromotionsPage() {
               <div
                 style={{
                   position: "relative",
-                  aspectRatio: "1200 / 630",
+                  aspectRatio: "1 / 1",
                   background: isPending ? STRIPE_COOL : STRIPE_WARM,
                   overflow: "hidden",
                   display: "flex",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2283f25..30a706e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -233,7 +233,7 @@ export default async function AccueilPage() {
                 <div
                   style={{
                     position: "relative",
-                    aspectRatio: "1200 / 630",
+                    aspectRatio: "1 / 1",
                     background: STRIPE_WARM,
                     overflow: "hidden",
                     display: "flex",