diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 9d3a251..2cba567 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -6,7 +6,7 @@ export default function Footer() {
 
 
       {/* Partie principale */}
-      <div className="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-4 gap-10">
+      <div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
 
 
         {/* Logo */}
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index b8e607d..a17a658 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,58 +1,92 @@
-import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 import logo from '../assets/img/logo.png'
 
 export default function Header() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { pathname } = useLocation()
+
+  const navLinks = [
+    { to: '/accueil', label: 'Accueil' },
+    { to: '/regles-jeu', label: 'Règles du jeu' },
+  ]
+
   return (
-    <header className="bg-white shadow-sm">
-      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
-
-          <Link to="/accueil" className="flex items-center">
-
-          <img
-
-            src={logo}
-
-            alt="Thé Tip Top"
-
-            className="h-12 w-auto"
-
-          />
+    <header className="bg-white shadow-sm relative z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
 
+        <Link to="/accueil" className="flex items-center flex-shrink-0">
+          <img src={logo} alt="Thé Tip Top" className="h-10 sm:h-12 w-auto" />
         </Link>
 
-        <nav className="flex items-center gap-6">
-          <Link
-            to="/accueil"
-            className="text-gray-700 hover:text-green-700 font-medium"
-          >
-            Accueil
-          </Link>
-
-          <Link
-            to="/regles-jeu"
-            className="text-gray-700 hover:text-green-700 font-medium"
-          >
-            Règles du jeu
-          </Link>
-
-          <div className="flex items-center gap-2">
+        {/* Nav desktop */}
+        <nav className="hidden md:flex items-center gap-6">
+          {navLinks.map((link) => (
             <Link
-              to="/connexion"
-              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
+              key={link.to}
+              to={link.to}
+              className={`font-medium transition-colors ${
+                pathname === link.to ? 'text-green-700' : 'text-gray-700 hover:text-green-700'
+              }`}
             >
+              {link.label}
+            </Link>
+          ))}
+          <div className="flex items-center gap-2">
+            <Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
               Connexion
             </Link>
-
-            <Link
-              to="/inscription"
-              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
-            >
+            <Link to="/inscription" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
               Inscription
             </Link>
           </div>
         </nav>
 
+        {/* Hamburger mobile */}
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="md:hidden flex flex-col justify-center items-center w-9 h-9 gap-1.5"
+          aria-label="Ouvrir le menu"
+        >
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 origin-center ${menuOpen ? 'rotate-45 translate-y-2' : ''}`} />
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 ${menuOpen ? 'opacity-0' : ''}`} />
+          <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 origin-center ${menuOpen ? '-rotate-45 -translate-y-2' : ''}`} />
+        </button>
       </div>
+
+      {/* Menu mobile déroulant */}
+      {menuOpen && (
+        <div className="md:hidden bg-white border-t border-gray-100 px-4 pb-4">
+          {navLinks.map((link) => (
+            <Link
+              key={link.to}
+              to={link.to}
+              onClick={() => setMenuOpen(false)}
+              className={`block py-3 font-medium border-b border-gray-50 ${
+                pathname === link.to ? 'text-green-700' : 'text-gray-700'
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+          <div className="flex flex-col gap-2 pt-3">
+            <Link
+              to="/connexion"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
+            >
+              Connexion
+            </Link>
+            <Link
+              to="/inscription"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
+            >
+              Inscription
+            </Link>
+          </div>
+        </div>
+      )}
     </header>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Accueil.jsx b/frontend/src/pages/Accueil.jsx
index c8597af..f75ef2b 100644
--- a/frontend/src/pages/Accueil.jsx
+++ b/frontend/src/pages/Accueil.jsx
@@ -5,74 +5,53 @@ export default function Accueil() {
     <div className="bg-green-50">
 
       {/* Hero */}
-      <section className="max-w-7xl mx-auto px-6 py-24">
-
+      <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-5xl md:text-6xl font-bold text-green-800 mb-6">
+          <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">
             Bienvenue au jeu-concours Thé Tip Top
           </h1>
-
-          <p className="text-xl text-gray-600 mb-10">
-            À l'occasion de l'ouverture de notre 10ᵉ boutique à Nice, participez à notre jeu-concours et tentez de gagner des lots exceptionnels ! Tous les tickets sont gagnants, alors n'attendez plus pour découvrir votre lot.
+          <p className="text-base sm:text-lg md:text-xl text-gray-600 mb-8 sm:mb-10">
+            À l'occasion de l'ouverture de notre 10ᵉ boutique à Nice, participez à notre jeu-concours
+            et tentez de gagner des lots exceptionnels ! Tous les tickets sont gagnants, alors n'attendez
+            plus pour découvrir votre lot.
           </p>
-
-          <div className="flex flex-col sm:flex-row justify-center gap-4">
-
+          <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-8 py-4 rounded-xl transition-colors"
+              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"
             >
               Tester mon code
             </Link>
-
             <Link
               to="/regles-jeu"
-              className="border border-green-700 text-green-700 hover:bg-green-100 font-semibold px-8 py-4 rounded-xl transition-colors"
+              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"
             >
               Découvrir les règles
             </Link>
-
           </div>
-
         </div>
-
       </section>
 
-
       {/* Comment participer */}
-      <section className="max-w-5xl mx-auto px-6 pb-20">
-
-        <h2 className="text-3xl font-bold text-green-800 mb-8 text-center">
+      <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">
           Comment participer ?
         </h2>
-
-        <div className="grid md:grid-cols-4 gap-6">
-
-          <div className="bg-white rounded-2xl shadow p-6 text-center">
-            <div className="text-3xl font-bold text-green-700 mb-3">1</div>
-            <p>Achat de 49 € minimum</p>
-          </div>
-
-          <div className="bg-white rounded-2xl shadow p-6 text-center">
-            <div className="text-3xl font-bold text-green-700 mb-3">2</div>
-            <p>Recevez votre code unique</p>
-          </div>
-
-          <div className="bg-white rounded-2xl shadow p-6 text-center">
-            <div className="text-3xl font-bold text-green-700 mb-3">3</div>
-            <p>Saisissez le code sur le site</p>
-          </div>
-
-          <div className="bg-white rounded-2xl shadow p-6 text-center">
-            <div className="text-3xl font-bold text-green-700 mb-3">4</div>
-            <p>Découvrez votre lot</p>
-          </div>
-
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            { num: '1', text: 'Achat de 49 € minimum' },
+            { num: '2', text: 'Recevez votre code unique' },
+            { num: '3', text: 'Saisissez le code sur le site' },
+            { 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>
+              <p className="text-sm sm:text-base text-gray-700">{step.text}</p>
+            </div>
+          ))}
         </div>
-
       </section>
 
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
index f2dee00..94dc907 100644
--- a/frontend/src/pages/Admin.jsx
+++ b/frontend/src/pages/Admin.jsx
@@ -13,57 +13,59 @@ const MOCK_USERS = [
 
 export default function Admin() {
   return (
-    <div className="min-h-screen bg-gray-50 p-6">
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-2xl font-bold text-gray-800 mb-6">Tableau de bord Admin</h1>
+        <h1 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6">Tableau de bord Admin</h1>
 
         {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
           {[
             { label: 'Participants', value: MOCK_STATS.totalParticipants },
             { label: 'Gains remis', value: MOCK_STATS.gainsRemis },
             { label: 'En attente', value: MOCK_STATS.gainsEnAttente },
             { label: 'Taux participation', value: MOCK_STATS.tauxParticipation },
           ].map((stat) => (
-            <div key={stat.label} className="bg-white rounded-xl shadow p-4 text-center">
-              <p className="text-2xl font-bold text-green-700">{stat.value}</p>
-              <p className="text-sm text-gray-500 mt-1">{stat.label}</p>
+            <div key={stat.label} className="bg-white rounded-xl shadow p-3 sm:p-4 text-center">
+              <p className="text-xl sm:text-2xl font-bold text-green-700">{stat.value}</p>
+              <p className="text-xs sm:text-sm text-gray-500 mt-1">{stat.label}</p>
             </div>
           ))}
         </div>
 
         {/* Tirage au sort */}
-        <div className="bg-white rounded-xl shadow p-6 mb-6">
-          <h2 className="text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
+        <div className="bg-white rounded-xl shadow p-4 sm:p-6 mb-4 sm:mb-6">
+          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
           <button
             onClick={() => alert('TODO: connecter au backend')}
-            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-6 py-2.5 rounded-lg transition-colors"
+            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 sm:px-6 py-2 sm:py-2.5 rounded-lg transition-colors text-sm sm:text-base"
           >
             Lancer le tirage
           </button>
         </div>
 
         {/* Liste participants */}
-        <div className="bg-white rounded-xl shadow p-6">
-          <h2 className="text-lg font-bold text-gray-800 mb-4">Participants</h2>
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="text-left text-gray-500 border-b">
-                <th className="pb-2">Nom</th>
-                <th className="pb-2">Email</th>
-                <th className="pb-2 text-right">Gains</th>
-              </tr>
-            </thead>
-            <tbody>
-              {MOCK_USERS.map((user) => (
-                <tr key={user.id} className="border-b last:border-0">
-                  <td className="py-3 font-medium text-gray-800">{user.name}</td>
-                  <td className="py-3 text-gray-500">{user.email}</td>
-                  <td className="py-3 text-right text-green-700 font-semibold">{user.gains}</td>
+        <div className="bg-white rounded-xl shadow p-4 sm:p-6">
+          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Participants</h2>
+          <div className="overflow-x-auto -mx-4 sm:mx-0">
+            <table className="w-full text-sm min-w-[400px]">
+              <thead>
+                <tr className="text-left text-gray-500 border-b">
+                  <th className="pb-2 px-4 sm:px-0">Nom</th>
+                  <th className="pb-2 px-4 sm:px-0">Email</th>
+                  <th className="pb-2 px-4 sm:px-0 text-right">Gains</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {MOCK_USERS.map((user) => (
+                  <tr key={user.id} className="border-b last:border-0">
+                    <td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap">{user.name}</td>
+                    <td className="py-3 px-4 sm:px-0 text-gray-500 text-xs sm:text-sm">{user.email}</td>
+                    <td className="py-3 px-4 sm:px-0 text-right text-green-700 font-semibold">{user.gains}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/Confidentialite.jsx b/frontend/src/pages/Confidentialite.jsx
index 1f233bd..38b5670 100644
--- a/frontend/src/pages/Confidentialite.jsx
+++ b/frontend/src/pages/Confidentialite.jsx
@@ -1,183 +1,99 @@
 export default function Confidentialite() {
   return (
-    <main className="bg-green-50 min-h-screen px-6 py-16">
+    <main className="bg-green-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">
 
-      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
-
-        <h1 className="text-4xl font-bold text-green-800 mb-6">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-4 sm:mb-6">
           Politique de confidentialité
         </h1>
 
-
-        <p className="text-gray-600 mb-10 leading-relaxed">
-          Thé Tip Top accorde une grande importance à la protection de vos
-          données personnelles. Cette politique explique quelles informations
-          sont collectées, comment elles sont utilisées et quels sont vos droits.
+        <p className="text-gray-600 mb-8 sm:mb-10 leading-relaxed text-sm sm:text-base">
+          Thé Tip Top accorde une grande importance à la protection de vos données personnelles.
+          Cette politique explique quelles informations sont collectées, comment elles sont utilisées
+          et quels sont vos droits.
         </p>
 
-
-
-        {/* Article 1 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 1 – Responsable du traitement
           </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Le responsable du traitement des données collectées via le site
-            du jeu-concours « 100% Gagnant » est la société Thé Tip Top,
-            située au 18 rue Léon Frot, 75011 Paris.
-
+          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
+            Le responsable du traitement des données collectées via le site du jeu-concours
+            « 100% Gagnant » est la société Thé Tip Top, située au 18 rue Léon Frot, 75011 Paris.
           </p>
-
         </section>
 
-
-
-        {/* Article 2 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 2 – Données collectées
           </h2>
-
-          <p className="text-gray-700 mb-3">
-            Dans le cadre de votre participation, nous pouvons collecter :
-          </p>
-
-
-          <ul className="list-disc list-inside text-gray-700 space-y-2">
-
+          <p className="text-gray-700 mb-3 text-sm sm:text-base">Dans le cadre de votre participation, nous pouvons collecter :</p>
+          <ul className="list-disc list-inside text-gray-700 space-y-2 text-sm sm:text-base">
             <li>Nom et prénom</li>
-
             <li>Adresse email</li>
-
             <li>Informations du compte utilisateur</li>
-
             <li>Code de participation au jeu</li>
-
             <li>Informations liées aux gains obtenus</li>
-
           </ul>
-
         </section>
 
-
-
-        {/* Article 3 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 3 – Utilisation des données
           </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Les données collectées sont utilisées uniquement pour :
-            gérer votre participation au jeu-concours, vérifier les codes,
-            attribuer les lots, vous contacter en cas de gain et améliorer
-            l'expérience utilisateur.
-
+          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
+            Les données collectées sont utilisées uniquement pour : gérer votre participation au
+            jeu-concours, vérifier les codes, attribuer les lots, vous contacter en cas de gain
+            et améliorer l'expérience utilisateur.
           </p>
-
         </section>
 
-
-
-        {/* Article 4 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 4 – Conservation des données
           </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Vos données sont conservées uniquement pendant la durée nécessaire
-            au fonctionnement du jeu-concours et au respect des obligations
-            légales de Thé Tip Top.
-
+          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
+            Vos données sont conservées uniquement pendant la durée nécessaire au fonctionnement
+            du jeu-concours et au respect des obligations légales de Thé Tip Top.
           </p>
-
         </section>
 
-
-
-        {/* Article 5 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 5 – Cookies
           </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Le site utilise des cookies nécessaires au fonctionnement du site
-            ainsi que des cookies statistiques permettant d'améliorer les
-            services proposés. Vous pouvez gérer vos préférences à tout moment.
-
+          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
+            Le site utilise des cookies nécessaires au fonctionnement ainsi que des cookies
+            statistiques permettant d'améliorer les services proposés. Vous pouvez gérer vos
+            préférences à tout moment.
           </p>
-
         </section>
 
-
-
-        {/* Article 6 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+        <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">
             Article 6 – Vos droits
           </h2>
-
-          <p className="text-gray-700 mb-3">
-            Conformément au RGPD, vous disposez des droits suivants :
-          </p>
-
-
-          <ul className="list-disc list-inside text-gray-700 space-y-2">
-
+          <p className="text-gray-700 mb-3 text-sm sm:text-base">Conformément au RGPD, vous disposez des droits suivants :</p>
+          <ul className="list-disc list-inside text-gray-700 space-y-2 text-sm sm:text-base">
             <li>Droit d'accès à vos données</li>
-
             <li>Droit de rectification</li>
-
             <li>Droit de suppression</li>
-
             <li>Droit d'opposition</li>
-
             <li>Droit à la limitation du traitement</li>
-
           </ul>
-
-
         </section>
 
-
-
-        {/* Article 7 */}
         <section>
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
+          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-green-700 mb-2 sm:mb-3">
             Article 7 – Contact
           </h2>
-
-
-          <p className="text-gray-700">
-
-            Pour toute question concernant vos données personnelles :
-            <br />
-
+          <p className="text-gray-700 text-sm sm:text-base">
+            Pour toute question concernant vos données personnelles :<br />
             <strong>Email :</strong> contact@thetiptop.fr
-
           </p>
-
-
         </section>
 
-
       </div>
-
     </main>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
index 3e9801a..dc3f3ed 100644
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -1,174 +1,81 @@
 export default function Contact() {
   return (
-    <main className="bg-green-50 min-h-screen px-6 py-16">
-
-      <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8">
-
+    <main className="bg-green-50 min-h-screen 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-10">
-
-          <h1 className="text-4xl font-bold text-green-800 mb-6">
+        <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">
             Contact
           </h1>
-
-
-          <p className="text-gray-600 leading-relaxed mb-8">
-            Une question concernant le jeu-concours, votre participation
-            ou votre lot ? Notre équipe ThéTipTop est à votre écoute.
+          <p className="text-gray-600 leading-relaxed mb-6 sm:mb-8 text-sm sm:text-base">
+            Une question concernant le jeu-concours, votre participation ou votre lot ?
+            Notre équipe ThéTipTop est à votre écoute.
           </p>
-
-
-
-          <div className="space-y-6 text-gray-700">
-
-
+          <div className="space-y-5 text-gray-700">
             <div>
-              <h2 className="font-semibold text-green-700">
-                Adresse
-              </h2>
-
-              <p>
-                ThéTipTop
-                <br />
-                18 rue Léon Frot
-                <br />
-                75011 Paris, France
-              </p>
+              <h2 className="font-semibold text-green-700 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">
-                Email
-              </h2>
-
-              <p>
-                contact@thetiptop.fr
-              </p>
+              <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>
             </div>
-
-
-
             <div>
-              <h2 className="font-semibold text-green-700">
-                Téléphone
-              </h2>
-
-              <p>
-                01 84 80 20 34
-              </p>
+              <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>
             </div>
-
-
           </div>
-
-
         </section>
 
-
-
-
         {/* Formulaire */}
-
-        <section className="bg-white rounded-2xl shadow p-10">
-
-
-          <h2 className="text-2xl font-bold text-green-800 mb-6">
+        <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-5">
-
-
+          <form className="space-y-4 sm:space-y-5">
             <div>
-
-              <label className="block text-gray-700 mb-2">
-                Nom
-              </label>
-
+              <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-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+                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-2">
-                Email
-              </label>
-
+              <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-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+                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-2">
-                Sujet
-              </label>
-
+              <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-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+                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-2">
-                Message
-              </label>
-
+              <label className="block text-gray-700 mb-1.5 text-sm sm:text-base">Message</label>
               <textarea
-                rows="5"
+                rows="4"
                 placeholder="Votre message..."
-                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+                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-3 rounded-xl transition"
+              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>
-
-
         </section>
 
-
       </div>
-
-
     </main>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Employe.jsx b/frontend/src/pages/Employe.jsx
index c417257..7d7ab50 100644
--- a/frontend/src/pages/Employe.jsx
+++ b/frontend/src/pages/Employe.jsx
@@ -22,49 +22,47 @@ export default function Employe() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-6">
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
       <div className="max-w-lg mx-auto">
-        <h1 className="text-2xl font-bold text-gray-800 mb-1">Espace Employé</h1>
-        <p className="text-gray-500 mb-6">Vérifier et remettre un lot</p>
+        <h1 className="text-xl sm:text-2xl font-bold text-gray-800 mb-1">Espace Employé</h1>
+        <p className="text-gray-500 mb-5 sm:mb-6 text-sm sm:text-base">Vérifier et remettre un lot</p>
 
-        <form onSubmit={handleSearch} className="flex gap-2 mb-6">
+        <form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-2 mb-5 sm:mb-6">
           <input
             type="text"
             value={code}
             onChange={(e) => setCode(e.target.value)}
             required
             placeholder="Code ticket (TTT-XXXXX)"
-            className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 font-mono"
+            className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 font-mono text-sm"
           />
           <button
             type="submit"
-            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors"
+            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors text-sm sm:text-base whitespace-nowrap"
           >
             Rechercher
           </button>
         </form>
 
         {gain && (
-          <div className="bg-white rounded-xl shadow p-6 space-y-3">
-            <div className="flex justify-between items-start">
+          <div className="bg-white rounded-xl shadow p-4 sm:p-6 space-y-3">
+            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
               <div>
-                <p className="font-bold text-gray-800 text-lg">{gain.lot}</p>
-                <p className="text-sm text-gray-500 font-mono">{gain.code}</p>
+                <p className="font-bold text-gray-800 text-base sm:text-lg">{gain.lot}</p>
+                <p className="text-xs sm:text-sm text-gray-500 font-mono">{gain.code}</p>
               </div>
-              <span className={`text-xs font-semibold px-3 py-1 rounded-full ${gain.status === 'DELIVERED' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
+              <span className={`self-start text-xs font-semibold px-3 py-1 rounded-full ${gain.status === 'DELIVERED' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                 {gain.status === 'DELIVERED' ? 'Remis' : 'À remettre'}
               </span>
             </div>
-
-            <div className="border-t pt-3">
+            <div className="border-t pt-3 space-y-1">
               <p className="text-sm text-gray-600"><span className="font-medium">Client :</span> {gain.client}</p>
               <p className="text-sm text-gray-600"><span className="font-medium">Email :</span> {gain.email}</p>
             </div>
-
             {gain.status === 'PENDING' && (
               <button
                 onClick={handleDeliver}
-                className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors mt-2"
+                className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors mt-2 text-sm sm:text-base"
               >
                 Confirmer la remise du lot
               </button>
diff --git a/frontend/src/pages/MentionsLegales.jsx b/frontend/src/pages/MentionsLegales.jsx
index af767f4..731dfb7 100644
--- a/frontend/src/pages/MentionsLegales.jsx
+++ b/frontend/src/pages/MentionsLegales.jsx
@@ -1,202 +1,73 @@
 export default function MentionsLegales() {
   return (
-    <main className="bg-green-50 min-h-screen px-6 py-16">
+    <main className="bg-green-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">
 
-      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
-
-        <h1 className="text-4xl font-bold text-green-800 mb-6">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-4 sm:mb-6">
           Mentions légales
         </h1>
 
-        <p className="text-gray-600 mb-10">
-          Conformément à la loi n°2004-575 du 21 juin 2004 pour la Confiance
-          dans l'Économie Numérique (LCEN), les présentes mentions légales
-          précisent les informations relatives au site du jeu-concours
-          « 100% Gagnant » de Thé Tip Top.
+        <p className="text-gray-600 mb-8 sm:mb-10 text-sm sm:text-base">
+          Conformément à la loi n°2004-575 du 21 juin 2004 pour la Confiance dans l'Économie
+          Numérique (LCEN), les présentes mentions légales précisent les informations relatives
+          au site du jeu-concours « 100% Gagnant » de Thé Tip Top.
         </p>
 
-
-        {/* Article 1 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 1 – Société éditrice du site
-          </h2>
-
-          <div className="text-gray-700 space-y-2">
-
-            <p>
-              <strong>Dénomination sociale :</strong> Thé Tip Top
-            </p>
-
-            <p>
-              <strong>Forme juridique :</strong> Société à Responsabilité Limitée (SARL)
-            </p>
-
-            <p>
-              <strong>Capital social :</strong> 150 000 €
-            </p>
-
-            <p>
-              <strong>Siège social :</strong> 18 rue Léon Frot, 75011 Paris, France
-            </p>
-
-            <p>
-              <strong>Représentant légal :</strong> Eric Bourdon, Gérant
-            </p>
-
-            <p>
-              <strong>SIRET :</strong> 362 521 879 00054
-            </p>
-
-            <p>
-              <strong>TVA intracommunautaire :</strong> FR12 948140589
-            </p>
-
-            <p>
-              <strong>Email :</strong> contact@thetiptop.fr
-            </p>
-
-            <p>
-              <strong>Téléphone :</strong> 01 84 80 20 34
-            </p>
-
-          </div>
-
-        </section>
-
-
-
-        {/* Article 2 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 2 – Développement du site
-          </h2>
-
-          <p className="text-gray-700">
-            Le site du jeu-concours « 100% Gagnant » a été conçu et développé
-            par Furious Ducks, responsable de la conception technique,
-            de l'application web, de l'API et de l'infrastructure.
-          </p>
-
-        </section>
-
-
-
-        {/* Article 3 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 3 – Hébergement
-          </h2>
-
-          <p className="text-gray-700">
-            Le site est hébergé par HexaCloud Hostinger.
-          </p>
-
-        </section>
-
-
-
-        {/* Article 4 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 4 – Propriété intellectuelle
-          </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            L'ensemble des éléments présents sur le site (textes, images,
-            logos, graphismes, logiciels, marques et contenus) appartient
-            à Thé Tip Top ou à ses partenaires.
-
-            Toute reproduction ou utilisation sans autorisation préalable
-            est interdite.
-
-          </p>
-
-        </section>
-
-
-
-        {/* Article 5 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 5 – Cookies
-          </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Le site peut utiliser des cookies nécessaires à son fonctionnement
-            ainsi que des cookies d'analyse et de mesure d'audience.
-            L'utilisateur peut gérer ses préférences à tout moment.
-
-          </p>
-
-        </section>
-
-
-
-        {/* Article 6 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 6 – Responsabilité
-          </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Thé Tip Top s'efforce de fournir des informations exactes.
-            Toutefois, la société ne peut être tenue responsable des erreurs,
-            interruptions de service ou dommages liés à l'utilisation d'Internet.
-
-          </p>
-
-        </section>
-
-
-
-        {/* Article 7 */}
-        <section className="mb-8">
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 7 – Droit applicable
-          </h2>
-
-          <p className="text-gray-700">
-
-            Le présent site est soumis au droit français.
-            Tout litige relève des juridictions françaises compétentes.
-
-          </p>
-
-        </section>
-
-
-
-        {/* Article 8 */}
-        <section>
-
-          <h2 className="text-2xl font-bold text-green-700 mb-3">
-            Article 8 – Engagement responsable
-          </h2>
-
-          <p className="text-gray-700 leading-relaxed">
-
-            Thé Tip Top s'engage dans une démarche responsable :
-            optimisation des ressources numériques, limitation de la collecte
-            des données personnelles et utilisation de technologies adaptées.
-
-          </p>
-
-        </section>
-
+        {[
+          {
+            title: 'Article 1 – Société éditrice du site',
+            content: (
+              <div className="text-gray-700 space-y-2 text-sm sm:text-base">
+                <p><strong>Dénomination sociale :</strong> Thé Tip Top</p>
+                <p><strong>Forme juridique :</strong> Société à Responsabilité Limitée (SARL)</p>
+                <p><strong>Capital social :</strong> 150 000 €</p>
+                <p><strong>Siège social :</strong> 18 rue Léon Frot, 75011 Paris, France</p>
+                <p><strong>Représentant légal :</strong> Eric Bourdon, Gérant</p>
+                <p><strong>SIRET :</strong> 362 521 879 00054</p>
+                <p><strong>TVA intracommunautaire :</strong> FR12 948140589</p>
+                <p><strong>Email :</strong> contact@thetiptop.fr</p>
+                <p><strong>Téléphone :</strong> 01 84 80 20 34</p>
+              </div>
+            ),
+          },
+          {
+            title: 'Article 2 – Développement du site',
+            content: <p className="text-gray-700 text-sm sm:text-base">Le site du jeu-concours « 100% Gagnant » a été conçu et développé par Furious Ducks, responsable de la conception technique, de l'application web, de l'API et de l'infrastructure.</p>,
+          },
+          {
+            title: 'Article 3 – Hébergement',
+            content: <p className="text-gray-700 text-sm sm:text-base">Le site est hébergé par HexaCloud Hostinger.</p>,
+          },
+          {
+            title: 'Article 4 – Propriété intellectuelle',
+            content: <p className="text-gray-700 leading-relaxed text-sm sm:text-base">L'ensemble des éléments présents sur le site appartient à Thé Tip Top ou à ses partenaires. Toute reproduction ou utilisation sans autorisation préalable est interdite.</p>,
+          },
+          {
+            title: 'Article 5 – Cookies',
+            content: <p className="text-gray-700 leading-relaxed text-sm sm:text-base">Le site peut utiliser des cookies nécessaires à son fonctionnement ainsi que des cookies d'analyse. L'utilisateur peut gérer ses préférences à tout moment.</p>,
+          },
+          {
+            title: 'Article 6 – Responsabilité',
+            content: <p className="text-gray-700 leading-relaxed text-sm sm:text-base">Thé Tip Top s'efforce de fournir des informations exactes. Toutefois, la société ne peut être tenue responsable des erreurs, interruptions de service ou dommages liés à l'utilisation d'Internet.</p>,
+          },
+          {
+            title: 'Article 7 – Droit applicable',
+            content: <p className="text-gray-700 text-sm sm:text-base">Le présent site est soumis au droit français. Tout litige relève des juridictions françaises compétentes.</p>,
+          },
+          {
+            title: 'Article 8 – Engagement responsable',
+            content: <p className="text-gray-700 leading-relaxed text-sm sm:text-base">Thé Tip Top s'engage dans une démarche responsable : optimisation des ressources numériques, limitation de la collecte des données personnelles et utilisation de technologies adaptées.</p>,
+          },
+        ].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">
+              {article.title}
+            </h2>
+            {article.content}
+          </section>
+        ))}
 
       </div>
-
     </main>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/ReglesJeu.jsx b/frontend/src/pages/ReglesJeu.jsx
index 9fe4d0e..2c275cc 100644
--- a/frontend/src/pages/ReglesJeu.jsx
+++ b/frontend/src/pages/ReglesJeu.jsx
@@ -4,179 +4,97 @@ export default function ReglesJeu() {
   return (
     <div className="bg-green-50 min-h-screen">
 
-
       {/* Hero */}
-      <section className="max-w-7xl mx-auto px-6 py-20">
-
+      <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-5xl font-bold text-green-800 mb-6">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-green-800 mb-4 sm:mb-6">
             Règles du jeu
           </h1>
-
-          <p className="text-xl text-gray-600">
+          <p className="text-base sm:text-xl text-gray-600">
             Participez au jeu-concours ThéTipTop et découvrez immédiatement
             le lot que vous avez gagné.
           </p>
-
         </div>
-
       </section>
 
-
-
       {/* Comment participer */}
-      <section className="max-w-6xl mx-auto px-6 pb-16">
-
-        <h2 className="text-3xl font-bold text-green-800 text-center mb-10">
+      <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">
           Comment participer ?
         </h2>
-
-
-        <div className="grid md:grid-cols-3 gap-6">
-
-
-          <div className="bg-white rounded-2xl shadow p-8 text-center">
-
-            <div className="text-4xl font-bold text-green-700 mb-4">
-              1
+        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
+          {[
+            {
+              num: '1',
+              title: 'Obtenez un code',
+              text: "Achetez un produit ThéTipTop d'une valeur supérieure à 49€ en ligne ou en magasin pour recevoir un code unique à 10 chiffres.",
+            },
+            {
+              num: '2',
+              title: 'Créez votre compte',
+              text: "Inscrivez-vous sur le site du jeu-concours afin d'accéder à votre espace participant.",
+            },
+            {
+              num: '3',
+              title: 'Découvrez votre lot',
+              text: 'Entrez votre code dans votre espace client et découvrez immédiatement votre récompense.',
+            },
+          ].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>
+              <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>
-
-            <h3 className="text-xl font-semibold mb-3">
-              Obtenez un code
-            </h3>
-
-            <p className="text-gray-600">
-              Achetez un produit ThéTipTop d'une valeur supérieure à 49€
-              en ligne ou en magasin pour recevoir un code unique à 10 chiffres.
-            </p>
-
-          </div>
-
-
-
-          <div className="bg-white rounded-2xl shadow p-8 text-center">
-
-            <div className="text-4xl font-bold text-green-700 mb-4">
-              2
-            </div>
-
-            <h3 className="text-xl font-semibold mb-3">
-              Créez votre compte
-            </h3>
-
-            <p className="text-gray-600">
-              Inscrivez-vous sur le site du jeu-concours afin d'accéder
-              à votre espace participant.
-            </p>
-
-          </div>
-
-
-
-          <div className="bg-white rounded-2xl shadow p-8 text-center">
-
-            <div className="text-4xl font-bold text-green-700 mb-4">
-              3
-            </div>
-
-            <h3 className="text-xl font-semibold mb-3">
-              Découvrez votre lot
-            </h3>
-
-            <p className="text-gray-600">
-              Entrez votre code dans votre espace client et découvrez
-              immédiatement votre récompense.
-            </p>
-
-          </div>
-
-
+          ))}
         </div>
-
       </section>
 
-
-
       {/* Lots */}
-      <section className="max-w-5xl mx-auto px-6 pb-16">
-
-        <div className="bg-white rounded-2xl shadow p-10">
-
-          <h2 className="text-3xl font-bold text-green-800 mb-6 text-center">
+      <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">
             Que pouvez-vous gagner ?
           </h2>
-
-
-          <p className="text-gray-600 text-lg text-center leading-relaxed mb-8">
-
+          <p className="text-gray-600 text-base sm:text-lg text-center leading-relaxed mb-6 sm:mb-8">
             Tous les billets sont gagnants ! Les récompenses peuvent aller
             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-6 text-center">
-
-            <h3 className="text-2xl font-bold text-green-700 mb-2">
-              Grand gagnant
-            </h3>
-
-            <p className="text-gray-700">
-              Le participant tiré au sort remportera une année de thé
-              d'une valeur de 360€ !
+          <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>
+            <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>
-
           </div>
-
-
         </div>
-
       </section>
 
-
-
       {/* CTA */}
-      <section className="max-w-5xl mx-auto px-6 pb-20">
-
-        <div className="bg-green-700 rounded-2xl p-10 text-center text-white">
-
-          <h2 className="text-3xl font-bold mb-4">
+      <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">
+          <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">
             Ne manquez pas votre chance !
           </h2>
-
-          <p className="mb-8 text-lg">
-            Inscrivez-vous, entrez votre code de ticket et retirez votre lot
-            en magasin ou en ligne.
+          <p className="mb-6 sm:mb-8 text-base sm:text-lg">
+            Inscrivez-vous, entrez votre code de ticket et retirez votre lot en magasin ou en ligne.
           </p>
-
-
-          <div className="flex flex-col sm:flex-row justify-center gap-4">
-
+          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
             <Link
               to="/inscription"
-              className="bg-white text-green-700 px-8 py-3 rounded-xl font-semibold hover:bg-green-50"
+              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"
             >
               Inscrivez-vous
             </Link>
-
-
             <Link
               to="/saisir-code-unique"
-              className="border border-white px-8 py-3 rounded-xl font-semibold hover:bg-green-800"
+              className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-green-800 text-sm sm:text-base"
             >
               Entrer mon code de ticket
             </Link>
-
           </div>
-
-
         </div>
-
       </section>
 
-
     </div>
   )
-}
\ No newline at end of file
+}