carte fixe

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

@@ -1,57 +0,0 @@
-@font-face {
-  font-family: 'gilroy-semibold';
-  src: url('fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
-}
-#sites-map-container {
-  background-color: #c3cef2;
-  text-align: center;
-}
-/* #sites-map-container .circle {
-  fill: black;
-  stroke: white;
-  stroke-width: 0.7;
-} */
-
-/* Changer la couleur au survol (hover) */
-#sites-map-container .site-link:hover{
-  cursor: pointer;
-}
-
-#sites-map-container .site-link:hover circle.circle {
-  fill: #f7002b!important;
-}
-
-/* Styles du popup (caché par défaut) */
-#sites-map-container #popup {
-  font-family: 'gilroy-semibold';
-  display: none;
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-}
-
-#sites-map-container strong{
-  color: #f7002b;
-  font-family: 'gilroy-semibold';
-}
-#sites-map-container a{
-  display: inline-flex;
-  align-items: center;
-  color: white;
-  background: black;
-  text-transform: uppercase;
-  font-size: 0.8rem;
-  padding-left: 0.5rem;
-  text-decoration: none;
-  margin-top: 0.7rem;
-  height: 1.3rem;
-}
-#sites-map-container a:after{
-        display: inline-flex;
-        content: url("../img/noun-arrow-to-right.svg");
-        padding-right: 0.2rem;
-        padding-left: 0.2rem;
-        
-}

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

@@ -0,0 +1,96 @@
+@font-face {
+  font-family: 'gilroy-semibold';
+  src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
+}
+#sites-map-container {
+  background-color: #cecfcc;
+  text-align: center;
+  position: relative;
+  width: 100%;  /* Prend toute la largeur du conteneur parent */
+  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) {
+    width: 80%;  /* Prend toute la largeur du conteneur parent */
+  }
+  @media (max-width: 530px) {
+    width: 100%;  /* Prend toute la largeur du conteneur parent */
+    height: 485px; 
+  }
+  @media (max-width: 400px) {
+    width: 100%;  /* Prend toute la largeur du conteneur parent */
+    height: 430px; 
+  }
+}
+
+
+
+/* Changer la couleur au survol (hover) */
+#sites-map-container .site-link:hover{
+  cursor: pointer;
+}
+
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: 'gilroy-light';
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+  pointer-events: none;
+  @media (max-width: 1090px) {
+    bottom: 20px;
+  }
+
+}
+
+/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
+@media (min-width: 1090px) {
+  #sites-map-container #popup {
+    top: 50%; /* Centrer verticalement */
+    left: 80%; /* Placer le popup à droite de la carte */
+    transform: translateY(-50%); /* Ajuster pour centrer verticalement */
+    width: 300px;
+  }
+}
+
+
+#sites-map-container strong{
+  color: #f7002b;
+  font-family: 'gilroy-bold';
+}
+#sites-map-container a{
+  display: none;
+  align-items: center;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  padding-left: 0.5rem;
+  text-decoration: none;
+  margin-top: 0.7rem;
+  height: 1.3rem;
+}
+#sites-map-container a:after{
+        display: inline-flex;
+        content: url("../img/noun-arrow-to-right.svg");
+        padding-right: 0.2rem;
+        padding-left: 0.2rem;
+        
+}
+
+#popup-content{
+  width: 300px;
+  p{
+    font-size: 0.7rem;
+  }
+  @media (max-width : 810px) {
+    width: 300px;
+    background-color: white;
+    border-radius: 5px;
+    padding: 0.5rem; 
+    padding-left: 1rem;
+  }
+}

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

@@ -1,59 +1,97 @@
-// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
+// // 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');
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
-console.log('svgElement', svgElement);
 
 // Fonction pour afficher le popup
-function showPopup(content, x, y) {
-    console.log('showPopup', content, x, y);
-    
+function showPopup(content, x, y, isLeftHalf) {
     popupContent.innerHTML = content;
 
-    // Récupérer la position de l'élément SVG seulement une fois
-    const rect = svgElement.getBoundingClientRect();
+//     // Récupérer la position et les dimensions du conteneur SVG
+//     const rect = svgElement.getBoundingClientRect();
 
-    // Calculer la position du popup par rapport à l'élément SVG
-    const popupX = rect.left + x + 120; // Décalage de 120px à droite
-    const popupY = rect.top + y + 20;  // Décalage de 20px en dessous
+//       // Récupérer la position de défilement (scroll) de la page
+//       const scrollX = window.scrollX;
+//       const scrollY = window.scrollY;
 
-    // Dimensions de la fenêtre et du popup
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const popupWidth = popup.offsetWidth;
-    const popupHeight = popup.offsetHeight;
+//       // Variables pour stocker les positions calculées du popup
+//     let popupX, popupY;
 
-    // Vérification des bordures droite et gauche
-    if (popupX + popupWidth > viewportWidth) {
-        popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
-    }
-    if (popupX < 0) {
-        popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
-    }
+//     // Afficher temporairement le popup pour mesurer ses dimensions
+//     popup.style.display = 'block';
+//     const popupWidth = popup.offsetWidth;
+//     const popupHeight = popup.offsetHeight;
 
-    // Vérification des bordures inférieure et supérieure
-    if (popupY + popupHeight > viewportHeight) {
-        popupY = viewportHeight - popupHeight - 10; // Ajuster pour qu'il ne dépasse pas en bas
-    }
-    if (popupY < 0) {
-        popupY = 10; // S'assurer que le popup ne dépasse pas en haut
-    }
+    
 
-    popup.style.left = `${popupX}px`;
-    popup.style.top = `${popupY}px`;
+//     // // 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
+
+//     // 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;
+
+//     // // 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 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
+//     // }
+
+//     // 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'; // Activer le fond modal si nécessaire
+    modalBackground.style.display = 'block';
+
+//     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') {
-        // Recalculer les coordonnées et ajuster la position
-        const currentPopupRect = popup.getBoundingClientRect();
-        showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.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() {
@@ -61,31 +99,85 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
-svgElement.addEventListener('click', function(event) {
-    console.log('svgElement click', event.target);
-    
+// Gérer le survol des cercles (au lieu du clic)
+svgElement.addEventListener('mouseover', function(event) {
     if (event.target.classList.contains('site-link')) {
-        // Récupérer le contenu personnalisé de l'attribut data-content
         const content = event.target.getAttribute('data-content');
 
-        // Récupérer la position du cercle cliqué par rapport à l'élément SVG
-        const rect = svgElement.getBoundingClientRect();
-        const circleX = event.clientX - rect.left;
-        const circleY = event.clientY - rect.top;
+//         // Récupérer la position et les dimensions du SVG
+//         const rect = svgElement.getBoundingClientRect();
 
-        // Afficher le popup avec le contenu spécifique
-        showPopup(content, circleX, circleY);
+//         // Calculer la position relative du cercle
+//         const circleX = event.clientX - rect.left;
+//         const circleY = event.clientY - rect.top;
 
-        // Empêcher la propagation de l'événement pour éviter la fermeture immédiate
-        event.stopPropagation();
+//         // // 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;
+
+        // Afficher le popup avec la position et l'alignement adaptés
+        showPopup(content);
+    }
+
+    // Gestion du changement de couleur sur le cercle
+    if (event.target.tagName === 'circle') {
+        event.target.setAttribute('fill', 'red');
     }
 });
 
-// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
-document.addEventListener('click', function(event) {
-    // Vérifier si le clic s'est produit en dehors du popup
-    if (popup.style.display === 'block' && !popup.contains(event.target)) {
+// Fermer le popup lorsque la souris quitte le cercle
+svgElement.addEventListener('mouseout', function(event) {
+    if (event.target.classList.contains('site-link')) {
         closePopup();
     }
+
+    // Réinitialiser la couleur du cercle au survol de la souris
+    if (event.target.tagName === 'circle') {
+        event.target.setAttribute('fill', 'black'); // Remettre en noir
+    }
 });
+
+
+// Mettre à jour la logique de calcul des positions
+function recalculateSitePositions() {
+    const allSites = document.querySelectorAll('.site-link');
+
+    allSites.forEach((site, index) => {
+        const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
+        const lon = parseFloat(geofield.split(',')[0]);
+        const lat = parseFloat(geofield.split(',')[1]);
+
+        const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
+        const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
+
+        site.setAttribute('transform', `translate(${x}, ${y})`);
+    });
+}
+
+window.addEventListener('resize', function() {
+    recalculateSitePositions();
+    if (popup.style.display === 'block') {
+        const currentPopupRect = popup.getBoundingClientRect();
+        const rect = svgElement.getBoundingClientRect();
+        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
+    }
+});
+
+// Gérer le clic ou le toucher des cercles
+function handleCircleClick(content) {
+    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
+}
+
+// Écouter les événements de clic et de toucher sur le SVG
+svgElement.addEventListener('click', function(event) {
+    if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
+        const content = event.target.getAttribute('data-content');
+        handleCircleClick(content);
+    }
+});
+
+
+
+

web/modules/custom/q2d_mod/q2d_mod.libraries.yml

@@ -1,7 +1,7 @@
 sites_map_block:
   css:
     theme:
-      assets/css/fontface.css: {}
-      assets/css/carte-interactive-qdd.css: {}
+      assets/css/fontface.scss: {}
+      assets/css/carte-interactive-qdd.scss: {}
   js:
     assets/js/carte-interactive-qdd.js: {}

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

@@ -28,8 +28,8 @@ class SitesMap extends BlockBase {
   
     $sites_paths = "";
 
-    $vp_w = 400;
-    $vp_h = 400;
+    $vp_w = 600;
+    $vp_h = 600;
 
     // Coordonnées géographiques des coins de la carte (France)
     $latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
@@ -51,35 +51,37 @@ class SitesMap extends BlockBase {
       $geofield = $site->get('field_geofield')->get(0);
       $lon = $geofield->lon;
       $lat = $geofield->lat;
+      $geofieldData = "$lon,$lat"; // Utiliser une chaîne pour stocker la position
 
       $x = round(($lon - $lonLeft) / ($lonRight - $lonLeft) * $vp_w);
       $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
 
       $r = 10;
-      $m = -$r+2;
-      $l = $r*2-4;
+      $m = -$r+4;
+      $l = $r*2-7;
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"
-        transform="
-          translate($x,$y)">
-        <circle
-          id="path83" class="circle"
-          cx="0" cy="0" r="$r"
-          style="fill:#000000;fill-opacity:1;fill-rule:nonzero;" />
-        <path
-          id="path84"
-          d="m 0,$m v $l"
-          style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
-        <path
-          id="path85"
-          d="m $m,0 h $l"
-          style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
-        <circle
+        data-geofield="$geofieldData"
+        transform="translate($x,$y)"
+        style="cursor: pointer;"  <!-- Change le curseur pour indiquer l'interaction -->
+      >
+          <rect width="10" height="10" transform="translate($x,$y)" fill="none" onclick="handleCircleClick('$datacontent')"></rect>  <!-- Zone d'interaction invisible -->
+         
+          <circle
           class="site-link"
           data-content="$datacontent"
           cx="0" cy="0" r="$r"
-          style="fill:#000000;fill-opacity:0;fill-rule:nonzero;" />
+          style="fill-opacity:1;fill-rule:nonzero;" />
+        <path
+          id="path84"
+          d="m 0,$m v $l"
+          style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+          id="path85"
+          d="m $m,0 h $l"
+          style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+
       </g>
       SVGSITEPATH;
     }

web/modules/custom/q2d_mod/templates/svg-mapsites.html.twig

@@ -3,9 +3,9 @@
     <path {{ path_attributes }}></path>
   </svg> #}
   <svg
-      width="{{ vpw }}"
-      height="{{ vph }}"
-      viewBox="0 0 100% 400px"
+      width="100%"
+      height="auto"
+      viewBox="0 0 {{ vpw }} {{ vph }}"
       version="1.1"
       id="svg1"
       xmlns="http://www.w3.org/2000/svg"
@@ -13,9 +13,11 @@
 
       <g
         id="layer1"
-        transform="
-          translate(-25.237685,-27.066503)
-          scale(2 2)"
+        width="auto"
+      height="100%"
+              transform="
+          translate(-34,-43)
+          scale(3 3)"
         > 
         <g
           id="g87"

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

@@ -209,6 +209,10 @@ h2 {
   }
 }
 
+.layout--threecol-25-50-25 {
+  width: 100vw;
+}
+
 /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
 ul {
   list-style-type: none;
@@ -461,7 +465,7 @@ header .header:hover + .header_nav_container {
 /* Taille définitive du header après l'animation */
 .header--collapsed {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 45%;
+  width: 35%;
   transform-origin: bottom right;
   transition: all 1s ease-in-out;
 }
@@ -480,7 +484,7 @@ header .header:hover + .header_nav_container {
   }
 }
 .header--collapsed .header_left_container {
-  flex: 0 0 50%;
+  flex: 0 0 70%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -502,7 +506,7 @@ header .header:hover + .header_nav_container {
 
 .header--collapsed-already {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 45%;
+  width: 35%;
   transform-origin: bottom right;
   transition: all 0s ease-in-out;
 }
@@ -516,7 +520,7 @@ header .header:hover + .header_nav_container {
   }
 }
 .header--collapsed-already .header_left_container {
-  flex: 0 0 50%;
+  flex: 0 0 70%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -1636,13 +1640,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home .config_pages--type--diaporama-home .diaporama .slick-list {
   padding: 0 !important;
 }
-#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track {
   max-height: 1281px;
   overflow: hidden;
 }
-#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track img {
   width: 100%;
-  height: 960px;
+  height: auto;
   object-fit: cover;
 }
 #home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
@@ -1768,6 +1772,28 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-family: "gilroy-bold";
   padding-bottom: 1rem;
 }
+#home article.node-type-static .field_field_map_block #block-sitesmapblock {
+  background-color: #cecfcc;
+  padding-top: 3rem;
+  padding-left: 4rem;
+}
+@media (max-width: 1090px) {
+  #home article.node-type-static .field_field_map_block #block-sitesmapblock {
+    padding-left: 0rem;
+  }
+}
+#home article.node-type-static .field_field_map_block #block-sitesmapblock h2 {
+  width: fit-content;
+  margin: auto;
+  font-size: 2rem;
+  padding-bottom: 2rem;
+}
+@media (max-width: 1090px) {
+  #home article.node-type-static .field_field_map_block #block-sitesmapblock h2 {
+    padding-bottom: 0rem;
+    font-size: 1.8rem;
+  }
+}
 #home article.node-type-static #paragraph-id--1 {
   background-color: #edefe8;
   position: relative;
@@ -2817,15 +2843,17 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-direction: column;
   align-items: center;
 }
-.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
-  width: 100%;
-}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first .views-element-container {
   margin-bottom: 3rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div {
   margin-bottom: 0.5rem;
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
+  position: fixed;
+  width: auto;
+  left: 1.3rem;
+}
 @media (max-width: 500px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
     margin-top: 1rem;
@@ -3044,4 +3072,106 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .next-site::before {
   content: url("../img/next.svg");
+}
+
+@font-face {
+  font-family: "gilroy-semibold";
+  src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
+}
+#sites-map-container {
+  background-color: #cecfcc;
+  text-align: center;
+  position: relative;
+  width: 100%; /* Prend toute la largeur du conteneur parent */
+  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) {
+  #sites-map-container {
+    width: 80%; /* Prend toute la largeur du conteneur parent */
+  }
+}
+@media (max-width: 530px) {
+  #sites-map-container {
+    width: 100%; /* Prend toute la largeur du conteneur parent */
+    height: 485px;
+  }
+}
+@media (max-width: 400px) {
+  #sites-map-container {
+    width: 100%; /* Prend toute la largeur du conteneur parent */
+    height: 430px;
+  }
+}
+
+/* Changer la couleur au survol (hover) */
+#sites-map-container .site-link:hover {
+  cursor: pointer;
+}
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: "gilroy-light";
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+  pointer-events: none;
+}
+@media (max-width: 1090px) {
+  #sites-map-container #popup {
+    bottom: 20px;
+  }
+}
+
+/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
+@media (min-width: 1090px) {
+  #sites-map-container #popup {
+    top: 50%; /* Centrer verticalement */
+    left: 80%; /* Placer le popup à droite de la carte */
+    transform: translateY(-50%); /* Ajuster pour centrer verticalement */
+    width: 300px;
+  }
+}
+#sites-map-container strong {
+  color: #f7002b;
+  font-family: "gilroy-bold";
+}
+
+#sites-map-container a {
+  display: none;
+  align-items: center;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  padding-left: 0.5rem;
+  text-decoration: none;
+  margin-top: 0.7rem;
+  height: 1.3rem;
+}
+
+#sites-map-container a:after {
+  display: inline-flex;
+  content: url("../img/noun-arrow-to-right.svg");
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+}
+
+#popup-content {
+  width: 300px;
+}
+#popup-content p {
+  font-size: 0.7rem;
+}
+@media (max-width: 810px) {
+  #popup-content {
+    width: 300px;
+    background-color: white;
+    border-radius: 5px;
+    padding: 0.5rem;
+    padding-left: 1rem;
+  }
 }

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -369,6 +369,8 @@
 
  ////////////  slideshow home  ////////////////////////// 
 
+
+
   $(document).ready(function(){
       let actuview = $('.content-actus .view')
       if (actuview) {
@@ -400,6 +402,9 @@
         console.log('salut slick home');
         
       }
+      $('.slick-carousel').slick({
+        lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
+      });
 
   });
 
@@ -415,11 +420,11 @@
             slidesToShow: 1,
             dots: false,
             arrows: false,
-            centerMode: true,
-            adaptiveHeight: false,
+            // centerMode: true,
+            adaptiveHeight: true,
             autoplay: true,  // Activer l'autoplay
             autoplaySpeed: 4000,  // Changement de slide toutes les 4 secondes
-            infinite: true,
+            // infinite: true,
             pauseOnHover: false,  // Ne pas arrêter l'autoplay lors du survol
             pauseOnFocus: false,
             responsive: [
@@ -439,6 +444,26 @@
 });
 
 
+///////////// carte sticky node site ///////////////////
+  // window.addEventListener('scroll', function() {
+  //   const mapContainer = document.getElementById('sites-map-container');
+  //   const header = document.querySelector('header'); // Sélectionnez votre header
+
+  //   const headerHeight = header.offsetHeight; // Calculer la hauteur du header
+  //   const scrollPosition = window.scrollY; // Obtenir la position actuelle du scroll
+  //   console.log('Hauteur dynamique du header:', headerHeight);
+
+  //   if (scrollPosition >= headerHeight - 350 ) {
+  //     mapContainer.classList.add('fixed');
+  //     mapContainer.style.position = 'fixed';
+  //     mapContainer.style.top = headerHeight + 350 ; // Fixé en haut une fois passé le header
+  //   } else {
+  //     mapContainer.classList.remove('fixed');
+  //     mapContainer.style.position = 'static'; // Retour à la position initiale
+  //   }
+  // });
+
+
   
 
 })(jQuery, window);

web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss

@@ -51,3 +51,6 @@ $width-menu-slidedown : 550px;
     }
 }
 
+.layout--threecol-25-50-25{
+    width: 100vw;
+}

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

@@ -7,12 +7,12 @@
         .diaporama{
             .slick-list{
                 padding: 0 !important;   
-                    .cadre-img-zoom{
+                    .slick-track{
                         max-height: 1281px;
                         overflow:hidden;
                         img{
                             width: 100%;
-                            height: 960px;
+                            height: auto;
                             object-fit: cover;
                             // transform: scale(1.2);
                             // // // animation: zoomOut infinite 4.3s ease-in-out;
@@ -158,6 +158,28 @@
             font-family: 'gilroy-bold';
             padding-bottom: 1rem;
         }
+
+        .field_field_map_block{
+            #block-sitesmapblock{
+                background-color: #cecfcc;
+                padding-top: 3rem;
+                padding-left: 4rem;
+                @media(max-width: 1090px){
+                    padding-left: 0rem;
+                }
+
+                h2{
+                    width: fit-content;
+                    margin: auto;
+                    font-size: 2rem;
+                    padding-bottom: 2rem;
+                    @media(max-width: 1090px){
+                        padding-bottom: 0rem;
+                        font-size: 1.8rem;
+                    }
+                }
+            }
+        }
         #paragraph-id--1{  ///// Les enjeux 1
             background-color: #edefe8;
             position: relative;

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

@@ -18,8 +18,9 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+           
             .block-region-first{
-                width: 100%;
+
                 .views-element-container{
                     margin-bottom: 3rem;
                 }
@@ -27,6 +28,15 @@
             div{
                 // width: fit-content;
                 margin-bottom: 0.5rem;
+                // #sites-map-container.fixed{
+                //     width: auto;
+                //     left: 1.3rem;
+                // }
+                #sites-map-container{
+                    position: fixed;
+                    width: auto;
+                    left: 1.3rem;
+                }
             }
             div:has(.field_field_documents){
                 @media(max-width: 500px){

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

@@ -211,7 +211,7 @@ header{
 /* Taille définitive du header après l'animation */
 .header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 45%;
+    width: 35%;
     transform-origin: bottom right; 
     transition: all 1s ease-in-out;
     @media(max-width: 1090px) {
@@ -225,7 +225,7 @@ header{
      height: 170px;
     }
     .header_left_container{
-        flex: 0 0 50%;
+        flex: 0 0 70%;
         transform-origin: bottom right; 
         @media(max-width: 810px){
             flex: 1 0 100%;
@@ -244,7 +244,7 @@ header{
 }
 .header--collapsed-already{
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 45%;
+    width: 35%;
     transform-origin: bottom right; 
     transition: all 0s ease-in-out;
     .qdd-header{
@@ -255,7 +255,7 @@ header{
         height: 170px;
        }
     .header_left_container{
-        flex: 0 0 50%;
+        flex: 0 0 70%;
         transform-origin: bottom right; 
         @media(max-width: 810px){
             flex: 1 0 100%;

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

@@ -47,3 +47,5 @@
 @import "pages/actualite";
 @import "pages/node-type-site";
 
+
+@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";