From 0254e4b14650a6a376b1775ad537726c1c1865d2 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 14 Mar 2025 15:13:13 +0100
Subject: [PATCH] degug css /ressources dans footer

---
 .../quartiers_de_demain/dist/assets/bundle.js | 13 +--
 .../dist/assets/css/bundle.css                |  3 +
 .../src/assets/js/page_ressources.js          | 87 -------------------
 .../src/assets/js/quartiers_de_demain.js      |  2 +-
 .../src/assets/scss/pages/actualites.scss     |  3 -
 .../src/assets/scss/pages/home.scss           |  8 --
 .../src/assets/scss/partials/footer.scss      |  3 +
 .../quartiers_de_demain/webpack.config.js     |  2 +-
 8 files changed, 9 insertions(+), 112 deletions(-)
 delete mode 100644 web/themes/custom/quartiers_de_demain/src/assets/js/page_ressources.js

diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
index c989864..88abd9f 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -30,23 +30,13 @@ eval("document.addEventListener('scroll', function() {\n    const scrolled = win
 
 /***/ }),
 
-/***/ "./src/assets/js/page_ressources.js":
-/*!******************************************!*\
-  !*** ./src/assets/js/page_ressources.js ***!
-  \******************************************/
-/***/ (function() {
-
-eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n    'use strict';\n  \n    Drupal.behaviors.quartiers_de_demain = {\n      attach: function (context, settings) {\n        console.log('It works!');\n      }\n    };\n  } (Drupal));\n  \n  \n\n  \n  \n  /////////////// start class à view-rows-ressources ////////\n  $(document).ready(function () {\n    $(\".view-rows-wrapper\").each(function () {\n        let h3Container = $(this).prev(\"h3\").find(\"div[class^='type-']\");\n        let classToAdd = h3Container.attr(\"class\"); // Récupère la classe complète (ex: \"type-Documentation\")\n  \n        if (classToAdd) {\n            $(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper\n        }\n    });\n  });\n  ////////////////// end class à view-rows-wrapper ////////////////\n  \n  \n  \n  /////////////////// start voir plus...  ressources ////////////////////\n  \n  $(document).ready(function () {\n      // Vérifier si on est sur la page avec l'ID #ressources\n      if ($(\"#ressources\").length > 0) {\n        $(\".view-rows-wrapper\").each(function () {\n            let container = $(this); // Cible uniquement cette section\n            let items = container.find(\".views-row\"); // Les éléments à afficher progressivement\n            let visibleCount = 4; // Nombre d'éléments visibles au départ\n          \n  \n            // Récupérer la classe `type-XXX`\n            let typeClass = container.attr(\"class\").split(\" \").find(cls => cls.startsWith(\"type-\"));\n            let typeName = typeClass ? typeClass.replace(\"type-\", \"\").replace(/-/g, \" \") : \"contenu\"; // Nettoyer le nom\n  \n            if (typeClass === \"type-podcast\" || typeClass === \"type-video\") {\n              visibleCount = 2; // Pour Podcast et Vidéo\n            }\n  \n            // Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`\n            let button = $(\"<button>\")\n                .addClass(\"voir-plus\")\n                .text(\"Voir plus de \" + typeName)\n                .insertAfter(container);\n  \n            // Cacher tous les éléments sauf les 4 premiers\n            items.hide().slice(0, visibleCount).show();\n  \n            // Action sur le bouton\n            button.on(\"click\", function () {\n                let hiddenItems = container.find(\".views-row:hidden\").slice(0, 4); // Prochains éléments à afficher\n  \n                if ($(this).text().includes(\"Voir plus\")) {\n                    hiddenItems.slideDown(); // Afficher avec un effet de glissement\n  \n                    if (container.find(\".views-row:hidden\").length === 0) {\n                        $(this).text(\"Voir moins de \" + typeName); // Changer le texte du bouton si tout est affiché\n                    }\n                } else {\n                    container.find(\".views-row\").slice(visibleCount).slideUp(); // Replier les éléments\n                    $(this).text(\"Voir plus de \" + typeName); // Revenir à l'état initial\n                }\n            });\n        });\n      }\n  });\n  \n  ///////////////////  end voir plus...  ressources ////////////////////\n  \n  \n  \n\n  \n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/page_ressources.js?");
-
-/***/ }),
-
 /***/ "./src/assets/js/quartiers_de_demain.js":
 /*!**********************************************!*\
   !*** ./src/assets/js/quartiers_de_demain.js ***!
   \**********************************************/
 /***/ (function() {
 
-eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n  'use strict';\n\n  Drupal.behaviors.quartiers_de_demain = {\n    attach: function (context, settings) {\n      console.log('It works!');\n    }\n  };\n} (Drupal));\n\n\n//////// start header ////////////\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  const header = document.querySelector('header');\n  const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n  const headerNavContainer = document.querySelector('.header_nav_container');\n  const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n  const isTargetPath = window.location.pathname === '/';\n\n  // Fonction pour démarrer l'animation du logo SVG\n  function startLogoAnimation() {\n    logo.classList.add('animated');\n  }\n\n  // Fonction pour arrêter l'animation du logo SVG\n  function stopLogoAnimation() {\n    logo.classList.remove('animated');\n  }\n\n  // Vérifier si le header a la classe header--collapse\n  function checkHeaderCollapse() {\n    if (header.classList.contains('header--collapsed')) {\n      stopLogoAnimation();\n    } else if (header.classList.contains('header--collapsed-already'))  {\n        stopLogoAnimation();\n      } else {\n      startLogoAnimation();\n    }\n\n  }\n\n  // Appeler la fonction au chargement initial\n  checkHeaderCollapse();\n\n  // Observer les changements de classe sur le header\n  const observer = new MutationObserver(function(mutations) {\n    mutations.forEach(function(mutation) {\n      if (mutation.attributeName === 'class') {\n        checkHeaderCollapse();\n      }\n    });\n  });\n  observer.observe(header, { attributes: true });\n\n\n  // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n  if (!isFirstLoad || !isTargetPath) {\n    header.classList.add('header--collapsed-already');\n    // logo.classList.remove('animated');\n    stopLogoAnimation();\n  } else {\n    // Sinon, appliquer la transition après un délai\n    setTimeout(() => {\n        header.classList.add('header--collapsed');\n    }, 5000);\n  }\n\n  //////////////////////////////////////\n\n  let lastScrollTop = 0;\n  let threshold = 100; // Change this value as needed\n  let isHidden = false;\n\n  function slideOut() {\n    headerNavContainer.animate([\n      { transform: 'translateX(0)' },\n      { transform: 'translateX(-100%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = true;\n  }\n\n  function slideIn() {\n    headerNavContainer.animate([\n      { transform: 'translateX(-100%)' },\n      { transform: 'translateX(0)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = false;\n  }\n  \n  function slideDown() {\n    // headerNavContainer.style.display = 'block';\n    headerNavContainer.animate([\n      { transform: 'translateY(0%)' },\n      { transform: 'translateY(+100%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = false;\n  }\n\n  function slideUp() {\n    headerNavContainer.animate([\n      { transform: 'translateY(100%)' },\n      { transform: 'translateY(0%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    }).onfinish = function() {\n      // headerNavContainer.style.display = 'none';\n    };\n    isHidden = true;\n  }\n    // Fonction pour ajuster la hauteur du header lors du défilement\n    function adjustHeaderHeight() {\n      if (window.scrollY > 0) {\n        header.classList.add('shrink');\n      } else {\n        header.classList.remove('shrink');\n      }\n    }\n\n  function handleScroll() {\n    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const isMobile = window.innerWidth < 811;\n\n    if (scrollTop > threshold && !isHidden) {\n      if (isMobile) {\n        slideUp();\n      } else {\n        slideOut();\n      }\n    } else if (scrollTop <= threshold && isHidden) {\n      if (isMobile) {\n        slideDown();\n      } else {\n        slideIn();\n      }\n    }\n\n\n    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n  }\n\n  function handleTouchAndMouseEnter() {\n    if (isHidden) {\n      if (window.innerWidth < 811) {\n        slideDown();\n      } else {\n        slideIn();\n      }\n    }\n  }\n\n  function handleTouchAndMouseLeave() {\n    if (lastScrollTop > threshold && !isHidden) {\n      if (window.innerWidth < 811) {\n        slideUp();\n      } else {\n        slideOut();\n      }\n    }\n  }\n\n  window.addEventListener('scroll', handleScroll);\n  window.addEventListener('scroll', adjustHeaderHeight);\n\n  // Mouse events for desktop\n  header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n  header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n\n  // Touch events for tablets and mobile devices\n  header.addEventListener('touchstart', handleTouchAndMouseEnter);\n  header.addEventListener('touchend', handleTouchAndMouseLeave);\n\n  // Initial check to see if we're at the top of the page\n  if (window.pageYOffset <= threshold) {\n    if (window.innerWidth < 811) {\n      slideDown();\n    } else { \n      slideIn();\n    } \n  } else {\n    if (window.innerWidth < 811) {\n      slideUp();\n    } else {\n      slideIn();\n    }\n  }\n\n});\n\n//////// end header ////////////\n\n\n\n//// ancre dans texte au click paragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\nvar adjustAnchor = function() {\n    var $anchor = $('.sidebar_first_container'),\n            fixedElementHeight = 500;\n    if ($anchor.length > 0) {\n        $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n    }\n};\n\n$(window).on('hashchange', function() {\n    adjustAnchor();\n});\n\n\n////////////////////////  start script smooth apparition des textes /////////////////\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n    enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\n    // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),\n    // mapSite : document.querySelectorAll('#sites-map-container'),\n    lienDoc : document.querySelectorAll('.field_field_documents'),\n    lienURL : document.querySelectorAll('.field_field_liens_site'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n  ScrollReveal().reveal(nodes.enjeux, showUp);\n  // ScrollReveal().reveal(nodes.mapHome, showUp);\n  // ScrollReveal().reveal(nodes.mapSite, showUp);\n  ScrollReveal().reveal(nodes.lienDoc, showUp);\n  ScrollReveal().reveal(nodes.lienURL, showUp);\n\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n////////////////////////  end script smooth apparition des textes /////////////////\n\n// //////////////////// start Timeline script ///////////////////////\n\n  // Update month field to only show the first 3 letters\n  document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n    const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n    if (monthField) {\n      const monthText = monthField.textContent.trim();\n      if (monthText === \"juillet\") {\n        monthField.textContent = monthText.slice(0, 4);\n        monthField.classList.add('after');\n      } else if (monthText === \"juin\") {\n        monthField.textContent = monthText.slice(0, 4);\n      } else if (monthText.length > 3) {\n        monthField.textContent = monthText.slice(0, 3);\n        monthField.classList.add('after');\n      }\n    }\n  });\n\n  // Fonction pour ajouter ou retirer la classe .only\n  function updateDateClasses() {\n    document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n      const date2Element = dateElement.querySelector('.date2');\n      const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n      if (date2Element && !date2Element.textContent.trim()) {\n        if (yearElement) {\n          yearElement.classList.add('only');\n        }\n      } else {\n        if (yearElement) {\n          yearElement.classList.remove('only');\n        }\n      }\n    });\n  }\n\n  // Exécuter la fonction une première fois pour le contenu déjà présent\n  updateDateClasses();\n\n  // MutationObserver pour surveiller les changements dans le DOM\n  const observer = new MutationObserver(function(mutationsList, observer) {\n    for(let mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        updateDateClasses();\n      }\n    }\n  });\n\n\n//   ////////////////////// start  calendrier home   /////////////////////////////////\n  $(document).ready(function(){\n    $('.__timeline-content').slick({\n      slidesToShow: 3,\n      slidesToScroll: 1,\n      dots: false,\n      arrows: true,\n      centerMode: false,\n      draggable: true,\n      infinite: false,\n      responsive: [\n        {\n          breakpoint: 810,\n          settings: {\n            slidesToShow: 1,\n            adaptiveHeight: false,\n            arrows: true,\n            draggable: true,\n            centerMode: false,\n            infinite: false,\n          }\n        }]\n    });\n    console.log('salut slick calendrier');\n  \n    });\n  \n//////////////////////// end   calendrier home   /////////////////////////////////\n\n\n\n//////////////////////// end Timeline script /////////////////////////////////////////////\n\n///////////////////  caracteres  body actus/////////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  // Maximum number of characters to display\n  const maxChars = 140; // Adjust this value as needed\n\n  document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body').forEach(function(paragraph) {\n    let text = paragraph.textContent.trim();\n    if (text.length > maxChars) {\n      let truncatedText = text.slice(0, maxChars) + '...';\n      paragraph.textContent = truncatedText;\n    }\n  });\n});\n\n\n//////////// start slideshow home  ////////////////////////// \n$(document).ready(function(){\n    let actuview = $('.content-actus .view .view-rows-wrapper')\n    if (actuview) {\n      actuview.slick({\n        slidesToShow: 3,\n        dots: false,\n        arrows: true,\n        adaptiveHeight: false,\n        autoplay: false,\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: false,\n              arrows: true,\n              draggable: true,\n              autoplay: false,\n            }\n          }]\n      });\n      console.log('salut slick home');\n      \n    }\n    $('.slick-carousel').slick({\n      lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n    });\n\n});\n\n$(document).ready(function () {\n  let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n  if (diapohome.length) {\n      // Initialisation de Slick\n      diapohome.slick({\n          slidesToShow: 1,\n          dots: false,\n          arrows: false,\n          // centerMode: true,\n          adaptiveHeight: false,\n          autoplay: true,  // Activer l'autoplay\n          autoplaySpeed: 4000,  // Changement de slide toutes les 4 secondes\n          // infinite: true,\n          pauseOnHover: false,  // Ne pas arrêter l'autoplay lors du survol\n          pauseOnFocus: false,\n          responsive: [\n              {\n                  breakpoint: 810,\n                  settings: {\n                      slidesToShow: 1,\n                      adaptiveHeight: false,\n                      arrows: false,\n                      draggable: true,\n                      centerMode: false,\n                  }\n              }]\n      });\n\n}\n});\n////////////  end slideshow home  ////////////////////////// \n\n\n//////////// start slideshow /actualites  ////////////////////////// \n$(document).ready(function(){\n  let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama')\n  if (actuview2) {\n    actuview2.slick({\n      slidesToShow: 1,\n      dots: false,\n      arrows: true,\n      adaptiveHeight: true,\n      autoplay: false,\n      responsive: [\n        {\n          breakpoint: 810,\n          settings: {\n            slidesToShow: 1,\n            adaptiveHeight: true,\n            arrows: true,\n            draggable: true,\n            autoplay: false,\n          }\n        }]\n    });\n    console.log('salut slick actualites');\n  }\n  // $('.slick-carousel').slick({\n  //   lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n  // });\n});\n////////////  end slideshow /actualites  ////////////////////////// \n\n\n\n//////////////// start lightbox galerie image page site////////////////////////\n\n    // Sélection des images et de leurs légendes dans la galerie\n    let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\n    let currentIndex;\n\n    // Création de la lightbox et de ses éléments\n    const lightbox = document.createElement('div');\n    lightbox.id = 'lightbox';\n    lightbox.classList.add('lightbox');\n    document.body.appendChild(lightbox);\n\n    const img = document.createElement('img');\n    lightbox.appendChild(img);\n\n    // Élément pour afficher la légende\n    const caption = document.createElement('p');\n    caption.classList.add('caption');\n    lightbox.appendChild(caption);\n\n    const closeBtn = document.createElement('span');\n    closeBtn.classList.add('close');\n    closeBtn.innerHTML = '&times;';\n    lightbox.appendChild(closeBtn);\n\n    const prevBtn = document.createElement('a');\n    prevBtn.classList.add('prev');\n    prevBtn.innerHTML = '&#10094;';\n    lightbox.appendChild(prevBtn);\n\n    const nextBtn = document.createElement('a');\n    nextBtn.classList.add('next');\n    nextBtn.innerHTML = '&#10095;';\n    lightbox.appendChild(nextBtn);\n\n    // Fonction pour afficher l'image et la légende à l'index donné\n    function showImage(index) {\n    if (index < 0) index = images.length - 1;\n    if (index >= images.length) index = 0;\n    currentIndex = index;\n\n    // Mettre à jour l'image\n    img.src = images[currentIndex].getAttribute('src');\n\n    // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)\n    const captionText = images[currentIndex]\n      .closest('.cadre-img-zoom')\n      .nextElementSibling.querySelector('.image-field-caption p')\n      .textContent;\n      \n    caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente\n    lightbox.style.display = 'flex';\n    }\n\n    // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende\n    images.forEach((image, index) => {\n    image.addEventListener('click', () => {\n      showImage(index);\n    });\n    });\n\n    // Fermer le lightbox\n    closeBtn.addEventListener('click', () => {\n    lightbox.style.display = 'none';\n    });\n\n    // Navigation pour images précédente et suivante\n    prevBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    showImage(currentIndex - 1);\n    });\n\n    nextBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    showImage(currentIndex + 1);\n    });\n\n    // Fermer le lightbox en cliquant en dehors de l'image\n    lightbox.addEventListener('click', (e) => {\n    if (e.target === lightbox) {\n      lightbox.style.display = 'none';\n    }\n    });\n\n    // Ajout des contrôles clavier (Échap, flèches gauche/droite)\n    document.addEventListener('keydown', (e) => {\n    if (lightbox.style.display === 'flex') {\n      if (e.key === 'Escape') {\n        lightbox.style.display = 'none';\n      } else if (e.key === 'ArrowLeft') {\n        showImage(currentIndex - 1);\n      } else if (e.key === 'ArrowRight') {\n        showImage(currentIndex + 1);\n      }\n    }\n    });\n\n\n//////////////// end lightbox galerie image page site////////////////////////\n\n\n\n//////////////////// start wrapper views-row  lessites /////////////////////////\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionne le conteneur principal avec l'ID 'lessites'\nconst container = document.getElementById(\"lessites\");\n\n// Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages\nif (container) {\n  // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'\n  const viewContainer = container.querySelector(\".views-element-container .view\");\n\n  // Vérifie si 'viewContainer' existe pour éviter les erreurs\n  if (viewContainer) {\n    // Crée une div englobante pour tous les éléments 'views-row'\n    const wrapperDiv = document.createElement(\"div\");\n    wrapperDiv.classList.add(\"views-row-wrapper\"); // ajoute une classe pour faciliter le style CSS\n\n    // Déplace tous les éléments 'views-row' dans la nouvelle div\n    const viewsRows = viewContainer.querySelectorAll(\".views-row\");\n    viewsRows.forEach(row => wrapperDiv.appendChild(row));\n\n    // Ajoute la div englobante dans le 'viewContainer'\n    viewContainer.appendChild(wrapperDiv);\n  }\n}\n});\n//////////////////// end wrapper views-row  lessites /////////////////////////\n\n\n////////////////////  start div infos site  ////////////////////////\n\n// Vérifie si la page a la classe 'node-type-site' dans le <body>\nif (document.body.classList.contains('node-type-site')) {\n// Sélectionne le conteneur principal\nconst blockRegion = document.querySelector('.block-region-second');\n\n// Liste des classes spécifiques à cibler\nconst fieldClasses = [\n    '.field_field_region',\n    '.field_field_nom_du_qpv_nb_d_hab',\n    '.field_field_departement_s',\n    '.field_field_programme_de_l_etat',\n    '.field_field_porteur_s_de_site',\n    '.field_field_nom_de_la_commune_nb_d_hab'\n];\n\n// Sélectionne les div parents de chacun des champs listés\nconst elementsToWrap = [];\nfieldClasses.forEach(className => {\n    const fieldElement = blockRegion.querySelector(className);\n    if (fieldElement) {\n        // Ajoute le parent du champ au tableau si trouvé\n        elementsToWrap.push(fieldElement.parentElement);\n    }\n});\n\n// Vérifie que des éléments ont été trouvés\nif (elementsToWrap.length > 0) {\n    // Crée le conteneur avec la classe 'infos'\n    const infosContainer = document.createElement('div');\n    infosContainer.className = 'infos';\n\n    // Insère le conteneur `.infos` avant le premier élément ciblé\n    const firstElement = elementsToWrap[0];\n    blockRegion.insertBefore(infosContainer, firstElement);\n\n    // Déplace chaque élément dans le conteneur `.infos`\n    elementsToWrap.forEach(element => infosContainer.appendChild(element));\n}\n}\n////////////////////  end div infos site  ////////////////////////\n\n\n////////////////////  start div infos actualité  ////////////////////////\n\n$(document).ready(function () {\n  // Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)\n  if ($(\".layout-container\").attr(\"id\") === \"page-node\") {\n      $(\"article.node-type-actualite\").each(function () {\n          let article = $(this);\n          let dateField = article.find(\".field_field_date\");\n          let typeField = article.find(\".field_field_type_d_actualite\");\n\n          // Vérifier si les deux éléments existent\n          if (dateField.length > 0 && typeField.length > 0) {\n              // Vérifier si l'encapsulation n'existe pas déjà\n              if (article.find(\".infos-actu\").length === 0) {\n                  // Créer un conteneur et y insérer les éléments\n                  let infosActu = $(\"<div>\").addClass(\"infos-actu\").append(dateField, typeField);\n                  \n                  // Ajouter ce conteneur après les champs existants\n                  article.append(infosActu);\n              }\n          }\n      });\n  }\n});\n\n////////////////////  end div infos actualité  ////////////////////////\n\n//////////////////////////////////////////////////////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments à déplacer\nconst documentsField = document.querySelector(\".field_field_documents\");\nconst liensSiteField = document.querySelector(\".field_field_liens_site\");\n\n// Sélectionner la destination\nconst thirdRegion = document.querySelector(\".block-region-third > div\");\n\n// Créer une nouvelle div pour englober les éléments déplacés\nconst wrapperDiv = document.createElement(\"div\");\nwrapperDiv.classList.add(\"documents-liens-wrapper\");\n\n// Déplacer les éléments dans la nouvelle div\nif (documentsField && liensSiteField && thirdRegion) {\n    wrapperDiv.appendChild(documentsField);\n    wrapperDiv.appendChild(liensSiteField);\n\n    // Ajouter la nouvelle div dans la destination\n    thirdRegion.appendChild(wrapperDiv);\n}\n});\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments pertinents\nconst documentsLiensWrapper = document.querySelector(\".documents-liens-wrapper\");\nconst blockRegionThird = document.querySelector(\".block-region-third\");\n\n// Vérifier que les éléments existent avant de les manipuler\nif (documentsLiensWrapper && blockRegionThird) {\n    // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next\n    blockRegionThird.appendChild(documentsLiensWrapper);\n}\n});\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n// Fonction pour déplacer le bloc en fonction de la taille de l'écran\nfunction moveLanguageSwitcher() {\n  const languageSwitcher = document.getElementById(\"block-quartiers-de-demain-selecteurdelangue\");\n  const navContainer = document.querySelector(\".header_nav_container\");\n\n  if (window.innerWidth <= 810) { // Si écran téléphone\n    if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {\n      navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container\n    }\n  } else { // Si écran non téléphone\n    const headerRightContainer = document.querySelector(\".header_right_container\");\n    if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {\n      headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale\n    }\n  }\n}\n\n// Déclencher au chargement et au redimensionnement\nmoveLanguageSwitcher();\nwindow.addEventListener(\"resize\", moveLanguageSwitcher);\n});\n\n///////////////////////////////////////////////////////////////\n\n/////////////// start class à view-rows-ressources ////////\n$(document).ready(function () {\n  $(\".view-rows-wrapper\").each(function () {\n      let h3Container = $(this).prev(\"h3\").find(\"div[class^='type-']\");\n      let classToAdd = h3Container.attr(\"class\"); // Récupère la classe complète (ex: \"type-Documentation\")\n\n      if (classToAdd) {\n          $(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper\n      }\n  });\n});\n////////////////// end class à view-rows-wrapper ////////////////\n\n\n\n/////////////////// start voir plus...  ressources ////////////////////\n\n$(document).ready(function () {\n    // Vérifier si on est sur la page avec l'ID #ressources\n    if ($(\"#ressources\").length > 0) {\n      $(\".view-rows-wrapper\").each(function () {\n          let container = $(this); // Cible uniquement cette section\n          let items = container.find(\".views-row\"); // Les éléments à afficher progressivement\n          let visibleCount = 4; // Nombre d'éléments visibles au départ\n        \n\n          // Récupérer la classe `type-XXX`\n          let typeClass = container.attr(\"class\").split(\" \").find(cls => cls.startsWith(\"type-\"));\n          let typeName = typeClass ? typeClass.replace(\"type-\", \"\").replace(/-/g, \" \") : \"contenu\"; // Nettoyer le nom\n\n          if (typeClass === \"type-podcast\" || typeClass === \"type-video\") {\n            visibleCount = 2; // Pour Podcast et Vidéo\n          }\n\n          // Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`\n          let button = $(\"<button>\")\n              .addClass(\"voir-plus\")\n              .text(\"Voir plus de \" + typeName)\n              .insertAfter(container);\n\n          // Cacher tous les éléments sauf les 4 premiers\n          items.hide().slice(0, visibleCount).show();\n\n          // Action sur le bouton\n          button.on(\"click\", function () {\n              let hiddenItems = container.find(\".views-row:hidden\").slice(0, 4); // Prochains éléments à afficher\n\n              if ($(this).text().includes(\"Voir plus\")) {\n                  hiddenItems.slideDown(); // Afficher avec un effet de glissement\n\n                  if (container.find(\".views-row:hidden\").length === 0) {\n                      $(this).text(\"Voir moins de \" + typeName); // Changer le texte du bouton si tout est affiché\n                  }\n              } else {\n                  container.find(\".views-row\").slice(visibleCount).slideUp(); // Replier les éléments\n                  $(this).text(\"Voir plus de \" + typeName); // Revenir à l'état initial\n              }\n          });\n      });\n    }\n});\n\n///////////////////  end voir plus...  ressources ////////////////////\n\n\n\n/////////////////// start voir plus...  actualite dans /actualites ////////////////////\n$(document).ready(function () {\n  if ($(\"#actualites\").length > 0) {\n    $(\".node-type-actualite\").each(function () {\n        let article = $(this);\n\n        // Sélection des éléments à afficher/masquer\n        let body = article.find(\".field_body\");\n        let links = article.find(\".field_field_liens\");\n\n        // Masquer les éléments au chargement\n        body.hide();\n        links.hide();\n\n        // Créer le bouton flèche\n        let toggleButton = $(\"<button>\")\n            .addClass(\"toggle-actualite\")\n            .html(\"&#9660;\") // Flèche vers le bas\n            .insertAfter(article); // Insérer après l'article\n\n        // Action au clic sur la flèche\n        toggleButton.on(\"click\", function () {\n            if (body.is(\":visible\")) {\n                body.slideUp();\n                links.slideUp();\n                $(this).html(\"&#9660;\"); // Changer en flèche vers le bas\n            } else {\n                body.slideDown();\n                links.slideDown();\n                $(this).html(\"&#9650;\"); // Changer en flèche vers le haut\n            }\n        });\n    });\n  }\n});\n\n\n///////////////////  end voir plus...  actualite dans /actualites ////////////////////\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
+eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n  'use strict';\n\n  Drupal.behaviors.quartiers_de_demain = {\n    attach: function (context, settings) {\n      console.log('It works!');\n    }\n  };\n} (Drupal));\n\n\n//////// start header ////////////\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  const header = document.querySelector('header');\n  const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n  const headerNavContainer = document.querySelector('.header_nav_container');\n  const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n  const isTargetPath = window.location.pathname === '/';\n\n  // Fonction pour démarrer l'animation du logo SVG\n  function startLogoAnimation() {\n    logo.classList.add('animated');\n  }\n\n  // Fonction pour arrêter l'animation du logo SVG\n  function stopLogoAnimation() {\n    logo.classList.remove('animated');\n  }\n\n  // Vérifier si le header a la classe header--collapse\n  function checkHeaderCollapse() {\n    if (header.classList.contains('header--collapsed')) {\n      stopLogoAnimation();\n    } else if (header.classList.contains('header--collapsed-already'))  {\n        stopLogoAnimation();\n      } else {\n      startLogoAnimation();\n    }\n\n  }\n\n  // Appeler la fonction au chargement initial\n  checkHeaderCollapse();\n\n  // Observer les changements de classe sur le header\n  const observer = new MutationObserver(function(mutations) {\n    mutations.forEach(function(mutation) {\n      if (mutation.attributeName === 'class') {\n        checkHeaderCollapse();\n      }\n    });\n  });\n  observer.observe(header, { attributes: true });\n\n\n  // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n  if (!isFirstLoad || !isTargetPath) {\n    header.classList.add('header--collapsed-already');\n    // logo.classList.remove('animated');\n    stopLogoAnimation();\n  } else {\n    // Sinon, appliquer la transition après un délai\n    setTimeout(() => {\n        header.classList.add('header--collapsed');\n    }, 5000);\n  }\n\n  //////////////////////////////////////\n\n  let lastScrollTop = 0;\n  let threshold = 100; // Change this value as needed\n  let isHidden = false;\n\n  function slideOut() {\n    headerNavContainer.animate([\n      { transform: 'translateX(0)' },\n      { transform: 'translateX(-100%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = true;\n  }\n\n  function slideIn() {\n    headerNavContainer.animate([\n      { transform: 'translateX(-100%)' },\n      { transform: 'translateX(0)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = false;\n  }\n  \n  function slideDown() {\n    // headerNavContainer.style.display = 'block';\n    headerNavContainer.animate([\n      { transform: 'translateY(0%)' },\n      { transform: 'translateY(+100%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    });\n    isHidden = false;\n  }\n\n  function slideUp() {\n    headerNavContainer.animate([\n      { transform: 'translateY(100%)' },\n      { transform: 'translateY(0%)' }\n    ], {\n      duration: 300,\n      fill: 'forwards'\n    }).onfinish = function() {\n      // headerNavContainer.style.display = 'none';\n    };\n    isHidden = true;\n  }\n    // Fonction pour ajuster la hauteur du header lors du défilement\n    function adjustHeaderHeight() {\n      if (window.scrollY > 0) {\n        header.classList.add('shrink');\n      } else {\n        header.classList.remove('shrink');\n      }\n    }\n\n  function handleScroll() {\n    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const isMobile = window.innerWidth < 811;\n\n    if (scrollTop > threshold && !isHidden) {\n      if (isMobile) {\n        slideUp();\n      } else {\n        slideOut();\n      }\n    } else if (scrollTop <= threshold && isHidden) {\n      if (isMobile) {\n        slideDown();\n      } else {\n        slideIn();\n      }\n    }\n\n\n    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n  }\n\n  function handleTouchAndMouseEnter() {\n    if (isHidden) {\n      if (window.innerWidth < 811) {\n        slideDown();\n      } else {\n        slideIn();\n      }\n    }\n  }\n\n  function handleTouchAndMouseLeave() {\n    if (lastScrollTop > threshold && !isHidden) {\n      if (window.innerWidth < 811) {\n        slideUp();\n      } else {\n        slideOut();\n      }\n    }\n  }\n\n  window.addEventListener('scroll', handleScroll);\n  window.addEventListener('scroll', adjustHeaderHeight);\n\n  // Mouse events for desktop\n  header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n  header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n\n  // Touch events for tablets and mobile devices\n  header.addEventListener('touchstart', handleTouchAndMouseEnter);\n  header.addEventListener('touchend', handleTouchAndMouseLeave);\n\n  // Initial check to see if we're at the top of the page\n  if (window.pageYOffset <= threshold) {\n    if (window.innerWidth < 811) {\n      slideDown();\n    } else { \n      slideIn();\n    } \n  } else {\n    if (window.innerWidth < 811) {\n      slideUp();\n    } else {\n      slideIn();\n    }\n  }\n\n});\n\n//////// end header ////////////\n\n\n\n//// ancre dans texte au click paragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\nvar adjustAnchor = function() {\n    var $anchor = $('.sidebar_first_container'),\n            fixedElementHeight = 500;\n    if ($anchor.length > 0) {\n        $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n    }\n};\n\n$(window).on('hashchange', function() {\n    adjustAnchor();\n});\n\n\n////////////////////////  start script smooth apparition des textes /////////////////\n\nfunction scrollReaveal(){\n\n  const nodes = {\n    logo : document.querySelectorAll('#logo-animated-container'),\n    chapeau :  document.querySelectorAll('.field_body'),\n    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n    enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\n    // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),\n    // mapSite : document.querySelectorAll('#sites-map-container'),\n    lienDoc : document.querySelectorAll('.field_field_documents'),\n    lienURL : document.querySelectorAll('.field_field_liens_site'),\n  }\n\n  const showUp = {\n      origin: 'bottom',\n      delay: 100,\n      duration: 1000,\n      distance: '50px',\n      easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  const Show = {\n    delay: 100,\n    duration: 600,\n    easing: 'cubic-bezier(0.5, 0, 0, 1)'\n  }\n\n  console.log(nodes);\n\n  ScrollReveal().reveal(nodes.logo, Show);\n  ScrollReveal().reveal(nodes.chapeau, showUp);\n  ScrollReveal().reveal(nodes.paragraph, showUp);\n  ScrollReveal().reveal(nodes.enjeux, showUp);\n  // ScrollReveal().reveal(nodes.mapHome, showUp);\n  // ScrollReveal().reveal(nodes.mapSite, showUp);\n  ScrollReveal().reveal(nodes.lienDoc, showUp);\n  ScrollReveal().reveal(nodes.lienURL, showUp);\n\n}\n\n\n$( document ).ready(function() {\n  scrollReaveal();\n});\n\n////////////////////////  end script smooth apparition des textes /////////////////\n\n// //////////////////// start Timeline script ///////////////////////\n\n  // Update month field to only show the first 3 letters\n  document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n    const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n    if (monthField) {\n      const monthText = monthField.textContent.trim();\n      if (monthText === \"juillet\") {\n        monthField.textContent = monthText.slice(0, 4);\n        monthField.classList.add('after');\n      } else if (monthText === \"juin\") {\n        monthField.textContent = monthText.slice(0, 4);\n      } else if (monthText.length > 3) {\n        monthField.textContent = monthText.slice(0, 3);\n        monthField.classList.add('after');\n      }\n    }\n  });\n\n  // Fonction pour ajouter ou retirer la classe .only\n  function updateDateClasses() {\n    document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n      const date2Element = dateElement.querySelector('.date2');\n      const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n      if (date2Element && !date2Element.textContent.trim()) {\n        if (yearElement) {\n          yearElement.classList.add('only');\n        }\n      } else {\n        if (yearElement) {\n          yearElement.classList.remove('only');\n        }\n      }\n    });\n  }\n\n  // Exécuter la fonction une première fois pour le contenu déjà présent\n  updateDateClasses();\n\n  // MutationObserver pour surveiller les changements dans le DOM\n  const observer = new MutationObserver(function(mutationsList, observer) {\n    for(let mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        updateDateClasses();\n      }\n    }\n  });\n\n\n//   ////////////////////// start  calendrier home   /////////////////////////////////\n  $(document).ready(function(){\n    $('.__timeline-content').slick({\n      slidesToShow: 3,\n      slidesToScroll: 1,\n      dots: false,\n      arrows: true,\n      centerMode: false,\n      draggable: true,\n      infinite: false,\n      responsive: [\n        {\n          breakpoint: 810,\n          settings: {\n            slidesToShow: 1,\n            adaptiveHeight: false,\n            arrows: true,\n            draggable: true,\n            centerMode: false,\n            infinite: false,\n          }\n        }]\n    });\n    console.log('salut slick calendrier');\n  \n    });\n  \n//////////////////////// end   calendrier home   /////////////////////////////////\n\n\n\n//////////////////////// end Timeline script /////////////////////////////////////////////\n\n///////////////////  caracteres  body actus/////////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  // Maximum number of characters to display\n  const maxChars = 140; // Adjust this value as needed\n\n  document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body').forEach(function(paragraph) {\n    let text = paragraph.textContent.trim();\n    if (text.length > maxChars) {\n      let truncatedText = text.slice(0, maxChars) + '...';\n      paragraph.textContent = truncatedText;\n    }\n  });\n});\n\n\n//////////// start slideshow home  ////////////////////////// \n$(document).ready(function(){\n    let actuview = $('.content-actus .view .view-rows-wrapper')\n    if (actuview) {\n      actuview.slick({\n        slidesToShow: 3,\n        dots: false,\n        arrows: true,\n        adaptiveHeight: false,\n        autoplay: false,\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: false,\n              arrows: true,\n              draggable: true,\n              autoplay: false,\n            }\n          }]\n      });\n      console.log('salut slick home');\n      \n    }\n    $('.slick-carousel').slick({\n      lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n    });\n\n});\n\n$(document).ready(function () {\n  let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n  if (diapohome.length) {\n      // Initialisation de Slick\n      diapohome.slick({\n          slidesToShow: 1,\n          dots: false,\n          arrows: false,\n          // centerMode: true,\n          adaptiveHeight: false,\n          autoplay: true,  // Activer l'autoplay\n          autoplaySpeed: 4000,  // Changement de slide toutes les 4 secondes\n          // infinite: true,\n          pauseOnHover: false,  // Ne pas arrêter l'autoplay lors du survol\n          pauseOnFocus: false,\n          responsive: [\n              {\n                  breakpoint: 810,\n                  settings: {\n                      slidesToShow: 1,\n                      adaptiveHeight: false,\n                      arrows: false,\n                      draggable: true,\n                      centerMode: false,\n                  }\n              }]\n      });\n\n}\n});\n////////////  end slideshow home  ////////////////////////// \n\n\n//////////// start slideshow /actualites  ////////////////////////// \n$(document).ready(function(){\n  let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama')\n  if (actuview2) {\n    actuview2.slick({\n      slidesToShow: 1,\n      dots: false,\n      arrows: true,\n      adaptiveHeight: true,\n      autoplay: false,\n      responsive: [\n        {\n          breakpoint: 810,\n          settings: {\n            slidesToShow: 1,\n            adaptiveHeight: true,\n            arrows: true,\n            draggable: true,\n            autoplay: false,\n          }\n        }]\n    });\n    console.log('salut slick actualites');\n  }\n  // $('.slick-carousel').slick({\n  //   lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n  // });\n});\n////////////  end slideshow /actualites  ////////////////////////// \n\n\n\n//////////////// start lightbox galerie image page site////////////////////////\n\n    // Sélection des images et de leurs légendes dans la galerie\n    let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\n    let currentIndex;\n\n    // Création de la lightbox et de ses éléments\n    const lightbox = document.createElement('div');\n    lightbox.id = 'lightbox';\n    lightbox.classList.add('lightbox');\n    document.body.appendChild(lightbox);\n\n    const img = document.createElement('img');\n    lightbox.appendChild(img);\n\n    // Élément pour afficher la légende\n    const caption = document.createElement('p');\n    caption.classList.add('caption');\n    lightbox.appendChild(caption);\n\n    const closeBtn = document.createElement('span');\n    closeBtn.classList.add('close');\n    closeBtn.innerHTML = '&times;';\n    lightbox.appendChild(closeBtn);\n\n    const prevBtn = document.createElement('a');\n    prevBtn.classList.add('prev');\n    prevBtn.innerHTML = '&#10094;';\n    lightbox.appendChild(prevBtn);\n\n    const nextBtn = document.createElement('a');\n    nextBtn.classList.add('next');\n    nextBtn.innerHTML = '&#10095;';\n    lightbox.appendChild(nextBtn);\n\n    // Fonction pour afficher l'image et la légende à l'index donné\n    function showImage(index) {\n    if (index < 0) index = images.length - 1;\n    if (index >= images.length) index = 0;\n    currentIndex = index;\n\n    // Mettre à jour l'image\n    img.src = images[currentIndex].getAttribute('src');\n\n    // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)\n    const captionText = images[currentIndex]\n      .closest('.cadre-img-zoom')\n      .nextElementSibling.querySelector('.image-field-caption p')\n      .textContent;\n      \n    caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente\n    lightbox.style.display = 'flex';\n    }\n\n    // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende\n    images.forEach((image, index) => {\n    image.addEventListener('click', () => {\n      showImage(index);\n    });\n    });\n\n    // Fermer le lightbox\n    closeBtn.addEventListener('click', () => {\n    lightbox.style.display = 'none';\n    });\n\n    // Navigation pour images précédente et suivante\n    prevBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    showImage(currentIndex - 1);\n    });\n\n    nextBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    showImage(currentIndex + 1);\n    });\n\n    // Fermer le lightbox en cliquant en dehors de l'image\n    lightbox.addEventListener('click', (e) => {\n    if (e.target === lightbox) {\n      lightbox.style.display = 'none';\n    }\n    });\n\n    // Ajout des contrôles clavier (Échap, flèches gauche/droite)\n    document.addEventListener('keydown', (e) => {\n    if (lightbox.style.display === 'flex') {\n      if (e.key === 'Escape') {\n        lightbox.style.display = 'none';\n      } else if (e.key === 'ArrowLeft') {\n        showImage(currentIndex - 1);\n      } else if (e.key === 'ArrowRight') {\n        showImage(currentIndex + 1);\n      }\n    }\n    });\n\n\n//////////////// end lightbox galerie image page site////////////////////////\n\n\n\n//////////////////// start wrapper views-row  lessites /////////////////////////\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionne le conteneur principal avec l'ID 'lessites'\nconst container = document.getElementById(\"lessites\");\n\n// Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages\nif (container) {\n  // Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'\n  const viewContainer = container.querySelector(\".views-element-container .view\");\n\n  // Vérifie si 'viewContainer' existe pour éviter les erreurs\n  if (viewContainer) {\n    // Crée une div englobante pour tous les éléments 'views-row'\n    const wrapperDiv = document.createElement(\"div\");\n    wrapperDiv.classList.add(\"views-row-wrapper\"); // ajoute une classe pour faciliter le style CSS\n\n    // Déplace tous les éléments 'views-row' dans la nouvelle div\n    const viewsRows = viewContainer.querySelectorAll(\".views-row\");\n    viewsRows.forEach(row => wrapperDiv.appendChild(row));\n\n    // Ajoute la div englobante dans le 'viewContainer'\n    viewContainer.appendChild(wrapperDiv);\n  }\n}\n});\n//////////////////// end wrapper views-row  lessites /////////////////////////\n\n\n////////////////////  start div infos site  ////////////////////////\n\n// Vérifie si la page a la classe 'node-type-site' dans le <body>\nif (document.body.classList.contains('node-type-site')) {\n// Sélectionne le conteneur principal\nconst blockRegion = document.querySelector('.block-region-second');\n\n// Liste des classes spécifiques à cibler\nconst fieldClasses = [\n    '.field_field_region',\n    '.field_field_nom_du_qpv_nb_d_hab',\n    '.field_field_departement_s',\n    '.field_field_programme_de_l_etat',\n    '.field_field_porteur_s_de_site',\n    '.field_field_nom_de_la_commune_nb_d_hab'\n];\n\n// Sélectionne les div parents de chacun des champs listés\nconst elementsToWrap = [];\nfieldClasses.forEach(className => {\n    const fieldElement = blockRegion.querySelector(className);\n    if (fieldElement) {\n        // Ajoute le parent du champ au tableau si trouvé\n        elementsToWrap.push(fieldElement.parentElement);\n    }\n});\n\n// Vérifie que des éléments ont été trouvés\nif (elementsToWrap.length > 0) {\n    // Crée le conteneur avec la classe 'infos'\n    const infosContainer = document.createElement('div');\n    infosContainer.className = 'infos';\n\n    // Insère le conteneur `.infos` avant le premier élément ciblé\n    const firstElement = elementsToWrap[0];\n    blockRegion.insertBefore(infosContainer, firstElement);\n\n    // Déplace chaque élément dans le conteneur `.infos`\n    elementsToWrap.forEach(element => infosContainer.appendChild(element));\n}\n}\n////////////////////  end div infos site  ////////////////////////\n\n\n////////////////////  start div infos actualité  ////////////////////////\n\n$(document).ready(function () {\n  // Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)\n  if ($(\".layout-container\").attr(\"id\") === \"page-node\") {\n      $(\"article.node-type-actualite\").each(function () {\n          let article = $(this);\n          let dateField = article.find(\".field_field_date\");\n          let typeField = article.find(\".field_field_type_d_actualite\");\n\n          // Vérifier si les deux éléments existent\n          if (dateField.length > 0 && typeField.length > 0) {\n              // Vérifier si l'encapsulation n'existe pas déjà\n              if (article.find(\".infos-actu\").length === 0) {\n                  // Créer un conteneur et y insérer les éléments\n                  let infosActu = $(\"<div>\").addClass(\"infos-actu\").append(dateField, typeField);\n                  \n                  // Ajouter ce conteneur après les champs existants\n                  article.append(infosActu);\n              }\n          }\n      });\n  }\n});\n\n////////////////////  end div infos actualité  ////////////////////////\n\n//////////////////////////////////////////////////////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments à déplacer\nconst documentsField = document.querySelector(\".field_field_documents\");\nconst liensSiteField = document.querySelector(\".field_field_liens_site\");\n\n// Sélectionner la destination\nconst thirdRegion = document.querySelector(\".block-region-third > div\");\n\n// Créer une nouvelle div pour englober les éléments déplacés\nconst wrapperDiv = document.createElement(\"div\");\nwrapperDiv.classList.add(\"documents-liens-wrapper\");\n\n// Déplacer les éléments dans la nouvelle div\nif (documentsField && liensSiteField && thirdRegion) {\n    wrapperDiv.appendChild(documentsField);\n    wrapperDiv.appendChild(liensSiteField);\n\n    // Ajouter la nouvelle div dans la destination\n    thirdRegion.appendChild(wrapperDiv);\n}\n});\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n// Sélectionner les éléments pertinents\nconst documentsLiensWrapper = document.querySelector(\".documents-liens-wrapper\");\nconst blockRegionThird = document.querySelector(\".block-region-third\");\n\n// Vérifier que les éléments existent avant de les manipuler\nif (documentsLiensWrapper && blockRegionThird) {\n    // Déplacer .documents-liens-wrapper en dehors du div contenant les boutons prev/next\n    blockRegionThird.appendChild(documentsLiensWrapper);\n}\n});\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n// Fonction pour déplacer le bloc en fonction de la taille de l'écran\nfunction moveLanguageSwitcher() {\n  const languageSwitcher = document.getElementById(\"block-quartiers-de-demain-selecteurdelangue\");\n  const navContainer = document.querySelector(\".header_nav_container\");\n\n  if (window.innerWidth <= 810) { // Si écran téléphone\n    if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {\n      navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container\n    }\n  } else { // Si écran non téléphone\n    const headerRightContainer = document.querySelector(\".header_right_container\");\n    if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {\n      headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale\n    }\n  }\n}\n\n// Déclencher au chargement et au redimensionnement\nmoveLanguageSwitcher();\nwindow.addEventListener(\"resize\", moveLanguageSwitcher);\n});\n\n///////////////////////////////////////////////////////////////\n\n/////////////// start class à view-rows-ressources ////////\n$(document).ready(function () {\n  $(\".view-rows-wrapper\").each(function () {\n      let h3Container = $(this).prev(\"h3\").find(\"div[class^='type-']\");\n      let classToAdd = h3Container.attr(\"class\"); // Récupère la classe complète (ex: \"type-Documentation\")\n\n      if (classToAdd) {\n          $(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper\n      }\n  });\n});\n////////////////// end class à view-rows-wrapper ////////////////\n\n\n\n/////////////////// start voir plus...  ressources ////////////////////\n\n$(document).ready(function () {\n    // Vérifier si on est sur la page avec l'ID #ressources\n    if ($(\"#ressources\").length > 0) {\n      $(\".view-rows-wrapper\").each(function () {\n          let container = $(this); // Cible uniquement cette section\n          let items = container.find(\".views-row\"); // Les éléments à afficher progressivement\n          let visibleCount = 4; // Nombre d'éléments visibles au départ\n        \n\n          // Récupérer la classe `type-XXX`\n          let typeClass = container.attr(\"class\").split(\" \").find(cls => cls.startsWith(\"type-\"));\n          let typeName = typeClass ? typeClass.replace(\"type-\", \"\").replace(/-/g, \" \") : \"contenu\"; // Nettoyer le nom\n\n          if (typeClass === \"type-podcast\" || typeClass === \"type-video\") {\n            visibleCount = 2; // Pour Podcast et Vidéo\n          }\n\n          // Ajouter un bouton dynamiquement après chaque `.view-rows-wrapper`\n          let button = $(\"<button>\")\n              .addClass(\"voir-plus\")\n              .text(\"Voir plus de \" + typeName)\n              .insertAfter(container);\n\n          // Cacher tous les éléments sauf les 4 premiers\n          items.hide().slice(0, visibleCount).show();\n\n          // Action sur le bouton\n          button.on(\"click\", function () {\n              let hiddenItems = container.find(\".views-row:hidden\").slice(0, 4); // Prochains éléments à afficher\n\n              if ($(this).text().includes(\"Voir plus\")) {\n                  hiddenItems.slideDown(); // Afficher avec un effet de glissement\n\n                  if (container.find(\".views-row:hidden\").length === 0) {\n                      $(this).text(\"Voir moins de \" + typeName); // Changer le texte du bouton si tout est affiché\n                  }\n              } else {\n                  container.find(\".views-row\").slice(visibleCount).slideUp(); // Replier les éléments\n                  $(this).text(\"Voir plus de \" + typeName); // Revenir à l'état initial\n              }\n          });\n      });\n    }\n});\n\n///////////////////  end voir plus...  ressources ////////////////////\n\n\n\n/////////////////// start voir plus...  actualite dans /actualites ////////////////////\n$(document).ready(function () {\n  if ($(\"#actualites\").length > 0) {\n    $(\".node-type-actualite\").each(function () {\n        let article = $(this);\n\n        // Sélection des éléments à afficher/masquer\n        let body = article.find(\".field_body\");\n        let links = article.find(\".field_field_liens\");\n\n        // Masquer les éléments au chargement\n        body.hide();\n        links.hide();\n\n        // Créer le bouton flèche\n        let toggleButton = $(\"<button>\")\n            .addClass(\"toggle-actualite\")\n            .html(\"&#9660;\") // Flèche vers le bas\n            .insertAfter(article); // Insérer après l'article\n\n        // Action au clic sur la flèche\n        toggleButton.on(\"click\", function () {\n            if (body.is(\":visible\")) {\n                body.slideUp();\n                links.slideUp();\n                $(this).html(\"&#9660;\"); // Changer en flèche vers le bas\n            } else {\n                body.slideDown();\n                links.slideDown();\n                $(this).html(\"&#9650;\"); // Changer en flèche vers le haut\n            }\n        });\n    });\n  }\n});\n\n\n///////////////////  end voir plus...  actualite dans /actualites ////////////////////\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
 
 /***/ })
 
@@ -108,7 +98,6 @@ eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal)
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module can't be inlined because the eval devtool is used.
 /******/ 	__webpack_modules__["./src/assets/js/quartiers_de_demain.js"](0, {}, __webpack_require__);
-/******/ 	__webpack_modules__["./src/assets/js/page_ressources.js"](0, {}, __webpack_require__);
 /******/ 	__webpack_modules__["./src/assets/js/animated_formes.js"](0, {}, __webpack_require__);
 /******/ 	var __webpack_exports__ = {};
 /******/ 	__webpack_modules__["./src/assets/scss/quartiers_de_demain.scss"](0, __webpack_exports__, __webpack_require__);
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 06effd6..297a8e5 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -798,6 +798,9 @@ footer {
     flex-direction: column;
   }
 }
+.footer button.voir-plus {
+  display: none;
+}
 
 .layout-sidebar-first {
   width: 25%;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/page_ressources.js b/web/themes/custom/quartiers_de_demain/src/assets/js/page_ressources.js
deleted file mode 100644
index abe383b..0000000
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/page_ressources.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * @file
- * quartiers_de_demain behaviors.
- */
- (function (Drupal) {
-
-    'use strict';
-  
-    Drupal.behaviors.quartiers_de_demain = {
-      attach: function (context, settings) {
-        console.log('It works!');
-      }
-    };
-  } (Drupal));
-  
-  
-
-  
-  
-  /////////////// start class à view-rows-ressources ////////
-  $(document).ready(function () {
-    $(".view-rows-wrapper").each(function () {
-        let h3Container = $(this).prev("h3").find("div[class^='type-']");
-        let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
-  
-        if (classToAdd) {
-            $(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper
-        }
-    });
-  });
-  ////////////////// end class à view-rows-wrapper ////////////////
-  
-  
-  
-  /////////////////// start voir plus...  ressources ////////////////////
-  
-  $(document).ready(function () {
-      // Vérifier si on est sur la page avec l'ID #ressources
-      if ($("#ressources").length > 0) {
-        $(".view-rows-wrapper").each(function () {
-            let container = $(this); // Cible uniquement cette section
-            let items = container.find(".views-row"); // Les éléments à afficher progressivement
-            let visibleCount = 4; // Nombre d'éléments visibles au départ
-          
-  
-            // Récupérer la classe `type-XXX`
-            let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
-            let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
-  
-            if (typeClass === "type-podcast" || typeClass === "type-video") {
-              visibleCount = 2; // Pour Podcast et Vidéo
-            }
-  
-            // Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
-            let button = $("<button>")
-                .addClass("voir-plus")
-                .text("Voir plus de " + typeName)
-                .insertAfter(container);
-  
-            // Cacher tous les éléments sauf les 4 premiers
-            items.hide().slice(0, visibleCount).show();
-  
-            // Action sur le bouton
-            button.on("click", function () {
-                let hiddenItems = container.find(".views-row:hidden").slice(0, 4); // Prochains éléments à afficher
-  
-                if ($(this).text().includes("Voir plus")) {
-                    hiddenItems.slideDown(); // Afficher avec un effet de glissement
-  
-                    if (container.find(".views-row:hidden").length === 0) {
-                        $(this).text("Voir moins de " + typeName); // Changer le texte du bouton si tout est affiché
-                    }
-                } else {
-                    container.find(".views-row").slice(visibleCount).slideUp(); // Replier les éléments
-                    $(this).text("Voir plus de " + typeName); // Revenir à l'état initial
-                }
-            });
-        });
-      }
-  });
-  
-  ///////////////////  end voir plus...  ressources ////////////////////
-  
-  
-  
-
-  
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
index ec78bcf..361376a 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
@@ -764,7 +764,7 @@ $(document).ready(function () {
             visibleCount = 2; // Pour Podcast et Vidéo
           }
 
-          // Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
+          // Ajouter un bouton dynamiquement après chaque `.view-rows-wrapper`
           let button = $("<button>")
               .addClass("voir-plus")
               .text("Voir plus de " + typeName)
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
index d7086e8..88c3542 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
@@ -1,8 +1,6 @@
 
 #actualites{
     background-color: #f6f7f3;
-
-
     .layout-content{
         // padding-top: 1rem;
         .content_container{
@@ -81,7 +79,6 @@
                                                 width: 250px;
                                                 height: auto;
                                                 img{
-                                                
                                                     width: 100%;
                                                     height: auto;
                                                     object-fit: cover;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
index 926eae2..57bf03a 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
@@ -1,9 +1,6 @@
 #home{
-
-   
     .config_pages--type--diaporama-home{
         position: relative;
-        
         .diaporama{
             .slick-list{
                 padding: 0 !important;   
@@ -19,14 +16,9 @@
                             // animation-duration: 4.5s;
                             // animation-name: zoomOut;
                             // animation-iteration-count: infinite;
-                            
                         }
-
                     }
                     
-                     
-                            
-                    
                     blockquote{
                             position: relative;
                             top: -30px;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
index 937aea8..96ab65f 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
@@ -201,6 +201,9 @@ footer{
             flex-direction: column;
         }
     }
+    button.voir-plus{
+        display: none;
+    }
 
 }
 
diff --git a/web/themes/custom/quartiers_de_demain/webpack.config.js b/web/themes/custom/quartiers_de_demain/webpack.config.js
index 8a718e3..f9c21ea 100644
--- a/web/themes/custom/quartiers_de_demain/webpack.config.js
+++ b/web/themes/custom/quartiers_de_demain/webpack.config.js
@@ -5,7 +5,7 @@ let config = {
     mode: 'development',
     entry: [
         "./src/assets/js/quartiers_de_demain.js",
-        "./src/assets/js/page_ressources.js",
+       
         // "./src/assets/js/animated_logo.js",
         "./src/assets/js/animated_formes.js",
         "./src/assets/scss/quartiers_de_demain.scss",