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

@@ -0,0 +1,57 @@
+@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

@@ -1,96 +0,0 @@
-@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,97 +1,59 @@
-// // Sélection des éléments principaux
+// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
 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, isLeftHalf) {
+function showPopup(content, x, y) {
+    console.log('showPopup', content, x, y);
+    
     popupContent.innerHTML = content;
 
-//     // Récupérer la position et les dimensions du conteneur SVG
+    // Récupérer la position de l'élément SVG seulement une fois
-//     const rect = svgElement.getBoundingClientRect();
+    const rect = svgElement.getBoundingClientRect();
 
-//       // Récupérer la position de défilement (scroll) de la page
+    // Calculer la position du popup par rapport à l'élément SVG
-//       const scrollX = window.scrollX;
+    const popupX = rect.left + x + 120; // Décalage de 120px à droite
-//       const scrollY = window.scrollY;
+    const popupY = rect.top + y + 20;  // Décalage de 20px en dessous
 
-//       // Variables pour stocker les positions calculées du popup
+    // Dimensions de la fenêtre et du popup
-//     let popupX, popupY;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const popupWidth = popup.offsetWidth;
+    const popupHeight = popup.offsetHeight;
 
-//     // Afficher temporairement le popup pour mesurer ses dimensions
+    // Vérification des bordures droite et gauche
-//     popup.style.display = 'block';
+    if (popupX + popupWidth > viewportWidth) {
-//     const popupWidth = popup.offsetWidth;
+        popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
-//     const popupHeight = popup.offsetHeight;
+    }
+    if (popupX < 0) {
+        popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
+    }
 
+    // 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`;
-//     // // Vérifier si le point est dans la moitié gauche ou droite du SVG
+    popup.style.top = `${popupY}px`;
-//     // 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';
+    modalBackground.style.display = 'block'; // Activer le fond modal si nécessaire
-
-//     console.log(`Popup affiché à x: ${popupX}, y: ${popupY}`);
 }
 
-// // Recalculer la position du popup lors du redimensionnement de la fenêtre
+// Recalculer la position du popup lors du redimensionnement de la fenêtre
-// window.addEventListener('resize', function() {
+window.addEventListener('resize', function() {
-//     if (popup.style.display === 'block') {
+    if (popup.style.display === 'block') {
-//         const currentPopupRect = popup.getBoundingClientRect();
+        // Recalculer les coordonnées et ajuster la position
-//         const rect = svgElement.getBoundingClientRect();
+        const currentPopupRect = popup.getBoundingClientRect();
-//         showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
+        showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
-//     }
+    }
-// });
+});
 
 // Fonction pour fermer le popup
 function closePopup() {
@@ -99,85 +61,31 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Gérer le survol des cercles (au lieu du clic)
+// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
-svgElement.addEventListener('mouseover', function(event) {
+svgElement.addEventListener('click', function(event) {
+    console.log('svgElement click', event.target);
+    
     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 et les dimensions du SVG
+        // Récupérer la position du cercle cliqué par rapport à l'élément SVG
-//         const rect = svgElement.getBoundingClientRect();
+        const rect = svgElement.getBoundingClientRect();
+        const circleX = event.clientX - rect.left;
+        const circleY = event.clientY - rect.top;
 
-//         // Calculer la position relative du cercle
+        // Afficher le popup avec le contenu spécifique
-//         const circleX = event.clientX - rect.left;
+        showPopup(content, circleX, circleY);
-//         const circleY = event.clientY - rect.top;
 
-//         // // Calculer la moitié du SVG
+        // Empêcher la propagation de l'événement pour éviter la fermeture immédiate
-//         // const svgHalfWidth = rect.width / 2;
+        event.stopPropagation();
-
-//         // // 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');
     }
 });
 
-// Fermer le popup lorsque la souris quitte le cercle
+// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
-svgElement.addEventListener('mouseout', function(event) {
+document.addEventListener('click', function(event) {
-    if (event.target.classList.contains('site-link')) {
+    // Vérifier si le clic s'est produit en dehors du popup
+    if (popup.style.display === 'block' && !popup.contains(event.target)) {
         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.scss: {}
+      assets/css/fontface.css: {}
-      assets/css/carte-interactive-qdd.scss: {}
+      assets/css/carte-interactive-qdd.css: {}
   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 = 600;
+    $vp_w = 400;
-    $vp_h = 600;
+    $vp_h = 400;
 
     // Coordonnées géographiques des coins de la carte (France)
     $latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
@@ -51,37 +51,35 @@ 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+4;
+      $m = -$r+2;
-      $l = $r*2-7;
+      $l = $r*2-4;
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"
-        data-geofield="$geofieldData"
+        transform="
-        transform="translate($x,$y)"
+          translate($x,$y)">
-        style="cursor: pointer;"  <!-- Change le curseur pour indiquer l'interaction -->
+        <circle
-      >
+          id="path83" class="circle"
-          <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-opacity:1;fill-rule:nonzero;" />
+          style="fill:#000000;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" />
+          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="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" />
+          style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
-
+        <circle
+          class="site-link"
+          data-content="$datacontent"
+          cx="0" cy="0" r="$r"
+          style="fill:#000000;fill-opacity:0;fill-rule:nonzero;" />
       </g>
       SVGSITEPATH;
     }

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

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

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

@@ -209,10 +209,6 @@ h2 {
   }
 }
 
-.layout--threecol-25-50-25 {
-  width: 100vw;
-}
-
 /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
 ul {
   list-style-type: none;
@@ -465,7 +461,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: 35%;
+  width: 45%;
   transform-origin: bottom right;
   transition: all 1s ease-in-out;
 }
@@ -484,7 +480,7 @@ header .header:hover + .header_nav_container {
   }
 }
 .header--collapsed .header_left_container {
-  flex: 0 0 70%;
+  flex: 0 0 50%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -506,7 +502,7 @@ header .header:hover + .header_nav_container {
 
 .header--collapsed-already {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 35%;
+  width: 45%;
   transform-origin: bottom right;
   transition: all 0s ease-in-out;
 }
@@ -520,7 +516,7 @@ header .header:hover + .header_nav_container {
   }
 }
 .header--collapsed-already .header_left_container {
-  flex: 0 0 70%;
+  flex: 0 0 50%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -1640,13 +1636,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 .slick-track {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
   max-height: 1281px;
   overflow: hidden;
 }
-#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track img {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
   width: 100%;
-  height: auto;
+  height: 960px;
   object-fit: cover;
 }
 #home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
@@ -1772,28 +1768,6 @@ 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;
@@ -2843,17 +2817,15 @@ 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;
@@ -3073,105 +3045,3 @@ 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,8 +369,6 @@
 
  ////////////  slideshow home  ////////////////////////// 
 
-
-
   $(document).ready(function(){
       let actuview = $('.content-actus .view')
       if (actuview) {
@@ -402,9 +400,6 @@
         console.log('salut slick home');
         
       }
-      $('.slick-carousel').slick({
-        lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
-      });
 
   });
 
@@ -420,11 +415,11 @@
             slidesToShow: 1,
             dots: false,
             arrows: false,
-            // centerMode: true,
+            centerMode: true,
-            adaptiveHeight: true,
+            adaptiveHeight: false,
             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: [
@@ -444,26 +439,6 @@
 });
 
 
-///////////// 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,6 +51,3 @@ $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;   
-                    .slick-track{
+                    .cadre-img-zoom{
                         max-height: 1281px;
                         overflow:hidden;
                         img{
                             width: 100%;
-                            height: auto;
+                            height: 960px;
                             object-fit: cover;
                             // transform: scale(1.2);
                             // // // animation: zoomOut infinite 4.3s ease-in-out;
@@ -158,28 +158,6 @@
             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,9 +18,8 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-           
             .block-region-first{
-
+                width: 100%;
                 .views-element-container{
                     margin-bottom: 3rem;
                 }
@@ -28,15 +27,6 @@
             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: 35%;
+    width: 45%;
     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 70%;
+        flex: 0 0 50%;
         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: 35%;
+    width: 45%;
     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 70%;
+        flex: 0 0 50%;
         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,5 +47,3 @@
 @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";