feat: suppression HUD (redondant avec cockpit), compteur stylé, navbar nettoyée

- Suppression Hud.jsx + HUDON/HUDOFF.svg (cockpit header fait le même job)
- Retrait toggle HUD de la navbar + props isVisible
- Compteur click-zone : glow vert, plus gros, lisible sur fond sombre
- Tooltip sur le bouton bulles navbar

Frontend/public/NavBar/HUDOFF.svg

@@ -1,4 +0,0 @@
-<svg width="55" height="39" viewBox="0 0 55 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="53" height="37" rx="7" stroke="#202020" stroke-width="2" stroke-miterlimit="1.78829" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="20 20"/>
-<path d="M8.18 27V13.06H11.32V18.36H16.74V13.06H19.88V27H16.74V21.24H11.32V27H8.18ZM28.0425 27.36C26.2158 27.36 24.8358 26.9133 23.9025 26.02C22.9825 25.1267 22.5225 23.7733 22.5225 21.96V13.06H25.6625V21.6C25.6625 22.24 25.7158 22.7733 25.8225 23.2C25.9425 23.6267 26.1758 23.9467 26.5225 24.16C26.8692 24.3733 27.3758 24.48 28.0425 24.48C28.7092 24.48 29.2092 24.3733 29.5425 24.16C29.8892 23.9467 30.1225 23.6333 30.2425 23.22C30.3625 22.7933 30.4225 22.2667 30.4225 21.64V13.06H33.5625V21.86C33.5625 23.7133 33.0958 25.0933 32.1625 26C31.2425 26.9067 29.8692 27.36 28.0425 27.36ZM36.2066 27V13.06H40.4066C42.7399 13.06 44.5466 13.6733 45.8266 14.9C47.1066 16.1267 47.7466 17.8733 47.7466 20.14C47.7466 22.3533 47.1132 24.0533 45.8466 25.24C44.5932 26.4133 42.7732 27 40.3866 27H36.2066ZM39.3466 24.12H40.0666C41.0132 24.12 41.8199 24.0133 42.4866 23.8C43.1666 23.5867 43.6866 23.1867 44.0466 22.6C44.4066 22 44.5866 21.14 44.5866 20.02C44.5866 18.94 44.4132 18.1067 44.0666 17.52C43.7332 16.92 43.2466 16.5067 42.6066 16.28C41.9799 16.0533 41.2266 15.94 40.3466 15.94H39.3466V24.12Z" fill="#202020"/>
-</svg>

Frontend/public/NavBar/HUDON.svg

@@ -1,4 +0,0 @@
-<svg width="55" height="39" viewBox="0 0 55 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="53" height="37" rx="7" fill="#202020" stroke="#202020" stroke-width="2" stroke-miterlimit="1.78829" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.18 27V13.06H11.32V18.36H16.74V13.06H19.88V27H16.74V21.24H11.32V27H8.18ZM28.0425 27.36C26.2158 27.36 24.8358 26.9133 23.9025 26.02C22.9825 25.1267 22.5225 23.7733 22.5225 21.96V13.06H25.6625V21.6C25.6625 22.24 25.7158 22.7733 25.8225 23.2C25.9425 23.6267 26.1758 23.9467 26.5225 24.16C26.8692 24.3733 27.3758 24.48 28.0425 24.48C28.7092 24.48 29.2092 24.3733 29.5425 24.16C29.8892 23.9467 30.1225 23.6333 30.2425 23.22C30.3625 22.7933 30.4225 22.2667 30.4225 21.64V13.06H33.5625V21.86C33.5625 23.7133 33.0958 25.0933 32.1625 26C31.2425 26.9067 29.8692 27.36 28.0425 27.36ZM36.2066 27V13.06H40.4066C42.7399 13.06 44.5466 13.6733 45.8266 14.9C47.1066 16.1267 47.7466 17.8733 47.7466 20.14C47.7466 22.3533 47.1132 24.0533 45.8466 25.24C44.5932 26.4133 42.7732 27 40.3866 27H36.2066ZM39.3466 24.12H40.0666C41.0132 24.12 41.8199 24.0133 42.4866 23.8C43.1666 23.5867 43.6866 23.1867 44.0466 22.6C44.4066 22 44.5866 21.14 44.5866 20.02C44.5866 18.94 44.4132 18.1067 44.0666 17.52C43.7332 16.92 43.2466 16.5067 42.6066 16.28C41.9799 16.0533 41.2266 15.94 40.3466 15.94H39.3466V24.12Z" fill="#EAEAEA"/>
-</svg>

Frontend/src/App.jsx

@@ -3,7 +3,6 @@ import { Outlet } from "react-router-dom";
 
 import Navbar from "./components/navbar";
 import Footer from "./components/footer";
-import Hud from "./components/Hud/Hud";
 import { GameTick } from "./components/GameTick";
 import { GameSync } from "./components/GameSync";
 
@@ -13,7 +12,6 @@ import "./scss/components/footer.scss";
 import navData from "./data/NavBarData.json";
 
 function App() {
-  const [isVisible, setIsVisible] = useState(false);
   const [toggleRain, setToggleRain] = useState(false);
 
   return (
@@ -22,12 +20,9 @@ function App() {
       <GameSync />
       <Navbar
         navData={navData}
-        isVisible={isVisible}
-        setIsVisible={setIsVisible}
         toggleRain={toggleRain}
         setToggleRain={setToggleRain}
       />
-      <Hud isVisible={isVisible} setIsVisible={setIsVisible} />
       <main>
         <Outlet context={[toggleRain, setToggleRain]} />
       </main>

Frontend/src/components/Hud/Hud.jsx

@@ -1,43 +0,0 @@
-// Hud.jsx — Stats HUD (Zustand)
-import { useGameStore } from "../../store/useGameStore";
-import { formatNumber } from "../../utils/formatNumber";
-
-const formatTime = (time) => {
-  const hours = Math.floor(time / 3600);
-  const minutes = Math.floor((time % 3600) / 60);
-  const secs = time % 60;
-  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
-};
-
-function Hud({ isVisible }) {
-  const resources = useGameStore((s) => s.state.resources);
-  const clickMultiplier = useGameStore((s) => s.state.clickMultiplier);
-  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
-  const playSeconds = useGameStore((s) => s.playSeconds);
-
-  if (isVisible) return null;
-
-  return (
-    <div className="fixed top-20 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 px-6 py-3 rounded-xl bg-gray-900/90 backdrop-blur-sm text-white font-[var(--font)]">
-      <div className="flex gap-6 text-sm">
-        <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-xs">Temps</span>
-          <span>{formatTime(playSeconds)}</span>
-        </div>
-        <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-xs">Têtards/s</span>
-          <span>{formatNumber(productionPerSecond)}</span>
-        </div>
-        <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-xs">Ponte</span>
-          <span>{clickMultiplier}</span>
-        </div>
-      </div>
-      <div className="text-lg font-bold text-emerald-400">
-        {formatNumber(resources)}
-      </div>
-    </div>
-  );
-}
-
-export default Hud;

Frontend/src/components/navbar.jsx

@@ -7,38 +7,14 @@ import "../scss/root.scss";
 import PrimaryButton from "./buttons/PrimaryButton";
 import Burger from "./burger";
 import { useAuth } from "../context/AuthContext";
-import HUDON from "../../public/NavBar/HUDON.svg";
-import HUDOFF from "../../public/NavBar/HUDOFF.svg";
 import SnowOn from "../../public/NavBar/SnowOn.svg";
 import SnowOff from "../../public/NavBar/SnowOff.svg";
 import { useState } from "react";
 
-export default function Navbar({
+export default function Navbar({ navData, toggleRain, setToggleRain }) {
-  navData,
-  isVisible,
-  setIsVisible,
-  toggleRain,
-  setToggleRain,
-}) {
-  Navbar.propTypes = {
-    isVisible: PropTypes.bool,
-    setIsVisible: PropTypes.function,
-    setToggleRain: PropTypes.function,
-    toggleRain: PropTypes.bool,
-  }.isRequired;
-
   const { user, logout } = useAuth();
-  const [imageSrc, setImageSrc] = useState(HUDON);
   const [snowImageSrc, setSnowImageSrc] = useState(SnowOff);
-  const toggleHud = () => {
+
-    if (!isVisible) {
-      setIsVisible(true);
-      setImageSrc(HUDOFF);
-    } else {
-      setIsVisible(false);
-      setImageSrc(HUDON);
-    }
-  };
   function toggleRainBtn() {
     if (toggleRain === false) {
       setToggleRain(true);
@@ -48,6 +24,7 @@ export default function Navbar({
       setSnowImageSrc(SnowOff);
     }
   }
+
   return (
     <nav className="header-main">
       <Link
@@ -108,17 +85,12 @@ export default function Navbar({
             Connexion
           </Link>
         )}
-        <img
-          onClick={() => toggleHud()}
-          src={imageSrc}
-          style={{ height: "28px" }}
-          alt="boutton on"
-        />
         <img
           onClick={() => toggleRainBtn()}
           src={snowImageSrc}
-          style={{ height: "28px" }}
+          style={{ height: "28px", cursor: "pointer" }}
-          alt="boutton on"
+          alt="Activer/désactiver les bulles"
+          title="Ambiance bulles"
         />
         <Burger navData={navData} />
       </div>

Frontend/src/pages/Home.jsx

@@ -119,12 +119,10 @@ export default function Home() {
       {/* Clicker area — centre */}
       <div className="click-zone" onClick={handleIncrement}>
         <div className="tadpole-sprite" />
-        <div className="click-zone-stats">
+        <div className="click-zone-counter">
-          <div className="text-center text-3xl md:text-4xl font-bold text-white drop-shadow-lg font-[var(--font)] select-none pointer-events-none">
           {formatNumber(resources)}
         </div>
       </div>
-      </div>
 
       {/* Cockpit — sidebar structurée en zones */}
       <aside className="game-sidebar">

Frontend/src/scss/home.scss

@@ -47,14 +47,21 @@
   }
 }
 
-// --- Stats sous le compteur ---
+// --- Compteur ressources sous le têtard ---
 
-.click-zone-stats {
+.click-zone-counter {
-  display: flex;
+  font-family: var(--font);
-  flex-direction: column;
+  font-size: 2rem;
-  align-items: center;
+  font-weight: 800;
+  color: white;
+  text-shadow: 0 0 12px rgba(52, 211, 153, 0.5), 0 2px 6px rgba(0, 0, 0, 0.7);
   pointer-events: none;
   user-select: none;
+  letter-spacing: 0.02em;
+
+  @media (min-width: 768px) {
+    font-size: 2.5rem;
+  }
 }
 
 // --- Badge achievements sidebar ---