feat: introduce customizable background options with new gradient and solid color styles; integrate BackgroundProvider and BackgroundCard components for enhanced user experience in settings and layout

app/globals.css

@@ -375,6 +375,54 @@
     overflow: hidden;
   }
 
+  /* Fonds personnalisables */
+  .page-background.bg-default {
+    background: linear-gradient(
+      135deg,
+      oklch(0.98 0.01 280) 0%,
+      oklch(0.97 0.012 270) 50%,
+      oklch(0.98 0.01 290) 100%
+    );
+  }
+
+  .page-background.bg-gradient-blue {
+    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
+  }
+
+  .page-background.bg-gradient-purple {
+    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%);
+  }
+
+  .page-background.bg-gradient-green {
+    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
+  }
+
+  .page-background.bg-gradient-orange {
+    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
+  }
+
+  .page-background.bg-solid-light {
+    background: #ffffff;
+  }
+
+  .page-background.bg-solid-dark {
+    background: #0f172a !important;
+  }
+
+  .page-background.bg-custom-image {
+    background-image: var(--custom-background-image);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+
+  .page-background.bg-custom-image::before,
+  .page-background.bg-solid-light::before,
+  .page-background.bg-solid-dark::before {
+    display: none;
+  }
+
   .page-background::before {
     content: "";
     position: fixed;
@@ -415,7 +463,7 @@
     opacity: 1;
   }
 
-  .dark .page-background {
+  .dark .page-background.bg-default {
     background: linear-gradient(
       135deg,
       oklch(0.1 0.015 280) 0%,
@@ -424,6 +472,30 @@
     );
   }
 
+  .dark .page-background.bg-gradient-blue {
+    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0369a1 100%);
+  }
+
+  .dark .page-background.bg-gradient-purple {
+    background: linear-gradient(135deg, #581c87 0%, #6b21a8 50%, #7c3aed 100%);
+  }
+
+  .dark .page-background.bg-gradient-green {
+    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #16a34a 100%);
+  }
+
+  .dark .page-background.bg-gradient-orange {
+    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #c2410c 100%);
+  }
+
+  .dark .page-background.bg-solid-light {
+    background: #f8fafc;
+  }
+
+  .dark .page-background.bg-solid-dark {
+    background: #0f172a !important;
+  }
+
   .dark .page-background::before {
     background:
       radial-gradient(
@@ -481,8 +553,11 @@
     content: "";
     position: absolute;
     inset: 0;
-    background-image: 
-      radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 2%, transparent) 1px, transparent 0);
+    background-image: radial-gradient(
+      circle at 1px 1px,
+      color-mix(in srgb, var(--foreground) 2%, transparent) 1px,
+      transparent 0
+    );
     background-size: 20px 20px;
     opacity: 0.15;
     pointer-events: none;
@@ -490,25 +565,46 @@
   }
 
   .dark .fintech-card::before {
-    background-image: 
-      radial-gradient(circle at 1px 1px, color-mix(in srgb, white 3%, transparent) 1px, transparent 0);
+    background-image: radial-gradient(
+      circle at 1px 1px,
+      color-mix(in srgb, white 3%, transparent) 1px,
+      transparent 0
+    );
     opacity: 0.1;
   }
 
   /* Texture plus prononcée pour les cards de statistiques */
   .stat-card-textured::before {
-    background-image: 
-      radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 3%, transparent) 1px, transparent 0),
-      radial-gradient(circle at 11px 11px, color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px, transparent 0);
-    background-size: 16px 16px, 24px 24px;
+    background-image:
+      radial-gradient(
+        circle at 1px 1px,
+        color-mix(in srgb, var(--foreground) 3%, transparent) 1px,
+        transparent 0
+      ),
+      radial-gradient(
+        circle at 11px 11px,
+        color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px,
+        transparent 0
+      );
+    background-size:
+      16px 16px,
+      24px 24px;
     opacity: 0.2;
     z-index: 1;
   }
 
   .dark .stat-card-textured::before {
-    background-image: 
-      radial-gradient(circle at 1px 1px, color-mix(in srgb, white 4%, transparent) 1px, transparent 0),
-      radial-gradient(circle at 11px 11px, color-mix(in srgb, white 2%, transparent) 1px, transparent 0);
+    background-image:
+      radial-gradient(
+        circle at 1px 1px,
+        color-mix(in srgb, white 4%, transparent) 1px,
+        transparent 0
+      ),
+      radial-gradient(
+        circle at 11px 11px,
+        color-mix(in srgb, white 2%, transparent) 1px,
+        transparent 0
+      );
     opacity: 0.15;
   }
 

app/layout.tsx

@@ -4,6 +4,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { AuthSessionProvider } from "@/components/providers/session-provider";
 import { QueryProvider } from "@/components/providers/query-provider";
+import { BackgroundProvider } from "@/components/providers/background-provider";
 
 const _geist = Geist({ subsets: ["latin"] });
 const _geistMono = Geist_Mono({ subsets: ["latin"] });
@@ -23,6 +24,7 @@ export default function RootLayout({
   return (
     <html lang="fr">
       <body className="font-sans antialiased">
+        <BackgroundProvider />
         <QueryProvider>
           <AuthSessionProvider>{children}</AuthSessionProvider>
         </QueryProvider>

app/settings/page.tsx

@@ -9,6 +9,7 @@ import {
   BackupCard,
   PasswordCard,
   ReconcileDateRangeCard,
+  BackgroundCard,
 } from "@/components/settings";
 import { useBankingData } from "@/lib/hooks";
 import type { BankingData } from "@/lib/types";
@@ -126,6 +127,8 @@ export default function SettingsPage() {
 
         <PasswordCard />
 
+        <BackgroundCard />
+
         <ReconcileDateRangeCard />
 
         <DangerZoneCard