feat: mobile responsive — sidebar bottom nav + grids adaptatifs

- 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

@@ -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',

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>