Logo adaptatif (contain) dans le cadre du profil et les previews

- Avatar logo de la fiche adherent : <img> object-fit contain centre,
  cadre a overflow hidden -> plus de debordement quel que soit le ratio
- ImageField : prop fit (cover|contain). Champs logo en contain (apercu
  centre, non etire) dans l'edition fiche et l'espace adherent

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/adherents/[id]/page.tsx

@@ -112,19 +112,25 @@ export default async function FicheAdherentPage({
                 width: 118,
                 height: 118,
                 borderRadius: 22,
-                background: member.logoUrl ? `url(${member.logoUrl})` : "#F6F2E8",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
+                background: "#fff",
                 border: "4px solid #fff",
                 marginTop: -54,
                 flexShrink: 0,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
+                overflow: "hidden",
                 boxShadow: "0 14px 30px -16px rgba(40,30,15,0.4)",
               }}
             >
-              {!member.logoUrl && (
+              {member.logoUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={member.logoUrl}
+                  alt={member.name}
+                  style={{ maxWidth: "86%", maxHeight: "86%", objectFit: "contain", display: "block" }}
+                />
+              ) : (
                 <span className="font-display" style={{ fontWeight: 800, fontSize: 34, color: "#9a6638" }}>{initialsOf(member.name)}</span>
               )}
             </div>

src/app/backend/adherents/[id]/page.tsx

@@ -134,7 +134,7 @@ export default async function EditMemberPage({
 
         <div className="grid grid-2" style={{ gap: 16, marginTop: 16 }}>
           <ImageField name="coverUrl" label="Image d'entête (bannière)" defaultValue={member.coverUrl ?? ""} height={130} />
-          <ImageField name="logoUrl" label="Logo" defaultValue={member.logoUrl ?? ""} height={130} />
+          <ImageField name="logoUrl" label="Logo" defaultValue={member.logoUrl ?? ""} height={130} fit="contain" />
         </div>
 
         <div style={{ marginTop: 16 }}>

src/app/backend/espace/page.tsx

@@ -126,7 +126,7 @@ export default async function EspacePage() {
 
           <div className="grid grid-2" style={{ gap: 16, marginTop: 16 }}>
             <ImageField name="coverUrl" label="Image d'entête (bannière)" defaultValue={profile.coverUrl ?? ""} height={130} />
-            <ImageField name="logoUrl" label="Logo" defaultValue={profile.logoUrl ?? ""} height={130} />
+            <ImageField name="logoUrl" label="Logo" defaultValue={profile.logoUrl ?? ""} height={130} fit="contain" />
           </div>
 
           <div style={{ marginTop: 16 }}>

src/components/ImageField.tsx

@@ -7,11 +7,13 @@ export function ImageField({
   label,
   defaultValue = "",
   height = 130,
+  fit = "cover",
 }: {
   name: string;
   label: string;
   defaultValue?: string;
   height?: number;
+  fit?: "cover" | "contain";
 }) {
   const [value, setValue] = useState(defaultValue);
   const [error, setError] = useState<string | null>(null);
@@ -48,7 +50,7 @@ export function ImageField({
           height,
           borderRadius: 12,
           border: "1px dashed #d6c9ad",
-          background: value ? `center/cover no-repeat url(${value})` : "#f6efdc",
+          background: value && fit === "cover" ? `center/cover no-repeat url(${value})` : "#fff",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -56,6 +58,10 @@ export function ImageField({
           marginBottom: 10,
         }}
       >
+        {value && fit === "contain" && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={value} alt="" style={{ maxWidth: "86%", maxHeight: "86%", objectFit: "contain", display: "block" }} />
+        )}
         {!value && <span style={{ fontSize: 13, color: "#a99c82" }}>Aucune image</span>}
       </div>