From f5b4092e981d8e387c3408ac8edfca783a10287b Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 14 Mar 2025 11:13:32 +0100
Subject: [PATCH] debut css /actualites

---
 .../quartiers_de_demain/dist/assets/bundle.js |  13 +-
 .../dist/assets/css/bundle.css                | 118 +++++++++++++-----
 .../src/assets/js/quartiers_de_demain.js      |  87 ++++++++++---
 .../src/assets/scss/pages/actualites.scss     |  98 ++++++++++++---
 .../src/assets/scss/pages/ressources.scss     |   2 +-
 ...d--node--field-images--actualite.html.twig |  78 ++++++++++++
 .../templates/node--actualite.html.twig       |   3 +-
 7 files changed, 328 insertions(+), 71 deletions(-)
 create mode 100644 web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig

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 17ba9c5..c989864 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -30,13 +30,23 @@ 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\n\n\n$(document).ready(function(){\n    let actuview = $('.content-actus .view .view-rows-wrapper')\n    if (actuview) {\n      actuview.slick({\n        slidesToShow: 3,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        // centerMode: true,\n        adaptiveHeight: false,\n        autoplay: false,\n        // autoplaySpeed: 1500,\n        // infinite: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              // slidesToScroll: 1,\n              adaptiveHeight: false,\n              arrows: true,\n              draggable: true,\n              // centerMode: true,\n              // centerPadding: '100px',\n              autoplay: false,\n              // autoplaySpeed: 2000,\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\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\n////////////  end slideshow home  ////////////////////////// \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\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-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?");
 
 /***/ })
 
@@ -98,6 +108,7 @@ 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 4c7eb8e..0fb5c74 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
@@ -3837,7 +3837,7 @@ main {
   font-family: "gilroy-medium";
 }
 #ressources .layout-content .content_container .views-element-container {
-  margin-left: 20%;
+  margin-left: 15%;
   width: 65%;
 }
 #ressources .layout-content .content_container .views-element-container h3 {
@@ -3982,7 +3982,7 @@ main {
 #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
   margin-top: 3rem;
   margin-left: 15%;
-  margin-bottom: 1rem;
+  margin-bottom: 4rem;
   width: 70%;
 }
 @media (max-width: 810px) {
@@ -4010,44 +4010,80 @@ main {
 #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
   width: 100%;
   font-size: 0.5rem;
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: solid black 0.5px;
 }
 #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite {
-  width: 100%;
-  padding-bottom: 7rem;
+  width: 85%;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
   display: grid;
+  grid-template-columns: 1fr 2fr;
   grid-template-rows: repeat(5 1fr);
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
   grid-column: 1;
   grid-row: 1/span 5;
+  width: 250px;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images img {
-  width: 100%;
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama {
+  display: flex;
+  flex-direction: row;
+  align-items: center !important;
+  margin: auto;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list {
+  margin: auto;
+  padding-top: 0 !important;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom {
+  width: 250px;
   height: auto;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption {
   margin-left: 0;
   margin-top: 0;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption p {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption p {
   margin-top: 0;
   font-size: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite,
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date,
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site,
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title,
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body,
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button {
+  margin: auto;
+  transform: none;
+  top: 20%;
+  height: 0;
+  width: 0;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-next {
+  right: 0%;
+  padding: 0;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-prev {
+  left: 0%;
+  padding: 0;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens {
   grid-column: 2;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite {
   order: 2;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite a {
   text-transform: uppercase;
   color: red;
   font-size: 0.6rem;
@@ -4055,11 +4091,11 @@ main {
   display: inline-flex;
   align-items: center;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a::before {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite a::before {
   content: url("../img/type-actu.svg");
   padding-right: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date {
   order: 3;
   color: red;
   font-size: 0.6rem;
@@ -4067,43 +4103,47 @@ main {
   display: inline-flex;
   align-items: center;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date::before {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date::before {
   content: url("../img/date-actu.svg");
   padding-right: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site {
   order: 4;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site a {
   color: red;
   font-size: 0.6rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a::before {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site a::before {
   content: url("../img/map_pointer.svg");
   padding-right: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title {
   order: 5;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title a {
   color: rgb(7, 50, 194);
   font-size: 1.2rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body {
   order: 6;
   padding-bottom: 2rem;
+  opacity: 1 !important;
+  transform: none !important;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body p {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body p {
   font-size: 0.8rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens {
   order: 7;
   padding-bottom: 2rem;
   padding-top: 2rem;
   width: fit-content;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a {
   display: flex;
   flex-direction: row;
   padding-left: 0.5rem;
@@ -4114,12 +4154,26 @@ main {
   text-transform: uppercase;
   font-size: 0.6rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a svg {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a svg {
   display: none;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a::after {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a::after {
   display: inline-flex;
   content: url("../img/noun-arrow-to-right.svg");
   padding-right: 0.2rem;
   padding-left: 0.2rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .toggle-actualite {
+  display: block;
+  width: 40px;
+  height: 40px;
+  margin: 10px auto;
+  border: none;
+  background-color: transparent;
+  font-size: 24px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .toggle-actualite:hover {
+  transform: scale(1.2);
 }
\ 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 41a6c88..ec78bcf 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
@@ -372,36 +372,24 @@ document.addEventListener('DOMContentLoaded', function() {
 
 
 //////////// start slideshow home  ////////////////////////// 
-
-
-
 $(document).ready(function(){
     let actuview = $('.content-actus .view .view-rows-wrapper')
     if (actuview) {
       actuview.slick({
         slidesToShow: 3,
-        // slidesToScroll: 1,
         dots: false,
         arrows: true,
-        // centerMode: true,
         adaptiveHeight: false,
         autoplay: false,
-        // autoplaySpeed: 1500,
-        // infinite: true,
-        // centerPadding: '100px',
         responsive: [
           {
             breakpoint: 810,
             settings: {
               slidesToShow: 1,
-              // slidesToScroll: 1,
               adaptiveHeight: false,
               arrows: true,
               draggable: true,
-              // centerMode: true,
-              // centerPadding: '100px',
               autoplay: false,
-              // autoplaySpeed: 2000,
             }
           }]
       });
@@ -414,9 +402,6 @@ $(document).ready(function(){
 
 });
 
-
-
-
 $(document).ready(function () {
   let diapohome = $('.config_pages--type--diaporama-home .diaporama');
 
@@ -448,9 +433,41 @@ $(document).ready(function () {
 
 }
 });
-
 ////////////  end slideshow home  ////////////////////////// 
 
+
+//////////// start slideshow /actualites  ////////////////////////// 
+$(document).ready(function(){
+  let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama')
+  if (actuview2) {
+    actuview2.slick({
+      slidesToShow: 1,
+      dots: false,
+      arrows: true,
+      adaptiveHeight: true,
+      autoplay: false,
+      responsive: [
+        {
+          breakpoint: 810,
+          settings: {
+            slidesToShow: 1,
+            adaptiveHeight: true,
+            arrows: true,
+            draggable: true,
+            autoplay: false,
+          }
+        }]
+    });
+    console.log('salut slick actualites');
+  }
+  // $('.slick-carousel').slick({
+  //   lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
+  // });
+});
+////////////  end slideshow /actualites  ////////////////////////// 
+
+
+
 //////////////// start lightbox galerie image page site////////////////////////
 
     // Sélection des images et de leurs légendes dans la galerie
@@ -779,6 +796,44 @@ $(document).ready(function () {
 
 
 
+/////////////////// start voir plus...  actualite dans /actualites ////////////////////
+$(document).ready(function () {
+  if ($("#actualites").length > 0) {
+    $(".node-type-actualite").each(function () {
+        let article = $(this);
+
+        // Sélection des éléments à afficher/masquer
+        let body = article.find(".field_body");
+        let links = article.find(".field_field_liens");
+
+        // Masquer les éléments au chargement
+        body.hide();
+        links.hide();
+
+        // Créer le bouton flèche
+        let toggleButton = $("<button>")
+            .addClass("toggle-actualite")
+            .html("&#9660;") // Flèche vers le bas
+            .insertAfter(article); // Insérer après l'article
+
+        // Action au clic sur la flèche
+        toggleButton.on("click", function () {
+            if (body.is(":visible")) {
+                body.slideUp();
+                links.slideUp();
+                $(this).html("&#9660;"); // Changer en flèche vers le bas
+            } else {
+                body.slideDown();
+                links.slideDown();
+                $(this).html("&#9650;"); // Changer en flèche vers le haut
+            }
+        });
+    });
+  }
+});
+
+
+///////////////////  end voir plus...  actualite dans /actualites ////////////////////
 
 
 })(jQuery, window);
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 a8169f5..27baae6 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
@@ -13,7 +13,7 @@
             #block-quartiers-de-demain-titredepage{
                 margin-top: 3rem;
                 margin-left: 15%;
-                margin-bottom: 1rem;
+                margin-bottom: 4rem;
                 width: 70%;
                 @media(max-width: 810px){
                     margin-top: 14rem;
@@ -42,29 +42,70 @@
                     .views-row{
                         width: 100%;
                         font-size: 0.5rem;
-                        margin-bottom: 1rem;
+                        margin-bottom: 2rem;
+                        padding-bottom: 1rem;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        border-bottom: solid black 0.5px;
                         .node-type-actualite{
-                            width: 100%;
-                            padding-bottom: 7rem;
-                            div{
+                            width: 85%;
+                            // padding-bottom: 2rem;
+                            
+                            .content-wrapper-actu{
                                 display: grid;
-                                // grid-template-columns: 1fr 1.2fr;
+                                grid-template-columns: 1fr 2fr;
                                 grid-template-rows: repeat(5 1fr);
                                 .field_field_images{
-                                    grid-column: 1;
+                                   grid-column: 1;
                                    grid-row: 1 /span 5;
-                                    img{
-                                        width: 100%;
-                                        height: auto;
-                                    }
-                                    blockquote.image-field-caption{
-                                        margin-left: 0;
-                                        margin-top: 0;
-                                        p{
-                                            margin-top: 0;
-                                            font-size: 0.4rem;
+                                   width: 250px;
+                                   
+                                   .actu-diaporama{
+                                        // height: 150px;
+                                        // width: 100%;
+                                        display: flex;
+                                        flex-direction: row;
+                                        align-items: center !important;
+                                        margin:auto;
+                                        .slick-list{
+                                            margin: auto;
+                                            padding-top: 0 !important;
+                                            .cadre-img-zoom{
+                                                width: 250px;
+                                                height: auto;
+                                                img{
+                                                
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    object-fit: cover;
+                                                }
+                                                blockquote.image-field-caption{
+                                                    margin-left: 0;
+                                                    margin-top: 0;
+                                                    p{
+                                                        margin-top: 0;
+                                                        font-size: 0.4rem;
+                                                    }
+                            
+                                                }
+                                            }
+                                        }
+                                        button{
+                                            margin: auto;
+                                            transform: none;
+                                            top: 20%;
+                                            height: 0;
+                                            width: 0;
+                                        }
+                                        button.slick-next{
+                                            right: 0% ;
+                                            padding: 0;
+                                        }
+                                        button.slick-prev{
+                                            left: 0%;
+                                            padding: 0;
                                         }
-                
                                     }
                                 }
                                 .field_field_type_d_actualite,
@@ -121,13 +162,17 @@
                                 }
                                 .field_title{
                                     order: 5;
+                                    a{
                                     color: $blue_QDD;
                                     font-size: 1.2rem;
+                                    }
                                 }
                             
                                 .field_body {
                                     order: 6;
                                     padding-bottom: 2rem;
+                                    opacity: 1 !important;
+                                    transform:none !important;
                                     p{
                                     font-size: 0.8rem;
                                     }
@@ -167,7 +212,22 @@
 
                             }
                         }
-            
+                        .toggle-actualite {
+                            display: block;
+                            width: 40px;
+                            height: 40px;
+                            margin: 10px auto;
+                            border: none;
+                            background-color: transparent;
+                            font-size: 24px;
+                            cursor: pointer;
+                            transition: transform 0.3s ease;
+                        }
+                        
+                        .toggle-actualite:hover {
+                            transform: scale(1.2);
+                        }
+                        
 
                     }
 
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
index 3982067..4c05a49 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
@@ -30,7 +30,7 @@
                 
             }
             .views-element-container{
-                margin-left: 20%;
+                margin-left: 15%;
                 width: 65%;
                 h3{
                     &::before{
diff --git a/web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig
new file mode 100644
index 0000000..be62181
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig
@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{%
+  set ancre_href = '#paragraph-id--' ~ paragraph.id()
+%}
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="actu-diaporama">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig b/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig
index e398e49..88d39b7 100644
--- a/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig
@@ -88,9 +88,8 @@
     </footer>
   {% endif %}
 
-  <div{{ content_attributes }}>
+  <div class="content-wrapper-actu"{{ content_attributes }}>
     {{ content }}
-
   </div>
 
   {# {% block content %}