diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
index f68e56b..e13f431 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
@@ -10,6 +10,9 @@
   max-width: 800px; /* Optionnel : Limiter la largeur maximale */
   margin: 0 auto; /* Centrer le conteneur */
   height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
+  @media (max-width: 810px) {
+    height: 550px; 
+  }
 }
 
 
@@ -21,13 +24,16 @@
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
-  font-family: 'gilroy-semibold';
+  font-family: 'gilroy-regular';
   display: none;
   position: absolute;
   z-index: 1000;
   text-align: left;
   padding-left: 1rem;
   pointer-events: none;
+  @media (max-width: 810px) {
+    bottom: 20px;
+  }
 
 }
 
@@ -62,9 +68,10 @@
     font-size: 0.7rem;
   }
   @media (max-width : 810px) {
-    width: 250px;
+    width: 300px;
     background-color: white;
     border-radius: 5px;
     padding: 0.5rem; 
+    padding-left: 1rem;
   }
 }
diff --git a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
index eeee454..b705533 100644
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -1,4 +1,4 @@
-// Sélection des éléments principaux
+// // Sélection des éléments principaux
 const svgElement = document.querySelector('#sites-map-container svg');
 const popup = document.querySelector('#sites-map-container #popup');
 const popupContent = document.querySelector('#sites-map-container #popup-content');
@@ -8,90 +8,90 @@ const modalBackground = document.querySelector('#sites-map-container #modal-back
 function showPopup(content, x, y, isLeftHalf) {
     popupContent.innerHTML = content;
 
-    // Récupérer la position et les dimensions du conteneur SVG
-    const rect = svgElement.getBoundingClientRect();
+//     // Récupérer la position et les dimensions du conteneur SVG
+//     const rect = svgElement.getBoundingClientRect();
 
-      // Récupérer la position de défilement (scroll) de la page
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
+//       // Récupérer la position de défilement (scroll) de la page
+//       const scrollX = window.scrollX;
+//       const scrollY = window.scrollY;
 
-      // Variables pour stocker les positions calculées du popup
-    let popupX, popupY;
+//       // Variables pour stocker les positions calculées du popup
+//     let popupX, popupY;
 
-    // Afficher temporairement le popup pour mesurer ses dimensions
-    popup.style.display = 'block';
-    const popupWidth = popup.offsetWidth;
-    const popupHeight = popup.offsetHeight;
+//     // Afficher temporairement le popup pour mesurer ses dimensions
+//     popup.style.display = 'block';
+//     const popupWidth = popup.offsetWidth;
+//     const popupHeight = popup.offsetHeight;
 
     
 
-    // Vérifier si le point est dans la moitié gauche ou droite du SVG
-    if (isLeftHalf) {
-        console.log('Le point est dans la moitié gauche');
-        // Aligner le popup à gauche du cercle
-        popupX = rect.left + x  -scrollX - popupWidth - 800; // Ajuster ici si nécessaire
-        popupContent.style.textAlign = 'right'; // Alignement du texte à droite
-    } else {
-        console.log('Le point est dans la moitié droite');
-        // Aligner le popup à droite du cercle
-        popupX = rect.left + x + scrollX - popupWidth - 20;
-        popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
-    }
+//     // // Vérifier si le point est dans la moitié gauche ou droite du SVG
+//     // if (isLeftHalf) {
+//     //     console.log('Le point est dans la moitié gauche');
+//     //     // Aligner le popup à gauche du cercle
+//     //     popupX = rect.left + x  -scrollX - popupWidth - 800; // Ajuster ici si nécessaire
+//     //     popupContent.style.textAlign = 'right'; // Alignement du texte à droite
+//     // } else {
+//     //     console.log('Le point est dans la moitié droite');
+//     //     // Aligner le popup à droite du cercle
+//         popupX = rect.left + x + scrollX - popupWidth ;
+//         popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
+//     // }
 
-    // Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
-    const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
-    popupY = rect.top  + offsetY; // Centrer verticalement, puis ajuster
+//     // // Calculer la position Y avec un ajustement pour éviter qu'il soit trop bas
+//     const offsetY = - popupHeight - 10; // Ajuster la position vers le haut avec un décalage
+//     popupY = rect.top  + offsetY; // Centrer verticalement, puis ajuster
 
-    console.log('rect.top:', rect.top);
-    console.log('y:', y);
-    console.log('scrollY:', scrollY);
-    console.log('popupHeight:', popupHeight);
-    console.log('offsetY:', offsetY);
+//     // console.log('rect.top:', rect.top);
+//     // console.log('y:', y);
+//     // console.log('scrollY:', scrollY);
+//     // console.log('popupHeight:', popupHeight);
+//     // console.log('offsetY:', offsetY);
 
 
-    // Empêcher le popup de dépasser les bords de l'écran
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
+//     // // Empêcher le popup de dépasser les bords de l'écran
+//     // const viewportWidth = window.innerWidth;
+//     // const viewportHeight = window.innerHeight;
 
-    // Vérifier si le popup dépasse à droite de l'écran
-    if (popupX + popupWidth > viewportWidth) {
-        popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
-    }
+//     // // Vérifier si le popup dépasse à droite de l'écran
+//     // if (popupX + popupWidth > viewportWidth) {
+//     //     popupX = viewportWidth - popupWidth - 10; // Ajustement à droite
+//     // }
 
-    // Vérifier si le popup dépasse à gauche
-    if (popupX < 10) {
-        popupX = 10; // Ajustement à gauche
-    }
+//     // // Vérifier si le popup dépasse à gauche
+//     // if (popupX < 10) {
+//     //     popupX = 10; // Ajustement à gauche
+//     // }
 
-    // Vérifier si le popup dépasse en bas
-    if (popupY + popupHeight > viewportHeight) {
-        popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
-    }
+//     // // Vérifier si le popup dépasse en bas
+//     // if (popupY + popupHeight > viewportHeight) {
+//     //     popupY = viewportHeight - popupHeight - 10; // Ajustement en bas
+//     // }
 
-    // Vérifier si le popup dépasse en haut
-    if (popupY < 10) {
-        popupY = 10; // Ajustement en haut
-    }
+//     // // Vérifier si le popup dépasse en haut
+//     // if (popupY < 10) {
+//     //     popupY = 10; // Ajustement en haut
+//     // }
 
-    // Appliquer les positions calculées au popup
-    popup.style.left = `${popupX}px`;
-    popup.style.top = `${popupY}px`;
+//     // Appliquer les positions calculées au popup
+//     popup.style.left = `${popupX}px`;
+//     popup.style.top = `${popupY}px`;
 
     // Afficher le popup et le fond de modal
     popup.style.display = 'block';
     modalBackground.style.display = 'block';
 
-    console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
+//     console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
 }
 
-// Recalculer la position du popup lors du redimensionnement de la fenêtre
-window.addEventListener('resize', function() {
-    if (popup.style.display === 'block') {
-        const currentPopupRect = popup.getBoundingClientRect();
-        const rect = svgElement.getBoundingClientRect();
-        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
-    }
-});
+// // Recalculer la position du popup lors du redimensionnement de la fenêtre
+// window.addEventListener('resize', function() {
+//     if (popup.style.display === 'block') {
+//         const currentPopupRect = popup.getBoundingClientRect();
+//         const rect = svgElement.getBoundingClientRect();
+//         showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
+//     }
+// });
 
 // Fonction pour fermer le popup
 function closePopup() {
@@ -104,21 +104,21 @@ svgElement.addEventListener('mouseover', function(event) {
     if (event.target.classList.contains('site-link')) {
         const content = event.target.getAttribute('data-content');
 
-        // Récupérer la position et les dimensions du SVG
-        const rect = svgElement.getBoundingClientRect();
+//         // Récupérer la position et les dimensions du SVG
+//         const rect = svgElement.getBoundingClientRect();
 
-        // Calculer la position relative du cercle
-        const circleX = event.clientX - rect.left;
-        const circleY = event.clientY - rect.top;
+//         // Calculer la position relative du cercle
+//         const circleX = event.clientX - rect.left;
+//         const circleY = event.clientY - rect.top;
 
-        // Calculer la moitié du SVG
-        const svgHalfWidth = rect.width / 2;
+//         // // Calculer la moitié du SVG
+//         // const svgHalfWidth = rect.width / 2;
 
-        // Déterminer si le cercle est sur la moitié gauche ou droite du SVG
-        const isLeftHalf = circleX < svgHalfWidth;
+//         // // Déterminer si le cercle est sur la moitié gauche ou droite du SVG
+//         // const isLeftHalf = circleX < svgHalfWidth;
 
         // Afficher le popup avec la position et l'alignement adaptés
-        showPopup(content, circleX, circleY, isLeftHalf);
+        showPopup(content);
     }
 
     // Gestion du changement de couleur sur le cercle
@@ -177,3 +177,7 @@ svgElement.addEventListener('click', function(event) {
         handleCircleClick(content);
     }
 });
+
+
+
+
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 41e0256..924b5b4 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -3075,6 +3075,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   margin: 0 auto; /* Centrer le conteneur */
   height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
 }
+@media (max-width: 810px) {
+  #sites-map-container {
+    height: 550px;
+  }
+}
 
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover {
@@ -3083,7 +3088,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
-  font-family: "gilroy-semibold";
+  font-family: "gilroy-regular";
   display: none;
   position: absolute;
   z-index: 1000;
@@ -3091,6 +3096,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   padding-left: 1rem;
   pointer-events: none;
 }
+@media (max-width: 810px) {
+  #sites-map-container #popup {
+    bottom: 20px;
+  }
+}
 
 #sites-map-container strong {
   color: #f7002b;
@@ -3125,9 +3135,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 @media (max-width: 810px) {
   #popup-content {
-    width: 250px;
+    width: 300px;
     background-color: white;
     border-radius: 5px;
     padding: 0.5rem;
+    padding-left: 1rem;
   }
 }
\ No newline at end of file