update

client/src/components/UniverseSlotMachine.jsx

@@ -96,7 +96,6 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
         height: isMobile ? "60px" : "80px",
         overflow: "hidden",
         position: "relative",
-        backgroundColor: "#1a1a1a",
         borderRadius: 2,
         border: "1px solid rgba(255,255,255,0.1)",
         "&::before, &::after": {
@@ -111,11 +110,12 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
         "&::before": {
           top: 0,
           background:
-            "linear-gradient(to bottom, #1a1a1a 0%, transparent 100%)",
+            "linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)",
         },
         "&::after": {
           bottom: 0,
-          background: "linear-gradient(to top, #1a1a1a 0%, transparent 100%)",
+          background:
+            "linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)",
         },
       }}
     >
@@ -214,7 +214,6 @@ export const UniverseSlotMachine = ({
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
-        background: "#1a1a1a",
         p: isMobile ? 2 : 3,
       }}
     >

client/src/pages/Game.jsx

@@ -349,7 +349,6 @@ function GameContent() {
           alignItems: "center",
           justifyContent: "center",
           position: "relative",
-          backgroundColor: "background.default",
         }}
       >
         <LinearProgress
@@ -368,7 +367,7 @@ function GameContent() {
   // Slot machine : dès que l'univers est disponible
   if (gameUniverse && slotMachineState.style && isInitialLoading) {
     return (
-      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
+      <Box sx={{ width: "100%", height: "100vh" }}>
         <UniverseSlotMachine
           style={slotMachineState.style}
           genre={slotMachineState.genre}
@@ -399,7 +398,6 @@ function GameContent() {
           alignItems: "center",
           justifyContent: "center",
           position: "relative",
-          backgroundColor: "background.default",
         }}
       >
         <LinearProgress
@@ -421,13 +419,12 @@ function GameContent() {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3, ease: "easeInOut" }}
-      style={{ backgroundColor: "#121212", width: "100%" }}
+      style={{ width: "100%" }}
     >
       <Box
         sx={{
           height: "100vh",
           width: "100vw",
-          backgroundColor: "grey.900",
           position: "relative",
           overflow: "hidden",
         }}
@@ -440,7 +437,6 @@ function GameContent() {
             height: "100%",
             width: "100%",
             position: "relative",
-            backgroundColor: "grey.900",
           }}
         >
           {error ? (

client/src/theme.js

@@ -3,6 +3,10 @@ import { createTheme } from "@mui/material/styles";
 export const theme = createTheme({
   palette: {
     mode: "dark",
+    background: {
+      default: "#121212",
+      paper: "#121212",
+    },
   },
   typography: {
     fontFamily: '"Action Man", "Roboto", "Helvetica", "Arial", sans-serif',