diff --git a/__tests__/components/ui/PrizeCard.test.tsx b/__tests__/components/ui/PrizeCard.test.tsx
index 6445ad7..68f93c8 100644
--- a/__tests__/components/ui/PrizeCard.test.tsx
+++ b/__tests__/components/ui/PrizeCard.test.tsx
@@ -45,15 +45,15 @@ describe('PrizeCard', () => {
     const { container } = render(<PrizeCard {...defaultProps} />);
 
     const card = container.firstChild;
-    expect(card).toHaveClass('border-[#e5e4dc]');
-    expect(card).not.toHaveClass('border-[#d4a574]');
+    expect(card).toHaveClass('border-beige-300');
+    expect(card).not.toHaveClass('border-primary-500');
   });
 
   it('should render with grand prix styling when isGrandPrix is true', () => {
     const { container } = render(<PrizeCard {...defaultProps} isGrandPrix />);
 
     const card = container.firstChild;
-    expect(card).toHaveClass('border-[#d4a574]');
+    expect(card).toHaveClass('border-primary-500');
   });
 
   it('should apply custom className', () => {
diff --git a/__tests__/utils/theme.test.ts b/__tests__/utils/theme.test.ts
index c12e91a..ee13353 100644
--- a/__tests__/utils/theme.test.ts
+++ b/__tests__/utils/theme.test.ts
@@ -21,32 +21,32 @@ import {
 describe('Theme Utility', () => {
   describe('Constants', () => {
     it('should have all status colors defined', () => {
-      expect(STATUS_COLORS.PENDING).toBe('bg-yellow-100 text-yellow-800');
-      expect(STATUS_COLORS.CLAIMED).toBe('bg-green-100 text-green-800');
+      expect(STATUS_COLORS.PENDING).toBe('bg-secondary-100 text-secondary-800');
+      expect(STATUS_COLORS.CLAIMED).toBe('bg-primary-100 text-primary-800');
       expect(STATUS_COLORS.REJECTED).toBe('bg-red-100 text-red-800');
-      expect(STATUS_COLORS.ACTIVE).toBe('bg-green-100 text-green-800');
+      expect(STATUS_COLORS.ACTIVE).toBe('bg-primary-100 text-primary-800');
       expect(STATUS_COLORS.INACTIVE).toBe('bg-gray-100 text-gray-800');
       expect(STATUS_COLORS.EXPIRED).toBe('bg-red-100 text-red-800');
     });
 
     it('should have all badge colors defined', () => {
       expect(BADGE_COLORS.info).toBe('bg-blue-100 text-blue-800');
-      expect(BADGE_COLORS.success).toBe('bg-green-100 text-green-800');
-      expect(BADGE_COLORS.warning).toBe('bg-yellow-100 text-yellow-800');
+      expect(BADGE_COLORS.success).toBe('bg-primary-100 text-primary-800');
+      expect(BADGE_COLORS.warning).toBe('bg-secondary-100 text-secondary-800');
       expect(BADGE_COLORS.error).toBe('bg-red-100 text-red-800');
       expect(BADGE_COLORS.purple).toBe('bg-purple-100 text-purple-800');
       expect(BADGE_COLORS.pink).toBe('bg-pink-100 text-pink-800');
-      expect(BADGE_COLORS.amber).toBe('bg-amber-100 text-amber-800');
+      expect(BADGE_COLORS.amber).toBe('bg-secondary-200 text-secondary-800');
       expect(BADGE_COLORS.gray).toBe('bg-gray-100 text-gray-800');
     });
 
     it('should have all button styles defined', () => {
-      expect(BUTTON_STYLES.primary).toContain('bg-blue-600');
-      expect(BUTTON_STYLES.secondary).toContain('bg-gray-600');
-      expect(BUTTON_STYLES.success).toContain('bg-green-600');
+      expect(BUTTON_STYLES.primary).toContain('bg-primary-500');
+      expect(BUTTON_STYLES.secondary).toContain('bg-secondary-500');
+      expect(BUTTON_STYLES.success).toContain('bg-primary-500');
       expect(BUTTON_STYLES.danger).toContain('bg-red-600');
-      expect(BUTTON_STYLES.warning).toContain('bg-yellow-600');
-      expect(BUTTON_STYLES.outline).toContain('border-blue-600');
+      expect(BUTTON_STYLES.warning).toContain('bg-secondary-400');
+      expect(BUTTON_STYLES.outline).toContain('border-primary-500');
       expect(BUTTON_STYLES.ghost).toContain('text-gray-600');
     });
 
@@ -74,28 +74,28 @@ describe('Theme Utility', () => {
     it('should have role colors defined', () => {
       expect(ROLE_COLORS.ADMIN).toBe('bg-red-100 text-red-800');
       expect(ROLE_COLORS.EMPLOYEE).toBe('bg-blue-100 text-blue-800');
-      expect(ROLE_COLORS.CLIENT).toBe('bg-green-100 text-green-800');
+      expect(ROLE_COLORS.CLIENT).toBe('bg-primary-100 text-primary-800');
     });
 
     it('should have prize colors defined', () => {
       expect(PRIZE_COLORS.INFUSEUR).toBe('bg-blue-100 text-blue-800');
-      expect(PRIZE_COLORS.THE_SIGNATURE).toBe('bg-green-100 text-green-800');
+      expect(PRIZE_COLORS.THE_SIGNATURE).toBe('bg-primary-100 text-primary-800');
       expect(PRIZE_COLORS.COFFRET_DECOUVERTE).toBe('bg-purple-100 text-purple-800');
-      expect(PRIZE_COLORS.COFFRET_PRESTIGE).toBe('bg-amber-100 text-amber-800');
+      expect(PRIZE_COLORS.COFFRET_PRESTIGE).toBe('bg-secondary-200 text-secondary-800');
       expect(PRIZE_COLORS.THE_GRATUIT).toBe('bg-pink-100 text-pink-800');
     });
   });
 
   describe('getStatusColor', () => {
     it('should return correct color for known statuses', () => {
-      expect(getStatusColor('PENDING')).toBe('bg-yellow-100 text-yellow-800');
-      expect(getStatusColor('CLAIMED')).toBe('bg-green-100 text-green-800');
+      expect(getStatusColor('PENDING')).toBe('bg-secondary-100 text-secondary-800');
+      expect(getStatusColor('CLAIMED')).toBe('bg-primary-100 text-primary-800');
       expect(getStatusColor('REJECTED')).toBe('bg-red-100 text-red-800');
     });
 
     it('should handle lowercase statuses', () => {
-      expect(getStatusColor('pending')).toBe('bg-yellow-100 text-yellow-800');
-      expect(getStatusColor('claimed')).toBe('bg-green-100 text-green-800');
+      expect(getStatusColor('pending')).toBe('bg-secondary-100 text-secondary-800');
+      expect(getStatusColor('claimed')).toBe('bg-primary-100 text-primary-800');
     });
 
     it('should return gray for unknown statuses', () => {
@@ -106,16 +106,16 @@ describe('Theme Utility', () => {
 
   describe('getButtonStyle', () => {
     it('should return primary style by default', () => {
-      expect(getButtonStyle()).toContain('bg-blue-600');
+      expect(getButtonStyle()).toContain('bg-primary-500');
     });
 
     it('should return correct style for variant', () => {
-      expect(getButtonStyle('primary')).toContain('bg-blue-600');
-      expect(getButtonStyle('secondary')).toContain('bg-gray-600');
-      expect(getButtonStyle('success')).toContain('bg-green-600');
+      expect(getButtonStyle('primary')).toContain('bg-primary-500');
+      expect(getButtonStyle('secondary')).toContain('bg-secondary-500');
+      expect(getButtonStyle('success')).toContain('bg-primary-500');
       expect(getButtonStyle('danger')).toContain('bg-red-600');
-      expect(getButtonStyle('warning')).toContain('bg-yellow-600');
-      expect(getButtonStyle('outline')).toContain('border-blue-600');
+      expect(getButtonStyle('warning')).toContain('bg-secondary-400');
+      expect(getButtonStyle('outline')).toContain('border-primary-500');
       expect(getButtonStyle('ghost')).toContain('text-gray-600');
     });
   });
@@ -140,13 +140,13 @@ describe('Theme Utility', () => {
     it('should return correct color for known roles', () => {
       expect(getRoleColor('ADMIN')).toBe('bg-red-100 text-red-800');
       expect(getRoleColor('EMPLOYEE')).toBe('bg-blue-100 text-blue-800');
-      expect(getRoleColor('CLIENT')).toBe('bg-green-100 text-green-800');
+      expect(getRoleColor('CLIENT')).toBe('bg-primary-100 text-primary-800');
     });
 
     it('should handle lowercase roles', () => {
       expect(getRoleColor('admin')).toBe('bg-red-100 text-red-800');
       expect(getRoleColor('employee')).toBe('bg-blue-100 text-blue-800');
-      expect(getRoleColor('client')).toBe('bg-green-100 text-green-800');
+      expect(getRoleColor('client')).toBe('bg-primary-100 text-primary-800');
     });
 
     it('should return gray for unknown roles', () => {
@@ -157,9 +157,9 @@ describe('Theme Utility', () => {
   describe('getPrizeColor', () => {
     it('should return correct color for known prize types', () => {
       expect(getPrizeColor('INFUSEUR')).toBe('bg-blue-100 text-blue-800');
-      expect(getPrizeColor('THE_SIGNATURE')).toBe('bg-green-100 text-green-800');
+      expect(getPrizeColor('THE_SIGNATURE')).toBe('bg-primary-100 text-primary-800');
       expect(getPrizeColor('COFFRET_DECOUVERTE')).toBe('bg-purple-100 text-purple-800');
-      expect(getPrizeColor('COFFRET_PRESTIGE')).toBe('bg-amber-100 text-amber-800');
+      expect(getPrizeColor('COFFRET_PRESTIGE')).toBe('bg-secondary-200 text-secondary-800');
       expect(getPrizeColor('THE_GRATUIT')).toBe('bg-pink-100 text-pink-800');
     });
 
diff --git a/app/about/page.tsx b/app/about/page.tsx
index a81c5f9..b10fa79 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -8,15 +8,15 @@ import { Leaf } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
        {/* Hero Section */}
-      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
+      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
              À propos de Thé Tip Top à Nice
             </h1>
-            <p className="text-lg text-[#8a8a7a]">
+            <p className="text-lg text-gray-600">
               Notre passion pour le thé d'exception et nos événements uniques à Nice
             </p>
           </div>
@@ -29,9 +29,9 @@ export default function AboutPage() {
           <div className="grid md:grid-cols-2 gap-16 items-center">
             {/* Texte */}
             <div className="order-2 md:order-1 space-y-6">
-              <h2 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] leading-tight">
+              <h2 className="text-4xl md:text-5xl font-bold text-primary-300 leading-tight">
                 Notre Histoire
-                <span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
+                <span className="block text-3xl md:text-4xl text-primary-500 mt-2">
                   Thé Tip Top Nice
                 </span>
               </h2>
@@ -66,30 +66,30 @@ export default function AboutPage() {
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
             <div className="text-center mb-8">
-              <h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Notre Engagement - Thé Tip Top </h2>
-              <p className="text-[#8a8a7a]">Qualité, Durabilité et Respect au Cœur de Chaque Thé</p>
+              <h2 className="text-3xl font-bold text-primary-300 mb-2">Notre Engagement - Thé Tip Top </h2>
+              <p className="text-gray-600">Qualité, Durabilité et Respect au Cœur de Chaque Thé</p>
             </div>
             <div className="grid md:grid-cols-3 gap-4">
-              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-lg">
+              <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center shadow-lg">
                   <Leaf className="w-8 h-8 text-white" />
                 </div>
-                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Thé bio</div>
-                <p className="text-sm text-[#8a8a7a]">
+                <div className="text-2xl font-bold text-gray-800 mb-2">Thé bio</div>
+                <p className="text-sm text-gray-600">
                   Tous nos thés sont certifiés biologiques et cultivés dans le respect de l'environnement.
                 </p>
               </div>
-              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
-                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Commerce équitable </div>
-                <p className="text-sm text-[#8a8a7a]">
+              <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
+                <div className="text-2xl font-bold text-gray-800 mb-2">Commerce équitable </div>
+                <p className="text-sm text-gray-600">
                   Nous soutenons les producteurs locaux en collaborant avec des partenaires engagés dans des pratiques durables et équitables
                 </p>
               </div>
-              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
-                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Livraison rapide</div>
-                <p className="text-sm text-[#8a8a7a]">
+              <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
+                <div className="text-2xl font-bold text-gray-800 mb-2">Livraison rapide</div>
+                <p className="text-sm text-gray-600">
                   Expédition sous 24h pour que vous puissiez savourer rapidement vos thés
                 </p>
               </div>
@@ -102,26 +102,26 @@ export default function AboutPage() {
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
             <div className="text-center mb-8">
-              <h2 className="text-2xl italic text-[#5a5a4e] mb-4">
+              <h2 className="text-2xl italic text-gray-800 mb-4">
                 "Le thé, un art de vivre, une invitation à la découverte."
               </h2>
-               <p className="text-[#8a8a7a]">Philosophie de Thé Tip Top</p>
+               <p className="text-gray-600">Philosophie de Thé Tip Top</p>
             </div>
             </div>
           </div>
       </section>
 
       {/* Contact Section */}
-      <section className="py-12 bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10">
+      <section className="py-12 bg-gradient-to-br from-primary-50 to-primary-100">
         <div className="container mx-auto px-4">
           <div className="max-w-3xl mx-auto text-center">
-            <h3 className="text-2xl font-bold text-[#5a5a4e] mb-4">Contactez-nous</h3>
-            <p className="text-[#8a8a7a] mb-4">
+            <h3 className="text-2xl font-bold text-gray-800 mb-4">Contactez-nous</h3>
+            <p className="text-gray-600 mb-4">
               Une question sur notre histoire ou nos thés ? N'hésitez pas à nous écrire !
             </p>
             <a
               href="mailto:thetiptopgr3@gmail.com"
-              className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-semibold transition-colors"
+              className="inline-flex items-center gap-2 text-primary-500 hover:text-primary-600 font-semibold transition-colors"
             >
               <span>✉️</span>
               thetiptopgr3@gmail.com
diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx
index fa4a890..e76ef16 100644
--- a/app/admin/dashboard/page.tsx
+++ b/app/admin/dashboard/page.tsx
@@ -187,6 +187,12 @@ export default function AdminDashboardAdvanced() {
     { name: "Admins", value: stats.users.admins || 0, color: "#3b82f6" },
   ].filter(item => item.value > 0);
 
+  // Données pour le graphique des clients actifs/inactifs
+  const clientStatusData = [
+    { name: "Actifs", value: stats.users.activeClients || 0, color: "#10b981" },
+    { name: "Inactifs", value: stats.users.inactiveClients || 0, color: "#ef4444" },
+  ].filter(item => item.value > 0);
+
   const ticketDistributedPercent = stats.tickets.total > 0
     ? ((stats.tickets.distributed / stats.tickets.total) * 100).toFixed(1)
     : 0;
@@ -389,6 +395,39 @@ export default function AdminDashboardAdvanced() {
           </div>
         )}
 
+        {/* Graphique Clients Actifs/Inactifs */}
+        {clientStatusData.length > 0 && (
+          <div className="bg-white rounded-2xl shadow-md border border-gray-100 p-6 hover:shadow-lg transition-shadow">
+            <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-3">
+              <div className="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
+                <UserIcon className="w-5 h-5 text-emerald-600" />
+              </div>
+              Statut des Clients
+            </h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={clientStatusData}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={({ name, value }) => `${name}: ${value}`}
+                  outerRadius={80}
+                  innerRadius={40}
+                  fill="#8884d8"
+                  dataKey="value"
+                >
+                  {clientStatusData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
         {/* Graphique répartition par genre */}
         {genderChartData.length > 0 && (
           <div className="bg-white rounded-2xl shadow-md border border-gray-100 p-6 hover:shadow-lg transition-shadow">
@@ -502,6 +541,8 @@ export default function AdminDashboardAdvanced() {
           <div className="space-y-3">
             <StatRow label="Total" value={stats?.users?.total || 0} />
             <StatRow label="Clients" value={stats?.users?.clients || 0} color="green" />
+            <StatRow label="Clients actifs" value={stats?.users?.activeClients || 0} color="green" />
+            <StatRow label="Clients inactifs" value={stats?.users?.inactiveClients || 0} color="red" />
             <StatRow label="Employés" value={stats?.users?.employees || 0} color="purple" />
             <StatRow label="Admins" value={stats?.users?.admins || 0} color="blue" />
           </div>
diff --git a/app/client/page.tsx b/app/client/page.tsx
index b045fd8..652644d 100644
--- a/app/client/page.tsx
+++ b/app/client/page.tsx
@@ -64,21 +64,21 @@ export default function ClientPage() {
 
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
       <div className="container mx-auto px-4">
         {/* Welcome Section */}
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2">
-            Bonjour {user?.firstName} ! 👋
+          <h1 className="text-4xl font-bold text-primary-500 mb-2">
+            Bonjour {user?.firstName} !
           </h1>
-          <p className="text-[#8a8a7a]">
+          <p className="text-gray-600">
             Bienvenue dans votre espace client
           </p>
         </div>
 
         {/* Quick Action */}
         <div className="mb-8">
-          <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white rounded-xl shadow-md p-8 border-2 border-[#e5e4dc]">
+          <div className="bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl shadow-md p-8 border-2 border-primary-400">
             <div className="flex flex-col md:flex-row items-center justify-between gap-4">
               <div>
                 <h2 className="text-2xl font-bold mb-2">
@@ -89,8 +89,8 @@ export default function ClientPage() {
                 </p>
               </div>
               <Link href={ROUTES.GAME}>
-                <button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap">
-                  Jouer maintenant 🎮
+                <button className="bg-white text-primary-500 hover:bg-beige-50 font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap">
+                  Jouer maintenant
                 </button>
               </Link>
             </div>
@@ -99,10 +99,10 @@ export default function ClientPage() {
 
         {/* Statistics Cards */}
         <div className="grid md:grid-cols-3 gap-6 mb-8">
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   Total Participations
                 </p>
                 <p className="text-4xl font-bold text-blue-600">
@@ -117,36 +117,36 @@ export default function ClientPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   Gains réclamés
                 </p>
-                <p className="text-4xl font-bold text-green-600">
+                <p className="text-4xl font-bold text-primary-600">
                   {stats.claimed}
                 </p>
               </div>
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   En attente
                 </p>
-                <p className="text-4xl font-bold text-yellow-600">
+                <p className="text-4xl font-bold text-secondary-600">
                   {stats.pending}
                 </p>
               </div>
-              <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-secondary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
@@ -155,12 +155,12 @@ export default function ClientPage() {
         </div>
 
         {/* Recent Tickets */}
-        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
-          <div className="px-6 py-4 border-b border-[#e5e4dc]">
+        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
+          <div className="px-6 py-4 border-b border-beige-300">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2>
+              <h2 className="text-xl font-bold text-primary-500">Mes derniers tickets</h2>
               <Link href={ROUTES.HISTORY}>
-                <button className="text-[#d4a574] hover:text-[#c4956a] font-semibold text-sm transition-colors">
+                <button className="text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                   Voir tout l'historique
                 </button>
               </Link>
@@ -170,11 +170,11 @@ export default function ClientPage() {
             {tickets.length === 0 ? (
               <div className="text-center py-12">
                 <div className="text-6xl mb-4">🎲</div>
-                <p className="text-[#8a8a7a] mb-4">
+                <p className="text-gray-600 mb-4">
                   Vous n'avez pas encore participé au jeu
                 </p>
                 <Link href={ROUTES.GAME}>
-                  <button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300">
+                  <button className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300">
                     Jouer maintenant
                   </button>
                 </Link>
@@ -183,22 +183,22 @@ export default function ClientPage() {
               <div className="overflow-x-auto">
                 <table className="min-w-full">
                   <thead>
-                    <tr className="border-b border-[#e5e4dc]">
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                    <tr className="border-b border-beige-300">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Code Ticket
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Gain
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Statut
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Date
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-[#e5e4dc]">
+                  <tbody className="divide-y divide-beige-200">
                     {tickets.slice(0, 5).map((ticket) => (
                       <TicketTableRow key={ticket.id} ticket={ticket} />
                     ))}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index e1aa722..06f5159 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -67,15 +67,15 @@ export default function ContactPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
       {/* Hero Section */}
-      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
+      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
               Contactez-nous
             </h1>
-            <p className="text-lg text-[#8a8a7a]">
+            <p className="text-lg text-gray-600">
               Une question sur le jeu-concours ? Besoin d'aide ? Notre équipe est là pour vous accompagner !
             </p>
           </div>
@@ -90,13 +90,13 @@ export default function ContactPage() {
 
               {/* Contact Form */}
               <div>
-                <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
-                  <h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Envoyez-nous un message</h2>
+                <div className="bg-white rounded-xl shadow-md p-8 border border-beige-300">
+                  <h2 className="text-2xl font-bold text-gray-800 mb-6">Envoyez-nous un message</h2>
 
                   <form onSubmit={handleSubmit} className="space-y-6">
                     {/* Nom complet */}
                     <div>
-                      <label htmlFor="fullName" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
+                      <label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2">
                         Nom complet <span className="text-red-500">*</span>
                       </label>
                       <input
@@ -107,13 +107,13 @@ export default function ContactPage() {
                         value={formData.fullName}
                         onChange={handleChange}
                         placeholder="Votre nom et prénom"
-                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]"
+                        className="w-full px-4 py-3 border-2 border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                       />
                     </div>
 
                     {/* Email */}
                     <div>
-                      <label htmlFor="email" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
+                      <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
                         Email <span className="text-red-500">*</span>
                       </label>
                       <input
@@ -124,13 +124,13 @@ export default function ContactPage() {
                         value={formData.email}
                         onChange={handleChange}
                         placeholder="votre@email.com"
-                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]"
+                        className="w-full px-4 py-3 border-2 border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                       />
                     </div>
 
                     {/* Sujet */}
                     <div>
-                      <label htmlFor="subject" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
+                      <label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2">
                         Sujet <span className="text-red-500">*</span>
                       </label>
                       <select
@@ -139,7 +139,7 @@ export default function ContactPage() {
                         required
                         value={formData.subject}
                         onChange={handleChange}
-                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white"
+                        className="w-full px-4 py-3 border-2 border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white"
                       >
                         <option value="">Sélectionnez un sujet</option>
                         <option value="jeu-concours">Question sur le jeu-concours</option>
@@ -152,7 +152,7 @@ export default function ContactPage() {
 
                     {/* Message */}
                     <div>
-                      <label htmlFor="message" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
+                      <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
                         Message <span className="text-red-500">*</span>
                       </label>
                       <textarea
@@ -163,7 +163,7 @@ export default function ContactPage() {
                         onChange={handleChange}
                         placeholder="Décrivez votre demande en détail..."
                         rows={6}
-                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] resize-none"
+                        className="w-full px-4 py-3 border-2 border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-none"
                       />
                     </div>
 
@@ -176,11 +176,11 @@ export default function ContactPage() {
                         required
                         checked={formData.acceptPolicy}
                         onChange={handleCheckboxChange}
-                        className="mt-1 w-5 h-5 text-[#d4a574] border-[#e5e4dc] rounded focus:ring-2 focus:ring-[#d4a574]"
+                        className="mt-1 w-5 h-5 text-primary-500 border-beige-300 rounded focus:ring-2 focus:ring-primary-500"
                       />
-                      <label htmlFor="acceptPolicy" className="text-sm text-[#5a5a4e] select-none cursor-pointer">
+                      <label htmlFor="acceptPolicy" className="text-sm text-gray-700 select-none cursor-pointer">
                         J'accepte que mes données soient collectées et traitées conformément à la{' '}
-                        <Link href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">
+                        <Link href="/privacy" className="text-primary-500 underline hover:text-primary-600">
                           politique de confidentialité
                         </Link>{' '}
                         <span className="text-red-500">*</span>
@@ -192,7 +192,7 @@ export default function ContactPage() {
                       <button
                         type="submit"
                         disabled={isSubmitting}
-                        className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105"
+                        className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(11,96,41,0.4)] hover:scale-105"
                       >
                         {isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
                       </button>
@@ -205,20 +205,20 @@ export default function ContactPage() {
               <div className="space-y-6">
 
                 {/* Nos coordonnées */}
-                <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
-                  <h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Nos coordonnées</h2>
+                <div className="bg-white rounded-xl shadow-md p-8 border border-beige-300">
+                  <h2 className="text-2xl font-bold text-gray-800 mb-6">Nos coordonnées</h2>
 
                   <div className="space-y-6">
                     {/* Siège social */}
                     <div className="flex items-start gap-4">
-                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📍</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📍</div>
                       <div>
-                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Siège social</h3>
+                        <h3 className="font-semibold text-gray-800 mb-1">Siège social</h3>
                         <a
                           href="https://www.google.com/maps/search/?api=1&query=18+Avenue+Thiers+06000+Nice+France"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-[#8a8a7a] text-sm hover:text-[#d4a574] transition-colors block"
+                          className="text-gray-600 text-sm hover:text-primary-500 transition-colors block"
                         >
                           Thé Tip Top<br />
                           18 Avenue Thiers<br />
@@ -229,11 +229,11 @@ export default function ContactPage() {
 
                     {/* Téléphone */}
                     <div className="flex items-start gap-4">
-                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📞</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📞</div>
                       <div>
-                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Téléphone</h3>
-                        <p className="text-[#8a8a7a] text-sm">
-                          <a href="tel:+33123456789" className="hover:text-[#d4a574] transition-colors">
+                        <h3 className="font-semibold text-gray-800 mb-1">Téléphone</h3>
+                        <p className="text-gray-600 text-sm">
+                          <a href="tel:+33123456789" className="hover:text-primary-500 transition-colors">
                             +33 1 23 45 67 89
                           </a><br />
                           <span className="text-xs">Du lundi au vendredi<br />9h00 - 18h00</span>
@@ -243,12 +243,12 @@ export default function ContactPage() {
 
                     {/* Email */}
                     <div className="flex items-start gap-4">
-                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">✉️</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">✉️</div>
                       <div>
-                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Email</h3>
-                        <div className="text-[#8a8a7a] text-sm space-y-1">
+                        <h3 className="font-semibold text-gray-800 mb-1">Email</h3>
+                        <div className="text-gray-600 text-sm space-y-1">
                           <p>
-                            <a href="mailto:thetiptopgr3@gmail.com" className="hover:text-[#d4a574] transition-colors">
+                            <a href="mailto:thetiptopgr3@gmail.com" className="hover:text-primary-500 transition-colors">
                               thetiptopgr3@gmail.com
                             </a>
                           </p>
@@ -258,10 +258,10 @@ export default function ContactPage() {
 
                     {/* Service client */}
                     <div className="flex items-start gap-4">
-                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">🕐</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">🕐</div>
                       <div>
-                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Service client</h3>
-                        <p className="text-[#8a8a7a] text-sm">
+                        <h3 className="font-semibold text-gray-800 mb-1">Service client</h3>
+                        <p className="text-gray-600 text-sm">
                           Réponse sous 24h<br />
                           Support multilingue<br />
                           Du lundi au samedi
@@ -272,8 +272,8 @@ export default function ContactPage() {
                 </div>
 
                 {/* Google Maps */}
-                <div className="bg-white rounded-xl shadow-md p-4 border border-[#e5e4dc]">
-                  <h2 className="text-xl font-bold text-[#5a5a4e] mb-4">Nous trouver</h2>
+                <div className="bg-white rounded-xl shadow-md p-4 border border-beige-300">
+                  <h2 className="text-xl font-bold text-gray-800 mb-4">Nous trouver</h2>
                   <div className="rounded-lg overflow-hidden relative">
                     <iframe
                       src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2884.5!2d7.2619!3d43.7102!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cdd0106a852d31%3A0x40819a5fd979a70!2s18%20Av.%20Thiers%2C%2006000%20Nice%2C%20France!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
@@ -292,15 +292,15 @@ export default function ContactPage() {
                       rel="noopener noreferrer"
                       className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 group"
                     >
-                      <span className="block w-6 h-6 bg-red-600 rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-125 transition-transform animate-pulse"></span>
-                      <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[8px] border-l-transparent border-r-transparent border-t-red-600"></span>
+                      <span className="block w-6 h-6 bg-primary-500 rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-125 transition-transform animate-pulse"></span>
+                      <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[8px] border-l-transparent border-r-transparent border-t-primary-500"></span>
                     </a>
                   </div>
                   <a
                     href="https://www.google.com/maps/search/?api=1&query=18+Avenue+Thiers+06000+Nice+France"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="mt-3 inline-flex items-center gap-2 text-sm text-[#d4a574] hover:text-[#c4956a] transition-colors"
+                    className="mt-3 inline-flex items-center gap-2 text-sm text-primary-500 hover:text-primary-600 transition-colors"
                   >
                     Ouvrir dans Google Maps
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -318,17 +318,17 @@ export default function ContactPage() {
       <section className="py-12">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 rounded-xl p-8 border-l-4 border-[#d4a574] shadow-lg">
+            <div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-xl p-8 border-l-4 border-primary-500 shadow-lg">
               <div className="flex items-start gap-4">
-                <div className="w-16 h-16 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-md flex-shrink-0">💡</div>
+                <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-md flex-shrink-0">💡</div>
                 <div className="flex-1">
-                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Avant de nous contacter</h3>
-                  <p className="text-[#5a5a4e] mb-4">
+                  <h3 className="text-xl font-bold text-gray-800 mb-2">Avant de nous contacter</h3>
+                  <p className="text-gray-700 mb-4">
                     Consultez notre FAQ, vous y trouverez peut-être la réponse à votre question !
                   </p>
                   <Link
                     href="/faq"
-                    className="inline-flex items-center justify-center bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:scale-105"
+                    className="inline-flex items-center justify-center bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:scale-105"
                   >
                     Voir la FAQ
                   </Link>
diff --git a/app/cookies/page.tsx b/app/cookies/page.tsx
index 0e8a69c..a97ef5e 100644
--- a/app/cookies/page.tsx
+++ b/app/cookies/page.tsx
@@ -43,7 +43,7 @@ export default function CookiesPage() {
   return (
     <div className="py-12">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8 text-center">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-8 text-center">
           Gestion des cookies
         </h1>
 
@@ -290,8 +290,8 @@ export default function CookiesPage() {
           <CardContent>
             <p className="text-gray-700">
               Pour toute question concernant les cookies :{" "}
-              <a href="mailto:contact@thetiptop.fr" className="text-primary-600 hover:text-primary-700 underline">
-                contact@thetiptop.fr
+              <a href="mailto:thetiptopgr3@gmail.com" className="text-primary-600 hover:text-primary-700 underline">
+                thetiptopgr3@gmail.com
               </a>
             </p>
           </CardContent>
diff --git a/app/faq/FAQContent.tsx b/app/faq/FAQContent.tsx
index 7bb2844..f8a137c 100644
--- a/app/faq/FAQContent.tsx
+++ b/app/faq/FAQContent.tsx
@@ -101,7 +101,7 @@ export default function FAQContent() {
       <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
               Questions fréquentes
             </h1>
             <p className="text-lg text-[#8a8a7a]">
diff --git a/app/historique/page.tsx b/app/historique/page.tsx
index c918364..389c267 100644
--- a/app/historique/page.tsx
+++ b/app/historique/page.tsx
@@ -89,23 +89,23 @@ export default function HistoriquePage() {
 
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
       <div className="container mx-auto px-4">
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2 flex items-center gap-3">
-            <Calendar className="w-10 h-10 text-[#d4a574]" />
+          <h1 className="text-4xl font-bold text-gray-800 mb-2 flex items-center gap-3">
+            <Calendar className="w-10 h-10 text-primary-500" />
             Historique de mes participations
           </h1>
-          <p className="text-[#8a8a7a]">
+          <p className="text-gray-600">
             Consultez l'historique complet de vos participations et gains
           </p>
         </div>
 
         <div className="grid md:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Total</p>
+                <p className="text-sm font-medium text-gray-600 mb-2">Total</p>
                 <p className="text-4xl font-bold text-blue-600">{stats.total}</p>
               </div>
               <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
@@ -116,38 +116,38 @@ export default function HistoriquePage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Réclamés</p>
-                <p className="text-4xl font-bold text-green-600">{stats.claimed}</p>
+                <p className="text-sm font-medium text-gray-600 mb-2">Réclamés</p>
+                <p className="text-4xl font-bold text-primary-600">{stats.claimed}</p>
               </div>
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">En attente</p>
-                <p className="text-4xl font-bold text-yellow-600">{stats.pending}</p>
+                <p className="text-sm font-medium text-gray-600 mb-2">En attente</p>
+                <p className="text-4xl font-bold text-secondary-600">{stats.pending}</p>
               </div>
-              <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-secondary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Rejetés</p>
+                <p className="text-sm font-medium text-gray-600 mb-2">Rejetés</p>
                 <p className="text-4xl font-bold text-red-600">{stats.rejected}</p>
               </div>
               <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
@@ -159,17 +159,17 @@ export default function HistoriquePage() {
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md p-6 mb-6 border border-[#e5e4dc]">
+        <div className="bg-white rounded-xl shadow-md p-6 mb-6 border border-beige-300">
           <div className="flex flex-col md:flex-row gap-4">
             <div className="flex-1">
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#8a8a7a] w-5 h-5" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 w-5 h-5" />
                 <input
                   type="text"
                   placeholder="Rechercher par code ticket..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] focus:outline-none"
+                  className="w-full pl-10 pr-4 py-3 border-2 border-beige-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none"
                 />
               </div>
             </div>
@@ -179,8 +179,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('ALL')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'ALL'
-                    ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg'
-                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
+                    ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg'
+                    : 'bg-beige-100 text-gray-700 hover:bg-beige-200'
                 }`}
               >
                 Tous ({tickets.length})
@@ -189,8 +189,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('CLAIMED')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'CLAIMED'
-                    ? 'bg-green-600 text-white shadow-lg'
-                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
+                    ? 'bg-primary-600 text-white shadow-lg'
+                    : 'bg-beige-100 text-gray-700 hover:bg-beige-200'
                 }`}
               >
                 Réclamés ({stats.claimed})
@@ -199,8 +199,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('PENDING')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'PENDING'
-                    ? 'bg-yellow-600 text-white shadow-lg'
-                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
+                    ? 'bg-secondary-600 text-white shadow-lg'
+                    : 'bg-beige-100 text-gray-700 hover:bg-beige-200'
                 }`}
               >
                 En attente ({stats.pending})
@@ -210,7 +210,7 @@ export default function HistoriquePage() {
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'REJECTED'
                     ? 'bg-red-600 text-white shadow-lg'
-                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
+                    : 'bg-beige-100 text-gray-700 hover:bg-beige-200'
                 }`}
               >
                 Rejetés ({stats.rejected})
@@ -219,15 +219,15 @@ export default function HistoriquePage() {
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
-          <div className="px-6 py-4 border-b border-[#e5e4dc]">
-            <h2 className="text-xl font-bold text-[#5a5a4e]">Tous mes tickets ({filteredTickets.length})</h2>
+        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
+          <div className="px-6 py-4 border-b border-beige-300">
+            <h2 className="text-xl font-bold text-gray-800">Tous mes tickets ({filteredTickets.length})</h2>
           </div>
           <div className="p-6">
             {filteredTickets.length === 0 ? (
               <div className="text-center py-12">
                 <div className="text-6xl mb-4">🎲</div>
-                <p className="text-[#8a8a7a] mb-4">
+                <p className="text-gray-600 mb-4">
                   {searchQuery || filter !== 'ALL'
                     ? 'Aucun ticket trouvé avec ces filtres'
                     : 'Vous n\'avez pas encore participé au jeu'}
@@ -235,7 +235,7 @@ export default function HistoriquePage() {
                 {!searchQuery && filter === 'ALL' && (
                   <button
                     onClick={() => router.push(ROUTES.GAME)}
-                    className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
+                    className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                   >
                     Jouer maintenant
                   </button>
@@ -245,25 +245,25 @@ export default function HistoriquePage() {
               <div className="overflow-x-auto">
                 <table className="min-w-full">
                   <thead>
-                    <tr className="border-b border-[#e5e4dc]">
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                    <tr className="border-b border-beige-300">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
                         Code Ticket
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
                         Gain
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
                         Statut
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
                         Date de participation
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
                         Date de réclamation
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-[#e5e4dc]">
+                  <tbody className="divide-y divide-beige-200">
                     {filteredTickets.map((ticket) => (
                       <TicketTableRow key={ticket.id} ticket={ticket} showClaimedDate />
                     ))}
diff --git a/app/jeux/page.tsx b/app/jeux/page.tsx
index 47bdc92..bb25208 100644
--- a/app/jeux/page.tsx
+++ b/app/jeux/page.tsx
@@ -17,9 +17,9 @@ import Link from "next/link";
 
 const PRIZES = [
   { type: 'INFUSEUR', name: 'Infuseur à thé', color: 'bg-blue-100 text-blue-800' },
-  { type: 'THE_SIGNATURE', name: 'Thé signature 100g', color: 'bg-green-100 text-green-800' },
+  { type: 'THE_SIGNATURE', name: 'Thé signature 100g', color: 'bg-primary-100 text-primary-800' },
   { type: 'COFFRET_DECOUVERTE', name: 'Coffret découverte 39€', color: 'bg-purple-100 text-purple-800' },
-  { type: 'COFFRET_PRESTIGE', name: 'Coffret prestige 69€', color: 'bg-amber-100 text-amber-800' },
+  { type: 'COFFRET_PRESTIGE', name: 'Coffret prestige 69€', color: 'bg-secondary-200 text-secondary-800' },
   { type: 'THE_GRATUIT', name: 'Thé gratuit en magasin', color: 'bg-pink-100 text-pink-800' },
 ];
 
@@ -110,28 +110,28 @@ export default function JeuxPage() {
     : null;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
       <div className="container mx-auto px-4">
         {/* Formulaire Section */}
         <section className="mb-16">
           <div className="max-w-2xl mx-auto">
-            <div className="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-[#e5e4dc]">
-              <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] px-6 py-6 shadow-lg">
+            <div className="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-beige-300">
+              <div className="bg-gradient-to-r from-primary-500 to-primary-600 px-6 py-6 shadow-lg">
                 <h1 className="text-center text-3xl md:text-4xl font-bold text-white">
-                  🎁 Jouez maintenant !
+                  Jouez maintenant !
                 </h1>
               </div>
               <div className="p-8">
                 <div className="mb-6 text-center">
-                  <p className="text-[#5a5a4e] text-lg">
-                    Bonjour <span className="font-bold text-[#d4a574]">{user?.firstName}</span>,
+                  <p className="text-beige-800 text-lg">
+                    Bonjour <span className="font-bold text-primary-500">{user?.firstName}</span>,
                     entrez le code de 10 caractères présent sur votre ticket de caisse
                   </p>
                 </div>
 
                 <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
                   <div>
-                    <label htmlFor="ticketCode" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
+                    <label htmlFor="ticketCode" className="block text-sm font-semibold text-beige-800 mb-2">
                       Code du ticket
                     </label>
                     <input
@@ -139,7 +139,7 @@ export default function JeuxPage() {
                       type="text"
                       placeholder="TTP2025ABC"
                       {...register("ticketCode")}
-                      className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] tracking-widest bg-white shadow-inner"
+                      className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 tracking-widest bg-white shadow-inner"
                       maxLength={10}
                     />
                     {errors.ticketCode && (
@@ -158,7 +158,7 @@ export default function JeuxPage() {
                         </Link>
                       </div>
                     )}
-                    <p className="mt-2 text-sm text-[#8a8a7a] text-center">
+                    <p className="mt-2 text-sm text-beige-600 text-center">
                       Format: TTP2025ABC (10 caractères)
                     </p>
                   </div>
@@ -167,20 +167,20 @@ export default function JeuxPage() {
                     <button
                       type="submit"
                       disabled={isPlaying}
-                      className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105"
+                      className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(11,96,41,0.4)] hover:scale-105"
                     >
-                      {isPlaying ? "Vérification en cours..." : "🎲 Tenter ma chance !"}
+                      {isPlaying ? "Vérification en cours..." : "Tenter ma chance !"}
                     </button>
                   </div>
                 </form>
 
-                <div className="mt-6 p-4 bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] rounded-lg shadow-md">
-                  <p className="text-sm text-[#5a5a4e] font-semibold mb-2">
-                    💡 Bon à savoir :
+                <div className="mt-6 p-4 bg-gradient-to-r from-primary-50 to-primary-100 border-l-4 border-primary-500 rounded-lg shadow-md">
+                  <p className="text-sm text-beige-800 font-semibold mb-2">
+                    Bon à savoir :
                   </p>
-                  <ul className="text-sm text-[#5a5a4e] space-y-1 list-disc list-inside">
+                  <ul className="text-sm text-beige-800 space-y-1 list-disc list-inside">
                     <li>Chaque code ne peut être utilisé qu'une seule fois</li>
-                    <li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-[#d4a574] transition-colors">Mes gains</Link></li>
+                    <li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-primary-500 transition-colors">Mes gains</Link></li>
                   </ul>
                 </div>
               </div>
@@ -260,8 +260,8 @@ export default function JeuxPage() {
               </div>
 
               {/* Loading Animation */}
-              <div className="flex items-center gap-2 text-[#5a5a4e]">
-                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#d4a574]"></div>
+              <div className="flex items-center gap-2 text-beige-800">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"></div>
                 <span className="font-medium">Tirage en cours...</span>
               </div>
             </div>
@@ -323,13 +323,13 @@ export default function JeuxPage() {
               <div className="flex gap-3 justify-center">
                 <button
                   onClick={closeModal}
-                  className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all"
+                  className="border-2 border-beige-300 hover:bg-beige-100 text-beige-800 font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Fermer
                 </button>
                 <button
                   onClick={() => router.push(ROUTES.HISTORY)}
-                  className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)]"
+                  className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(11,96,41,0.4)]"
                 >
                   Voir mes gains
                 </button>
diff --git a/app/layout.tsx b/app/layout.tsx
index 2f39ee5..6de5a97 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,7 +5,10 @@ import { Toaster } from "react-hot-toast";
 import LayoutClient from "./layout-client";
 import { Providers } from "./providers";
 
+// Google Analytics 4
 const GA_TRACKING_ID = "G-E272LVVQRD";
+// Google Tag Manager
+const GTM_ID = "GTM-WN8H6RTC";
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_FRONTEND_URL || 'https://dsp5-archi-o24a-15m-g3.fr'),
@@ -42,20 +45,45 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="fr">
       <head>
+        {/* Google Tag Manager - must load first */}
+        <Script id="google-tag-manager" strategy="beforeInteractive">
+          {`
+            (function(w,d,s,l,i){
+              w[l]=w[l]||[];
+              w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
+              var f=d.getElementsByTagName(s)[0],
+                  j=d.createElement(s),
+                  dl = l!='dataLayer'?'&l='+l:'';
+              j.async=true;
+              j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
+              f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer','GTM-WN8H6RTC');
+          `}
+        </Script>
+        {/* Google Analytics 4 */}
         <Script
-          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-          strategy="afterInteractive"
+          src="https://www.googletagmanager.com/gtag/js?id=G-E272LVVQRD"
+          strategy="beforeInteractive"
         />
-        <Script id="google-analytics" strategy="afterInteractive">
+        <Script id="google-analytics" strategy="beforeInteractive">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', '${GA_TRACKING_ID}');
+            gtag('config', 'G-E272LVVQRD');
           `}
         </Script>
       </head>
       <body className="min-h-screen flex flex-col bg-gray-50">
+        {/* Google Tag Manager (noscript) */}
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-WN8H6RTC"
+            height="0"
+            width="0"
+            style={{ display: 'none', visibility: 'hidden' }}
+          />
+        </noscript>
         <Providers>
           <LayoutClient>{children}</LayoutClient>
         </Providers>
diff --git a/app/legal/page.tsx b/app/legal/page.tsx
index 8f346ea..a731199 100644
--- a/app/legal/page.tsx
+++ b/app/legal/page.tsx
@@ -8,17 +8,17 @@ export const metadata: Metadata = {
 
 export default function LegalPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
-      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
-        <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
-          Mentions légales
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-12 px-4">
+      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-beige-300 p-8">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-500 mb-6">
+          Informations légales
         </h1>
-        <p className="text-sm text-[#8a8a7a] mb-8">
+        <p className="text-sm text-gray-600 mb-8">
           Dernière mise à jour : 21 Novembre 2025
         </p>
-        <div className="space-y-6 text-[#5a5a4e]">
+        <div className="space-y-6 text-gray-700">
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               1. Éditeur du site
             </h2>
             <ul className="list-none space-y-2 mt-3">
@@ -34,7 +34,7 @@ export default function LegalPage() {
             </ul>
           </section>
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               2. Responsable de publication
             </h2>
             <p>
@@ -42,7 +42,7 @@ export default function LegalPage() {
             </p>
           </section>
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               3. Conception et accompagnement digital
             </h2>
             <ul className="list-none space-y-2 mt-3">
@@ -55,7 +55,7 @@ export default function LegalPage() {
             </ul>
           </section>
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               4. Hébergement
             </h2>
             <p>Le site est hébergé par : OVH Cloud – www.ovhcloud.com </p>
@@ -63,7 +63,7 @@ export default function LegalPage() {
             <p>Téléphone : +33 (0)9 72 10 10 07</p>             
           </section>
              <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               5. Propriété intellectuelle
             </h2>
             <p>
@@ -75,16 +75,16 @@ export default function LegalPage() {
             </p>
           </section>
              <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               6. Protection des données personnelles
             </h2>
             <p>
               Les données collectées via le site sont traitées par Thé Tip Top SA conformément au Règlement Général sur la Protection des Données (RGPD).
-              Chaque utilisateur dispose d'un droit d'accès, de rectification et de suppression de ses données en adressant une demande à :           <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">contact@thetiptop.fr</a>
+              Chaque utilisateur dispose d'un droit d'accès, de rectification et de suppression de ses données en adressant une demande à :           <a href="mailto:contact@thetiptop.fr" className="text-primary-500 hover:text-primary-600 transition-colors">contact@thetiptop.fr</a>
               </p>
           </section>
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               7. Cookies
             </h2>
             <p>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 391ebc1..59f3417 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -96,13 +96,13 @@ export default function LoginPage() {
 
           {/* Tabs */}
           <div className="flex border-b border-gray-200">
-            <button className="flex-1 py-4 px-6 text-center font-bold text-gray-900 bg-white border-b-3 border-[#d4a574] shadow-[0_3px_8px_rgba(212,165,116,0.3)] relative">
+            <button className="flex-1 py-4 px-6 text-center font-bold text-gray-900 bg-white border-b-3 border-primary-500 shadow-[0_3px_8px_rgba(11,96,41,0.2)] relative">
               <span className="relative z-10">Connexion</span>
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#d4a574] to-transparent"></div>
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary-500 to-transparent"></div>
             </button>
             <Link
               href={ROUTES.REGISTER}
-              className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 hover:text-[#c4956a] transition-all duration-300 hover:shadow-inner"
+              className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 transition-all duration-300 hover:shadow-inner"
             >
               Inscription
             </Link>
@@ -124,7 +124,7 @@ export default function LoginPage() {
                   type="email"
                   placeholder="email"
                   {...register("email")}
-                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
+                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent`}
                 />
                 {errors.email && (
                   <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
@@ -142,7 +142,7 @@ export default function LoginPage() {
                     type={showPassword ? "text" : "password"}
                     placeholder="mot de passe"
                     {...register("password")}
-                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -170,7 +170,7 @@ export default function LoginPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(212,165,116,0.7)] hover:scale-[1.02] shadow-lg transform"
+                className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 disabled:bg-gray-400 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(11,96,41,0.5)] hover:scale-[1.02] shadow-lg transform"
               >
                 {isSubmitting ? "Connexion..." : "Se connecter"}
               </button>
@@ -179,7 +179,7 @@ export default function LoginPage() {
               <div className="text-center">
                 <Link
                   href="/forgot-password"
-                  className="text-sm text-[#5a5a4e] hover:text-[#d4a574] hover:underline transition-colors"
+                  className="text-sm text-beige-800 hover:text-primary-500 hover:underline transition-colors"
                 >
                   Mot de passe oublié ?
                 </Link>
diff --git a/app/lots/page.tsx b/app/lots/page.tsx
index 4770e93..119ed8a 100644
--- a/app/lots/page.tsx
+++ b/app/lots/page.tsx
@@ -19,15 +19,15 @@ const PRIZES = [
 
 export default function LotsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
       {/* Hero Section */}
-      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
+      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
               Lots à gagner
             </h1>
-            <p className="text-lg text-[#8a8a7a]">
+            <p className="text-lg text-gray-600">
               Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
               chaque participant repart avec un lot !
             </p>
@@ -39,7 +39,7 @@ export default function LotsPage() {
       <section className="py-8">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
-            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]">
+            <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl p-8 shadow-2xl border-2 border-primary-400">
               <div className="flex flex-col md:flex-row items-center gap-6">
                 <div className="flex-shrink-0">
                   <div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center p-3 shadow-md">
@@ -53,7 +53,7 @@ export default function LotsPage() {
                   </div>
                 </div>
                 <div className="flex-1 text-center md:text-left">
-                  <div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
+                  <div className="inline-block bg-white text-primary-500 text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
                     GRAND PRIX FINAL
                   </div>
                   <h2 className="text-3xl md:text-4xl font-bold text-white mb-2">
@@ -88,7 +88,7 @@ export default function LotsPage() {
       {/* CTA Section */}
       <section className="py-16">
         <div className="container mx-auto px-4">
-          <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
+          <div className="max-w-4xl mx-auto bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-primary-400">
             <h2 className="text-3xl md:text-4xl font-bold mb-4">
               Prêt à découvrir votre lot ?
             </h2>
@@ -97,7 +97,7 @@ export default function LotsPage() {
               tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
             </p>
             <Link href="/register">
-              <button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105">
+              <button className="bg-white text-primary-500 hover:bg-beige-50 font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105">
                 Participer maintenant
               </button>
             </Link>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 603e5dc..d644982 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -28,7 +28,7 @@ export default function NotFound() {
         </div>
 
         {/* Text content */}
-        <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
           Oups ! Page introuvable
         </h1>
         <p className="text-lg text-[#8a8a7a] mb-8 max-w-md mx-auto">
diff --git a/app/page.tsx b/app/page.tsx
index ee04322..8e047a7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -51,31 +51,33 @@ export default function HomePage() {
       <TeaIconsBackground animationKey={animationKey} />
 
       {/* Hero Section - Bannière principale */}
-      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 md:pt-0">
 
         <div className="w-full relative z-10">
           <div className="w-full text-center px-4">
-            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#d4a574] mb-8 leading-tight drop-shadow-sm tracking-wide">
+            <h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-primary-500 mb-4 md:mb-6 leading-tight drop-shadow-sm tracking-wide">
               Jeu Concours - Thé Tip Top
             </h1>
-            <p className="text-5xl md:text-6xl lg:text-7xl font-semibold text-[#6a6a5e] mb-10 leading-relaxed tracking-wide">
-              Célébrons l'ouverture de notre 10<sup>ème</sup> boutique à <span className="text-[#d4a574]">Nice</span>
+            <p className="text-xl sm:text-2xl md:text-5xl lg:text-6xl font-semibold text-primary-300 mb-4 md:mb-6 leading-snug md:leading-relaxed tracking-wide">
+              Célébrons l'ouverture de notre 10<sup>ème</sup> boutique à <span className="text-primary-500 font-bold">Nice</span>
             </p>
-            <p className="text-xl md:text-2xl lg:text-3xl text-[#7a7a6e] mb-16 leading-relaxed tracking-wide">
+            <p className="text-base sm:text-lg md:text-2xl lg:text-3xl text-gray-500 mb-8 md:mb-10 leading-relaxed tracking-wide px-2">
               Participez à notre concours - 100% des participants gagnent un lot !
             </p>
 
-            <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
+            {/* Bouton principal */}
+            <div className="flex flex-col gap-4 justify-center items-center px-4">
               <Link href={isAuthenticated ? ROUTES.GAME : "/register"}>
                 <div className="relative inline-block">
                   {/* Anneau qui pulse autour du bouton */}
-                  <span className="absolute inset-0 rounded-full border-4 border-[#d4a574] animate-ping opacity-60"></span>
+                  <span className="absolute inset-0 rounded-full border-4 border-primary-500 animate-ping opacity-60"></span>
 
-                  <button className="relative bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold text-xl md:text-2xl px-16 py-6 md:px-20 md:py-7 rounded-full shadow-[0_0_25px_rgba(212,165,116,0.8)] hover:shadow-[0_0_40px_rgba(212,165,116,1)] transition-all duration-300 hover:scale-105">
+                  <button className="relative bg-primary-500 hover:bg-primary-600 text-white font-bold text-lg sm:text-xl md:text-2xl px-10 py-4 sm:px-16 sm:py-6 md:px-20 md:py-7 rounded-full shadow-[0_0_25px_rgba(11,96,41,0.6)] hover:shadow-[0_0_40px_rgba(11,96,41,0.8)] transition-all duration-300 hover:scale-105">
                     Jouer maintenant
                   </button>
                 </div>
               </Link>
+
             </div>
           </div>
         </div>
@@ -104,7 +106,7 @@ export default function HomePage() {
       <section className="py-20 bg-white/60 backdrop-blur-sm">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-center text-primary-300 mb-4">
               Comment participer?
             </h2>
             <p className="text-center text-gray-600 mb-16 text-lg max-w-2xl mx-auto">
@@ -114,11 +116,11 @@ export default function HomePage() {
             <div className="grid md:grid-cols-3 gap-12">
               {/* Step 1 */}
               <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
+                <div className="absolute top-0 right-0 w-8 h-8 bg-primary-500 text-white rounded-full flex items-center justify-center font-bold text-sm">
                   1
                 </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="bg-gradient-to-br from-primary-100 to-primary-200 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <svg className="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
                 </div>
@@ -130,27 +132,27 @@ export default function HomePage() {
 
               {/* Step 2 */}
               <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
+                <div className="absolute top-0 right-0 w-8 h-8 bg-primary-500 text-white rounded-full flex items-center justify-center font-bold text-sm">
                   2
                 </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="bg-gradient-to-br from-primary-100 to-primary-200 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <svg className="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                   </svg>
                 </div>
                 <h3 className="text-2xl font-bold mb-3 text-gray-900">Entrez votre code</h3>
                 <p className="text-gray-600 leading-relaxed">
-                  Saisissez le code à 10 caractères de votre ticket d'achat à 49€
+                  Saisissez le code à 10 caractères de votre ticket
                 </p>
               </div>
 
               {/* Step 3 */}
               <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
+                <div className="absolute top-0 right-0 w-8 h-8 bg-primary-500 text-white rounded-full flex items-center justify-center font-bold text-sm">
                   3
                 </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="bg-gradient-to-br from-primary-100 to-primary-200 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <svg className="w-10 h-10 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                   </svg>
                 </div>
@@ -168,7 +170,7 @@ export default function HomePage() {
       <section className="py-20 bg-transparent">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-center text-primary-300 mb-4">
               Lots à gagner
             </h2>
             <p className="text-center text-gray-600 mb-16 text-lg max-w-3xl mx-auto">
@@ -186,7 +188,7 @@ export default function HomePage() {
                 <Button
                   variant="outline"
                   size="lg"
-                  className="border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-semibold px-8"
+                  className="border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-semibold px-8"
                 >
                   Voir tous les lots
                   <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 1a2cb7a..6cd6ec7 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -7,19 +7,19 @@ export const metadata: Metadata = {
 
 export default function PrivacyPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
-      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
-        <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-12 px-4">
+      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-beige-300 p-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
           Politique de confidentialité
         </h1>
 
-        <p className="text-sm text-[#8a8a7a] mb-8">
+        <p className="text-sm text-gray-600 mb-8">
           Dernière mise à jour : 17 janvier 2025
         </p>
 
-        <div className="space-y-6 text-[#5a5a4e]">
+        <div className="space-y-6 text-gray-700">
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               1. Introduction
             </h2>
             <p>
@@ -30,7 +30,7 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               2. Données collectées
             </h2>
             <p className="mb-2">Nous collectons les informations suivantes :</p>
@@ -44,7 +44,7 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               3. Utilisation des données
             </h2>
             <p className="mb-2">Vos données sont utilisées pour :</p>
@@ -58,7 +58,7 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               4. Vos droits (RGPD)
             </h2>
             <p className="mb-2">Conformément au RGPD, vous disposez des droits suivants :</p>
@@ -69,12 +69,12 @@ export default function PrivacyPage() {
               <li><strong>Droit d'opposition :</strong> vous opposer au traitement de vos données</li>
             </ul>
             <p className="mt-3">
-              Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a>
+              Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-primary-500 hover:text-primary-600 transition-colors">privacy@thetiptop.fr</a>
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               5. Contact
             </h2>
             <p>
@@ -82,16 +82,16 @@ export default function PrivacyPage() {
               vous pouvez nous contacter :
             </p>
             <ul className="list-none space-y-2 mt-3">
-              <li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a></li>
+              <li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-primary-500 hover:text-primary-600 transition-colors">privacy@thetiptop.fr</a></li>
               <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
             </ul>
           </section>
         </div>
 
-        <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
+        <div className="mt-8 pt-6 border-t border-beige-300">
           <a
             href="/"
-            className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
+            className="inline-flex items-center gap-2 text-primary-500 hover:text-primary-600 font-medium transition-colors group"
           >
             <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
diff --git a/app/profil/page.tsx b/app/profil/page.tsx
index b1284eb..9883546 100644
--- a/app/profil/page.tsx
+++ b/app/profil/page.tsx
@@ -113,48 +113,48 @@ export default function ProfilePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
       <div className="container mx-auto px-4 max-w-4xl">
-        <h1 className="text-4xl font-bold text-[#5a5a4e] mb-8">Mon profil</h1>
+        <h1 className="text-4xl font-bold text-gray-800 mb-8">Mon profil</h1>
 
         <div className="grid md:grid-cols-3 gap-6">
           {/* Profile Info Card */}
           <div className="md:col-span-2">
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
-              <div className="px-6 py-4 border-b border-[#e5e4dc]">
-                <h2 className="text-xl font-bold text-[#5a5a4e]">Informations personnelles</h2>
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
+              <div className="px-6 py-4 border-b border-beige-300">
+                <h2 className="text-xl font-bold text-gray-800">Informations personnelles</h2>
               </div>
               <div className="p-6">
                 {!isEditing ? (
                   <div className="space-y-4">
                     <div>
-                      <label className="text-sm font-medium text-[#8a8a7a]">
+                      <label className="text-sm font-medium text-gray-600">
                         Prénom
                       </label>
-                      <p className="text-lg text-[#5a5a4e]">{user.firstName}</p>
+                      <p className="text-lg text-gray-800">{user.firstName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-[#8a8a7a]">
+                      <label className="text-sm font-medium text-gray-600">
                         Nom
                       </label>
-                      <p className="text-lg text-[#5a5a4e]">{user.lastName}</p>
+                      <p className="text-lg text-gray-800">{user.lastName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-[#8a8a7a]">
+                      <label className="text-sm font-medium text-gray-600">
                         Email
                       </label>
-                      <p className="text-lg text-[#5a5a4e]">{user.email}</p>
+                      <p className="text-lg text-gray-800">{user.email}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-[#8a8a7a]">
+                      <label className="text-sm font-medium text-gray-600">
                         Téléphone
                       </label>
-                      <p className="text-lg text-[#5a5a4e]">
+                      <p className="text-lg text-gray-800">
                         {user.phone || "Non renseigné"}
                       </p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-[#8a8a7a]">
+                      <label className="text-sm font-medium text-gray-600">
                         Rôle
                       </label>
                       <div className="mt-1">
@@ -166,7 +166,7 @@ export default function ProfilePage() {
                     <div className="pt-4 flex flex-wrap gap-3">
                       <button
                         onClick={() => setIsEditing(true)}
-                        className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
+                        className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                       >
                         Modifier mes informations
                       </button>
@@ -215,7 +215,7 @@ export default function ProfilePage() {
                       <button
                         type="submit"
                         disabled={isSubmitting}
-                        className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
+                        className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                       >
                         {isSubmitting ? "Enregistrement..." : "Enregistrer"}
                       </button>
@@ -223,7 +223,7 @@ export default function ProfilePage() {
                         type="button"
                         onClick={handleCancel}
                         disabled={isSubmitting}
-                        className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all"
+                        className="border-2 border-beige-300 hover:bg-beige-100 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
                       >
                         Annuler
                       </button>
@@ -236,16 +236,16 @@ export default function ProfilePage() {
 
         {/* Account Status Card */}
         <div>
-          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
-            <div className="px-6 py-4 border-b border-[#e5e4dc]">
-              <h2 className="text-xl font-bold text-[#5a5a4e]">Statut du compte</h2>
+          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
+            <div className="px-6 py-4 border-b border-beige-300">
+              <h2 className="text-xl font-bold text-gray-800">Statut du compte</h2>
             </div>
             <div className="p-6 space-y-4">
               <div>
-                <label className="text-sm font-medium text-[#8a8a7a]">
+                <label className="text-sm font-medium text-gray-600">
                   Membre depuis
                 </label>
-                <p className="text-sm text-[#5a5a4e] mt-1">
+                <p className="text-sm text-gray-800 mt-1">
                   {formatDate(user.createdAt)}
                 </p>
               </div>
@@ -253,22 +253,22 @@ export default function ProfilePage() {
           </div>
 
           {/* Quick Actions Card */}
-          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc] mt-6">
-            <div className="px-6 py-4 border-b border-[#e5e4dc]">
-              <h2 className="text-xl font-bold text-[#5a5a4e]">Actions rapides</h2>
+          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300 mt-6">
+            <div className="px-6 py-4 border-b border-beige-300">
+              <h2 className="text-xl font-bold text-gray-800">Actions rapides</h2>
             </div>
             <div className="p-6 space-y-2">
               {user.role === "CLIENT" && (
                 <>
                   <button
                     onClick={() => router.push(ROUTES.GAME)}
-                    className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
+                    className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                   >
                     Jouer
                   </button>
                   <button
                     onClick={() => router.push(ROUTES.HISTORY)}
-                    className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                    className="w-full border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                   >
                     Historique
                   </button>
@@ -277,7 +277,7 @@ export default function ProfilePage() {
               {user.role === "EMPLOYEE" && (
                 <button
                   onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)}
-                  className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                  className="w-full border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Tableau de bord
                 </button>
@@ -285,7 +285,7 @@ export default function ProfilePage() {
               {user.role === "ADMIN" && (
                 <button
                   onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)}
-                  className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                  className="w-full border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Administration
                 </button>
diff --git a/app/register/page.tsx b/app/register/page.tsx
index f25906b..a78986a 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -7,6 +7,7 @@ import { registerSchema, RegisterFormData } from "@/lib/validations";
 import Link from "next/link";
 import TeaIconsBackground from "@/components/TeaIconsBackground";
 import { ROUTES, API_BASE_URL, API_ENDPOINTS } from "@/utils/constants";
+import { isValidEmail } from "@/utils/helpers";
 import ReCAPTCHA from "react-google-recaptcha";
 
 export default function RegisterPage() {
@@ -42,9 +43,7 @@ export default function RegisterPage() {
 
   // Vérifier si l'email existe déjà
   const checkEmail = async (email: string) => {
-    // Regex sécurisée contre ReDoS avec limite de longueur
-    const isValidEmail = email && email.length <= 254 && /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email);
-    if (!isValidEmail) {
+    if (!email || !isValidEmail(email)) {
       setEmailStatus({ checking: false, exists: null, valid: null, message: '' });
       return;
     }
@@ -118,13 +117,13 @@ export default function RegisterPage() {
           <div className="flex border-b border-gray-200">
             <Link
               href={ROUTES.LOGIN}
-              className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 hover:text-[#c4956a] transition-all duration-300 hover:shadow-inner"
+              className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 transition-all duration-300 hover:shadow-inner"
             >
               Connexion
             </Link>
-            <button className="flex-1 py-4 px-6 text-center font-bold text-gray-900 bg-white border-b-3 border-[#d4a574] shadow-[0_3px_8px_rgba(212,165,116,0.3)] relative">
+            <button className="flex-1 py-4 px-6 text-center font-bold text-gray-900 bg-white border-b-3 border-primary-500 shadow-[0_3px_8px_rgba(11,96,41,0.2)] relative">
               <span className="relative z-10">Inscription</span>
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#d4a574] to-transparent"></div>
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary-500 to-transparent"></div>
             </button>
           </div>
 
@@ -145,7 +144,7 @@ export default function RegisterPage() {
                     type="text"
                     placeholder="prénom"
                     {...register("firstName")}
-                    className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
+                    className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent`}
                   />
                   {errors.firstName && (
                     <p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
@@ -161,7 +160,7 @@ export default function RegisterPage() {
                     type="text"
                     placeholder="nom"
                     {...register("lastName")}
-                    className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
+                    className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent`}
                   />
                   {errors.lastName && (
                     <p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
@@ -185,9 +184,9 @@ export default function RegisterPage() {
                       errors.email || emailStatus.exists
                         ? 'border-red-500'
                         : emailStatus.valid
-                          ? 'border-green-500'
+                          ? 'border-primary-500'
                           : 'border-gray-300'
-                    } rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-10`}
+                    } rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent pr-10`}
                   />
                   {/* Status icon */}
                   {emailStatus.checking && (
@@ -200,7 +199,7 @@ export default function RegisterPage() {
                   )}
                   {!emailStatus.checking && emailStatus.valid && (
                     <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                      <svg className="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <svg className="h-5 w-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                       </svg>
                     </div>
@@ -217,7 +216,7 @@ export default function RegisterPage() {
                   <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
                 )}
                 {!errors.email && emailStatus.message && (
-                  <p className={`mt-1 text-sm ${emailStatus.exists ? 'text-red-500' : emailStatus.valid ? 'text-green-600' : 'text-gray-500'}`}>
+                  <p className={`mt-1 text-sm ${emailStatus.exists ? 'text-red-500' : emailStatus.valid ? 'text-primary-600' : 'text-gray-500'}`}>
                     {emailStatus.message}
                   </p>
                 )}
@@ -233,7 +232,7 @@ export default function RegisterPage() {
                   type="tel"
                   placeholder="téléphone"
                   {...register("phone")}
-                  className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
+                  className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent`}
                 />
                 <p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
                 {errors.phone && (
@@ -252,7 +251,7 @@ export default function RegisterPage() {
                     type={showPassword ? "text" : "password"}
                     placeholder="mot de passe"
                     {...register("password")}
-                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -288,7 +287,7 @@ export default function RegisterPage() {
                     type={showConfirmPassword ? "text" : "password"}
                     placeholder="confirmer mot de passe"
                     {...register("confirmPassword")}
-                    className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -318,15 +317,15 @@ export default function RegisterPage() {
                   id="terms"
                   type="checkbox"
                   required
-                  className="mt-1 w-5 h-5 text-[#d4a574] border-gray-300 rounded focus:ring-2 focus:ring-[#d4a574]"
+                  className="mt-1 w-5 h-5 text-primary-500 border-gray-300 rounded focus:ring-2 focus:ring-primary-500"
                 />
                 <label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
                   J'accepte les{' '}
-                  <Link href="/terms" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
+                  <Link href="/terms" className="text-beige-800 underline hover:text-primary-500">
                     conditions d'utilisation
                   </Link>{' '}
                   et la{' '}
-                  <Link href="/privacy" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
+                  <Link href="/privacy" className="text-beige-800 underline hover:text-primary-500">
                     politique de confidentialité
                   </Link>{' '}
                   <span className="text-red-500">*</span>
@@ -350,7 +349,7 @@ export default function RegisterPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(212,165,116,0.7)] hover:scale-[1.02] shadow-lg transform"
+                className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 disabled:bg-gray-400 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(11,96,41,0.5)] hover:scale-[1.02] shadow-lg transform"
               >
                 {isSubmitting ? "Inscription..." : "S'inscrire"}
               </button>
diff --git a/app/rules/page.tsx b/app/rules/page.tsx
index 0896c12..5727eb2 100644
--- a/app/rules/page.tsx
+++ b/app/rules/page.tsx
@@ -11,15 +11,15 @@ export default function RulesPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
       {/* Hero Section */}
-      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
+      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4">
               Règlement du jeu-concours
             </h1>
-            <p className="text-lg text-[#8a8a7a]">
+            <p className="text-lg text-gray-600">
               Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
               pour l'ouverture de notre 10e boutique.
             </p>
@@ -31,36 +31,36 @@ export default function RulesPage() {
       <section className="py-8">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-beige-300">
               <div className="flex items-center gap-2 mb-6">
                 <span className="text-2xl">📋</span>
-                <h2 className="text-2xl font-bold text-[#5a5a4e]">Résumé du jeu-concours</h2>
+                <h2 className="text-2xl font-bold text-gray-800">Résumé du jeu-concours</h2>
               </div>
 
               <div className="grid md:grid-cols-3 gap-4">
                 {/* 100% gagnants */}
-                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🎯</div>
-                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">100% gagnants</div>
-                  <p className="text-sm text-[#8a8a7a]">
+                <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">🎯</div>
+                  <div className="text-2xl font-bold text-gray-800 mb-2">100% gagnants</div>
+                  <p className="text-sm text-gray-600">
                     Chaque participant repart avec un lot garanti
                   </p>
                 </div>
 
                 {/* 30 + 60 jours */}
-                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🔄</div>
-                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">30 + 60 jours</div>
-                  <p className="text-sm text-[#8a8a7a]">
+                <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">🔄</div>
+                  <div className="text-2xl font-bold text-gray-800 mb-2">30 + 60 jours</div>
+                  <p className="text-sm text-gray-600">
                     Validation tickets (30j) + récupération lots (60j)
                   </p>
                 </div>
 
                 {/* Grand prix 360€ */}
-                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
-                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🏆</div>
-                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Grand prix 360€</div>
-                  <p className="text-sm text-[#8a8a7a]">
+                <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">🏆</div>
+                  <div className="text-2xl font-bold text-gray-800 mb-2">Grand prix 360€</div>
+                  <p className="text-sm text-gray-600">
                     Tirage final sous contrôle d'huissier
                   </p>
                 </div>
@@ -76,17 +76,17 @@ export default function RulesPage() {
           <div className="max-w-4xl mx-auto space-y-4">
 
             {/* Section 1 - Conditions de participation */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(1)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📋</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">1. Conditions de participation</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">📋</div>
+                  <h3 className="text-xl font-bold text-gray-800">1. Conditions de participation</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -95,24 +95,24 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 1 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <p>Le concours est ouvert à toute personne majeure résidant en  France métropolitaine ayant effectué un achat d'un montant minimum de 49€ TTC. Pour participer, le participant doit entrer un code unique obtenu lors d'un achat ou d'une opération marketing. </p>
                 </div>
               )}
             </div>
 
             {/* Section 2 - Codes de participation */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(2)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎫</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">2. Codes de participation</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">🎫</div>
+                  <h3 className="text-xl font-bold text-gray-800">2. Codes de participation</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -121,7 +121,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 2 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <p>Pour participer au jeu, le participant doit :</p>
                   <ol className="list-decimal list-inside space-y-2 ml-4">
                     <li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li>
@@ -131,26 +131,26 @@ export default function RulesPage() {
                     <li>Saisir le code figurant sur son ticket dans l'espace dédié</li>
                     <li>Découvrir instantanément son gain</li>
                   </ol>
-                  <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
-                    <p className="font-semibold text-[#5a5a4e]">⚠️ Important</p>
-                    <p className="text-[#5a5a4e]">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
+                  <div className="bg-gradient-to-r from-primary-50 to-primary-100 border-l-4 border-primary-500 p-4 mt-4 rounded">
+                    <p className="font-semibold text-gray-800">⚠️ Important</p>
+                    <p className="text-gray-800">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
                   </div>
                 </div>
               )}
             </div>
 
             {/* Section 3 - Calendrier et délais */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(3)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">3. Lots à gagner</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
+                  <h3 className="text-xl font-bold text-gray-800">3. Lots à gagner</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -159,7 +159,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 3 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <div>
                     <p className="font-semibold mb-2">Voici ce que tu peux gagner :</p>
                   </div>
@@ -177,17 +177,17 @@ export default function RulesPage() {
             </div>
 
             {/* Section 4 - Tirage final Grand Prix */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(4)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🏆</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">4. Tirage final - Grand Prix</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">🏆</div>
+                  <h3 className="text-xl font-bold text-gray-800">4. Tirage final - Grand Prix</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -196,7 +196,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 4 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p>
                   <p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p>
                   <div>
@@ -211,26 +211,26 @@ export default function RulesPage() {
                     <p>Le gagnant recevra Un an de thé d'une valeur de 360€ !</p>
         
                   </div>
-                  <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
-                    <p className="font-semibold text-[#5a5a4e]">🎁 Information</p>
-                    <p className="text-[#5a5a4e]">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
+                  <div className="bg-gradient-to-r from-primary-50 to-primary-100 border-l-4 border-primary-500 p-4 mt-4 rounded">
+                    <p className="font-semibold text-gray-800">🎁 Information</p>
+                    <p className="text-gray-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
                   </div>
                 </div>
               )}
             </div>
 
             {/* Section 5 - Retrait des lots */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(5)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">5. Retrait des lots</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
+                  <h3 className="text-xl font-bold text-gray-800">5. Retrait des lots</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -239,7 +239,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 5 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <p>Les lots doivent être réclamés dans un délai de <strong>60 jours</strong> (du 1er décembre 2025 au 31 janvier 2026).</p>
                   <div>
                     <p className="font-semibold mb-2">Modalités de remise :</p>
@@ -258,17 +258,17 @@ export default function RulesPage() {
             </div>
 
             {/* Section 6 - Protection des données */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
               <button
                 onClick={() => toggleSection(6)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🔒</div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">6. Protection des données personnelles</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-xl shadow-md">🔒</div>
+                  <h3 className="text-xl font-bold text-gray-800">6. Protection des données personnelles</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-gray-600 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -277,7 +277,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 6 && (
-                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
+                <div className="px-6 pb-6 space-y-4 text-gray-800">
                   <p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p>
                   <div>
                     <p className="font-semibold mb-2">Vos droits :</p>
@@ -289,8 +289,8 @@ export default function RulesPage() {
                       <li>Droit à la portabilité des données</li>
                     </ul>
                   </div>
-                  <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] underline hover:text-[#c4956a]">contact@thetiptop.fr</a></p>
-                  <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">Politique de confidentialité</a>.</p>
+                  <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-primary-500 underline hover:text-primary-600">contact@thetiptop.fr</a></p>
+                  <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-primary-500 underline hover:text-primary-600">Politique de confidentialité</a>.</p>
                 </div>
               )}
             </div>
@@ -300,39 +300,39 @@ export default function RulesPage() {
       </section>
 
       {/* Informations légales Section */}
-      <section className="py-16 bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
+      <section className="py-16 bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
             <div className="text-center mb-8">
-              <h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Informations légales</h2>
-              <p className="text-[#8a8a7a]">Détails officiels du jeu-concours</p>
+              <h2 className="text-3xl font-bold text-gray-800 mb-2">Informations légales</h2>
+              <p className="text-gray-600">Détails officiels du jeu-concours</p>
             </div>
 
             <div className="grid md:grid-cols-2 gap-6 mb-6">
               {/* Organisateur */}
-              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
+              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-beige-300 hover:shadow-xl transition-shadow">
                 <div className="flex items-center gap-3 mb-4">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center shadow-md">
                     <span className="text-xl">🏢</span>
                   </div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">Organisateur</h3>
+                  <h3 className="text-xl font-bold text-gray-800">Organisateur</h3>
                 </div>
-                <div className="space-y-2 text-[#5a5a4e]">
+                <div className="space-y-2 text-gray-800">
                   <p className="font-semibold">Thé Tip Top</p>
                   <p className="text-sm">18 rue Léon Frot, 75011 Paris</p>
-                  <p className="text-sm text-[#8a8a7a]">SIRET : 901 234 567 00015</p>
+                  <p className="text-sm text-gray-600">SIRET : 901 234 567 00015</p>
                 </div>
               </div>
 
               {/* Huissier */}
-              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
+              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-beige-300 hover:shadow-xl transition-shadow">
                 <div className="flex items-center gap-3 mb-4">
-                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center shadow-md">
                     <span className="text-xl">⚖️</span>
                   </div>
-                  <h3 className="text-xl font-bold text-[#5a5a4e]">Huissier</h3>
+                  <h3 className="text-xl font-bold text-gray-800">Huissier</h3>
                 </div>
-                <div className="space-y-2 text-[#5a5a4e]">
+                <div className="space-y-2 text-gray-800">
                   <p className="font-semibold">Maître Arnaud Rick</p>
                   <p className="text-sm">Office Notarial de Paris</p>
                   <p className="text-sm">456 Rue de la Justice, 75002 Paris, France</p>
@@ -341,7 +341,7 @@ export default function RulesPage() {
             </div>
 
             {/* Note légale */}
-            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-xl shadow-lg p-6 text-white text-center">
+            <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-xl shadow-lg p-6 text-white text-center">
               <div className="flex items-center justify-center gap-2 mb-3">
                 <span className="text-2xl">📜</span>
                 <h3 className="text-lg font-semibold">Note légale</h3>
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index 80a8c57..10a9b6a 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -7,19 +7,19 @@ export const metadata: Metadata = {
 
 export default function TermsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
-      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
-        <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-12 px-4">
+      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-beige-300 p-8">
+        <h1 className="text-3xl font-bold text-gray-800 mb-6">
           Conditions d'utilisation
         </h1>
 
-        <p className="text-sm text-[#8a8a7a] mb-8">
+        <p className="text-sm text-gray-600 mb-8">
           Dernière mise à jour : 17 janvier 2025
         </p>
 
-        <div className="space-y-6 text-[#5a5a4e]">
+        <div className="space-y-6 text-gray-700">
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               1. Présentation
             </h2>
             <p>
@@ -30,7 +30,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               2. Objet du jeu-concours
             </h2>
             <p>
@@ -41,7 +41,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               3. Conditions de participation
             </h2>
             <ul className="list-disc pl-6 space-y-2">
@@ -54,7 +54,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               4. Modalités de participation
             </h2>
             <p className="mb-2">Pour participer :</p>
@@ -67,7 +67,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               5. Lots à gagner
             </h2>
             <p className="mb-2">Les lots suivants sont disponibles :</p>
@@ -82,7 +82,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               6. Récupération des lots
             </h2>
             <p>
@@ -93,7 +93,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               7. Limitation de responsabilité
             </h2>
             <p>
@@ -104,7 +104,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               8. Propriété intellectuelle
             </h2>
             <p>
@@ -116,7 +116,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               9. Modification des conditions
             </h2>
             <p>
@@ -127,7 +127,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               10. Droit applicable et juridiction
             </h2>
             <p>
@@ -138,7 +138,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-3">
               11. Contact
             </h2>
             <p>
@@ -146,17 +146,17 @@ export default function TermsPage() {
               nous contacter :
             </p>
             <ul className="list-none space-y-2 mt-3">
-              <li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">contact@thetiptop.fr</a></li>
+              <li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-primary-500 hover:text-primary-600 transition-colors">contact@thetiptop.fr</a></li>
               <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
               <li><strong>Téléphone :</strong> +33 4 93 00 00 00</li>
             </ul>
           </section>
         </div>
 
-        <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
+        <div className="mt-8 pt-6 border-t border-beige-300">
           <a
             href="/"
-            className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
+            className="inline-flex items-center gap-2 text-primary-500 hover:text-primary-600 font-medium transition-colors group"
           >
             <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
diff --git a/components/AboutContest.tsx b/components/AboutContest.tsx
index 8c4c941..eaebe63 100644
--- a/components/AboutContest.tsx
+++ b/components/AboutContest.tsx
@@ -30,16 +30,16 @@ export default function AboutContest({
           <div className="grid md:grid-cols-2 gap-16 items-center">
             {/* Texte */}
             <div className="order-2 md:order-1 space-y-6">
-              <h2 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] leading-tight">
+              <h2 className="text-4xl md:text-5xl font-bold text-primary-500 leading-tight">
                 Jeu Concours Thé Tip Top
-                <span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
+                <span className="block text-3xl md:text-4xl text-primary-300 mt-2">
                   Boutique Premium à Nice
                 </span>
               </h2>
 
               <div className="space-y-4 text-lg text-gray-700">
                 <p className="leading-relaxed">
-                  Bienvenue dans notre grand jeu-concours <span className="font-semibold text-[#5a5a4e]">Thé Tip Top</span> organisé à l'occasion de l'ouverture de notre <span className="font-semibold text-[#d4a574]">10ème boutique</span> de thé premium à Nice.
+                  Bienvenue dans notre grand jeu-concours <span className="font-semibold text-gray-800">Thé Tip Top</span> organisé à l'occasion de l'ouverture de notre <span className="font-semibold text-primary-500">10ème boutique</span> de thé premium à Nice.
                 </p>
                 <p className="leading-relaxed">
                   Nous vous offrons la chance de gagner des produits exceptionnels : thés bio, accessoires exclusifs et bien plus encore.
@@ -47,16 +47,16 @@ export default function AboutContest({
                 <p className="leading-relaxed">
                   Participez facilement en quelques clics et tentez votre chance parmi nos lots prestigieux.
                 </p>
-                <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 rounded-r-lg">
-                  <p className="font-semibold text-[#5a5a4e] text-xl">
-                    ✨ 100% de tickets gagnants ! Chaque participation vous offre la garantie de repartir avec un cadeau.
+                <div className="bg-gradient-to-r from-primary-50 to-primary-100 border-l-4 border-primary-500 p-4 rounded-r-lg">
+                  <p className="font-semibold text-gray-800 text-xl">
+                    100% de tickets gagnants ! Chaque participation vous offre la garantie de repartir avec un cadeau.
                   </p>
                 </div>
               </div>
 
               <div className="flex flex-col sm:flex-row gap-4 pt-4">
                 <Link href="/register">
-                  <button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold text-lg px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(212,165,116,0.7)] hover:scale-105 shadow-lg flex items-center justify-center gap-2">
+                  <button className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold text-lg px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(11,96,41,0.5)] hover:scale-105 shadow-lg flex items-center justify-center gap-2">
                     En savoir plus
                     <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
diff --git a/components/Button.tsx b/components/Button.tsx
index e819b0f..44f5462 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -27,15 +27,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const variants = {
       primary:
-        "bg-[#d4a574] text-white hover:bg-[#c4956a] focus:ring-[#d4a574] shadow-md hover:shadow-lg",
+        "bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 shadow-md hover:shadow-lg",
       secondary:
-        "bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] border border-[#e5e4dc] shadow-sm",
+        "bg-white text-gray-700 hover:bg-primary-500 hover:text-white focus:ring-primary-500 border border-gray-300 shadow-sm",
       outline:
-        "border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] shadow-sm",
+        "border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white focus:ring-primary-500 shadow-sm",
       danger:
         "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md",
       success:
-        "bg-[#1a4d2e] text-white hover:bg-[#2d5a3d] focus:ring-[#1a4d2e] shadow-md hover:shadow-lg",
+        "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-600 shadow-md hover:shadow-lg",
     };
 
     const sizes = {
diff --git a/components/CookieConsent.tsx b/components/CookieConsent.tsx
index dcce468..f97992a 100644
--- a/components/CookieConsent.tsx
+++ b/components/CookieConsent.tsx
@@ -27,16 +27,16 @@ export default function CookieConsent() {
   if (!showBanner) return null;
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] shadow-2xl border-t-4 border-[#d4a574]">
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gradient-to-r from-beige-100 to-beige-50 shadow-2xl border-t-4 border-primary-500">
       <div className="container mx-auto px-4 py-6">
         <div className="flex flex-col md:flex-row items-center justify-between gap-4">
           {/* Message */}
           <div className="flex-1 text-center md:text-left">
-            <p className="text-sm md:text-base text-[#5a5a4e]">
-              🍪 Ce site utilise des cookies pour améliorer votre expérience de navigation et analyser notre trafic.{' '}
+            <p className="text-sm md:text-base text-gray-700">
+              Ce site utilise des cookies pour améliorer votre expérience de navigation et analyser notre trafic.{' '}
               <Link
                 href="/cookies"
-                className="text-[#d4a574] hover:text-[#c4956a] underline transition-colors font-semibold"
+                className="text-primary-500 hover:text-primary-600 underline transition-colors font-semibold"
               >
                 En savoir plus
               </Link>
@@ -47,13 +47,13 @@ export default function CookieConsent() {
           <div className="flex gap-3 flex-shrink-0">
             <button
               onClick={handleReject}
-              className="px-6 py-2.5 bg-white border-2 border-[#e5e4dc] hover:border-[#d4a574] text-[#5a5a4e] hover:text-[#d4a574] rounded-lg transition-all duration-300 text-sm font-semibold"
+              className="px-6 py-2.5 bg-white border-2 border-beige-300 hover:border-primary-500 text-gray-700 hover:text-primary-500 rounded-lg transition-all duration-300 text-sm font-semibold"
             >
               Refuser
             </button>
             <button
               onClick={handleAccept}
-              className="px-6 py-2.5 bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl text-sm font-semibold"
+              className="px-6 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl text-sm font-semibold"
             >
               Accepter tous les cookies
             </button>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 47c898c..71d077f 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -40,7 +40,7 @@ export default function Footer() {
   };
 
   return (
-    <footer className="bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] text-[#5a5a4e] border-t-2 border-[#e5e4dc]">
+    <footer className="bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 text-beige-800 border-t-2 border-beige-300">
       {/* Main Footer */}
       <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -49,7 +49,7 @@ export default function Footer() {
             <div className="mb-4">
               <Logo variant="default" size="md" showText={true} />
             </div>
-            <p className="text-sm text-[#8a8a7a] mb-4">
+            <p className="text-sm text-beige-600 mb-4">
               Découvrez nos thés premium bio et artisanaux. Participez à notre grand
               jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots !
             </p>
@@ -58,7 +58,7 @@ export default function Footer() {
                 href="https://www.facebook.com/profile.php?id=61584261567579"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                className="text-beige-600 hover:text-primary-500 transition-colors"
                 aria-label="Facebook"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -69,7 +69,7 @@ export default function Footer() {
                 href="https://www.instagram.com/thetiptopgr3/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                className="text-beige-600 hover:text-primary-500 transition-colors"
                 aria-label="Instagram"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -80,7 +80,7 @@ export default function Footer() {
                 href="https://www.pinterest.com/The_Tip_Top_/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                className="text-beige-600 hover:text-primary-500 transition-colors"
                 aria-label="Pinterest"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -92,14 +92,14 @@ export default function Footer() {
 
           {/* Quick Links */}
           <div>
-            <h3 className="text-lg font-semibold text-[#d4a574] mb-4">
+            <h3 className="text-lg font-semibold text-primary-500 mb-4">
               NAVIGATION
             </h3>
             <ul className="space-y-2">
               <li>
                 <Link
                   href={ROUTES.HOME}
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Accueil
                 </Link>
@@ -107,7 +107,7 @@ export default function Footer() {
               <li>
                 <Link
                   href={isAuthenticated ? ROUTES.GAME : ROUTES.REGISTER}
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Participer au jeu
                 </Link>
@@ -115,7 +115,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/contact"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Contact
                 </Link>
@@ -123,7 +123,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/faq"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   FAQ
                 </Link>
@@ -133,12 +133,12 @@ export default function Footer() {
 
           {/* Legal */}
           <div>
-            <h3 className="text-lg font-semibold text-[#d4a574] mb-4">LÉGAL</h3>
+            <h3 className="text-lg font-semibold text-primary-500 mb-4">LÉGAL</h3>
             <ul className="space-y-2">
               <li>
                 <Link
                   href="/terms"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Conditions d'utilisation
                 </Link>
@@ -146,7 +146,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/privacy"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Politique de confidentialité
                 </Link>
@@ -154,7 +154,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/rules"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Règlement du jeu
                 </Link>
@@ -162,7 +162,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/legal"
-                  className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
+                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
                 >
                   Mentions légales
                 </Link>
@@ -172,8 +172,8 @@ export default function Footer() {
 
           {/* Newsletter */}
           <div>
-            <h3 className="text-lg font-semibold text-[#d4a574] mb-4">NEWSLETTER</h3>
-            <p className="text-sm text-[#8a8a7a] mb-4">
+            <h3 className="text-lg font-semibold text-primary-500 mb-4">NEWSLETTER</h3>
+            <p className="text-sm text-beige-600 mb-4">
               Inscrivez-vous pour recevoir nos offres exclusives et nouveautés !
             </p>
             <form onSubmit={handleNewsletterSubmit} className="space-y-3">
@@ -183,42 +183,42 @@ export default function Footer() {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Votre email"
-                  className="w-full px-4 py-2 text-sm border border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent bg-white text-[#5a5a4e] placeholder-[#a0a098]"
+                  className="w-full px-4 py-2 text-sm border border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-beige-800 placeholder-beige-500"
                   disabled={isLoading}
                 />
               </div>
               <button
                 type="submit"
                 disabled={isLoading}
-                className="w-full px-4 py-2 text-sm font-medium text-white bg-[#d4a574] rounded-lg hover:bg-[#c49563] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full px-4 py-2 text-sm font-medium text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {isLoading ? 'Inscription...' : "S'inscrire"}
               </button>
               {message && (
                 <p
                   className={`text-xs ${
-                    message.type === 'success' ? 'text-green-600' : 'text-red-600'
+                    message.type === 'success' ? 'text-primary-600' : 'text-red-600'
                   }`}
                 >
                   {message.text}
                 </p>
               )}
             </form>
-            <div className="mt-4 pt-4 border-t border-[#e5e4dc]">
-              <p className="text-xs text-[#8a8a7a] flex items-center gap-1">
+            <div className="mt-4 pt-4 border-t border-beige-300">
+              <p className="text-xs text-beige-600 flex items-center gap-1">
                 <span>✉️</span>
                 <a
                   href="mailto:thetiptopgr3@gmail.com"
-                  className="hover:text-[#d4a574] transition-colors"
+                  className="hover:text-primary-500 transition-colors"
                 >
                   thetiptopgr3@gmail.com
                 </a>
               </p>
-              <p className="text-xs text-[#8a8a7a] mt-1 flex items-center gap-1">
+              <p className="text-xs text-beige-600 mt-1 flex items-center gap-1">
                 <span>📞</span>
                 <a
                   href="tel:+33123456789"
-                  className="hover:text-[#d4a574] transition-colors"
+                  className="hover:text-primary-500 transition-colors"
                 >
                   01 23 45 67 89
                 </a>
@@ -229,11 +229,11 @@ export default function Footer() {
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-[#e5e4dc]">
+      <div className="border-t border-beige-300">
         <div className="container mx-auto px-4 py-6">
           <div className="flex items-center justify-center text-sm">
-            <p className="text-[#8a8a7a]">
-              © {currentYear} Tous droits réservés. <span className="text-[#a0a098] text-xs">Site étudiant</span>
+            <p className="text-beige-600">
+              © {currentYear} Tous droits réservés. <span className="text-beige-500 text-xs">Site étudiant</span>
             </p>
           </div>
         </div>
diff --git a/components/GamePeriod.tsx b/components/GamePeriod.tsx
index b9191ee..5c4d5d0 100644
--- a/components/GamePeriod.tsx
+++ b/components/GamePeriod.tsx
@@ -4,10 +4,10 @@ export default function GamePeriod() {
   return (
     <div className="grid md:grid-cols-2 gap-8 mt-8">
       {/* Période de validation des tickets */}
-      <div className="bg-gradient-to-br from-white to-[#fffbeb] rounded-3xl shadow-xl p-10 border-2 border-[#f59e0b] hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
+      <div className="bg-gradient-to-br from-white to-secondary-50 rounded-3xl shadow-xl p-10 border-2 border-secondary-400 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
         <div className="flex flex-col items-center text-center">
-          <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] rounded-full p-6 mb-6 shadow-lg">
-            <svg className="w-12 h-12 text-[#f59e0b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-full p-6 mb-6 shadow-lg">
+            <svg className="w-12 h-12 text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
             </svg>
           </div>
@@ -15,20 +15,20 @@ export default function GamePeriod() {
           <p className="text-lg text-gray-600 mb-6">
             Achetez et validez votre code de participation
           </p>
-          <div className="bg-[#f59e0b]/10 rounded-2xl px-6 py-4 w-full">
-            <p className="text-lg font-bold text-[#b45309]">
+          <div className="bg-secondary-100 rounded-2xl px-6 py-4 w-full">
+            <p className="text-lg font-bold text-secondary-700">
               Du 1 décembre 2025 au 31 décembre 2025
             </p>
-            <p className="text-[#f59e0b] font-semibold mt-1">30 jours</p>
+            <p className="text-secondary-500 font-semibold mt-1">30 jours</p>
           </div>
         </div>
       </div>
 
       {/* Période de récupération des lots */}
-      <div className="bg-gradient-to-br from-white to-[#ecfdf5] rounded-3xl shadow-xl p-10 border-2 border-[#1a4d2e] hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
+      <div className="bg-gradient-to-br from-white to-primary-50 rounded-3xl shadow-xl p-10 border-2 border-primary-500 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
         <div className="flex flex-col items-center text-center">
-          <div className="bg-gradient-to-br from-[#d1fae5] to-[#a7f3d0] rounded-full p-6 mb-6 shadow-lg">
-            <svg className="w-12 h-12 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="bg-gradient-to-br from-primary-100 to-primary-200 rounded-full p-6 mb-6 shadow-lg">
+            <svg className="w-12 h-12 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
             </svg>
           </div>
@@ -36,11 +36,11 @@ export default function GamePeriod() {
           <p className="text-lg text-gray-600 mb-6">
             Récupérez vos lots gagnés en boutique
           </p>
-          <div className="bg-[#1a4d2e]/10 rounded-2xl px-6 py-4 w-full">
-            <p className="text-lg font-bold text-[#1a4d2e]">
+          <div className="bg-primary-50 rounded-2xl px-6 py-4 w-full">
+            <p className="text-lg font-bold text-primary-700">
               Du 1 décembre 2025 au 31 janvier 2026
             </p>
-            <p className="text-[#22c55e] font-semibold mt-1">60 jours</p>
+            <p className="text-primary-500 font-semibold mt-1">60 jours</p>
           </div>
         </div>
       </div>
diff --git a/components/GrandPrize.tsx b/components/GrandPrize.tsx
index 3b27e81..00f4b70 100644
--- a/components/GrandPrize.tsx
+++ b/components/GrandPrize.tsx
@@ -18,10 +18,10 @@ export default function GrandPrize({
   };
 
   return (
-    <div className="bg-gradient-to-br from-[#fff8e8] via-[#fff4d9] to-[#ffefc4] rounded-3xl shadow-2xl p-10 md:p-12 border-3 border-[#d4a574] mt-10 hover:shadow-3xl transition-all duration-300">
+    <div className="bg-gradient-to-br from-secondary-50 via-secondary-100 to-secondary-200 rounded-3xl shadow-2xl p-10 md:p-12 border-3 border-secondary-400 mt-10 hover:shadow-3xl transition-all duration-300">
       <div className="flex flex-col items-center text-center">
         {/* Icône trophée */}
-        <div className="bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full p-6 mb-6 shadow-xl">
+        <div className="bg-gradient-to-br from-secondary-400 to-secondary-500 rounded-full p-6 mb-6 shadow-xl">
           <svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
           </svg>
@@ -34,16 +34,16 @@ export default function GrandPrize({
 
         {/* Prix principal */}
         <div className="bg-white/80 backdrop-blur-sm rounded-2xl px-8 py-6 mb-6 shadow-lg">
-          <p className="text-2xl md:text-3xl font-bold text-[#d4a574] mb-2">
+          <p className="text-2xl md:text-3xl font-bold text-primary-500 mb-2">
             1 an de thé offert
           </p>
-          <p className="text-xl text-[#8b6f47] font-semibold">
+          <p className="text-xl text-secondary-600 font-semibold">
             d'une valeur de {prizeAmount}
           </p>
         </div>
 
         {/* Description */}
-        <p className="text-lg md:text-xl text-[#5a5a4e] mb-8 max-w-2xl leading-relaxed">
+        <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-2xl leading-relaxed">
           Le grand prix du tirage final : une année complète de thé premium
         </p>
 
@@ -51,27 +51,27 @@ export default function GrandPrize({
         <div className="grid md:grid-cols-2 gap-4 w-full max-w-xl">
           {drawDate && (
             <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-5 flex items-center gap-4 shadow-md">
-              <div className="bg-[#d4a574]/20 rounded-full p-3">
-                <svg className="w-6 h-6 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
+              <div className="bg-primary-100 rounded-full p-3">
+                <svg className="w-6 h-6 text-primary-500" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                 </svg>
               </div>
               <div className="text-left">
-                <p className="text-sm text-[#8a8a7a] font-medium">Tirage au sort</p>
-                <p className="text-lg font-bold text-[#5a5a4e]">{formatDate(drawDate)}</p>
+                <p className="text-sm text-gray-500 font-medium">Tirage au sort</p>
+                <p className="text-lg font-bold text-gray-700">{formatDate(drawDate)}</p>
               </div>
             </div>
           )}
 
           <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-5 flex items-center gap-4 shadow-md">
-            <div className="bg-[#d4a574]/20 rounded-full p-3">
-              <svg className="w-6 h-6 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
+            <div className="bg-primary-100 rounded-full p-3">
+              <svg className="w-6 h-6 text-primary-500" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
               </svg>
             </div>
             <div className="text-left">
-              <p className="text-sm text-[#8a8a7a] font-medium">Certification</p>
-              <p className="text-lg font-bold text-[#5a5a4e]">Contrôle d'huissier</p>
+              <p className="text-sm text-gray-500 font-medium">Certification</p>
+              <p className="text-lg font-bold text-gray-700">Contrôle d'huissier</p>
             </div>
           </div>
         </div>
diff --git a/components/Header.tsx b/components/Header.tsx
index 3170e96..0510fe6 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -44,7 +44,7 @@ export default function Header() {
   };
 
   return (
-    <header className="bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] sticky top-0 z-50 shadow-lg border-b-2 border-[#e5e4dc]">
+    <header className="bg-gradient-to-r from-beige-100 to-beige-50 sticky top-0 z-50 shadow-lg border-b-2 border-beige-300">
       {/* Main Header */}
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-18 gap-4">
@@ -57,40 +57,40 @@ export default function Header() {
           <nav className="hidden md:flex items-center gap-6 flex-shrink-0">
             <Link
               href={ROUTES.HOME}
-              className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
+              className="text-gray-700 hover:text-primary-500 font-medium transition-colors"
             >
               Accueil
             </Link>
             <Link
               href={ROUTES.LOTS}
-              className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
+              className="text-gray-700 hover:text-primary-500 font-medium transition-colors"
             >
               Lots à gagner
             </Link>
             <Link
               href="/rules"
-              className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
+              className="text-gray-700 hover:text-primary-500 font-medium transition-colors"
             >
               Règlement
             </Link>
             <Link
               href="/about"
-              className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
+              className="text-gray-700 hover:text-primary-500 font-medium transition-colors"
             >
               À propos
             </Link>
             <Link
               href="/contact"
-              className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
+              className="text-gray-700 hover:text-primary-500 font-medium transition-colors"
             >
               Contact
             </Link>
 
-            {/* Participer with Dropdown - Doré Button */}
+            {/* Participer with Dropdown - Green Button */}
             {isAuthenticated ? (
               <Link
                 href={ROUTES.GAME}
-                className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg whitespace-nowrap"
+                className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(11,96,41,0.4)] shadow-lg whitespace-nowrap"
               >
                 Participer
               </Link>
@@ -98,7 +98,7 @@ export default function Header() {
               <div className="relative" ref={dropdownRef}>
                 <button
                   onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
-                  className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg flex items-center justify-center gap-2 whitespace-nowrap"
+                  className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(11,96,41,0.4)] shadow-lg flex items-center justify-center gap-2 whitespace-nowrap"
                 >
                   Participer
                   <svg
@@ -112,20 +112,20 @@ export default function Header() {
                 </button>
 
                 {isParticiperDropdownOpen && (
-                  <div className="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-2xl border-2 border-[#d4a574]/30 py-2 z-50 animate-fadeIn overflow-hidden">
+                  <div className="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-2xl border-2 border-primary-200 py-2 z-50 animate-fadeIn overflow-hidden">
                     <Link
                       href={ROUTES.LOGIN}
                       onClick={() => setIsParticiperDropdownOpen(false)}
-                      className="block px-4 py-3 text-gray-700 hover:bg-gradient-to-r hover:from-[#d4a574]/10 hover:to-[#c4956a]/10 hover:text-[#c4956a] transition-all duration-300 hover:pl-6 hover:shadow-inner"
+                      className="block px-4 py-3 text-gray-700 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 transition-all duration-300 hover:pl-6 hover:shadow-inner"
                     >
                       <span className="font-bold block">Connexion</span>
                       <p className="text-xs text-gray-500 mt-0.5">J'ai déjà un compte</p>
                     </Link>
-                    <div className="border-t border-[#d4a574]/20 my-1"></div>
+                    <div className="border-t border-primary-100 my-1"></div>
                     <Link
                       href={ROUTES.REGISTER}
                       onClick={() => setIsParticiperDropdownOpen(false)}
-                      className="block px-4 py-3 text-gray-700 hover:bg-gradient-to-r hover:from-[#d4a574]/10 hover:to-[#c4956a]/10 hover:text-[#c4956a] transition-all duration-300 hover:pl-6 hover:shadow-inner"
+                      className="block px-4 py-3 text-gray-700 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 transition-all duration-300 hover:pl-6 hover:shadow-inner"
                     >
                       <span className="font-bold block">Inscription</span>
                       <p className="text-xs text-gray-500 mt-0.5">Créer un nouveau compte</p>
@@ -141,13 +141,13 @@ export default function Header() {
             {isAuthenticated && (
               <>
                 <Link href={getDashboardRoute()}>
-                  <div className="flex flex-col items-start bg-gradient-to-br from-white to-[#faf9f5] text-[#5a5a4e] hover:shadow-lg px-4 py-2.5 rounded-xl transition-all border-2 border-[#e5e4dc] hover:border-[#d4a574] group min-w-0 flex-shrink-0">
-                    <span className="text-sm font-bold group-hover:text-[#d4a574] transition-colors whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.firstName} {user?.lastName}</span>
-                    <span className="text-xs text-[#8a8a7a] whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.email}</span>
+                  <div className="flex flex-col items-start bg-gradient-to-br from-white to-beige-100 text-beige-800 hover:shadow-lg px-4 py-2.5 rounded-xl transition-all border-2 border-beige-300 hover:border-primary-400 group min-w-0 flex-shrink-0">
+                    <span className="text-sm font-bold group-hover:text-primary-500 transition-colors whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.firstName} {user?.lastName}</span>
+                    <span className="text-xs text-beige-600 whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.email}</span>
                   </div>
                 </Link>
                 <Link href={ROUTES.PROFILE}>
-                  <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap">
+                  <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600 text-beige-800 hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-beige-300 hover:border-primary-500 hover:shadow-lg whitespace-nowrap">
                     <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
@@ -156,7 +156,7 @@ export default function Header() {
                 </Link>
                 {user?.role === 'CLIENT' && (
                   <Link href={ROUTES.HISTORY}>
-                    <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap">
+                    <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-600 text-beige-800 hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-beige-300 hover:border-primary-500 hover:shadow-lg whitespace-nowrap">
                       <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                       </svg>
@@ -166,7 +166,7 @@ export default function Header() {
                 )}
                 <button
                   onClick={logout}
-                  className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-red-500 hover:to-red-600 text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-red-500 hover:shadow-lg whitespace-nowrap"
+                  className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-red-500 hover:to-red-600 text-beige-800 hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-beige-300 hover:border-red-500 hover:shadow-lg whitespace-nowrap"
                 >
                   <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
@@ -180,7 +180,7 @@ export default function Header() {
           {/* Mobile Menu Button */}
           <button
             onClick={toggleMobileMenu}
-            className="md:hidden p-2 text-[#5a5a4e] hover:text-[#d4a574] focus:outline-none"
+            className="md:hidden p-2 text-beige-800 hover:text-primary-500 focus:outline-none"
             aria-label="Toggle menu"
           >
             {isMobileMenuOpen ? (
@@ -217,104 +217,60 @@ export default function Header() {
 
         {/* Mobile Menu */}
         {isMobileMenuOpen && (
-          <div className="md:hidden py-4 border-t border-gray-200 animate-fadeIn">
+          <div className="md:hidden py-4 border-t border-beige-300 animate-fadeIn">
             <nav className="flex flex-col gap-3">
               <Link
                 href={ROUTES.HOME}
-                className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
+                className="text-beige-800 hover:text-primary-500 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 Accueil
               </Link>
               <Link
                 href={ROUTES.GAME}
-                className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
+                className="text-beige-800 hover:text-primary-500 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 Jeu
               </Link>
               <Link
                 href={ROUTES.LOTS}
-                className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
+                className="text-beige-800 hover:text-primary-500 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 Lots
               </Link>
               <Link
                 href="/about"
-                className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
+                className="text-beige-800 hover:text-primary-500 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 À propos
               </Link>
               <Link
                 href="/contact"
-                className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
+                className="text-beige-800 hover:text-primary-500 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 Contact
               </Link>
 
               {/* Participer Mobile - Green Button */}
-              {isAuthenticated ? (
-                <Link
-                  href={ROUTES.GAME}
-                  className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block whitespace-nowrap"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  🎯 Participer
-                </Link>
-              ) : (
-                <div>
-                  <button
-                    onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
-                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg flex items-center justify-center gap-2 w-full whitespace-nowrap"
-                  >
-                    🎯 Participer
-                    <svg
-                      className={`w-4 h-4 flex-shrink-0 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </button>
-
-                  {isParticiperDropdownOpen && (
-                    <div className="mt-2 space-y-2 animate-fadeIn bg-green-50 rounded-lg p-3">
-                      <Link
-                        href={ROUTES.LOGIN}
-                        onClick={() => {
-                          setIsMobileMenuOpen(false);
-                          setIsParticiperDropdownOpen(false);
-                        }}
-                        className="block text-green-800 hover:text-green-900 font-medium py-2 px-3 bg-white rounded-md hover:bg-green-100 transition-colors"
-                      >
-                        → Connexion
-                      </Link>
-                      <Link
-                        href={ROUTES.REGISTER}
-                        onClick={() => {
-                          setIsMobileMenuOpen(false);
-                          setIsParticiperDropdownOpen(false);
-                        }}
-                        className="block text-green-800 hover:text-green-900 font-medium py-2 px-3 bg-white rounded-md hover:bg-green-100 transition-colors"
-                      >
-                        → Inscription
-                      </Link>
-                    </div>
-                  )}
-                </div>
-              )}
+              <Link
+                href={isAuthenticated ? ROUTES.GAME : ROUTES.REGISTER}
+                className="bg-primary-500 hover:bg-primary-600 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block whitespace-nowrap"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                Participer
+              </Link>
 
               {isAuthenticated && (
-                <div className="border-t border-white/20 pt-3 mt-3 space-y-2">
+                <div className="border-t border-beige-300 pt-3 mt-3 space-y-2">
                   <Link
                     href={getDashboardRoute()}
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
-                    <button className="w-full flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
+                    <button className="w-full flex flex-col items-center bg-white text-primary-700 hover:bg-secondary-400 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                       <span className="text-sm">{user?.firstName} {user?.lastName}</span>
                       <span className="text-xs font-normal opacity-80">{user?.email}</span>
                     </button>
@@ -323,7 +279,7 @@ export default function Header() {
                     href={ROUTES.PROFILE}
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
-                    <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
+                    <button className="w-full flex items-center justify-center gap-2 bg-white text-primary-700 hover:bg-secondary-400 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                       Profil
                     </button>
                   </Link>
@@ -332,7 +288,7 @@ export default function Header() {
                       href={ROUTES.HISTORY}
                       onClick={() => setIsMobileMenuOpen(false)}
                     >
-                      <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
+                      <button className="w-full flex items-center justify-center gap-2 bg-white text-primary-700 hover:bg-secondary-400 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                         Mes gains
                       </button>
                     </Link>
@@ -342,7 +298,7 @@ export default function Header() {
                       logout();
                       setIsMobileMenuOpen(false);
                     }}
-                    className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"
+                    className="w-full flex items-center justify-center gap-2 bg-white text-primary-700 hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"
                   >
                     Déconnexion
                   </button>
diff --git a/components/ui/PrizeCard.tsx b/components/ui/PrizeCard.tsx
index 471f16a..6ac2d38 100644
--- a/components/ui/PrizeCard.tsx
+++ b/components/ui/PrizeCard.tsx
@@ -27,7 +27,7 @@ export const PrizeCard: React.FC<PrizeCardProps> = ({
     <div
       className={cn(
         'bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden h-full flex flex-col',
-        isGrandPrix ? 'border-2 border-[#d4a574]' : 'border border-[#e5e4dc]',
+        isGrandPrix ? 'border-2 border-primary-500' : 'border border-beige-300',
         className
       )}
     >
@@ -35,8 +35,8 @@ export const PrizeCard: React.FC<PrizeCardProps> = ({
         className={cn(
           'aspect-square flex items-center justify-center p-2',
           isGrandPrix
-            ? 'bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10'
-            : 'bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0]'
+            ? 'bg-gradient-to-br from-primary-50 to-primary-100'
+            : 'bg-gradient-to-br from-beige-50 to-beige-100'
         )}
       >
         <Image
@@ -52,14 +52,14 @@ export const PrizeCard: React.FC<PrizeCardProps> = ({
           className={cn(
             'inline-block text-sm font-bold px-3 py-1 rounded-full mb-3',
             isGrandPrix
-              ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-md'
-              : 'bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]'
+              ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-md'
+              : 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-600'
           )}
         >
           {badge}
         </div>
-        <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">{title}</h3>
-        <p className="text-[#8a8a7a] text-sm mb-4">{description}</p>
+        <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
+        <p className="text-gray-600 text-sm mb-4">{description}</p>
       </div>
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 35074a7..a2d4f69 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,35 +7,51 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        // Palette basée sur #0B6029 (Forest Green) - WCAG AA compliant
         primary: {
-          50: '#f0fdf4',
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
+          50: '#E8F5EC',   // Très clair pour backgrounds
+          100: '#C6E7D0',  // Clair
+          200: '#9ED5AF',  //
+          300: '#6FC085',  //
+          400: '#3FA85B',  //
+          500: '#0B6029',  // Couleur principale (votre couleur)
+          600: '#0A5525',  // Plus foncé
+          700: '#084A20',  //
+          800: '#063E1A',  //
+          900: '#042E13',  // Très foncé
         },
         secondary: {
-          50: '#fef3c7',
-          100: '#fef08a',
-          200: '#fde047',
-          300: '#facc15',
-          400: '#eab308',
-          500: '#ca8a04',
-          600: '#a16207',
-          700: '#854d0e',
-          800: '#713f12',
-          900: '#422006',
+          // Or/Doré complémentaire - contraste 4.5:1+ sur blanc
+          50: '#FDF8E8',
+          100: '#FAF0CC',
+          200: '#F5E299',
+          300: '#EFD366',
+          400: '#E8C333',
+          500: '#A68B2C',  // Principal - bon contraste sur blanc
+          600: '#8A7324',
+          700: '#6E5B1C',
+          800: '#524415',
+          900: '#362D0E',
+        },
+        // Beige pour backgrounds - excellent contraste avec primary
+        beige: {
+          50: '#FEFDFB',
+          100: '#FAF8F5',  // Background principal
+          200: '#F5F0E8',
+          300: '#EBE4D8',
+          400: '#DED4C4',
+          500: '#C9BBAA',
+          600: '#A69882',
+          700: '#7D705F',
+          800: '#544B3F',
+          900: '#2B2620',
         },
         logo: {
           brown: '#694633',
           gold: '#C1C333',
           lightGold: '#C5C04B',
           darkBrown: '#5a3a29',
+          forestGreen: '#0B6029',
         },
       },
       fontFamily: {
diff --git a/types/index.ts b/types/index.ts
index 9dc01fb..dbf32e4 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -187,6 +187,8 @@ export interface AdminStatistics {
   users: {
     total: number;
     clients: number;
+    activeClients: number;
+    inactiveClients: number;
     employees: number;
     admins: number;
     verifiedEmails: number;
diff --git a/utils/constants.ts b/utils/constants.ts
index 40dc546..9c5195d 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -66,7 +66,7 @@ export const PRIZE_CONFIG = {
   THE_SIGNATURE: {
     name: 'Thé signature 100g',
     description: 'Notre thé signature premium 100g',
-    color: 'bg-green-100 text-green-800',
+    color: 'bg-primary-100 text-primary-800',
     icon: '🍵',
     value: 25,
   },
@@ -80,7 +80,7 @@ export const PRIZE_CONFIG = {
   COFFRET_PRESTIGE: {
     name: 'Coffret prestige 69€',
     description: 'Un coffret prestige d\'exception',
-    color: 'bg-amber-100 text-amber-800',
+    color: 'bg-secondary-200 text-secondary-800',
     icon: '🏆',
     value: 69,
   },
@@ -202,7 +202,7 @@ export const TICKET_STATUS_LABELS = {
 
 // Ticket Status Colors
 export const TICKET_STATUS_COLORS = {
-  PENDING: 'bg-yellow-100 text-yellow-800',
-  CLAIMED: 'bg-green-100 text-green-800',
+  PENDING: 'bg-secondary-100 text-secondary-800',
+  CLAIMED: 'bg-primary-100 text-primary-800',
   REJECTED: 'bg-red-100 text-red-800',
 } as const;
diff --git a/utils/theme.ts b/utils/theme.ts
index 1223e03..6babc3b 100644
--- a/utils/theme.ts
+++ b/utils/theme.ts
@@ -6,10 +6,10 @@
 
 // Status colors for badges and indicators
 export const STATUS_COLORS = {
-  PENDING: 'bg-yellow-100 text-yellow-800',
-  CLAIMED: 'bg-green-100 text-green-800',
+  PENDING: 'bg-secondary-100 text-secondary-800',
+  CLAIMED: 'bg-primary-100 text-primary-800',
   REJECTED: 'bg-red-100 text-red-800',
-  ACTIVE: 'bg-green-100 text-green-800',
+  ACTIVE: 'bg-primary-100 text-primary-800',
   INACTIVE: 'bg-gray-100 text-gray-800',
   EXPIRED: 'bg-red-100 text-red-800',
 } as const;
@@ -17,23 +17,23 @@ export const STATUS_COLORS = {
 // Badge color variants
 export const BADGE_COLORS = {
   info: 'bg-blue-100 text-blue-800',
-  success: 'bg-green-100 text-green-800',
-  warning: 'bg-yellow-100 text-yellow-800',
+  success: 'bg-primary-100 text-primary-800',
+  warning: 'bg-secondary-100 text-secondary-800',
   error: 'bg-red-100 text-red-800',
   purple: 'bg-purple-100 text-purple-800',
   pink: 'bg-pink-100 text-pink-800',
-  amber: 'bg-amber-100 text-amber-800',
+  amber: 'bg-secondary-200 text-secondary-800',
   gray: 'bg-gray-100 text-gray-800',
 } as const;
 
 // Button style variants
 export const BUTTON_STYLES = {
-  primary: 'bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-all duration-300',
-  secondary: 'bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition-all duration-300',
-  success: 'bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-all duration-300',
+  primary: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300',
+  secondary: 'bg-secondary-500 text-white px-6 py-2 rounded-lg hover:bg-secondary-600 transition-all duration-300',
+  success: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300',
   danger: 'bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-all duration-300',
-  warning: 'bg-yellow-600 text-white px-6 py-2 rounded-lg hover:bg-yellow-700 transition-all duration-300',
-  outline: 'border border-blue-600 text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition-all duration-300',
+  warning: 'bg-secondary-400 text-white px-6 py-2 rounded-lg hover:bg-secondary-500 transition-all duration-300',
+  outline: 'border border-primary-500 text-primary-500 px-6 py-2 rounded-lg hover:bg-primary-50 transition-all duration-300',
   ghost: 'text-gray-600 px-6 py-2 rounded-lg hover:bg-gray-100 transition-all duration-300',
 } as const;
 
@@ -79,7 +79,7 @@ export function getInputStyle(hasError: boolean): string {
 export const ROLE_COLORS = {
   ADMIN: 'bg-red-100 text-red-800',
   EMPLOYEE: 'bg-blue-100 text-blue-800',
-  CLIENT: 'bg-green-100 text-green-800',
+  CLIENT: 'bg-primary-100 text-primary-800',
 } as const;
 
 export function getRoleColor(role: string): string {
@@ -90,9 +90,9 @@ export function getRoleColor(role: string): string {
 // Prize type colors (from constants.ts PRIZE_CONFIG)
 export const PRIZE_COLORS = {
   INFUSEUR: 'bg-blue-100 text-blue-800',
-  THE_SIGNATURE: 'bg-green-100 text-green-800',
+  THE_SIGNATURE: 'bg-primary-100 text-primary-800',
   COFFRET_DECOUVERTE: 'bg-purple-100 text-purple-800',
-  COFFRET_PRESTIGE: 'bg-amber-100 text-amber-800',
+  COFFRET_PRESTIGE: 'bg-secondary-200 text-secondary-800',
   THE_GRATUIT: 'bg-pink-100 text-pink-800',
 } as const;