modifs pas finies de la carte interactive + clean des scss

web/modules/custom/erable_mod/assets/css/carte-interactive.css

@@ -1,98 +1,30 @@
-@font-face {
-  font-family: 'gilroy-semibold';
-  src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
-}
 #sites-map-container {
-  background-color: transparent;
-  text-align: center;
   position: relative;
-  width: 100%;  /* Prend toute la largeur du conteneur parent */
+  margin: 0 auto;
-  max-width: 800px; /* Optionnel : Limiter la largeur maximale */
+  max-width: 40vw;
-  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;
-  }
 }
 
-
+#map_base {
-
+  width: 100%;
-/* Changer la couleur au survol (hover) */
-#sites-map-container .site-link:hover{
-  cursor: pointer;
 }
 
+#projects_icons {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
 
-/* Styles du popup (caché par défaut) */
+#popup {
-#sites-map-container #popup {
+  background-color: white;
-  font-family: 'gilroy-light';
   display: none;
   position: absolute;
-  z-index: 1000;
+  padding: 0.5rem 1rem;
-  text-align: left;
+  transition: opacity 0.3s ease;
-  padding-left: 1rem;
+  opacity: 0;
-  pointer-events: none;
-  @media (max-width: 1090px) {
-    bottom: 20px;
-  }
-
 }
 
-/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
+#popup h3,
-@media (min-width: 1090px) {
+#popup p {
-  #sites-map-container #popup {
+  text-align: center;
-    top: 50%; /* Centrer verticalement */
+  margin: 0;
-    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;
-  padding-right: 30px;
-
-  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/erable_mod/assets/css/carte-interactive.old.css

@@ -0,0 +1,91 @@
+#sites-map-container {
+  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 {
+  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;
+}
+#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;
+  padding-right: 30px;
+
+  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/erable_mod/assets/js/carte-interactive.js

@@ -1,116 +1,243 @@
-// // Sélection des éléments principaux
+const franceCoordinates = {
-const svgElement = document.querySelector('#sites-map-container svg');
+  metropole: {
-const popup = document.querySelector('#sites-map-container #popup');
+    latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
-const popupContent = document.querySelector('#sites-map-container #popup-content');
+    lonLeft: -5,
-const modalBackground = document.querySelector('#sites-map-container #modal-background');
+    latBottom: 40.0, // Sud-Est (coin inférieur droit)
+    lonRight: 11.0,
+  },
+  guadeloupe: {
+    latTop: 16.5,
+    lonLeft: -62,
+    latBottom: 15.8,
+    lonRight: -60.8,
+  },
+  martinique: {
+    latTop: 14.9,
+    lonLeft: -61.3,
+    latBottom: 14.3,
+    lonRight: -60.7,
+  },
+  guyanne: {
+    latTop: 6,
+    lonLeft: -54.8,
+    latBottom: 1.8,
+    lonRight: -51.2,
+  },
+  reunion: {
+    latTop: -20.8,
+    lonLeft: 55.1,
+    latBottom: -21.4,
+    lonRight: 55.9,
+  },
+  saintPierreEtMiquelon: {
+    latTop: 47.1,
+    lonLeft: -56.4,
+    latBottom: 46.7,
+    lonRight: -56.1,
+  },
+  mayotte: {
+    latTop: -12.6,
+    lonLeft: 44.9,
+    latBottom: -13,
+    lonRight: 45.3,
+  },
+  saintBarthelemy: {
+    latTop: 17.9,
+    lonLeft: -62.9,
+    latBottom: 17.8,
+    lonRight: -62.7,
+  },
+  saintMartin: {
+    latTop: 18.1,
+    lonLeft: -63.1,
+    latBottom: 17.9,
+    lonRight: -62.9,
+  },
+  wallisEtFutuna: {
+    latTop: -13.1,
+    lonLeft: -176.2,
+    latBottom: -13.3,
+    lonRight: -176.1,
+  },
+  polynesieFrancaise: {
+    latTop: -17.4,
+    lonLeft: -149.9,
+    latBottom: -17.1,
+    lonRight: -149,
+  },
+  nouvelleCaledonie: {
+    latTop: -19.3,
+    lonLeft: 163.3,
+    latBottom: -22.9,
+    lonRight: 168.4,
+  },
+};
 
-// Vérifiez si la page contient la classe '.node-type-site'
+const localisationMapPlacements = {
-const isSitePage = document.body.classList.contains('node-type-site');
+  // en pourcentage de la largeur et hauteur du fond de carte
+  metropole: {
+    top: 0,
+    left: 12.9,
+    bottom: 63.48,
+    right: 87.14,
+  },
+  guadeloupe: {
+    top: 88.44,
+    left: 33.01,
+    bottom: 98.77,
+    right: 46.25,
+  },
+  martinique: {
+    top: 88.96,
+    left: 53.26,
+    bottom: 98.24,
+    right: 61.99,
+  },
+  guyanne: {
+    top: 88.09,
+    left: 69.09,
+    bottom: 99.21,
+    right: 79.07,
+  },
+  reunion: {
+    top: 75.48,
+    left: 89.82,
+    bottom: 82.04,
+    right: 97.88,
+  },
+  saintPierreEtMiquelon: {
+    top: 75.03,
+    left: 12.85,
+    bottom: 81.61,
+    right: 17.85,
+  },
+  mayotte: {
+    top: 88.61,
+    left: 17.08,
+    bottom: 98.68,
+    right: 26.19,
+  },
+  saintBarthelemy: {
+    top: 74.95,
+    left: 44.81,
+    bottom: 82.74,
+    right: 57.58,
+  },
+  saintMartin: {
+    top: 74.78,
+    left: 23.12,
+    bottom: 82.92,
+    right: 36.08,
+  },
+  wallisEtFutuna: {
+    top: 74.95,
+    left: 0,
+    bottom: 79.50,
+    right: 7.58,
+  },
+  polynesieFrancaise: {
+    top: 90.19,
+    left: 85.12,
+    bottom: 97.02,
+    right: 100,
+  },
+  nouvelleCaledonie: {
+    top: 73.73,
+    left: 66.21,
+    bottom: 83.80,
+    right: 81.09,
+  },
+};
 
+const projectsIcons = document.querySelectorAll('#projects_icons > svg');
+for (let icon of projectsIcons) {
+  icon.addEventListener('mouseenter', function() {
+    console.log("mouse over");
+    displayPopup(icon);
+  });
+  icon.addEventListener('mouseleave', function() {
+    console.log("mouse out");
 
-// Fonction pour afficher le popup
+    hidePopup();
-function showPopup(content, x, y, isLeftHalf) {
+  });
-    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
-    if (isSitePage) return;
-
-    popupContent.innerHTML = content;
-
-
-    // Afficher le popup et le fond de modal
-    popup.style.display = 'block';
-    modalBackground.style.display = 'block';
-
 }
 
-// Fonction pour fermer le popup
+function placeProjectsIcons(projectsIcons) {
-function closePopup() {
+  const container = document.querySelector('#map_base');
+  const containerWidth = container.getBoundingClientRect().width;
+  const containerHeight = container.getBoundingClientRect().height;
+
+  projectsIcons.forEach(icon => {
+    const iconWidth = icon.getBoundingClientRect().width;
+    const lat = parseFloat(icon.dataset.geofieldlat);
+    const lon = parseFloat(icon.dataset.geofieldlon);
+
+    const territory = findTerritory(lat, lon);
+
+    if (territory && localisationMapPlacements[territory]) {
+      const territoryBounds = localisationMapPlacements[territory];
+      const territoryCoords = franceCoordinates[territory];
+
+      const xPercentage = ((lon - territoryCoords.lonLeft) / (territoryCoords.lonRight - territoryCoords.lonLeft)) * 100;
+      const yPercentage = ((territoryCoords.latTop - lat) / (territoryCoords.latTop - territoryCoords.latBottom)) * 100;
+
+      const finalX = containerWidth * (territoryBounds.left / 100 + (xPercentage / 100) * (territoryBounds.right - territoryBounds.left) / 100) - iconWidth / 2;
+      const finalY = containerHeight * (territoryBounds.top / 100 + (yPercentage / 100) * (territoryBounds.bottom - territoryBounds.top) / 100) - iconWidth / 2;
+
+      icon.setAttribute('transform', `translate(${finalX}, ${finalY})`);
+    } else {
+      console.warn(`Territory not found for lat: ${lat}, lon: ${lon}`);
+    }
+  });
+}
+
+function findTerritory(lat, lon) {
+  for (const [territory, coords] of Object.entries(franceCoordinates)) {
+    if (
+      lat <= Math.max(coords.latTop, coords.latBottom) &&
+      lat >= Math.min(coords.latTop, coords.latBottom) &&
+      lon >= Math.min(coords.lonLeft, coords.lonRight) &&
+      lon <= Math.max(coords.lonLeft, coords.lonRight)
+    ) {
+      return territory;
+    }
+  }
+  return "Unknown territory";
+}
+
+function displayPopup(icon) {
+  const container = document.querySelector('#sites-map-container');
+
+  const x = icon.getBoundingClientRect().left - container.getBoundingClientRect().left;
+  const y = icon.getBoundingClientRect().top - container.getBoundingClientRect().top;
+
+  const popup = document.querySelector('#sites-map-container #popup');
+
+  popup.querySelector('h3').innerText = icon.dataset.title;
+  popup.querySelector('p').innerText = icon.dataset.place;
+
+
+  popup.style.top = 0;
+  popup.style.left = 0;
+
+  popup.style.display = 'block';
+
+  popup.style.left = `${x - popup.getBoundingClientRect().width / 2 + icon.getBoundingClientRect().width / 2}px`;
+  popup.style.top = `${y - popup.getBoundingClientRect().height - icon.getBoundingClientRect().height}px`;
+  setTimeout(() => {
+    popup.style.opacity = 1;
+  }, 10);
+}
+
+function hidePopup(){
+  const popup = document.querySelector('#sites-map-container #popup');
+
+  popup.style.opacity = 0;
+  setTimeout(() => {
     popup.style.display = 'none';
-    modalBackground.style.display = 'none'; // Désactiver le fond modal
+  }, 300);
 }
 
-// Gérer le survol des cercles (au lieu du clic)
+placeProjectsIcons(projectsIcons);
-svgElement.addEventListener('mouseover', function(event) {
-    if (event.target.classList.contains('site-link')) {
-        const content = event.target.getAttribute('data-content');
-
-        // 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
-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);
-    }
-});
-
-
-///////////////////// page site point rouge  quand sur page ///////////////////////
-
-// Récupérer l'ID de la page depuis la classe du body
-const body = document.querySelector('body');
-const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
-
-// Sélectionner le groupe SVG qui a l'ID correspondant
-const matchingGroup = document.querySelector(`#site-${pageId}`);
-
-// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
-if (matchingGroup) {
-    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
-    if (circle) {
-        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
-    }
-}
-
-
 
+window.addEventListener('resize', placeProjectsIcons(projectsIcons));

web/modules/custom/erable_mod/assets/js/carte-interactive.js.old

@@ -0,0 +1,115 @@
+// // 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');
+
+// Vérifiez si la page contient la classe '.node-type-site'
+const isSitePage = document.body.classList.contains('node-type-site');
+console.log(isSitePage);
+
+
+
+// Fonction pour afficher le popup
+function showPopup(content, x, y, isLeftHalf) {
+    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
+    if (isSitePage) return;
+
+    popupContent.innerHTML = content;
+
+
+    // Afficher le popup et le fond de modal
+    popup.style.display = 'block';
+    modalBackground.style.display = 'block';
+
+}
+
+// Fonction pour fermer le popup
+function closePopup() {
+    popup.style.display = 'none';
+    modalBackground.style.display = 'none'; // Désactiver le fond modal
+}
+
+// Gérer le survol des cercles (au lieu du clic)
+svgElement.addEventListener('mouseover', function(event) {
+    if (event.target.classList.contains('site-link')) {
+        const content = event.target.getAttribute('data-content');
+
+        // 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
+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);
+    }
+});
+
+
+///////////////////// page site point rouge  quand sur page ///////////////////////
+
+// Récupérer l'ID de la page depuis la classe du body
+const body = document.querySelector('body');
+const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
+
+// Sélectionner le groupe SVG qui a l'ID correspondant
+const matchingGroup = document.querySelector(`#site-${pageId}`);
+
+// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
+if (matchingGroup) {
+    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
+    if (circle) {
+        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
+    }
+}

web/modules/custom/erable_mod/assets/svg/feuille.svg

@@ -0,0 +1,25 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="2933 3781 107.091 110.044"
+  fill="none"
+  id="projet-$index"
+  data-geofieldlon="$lon"
+  data-geofieldlat="$lat"
+  data-title="$title"
+  data-place="$place"
+  >
+  <a href="$href">
+    <path
+      d="M2948.852 3798.42c-3.606 3.667-2.847 11.102-1.479 17.824 1.619 7.951 5.315 16.118 12.339 24.491 3.456 4.205 9.513 6.379 14.08 9.238-10.249-1.658-21.843 3.107-29.852 9.438-5.7 4.488-11.197 10.188-10.931 15.125.261 4.757 5.974 8.041 11.591 10.646 7.669 3.555 17.089 5.343 29.989 3.293 18.866-3.004 36.608-14.662 40.31-24.59 0 0 16.971 18.409 13.637 26.71 1.459.976 4.253.403 4.516-2.138.92-8.85-15.986-26.562-15.986-26.562 10.111-3.235 19.484-19.744 22.323-39.307 2.031-14.005-.579-24.218-4.883-31.774-2.606-4.576-5.279-9.628-9.507-9.809-4.109-.171-9.189 4.422-13.021 8.545-5.631 6.058-10.313 13.829-12.151 25.629-.431 2.766-.094 7.971-.201 8.514-1.077-3.802-.253-6.156-5.417-12.196-9.426-8.649-18.53-12.964-27.384-14.735-6.814-1.364-14.321-2.055-17.973 1.658Z"
+      style="
+        cursor: pointer;
+        fill-rule: evenodd;
+        stroke: none;
+        fill: rgb(3, 135, 136);
+        fill-opacity: 1;
+      "
+      class="fills"/>
+  </a>
+</svg>

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

@@ -16,7 +16,7 @@ use Drupal\Core\Render\Markup;
  * )
  */
 class SitesMap extends BlockBase {
- 
+
   /**
    * {@inheritdoc}
    */
@@ -25,67 +25,33 @@ class SitesMap extends BlockBase {
 
     $allSites = \Drupal::entityTypeManager()->getStorage('node')
           ->loadByProperties(['type' => 'projet', 'status' => 1]);
-  
+
     $sites_paths = "";
 
-    $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)
-    $lonLeft = -6.0;
-    $latBottom = 40.0; // Sud-Est (coin inférieur droit)
-    $lonRight = 11.0;
-
-
     foreach($allSites as $index => $site){
       $title = $site->get('title')->getString();
       $subtitle = $site->get('field_sous_titre')->getString();
+      $place = $site->get('field_localisation_textuel')->getString();
 
       $link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
       $site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
-      $link = $site_link_object->toString()->getGeneratedLink();
+      // $link = $site_link_object->toString()->getGeneratedLink();
+      $href = $site_link_object->getUrl()->toString();
 
-      $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
+      // $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
 
       $geofield = $site->get('field_carte')->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);
+      $svg_template_path = DRUPAL_ROOT . '/modules/custom/erable_mod/assets/svg/feuille.svg';
-      $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
+      $svg_template= file_get_contents($svg_template_path);
-
+      $sites_paths .= str_replace(
-      $r = 10;
+        ['$index', '$lon', '$lat', '$href', '$title', '$place'],
-      $m = -$r+4;
+        [$index, $lon, $lat, $href, $title, $place],
-      $l = $r*2-7;
+        $svg_template
-      $sites_paths .= <<<SVGSITEPATH
+      );
-      <g 
-        id="projet-$index"
-        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-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;
     }
-    
 
     $return = [
       '#cache' => [
@@ -94,8 +60,6 @@ class SitesMap extends BlockBase {
       'svg_mapsites' => [
         '#theme' => 'svg_mapsites',
         '#sites' => $sites_paths,
-        '#vpw' => $vp_w,
-        '#vph' => $vp_h,
         '#attached' => [
           'library' => [
             'erable_mod/sites_map_block',
@@ -112,4 +76,4 @@ class SitesMap extends BlockBase {
   public function getCacheMaxAge() {
     return 0;
   }
-}
+}

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

@@ -2,51 +2,13 @@
   {# <svg {{ svg_attributes }}>
     <path {{ path_attributes }}></path>
   </svg> #}
-  <svg
+  <img id="map_base" src="/modules/custom/erable_mod/assets/svg/carte.svg" alt="fond de carte des territoires Français métropolitains et ultramarins">
-      width="100%"
+  <div id="projects_icons">
-      height="auto"
+    {{ sites|raw }}
-      viewBox="0 0 {{ vpw }} {{ vph }}"
+  </div>
-      version="1.1"
-      id="svg1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:svg="http://www.w3.org/2000/svg">
 
-      <g
+  <div id="popup">
-        id="layer1"
+    <h3>Titre</h3>
-        width="auto"
+    <p>Localisation</p>
-      height="100%"
+  </div>
-              transform="
+</div>
-          translate(-34,-43)
-          scale(3 3)"
-        > 
-        <g
-          id="g87"
-          transform="matrix(0.26458333,0,0,0.26458333,-117.12499,-462.76799)"
-          >
-          <path
-            d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
-            style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-            transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
-            id="path86" />
-          <path
-            d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
-            style="fill:#11ff77;fill-opacity:1;fill-rule:nonzero;stroke:none"
-            transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
-            id="path87" />
-        </g>
-      </g>
-      <g
-        id="layer2">
-          {{ sites|raw }}
-      </g>
-    </svg>
-
-    <!-- Fond du modal -->
-    <div id="modal-background" class="modal-background"></div>
-
-    <!-- Popup -->
-    <div id="popup" class="popup">
-      <p id="popup-content">Hello! I am a popup!</p>
-      <!--<button onclick="closePopup()">Close</button>-->
-    </div>
-</div>

web/themes/erabletheme/css/styles.css

@@ -58,10 +58,6 @@ a {
         margin-top: calc(10vh + 3rem);
     }
 } */
-body {
-  overflow-x: hidden;
-}
-
 .layout-container {
   margin: 0 !important;
 }
@@ -78,6 +74,9 @@ em {
   display: none;
 }
 
+/* * {
+  border: solid 1px red !important;
+} */
 /* PARTIALS */
 body.toolbar-tray-open header[role=banner] {
   left: 15rem !important;
@@ -352,7 +351,7 @@ body.toolbar-fixed header[role=banner] {
 }
 .layout-container #block-erabletheme-navigationprincipale {
   background: linear-gradient(to bottom, white, transparent);
-  width: 100vw;
+  width: 100%;
   display: none;
   position: absolute;
   padding-top: 1rem;
@@ -423,10 +422,9 @@ body.toolbar-fixed header[role=banner] {
 }
 
 .layout-container > footer {
-  width: 100vw;
+  width: 100%;
   background-color: white;
   z-index: 99;
-  box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
   margin-top: 50px;
   padding: 0 3vw;
 }
@@ -524,11 +522,13 @@ body.toolbar-fixed header[role=banner] {
 .layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext {
   display: none;
 }
+.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li:last-of-type {
+  margin-left: 25px;
+}
 @media (min-width: 760px) {
   .layout-container > footer #footer_middle #footer_section #footer_right {
-    width: 25vw;
+    width: auto;
-    padding-left: 15vw;
+    margin-right: 25px;
-    padding-right: 3vw;
   }
 }
 @media (min-width: 760px) {
@@ -542,54 +542,60 @@ body.toolbar-fixed header[role=banner] {
   }
 }
 
-.slick-container {
+@media screen and (min-width: 760px) {
+  .carousel_container {
+    width: 100%;
+    overflow-x: hidden;
+  }
+}
+.carousel_container .slick-container {
   width: 100%;
   margin-bottom: 5rem;
 }
 @media screen and (min-width: 760px) {
-  .slick-container {
+  .carousel_container .slick-container {
     width: 200vw;
     transform: translateX(-50vw);
   }
 }
-.slick-container div.views-row {
+.carousel_container .slick-container div.views-row {
   padding: 0 3vw;
 }
 @media screen and (min-width: 760px) {
-  .slick-container div.views-row {
+  .carousel_container .slick-container div.views-row {
     padding: 0 6vw;
   }
 }
-.slick-container div.views-row > article {
+.carousel_container .slick-container div.views-row > article {
   width: 100%;
 }
-.slick-container div.views-row > article > div:first-of-type {
+.carousel_container .slick-container div.views-row > article > div:first-of-type {
   overflow-y: hidden;
   padding: 0 !important;
   display: flex;
   align-items: center;
 }
-.slick-container div.views-row > article > div:first-of-type > div {
+.carousel_container .slick-container div.views-row > article > div:first-of-type > div {
   width: 100%;
 }
-.slick-container div.views-row > article > div:first-of-type > div > a {
+.carousel_container .slick-container div.views-row > article > div:first-of-type > div > a {
   max-width: 100%;
 }
-.slick-container div.views-row > article > div:first-of-type > div > a img {
+.carousel_container .slick-container div.views-row > article > div:first-of-type > div > a img {
   width: 100%;
   height: auto;
 }
 @media (min-width: 760px) {
-  .slick-container div.views-row > article .preview_meta {
+  .carousel_container .slick-container div.views-row > article .preview_meta {
     margin-left: 0;
     margin-right: 0;
   }
-  .slick-container div.views-row > article h2, .slick-container div.views-row > article .preview_sous_titre {
+  .carousel_container .slick-container div.views-row > article h2, .carousel_container .slick-container div.views-row > article .preview_sous_titre {
     padding-left: 0;
     padding-right: 0;
   }
 }
-.slick-container .slick-arrow {
+.carousel_container .slick-container .slick-arrow {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 1.5rem;
@@ -599,19 +605,19 @@ body.toolbar-fixed header[role=banner] {
   bottom: calc(-25px - 4rem);
 }
 @media (min-width: 760px) {
-  .slick-container .slick-arrow {
+  .carousel_container .slick-container .slick-arrow {
     width: 2rem;
     height: 2rem;
     bottom: calc(-25px - 6rem);
   }
 }
-.slick-container .slick-arrow:hover {
+.carousel_container .slick-container .slick-arrow:hover {
   background-color: white !important;
 }
-.slick-container .slick-arrow:hover::before {
+.carousel_container .slick-container .slick-arrow:hover::before {
   color: #038788;
 }
-.slick-container .slick-arrow::before {
+.carousel_container .slick-container .slick-arrow::before {
   opacity: 1 !important;
   color: white;
   font-weight: bold;
@@ -620,57 +626,57 @@ body.toolbar-fixed header[role=banner] {
   font-size: 0.8rem !important;
 }
 @media (min-width: 760px) {
-  .slick-container .slick-arrow::before {
+  .carousel_container .slick-container .slick-arrow::before {
     font-size: 1.2rem !important;
   }
 }
-.slick-container .slick-prev {
+.carousel_container .slick-container .slick-prev {
   left: 20vw;
 }
-@media (min-width: 1080px) {
+@media (min-width: 760px) {
-  .slick-container .slick-prev {
+  .carousel_container .slick-container .slick-prev {
     left: 85vw;
   }
 }
-.slick-container .slick-next {
+.carousel_container .slick-container .slick-next {
   right: 20vw;
 }
-@media (min-width: 1080px) {
+@media (min-width: 760px) {
-  .slick-container .slick-next {
+  .carousel_container .slick-container .slick-next {
     right: 85vw;
   }
 }
-.slick-container > div > div > div:first-of-type {
+.carousel_container .slick-container > div > div > div:first-of-type {
   z-index: 2;
   position: relative;
   margin-bottom: 4rem;
 }
 @media (min-width: 760px) {
-  .slick-container > div > div > div:first-of-type {
+  .carousel_container .slick-container > div > div > div:first-of-type {
     margin-bottom: 6rem;
   }
 }
-.slick-container #carousel_dots {
+.carousel_container .slick-container #carousel_dots {
   z-index: 1;
   position: relative;
   margin-top: -15px;
 }
-.slick-container #carousel_dots ul {
+.carousel_container .slick-container #carousel_dots ul {
   position: relative;
   bottom: 0;
 }
-.slick-container #carousel_dots ul li.slick-active button::before {
+.carousel_container .slick-container #carousel_dots ul li.slick-active button::before {
   color: #038788;
 }
-.slick-container #carousel_dots ul li button::before {
+.carousel_container .slick-container #carousel_dots ul li button::before {
   color: rgb(0.9, 0.9, 0.9);
 }
-.slick-container footer {
+.carousel_container .slick-container footer {
   text-align: center;
   margin-top: 4rem;
   margin-bottom: 4rem;
 }
-.slick-container footer a {
+.carousel_container .slick-container footer a {
   text-align: center;
   color: black;
   font-family: "Marianne", sans-serif;
@@ -681,10 +687,10 @@ body.toolbar-fixed header[role=banner] {
   padding: 9px 18px;
   transition: background-color 0.3s ease;
 }
-.slick-container footer a svg {
+.carousel_container .slick-container footer a svg {
   display: none;
 }
-.slick-container footer a:hover {
+.carousel_container .slick-container footer a:hover {
   background-color: #00ff80;
 }
 
@@ -740,11 +746,11 @@ body.toolbar-fixed header[role=banner] {
   margin-bottom: 1rem;
 }
 .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
+  margin-bottom: 1rem;
   font-family: "Marianne", sans-serif;
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
-  margin-bottom: 1rem;
 }
 @media (min-width: 760px) {
   .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
@@ -844,13 +850,13 @@ body.toolbar-fixed header[role=banner] {
   }
 }
 .views-row article.actu-teaser h2 {
+  margin-bottom: 0.5rem;
   font-family: "Barlow Condensed", sans-serif;
   font-size: 1.2rem;
   padding: 0 3vw;
   margin-top: 1rem;
   color: #038788;
   text-transform: uppercase;
-  margin-bottom: 0.5rem;
 }
 .views-row article.actu-teaser h2 a {
   color: #038788;
@@ -1046,18 +1052,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 
 .home_consultation {
   position: relative;
-  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
   width: 100%;
   padding: 4rem 0;
+  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
 }
 .home_consultation h2 {
+  margin-bottom: 1.2rem;
   font-family: "Barlow Condensed", sans-serif;
   font-size: 1.2rem;
   padding: 0 3vw;
   margin-top: 1rem;
   color: #038788;
   text-transform: uppercase;
-  margin-bottom: 1.2rem;
 }
 .home_consultation h2 a {
   color: #038788;
@@ -1144,6 +1150,23 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   }
 }
 
+#sites-map-container #popup h3 {
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  color: #038788;
+  font-weight: 800;
+}
+@media (min-width: 760px) {
+  #sites-map-container #popup h3 {
+    font-size: 1.2rem;
+  }
+}
+#sites-map-container #popup p {
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
 .fullpage {
   margin-bottom: 10vh;
   margin-top: -3vh;
@@ -1152,12 +1175,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   position: relative;
 }
 .fullpage > h2 {
-  font-family: "Barlow Condensed", sans-serif;
-  font-size: 1.2rem;
-  padding: 0 3vw;
-  margin-top: 1rem;
-  color: #038788;
-  text-transform: uppercase;
   margin-top: 5vh;
   margin-bottom: 7vh;
   background-color: #fcf9ee;
@@ -1165,6 +1182,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   position: relative;
   width: auto;
   display: inline-block;
+  font-family: "Barlow Condensed", sans-serif;
+  font-size: 1.2rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  color: #038788;
+  text-transform: uppercase;
 }
 .fullpage > h2 a {
   color: #038788;
@@ -1185,12 +1208,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   color: #314e41;
 }
 .fullpage .fullpage_content > h2 {
-  font-family: "Barlow Condensed", sans-serif;
-  font-size: 1.2rem;
-  padding: 0 3vw;
-  margin-top: 1rem;
-  color: #038788;
-  text-transform: uppercase;
   margin-top: 5vh;
   margin-bottom: 1rem;
   background-color: #fcf9ee;
@@ -1198,6 +1215,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   position: relative;
   width: auto;
   display: inline-block;
+  font-family: "Barlow Condensed", sans-serif;
+  font-size: 1.2rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  color: #038788;
+  text-transform: uppercase;
 }
 .fullpage .fullpage_content > h2 a {
   color: #038788;
@@ -1213,18 +1236,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   }
 }
 .fullpage .fullpage_content .sous_titre {
-  font-family: "Marianne", sans-serif;
-  font-size: 1rem;
-  line-height: 1.4;
   font-size: 1.2rem;
   padding: 0 3vw;
-}
-.fullpage .fullpage_content p {
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
+}
+.fullpage .fullpage_content p {
   padding: 0 3vw;
   margin-bottom: 2rem;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
 }
 .fullpage .fullpage_content p:first-of-type {
   margin-top: 7vh;
@@ -1273,12 +1296,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   display: none;
 }
 .fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
+  margin-bottom: 1rem;
+  padding-left: 3vw;
   font-family: "Marianne", sans-serif;
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
-  margin-bottom: 1rem;
-  padding-left: 3vw;
 }
 @media (min-width: 760px) {
   .fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
@@ -1335,12 +1358,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 }
 .paragraph--type--membre-equipe > div:nth-of-type(2),
 .paragraph--type--membre-equipe > div:nth-of-type(3) {
+  margin-bottom: 2vh;
+  align-self: flex-end;
   font-family: "Marianne", sans-serif;
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
-  margin-bottom: 2vh;
-  align-self: flex-end;
 }
 @media (min-width: 760px) {
   .paragraph--type--membre-equipe > div:nth-of-type(2),
@@ -1352,10 +1375,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   padding-left: 0.5rem;
 }
 .paragraph--type--membre-equipe > div:last-of-type {
+  grid-column: 2/4;
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
-  grid-column: 2/4;
 }
 @media (min-width: 760px) {
   .paragraph--type--membre-equipe {
@@ -1384,10 +1407,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   font-size: 1.6rem;
 }
 .content_gouvernance .views-row article > h2 + div > div {
+  margin-bottom: 2em;
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
-  margin-bottom: 2em;
 }
 .content_gouvernance .views-row article > div:first-of-type {
   height: unset;
@@ -1666,10 +1689,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   background-color: white;
 }
 .fullpage.meetup > .meetup_list > .views-row > a > article > p, .fullpage.meetup > .meetup_list > .views-row > a > article > a, .fullpage.meetup > .meetup_list > .views-row > a > article > div, .fullpage.meetup > .meetup_list > .views-row > a > article > a > h2, .fullpage.meetup > .meetup_list > .views-row > article > p, .fullpage.meetup > .meetup_list > .views-row > article > a, .fullpage.meetup > .meetup_list > .views-row > article > div, .fullpage.meetup > .meetup_list > .views-row > article > a > h2 {
+  padding: 0.2rem 0;
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
-  padding: 0.2rem 0;
 }
 .fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]), .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) {
   grid-column: 1;
@@ -1737,33 +1760,33 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   display: none !important;
 }
 .fullpage.meetup > .views-exposed-form {
+  display: flex;
+  margin-left: 3vw;
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
-  display: flex;
-  margin-left: 3vw;
 }
 .fullpage.meetup > .views-exposed-form > div {
   width: auto;
 }
 .fullpage.meetup > .views-exposed-form > div > select {
+  font-size: 0.8rem;
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
-  font-size: 0.8rem;
 }
 .fullpage.meetup > .views-exposed-form > div:last-of-type {
   margin-left: 1rem;
 }
 .fullpage.meetup > .views-exposed-form > div:last-of-type > input {
-  font-family: "Marianne", sans-serif;
-  font-size: 1rem;
-  line-height: 1.4;
   font-size: 0.8rem;
   background-color: #038788;
   color: white;
   cursor: pointer;
   border: none;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
 }
 .fullpage.meetup .ornements_top_over {
   top: -15vh;
@@ -1787,14 +1810,14 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   color: #038788;
 }
 .fullpage.meetup-offre > h2 {
+  margin-bottom: 3vh;
+  width: auto;
   font-family: "Barlow Condensed", sans-serif;
   font-size: 1.2rem;
   padding: 0 3vw;
   margin-top: 1rem;
   color: #038788;
   text-transform: uppercase;
-  margin-bottom: 3vh;
-  width: auto;
 }
 .fullpage.meetup-offre > h2 a {
   color: #038788;

web/themes/erabletheme/scss/_fullpage.scss

@@ -5,17 +5,17 @@
     @include beige_gradient();
     position: relative;
     > h2 {
-        @include main_title();
+      margin-top: 5vh;
-        margin-top: 5vh;
+      margin-bottom: 7vh;
-        margin-bottom: 7vh;
+      background-color: $beige;
-        background-color: $beige;
+      z-index: 1;
-        z-index: 1;
+      position: relative;
-        position: relative;
+      width: auto;
-        width: auto;
+      display: inline-block;
-        display: inline-block;
+      @include main_title();
-        @media (min-width: $breakpoint_tablet) {
+      @media (min-width: $breakpoint_tablet) {
-            background-color: unset;
+          background-color: unset;
-        }
+      }
     }
 
     .legende {
@@ -26,29 +26,29 @@
 
     .fullpage_content {
         > h2 {
-            @include main_title();
+          margin-top: 5vh;
-            margin-top: 5vh;
+          margin-bottom: 1rem;
-            margin-bottom: 1rem;
+          background-color: $beige;
-            background-color: $beige;
+          z-index: 1;
-            z-index: 1;
+          position: relative;
-            position: relative;
+          width: auto;
-            width: auto;
+          display: inline-block;
-            display: inline-block;
+          @include main_title();
-            @media (min-width: $breakpoint_tablet) {
+          @media (min-width: $breakpoint_tablet) {
-                background-color: unset;
+              background-color: unset;
-            }
+          }
         }
 
         .sous_titre {
-            @include main_text_content();
+          font-size: $l_font_size;
-            font-size: $l_font_size;
+          padding: 0 $x_margin;
-            padding: 0 $x_margin;
+          @include main_text_content();
         }
 
         p {
-            @include main_text_content();
+          padding: 0 $x_margin;
-            padding: 0 $x_margin;
+          margin-bottom: 2rem;
-            margin-bottom: 2rem;
+          @include main_text_content();
         }
 
         p:first-of-type {
@@ -57,26 +57,26 @@
 
 
         .liens_fixed > div > div, .file_fixed > div > div {
-            padding: 0 calc($x_margin / 2);
+          padding: 0 calc($x_margin / 2);
-            text-align: right;
+          text-align: right;
-            margin: 2rem 0;
+          margin: 2rem 0;
-            @include fluo_button();
+          @include fluo_button();
+          a {
+            display: inline-block;
+          }
+          @media (min-width: $breakpoint_desktop) {
+            margin-bottom: 0 !important;
+            margin: 0;
+            position: fixed;
+            left: 75vw;
+            bottom: 10vh;
+            > div {
+              height: 3vh;
+            }
             a {
-                display: inline-block;
+              max-width: calc(25vw - $x_margin * 2);
-            }
-            @media (min-width: $breakpoint_desktop) {
-                margin-bottom: 0 !important;
-                margin: 0;
-                position: fixed;
-                left: 75vw;
-                bottom: 10vh;
-                > div {
-                    height: 3vh;
-                }
-                a {
-                    max-width: calc(25vw - $x_margin * 2);
-                }
             }
+          }
         }
         .file_fixed span:last-of-type {
           display: none;
@@ -84,9 +84,9 @@
 
 
         h3, h4, h5, h6 {
-            @include sous_titre();
+          margin-bottom: 1rem;
-            margin-bottom: 1rem;
+          padding-left: $x_margin;
-            padding-left: $x_margin;
+          @include sous_titre();
         }
     }
 

web/themes/erabletheme/scss/_gouvernance.scss

@@ -20,12 +20,12 @@
             }
         }
     }
-    
+
     > div:nth-of-type(2),
     > div:nth-of-type(3) {
-        @include sous_titre();
+      margin-bottom: 2vh;
-        margin-bottom: 2vh;
+      align-self: flex-end;
-        align-self: flex-end;
+      @include sous_titre();
     }
 
     > div:nth-of-type(3) {
@@ -33,8 +33,8 @@
     }
 
     > div:last-of-type {
-        @include main_text_content();
+      grid-column: 2 / 4;
-        grid-column: 2 / 4;
+      @include main_text_content();
     }
     @media (min-width: $breakpoint_tablet) {
         grid-template-columns: 10vw auto 1fr;
@@ -60,19 +60,19 @@
         margin-bottom: 2vh;
         article {
             > h2 {
-                margin-bottom: 2vh;
+              margin-bottom: 2vh;
-                @include sous_titre_alt();
+              @include sous_titre_alt();
             }
             > h2 + div > div {
-                @include main_text_content();
+              margin-bottom: 2em;
-                margin-bottom: 2em;
+              @include main_text_content();
             }
             > div:first-of-type {
                 height: unset;
                 flex-direction: column;
-            }           
+            }
         }
     }
 
 
-}
+}

web/themes/erabletheme/scss/_home.scss

@@ -42,12 +42,12 @@
     }
   }
   div.more-link {
-    @include fluo_button();
     margin-top: 3rem;
     margin-bottom: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
+    @include fluo_button();
     @media (min-width: $breakpoint_tablet) {
       position: absolute;
       left:0;
@@ -69,19 +69,19 @@
 // plus sur l'accueil
 .home_consultation {
     position: relative;
-    @include beige_gradient();
     width: 100%;
     padding: 4rem 0;
+    @include beige_gradient();
     h2 {
-        @include main_title();
+      margin-bottom: 1.2rem;
-        margin-bottom: 1.2rem;
+      @include main_title();
-        @media (min-width: $breakpoint_tablet) {
+      @media (min-width: $breakpoint_tablet) {
-            padding-left: 0 !important;
+          padding-left: 0 !important;
-        }
+      }
-        @media (min-width: $breakpoint_desktop) {
+      @media (min-width: $breakpoint_desktop) {
-            margin-left: 12.5vw;
+          margin-left: 12.5vw;
-            max-width: 50vw;
+          max-width: 50vw;
-        }
+      }
     }
     h2 + div {
         h2, h3, h4 {
@@ -121,3 +121,14 @@
         padding-right: 12.5vw;
     }
 }
+
+#sites-map-container {
+  #popup {
+    h3 {
+      @include sous_titre();
+    }
+    p {
+      @include main_text_content();
+    }
+  }
+}

web/themes/erabletheme/scss/_meetup.scss

@@ -108,8 +108,8 @@
                 grid-template-rows: repeat(6, auto);
                 background-color: white;
                 > p, > a, > div, > a > h2 {
-                    @include main_text_content();
+                  padding: 0.2rem 0;
-                    padding: 0.2rem 0;
+                  @include main_text_content();
                 }
                 > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) {
                     grid-column: 1;
@@ -182,25 +182,25 @@
         }
     }
     > .views-exposed-form {
-        @include main_text_content();
+      display: flex;
-        display: flex;
+      margin-left: $x_margin;
-        margin-left: $x_margin;
+      @include main_text_content();
-        > div {
+      > div {
-            width: auto;
+          width: auto;
-            > select {
+          > select {
-                @include main_text_content();
+            font-size: 0.8rem;
-                font-size: 0.8rem;
+            @include main_text_content();
-            }
+          }
         }
         > div:last-of-type {
             margin-left: 1rem;
             > input {
-                @include main_text_content();
+              font-size: 0.8rem;
-                font-size: 0.8rem;
+              background-color: $teal;
-                background-color: $teal;
+              color: white;
-                color: white;
+              cursor: pointer;
-                cursor: pointer;
+              border: none;
-                border: none;
+              @include main_text_content();
             }
         }
     }
@@ -226,9 +226,9 @@
         }
     }
     > h2 {
-        @include main_title();
+      margin-bottom: 3vh;
-        margin-bottom: 3vh;
+      width: auto;
-        width: auto;
+      @include main_title();
     }
     > .offre-content {
         > div {

web/themes/erabletheme/scss/_partenaires.scss

@@ -30,13 +30,13 @@
                         }
                     }
                 }
-                
+
                 > div:nth-of-type(2) {
                     @include main_text_content();
                     margin-bottom: 2rem;
                     padding-left: $x_margin;
                 }
-    
+
                 > div:last-of-type {
                     grid-column: 1 / 3;
                     width: 100%;
@@ -49,4 +49,4 @@
             }
         }
     }
-}
+}

web/themes/erabletheme/scss/global/_global.scss

@@ -6,10 +6,6 @@
     }
 } */
 
-body {
-    overflow-x: hidden;
-}
-
 .layout-container {
     margin: 0 !important;
 }
@@ -25,3 +21,8 @@ em {
 #block-erabletheme-titredepage {
     display: none;
 }
+
+// debug
+/* * {
+  border: solid 1px red !important;
+} */

web/themes/erabletheme/scss/global/variables/_typography.scss

@@ -9,58 +9,58 @@ $title_size: 2.3rem;
 /* MIXINS */
 
 @mixin main_title() {
-    font-family: "Barlow Condensed", sans-serif;
+  font-family: "Barlow Condensed", sans-serif;
-    font-size: $l_font_size;
+  font-size: $l_font_size;
-    padding: 0 $x_margin;
+  padding: 0 $x_margin;
-    margin-top: 1rem;
+  margin-top: 1rem;
-    color: $teal;
+  color: $teal;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    a {
+  a {
-        color: $teal;
+      color: $teal;
-    }
+  }
-    @media (min-width: $breakpoint_tablet) {
+  @media (min-width: $breakpoint_tablet) {
-      font-size: $title_size;
+    font-size: $title_size;
-    }
+  }
 }
 
 @mixin main_text_content() {
-    font-family: "Marianne", sans-serif;
+  font-family: "Marianne", sans-serif;
-    font-size: $main_font_size;
+  font-size: $main_font_size;
-    line-height: 1.4;
+  line-height: 1.4;
 }
 
 @mixin sous_titre() {
-    font-family: "Marianne", sans-serif;
+  font-family: "Marianne", sans-serif;
-    font-size: $m_font_size;
+  font-size: $m_font_size;
-    color: $teal;
+  color: $teal;
-    font-weight: 800;
+  font-weight: 800;
-    @media (min-width: $breakpoint_tablet) {
+  @media (min-width: $breakpoint_tablet) {
-      font-size: $l_font_size;
+    font-size: $l_font_size;
-    }
+  }
 }
 
 @mixin sous_titre_alt() {
-    font-family: "Barlow", sans-serif;
+  font-family: "Barlow", sans-serif;
-    color: black;
+  color: black;
-    font-size: $xl_font_size;
+  font-size: $xl_font_size;
 }
 
 @mixin fluo_button() {
-    a {
+  a {
-        text-align: center;
+    text-align: center;
-        color: black;
+    color: black;
-        font-family: "Marianne", sans-serif;
+    font-family: "Marianne", sans-serif;
-        font-weight: 800;
+    font-weight: 800;
-        font-size: $m_font_size;
+    font-size: $m_font_size;
-        background-color: white;
+    background-color: white;
-        border: solid 2px $fluo_green;
+    border: solid 2px $fluo_green;
-        padding: 9px 18px;
+    padding: 9px 18px;
-        transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease;
-        svg {
+    svg {
-            display: none;
+      display: none;
-        }
-    }
-    a:hover {
-        background-color: $fluo_green;
     }
+  }
+  a:hover {
+    background-color: $fluo_green;
+  }
 }

web/themes/erabletheme/scss/partials/_articles.scss

@@ -54,8 +54,8 @@
     }
 
     h3, h4, h5, h6 {
-        @include sous_titre();
+      margin-bottom: 1rem;
-        margin-bottom: 1rem;
+      @include sous_titre();
     }
 
     .liens_fixed > div > div:nth-of-type(2), .file_fixed > div > div > div {
@@ -83,4 +83,4 @@
     .file_fixed span:last-of-type {
       display: none;
     }
-}
+}

web/themes/erabletheme/scss/partials/_articles_teaser.scss

@@ -48,8 +48,8 @@
         }
 
         h2 {
-            @include main_title();
+          margin-bottom: 0.5rem;
-            margin-bottom: 0.5rem;
+          @include main_title();
         }
     }
 

web/themes/erabletheme/scss/partials/_carousel.scss

@@ -1,115 +1,121 @@
-.slick-container {
+.carousel_container {
+  @media screen and (min-width: $breakpoint_tablet) {
     width: 100%;
-    margin-bottom: 5rem;
+    overflow-x: hidden;
-    @media screen and (min-width: $breakpoint_tablet) {
+  }
-      width: 200vw;
+  .slick-container {
-      transform: translateX(-50vw);
+      width: 100%;
-    }
+      margin-bottom: 5rem;
-    div.views-row {
+      @media screen and (min-width: $breakpoint_tablet) {
-        padding: 0 3vw;
+        width: 200vw;
-        @media screen and (min-width: $breakpoint_tablet) {
+        transform: translateX(-50vw);
-            padding: 0 6vw;
-        }
-      > article {
-        width: 100%;
-        > div:first-of-type { // container du lien image
-            overflow-y: hidden;
-            padding: 0 !important;
-            display: flex;
-            align-items: center;
-            > div {
-                width: 100%;
-                > a {
-                    max-width: 100%;
-                    img {
-                        width: 100%;
-                        height: auto;
-                    }
-                }
-            }
-        }
-        @media (min-width: $breakpoint_tablet) {
-            .preview_meta {
-                margin-left: 0;
-                margin-right: 0;
-            }
-            h2, .preview_sous_titre {
-                padding-left: 0;
-                padding-right: 0;
-            }
-        }
       }
-    }
+      div.views-row {
-    .slick-arrow {
+          padding: 0 3vw;
-        width: 1.5rem;
+          @media screen and (min-width: $breakpoint_tablet) {
-        height: 1.5rem;
+              padding: 0 6vw;
-        border-radius: 1.5rem;
+          }
-        background-color: $teal !important;
+        > article {
-        transition: background-color 0.3s ease;
+          width: 100%;
-        top: unset !important;
+          > div:first-of-type { // container du lien image
-        bottom: calc(-25px - 4rem);
+              overflow-y: hidden;
-        @media (min-width: $breakpoint_tablet) {
+              padding: 0 !important;
-          width: 2rem;
+              display: flex;
-          height: 2rem;
+              align-items: center;
-          bottom: calc(-25px - 6rem);
+              > div {
-        }
+                  width: 100%;
-        &:hover {
+                  > a {
-          background-color: white !important;
+                      max-width: 100%;
-          &::before {
+                      img {
-            color: $teal;
+                          width: 100%;
+                          height: auto;
+                      }
+                  }
+              }
           }
-        }
-        &::before {
-          opacity: 1 !important;
-          color: white;
-          font-weight: bold;
-          font-family: 'Marianne', sans-serif;
-          display: block;
-          font-size: $sm_font_size !important;
           @media (min-width: $breakpoint_tablet) {
-            font-size: $l_font_size !important;
+              .preview_meta {
+                  margin-left: 0;
+                  margin-right: 0;
+              }
+              h2, .preview_sous_titre {
+                  padding-left: 0;
+                  padding-right: 0;
+              }
           }
         }
-    }
-    .slick-prev {
-      left: 20vw;
-      @media (min-width: $breakpoint_desktop) {
-        left: calc(50vw + 35vw);
       }
-    }
+      .slick-arrow {
-    .slick-next {
+          width: 1.5rem;
-      right: 20vw;
+          height: 1.5rem;
-      @media (min-width: $breakpoint_desktop) {
+          border-radius: 1.5rem;
-        right: calc(50vw + 35vw);
+          background-color: $teal !important;
-      }
+          transition: background-color 0.3s ease;
-    }
+          top: unset !important;
-    > div > div > div:first-of-type {
+          bottom: calc(-25px - 4rem);
-      z-index: 2;
+          @media (min-width: $breakpoint_tablet) {
-      position: relative;
+            width: 2rem;
-      margin-bottom: 4rem;
+            height: 2rem;
-      @media (min-width: $breakpoint_tablet) {
+            bottom: calc(-25px - 6rem);
-        margin-bottom: 6rem;
+          }
-      }
+          &:hover {
-    }
+            background-color: white !important;
-    #carousel_dots {
+            &::before {
-      z-index: 1;
-      position: relative;
-      margin-top: -15px;
-      ul {
-          position: relative;
-          bottom: 0;
-          li.slick-active button::before{
               color: $teal;
+            }
           }
-          li button::before{
+          &::before {
-              color: rgba(0.9, 0.9, 0.9, 1);
+            opacity: 1 !important;
+            color: white;
+            font-weight: bold;
+            font-family: 'Marianne', sans-serif;
+            display: block;
+            font-size: $sm_font_size !important;
+            @media (min-width: $breakpoint_tablet) {
+              font-size: $l_font_size !important;
+            }
           }
       }
-    }
+      .slick-prev {
-    footer {
+        left: 20vw;
-        @include fluo_button();
+        @media (min-width: $breakpoint_tablet) {
-        text-align: center;
+          left: calc(50vw + 35vw);
-        margin-top: 4rem;
+        }
+      }
+      .slick-next {
+        right: 20vw;
+        @media (min-width: $breakpoint_tablet) {
+          right: calc(50vw + 35vw);
+        }
+      }
+      > div > div > div:first-of-type {
+        z-index: 2;
+        position: relative;
         margin-bottom: 4rem;
-    }
+        @media (min-width: $breakpoint_tablet) {
+          margin-bottom: 6rem;
+        }
+      }
+      #carousel_dots {
+        z-index: 1;
+        position: relative;
+        margin-top: -15px;
+        ul {
+            position: relative;
+            bottom: 0;
+            li.slick-active button::before{
+                color: $teal;
+            }
+            li button::before{
+                color: rgba(0.9, 0.9, 0.9, 1);
+            }
+        }
+      }
+      footer {
+          @include fluo_button();
+          text-align: center;
+          margin-top: 4rem;
+          margin-bottom: 4rem;
+      }
+  }
 }

web/themes/erabletheme/scss/partials/_footer.scss

@@ -1,8 +1,7 @@
 .layout-container > footer {
-    width: 100vw;
+    width: 100%;
     background-color: white;
     z-index: 99;
-    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
     margin-top: 50px;
     padding: 0 $x_margin;
     #footer_middle {
@@ -69,35 +68,39 @@
                     width: auto;
                 }
             }
-            
+
             #footer_right {
                 width: 30%;
                 #block-erabletheme-socialmedialinks-2 ul {
-                    display: flex;
+                  display: flex;
-                    justify-content: space-between;
+                  justify-content: space-between;
-                    li a {
+                  li {
-                        span {
+                    a {
-                            font-weight: lighter;
+                      span {
-                            font-size: 1.4rem;
+                        font-weight: lighter;
-                            width: 2.2rem;
+                        font-size: 1.4rem;
-                            height: 2.2rem;
+                        width: 2.2rem;
-                            padding: 0.4rem;
+                        height: 2.2rem;
-                            border-radius: 1.1rem;
+                        padding: 0.4rem;
-                            color: white;
+                        border-radius: 1.1rem;
-                            background-color: $teal;
+                        color: white;
-                        }
+                        background-color: $teal;
-                        svg.ext {
+                      }
-                            display: none;
+                      svg.ext {
-                        }
+                        display: none;
+                      }
                     }
+                    &:last-of-type {
+                      margin-left: 25px;
+                    }
+                  }
                 }
                 @media (min-width: $breakpoint_tablet) {
-                    width: 25vw;
+                    width: auto;
-                    padding-left: 15vw;
+                    margin-right: 25px;
-                    padding-right: $x_margin;
                 }
             }
-            
+
         }
         @media (min-width: $breakpoint_tablet) {
             display: flex;
@@ -106,4 +109,4 @@
     @media (min-width: $breakpoint_tablet) {
         padding: 0;
     }
-}
+}

web/themes/erabletheme/scss/partials/_header.scss

@@ -262,7 +262,7 @@ body.toolbar-fixed header[role="banner"] {
     }
     #block-erabletheme-navigationprincipale {
       background: linear-gradient(to bottom, white, transparent);
-      width: 100vw;
+      width: 100%;
       display: none;
       position: absolute;
       padding-top: 1rem;

web/themes/erabletheme/templates/block--sitesmap-block.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>