php et js point carte cliquable

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

@@ -101,3 +101,14 @@ if (pageIdMatch) {
     const matchingCircle = document.querySelector(`#site-${pageId} circle`);
     if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
 }
+
+
+// Écouter les événements de clic sur le SVG
+svgElement.addEventListener('click', function(event) {
+    if (event.target.tagName === 'circle' && event.target.classList.contains('site-link')) {
+        const targetUrl = event.target.getAttribute('data-url'); // Récupérer l'URL de redirection
+        if (targetUrl) {
+            window.location.href = targetUrl;  // Rediriger vers l'URL cible
+        }
+    }
+});

web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php

@@ -42,7 +42,8 @@ class SitesMap extends BlockBase {
       $title = $site->get('title')->getString();
       $subtitle = $site->get('field_sous_titre')->getString();
 
-      $link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
+      $link_options = ['absolute' => TRUE, 'attributes' => ['class' => 'site-link']]; // Passer 'absolute' à TRUE
+      $site_url = $site->toUrl('canonical', $link_options)->toString(); // URL absolue pour le data-url
       $site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
       $link = $site_link_object->toString()->getGeneratedLink();
 
@@ -70,7 +71,8 @@ class SitesMap extends BlockBase {
          
           <circle
           class="site-link"
-          data-content="$datacontent"
+          data-content="$datacontent" 
+          data-url="$site_url"
           cx="0" cy="0" r="$r"
           style="fill-opacity:1;fill-rule:nonzero;" />
         <path

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1674,11 +1674,13 @@ body {
 
 #lightbox .caption {
   color: white;
-  font-size: 1rem;
+  font-size: 0.8rem;
   text-align: center;
   margin-top: 10px;
   max-width: 90%;
   margin: 10px auto;
+  font-family: "gilroy-light";
+  padding-top: 1rem;
 }
 
 .lightbox .close {
@@ -1700,11 +1702,11 @@ body {
 }
 
 .prev {
-  left: 10px;
+  left: 30px;
 }
 
 .next {
-  right: 10px;
+  right: 30px;
 }
 
 /*pages*/
@@ -3042,6 +3044,7 @@ body {
   content: url("../img/noun-arrow-to-right.svg");
   padding-right: 0.2rem;
   padding-left: 0.2rem;
+  padding-bottom: 0.2rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second {
   flex: 0 1 50% !important;
@@ -3255,14 +3258,15 @@ main {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  width: 85%;
+  width: 60%;
   margin: auto;
+  padding-left: 4rem;
   gap: 20px;
 }
 #lessites .content_container .view .views-row-wrapper .views-row {
   width: 18%;
   margin-bottom: 2rem;
-  font-size: 0.6rem;
+  font-size: 0.55rem;
 }
 @media (max-width: 810px) {
   #lessites .content_container .view .views-row-wrapper .views-row {

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss

@@ -56,13 +56,14 @@ main{
                 flex-direction: row;
                 flex-wrap: wrap;
                 justify-content: center;
-                width: 85%;
+                width: 60%;
                 margin: auto;
+                padding-left: 4rem;
                 gap: 20px;
                 .views-row{
                     width: 18%;
                     margin-bottom: 2rem;
-                    font-size: 0.6rem ;
+                    font-size: 0.55rem ;
 
                     @media(max-width: 810px){
                         width: 45%;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss

@@ -121,6 +121,8 @@
                             content: url("../img/noun-arrow-to-right.svg");
                             padding-right: 0.2rem;
                             padding-left: 0.2rem;
+                            padding-bottom: 0.2rem;
+
                             
                         }
                     } 

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss

@@ -32,11 +32,13 @@ body {
   }
   #lightbox .caption {
     color: white;
-    font-size: 1rem;
+    font-size: 0.8rem;
     text-align: center;
     margin-top: 10px;
     max-width: 90%;
     margin: 10px auto;
+    font-family: "gilroy-light";
+    padding-top: 1rem;
   }
   
   .lightbox .close {
@@ -58,10 +60,10 @@ body {
   }
   
   .prev {
-    left: 10px;
+    left: 30px;
   }
   
   .next {
-    right: 10px;
+    right: 30px;
   }