Refonte front : flux inscription/connexion, saisie code et historique gains

- Redesign Connexion, Inscription avec modal succès et compte à rebours
- Page SaisirCodeUnique connectée au backend avec overlay Félicitation
- Page Perdu pour les codes invalides/déjà utilisés
- MesGains redesigné en timeline avec appel API et bouton saisir nouveau code
- Profile redesigné avec onglets et données depuis localStorage
- Service game.js ajouté (participateApi, myGainsApi)
- Ajout des designs de référence dans frontend/Design/

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

frontend/src/pages/Profile.jsx

@@ -1,94 +1,89 @@
-import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+function TabNav({ active }) {
+  return (
+    <div className="flex border-b border-gray-200 mb-6">
+      <Link
+        to="/mes-gains"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'gains'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
+        </svg>
+        Mes gains
+      </Link>
+      <Link
+        to="/profile"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'profile'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+        Profile
+      </Link>
+    </div>
+  )
+}
 
 export default function Profile() {
-    const [form, setForm] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-    })
+  const user = JSON.parse(localStorage.getItem('user') || '{}')
 
-    const handleChange = (e) => {
-        const { name, value } = e.target
-        setForm({ ...form, [name]: value })
-    }
+  const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
 
-    const handleSubmit = (e) => {
-        e.preventDefault()
-        // TODO: appeler backend pour update profil
-        alert('Profil mis à jour')
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    // TODO: connecter au backend pour update profil
+    alert('Modification du profil à venir')
+  }
 
-    // Initiales pour l'avatar
-    const initials = 'MD'
+  return (
+    <div className="min-h-screen bg-white max-w-sm mx-auto px-6 pt-6">
+      <TabNav active="profile" />
 
-    return (
-        <div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
-                <h1 className="text-2xl font-bold text-gray-800 mb-6">Mon Profil</h1>
-                {/* Avatar */}
-                <div className="flex flex-col mb-6">
-                    <div className="w-20 h-20 rounded-full bg-green-700 flex items-center justify-center text-white text-2xl font-bold uppercase">
-                        {initials}
-                    </div>
-                </div>
-
-                {/* Formulaire */}
-                <form onSubmit={handleSubmit} className="space-y-5">
-
-                    {/* Email */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Adresse email
-                        </label>
-                        <input 
-                            type="email"
-                            name="email"
-                            value={form.email}
-                            onChange={handleChange}
-                            placeholder="mathieu.dupont@example.com"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-
-                    {/* Nom */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Nom
-                        </label>
-                        <input 
-                            type="text"
-                            name="lastName"
-                            value={form.lastName}
-                            onChange={handleChange}
-                            placeholder="Dupont"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-                    
-                    {/* Prénom */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Prénom
-                        </label>
-                        <input 
-                            type="text"
-                            name="firstName"
-                            value={form.firstName}
-                            onChange={handleChange}
-                            placeholder="Mathieu"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-                    
-                    {/* Bouton de soumission */}
-                    <button 
-                        type="submit"
-                        className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
-                    >
-                        Modifier mon profil
-                    </button>
-                </form>
-            </div>
+      {/* Avatar */}
+      <div className="mb-6">
+        <div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold">
+          {initials}
         </div>
-    )
-}
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Adresse email</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.email || '—'}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Nom</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.lastname || '—'}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Prénom</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.firstname || '—'}
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
+        >
+          Modifier mon profil
+        </button>
+      </form>
+    </div>
+  )
+}