Responsive : toutes les pages et composants Header/Footer

- Header : menu hamburger animé pour mobile, nav cachée sur petit écran
- Footer : grid 2 colonnes sur mobile, 4 colonnes sur desktop
- Accueil : titres et paddings adaptés mobile/tablette/desktop
- ReglesJeu : titres, cartes et CTA responsives
- MentionsLegales / Confidentialite : paddings et titres adaptés mobile
- Contact : padding et formulaire adaptés mobile
- Admin : tableau avec scroll horizontal sur mobile
- Employe : formulaire de recherche en colonne sur mobile
- Ajout composants Layout, Header, Footer et logo depuis branche Alexis

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/Footer.jsx

@@ -6,7 +6,7 @@ export default function Footer() {
 
 
       {/* Partie principale */}
-      <div className="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-4 gap-10">
+      <div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
 
 
         {/* Logo */}

frontend/src/components/Header.jsx

@@ -1,58 +1,92 @@
-import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 import logo from '../assets/img/logo.png'
 
 export default function Header() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { pathname } = useLocation()
+
+  const navLinks = [
+    { to: '/accueil', label: 'Accueil' },
+    { to: '/regles-jeu', label: 'Règles du jeu' },
+  ]
+
   return (
-    <header className="bg-white shadow-sm">
-      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
-
-          <Link to="/accueil" className="flex items-center">
-
-          <img
-
-            src={logo}
-
-            alt="Thé Tip Top"
-
-            className="h-12 w-auto"
-
-          />
+    <header className="bg-white shadow-sm relative z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
 
+        <Link to="/accueil" className="flex items-center flex-shrink-0">
+          <img src={logo} alt="Thé Tip Top" className="h-10 sm:h-12 w-auto" />
         </Link>
 
-        <nav className="flex items-center gap-6">
-          <Link
-            to="/accueil"
-            className="text-gray-700 hover:text-green-700 font-medium"
-          >
-            Accueil
-          </Link>
-
-          <Link
-            to="/regles-jeu"
-            className="text-gray-700 hover:text-green-700 font-medium"
-          >
-            Règles du jeu
-          </Link>
-
-          <div className="flex items-center gap-2">
+        {/* Nav desktop */}
+        <nav className="hidden md:flex items-center gap-6">
+          {navLinks.map((link) => (
             <Link
-              to="/connexion"
-              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
+              key={link.to}
+              to={link.to}
+              className={`font-medium transition-colors ${
+                pathname === link.to ? 'text-green-700' : 'text-gray-700 hover:text-green-700'
+              }`}
             >
+              {link.label}
+            </Link>
+          ))}
+          <div className="flex items-center gap-2">
+            <Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
               Connexion
             </Link>
-
-            <Link
-              to="/inscription"
-              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
-            >
+            <Link to="/inscription" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
               Inscription
             </Link>
           </div>
         </nav>
 
+        {/* Hamburger mobile */}
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="md:hidden flex flex-col justify-center items-center w-9 h-9 gap-1.5"
+          aria-label="Ouvrir le menu"
+        >
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 origin-center ${menuOpen ? 'rotate-45 translate-y-2' : ''}`} />
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 ${menuOpen ? 'opacity-0' : ''}`} />
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 origin-center ${menuOpen ? '-rotate-45 -translate-y-2' : ''}`} />
+        </button>
       </div>
+
+      {/* Menu mobile déroulant */}
+      {menuOpen && (
+        <div className="md:hidden bg-white border-t border-gray-100 px-4 pb-4">
+          {navLinks.map((link) => (
+            <Link
+              key={link.to}
+              to={link.to}
+              onClick={() => setMenuOpen(false)}
+              className={`block py-3 font-medium border-b border-gray-50 ${
+                pathname === link.to ? 'text-green-700' : 'text-gray-700'
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+          <div className="flex flex-col gap-2 pt-3">
+            <Link
+              to="/connexion"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
+            >
+              Connexion
+            </Link>
+            <Link
+              to="/inscription"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
+            >
+              Inscription
+            </Link>
+          </div>
+        </div>
+      )}
     </header>
   )
-}
+}