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 bf1125b..b56dff7 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -36,7 +36,7 @@ eval("document.addEventListener('scroll', function() {\n    const scrolled = win
   \**********************************************/
 /***/ (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  // jQuery(document).ready(function($){\n\n  //   $('.open-block').click(function(){\n  //     $(this).toggleClass('opened');\n\n  //     $('.header_nav_container').toggleClass('display-nav-opened');\n    \n  //     if(mobile == true){\n  //       $(\"body\").css(\"overflow\",\"hidden\");\n  //     }\n\n  //   });\n  \n  //   // Hide the header_nav_container when a link inside it is clicked\n  //   $('.header_nav_container li').click(function() {\n  //       $('.header_nav_container').fadeOut();\n  //   });\n\n\n\n\n  // });\n\n  //////// start header ////////////\n  document.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 parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var 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\n  function 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    }\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  }\n\n\n  $( document ).ready(function() {\n    scrollReaveal();\n  });\n\n  ////////////////////////  end script smooth apparition des textes /////////////////\n\n  //////////////////// start Timeline script ///////////////////////\n\n\n  document.addEventListener('DOMContentLoaded', function() {\n    let currentSlide = 0;\n\n    //// responsive ///\n    function getVisibleSlides() {\n      if (window.innerWidth <= 600) {\n        return 1; // Show 1 slide on small screens\n      } else if (window.innerWidth <= 900) {\n        return 2; // Show 2 slides on medium screens\n      } else {\n        return 3; // Show 3 slides on large screens\n      }\n    }\n\n    function showSlides(index) {\n      const slides = document.querySelectorAll('.__paragraphs');\n      const totalSlides = slides.length;\n      const visibleSlides = getVisibleSlides();\n      const maxSlide = totalSlides - visibleSlides;\n\n      // Adjust the index to ensure it stays within bounds\n      currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n      // Calculate the offset for the transform\n      const offset = currentSlide * -50 / visibleSlides;\n      const offsetmobile = currentSlide * -10 / visibleSlides;\n      if (window.innerWidth <= 600){\n      document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n      } else {\n        document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n      }\n      \n\n      // Enable/disable arrows based on the current slide\n      document.getElementById('arrowPrev').disabled = currentSlide === 0;\n      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n    }\n\n    function prevSlide() {\n      showSlides(currentSlide - 1);\n    }\n\n    function nextSlide() {\n      showSlides(currentSlide + 1);\n    }\n\n    // Attach event listeners\n    document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n    document.getElementById('arrowNext').addEventListener('click', nextSlide);\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    // for each .date element add or remove ::before \n    document.querySelectorAll('.date').forEach(function(dateElement) {\n      const date2Element = dateElement.querySelector('.date2');\n      const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n      // Check if the .date2 element is empty\n      if (date2Element && !date2Element.textContent.trim()) {\n        // Add the .only class to the year element\n        yearElement.classList.add('only');\n      }\n    });\n\n            // Handle window resize\n    window.addEventListener('resize', function() {\n      showSlides(currentSlide); // Recalculate the slides on resize\n    });\n  // });\n\n\n    // Initialize\n    showSlides(currentSlide);\n  });\n\n\n  //////////////////////// end Timeline script /////////////////////////////////////////////\n\n  ///////////////////  caracteres  body actus/////////////////////////\n\n  document.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 p').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 ////////////  slideshow home  ////////////////////////// \n\n  $(document).ready(function(){\n      $('.content-actus .view').slick({\n        slidesToShow: 3,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        centerMode: true,\n        adaptiveHeight: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: false,\n              arrows: true,\n              draggable: true,\n              centerMode: true,\n            }\n          }]\n      });\n      console.log('salut slick home');\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  // jQuery(document).ready(function($){\n\n  //   $('.open-block').click(function(){\n  //     $(this).toggleClass('opened');\n\n  //     $('.header_nav_container').toggleClass('display-nav-opened');\n    \n  //     if(mobile == true){\n  //       $(\"body\").css(\"overflow\",\"hidden\");\n  //     }\n\n  //   });\n  \n  //   // Hide the header_nav_container when a link inside it is clicked\n  //   $('.header_nav_container li').click(function() {\n  //       $('.header_nav_container').fadeOut();\n  //   });\n\n\n\n\n  // });\n\n  //////// start header ////////////\n  document.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 parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n  var 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\n  function 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    }\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  }\n\n\n  $( document ).ready(function() {\n    scrollReaveal();\n  });\n\n  ////////////////////////  end script smooth apparition des textes /////////////////\n\n  //////////////////// start Timeline script ///////////////////////\n\n\n  document.addEventListener('DOMContentLoaded', function() {\n    let currentSlide = 0;\n\n    //// responsive ///\n    function getVisibleSlides() {\n      if (window.innerWidth <= 600) {\n        return 1; // Show 1 slide on small screens\n      } else if (window.innerWidth <= 900) {\n        return 2; // Show 2 slides on medium screens\n      } else {\n        return 3; // Show 3 slides on large screens\n      }\n    }\n\n    function showSlides(index) {\n      const slides = document.querySelectorAll('.__paragraphs');\n      const totalSlides = slides.length;\n      const visibleSlides = getVisibleSlides();\n      const maxSlide = totalSlides - visibleSlides;\n\n      // Adjust the index to ensure it stays within bounds\n      currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n      // Calculate the offset for the transform\n      const offset = currentSlide * -50 / visibleSlides;\n      const offsetmobile = currentSlide * -10 / visibleSlides;\n      if (window.innerWidth <= 600){\n      document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n      } else {\n        document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n      }\n      \n\n      // Enable/disable arrows based on the current slide\n      document.getElementById('arrowPrev').disabled = currentSlide === 0;\n      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n    }\n\n    function prevSlide() {\n      showSlides(currentSlide - 1);\n    }\n\n    function nextSlide() {\n      showSlides(currentSlide + 1);\n    }\n\n    // Attach event listeners\n    document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n    document.getElementById('arrowNext').addEventListener('click', nextSlide);\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\nfunction 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\nupdateDateClasses();\n\n// MutationObserver pour surveiller les changements dans le DOM\nconst observer = new MutationObserver(function(mutationsList, observer) {\n  for(let mutation of mutationsList) {\n    if (mutation.type === 'childList') {\n      updateDateClasses();\n    }\n  }\n});\n\n// Configuration de l'observateur\nconst config = { childList: true, subtree: true };\n\n// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique\nobserver.observe(document.body, config);\n\n\n            // Handle window resize\n    window.addEventListener('resize', function() {\n      showSlides(currentSlide); // Recalculate the slides on resize\n    });\n  // });\n\n\n    // Initialize\n    showSlides(currentSlide);\n  });\n\n\n  //////////////////////// end Timeline script /////////////////////////////////////////////\n\n  ///////////////////  caracteres  body actus/////////////////////////\n\n  document.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 p').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 ////////////  slideshow home  ////////////////////////// \n\n  $(document).ready(function(){\n      $('.content-actus .view').slick({\n        slidesToShow: 3,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        centerMode: true,\n        adaptiveHeight: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: false,\n              arrows: true,\n              draggable: true,\n              centerMode: true,\n            }\n          }]\n      });\n      console.log('salut slick home');\n\n  });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
 
 /***/ })
 
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 df57bf9..f3a325f 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
@@ -356,17 +356,42 @@
       }
     });
 
-    // for each .date element add or remove ::before 
-    document.querySelectorAll('.date').forEach(function(dateElement) {
-      const date2Element = dateElement.querySelector('.date2');
-      const yearElement = dateElement.querySelector('.field_field_date_de_annee');
+// Fonction pour ajouter ou retirer la classe .only
+function updateDateClasses() {
+  document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
+    const date2Element = dateElement.querySelector('.date2');
+    const yearElement = dateElement.querySelector('.field_field_date_de_annee');
 
-      // Check if the .date2 element is empty
-      if (date2Element && !date2Element.textContent.trim()) {
-        // Add the .only class to the year element
+    if (date2Element && !date2Element.textContent.trim()) {
+      if (yearElement) {
         yearElement.classList.add('only');
       }
-    });
+    } else {
+      if (yearElement) {
+        yearElement.classList.remove('only');
+      }
+    }
+  });
+}
+
+// Exécuter la fonction une première fois pour le contenu déjà présent
+updateDateClasses();
+
+// MutationObserver pour surveiller les changements dans le DOM
+const observer = new MutationObserver(function(mutationsList, observer) {
+  for(let mutation of mutationsList) {
+    if (mutation.type === 'childList') {
+      updateDateClasses();
+    }
+  }
+});
+
+// Configuration de l'observateur
+const config = { childList: true, subtree: true };
+
+// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
+observer.observe(document.body, config);
+
 
             // Handle window resize
     window.addEventListener('resize', function() {