diff --git a/frontend/src/assets/img/img-contact.jpg b/frontend/src/assets/img/img-contact.jpg
new file mode 100644
index 0000000..6c2ae69
Binary files /dev/null and b/frontend/src/assets/img/img-contact.jpg differ
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 9166a48..b1e8eba 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,11 +1,11 @@
 import { Link, useLocation } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
-
+ 
 export default function Footer() {
   const { pathname } = useLocation()
   const { user } = useAuth()
   const isLoggedIn = !!user
-
+ 
   function FooterLink({ to, children, className=''}) {
     return pathname === to ? (
       <span className={className}>{children}</span>
@@ -16,13 +16,13 @@ export default function Footer() {
     )
   }
   return (
-    <footer className="bg-green-900 text-white">
-
-
+    <footer className="bg-[#006B6B] text-white">
+ 
+ 
       {/* Partie principale */}
       <div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
-
-
+ 
+ 
         {/* Logo */}
         <div>
           <FooterLink to='/accueil'>
@@ -30,36 +30,36 @@ export default function Footer() {
               Thé Tip Top
             </h3>
           </FooterLink>
-
-          <p className="text-green-100 text-sm leading-relaxed">
+ 
+          <p className="text-teal-100 text-sm leading-relaxed">
             Participez au jeu-concours Thé Tip Top et tentez de gagner
             des lots gourmands autour du thé.
           </p>
-
+ 
         </div>
-
-
-
+ 
+ 
+ 
         {/* Navigation */}
         <div>
-
+ 
           <h3 className="text-lg font-semibold mb-5">
             Navigation
           </h3>
-
-
-          <ul className="space-y-3 text-green-100">
-
+ 
+ 
+          <ul className="space-y-3 text-teal-100">
+ 
             <li>
               <FooterLink
                 to="/accueil"
                 className="hover:text-white transition"
               >
                 Accueil
-              </FooterLink> 
+              </FooterLink>
             </li>
-
-
+ 
+ 
             <li>
               <FooterLink
                 to="/regles-jeu"
@@ -68,9 +68,9 @@ export default function Footer() {
                 Règles du jeu
               </FooterLink>
             </li>
-
-
-            <li> 
+ 
+ 
+            <li>
               <FooterLink
                 to="/saisir-code-unique"
                 className="hover:text-white transition"
@@ -78,9 +78,9 @@ export default function Footer() {
                 Tester mon code
               </FooterLink>
             </li>
-
+ 
             { !isLoggedIn && (
-              <li> 
+              <li>
                 <FooterLink
                   to="/inscription"
                   className="hover:text-white transition"
@@ -89,24 +89,24 @@ export default function Footer() {
                 </FooterLink>
               </li>
             )}
-
+ 
           </ul>
-
+ 
         </div>
-
-
-
-
+ 
+ 
+ 
+ 
         {/* Informations légales */}
         <div>
-
+ 
           <h3 className="text-lg font-semibold mb-5">
             Informations
           </h3>
-
-
-          <ul className="space-y-3 text-green-100">
-
+ 
+ 
+          <ul className="space-y-3 text-teal-100">
+ 
             <li>
               <FooterLink
                 to="/mentions-legales"
@@ -115,8 +115,8 @@ export default function Footer() {
                 Mentions légales
               </FooterLink>
             </li>
-
-
+ 
+ 
             <li>
               <FooterLink
                 to="/confidentialite"
@@ -125,9 +125,9 @@ export default function Footer() {
                 Politique de confidentialité
               </FooterLink>
             </li>
-
-
-            <li> 
+ 
+ 
+            <li>
               <FooterLink
                 to="/contact"
                 className="hover:text-white transition"
@@ -135,7 +135,7 @@ export default function Footer() {
                 Contact
               </FooterLink>
             </li>
-
+ 
             <li>
               <FooterLink
                 to="/sitemap"
@@ -144,59 +144,59 @@ export default function Footer() {
                 Plan du site
               </FooterLink>
             </li>
-
+ 
           </ul>
-
+ 
         </div>
-
-
-
-
+ 
+ 
+ 
+ 
         {/* Contact */}
         <div>
-
+ 
           <h3 className="text-lg font-semibold mb-5">
             Contact
           </h3>
-
-          <p className="text-green-100 text-sm mb-3">
+ 
+          <p className="text-teal-100 text-sm mb-3">
             Une question sur le jeu ?
           </p>
-
-          <a href="tel:+33184802034" className="block mt-2 font-medium hover:text-green-300">
+ 
+          <a href="tel:+33184802034" className="block mt-2 font-medium hover:text-teal-300">
             01 84 80 20 34
           </a>
-
-          <a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-green-300">
+ 
+          <a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-teal-300">
             contact@thetiptop.fr
           </a>
-
-          <p className="text-green-100 text-sm mt-2">
+ 
+          <p className="text-teal-100 text-sm mt-2">
             18 rue Léon Frot
             <br />
             75011 Paris, France
           </p>
-
-
+ 
+ 
         </div>
-
-
+ 
+ 
       </div>
-
-
-
+ 
+ 
+ 
       {/* Barre basse */}
-
-      <div className="border-t border-green-800">
-
+ 
+      <div className="border-t border-teal-800">
+ 
         <div className="max-w-7xl mx-auto px-6 py-5 flex flex-col md:flex-row justify-between items-center gap-3">
-
-
-          <p className="text-green-200 text-sm">
+ 
+ 
+          <p className="text-teal-200 text-sm">
             © {new Date().getFullYear()} Thé Tip Top. Tous droits réservés.
           </p>
-
-          <div className="flex gap-5 text-sm text-green-200">
+ 
+          <div className="flex gap-5 text-sm text-teal-200">
             <a
               href="https://www.facebook.com/profile.php?id=61590449280854"
               target="_blank"
@@ -205,8 +205,8 @@ export default function Footer() {
             >
               Facebook
             </a>
-
-
+ 
+ 
             <a
               href="https://www.instagram.com/thetiptop.gp4?igsh=MXZ3YzZ0d3dkazBpeg%3D%3D&utm_source=qr"
               target="_blank"
@@ -215,8 +215,8 @@ export default function Footer() {
             >
               Instagram
             </a>
-
-
+ 
+ 
             <a
               href="https://www.tiktok.com/@thetiptop4"
               target="_blank"
@@ -225,15 +225,15 @@ export default function Footer() {
             >
               TikTok
             </a>
-
+ 
           </div>
-
-
+ 
+ 
         </div>
-
+ 
       </div>
-
-
+ 
+ 
     </footer>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index dbe257d..0862d4f 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -46,7 +46,7 @@ export default function Header() {
               key={link.to}
               to={link.to}
               className={`font-medium transition-colors ${
-                pathname === link.to ? 'text-green-700' : 'text-gray-700 hover:text-green-700'
+                pathname === link.to ? 'text-[#006B6B]' : 'text-gray-700 hover:text-[#006B6B]'
               }`}
             >
               {link.label}
@@ -55,7 +55,7 @@ export default function Header() {
 
           {isLoggedIn ? (
             <div className="flex items-center gap-3">
-              <Link to="/profile" className="flex items-center gap-2 text-sm text-gray-700 hover:text-green-700 font-medium transition-colors">
+              <Link to="/profile" className="flex items-center gap-2 text-sm text-gray-700 hover:text-[#006B6B] font-medium transition-colors">
                 <div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold">
                   {initials}
                 </div>
@@ -70,10 +70,10 @@ export default function Header() {
             </div>
           ) : (
             <div className="flex items-center gap-2">
-              <Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
+              <Link to="/connexion" className="bg-[#006B6B] text-white px-4 py-2 rounded-lg hover:bg-[#005a5a] transition-colors text-sm">
                 Connexion
               </Link>
-              <Link to="/inscription" className="border border-green-700 text-green-700 px-4 py-2 rounded-lg hover:bg-green-50 transition-colors text-sm">
+              <Link to="/inscription" className="border border-[#006B6B] text-[#006B6B] px-4 py-2 rounded-lg hover:bg-[#006B6B] hover:text-white transition-colors text-sm">
                 Inscription
               </Link>
             </div>
@@ -101,7 +101,7 @@ export default function Header() {
               to={link.to}
               onClick={() => setMenuOpen(false)}
               className={`block py-3 font-medium border-b border-gray-50 ${
-                pathname === link.to ? 'text-green-700' : 'text-gray-700'
+                pathname === link.to ? 'text-[#006B6B]' : 'text-gray-700'
               }`}
             >
               {link.label}
@@ -130,14 +130,14 @@ export default function Header() {
                 <Link
                   to="/connexion"
                   onClick={() => setMenuOpen(false)}
-                  className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
+                  className="w-full text-center bg-[#006B6B] text-white px-4 py-2.5 rounded-lg hover:bg-[#005a5a] transition-colors text-sm font-medium"
                 >
                   Connexion
                 </Link>
                 <Link
                   to="/inscription"
                   onClick={() => setMenuOpen(false)}
-                  className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
+                  className="w-full text-center border border-[#006B6B] text-[#006B6B] px-4 py-2.5 rounded-lg hover:bg-[#006B6B] hover:text-white transition-colors text-sm font-medium"
                 >
                   Inscription
                 </Link>
diff --git a/frontend/src/pages/Accueil.jsx b/frontend/src/pages/Accueil.jsx
index f75ef2b..e8f3a49 100644
--- a/frontend/src/pages/Accueil.jsx
+++ b/frontend/src/pages/Accueil.jsx
@@ -2,12 +2,12 @@ import { Link } from 'react-router-dom'
 
 export default function Accueil() {
   return (
-    <div className="bg-green-50">
+    <div className="bg-gray-50 min-h-screen">
 
       {/* Hero */}
       <section className="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-16 md:py-24">
         <div className="text-center max-w-3xl mx-auto">
-          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-green-800 mb-4 sm:mb-6 leading-tight">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[#006B6B] mb-4 sm:mb-6 leading-tight">
             Bienvenue au jeu-concours Thé Tip Top
           </h1>
           <p className="text-base sm:text-lg md:text-xl text-gray-600 mb-8 sm:mb-10">
@@ -18,13 +18,13 @@ export default function Accueil() {
           <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
             <Link
               to="/saisir-code-unique"
-              className="bg-green-700 hover:bg-green-800 text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
+              className="bg-[#006B6B] hover:bg-[#005555] text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
             >
               Tester mon code
             </Link>
             <Link
               to="/regles-jeu"
-              className="border border-green-700 text-green-700 hover:bg-green-100 font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
+              className="border border-[#006B6B] text-[#006B6B] hover:bg-[#005555] hover:text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
             >
               Découvrir les règles
             </Link>
@@ -34,7 +34,7 @@ export default function Accueil() {
 
       {/* Comment participer */}
       <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
-        <h2 className="text-2xl sm:text-3xl font-bold text-green-800 mb-6 sm:mb-8 text-center">
+        <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
           Comment participer ?
         </h2>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -45,7 +45,7 @@ export default function Accueil() {
             { num: '4', text: 'Découvrez votre lot' },
           ].map((step) => (
             <div key={step.num} className="bg-white rounded-2xl shadow p-4 sm:p-6 text-center">
-              <div className="text-2xl sm:text-3xl font-bold text-green-700 mb-2 sm:mb-3">{step.num}</div>
+              <div className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-2 sm:mb-3">{step.num}</div>
               <p className="text-sm sm:text-base text-gray-700">{step.text}</p>
             </div>
           ))}
diff --git a/frontend/src/pages/Confidentialite.jsx b/frontend/src/pages/Confidentialite.jsx
index 38b5670..899f1db 100644
--- a/frontend/src/pages/Confidentialite.jsx
+++ b/frontend/src/pages/Confidentialite.jsx
@@ -1,9 +1,9 @@
 export default function Confidentialite() {
   return (
-    <main className="bg-green-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
+    <main className="bg-[#F0F0F0] min-h-screen px-4 sm:px-6 py-10 sm:py-16">
       <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
 
-        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-4 sm:mb-6">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
           Politique de confidentialité
         </h1>
 
@@ -14,7 +14,7 @@ export default function Confidentialite() {
         </p>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 1 – Responsable du traitement
           </h2>
           <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
@@ -24,7 +24,7 @@ export default function Confidentialite() {
         </section>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 2 – Données collectées
           </h2>
           <p className="text-gray-700 mb-3 text-sm sm:text-base">Dans le cadre de votre participation, nous pouvons collecter :</p>
@@ -38,7 +38,7 @@ export default function Confidentialite() {
         </section>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 3 – Utilisation des données
           </h2>
           <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
@@ -49,7 +49,7 @@ export default function Confidentialite() {
         </section>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 4 – Conservation des données
           </h2>
           <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
@@ -59,7 +59,7 @@ export default function Confidentialite() {
         </section>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 5 – Cookies
           </h2>
           <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
@@ -70,7 +70,7 @@ export default function Confidentialite() {
         </section>
 
         <section className="mb-6 sm:mb-8">
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 6 – Vos droits
           </h2>
           <p className="text-gray-700 mb-3 text-sm sm:text-base">Conformément au RGPD, vous disposez des droits suivants :</p>
@@ -84,7 +84,7 @@ export default function Confidentialite() {
         </section>
 
         <section>
-          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
             Article 7 – Contact
           </h2>
           <p className="text-gray-700 text-sm sm:text-base">
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
index dc3f3ed..67dd601 100644
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -1,11 +1,13 @@
+import imgContact from '../assets/img/img-contact.jpg'
+
 export default function Contact() {
   return (
-    <main className="bg-green-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
+    <main className="bg-[#F0F0F0] px-4 sm:px-6 py-10 sm:py-16">
       <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-6 sm:gap-8">
 
         {/* Informations */}
         <section className="bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
-          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-4 sm:mb-6">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
             Contact
           </h1>
           <p className="text-gray-600 leading-relaxed mb-6 sm:mb-8 text-sm sm:text-base">
@@ -14,68 +16,30 @@ export default function Contact() {
           </p>
           <div className="space-y-5 text-gray-700">
             <div>
-              <h2 className="font-semibold text-green-700 mb-1">Adresse</h2>
+              <h2 className="font-semibold text-[#006B6B] mb-1">Adresse</h2>
               <p className="text-sm sm:text-base">ThéTipTop<br />18 rue Léon Frot<br />75011 Paris, France</p>
             </div>
             <div>
-              <h2 className="font-semibold text-green-700 mb-1">Email</h2>
-              <a href="mailto:contact@thetiptop.fr" className="text-sm sm:text-base hover:text-green-700">contact@thetiptop.fr</a>
+              <h2 className="font-semibold text-[#006B6B] mb-1">Email</h2>
+              <a href="mailto:contact@thetiptop.fr" className="text-sm sm:text-base hover:text-[#006B6B]">contact@thetiptop.fr</a>
             </div>
             <div>
-              <h2 className="font-semibold text-green-700 mb-1">Téléphone</h2>
-              <a href="tel:+33184802034" className="text-sm sm:text-base hover:text-green-700">01 84 80 20 34</a>
+              <h2 className="font-semibold text-[#006B6B] mb-1">Téléphone</h2>
+              <a href="tel:+33184802034" className="text-sm sm:text-base hover:text-[#006B6B]">01 84 80 20 34</a>
             </div>
           </div>
         </section>
 
-        {/* Formulaire */}
-        <section className="bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
-          <h2 className="text-xl sm:text-2xl font-bold text-green-800 mb-4 sm:mb-6">
-            Envoyez-nous un message
-          </h2>
-          <form className="space-y-4 sm:space-y-5">
-            <div>
-              <label className="block text-gray-700 mb-1.5 text-sm sm:text-base">Nom</label>
-              <input
-                type="text"
-                placeholder="Votre nom"
-                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-green-600"
-              />
-            </div>
-            <div>
-              <label className="block text-gray-700 mb-1.5 text-sm sm:text-base">Email</label>
-              <input
-                type="email"
-                placeholder="Votre email"
-                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-green-600"
-              />
-            </div>
-            <div>
-              <label className="block text-gray-700 mb-1.5 text-sm sm:text-base">Sujet</label>
-              <input
-                type="text"
-                placeholder="Sujet de votre demande"
-                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-green-600"
-              />
-            </div>
-            <div>
-              <label className="block text-gray-700 mb-1.5 text-sm sm:text-base">Message</label>
-              <textarea
-                rows="4"
-                placeholder="Votre message..."
-                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-green-600 resize-none"
-              />
-            </div>
-            <button
-              type="submit"
-              className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 sm:py-3 rounded-xl transition text-sm sm:text-base"
-            >
-              Envoyer le message
-            </button>
-          </form>
+        {/* Image */}
+        <section className="rounded-2xl shadow overflow-hidden h-64 sm:h-80 md:h-117 md:self-start">
+          <img
+            src={imgContact}
+            alt="Une personne savourant un thé"
+            className="w-full h-full object-cover"
+          />
         </section>
 
       </div>
     </main>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MentionsLegales.jsx b/frontend/src/pages/MentionsLegales.jsx
index 731dfb7..4d216e7 100644
--- a/frontend/src/pages/MentionsLegales.jsx
+++ b/frontend/src/pages/MentionsLegales.jsx
@@ -1,9 +1,9 @@
 export default function MentionsLegales() {
   return (
-    <main className="bg-green-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
+    <main className="bg-gray-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
       <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
 
-        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-4 sm:mb-6">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
           Mentions légales
         </h1>
 
@@ -60,7 +60,7 @@ export default function MentionsLegales() {
           },
         ].map((article) => (
           <section key={article.title} className="mb-6 sm:mb-8">
-            <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
+            <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
               {article.title}
             </h2>
             {article.content}
diff --git a/frontend/src/pages/ReglesJeu.jsx b/frontend/src/pages/ReglesJeu.jsx
index 189ff71..dba3432 100644
--- a/frontend/src/pages/ReglesJeu.jsx
+++ b/frontend/src/pages/ReglesJeu.jsx
@@ -6,12 +6,12 @@ export default function ReglesJeu() {
   const isLoggedIn = !!user
 
   return (
-    <div className="bg-green-50 min-h-screen">
+    <div className="bg-gray-50 min-h-screen">
 
       {/* Hero */}
       <section className="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-16 md:py-20">
         <div className="text-center max-w-3xl mx-auto">
-          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-green-800 mb-4 sm:mb-6">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#006B6B] mb-4 sm:mb-6">
             Règles du jeu
           </h1>
           <p className="text-base sm:text-xl text-gray-600">
@@ -23,7 +23,7 @@ export default function ReglesJeu() {
 
       {/* Comment participer */}
       <section className="max-w-6xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
-        <h2 className="text-2xl sm:text-3xl font-bold text-green-800 text-center mb-8 sm:mb-10">
+        <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] text-center mb-8 sm:mb-10">
           Comment participer ?
         </h2>
         <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
@@ -45,7 +45,7 @@ export default function ReglesJeu() {
             },
           ].map((step) => (
             <div key={step.num} className="bg-white rounded-2xl shadow p-6 sm:p-8 text-center">
-              <div className="text-3xl sm:text-4xl font-bold text-green-700 mb-3 sm:mb-4">{step.num}</div>
+              <div className="text-3xl sm:text-4xl font-bold text-[#006B6B] mb-3 sm:mb-4">{step.num}</div>
               <h3 className="text-lg sm:text-xl font-semibold mb-2 sm:mb-3">{step.title}</h3>
               <p className="text-gray-600 text-sm sm:text-base">{step.text}</p>
             </div>
@@ -56,7 +56,7 @@ export default function ReglesJeu() {
       {/* Lots */}
       <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
         <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
-          <h2 className="text-2xl sm:text-3xl font-bold text-green-800 mb-4 sm:mb-6 text-center">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6 text-center">
             Que pouvez-vous gagner ?
           </h2>
           <p className="text-gray-600 text-base sm:text-lg text-center leading-relaxed mb-6 sm:mb-8">
@@ -64,8 +64,8 @@ export default function ReglesJeu() {
             d'un infuseur à thé à un coffret découverte d'une valeur de 69€,
             en passant par des thés détox et des thés signatures.
           </p>
-          <div className="bg-green-50 rounded-xl p-4 sm:p-6 text-center">
-            <h3 className="text-xl sm:text-2xl font-bold text-green-700 mb-2">Grand gagnant</h3>
+          <div className="bg-gray-100 rounded-xl p-4 sm:p-6 text-center">
+            <h3 className="text-xl sm:text-2xl font-bold text-[#006B6B] mb-2">Grand gagnant</h3>
             <p className="text-gray-700 text-sm sm:text-base">
               Le participant tiré au sort remportera une année de thé d'une valeur de 360€ !
             </p>
@@ -75,7 +75,7 @@ export default function ReglesJeu() {
 
       {/* CTA */}
       <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
-        <div className="bg-green-700 rounded-2xl p-6 sm:p-10 text-center text-white">
+        <div className="bg-[#006B6B] rounded-2xl p-6 sm:p-10 text-center text-white">
           <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">
             Ne manquez pas votre chance !
           </h2>
@@ -86,14 +86,14 @@ export default function ReglesJeu() {
             {!isLoggedIn && (
               <Link
                 to="/inscription"
-                className="bg-white text-green-700 px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-green-50 text-sm sm:text-base"
+                className="bg-white text-[#006B6B] px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
               >
                 Inscrivez-vous
               </Link>
             )}
             <Link
               to="/saisir-code-unique"
-              className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-green-800 text-sm sm:text-base"
+              className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
             >
               Entrer mon code de ticket
             </Link>
diff --git a/frontend/src/pages/Sitemap.jsx b/frontend/src/pages/Sitemap.jsx
index c6e76e7..8e2563e 100644
--- a/frontend/src/pages/Sitemap.jsx
+++ b/frontend/src/pages/Sitemap.jsx
@@ -43,16 +43,16 @@ const sections = [
 
 export default function Sitemap() {
   const { user } = useAuth()
-  const isAdmin = user?.role === 'admin'
+  const isAdmin = user?.role === 'ADMIN'
   const visibleSections = sections.filter(
     (section) => section.title !== 'Espaces professionnels' || isAdmin
   )
   return (
-    <main className="bg-green-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
+    <main className="bg-gray-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
       <div className="max-w-4xl mx-auto">
 
         <div className="mb-8 sm:mb-10">
-          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-2">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-2">
             Plan du site
           </h1>
           <p className="text-gray-500 text-sm sm:text-base">
@@ -63,7 +63,7 @@ export default function Sitemap() {
         <div className="grid sm:grid-cols-2 gap-6">
           {visibleSections.map((section) => (
             <div key={section.title} className="bg-white rounded-2xl shadow p-5 sm:p-6">
-              <h2 className="text-base sm:text-lg font-bold text-green-700 mb-4 pb-2 border-b border-gray-100">
+              <h2 className="text-base sm:text-lg font-bold text-[#006B6B] mb-4 pb-2 border-b border-gray-100">
                 {section.title}
               </h2>
               <ul className="space-y-3">