From 71070b2e762421d5c91f79bc17c5c002eb40f73f Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Tue, 24 Mar 2026 23:36:45 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20mobile=20responsive=20=E2=80=94=20sideb?=
 =?UTF-8?q?ar=20bottom=20nav=20+=20grids=20adaptatifs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar → bottom nav fixe sur mobile (<768px)
- Classes CSS layout: .sidebar, .nav-item, .grid-2, .layout-*
- Grids 2col → 1col sur mobile (Dashboard, Combat, Forge)
- HudBar compact + wrapping sur mobile
- GuideDrawer full-width mobile
- Cards padding réduit mobile
- Header username masqué mobile
---
 frontend/src/components/HudBar.tsx   |  2 +-
 frontend/src/components/Layout.tsx   | 68 ++++++----------------------
 frontend/src/index.css               | 55 ++++++++++++++++++++++
 frontend/src/pages/CombatPage.tsx    |  2 +-
 frontend/src/pages/DashboardPage.tsx |  2 +-
 frontend/src/pages/ForgePage.tsx     |  2 +-
 6 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/HudBar.tsx b/frontend/src/components/HudBar.tsx
index ab4f9ff..7a8d289 100644
--- a/frontend/src/components/HudBar.tsx
+++ b/frontend/src/components/HudBar.tsx
@@ -52,7 +52,7 @@ export function HudBar() {
   const questReady = activeQuests?.filter((pq: any) => pq.status === 'completed').length ?? 0;
 
   return (
-    <div style={{
+    <div className="hud-bar" style={{
       background: '#111620',
       borderBottom: '1px solid #1e2535',
       padding: '4px 1rem',
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 50bc53f..489f8d4 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -22,19 +22,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const [guideOpen, setGuideOpen] = useState(false);
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <div className="layout">
       {/* Header */}
       <header style={{
-        background: '#161b25',
-        borderBottom: '1px solid #2a3448',
-        padding: '0 1.5rem',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        height: 52,
-        position: 'sticky',
-        top: 0,
-        zIndex: 10,
+        background: '#161b25', borderBottom: '1px solid #2a3448',
+        padding: '0 1.5rem', display: 'flex', alignItems: 'center',
+        justifyContent: 'space-between', height: 52,
+        position: 'sticky', top: 0, zIndex: 10,
       }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <span style={{ fontSize: 20 }}>🐸</span>
@@ -42,7 +36,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         </div>
         {user && (
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <span style={{ fontSize: 13, color: '#6b7a99' }}>{user.username}</span>
+            <span className="header-username" style={{ fontSize: 13, color: '#6b7a99' }}>{user.username}</span>
             <button className="btn btn-ghost" style={{ padding: '0.3rem 0.6rem' }} onClick={logout} title="Déconnexion">
               <LogOut size={14} />
             </button>
@@ -51,65 +45,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </header>
 
       <HudBar />
-      <div style={{ display: 'flex', flex: 1 }}>
-        {/* Sidebar nav */}
-        <nav style={{
-          width: 56,
-          background: '#161b25',
-          borderRight: '1px solid #2a3448',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '1rem 0',
-          gap: 4,
-          position: 'sticky',
-          top: 52,
-          height: 'calc(100vh - 52px)',
-        }}>
+      <div className="layout-body">
+        {/* Sidebar / Bottom nav */}
+        <nav className="sidebar">
           {NAV.map(({ to, icon: Icon, label }) => {
             const active = loc.pathname.startsWith(to);
             return (
-              <Link key={to} to={to} title={label} style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 40,
-                height: 40,
-                borderRadius: 8,
-                color: active ? '#f4c94e' : '#6b7a99',
-                background: active ? '#1e2535' : 'transparent',
-                border: active ? '1px solid #c49c2e' : '1px solid transparent',
-                textDecoration: 'none',
-                transition: 'all 0.15s',
-              }}>
+              <Link key={to} to={to} title={label} className={`nav-item ${active ? 'active' : ''}`}>
                 <Icon size={18} />
               </Link>
             );
           })}
-          <div style={{ flex: 1 }} />
+          <div className="nav-spacer" style={{ flex: 1 }} />
           <button
             onClick={() => setGuideOpen(true)}
             title="Guide rapide"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: 40,
-              height: 40,
-              borderRadius: 8,
-              color: guideOpen ? '#f4c94e' : '#6b7a99',
-              background: guideOpen ? '#1e2535' : 'transparent',
-              border: guideOpen ? '1px solid #c49c2e' : '1px solid transparent',
-              cursor: 'pointer',
-              transition: 'all 0.15s',
-            }}
+            className={`nav-item ${guideOpen ? 'active' : ''}`}
           >
             <BookOpen size={18} />
           </button>
         </nav>
 
         {/* Main content */}
-        <main style={{ flex: 1, padding: '1.5rem', maxWidth: 900, margin: '0 auto', width: '100%' }}>
+        <main className="layout-main">
           {children}
         </main>
       </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index c05f657..9b0773a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -92,3 +92,58 @@ body {
 .log-monster { color: #e84040; }
 .log-system  { color: #f4c94e; }
 .log-crit    { color: #a78bfa; font-weight: bold; }
+
+/* ── Layout ── */
+.layout { min-height: 100vh; display: flex; flex-direction: column; }
+.layout-body { display: flex; flex: 1; }
+.layout-main { flex: 1; padding: 1.5rem; max-width: 900px; margin: 0 auto; width: 100%; }
+
+/* Sidebar desktop */
+.sidebar {
+  width: 56px; background: #161b25; border-right: 1px solid #2a3448;
+  display: flex; flex-direction: column; align-items: center;
+  padding: 1rem 0; gap: 4px; position: sticky; top: 52px; height: calc(100vh - 52px);
+}
+
+/* Nav item */
+.nav-item {
+  display: flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; border-radius: 8px;
+  color: #6b7a99; background: transparent; border: 1px solid transparent;
+  text-decoration: none; transition: all 0.15s; cursor: pointer;
+}
+.nav-item.active { color: #f4c94e; background: #1e2535; border-color: #c49c2e; }
+
+/* Grids responsive */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.grid-2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
+
+/* ── Mobile responsive ── */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
+    width: 100%; height: 56px; flex-direction: row;
+    justify-content: space-around; padding: 0 0.25rem;
+    border-right: none; border-top: 1px solid #2a3448;
+    z-index: 20;
+  }
+  .sidebar .nav-spacer { display: none; }
+
+  .layout-body { padding-bottom: 56px; }
+  .layout-main { padding: 1rem 0.75rem; }
+
+  .grid-2 { grid-template-columns: 1fr; }
+  .grid-2-cards { grid-template-columns: 1fr; }
+
+  /* HudBar compact */
+  .hud-bar { font-size: 10px; gap: 6px; padding: 4px 8px; flex-wrap: wrap; }
+
+  /* Guide drawer full width mobile */
+  .guide-drawer { width: 100% !important; }
+
+  /* Cards légèrement plus compacts */
+  .card { padding: 0.75rem; }
+
+  /* Header compact */
+  .header-username { display: none; }
+}
diff --git a/frontend/src/pages/CombatPage.tsx b/frontend/src/pages/CombatPage.tsx
index 28b2c28..a16ba8e 100644
--- a/frontend/src/pages/CombatPage.tsx
+++ b/frontend/src/pages/CombatPage.tsx
@@ -213,7 +213,7 @@ export function CombatPage() {
     <div>
       <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>⚔️ Combat</h2>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1rem' }}>
+      <div className="grid-2" style={{ marginBottom: '1rem' }}>
         {/* Choix monstre par zone */}
         <div>
           {Array.from(monstersByZone.entries()).map(([zone, zoneMonsters]) => {
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index ef269a3..e6993fc 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -277,7 +277,7 @@ export function DashboardPage() {
 
       <Onboarding level={char.level} onDismiss={() => {}} />
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+      <div className="grid-2">
         {/* Barres vitales */}
         <div className="card">
           <p style={{ margin: '0 0 0.75rem', fontSize: 13, fontWeight: 700, color: '#9ca3af' }}>État</p>
diff --git a/frontend/src/pages/ForgePage.tsx b/frontend/src/pages/ForgePage.tsx
index aa7a0e0..7652d13 100644
--- a/frontend/src/pages/ForgePage.tsx
+++ b/frontend/src/pages/ForgePage.tsx
@@ -101,7 +101,7 @@ export function ForgePage() {
         <Shield size={18} style={{ display: 'inline', marginRight: 8 }} />Forge
       </h2>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+      <div className="grid-2">
         {/* Sélection item */}
         <div>
           <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>