div englobante lessites

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

@@ -3224,25 +3224,31 @@ main {
   width: 100vw;
 }
 #lessites .content_container .view .header_view {
+  flex: 0 1 100%;
   position: relative !important;
   height: fit-content;
   z-index: 0;
   width: 100vw;
   margin-bottom: 2rem;
 }
-#lessites .content_container .view .header_view #leaflet-map-view-sites-embed-1 {
+#lessites .content_container .view .header_view #block-sitesmap-block {
-  width: inherit;
+  margin: auto;
 }
-#lessites .content_container .view .views-row {
+#lessites .content_container #lessites .views-row-wrapper {
+  /* styles spécifiques à la page */
+  padding: 10px;
+  border: 1px solid #ccc;
+}
+#lessites .content_container #lessites .views-row-wrapper .views-row {
   width: 20%;
   margin-bottom: 2rem;
 }
-#lessites .content_container .view .views-row .views-field-title .field-content a {
+#lessites .content_container #lessites .views-row-wrapper .views-row .views-field-title .field-content a {
   color: rgb(7, 50, 194);
   font-family: "gilroy-bold";
   padding-top: 0.5rem;
 }
-#lessites .content_container .view .views-row .views-field-field-images .field-content img {
+#lessites .content_container #lessites .views-row-wrapper .views-row .views-field-field-images .field-content img {
   width: 200px;
   height: 200px;
   object-fit: cover;

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

@@ -542,6 +542,35 @@ document.addEventListener('keydown', (e) => {
 
   
 
+//////////////////// start wrapper views-row  lessites /////////////////////////
+document.addEventListener("DOMContentLoaded", function() {
+  // Sélectionne le conteneur principal avec l'ID 'lessites'
+  const container = document.getElementById("lessites");
+
+  // Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages
+  if (container) {
+    // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'
+    const viewContainer = container.querySelector(".views-element-container .view");
+
+    // Vérifie si 'viewContainer' existe pour éviter les erreurs
+    if (viewContainer) {
+      // Crée une div englobante pour tous les éléments 'views-row'
+      const wrapperDiv = document.createElement("div");
+      wrapperDiv.classList.add("views-row-wrapper"); // ajoute une classe pour faciliter le style CSS
+
+      // Déplace tous les éléments 'views-row' dans la nouvelle div
+      const viewsRows = viewContainer.querySelectorAll(".views-row");
+      viewsRows.forEach(row => wrapperDiv.appendChild(row));
+
+      // Ajoute la div englobante dans le 'viewContainer'
+      viewContainer.appendChild(wrapperDiv);
+    }
+  }
+});
+
+
+//////////////////// end wrapper views-row  lessites /////////////////////////
+
 })(jQuery, window);
 
 

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

@@ -30,17 +30,27 @@ main{
             width: 100vw;
 
             .header_view {
+                flex: 0 1 100%;
                 position: relative !important;
                 height: fit-content;
                 z-index: 0;
                 width: 100vw;
                 margin-bottom: 2rem;
-                #leaflet-map-view-sites-embed-1{
+                
-                    width:inherit;
+                #block-sitesmap-block{
+                    margin: auto;
                 }
                
             }
 
+            
+            
+
+        }
+        #lessites .views-row-wrapper {
+            /* styles spécifiques à la page */
+            padding: 10px;
+            border: 1px solid #ccc;
             .views-row{
                 width: 20%;
                 margin-bottom: 2rem;