Add challenges background preference support: Extend site preferences and related components to include challengesBackground, update API and UI to handle new background image settings for challenges.

components/challenges/ChallengesSection.tsx

@@ -204,18 +204,28 @@ export default function ChallengesSection({
   };
 
   return (
-    <section
-      className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16"
-      style={{
-        backgroundImage: `url(${backgroundImage})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
-    >
-      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
+    <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('${backgroundImage}')`,
+        }}
+      >
+        {/* Dark overlay for readability */}
+        <div
+          className="absolute inset-0 bg-gradient-to-b"
+          style={{
+            background: `linear-gradient(to bottom,
+              color-mix(in srgb, var(--background) 70%, transparent),
+              color-mix(in srgb, var(--background) 60%, transparent),
+              color-mix(in srgb, var(--background) 80%, transparent)
+            )`,
+          }}
+        />
+      </div>
 
-      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
+      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
         <SectionTitle variant="gradient" size="md" className="mb-8 text-center">
           DÉFIS ENTRE JOUEURS
         </SectionTitle>