diff --git a/banquise-website/src/components/ui/Popup.tsx b/banquise-website/src/components/ui/Popup.tsx
index 2ca9866..8ed8158 100644
--- a/banquise-website/src/components/ui/Popup.tsx
+++ b/banquise-website/src/components/ui/Popup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { URLS } from '../../config/constants';
 
 interface Service {
@@ -15,116 +15,127 @@ interface PopupProps {
   onClose: () => void;
 }
 
-export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
-  <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
-    <div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20 overflow-hidden">
-      
-      {/* Bouton de fermeture fixe au-dessus du contenu */}
-      <div className="absolute top-4 right-4 z-50">
-        <button
-          onClick={onClose}
-          className="bg-white/90 hover:bg-white border border-banquise-blue/20 text-xl cursor-pointer text-banquise-blue-dark flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 hover:scale-110 active:scale-95 shadow-lg backdrop-blur-sm"
-          aria-label="Fermer la popup"
-        >
-          ×
-        </button>
-      </div>
-      
-      {/* Contenu avec scroll vertical uniquement */}
-      <div className="overflow-y-auto overflow-x-hidden max-h-[90vh] popup-content">
-        {/* Header */}
-        <div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-6 sm:p-8 text-white pr-16 sm:pr-20">
-          <div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
-            <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/20 rounded-3xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl mb-4 lg:mb-0 lg:mr-8 backdrop-blur-sm">
-              {service.icon}
+export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
+  // Empêcher le scroll du body quand la popup est ouverte
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, []);
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
+      <div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20 overflow-hidden">
+        
+        {/* Bouton de fermeture fixe au-dessus du contenu */}
+        <div className="absolute top-4 right-4 z-50">
+          <button
+            onClick={onClose}
+            className="bg-white/90 hover:bg-white border border-banquise-blue/20 text-xl cursor-pointer text-banquise-blue-dark flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 hover:scale-110 active:scale-95 shadow-lg backdrop-blur-sm"
+            aria-label="Fermer la popup"
+          >
+            ×
+          </button>
+        </div>
+        
+        {/* Contenu avec scroll vertical uniquement */}
+        <div className="overflow-y-auto overflow-x-hidden max-h-[90vh] popup-content">
+          {/* Header */}
+          <div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-6 sm:p-8 text-white pr-16 sm:pr-20">
+            <div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
+              <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/20 rounded-3xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl mb-4 lg:mb-0 lg:mr-8 backdrop-blur-sm">
+                {service.icon}
+              </div>
+              <div className="text-center lg:text-left flex-1">
+                <h2 className="font-heading text-2xl sm:text-3xl lg:text-4xl mt-0 mb-3 lg:mb-4 leading-tight font-bold text-white">
+                  {service.name}
+                </h2>
+                <div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
+                  Service d'hébergement professionnel
+                </div>
+                <div className="mt-4 lg:mt-6 flex flex-wrap gap-2 justify-center lg:justify-start">
+                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Haute disponibilité</span>
+                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Open Source</span>
+                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Communautaire</span>
+                </div>
+              </div>
             </div>
-            <div className="text-center lg:text-left flex-1">
-              <h2 className="font-heading text-2xl sm:text-3xl lg:text-4xl mt-0 mb-3 lg:mb-4 leading-tight font-bold text-white">
-                {service.name}
-              </h2>
-              <div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
-                Service d'hébergement professionnel
-              </div>
-              <div className="mt-4 lg:mt-6 flex flex-wrap gap-2 justify-center lg:justify-start">
-                <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Haute disponibilité</span>
-                <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Open Source</span>
-                <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Communautaire</span>
+          </div>
+
+          {/* Content - Forcer le fond blanc */}
+          <div className="p-6 sm:p-8 bg-white">
+            {/* Description */}
+            <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-banquise-blue-dark font-heading font-bold flex items-center">
+              <span className="text-xl sm:text-2xl lg:text-3xl mr-3">📋</span>
+              Description détaillée
+            </h3>
+            <div className="bg-gradient-to-br from-banquise-blue/5 to-banquise-blue-light/5 rounded-2xl p-4 lg:p-6 border border-banquise-blue/10 mb-8">
+              <p className="text-banquise-blue-dark/90 leading-relaxed text-base sm:text-lg lg:text-xl mb-4">
+                {service.description}
+              </p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
+                <div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
+                  <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white mr-3">
+                    ✓
+                  </div>
+                  <div>
+                    <div className="font-semibold text-banquise-blue-dark text-sm">99.9% Uptime</div>
+                    <div className="text-banquise-blue-dark/70 text-xs">Disponibilité garantie</div>
+                  </div>
+                </div>
+                <div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
+                  <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
+                    🔒
+                  </div>
+                  <div>
+                    <div className="font-semibold text-banquise-blue-dark text-sm">Sécurisé</div>
+                    <div className="text-banquise-blue-dark/70 text-xs">SSL & Backups</div>
+                  </div>
+                </div>
               </div>
             </div>
+
+            {/* Fonctionnalités */}
+            <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-banquise-blue-dark font-heading font-bold flex items-center">
+              <span className="text-xl sm:text-2xl lg:text-3xl mr-3">⚡</span>
+              Fonctionnalités principales
+            </h3>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+              {service.features.map((feature, index) => (
+                <div key={index} className="flex items-start bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200 group">
+                  <div className="w-6 h-6 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
+                  </div>
+                  <span className="text-banquise-blue-dark/90 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* Call to action */}
+            <div className="pt-6 lg:pt-8 border-t border-banquise-blue/10">
+              <a
+                href={service.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 sm:px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light text-base lg:text-lg hover:scale-[1.02] active:scale-95"
+              >
+                <span className="mr-3 text-xl lg:text-2xl">🚀</span>
+                <span>Accéder à {service.name}</span>
+              </a>
+              
+              <p className="text-center text-sm text-banquise-blue-dark/60 mt-4">
+                Besoin d'aide ? Rejoignez notre <a href={URLS.social.discord} className="text-banquise-blue hover:text-banquise-blue-dark transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
+              </p>
+            </div>
           </div>
         </div>
 
-        {/* Content - Forcer le fond blanc */}
-        <div className="p-6 sm:p-8 bg-white">
-          {/* Description */}
-          <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-banquise-blue-dark font-heading font-bold flex items-center">
-            <span className="text-xl sm:text-2xl lg:text-3xl mr-3">📋</span>
-            Description détaillée
-          </h3>
-          <div className="bg-gradient-to-br from-banquise-blue/5 to-banquise-blue-light/5 rounded-2xl p-4 lg:p-6 border border-banquise-blue/10 mb-8">
-            <p className="text-banquise-blue-dark/90 leading-relaxed text-base sm:text-lg lg:text-xl mb-4">
-              {service.description}
-            </p>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
-              <div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
-                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white mr-3">
-                  ✓
-                </div>
-                <div>
-                  <div className="font-semibold text-banquise-blue-dark text-sm">99.9% Uptime</div>
-                  <div className="text-banquise-blue-dark/70 text-xs">Disponibilité garantie</div>
-                </div>
-              </div>
-              <div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
-                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
-                  🔒
-                </div>
-                <div>
-                  <div className="font-semibold text-banquise-blue-dark text-sm">Sécurisé</div>
-                  <div className="text-banquise-blue-dark/70 text-xs">SSL & Backups</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Fonctionnalités */}
-          <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-banquise-blue-dark font-heading font-bold flex items-center">
-            <span className="text-xl sm:text-2xl lg:text-3xl mr-3">⚡</span>
-            Fonctionnalités principales
-          </h3>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
-            {service.features.map((feature, index) => (
-              <div key={index} className="flex items-start bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200 group">
-                <div className="w-6 h-6 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
-                  <div className="w-2 h-2 bg-white rounded-full"></div>
-                </div>
-                <span className="text-banquise-blue-dark/90 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
-              </div>
-            ))}
-          </div>
-
-          {/* Call to action */}
-          <div className="pt-6 lg:pt-8 border-t border-banquise-blue/10">
-            <a
-              href={service.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 sm:px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light text-base lg:text-lg hover:scale-[1.02] active:scale-95"
-            >
-              <span className="mr-3 text-xl lg:text-2xl">🚀</span>
-              <span>Accéder à {service.name}</span>
-            </a>
-            
-            <p className="text-center text-sm text-banquise-blue-dark/60 mt-4">
-              Besoin d'aide ? Rejoignez notre <a href={URLS.social.discord} className="text-banquise-blue hover:text-banquise-blue-dark transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
-            </p>
-          </div>
-        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 bg-banquise-blue-lightest/10 rounded-full -translate-y-8 translate-x-8 sm:-translate-y-12 sm:translate-x-12 lg:-translate-y-16 lg:translate-x-16 hidden sm:block pointer-events-none"></div>
+        <div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-banquise-blue/5 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block pointer-events-none"></div>
       </div>
-
-      {/* Decorative elements */}
-      <div className="absolute top-0 right-0 w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 bg-banquise-blue-lightest/10 rounded-full -translate-y-8 translate-x-8 sm:-translate-y-12 sm:translate-x-12 lg:-translate-y-16 lg:translate-x-16 hidden sm:block pointer-events-none"></div>
-      <div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-banquise-blue/5 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block pointer-events-none"></div>
     </div>
-  </div>
-);
+  );
+};