js change color mouseover

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss

@@ -12,24 +12,15 @@
   stroke: white;
   stroke-width: 0.7;
 } */
+#sites-map-container circle.circle:hover{
+  // fill: #f7002b!important;
+}
 
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover{
   cursor: pointer;
 }
 
-#sites-map-container circle.circle {
-  fill: black !important;
-  &:hover{
-    fill: #f7002b!important;
-  }
-
-}
-#sites-map-container circle.circle:hover{
-    fill: #f7002b!important;
-  
-
-}
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {

web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js

@@ -108,6 +108,16 @@ svgElement.addEventListener('mouseover', function(event) {
         // Afficher le popup avec la position et l'alignement adaptés
         showPopup(content, circleX, circleY, isLeftHalf);
     }
+
+    const isCircle = event.target.tagName === 'circle';
+    console.log(isCircle);
+    
+    if (isCircle === true) {
+        // Change la couleur en rouge
+        event.target.setAttribute('fill', 'red');
+    }
+
+        // circle.style.fill = 'red';
 });
 
 // Fermer le popup lorsque la souris quitte le cercle
@@ -115,4 +125,11 @@ svgElement.addEventListener('mouseout', function(event) {
     if (event.target.classList.contains('site-link')) {
         closePopup();
     }
+    const isCircle = event.target.tagName === 'circle';
+    console.log(isCircle);
+    
+    if (isCircle === true) {
+        // Change la couleur en rouge
+        event.target.setAttribute('fill', 'black');
+    }
 });