From 39f683a31ef7269c3df625316d703334b588a957 Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Fri, 20 Mar 2026 16:33:47 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20syst=C3=A8me=20de=20zones=20visuelles?=
 =?UTF-8?q?=20=E2=80=94=20fondation=20layout=203=20couches?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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           |  1 +
 Frontend/src/pages/Home.jsx    |  2 +-
 Frontend/src/pages/Landing.jsx |  2 +-
 Frontend/src/scss/home.scss    | 15 +------------
 Frontend/src/scss/zones.scss   | 41 ++++++++++++++++++++++++++++++++++
 5 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 Frontend/src/scss/zones.scss

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index c015600..72d0f30 100755
--- a/Frontend/src/App.jsx
+++ b/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";
diff --git a/Frontend/src/pages/Home.jsx b/Frontend/src/pages/Home.jsx
index b07e8da..97f714c 100755
--- a/Frontend/src/pages/Home.jsx
+++ b/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>
diff --git a/Frontend/src/pages/Landing.jsx b/Frontend/src/pages/Landing.jsx
index 09ff074..cf64f15 100644
--- a/Frontend/src/pages/Landing.jsx
+++ b/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"
diff --git a/Frontend/src/scss/home.scss b/Frontend/src/scss/home.scss
index cbfe02a..9cd00f8 100755
--- a/Frontend/src/scss/home.scss
+++ b/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 ---
 
diff --git a/Frontend/src/scss/zones.scss b/Frontend/src/scss/zones.scss
new file mode 100644
index 0000000..f8ed8bc
--- /dev/null
+++ b/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"); }