feat: système de zones visuelles — fondation layout 3 couches

- zones.scss : système data-zone avec biomes (swamp, landing, page)
- Home.jsx migré de .game-cover → zone[data-zone="swamp"]
- Landing.jsx migré → zone[data-zone="landing"]
- Background sorti de home.scss → zones.scss (un seul endroit)
- Prêt pour ajouter des biomes (cave, volcano, ocean) en une ligne

Frontend/src/App.jsx

@@ -7,6 +7,7 @@ import { GameTick } from "./components/GameTick";
 import { GameSync } from "./components/GameSync";
 
 import "./scss/root.scss";
+import "./scss/zones.scss";
 import "./scss/components/footer.scss";
 
 import navData from "./data/NavBarData.json";

Frontend/src/pages/Home.jsx

@@ -110,7 +110,7 @@ export default function Home() {
   }, [toggleRain]);
 
   return (
-    <main className="game-cover">
+    <main className="zone" data-zone="swamp">
       <Helmet>
         <meta name="description" content="Clickerz — Clicker idle dans le Tetard Universe." />
         <title>Clickerz — Tetard Universe</title>

Frontend/src/pages/Landing.jsx

@@ -11,7 +11,7 @@ export default function Landing() {
           content="Clickerz — Clicker idle dans le Tetard Universe. Fais éclore des têtards, évolue et domine le marais !"
         />
       </Helmet>
-      <main className="min-h-[92vh] mt-20 flex flex-col items-center justify-center gap-6 bg-[var(--bg-color)]">
+      <main className="zone mt-20 flex flex-col items-center justify-center gap-6" data-zone="landing">
         <img
           src="/svg/tadpole.svg"
           alt="Têtard Clickerz"

Frontend/src/scss/home.scss

@@ -1,17 +1,4 @@
-// home.scss — Game view styles
-
-.game-cover {
-  background-image: url("/webp/bg-cover.webp");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center 70%; // image carrée → garde nénuphars/eau visible
-  width: 100%;
-  min-height: 92vh;
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
+// home.scss — Game view styles (layout géré par zones.scss)
 
 // --- Clicker zone ---
 

Frontend/src/scss/zones.scss

@@ -0,0 +1,41 @@
+// zones.scss — Système de zones visuelles
+// Chaque page déclare sa zone via data-zone sur le wrapper.
+// Le background, les tons, l'ambiance changent — navbar/footer restent fixes.
+//
+// Usage : <div className="zone" data-zone="swamp"> ... </div>
+// Ajouter un nouveau biome : juste un nouveau [data-zone="xxx"] ici.
+
+.zone {
+  width: 100%;
+  min-height: 92vh;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: background-image 0.5s ease;
+}
+
+// --- Biomes ---
+
+[data-zone="swamp"] {
+  background-image: url("/webp/bg-cover.webp");
+  background-position: center 70%;
+}
+
+[data-zone="landing"] {
+  background: var(--bg-color);
+  align-items: center;
+}
+
+[data-zone="page"] {
+  background: var(--bg-color);
+  align-items: flex-start;
+  min-height: auto;
+}
+
+// Futur :
+// [data-zone="cave"]    { background-image: url("/webp/bg-cave.webp"); }
+// [data-zone="volcano"] { background-image: url("/webp/bg-volcano.webp"); }
+// [data-zone="ocean"]   { background-image: url("/webp/bg-ocean.webp"); }