diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index ec9d810..a4cebfa 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -48,6 +48,7 @@ module:
   entity_browser: 0
   entity_browser_enhanced: 0
   entity_reference_revisions: 0
+  erable_mod: 0
   faq: 0
   field: 0
   field_group: 0
diff --git a/config/sync/page_manager.page_variant.home-panels_variant-0.yml b/config/sync/page_manager.page_variant.home-panels_variant-0.yml
index 854900e..1536265 100644
--- a/config/sync/page_manager.page_variant.home-panels_variant-0.yml
+++ b/config/sync/page_manager.page_variant.home-panels_variant-0.yml
@@ -7,6 +7,7 @@ dependencies:
     - views.view.actus
     - views.view.home_blocks
   module:
+    - erable_mod
     - panels
     - views
 id: home-panels_variant-0
@@ -55,6 +56,15 @@ variant_settings:
       region: content
       weight: 1
       uuid: 0e39f25a-d433-49bd-84d4-3e6c11c16c47
+    41595e31-d8d6-4940-a1e5-8687c04af5a5:
+      id: sitesmap_block
+      label: 'Sites map Block'
+      label_display: '0'
+      provider: erable_mod
+      context_mapping: {  }
+      region: content
+      weight: 0
+      uuid: 41595e31-d8d6-4940-a1e5-8687c04af5a5
   page_title: ''
   layout: layout_onecol
   layout_settings:
diff --git a/web/modules/custom/erable_mod/assets/css/carte-interactive.css b/web/modules/custom/erable_mod/assets/css/carte-interactive.css
new file mode 100644
index 0000000..09af117
--- /dev/null
+++ b/web/modules/custom/erable_mod/assets/css/carte-interactive.css
@@ -0,0 +1,98 @@
+@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 */
+  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;
+  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;
+  }
+}
diff --git a/web/modules/custom/erable_mod/assets/css/fonts/Gilroy/gilroy-semibold-webfont.woff b/web/modules/custom/erable_mod/assets/css/fonts/Gilroy/gilroy-semibold-webfont.woff
new file mode 100644
index 0000000..8abd458
Binary files /dev/null and b/web/modules/custom/erable_mod/assets/css/fonts/Gilroy/gilroy-semibold-webfont.woff differ
diff --git a/web/modules/custom/erable_mod/assets/js/carte-interactive.js b/web/modules/custom/erable_mod/assets/js/carte-interactive.js
new file mode 100644
index 0000000..30abdbc
--- /dev/null
+++ b/web/modules/custom/erable_mod/assets/js/carte-interactive.js
@@ -0,0 +1,116 @@
+// // 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');
+
+
+// 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
+    }
+}
+
+
+
diff --git a/web/modules/custom/erable_mod/erable_mod.info.yml b/web/modules/custom/erable_mod/erable_mod.info.yml
new file mode 100644
index 0000000..a73f431
--- /dev/null
+++ b/web/modules/custom/erable_mod/erable_mod.info.yml
@@ -0,0 +1,7 @@
+name: erable_mod
+type: module
+description: Provides additional functionality for the site.
+package: Custom
+core_version_requirement: ^9 || ^10
+dependencies:
+  - drupal:block
\ No newline at end of file
diff --git a/web/modules/custom/erable_mod/erable_mod.libraries.yml b/web/modules/custom/erable_mod/erable_mod.libraries.yml
new file mode 100644
index 0000000..50a42b1
--- /dev/null
+++ b/web/modules/custom/erable_mod/erable_mod.libraries.yml
@@ -0,0 +1,7 @@
+sites_map_block:
+  css:
+    theme:
+      assets/css/fontface.scss: {}
+      assets/css/carte-interactive.css: {}
+  js:
+    assets/js/carte-interactive.js: {}
\ No newline at end of file
diff --git a/web/modules/custom/erable_mod/erable_mod.module b/web/modules/custom/erable_mod/erable_mod.module
new file mode 100644
index 0000000..ee58c18
--- /dev/null
+++ b/web/modules/custom/erable_mod/erable_mod.module
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * @file
+ * Primary module hooks for reha module.
+ */
+
+/**
+ * Implements hook_theme().
+ */
+function erable_mod_theme() {
+  return array(
+    'svg_mapsites' => array(
+      'variables' => array('vpw' => null, 'vph' => null, 'sites' => []),
+    ),
+  );
+}
\ No newline at end of file
diff --git a/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php b/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php
new file mode 100644
index 0000000..9533366
--- /dev/null
+++ b/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace Drupal\erable_mod\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Block\Attribute\Block;
+// use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Link;
+use Drupal\Core\Render\Markup;
+
+/**
+ * Provides a 'Sites Map' Block.
+ * @Block(
+ *   id = "sitesmap_block",
+ *   admin_label = @Translation("Sites map Block"),
+ * )
+ */
+class SitesMap extends BlockBase {
+ 
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $return = null;
+
+    $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();
+
+      $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();
+
+      $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);
+      $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
+
+      $r = 10;
+      $m = -$r+4;
+      $l = $r*2-7;
+      $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' => [
+        'max-age' => 0,
+      ],
+      'svg_mapsites' => [
+        '#theme' => 'svg_mapsites',
+        '#sites' => $sites_paths,
+        '#vpw' => $vp_w,
+        '#vph' => $vp_h,
+        '#attached' => [
+          'library' => [
+            'erable_mod/sites_map_block',
+          ],
+        ],
+      ]
+    ];
+
+    return $return;
+    // return [
+    //   '#markup' => $this->t('Hello, Sites Map!'),
+    // ];
+  }
+  public function getCacheMaxAge() {
+    return 0;
+  }
+}
\ No newline at end of file
diff --git a/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig b/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig
new file mode 100644
index 0000000..b0e1544
--- /dev/null
+++ b/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig
@@ -0,0 +1,52 @@
+<div id="sites-map-container">
+  {# <svg {{ svg_attributes }}>
+    <path {{ path_attributes }}></path>
+  </svg> #}
+  <svg
+      width="100%"
+      height="auto"
+      viewBox="0 0 {{ vpw }} {{ vph }}"
+      version="1.1"
+      id="svg1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:svg="http://www.w3.org/2000/svg">
+
+      <g
+        id="layer1"
+        width="auto"
+      height="100%"
+              transform="
+          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>
\ No newline at end of file