From 9986179153e7265077d06593d2373ec4224efd5b Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 9 Dec 2025 12:54:21 +0100
Subject: [PATCH] header sans animation

---
 .../quartiers_de_demain/dist/assets/bundle.js |  621 +++++-----
 .../dist/assets/bundle.js.map                 |    2 +-
 .../dist/assets/css/bundle.css                |  313 ++---
 .../src/assets/js/header.js                   |  622 +++++-----
 .../src/assets/scss/partials/header.scss      | 1073 ++++++++++-------
 .../field--block-content--logo-link.html.twig |    4 +-
 6 files changed, 1300 insertions(+), 1335 deletions(-)

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 e1dba3f..317d253 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -785,194 +785,74 @@ document.addEventListener('keydown', (e) => {
 /*!*********************************!*\
   !*** ./src/assets/js/header.js ***!
   \*********************************/
-// // //////// start header ////////////
+
+
+
 // // document.addEventListener('DOMContentLoaded', function() {
 
-// //     const header = document.querySelector('header[role="banner"]');
-// //     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)');
-// //     const headerNavContainer = document.querySelector('.header_nav_container');
-// //     const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
-// //     const isTargetPath = window.location.pathname === '/';
-  
-// //     // Fonction pour démarrer l'animation du logo SVG
-// //     function startLogoAnimation() {
-// //       logo.classList.add('animated');
-// //     }
-  
-// //     // Fonction pour arrêter l'animation du logo SVG
-// //     function stopLogoAnimation() {
-// //       logo.classList.remove('animated');
-// //     }
-  
-// //     // Vérifier si le header a la classe header--collapse
-// //     function checkHeaderCollapse() {
-// //       if (header.classList.contains('header--collapsed')) {
-// //         stopLogoAnimation();
-// //       } else if (header.classList.contains('header--collapsed-already'))  {
-// //           stopLogoAnimation();
-// //         } else {
-// //         startLogoAnimation();
-// //       }
-  
-// //     }
+// //   const header = document.querySelector('header[role="banner"]');
+// //   const headerNavContainer = document.querySelector('.header_nav_container');
 
+// //   const threshold = 100;
+// //   let lastScrollTop = 0;
+// //   let isHidden = false;
+// //   let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
 
+// //   /* -------------------
+// //      Animations nav
+// //   ------------------- */
 
-// //     // Appeler la fonction au chargement initial
-// //     checkHeaderCollapse();
-  
-// //     // Observer les changements de classe sur le header
-// //     const observer = new MutationObserver(function(mutations) {
-// //       mutations.forEach(function(mutation) {
-// //         if (mutation.attributeName === 'class') {
-// //           checkHeaderCollapse();
-// //         }
-// //       });
+// //   function slideOut() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(0)' },
+// //       { transform: 'translateX(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
 // //     });
-// //     observer.observe(header, { attributes: true });
-  
-  
-// //     // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
-// //     if (!isFirstLoad || !isTargetPath) {
-// //       header.classList.add('header--collapsed-already');
-// //       stopLogoAnimation();
-// //     } else {
-// //       // Sinon, appliquer la transition après un délai, sauf si scroll
-// //       let collapseTimeout = setTimeout(() => {
-// //         header.classList.add('header--collapsed');
-// //       }, 1000);
-  
-// //       function interruptCollapseOnScroll() {
-// //         if (!header.classList.contains('header--collapsed')) {
-// //           clearTimeout(collapseTimeout); // annule l'animation
-// //           header.classList.add('header--collapsed');
-// //         }
-// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
-// //       }
-  
-// //       window.addEventListener('scroll', interruptCollapseOnScroll);
-// //     }
-// //     //////////////////////////////////////
-  
-// //     let lastScrollTop = 0;
-// //     let threshold = 100; // Change this value as needed
-// //     let isHidden = false;
-  
-// //     function slideOut() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateX(0)' },
-// //         { transform: 'translateX(-100%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = true;
-// //     }
-  
-// //     function slideIn() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateX(-100%)' },
-// //         { transform: 'translateX(0)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = false;
-// //     }
-    
-// //     function slideDown() {
-// //       // headerNavContainer.style.display = 'block';
-// //       headerNavContainer.animate([
-// //         { transform: 'translateY(0%)' },
-// //         { transform: 'translateY(+100%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = false;
-// //     }
-  
-// //     function slideUp() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateY(100%)' },
-// //         { transform: 'translateY(0%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       }).onfinish = function() {
-// //         // headerNavContainer.style.display = 'none';
-// //       };
-// //       isHidden = true;
-// //     }
-// //       // Fonction pour ajuster la hauteur du header lors du défilement
-// //       function adjustHeaderHeight() {
-// //         if (window.scrollY > 0) {
-// //           header.classList.add('shrink');
-// //         } else {
-// //           header.classList.remove('shrink');
-// //         }
-// //       }
-  
-// //     function handleScroll() {
-// //       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-// //       const isMobile = window.innerWidth < 811;
-  
-// //       if (scrollTop > threshold && !isHidden) {
-// //         if (isMobile) {
-// //           slideUp();
-// //         } else {
-// //           slideOut();
-// //         }
-// //       } else if (scrollTop <= threshold && isHidden) {
-// //         if (isMobile) {
-// //           slideDown();
-// //         } else {
-// //           slideIn();
-// //         }
-// //       }
-  
-  
-// //       lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
-// //     }
-  
-// //     function handleTouchAndMouseEnter() {
-// //       if (isHidden) {
-// //         if (window.innerWidth < 811) {
-// //           slideDown();
-// //         } else {
-// //           slideIn();
-// //         }
-// //       }
-// //     }
-  
-// //     function handleTouchAndMouseLeave() {
-// //       if (lastScrollTop > threshold && !isHidden) {
-// //         if (window.innerWidth < 811) {
-// //           slideUp();
-// //         } else {
-// //           slideOut();
-// //         }
-// //       }
-// //     }
-  
-// //     window.addEventListener('scroll', handleScroll);
-// //     window.addEventListener('scroll', adjustHeaderHeight);
-  
-// //     // Mouse events for desktop
-// //     header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-// //     header.addEventListener('mouseleave', handleTouchAndMouseLeave);
-  
-// //     // Touch events for tablets and mobile devices
-// //     header.addEventListener('touchstart', handleTouchAndMouseEnter);
-// //     header.addEventListener('touchend', handleTouchAndMouseLeave);
-  
-// //     // Initial check to see if we're at the top of the page
+// //     isHidden = true;
+// //   }
+
+// //   function slideIn() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(-100%)' },
+// //       { transform: 'translateX(0)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideDown() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(-100%)' },
+// //       { transform: 'translateY(0%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideUp() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(0%)' },
+// //       { transform: 'translateY(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = true;
+// //   }
+
+// //   function initNavPosition() {
 // //     if (window.pageYOffset <= threshold) {
 // //       if (window.innerWidth < 811) {
 // //         slideDown();
-// //       } else { 
+// //       } else {
 // //         slideIn();
-// //       } 
+// //       }
 // //     } else {
 // //       if (window.innerWidth < 811) {
 // //         slideUp();
@@ -980,105 +860,227 @@ document.addEventListener('keydown', (e) => {
 // //         slideIn();
 // //       }
 // //     }
-  
-// //   });
-  
-// //   //////// end header ////////////
-  
+// //   }
+
+// //   /* -------------------
+// //      Scroll / resize header
+// //   ------------------- */
+
+// //   function adjustHeaderHeight() {
+// //     if (window.scrollY > 0) {
+// //       header.classList.add('shrink');
+// //     } else {
+// //       header.classList.remove('shrink');
+// //     }
+// //   }
+
+// //   function handleScroll() {
+// //     if (!introDone) return; // ici ça passe, introDone = true
+
+// //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+// //     const isMobile = window.innerWidth < 811;
+
+// //     if (scrollTop > threshold && !isHidden) {
+// //       if (isMobile) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     } else if (scrollTop <= threshold && isHidden) {
+// //       if (isMobile) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+
+// //     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+// //   }
+
+// //   function handleTouchAndMouseEnter() {
+// //     if (!introDone) return;
+
+// //     if (isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   function handleTouchAndMouseLeave() {
+// //     if (!introDone) return;
+
+// //     if (lastScrollTop > threshold && !isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     }
+// //   }
+
+// //   // ✅ on n'a plus besoin de masquer la nav au début
+// //   if (headerNavContainer) {
+// //     headerNavContainer.style.visibility = 'visible';
+// //   }
+
+// //   window.addEventListener('scroll', handleScroll);
+// //   window.addEventListener('scroll', adjustHeaderHeight);
+
+// //   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+// //   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+// //   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+// //   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+// //   // ✅ position initiale de la nav
+// //   initNavPosition();
+
+// // });
 
 
-///////////////start header sans animation logo////////////////
+// document.addEventListener('DOMContentLoaded', function() {
 
-document.addEventListener('DOMContentLoaded', function() {
+//   const header = document.querySelector('header[role="banner"]');
+//   const headerNavContainer = document.querySelector('.header_nav_container');
 
+//   if (!header || !headerNavContainer) return;
+
+//   const threshold = 100;
+//   let lastScrollTop = 0;
+//   let isHidden = false;
+//   let introDone = true; // ✅ pas d'intro, donc direct prêt
+
+//   /* -------------------
+//      Helpers show / hide
+//   ------------------- */
+
+//   function hideNav() {
+//     headerNavContainer.classList.add('nav-hidden');
+//     isHidden = true;
+//   }
+
+//   function showNav() {
+//     headerNavContainer.classList.remove('nav-hidden');
+//     isHidden = false;
+//   }
+
+//   function isMobile() {
+//     return window.innerWidth < 811;
+//   }
+
+//   /* -------------------
+//      Position initiale
+//   ------------------- */
+
+//   function initNavPosition() {
+//     if (window.pageYOffset <= threshold) {
+//       showNav();   // en haut de page → nav visible
+//     } else {
+//       if (isMobile()) {
+//         hideNav(); // mobile scrollé → nav cachée
+//       } else {
+//         showNav(); // desktop : nav visible même en bas
+//       }
+//     }
+//   }
+
+//   /* -------------------
+//      Scroll / resize header
+//   ------------------- */
+
+//   function adjustHeaderHeight() {
+//     if (window.scrollY > 0) {
+//       header.classList.add('shrink');
+//     } else {
+//       header.classList.remove('shrink');
+//     }
+//   }
+
+//   function handleScroll() {
+//     if (!introDone) return;
+
+//     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+//     if (scrollTop > threshold && !isHidden) {
+//       // on cache la nav
+//       hideNav();
+//     } else if (scrollTop <= threshold && isHidden) {
+//       // on ré-affiche la nav
+//       showNav();
+//     }
+
+//     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+//   }
+
+//   function handleTouchAndMouseEnter() {
+//     if (!introDone) return;
+//     if (isHidden) {
+//       showNav();
+//     }
+//   }
+
+//   function handleTouchAndMouseLeave() {
+//     if (!introDone) return;
+
+//     if (lastScrollTop > threshold && !isHidden) {
+//       hideNav();
+//     }
+//   }
+
+//   // Rendre la nav visible (plus de visibility:hidden)
+//   headerNavContainer.style.visibility = 'visible';
+
+//   window.addEventListener('scroll', handleScroll);
+//   window.addEventListener('scroll', adjustHeaderHeight);
+
+//   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+//   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+//   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+//   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+//   // Position de départ
+//   initNavPosition();
+//   adjustHeaderHeight();
+// });
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
   const header = document.querySelector('header[role="banner"]');
-  const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
   const headerNavContainer = document.querySelector('.header_nav_container');
 
-  const navEntry = performance.getEntriesByType("navigation")[0];
-  const isFirstLoad = !navEntry.type.includes('back_forward');
-  const isTargetPath = window.location.pathname === '/';
-  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
+  if (!header || !headerNavContainer) return;
 
   const threshold = 100;
   let lastScrollTop = 0;
-  let isHidden = false;
-  let introDone = false; // ✅ on saura quand l'intro est finie
+  let isHidden = false; // au chargement : nav visible
 
-  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
-  if (headerNavContainer) {
-    headerNavContainer.style.visibility = 'hidden';
+  function isMobile() {
+    return window.innerWidth < 811;
   }
 
-  /* -------------------
-     Animations nav
-  ------------------- */
+  /* --- helpers --- */
 
-  function slideOut() {
-    headerNavContainer.animate([
-      { transform: 'translateX(0)' },
-      { transform: 'translateX(-100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
+  function hideNav() {
+    headerNavContainer.classList.add('nav-hidden');
     isHidden = true;
   }
 
-  function slideIn() {
-    headerNavContainer.animate([
-      { transform: 'translateX(-100%)' },
-      { transform: 'translateX(0)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
+  function showNav() {
+    headerNavContainer.classList.remove('nav-hidden');
     isHidden = false;
   }
 
-  function slideDown() {
-    headerNavContainer.animate([
-      { transform: 'translateY(0%)' },
-      { transform: 'translateY(+100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
-    isHidden = false;
-  }
+  /* --- init : nav visible au chargement --- */
 
-  function slideUp() {
-    headerNavContainer.animate([
-      { transform: 'translateY(100%)' },
-      { transform: 'translateY(0%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    }).onfinish = function() {};
-    isHidden = true;
-  }
+  headerNavContainer.style.visibility = 'visible';
+  showNav();
 
-  // ✅ Position initiale de la nav,
-  // appelée UNIQUEMENT après la fin de l'intro
-  function initNavPosition() {
-    if (window.pageYOffset <= threshold) {
-      if (window.innerWidth < 811) {
-        slideDown();
-      } else {
-        slideIn();
-      }
-    } else {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideIn();
-      }
-    }
-  }
-
-  /* -------------------
-     Scroll / resize header
-  ------------------- */
+  /* --- shrink header --- */
 
   function adjustHeaderHeight() {
     if (window.scrollY > 0) {
@@ -1088,118 +1090,49 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  function handleScroll() {
-    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
+  /* --- scroll : cache / montre la nav --- */
 
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const isMobile = window.innerWidth < 811;
+  function handleScroll() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
     if (scrollTop > threshold && !isHidden) {
-      if (isMobile) {
-        slideUp();
-      } else {
-        slideOut();
-      }
+      // on cache la nav (desktop & mobile)
+      hideNav();
     } else if (scrollTop <= threshold && isHidden) {
-      if (isMobile) {
-        slideDown();
-      } else {
-        slideIn();
-      }
+      // on la remonte en haut de page
+      showNav();
     }
 
     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
   }
 
-  function handleTouchAndMouseEnter() {
-    if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
+  /* --- hover / touch sur le header : on montre la nav --- */
 
+  function handleEnter() {
     if (isHidden) {
-      if (window.innerWidth < 811) {
-        slideDown();
-      } else {
-        slideIn();
-      }
+      showNav();
     }
   }
 
-  function handleTouchAndMouseLeave() {
-    if (!introDone) return;
-
+  function handleLeave() {
     if (lastScrollTop > threshold && !isHidden) {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideOut();
-      }
+      hideNav();
     }
   }
 
-  window.addEventListener('scroll', handleScroll);
-  window.addEventListener('scroll', adjustHeaderHeight);
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
 
-  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  header.addEventListener('mouseenter', handleEnter);
+  header.addEventListener('mouseleave', handleLeave);
 
-  header.addEventListener('touchstart', handleTouchAndMouseEnter);
-  header.addEventListener('touchend', handleTouchAndMouseLeave);
-
-  /* -------------------
-     Intro du logo
-  ------------------- */
-
-  if (isFirstLoad && isTargetPath && logo  && !isMobile) {
-    // On bloque le scroll
-    document.body.classList.add('logo-intro-animating');
-
-    // 1) Logo plein écran SANS ANIMATION + header figé
-    logo.style.transition = 'none';
-    header.style.transition = 'none';
-    document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
-
-    void logo.offsetWidth; // reflow
-
-    const INTRO_DELAY = 1000;          // temps où le logo reste plein écran
-    const TRANSITION_DURATION = 1000;  // durée de l'anim de collapse
-
-    // 2) Après ce délai : on réactive les transitions et on lance l'anim
-    setTimeout(() => {
-      logo.style.transition = '';
-      header.style.transition = '';
-
-      header.classList.add('header--collapsed');           // header se rétracte
-      document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
-
-      // 3) Quand le header + logo ont fini de bouger :
-      setTimeout(() => {
-        document.body.classList.remove('logo-intro-animating');
-        introDone = true;
-
-        // 👉 maintenant seulement on affiche la nav et on la fait glisser
-        if (headerNavContainer) {
-          headerNavContainer.style.visibility = 'visible';
-        }
-        initNavPosition();
-
-      }, TRANSITION_DURATION + 100);
-
-    }, INTRO_DELAY);
-
-  } else {
-    // 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
-    // pas d'intro : header direct réduit, nav directement dispo
-    
-    header.classList.add('header--collapsed-already');
-    introDone = true;
-    if (headerNavContainer) {
-      headerNavContainer.style.visibility = 'visible';
-    }
-    initNavPosition();
-  }
+  header.addEventListener('touchstart', handleEnter);
+  header.addEventListener('touchend', handleLeave);
 
+  // init
+  adjustHeaderHeight();
 });
 
-///////////////end header sans animation logo////////////////
 }();
 // This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
 !function() {
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
index 3e545a3..a376a26 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"./bundle.js","mappings":";UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,GAAG;WACH;WACA;WACA,CAAC;;;;;WCPD;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;;;;;;AClBA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAE;;;;;;AAMF;;;AAGA;;AAEA;AACA;AACA;AACA;AACA,4CAA4C,sDAAsD;AAClG;AACA;;AAEA;AACA;AACA,KAAK;;;AAGL;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA,GAAG;;AAEH;;;;;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,OAAO;;AAEP;;AAEA;;;AAGA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AACD;;;;;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,mDAAmD;;AAEnD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC;AACD;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,CAAC;AACD;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;AAID;AACA;AACA;AACA;AACA;AACA;;AAEA,kCAAkC;AAClC;AACA,kDAAkD;AAClD;AACA,IAAI,OAAO;AACX;AACA;AACA,0DAA0D;AAC1D;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;AACD;;;AAGA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;;;;AAIA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH,CAAC;;AAED;;;;AAIA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA,2CAA2C;AAC3C;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;;AAEH,CAAC;;AAED;;;;;;;AAOA,CAAC;;;;;;;;;;AC1gBD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;AAKD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM;AACN,IAAI;;AAEJ;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH;AACA;AACA;AACA;AACA;;;;;;;;;ACxDA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,6BAA6B;AAC7B;;AAEA;AACA;AACA;AACA;AACA,mFAAmF;AACnF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,mFAAmF;AACnF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,4DAA4D;;AAE5D;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;;AAGA;AACA;AACA;AACA,4BAA4B;AAC5B,4BAA4B;AAC5B;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,CAAC;;;AAGD;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AAGD,6E;;;;;;;AC7HA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA,gBAAgB;AAChB;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb,WAAW;AACX,qCAAqC,kBAAkB;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,+CAA+C;AAC/C;AACA;AACA,+EAA+E;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA,gBAAgB,4BAA4B;AAC5C,gBAAgB;AAChB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA,gBAAgB,gCAAgC;AAChD,gBAAgB;AAChB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,6BAA6B;AAC7C,gBAAgB;AAChB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA,gBAAgB,+BAA+B;AAC/C,gBAAgB;AAChB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA,cAAc;AACd;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA,4DAA4D;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA,YAAY;AACZ;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;;;AAGA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,4CAA4C;;AAE5C;AACA;AACA;AACA,yBAAyB;;AAEzB;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,QAAQ,4BAA4B;AACpC,QAAQ;AACR;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA,QAAQ,gCAAgC;AACxC,QAAQ;AACR;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA,QAAQ,6BAA6B;AACrC,QAAQ;AACR;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA,QAAQ,+BAA+B;AACvC,QAAQ;AACR;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,MAAM;AACN;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;;AAEA;AACA,4BAA4B;;AAE5B;AACA;;AAEA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,MAAM;AACN;AACA;AACA,QAAQ;AACR;AACA;AACA;;AAEA;AACA;;AAEA;AACA,4BAA4B;;AAE5B;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,sDAAsD;;AAEtD,2BAA2B;;AAE3B,uCAAuC;AACvC,uCAAuC;;AAEvC;AACA;AACA;AACA;;AAEA,2DAA2D;AAC3D,2DAA2D;;AAE3D;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,OAAO;;AAEP,KAAK;;AAEL,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,CAAC;;AAED,6D;;;;;;;;AC7ZA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;;AAGH;AACA;;AAEA;AACA;AACA,4BAA4B;AAC5B,MAAM;;AAEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;;;;AAIA;AACA,CAAC,kB;;;;;;;AC5FD;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wDAAwD;AACxD;AACA;AACA,8CAA8C;AAC9C;AACA,SAAS;AACT;;;;;AAKA;;;AAGA;AACA;AACA;AACA,qCAAqC;AACrC,sDAAsD;AACtD,kCAAkC;;AAElC;AACA;AACA,sGAAsG;;AAEtG;AACA;AACA,8BAA8B;AAC9B,8BAA8B;AAC9B;;AAEA;AACA;AACA,kCAAkC;AAClC,cAAc;AACd,kCAAkC;AAClC;;AAEA;AACA;AACA,wBAAwB;AACxB;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,mFAAmF;;AAEnF;AACA,6CAA6C;;AAE7C;AACA,mEAAmE;AACnE;AACA,kBAAkB;AAClB,gFAAgF;AAChF,8DAA8D;AAC9D;AACA,aAAa;AACb,SAAS;;;AAGT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAa;;AAEb;AACA;AACA;AACA,SAAS;AACT;;AAEA,KAAK;;;;AAIL;;AAEA,CAAC,oB;;;;;;;;;ACtJD,+DAAe,qBAAuB,qBAAqB,E","sources":["webpack://quartiers_de_demain/webpack/bootstrap","webpack://quartiers_de_demain/webpack/runtime/global","webpack://quartiers_de_demain/webpack/runtime/make namespace object","webpack://quartiers_de_demain/webpack/runtime/publicPath","webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js","webpack://quartiers_de_demain/./src/assets/js/animated_formes.js","webpack://quartiers_de_demain/./src/assets/js/lightbox.js","webpack://quartiers_de_demain/./src/assets/js/header.js","webpack://quartiers_de_demain/./src/assets/js/timeline.js","webpack://quartiers_de_demain/./src/assets/js/ressources.js","webpack://quartiers_de_demain/./src/assets/scss/quartiers_de_demain.scss"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var scriptUrl;\nif (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + \"\";\nvar document = __webpack_require__.g.document;\nif (!scriptUrl && document) {\n\tif (document.currentScript)\n\t\tscriptUrl = document.currentScript.src;\n\tif (!scriptUrl) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tif(scripts.length) {\n\t\t\tvar i = scripts.length - 1;\n\t\t\twhile (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src;\n\t\t}\n\t}\n}\n// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration\n// or pass an empty string (\"\") and set the __webpack_public_path__ variable from your code to use your own logic.\nif (!scriptUrl) throw new Error(\"Automatic publicPath is not supported in this browser\");\nscriptUrl = scriptUrl.replace(/#.*$/, \"\").replace(/\\?.*$/, \"\").replace(/\\/[^\\/]+$/, \"/\");\n__webpack_require__.p = scriptUrl;","/**\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(function($, window) {\n\n\n//// ancre dans texte au click paragraphe correspondant arrive en dessous du header \n\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// div.view-rows-wrapper:nth-child(3) > div:nth-child(2) > article:nth-child(1) > div:nth-child(3)\n// html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.partenaires main div.layout-content div.content_container div.views-element-container div.js-view-dom-id-92e061b83776a5ae5f470b8d32637dba5a87d248e6f275adc7abe863e5c527c3.view div.view-rows-wrapper div.views-row article.node-type-partenaire div.field_body\n\n  function scrollReaveal(){\n\n    const nodes = {\n      logo : document.querySelectorAll('#logo-animated-container'),\n      chapeau :  document.querySelectorAll('.field_body:not(article.node-type-partenaire div.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, .field_field_liens'),\n      // nodeProjet : document.querySelectorAll('.node-type-projet .field_field_infos, .btn-equipe-toggle, .field_field_nom_de_l_equipe, .node-type-projet .field_field_texte_partie_texte_projet, .node-type-projet .field_field_titre_partie_texte_projet, .node-type-projet .field_field_images_projet'),\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    // ScrollReveal().reveal(nodes.nodeProjet, showUp);\n\n  }\n\n\n  $( document ).ready(function() {\n    scrollReaveal();\n  });\n\n////////////////////////  end script smooth apparition des textes /////////////////\n\n\n\n\n//////////// start slideshow images home  ////////////////////////// \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 images home  ////////////////////////// \n\n\n//////////// start slideshow /actualites  ////////////////////////// \n\n    // Vérifier si on N'EST PAS sur la page #home\n    if (!$(\"#page-node\").length) {\n        let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama');\n\n        if (actuview2.length > 0) {\n            actuview2.slick({\n                slidesToShow: 1,\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            });\n            console.log('Slick activé sur les actualités');\n            console.log('Slick activé sur 1 actu');\n        }\n    // } else {\n        // console.log('Slick désactivé sur la page Home');\n    }\n});\n////////////  end slideshow /actualites  ////////////////////////// \n\n\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\nif (document.body.classList.contains('node-type-site')) {\nconst blockRegion = document.querySelector('.block-region-second');\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\nif (elementsToWrap.length > 0) {\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$(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          let siteField = article.find(\".field_field_site\");\n\n          \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, siteField);\n                  \n                  // Ajouter ce conteneur après les champs existants\n                  article.append(infosActu);\n              }\n          }\n      });\n  }\n});\n////////////////////  end div infos actualité  ////////////////////////\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\n\n/////////////////// start langswitcher position responsive//////////////////////\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/////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////\n\n\n$(document).ready(function () {\n\n\n/////////////////// start voir plus...  actualite dans /actualites & /home ////////////////////\n\n  if ($(\"#actualites\" ).length > 0 || $(\"#home\").length > 0)  {\n    $(\".node-type-actualite\").each(function () {\n      let article = $(this);\n  \n      let body = article.find(\".field_body\");\n      let links = article.find(\".field_field_liens\");\n  \n      body.hide();\n      links.hide();\n  \n      let toggleButton = $(\"<button>\")\n          .addClass(\"toggle-actualite\")\n          .insertAfter(article);\n  \n      // Fonction de toggle (à utiliser partout)\n      function toggleActu() {\n          body.slideToggle();\n          links.slideToggle();\n          toggleButton.toggleClass(\"open\");\n      }\n  \n      // Clic sur le bouton\n      toggleButton.on(\"click\", function (e) {\n          e.stopPropagation();\n          toggleActu();\n      });\n  \n      // Clic sur le node entier sauf liens\n      article.on(\"click\", function (e) {\n          if ($(e.target).closest(\"a\").length) {\n              return;\n          }\n          toggleActu();\n      });\n  \n      // 👉 Clic aussi sur le H2\n      article.find(\"h2\").on(\"click\", function (e) {\n          e.stopPropagation();\n          toggleActu();\n      });\n  });\n  \n    // slimselect\n    // duplicated due to embeded view (archives)\n    let actu_type_select = new SlimSelect({\n      select: '#edit-field-type-d-actualite-target-id--2',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_type_select2 = new SlimSelect({\n      select: '#edit-field-type-d-actualite-target-id--3',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_site_select = new SlimSelect({\n      select: '#edit-field-site-target-id-verf--2',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_site_select2 = new SlimSelect({\n      select: '#edit-field-site-target-id-verf--3',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n  }\n\n///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////\n\n\n\n//////////////start toggle partenaire //////////////////\n\n  $(\".node-type-partenaire\").each(function () {\n    let article = $(this);\n\n    let body = article.find(\".field_body\");\n    let links = article.find(\".field_field_lien\");\n\n    body.hide();\n    links.hide();\n\n    let toggleButton = $(\"<button>\")\n      .addClass(\"toggle-partenaire\")\n      .appendTo(article);\n\n    toggleButton.on(\"click\", function () {\n      body.slideToggle();\n      links.slideToggle();\n      $(this).toggleClass(\"open\");\n    });\n  });\n});\n\n//////////////start toggle partenaire //////////////////\n\n\n\n////////////// start toggle page node projet //////////////////\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n  const photo = document.querySelector('.field_field_equipe_photo');\n  const pres  = document.querySelector('.field_field_equipe_presentation');\n\n  if (!photo || !pres) return;\n\n  // 🔒 Forcer l'état FERMÉ au chargement\n  photo.classList.remove('is-open');\n  pres.classList.remove('is-open');\n\n  // 1. Créer un wrapper autour de photo + présentation\n  const panel = document.createElement('div');\n  panel.className = 'equipe-panel';\n\n  // Insérer le panel avant la photo, puis y déplacer photo + pres\n  photo.parentNode.insertBefore(panel, photo);\n  panel.appendChild(photo);\n  panel.appendChild(pres);\n\n  // 2. Préparer le panel pour l'animation\n  panel.style.overflow = 'hidden';\n  panel.style.maxHeight = '0px';\n\n  // 3. Création du bouton\n  const btn = document.createElement('button');\n  btn.className = 'btn-equipe-toggle';\n  btn.textContent = \"EN SAVOIR PLUS SUR L'ÉQUIPE\";\n  btn.setAttribute('aria-expanded', 'false');\n\n  // Insertion du bouton juste après le panel (et plus après \"pres\")\n  panel.insertAdjacentElement('afterend', btn);\n\n  // Ligne de séparation après le bouton\n  const separator = document.createElement('div');\n  separator.className = 'equipe-separator';\n  btn.insertAdjacentElement('afterend', separator);\n\n  // --- Fonctions ouverture / fermeture ---\n\n  function openPanel() {\n    panel.classList.add('is-open');\n    photo.classList.add('is-open');\n    pres.classList.add('is-open');\n\n    const fullHeight = panel.scrollHeight; // inclut photo + texte\n    panel.style.maxHeight = fullHeight + 'px';\n\n    btn.textContent = \"FERMER LA PRÉSENTATION DE L'ÉQUIPE\";\n    btn.setAttribute('aria-expanded', 'true');\n  }\n\n  function closePanel() {\n    const fullHeight = panel.scrollHeight;\n    panel.style.maxHeight = fullHeight + 'px';\n\n    requestAnimationFrame(() => {\n      panel.style.maxHeight = '0px';\n      panel.classList.remove('is-open');\n      photo.classList.remove('is-open');\n      pres.classList.remove('is-open');\n    });\n\n    btn.textContent = \"EN SAVOIR PLUS SUR L'ÉQUIPE\";\n    btn.setAttribute('aria-expanded', 'false');\n  }\n\n  // --- Toggle bouton ---\n  btn.addEventListener('click', function () {\n    const isOpen = btn.getAttribute('aria-expanded') === 'true';\n    if (isOpen) {\n      closePanel();\n    } else {\n      openPanel();\n    }\n  });\n\n});\n\n//////////////end toggle page node projet //////////////////\n\n\n\n\n\n\n})(jQuery, window);\n\n\n","document.addEventListener('scroll', function() {\n    const scrolled = window.pageYOffset;\n    const background = document.getElementById('background-animated');\n    if (background) {\n      // Adjust this value to control the speed of the parallax effect\n      const parallaxSpeed = 0.5;\n      background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n    }\n});\n\n\n\n\n  //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n//   entries.forEach(entry => {\n//     if (entry.isIntersecting) {\n//       // Ajoute une classe lorsque l'élément est visible\n//       svg.classList.add('visible');\n//     } else {\n//       // Optionnel : Retirez la classe si nécessaire\n//       svg.classList.remove('visible');\n//     }\n//   });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\nif (svg) {\n  // Configuration de l'observateur d'intersection\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        // Ajoute une classe lorsque l'élément est visible\n        // svg.classList.remove('invisible');\n        svg.classList.add('visible');\n      } \n      // else {\n      //   // Optionnel : Retirez la classe si nécessaire\n      //   svg.classList.remove('visible');\n  \n      // }\n    });\n  });\n  \n  // Observer l'élément SVG\n  observer.observe(svg);\n  \n}\n","\n//////////////// start lightbox galerie image page site////////////////////////\n// Sélection des images à ouvrir dans la lightbox\nlet images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');\nlet currentIndex;\n\n// Création de la lightbox\nconst lightbox = document.createElement('div');\nlightbox.id = 'lightbox';\nlightbox.classList.add('lightbox');\ndocument.body.appendChild(lightbox);\n\n// Image affichée dans la lightbox\nconst img = document.createElement('img');\nimg.classList.add('lightbox-content');\nlightbox.appendChild(img);\n\n// Légende\nconst caption = document.createElement('p');\ncaption.classList.add('caption');\nlightbox.appendChild(caption);\n\n// Bouton de fermeture\nconst closeBtn = document.createElement('span');\ncloseBtn.classList.add('close');\ncloseBtn.innerHTML = '&times;';\nlightbox.appendChild(closeBtn);\n\n// Bouton précédent avec image\nconst prevBtn = document.createElement('a');\nprevBtn.classList.add('prev');\nconst prevImg = document.createElement('img');\nprevImg.src = \"/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg\"; // 🔁 adapte ce chemin\nprevImg.alt = 'Précédent';\nprevBtn.appendChild(prevImg);\nlightbox.appendChild(prevBtn);\n\n// Bouton suivant avec image\nconst nextBtn = document.createElement('a');\nnextBtn.classList.add('next');\nconst nextImg = document.createElement('img');\nnextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin\nnextImg.alt = 'Suivant';\nnextBtn.appendChild(nextImg);\nlightbox.appendChild(nextBtn);\n\n// Fonction d'affichage\nfunction showImage(index) {\n  if (index < 0) index = images.length - 1;\n  if (index >= images.length) index = 0;\n  currentIndex = index;\n\n  const currentImg = images[currentIndex];\n\n  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible\n  const parentLink = currentImg.closest('a');\n  if (parentLink && parentLink.getAttribute('href')) {\n    img.src = parentLink.getAttribute('href');\n  } else {\n    img.src = currentImg.getAttribute('src');\n  }\n\n  // 👉 2. Trouver le conteneur qui porte la légende\n  // - Cas 1 : <div><div class=\"cadre-img-zoom\"><img></div><blockquote class=\"image-field-caption\">...</blockquote></div>\n  // - Cas 2 : <div class=\"images\"><a><img></a><blockquote class=\"image-field-caption\">...</blockquote></div>\n  const wrapper =\n    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1\n    currentImg.closest('.images');                          // cas 2\n\n  let captionText =\n    wrapper?.querySelector('.image-field-caption p')?.textContent ||\n    currentImg.alt || // fallback si pas de blockquote\n    '';\n\n  caption.textContent = captionText;\n\n  lightbox.style.display = 'flex';\n}\n\n\n// Clic sur une image\nimages.forEach((image, index) => {\n  image.addEventListener('click', (e) => {\n    e.preventDefault();     // empêche le <a> de s'ouvrir\n    e.stopPropagation();    // empêche des comportements externes\n    showImage(index);\n  });\n\n  // 🔒 Empêche le clic sur le <a> parent d'agir aussi\n  const parentLink = image.closest('a');\n  if (parentLink) {\n    parentLink.addEventListener('click', (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    });\n  }\n});\n\n\n// Navigation & fermeture\ncloseBtn.addEventListener('click', () => lightbox.style.display = 'none');\nprevBtn.addEventListener('click', (e) => {\n  e.stopPropagation();\n  showImage(currentIndex - 1);\n});\nnextBtn.addEventListener('click', (e) => {\n  e.stopPropagation();\n  showImage(currentIndex + 1);\n});\n\n// Clic en dehors de l'image pour fermer\nlightbox.addEventListener('click', (e) => {\n  if (e.target === lightbox) lightbox.style.display = 'none';\n});\n\n// Clavier\ndocument.addEventListener('keydown', (e) => {\n  if (lightbox.style.display === 'flex') {\n    if (e.key === 'Escape') lightbox.style.display = 'none';\n    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);\n    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);\n  }\n});\n\n\n//////////////// end lightbox galerie image page site////////////////////////","// // //////// start header ////////////\n// // document.addEventListener('DOMContentLoaded', function() {\n\n// //     const header = document.querySelector('header[role=\"banner\"]');\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\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// //       stopLogoAnimation();\n// //     } else {\n// //       // Sinon, appliquer la transition après un délai, sauf si scroll\n// //       let collapseTimeout = setTimeout(() => {\n// //         header.classList.add('header--collapsed');\n// //       }, 1000);\n  \n// //       function interruptCollapseOnScroll() {\n// //         if (!header.classList.contains('header--collapsed')) {\n// //           clearTimeout(collapseTimeout); // annule l'animation\n// //           header.classList.add('header--collapsed');\n// //         }\n// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois\n// //       }\n  \n// //       window.addEventListener('scroll', interruptCollapseOnScroll);\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///////////////start header sans animation logo////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  const header = document.querySelector('header[role=\"banner\"]');\n  const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');\n  const headerNavContainer = document.querySelector('.header_nav_container');\n\n  const navEntry = performance.getEntriesByType(\"navigation\")[0];\n  const isFirstLoad = !navEntry.type.includes('back_forward');\n  const isTargetPath = window.location.pathname === '/';\n  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile\n\n  const threshold = 100;\n  let lastScrollTop = 0;\n  let isHidden = false;\n  let introDone = false; // ✅ on saura quand l'intro est finie\n\n  // 🔹 On cache la nav au tout début (pour éviter toute secousse)\n  if (headerNavContainer) {\n    headerNavContainer.style.visibility = 'hidden';\n  }\n\n  /* -------------------\n     Animations nav\n  ------------------- */\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.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    isHidden = true;\n  }\n\n  // ✅ Position initiale de la nav,\n  // appelée UNIQUEMENT après la fin de l'intro\n  function initNavPosition() {\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     Scroll / resize header\n  ------------------- */\n\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    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie\n\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    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n  }\n\n  function handleTouchAndMouseEnter() {\n    if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro\n\n    if (isHidden) {\n      if (window.innerWidth < 811) {\n        slideDown();\n      } else {\n        slideIn();\n      }\n    }\n  }\n\n  function handleTouchAndMouseLeave() {\n    if (!introDone) return;\n\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  header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n  header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n\n  header.addEventListener('touchstart', handleTouchAndMouseEnter);\n  header.addEventListener('touchend', handleTouchAndMouseLeave);\n\n  /* -------------------\n     Intro du logo\n  ------------------- */\n\n  if (isFirstLoad && isTargetPath && logo  && !isMobile) {\n    // On bloque le scroll\n    document.body.classList.add('logo-intro-animating');\n\n    // 1) Logo plein écran SANS ANIMATION + header figé\n    logo.style.transition = 'none';\n    header.style.transition = 'none';\n    document.body.classList.add('logo-intro-active'); // logo centré, scale(2)\n\n    void logo.offsetWidth; // reflow\n\n    const INTRO_DELAY = 1000;          // temps où le logo reste plein écran\n    const TRANSITION_DURATION = 1000;  // durée de l'anim de collapse\n\n    // 2) Après ce délai : on réactive les transitions et on lance l'anim\n    setTimeout(() => {\n      logo.style.transition = '';\n      header.style.transition = '';\n\n      header.classList.add('header--collapsed');           // header se rétracte\n      document.body.classList.remove('logo-intro-active'); // logo retourne dans le header\n\n      // 3) Quand le header + logo ont fini de bouger :\n      setTimeout(() => {\n        document.body.classList.remove('logo-intro-animating');\n        introDone = true;\n\n        // 👉 maintenant seulement on affiche la nav et on la fait glisser\n        if (headerNavContainer) {\n          headerNavContainer.style.visibility = 'visible';\n        }\n        initNavPosition();\n\n      }, TRANSITION_DURATION + 100);\n\n    }, INTRO_DELAY);\n\n  } else {\n    // 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :\n    // pas d'intro : header direct réduit, nav directement dispo\n    \n    header.classList.add('header--collapsed-already');\n    introDone = true;\n    if (headerNavContainer) {\n      headerNavContainer.style.visibility = 'visible';\n    }\n    initNavPosition();\n  }\n\n});\n\n///////////////end header sans animation logo////////////////","\n(function($, window) {\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  $(document).ready(function(){\n//   ////////////////////// start  calendrier home   /////////////////////////////////\n\n  // // Aller au 9e élément à l'initialisation\n  // $('.__timeline-content').on('init', function(event, slick){\n  //   slick.slickGoTo(11); // Index 8 = 9e item\n  // });\n\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      initialSlide: 13,\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            initialSlide: 13,\n          }\n        }]\n    });\n    console.log('salut slick calendrier');\n  \n  });\n  \n//////////////////////// end   calendrier home   /////////////////////////////////\n\n\n\n//////////////////////// end Timeline script /////////////////////////////////////////////\n})(jQuery, window);","/**\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(function($, window) { \n    $(document).ready(function () {\n        /////////////// start class à view-rows-ressources ////////\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        ////////////////// end class à view-rows-wrapper ////////////////\n\n\n\n\n        /////////////////// start voir plus...  ressources ////////////////////\n\n\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 (par défaut)\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            // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)\n            if (typeClass && typeClass.toLowerCase() === \"type-mission-photo\") {\n                items.show(); // aucun masquage\n                return;       // on sort : pas de \"voir plus\"\n            }\n\n            // Ajuster le nombre d'éléments visibles en fonction du type\n            if (typeClass && (typeClass === \"type-podcast\" || typeClass.toLowerCase() === \"type-vidéo\")) {\n                visibleCount = 2; // Pour Podcast et Vidéo\n            } else if (typeClass === \"type-kit-de-communication\") {\n                visibleCount = 1; // Pour Kit de Communication\n            }\n\n            // Si le nombre total d'éléments est inférieur ou égal à la limite, ne pas ajouter le bouton\n            if (items.length <= visibleCount) {\n                return; // Sortir de la boucle\n            }\n\n            // Ajouter le bouton dynamiquement après chaque `.view-rows-wrapper`\n            let button = $(\"<button>\")\n                .addClass(\"voir-plus\")\n                .text(\"Voir plus de \" + typeName)\n                .insertAfter(container);\n\n            // Cacher tous les éléments sauf ceux définis par `visibleCount`\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        // slimselect\n        let ressource_type_select = new SlimSelect({\n        select: '#edit-field-type-de-ressource-target-id--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        let ressource_motscles_select = new SlimSelect({\n        select: '#edit-field-mots-clefs-target-id--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        let ressource_sites_select = new SlimSelect({\n        select: '#edit-field-site-target-id-verf--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        // console.log(('sites_select'), sites_select);\n\n        }\n\n        ///////////////////  end voir plus...  ressources ////////////////////\n\n        ///////////////////////// start ressource img clicable mission photo //////////////////////\n        $('.view-rows-wrapper.type-Mission-photo .views-row').each(function () {\n            var $row = $(this);\n\n            // Lien cible : d'abord le titre, sinon \"Voir la gallerie photo\"\n            var $link = $row.find('.views-field-views-conditional-field-1 a, .views-field-views-conditional-field a').first();\n\n            // L'image\n            var $img = $row.find('.views-field-field-images img').first();\n\n            if ($link.length && $img.length && !$img.data('missionPhotoBound')) {\n            console.log('→ Bind click sur image pour', $link.attr('href'));\n\n            $img.css('cursor', 'pointer');\n            $img.on('click', function () {\n                window.location.href = $link.attr('href');\n            });\n\n            // éviter de binder plusieurs fois (si AJAX / re-init)\n            $img.data('missionPhotoBound', true);\n            }\n        });\n        ///////////////////////// end ressource img clicable mission photo //////////////////////\n\n    });\n\n\n\n  \n\n})(jQuery, window);  ","export default __webpack_public_path__ + \"./css/bundle.css\";"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"./bundle.js","mappings":";UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,GAAG;WACH;WACA;WACA,CAAC;;;;;WCPD;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;;;;;;AClBA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAE;;;;;;AAMF;;;AAGA;;AAEA;AACA;AACA;AACA;AACA,4CAA4C,sDAAsD;AAClG;AACA;;AAEA;AACA;AACA,KAAK;;;AAGL;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA,GAAG;;AAEH;;;;;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,OAAO;;AAEP;;AAEA;;;AAGA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AACD;;;;;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,mDAAmD;;AAEnD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC;AACD;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,CAAC;AACD;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;AAID;AACA;AACA;AACA;AACA;AACA;;AAEA,kCAAkC;AAClC;AACA,kDAAkD;AAClD;AACA,IAAI,OAAO;AACX;AACA;AACA,0DAA0D;AAC1D;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;AACD;;;AAGA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;;;;AAIA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH,CAAC;;AAED;;;;AAIA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA,2CAA2C;AAC3C;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;;AAEH,CAAC;;AAED;;;;;;;AAOA,CAAC;;;;;;;;;;AC1gBD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;AAKD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM;AACN,IAAI;;AAEJ;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH;AACA;AACA;AACA;AACA;;;;;;;;;ACxDA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,6BAA6B;AAC7B;;AAEA;AACA;AACA;AACA;AACA,mFAAmF;AACnF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,mFAAmF;AACnF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,4DAA4D;;AAE5D;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;;AAGA;AACA;AACA;AACA,4BAA4B;AAC5B,4BAA4B;AAC5B;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,CAAC;;;AAGD;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AAGD,6E;;;;;;;;;;AC1HA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,8BAA8B;;AAE9B;AACA;AACA;;AAEA;AACA;AACA,cAAc,4BAA4B;AAC1C,cAAc;AACd;AACA;AACA;AACA,WAAW;AACX;AACA;;AAEA;AACA;AACA,cAAc,gCAAgC;AAC9C,cAAc;AACd;AACA;AACA;AACA,WAAW;AACX;AACA;;AAEA;AACA;AACA,cAAc,gCAAgC;AAC9C,cAAc;AACd;AACA;AACA;AACA,WAAW;AACX;AACA;;AAEA;AACA;AACA,cAAc,6BAA6B;AAC3C,cAAc;AACd;AACA;AACA;AACA,WAAW;AACX;AACA;;AAEA;AACA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA,YAAY;AACZ;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;;AAEA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA,YAAY;AACZ;AACA;AACA,cAAc;AACd;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA,OAAO;;;AAGP;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,2BAA2B;;AAE3B;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,sBAAsB;AACtB,SAAS;AACT;AACA,sBAAsB;AACtB,WAAW;AACX,sBAAsB;AACtB;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,IAAI;;;;AAIJ;AACA;AACA;;AAEA;;AAEA;AACA;AACA,wBAAwB;;AAExB;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,oDAAoD,eAAe;AACnE,0DAA0D,eAAe;;AAEzE;AACA;;AAEA;AACA;;AAEA;AACA;AACA,CAAC;;;;;;;;;ACzVD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;;AAGH;AACA;;AAEA;AACA;AACA,4BAA4B;AAC5B,MAAM;;AAEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;;;;AAIA;AACA,CAAC,kB;;;;;;;AC5FD;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wDAAwD;AACxD;AACA;AACA,8CAA8C;AAC9C;AACA,SAAS;AACT;;;;;AAKA;;;AAGA;AACA;AACA;AACA,qCAAqC;AACrC,sDAAsD;AACtD,kCAAkC;;AAElC;AACA;AACA,sGAAsG;;AAEtG;AACA;AACA,8BAA8B;AAC9B,8BAA8B;AAC9B;;AAEA;AACA;AACA,kCAAkC;AAClC,cAAc;AACd,kCAAkC;AAClC;;AAEA;AACA;AACA,wBAAwB;AACxB;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,mFAAmF;;AAEnF;AACA,6CAA6C;;AAE7C;AACA,mEAAmE;AACnE;AACA,kBAAkB;AAClB,gFAAgF;AAChF,8DAA8D;AAC9D;AACA,aAAa;AACb,SAAS;;;AAGT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAa;;AAEb;AACA;AACA;AACA,SAAS;AACT;;AAEA,KAAK;;;;AAIL;;AAEA,CAAC,oB;;;;;;;;;ACtJD,+DAAe,qBAAuB,qBAAqB,E","sources":["webpack://quartiers_de_demain/webpack/bootstrap","webpack://quartiers_de_demain/webpack/runtime/global","webpack://quartiers_de_demain/webpack/runtime/make namespace object","webpack://quartiers_de_demain/webpack/runtime/publicPath","webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js","webpack://quartiers_de_demain/./src/assets/js/animated_formes.js","webpack://quartiers_de_demain/./src/assets/js/lightbox.js","webpack://quartiers_de_demain/./src/assets/js/header.js","webpack://quartiers_de_demain/./src/assets/js/timeline.js","webpack://quartiers_de_demain/./src/assets/js/ressources.js","webpack://quartiers_de_demain/./src/assets/scss/quartiers_de_demain.scss"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var scriptUrl;\nif (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + \"\";\nvar document = __webpack_require__.g.document;\nif (!scriptUrl && document) {\n\tif (document.currentScript)\n\t\tscriptUrl = document.currentScript.src;\n\tif (!scriptUrl) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tif(scripts.length) {\n\t\t\tvar i = scripts.length - 1;\n\t\t\twhile (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src;\n\t\t}\n\t}\n}\n// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration\n// or pass an empty string (\"\") and set the __webpack_public_path__ variable from your code to use your own logic.\nif (!scriptUrl) throw new Error(\"Automatic publicPath is not supported in this browser\");\nscriptUrl = scriptUrl.replace(/#.*$/, \"\").replace(/\\?.*$/, \"\").replace(/\\/[^\\/]+$/, \"/\");\n__webpack_require__.p = scriptUrl;","/**\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(function($, window) {\n\n\n//// ancre dans texte au click paragraphe correspondant arrive en dessous du header \n\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// div.view-rows-wrapper:nth-child(3) > div:nth-child(2) > article:nth-child(1) > div:nth-child(3)\n// html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.partenaires main div.layout-content div.content_container div.views-element-container div.js-view-dom-id-92e061b83776a5ae5f470b8d32637dba5a87d248e6f275adc7abe863e5c527c3.view div.view-rows-wrapper div.views-row article.node-type-partenaire div.field_body\n\n  function scrollReaveal(){\n\n    const nodes = {\n      logo : document.querySelectorAll('#logo-animated-container'),\n      chapeau :  document.querySelectorAll('.field_body:not(article.node-type-partenaire div.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, .field_field_liens'),\n      // nodeProjet : document.querySelectorAll('.node-type-projet .field_field_infos, .btn-equipe-toggle, .field_field_nom_de_l_equipe, .node-type-projet .field_field_texte_partie_texte_projet, .node-type-projet .field_field_titre_partie_texte_projet, .node-type-projet .field_field_images_projet'),\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    // ScrollReveal().reveal(nodes.nodeProjet, showUp);\n\n  }\n\n\n  $( document ).ready(function() {\n    scrollReaveal();\n  });\n\n////////////////////////  end script smooth apparition des textes /////////////////\n\n\n\n\n//////////// start slideshow images home  ////////////////////////// \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 images home  ////////////////////////// \n\n\n//////////// start slideshow /actualites  ////////////////////////// \n\n    // Vérifier si on N'EST PAS sur la page #home\n    if (!$(\"#page-node\").length) {\n        let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama');\n\n        if (actuview2.length > 0) {\n            actuview2.slick({\n                slidesToShow: 1,\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            });\n            console.log('Slick activé sur les actualités');\n            console.log('Slick activé sur 1 actu');\n        }\n    // } else {\n        // console.log('Slick désactivé sur la page Home');\n    }\n});\n////////////  end slideshow /actualites  ////////////////////////// \n\n\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\nif (document.body.classList.contains('node-type-site')) {\nconst blockRegion = document.querySelector('.block-region-second');\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\nif (elementsToWrap.length > 0) {\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$(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          let siteField = article.find(\".field_field_site\");\n\n          \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, siteField);\n                  \n                  // Ajouter ce conteneur après les champs existants\n                  article.append(infosActu);\n              }\n          }\n      });\n  }\n});\n////////////////////  end div infos actualité  ////////////////////////\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\n\n/////////////////// start langswitcher position responsive//////////////////////\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/////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////\n\n\n$(document).ready(function () {\n\n\n/////////////////// start voir plus...  actualite dans /actualites & /home ////////////////////\n\n  if ($(\"#actualites\" ).length > 0 || $(\"#home\").length > 0)  {\n    $(\".node-type-actualite\").each(function () {\n      let article = $(this);\n  \n      let body = article.find(\".field_body\");\n      let links = article.find(\".field_field_liens\");\n  \n      body.hide();\n      links.hide();\n  \n      let toggleButton = $(\"<button>\")\n          .addClass(\"toggle-actualite\")\n          .insertAfter(article);\n  \n      // Fonction de toggle (à utiliser partout)\n      function toggleActu() {\n          body.slideToggle();\n          links.slideToggle();\n          toggleButton.toggleClass(\"open\");\n      }\n  \n      // Clic sur le bouton\n      toggleButton.on(\"click\", function (e) {\n          e.stopPropagation();\n          toggleActu();\n      });\n  \n      // Clic sur le node entier sauf liens\n      article.on(\"click\", function (e) {\n          if ($(e.target).closest(\"a\").length) {\n              return;\n          }\n          toggleActu();\n      });\n  \n      // 👉 Clic aussi sur le H2\n      article.find(\"h2\").on(\"click\", function (e) {\n          e.stopPropagation();\n          toggleActu();\n      });\n  });\n  \n    // slimselect\n    // duplicated due to embeded view (archives)\n    let actu_type_select = new SlimSelect({\n      select: '#edit-field-type-d-actualite-target-id--2',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_type_select2 = new SlimSelect({\n      select: '#edit-field-type-d-actualite-target-id--3',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_site_select = new SlimSelect({\n      select: '#edit-field-site-target-id-verf--2',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n    let actu_site_select2 = new SlimSelect({\n      select: '#edit-field-site-target-id-verf--3',\n      settings:{\n        placeholderText: 'choisir',\n        searchPlaceholder: 'choisir'\n      }\n    })\n  }\n\n///////////////////  end voir plus...  actualite dans /actualites & /home ////////////////////\n\n\n\n//////////////start toggle partenaire //////////////////\n\n  $(\".node-type-partenaire\").each(function () {\n    let article = $(this);\n\n    let body = article.find(\".field_body\");\n    let links = article.find(\".field_field_lien\");\n\n    body.hide();\n    links.hide();\n\n    let toggleButton = $(\"<button>\")\n      .addClass(\"toggle-partenaire\")\n      .appendTo(article);\n\n    toggleButton.on(\"click\", function () {\n      body.slideToggle();\n      links.slideToggle();\n      $(this).toggleClass(\"open\");\n    });\n  });\n});\n\n//////////////start toggle partenaire //////////////////\n\n\n\n////////////// start toggle page node projet //////////////////\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n  const photo = document.querySelector('.field_field_equipe_photo');\n  const pres  = document.querySelector('.field_field_equipe_presentation');\n\n  if (!photo || !pres) return;\n\n  // 🔒 Forcer l'état FERMÉ au chargement\n  photo.classList.remove('is-open');\n  pres.classList.remove('is-open');\n\n  // 1. Créer un wrapper autour de photo + présentation\n  const panel = document.createElement('div');\n  panel.className = 'equipe-panel';\n\n  // Insérer le panel avant la photo, puis y déplacer photo + pres\n  photo.parentNode.insertBefore(panel, photo);\n  panel.appendChild(photo);\n  panel.appendChild(pres);\n\n  // 2. Préparer le panel pour l'animation\n  panel.style.overflow = 'hidden';\n  panel.style.maxHeight = '0px';\n\n  // 3. Création du bouton\n  const btn = document.createElement('button');\n  btn.className = 'btn-equipe-toggle';\n  btn.textContent = \"EN SAVOIR PLUS SUR L'ÉQUIPE\";\n  btn.setAttribute('aria-expanded', 'false');\n\n  // Insertion du bouton juste après le panel (et plus après \"pres\")\n  panel.insertAdjacentElement('afterend', btn);\n\n  // Ligne de séparation après le bouton\n  const separator = document.createElement('div');\n  separator.className = 'equipe-separator';\n  btn.insertAdjacentElement('afterend', separator);\n\n  // --- Fonctions ouverture / fermeture ---\n\n  function openPanel() {\n    panel.classList.add('is-open');\n    photo.classList.add('is-open');\n    pres.classList.add('is-open');\n\n    const fullHeight = panel.scrollHeight; // inclut photo + texte\n    panel.style.maxHeight = fullHeight + 'px';\n\n    btn.textContent = \"FERMER LA PRÉSENTATION DE L'ÉQUIPE\";\n    btn.setAttribute('aria-expanded', 'true');\n  }\n\n  function closePanel() {\n    const fullHeight = panel.scrollHeight;\n    panel.style.maxHeight = fullHeight + 'px';\n\n    requestAnimationFrame(() => {\n      panel.style.maxHeight = '0px';\n      panel.classList.remove('is-open');\n      photo.classList.remove('is-open');\n      pres.classList.remove('is-open');\n    });\n\n    btn.textContent = \"EN SAVOIR PLUS SUR L'ÉQUIPE\";\n    btn.setAttribute('aria-expanded', 'false');\n  }\n\n  // --- Toggle bouton ---\n  btn.addEventListener('click', function () {\n    const isOpen = btn.getAttribute('aria-expanded') === 'true';\n    if (isOpen) {\n      closePanel();\n    } else {\n      openPanel();\n    }\n  });\n\n});\n\n//////////////end toggle page node projet //////////////////\n\n\n\n\n\n\n})(jQuery, window);\n\n\n","document.addEventListener('scroll', function() {\n    const scrolled = window.pageYOffset;\n    const background = document.getElementById('background-animated');\n    if (background) {\n      // Adjust this value to control the speed of the parallax effect\n      const parallaxSpeed = 0.5;\n      background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n    }\n});\n\n\n\n\n  //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n//   entries.forEach(entry => {\n//     if (entry.isIntersecting) {\n//       // Ajoute une classe lorsque l'élément est visible\n//       svg.classList.add('visible');\n//     } else {\n//       // Optionnel : Retirez la classe si nécessaire\n//       svg.classList.remove('visible');\n//     }\n//   });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\nif (svg) {\n  // Configuration de l'observateur d'intersection\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        // Ajoute une classe lorsque l'élément est visible\n        // svg.classList.remove('invisible');\n        svg.classList.add('visible');\n      } \n      // else {\n      //   // Optionnel : Retirez la classe si nécessaire\n      //   svg.classList.remove('visible');\n  \n      // }\n    });\n  });\n  \n  // Observer l'élément SVG\n  observer.observe(svg);\n  \n}\n","\n//////////////// start lightbox galerie image page site////////////////////////\n// Sélection des images à ouvrir dans la lightbox\nlet images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');\nlet currentIndex;\n\n// Création de la lightbox\nconst lightbox = document.createElement('div');\nlightbox.id = 'lightbox';\nlightbox.classList.add('lightbox');\ndocument.body.appendChild(lightbox);\n\n// Image affichée dans la lightbox\nconst img = document.createElement('img');\nimg.classList.add('lightbox-content');\nlightbox.appendChild(img);\n\n// Légende\nconst caption = document.createElement('p');\ncaption.classList.add('caption');\nlightbox.appendChild(caption);\n\n// Bouton de fermeture\nconst closeBtn = document.createElement('span');\ncloseBtn.classList.add('close');\ncloseBtn.innerHTML = '&times;';\nlightbox.appendChild(closeBtn);\n\n// Bouton précédent avec image\nconst prevBtn = document.createElement('a');\nprevBtn.classList.add('prev');\nconst prevImg = document.createElement('img');\nprevImg.src = \"/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg\"; // 🔁 adapte ce chemin\nprevImg.alt = 'Précédent';\nprevBtn.appendChild(prevImg);\nlightbox.appendChild(prevBtn);\n\n// Bouton suivant avec image\nconst nextBtn = document.createElement('a');\nnextBtn.classList.add('next');\nconst nextImg = document.createElement('img');\nnextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin\nnextImg.alt = 'Suivant';\nnextBtn.appendChild(nextImg);\nlightbox.appendChild(nextBtn);\n\n// Fonction d'affichage\nfunction showImage(index) {\n  if (index < 0) index = images.length - 1;\n  if (index >= images.length) index = 0;\n  currentIndex = index;\n\n  const currentImg = images[currentIndex];\n\n  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible\n  const parentLink = currentImg.closest('a');\n  if (parentLink && parentLink.getAttribute('href')) {\n    img.src = parentLink.getAttribute('href');\n  } else {\n    img.src = currentImg.getAttribute('src');\n  }\n\n  // 👉 2. Trouver le conteneur qui porte la légende\n  // - Cas 1 : <div><div class=\"cadre-img-zoom\"><img></div><blockquote class=\"image-field-caption\">...</blockquote></div>\n  // - Cas 2 : <div class=\"images\"><a><img></a><blockquote class=\"image-field-caption\">...</blockquote></div>\n  const wrapper =\n    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1\n    currentImg.closest('.images');                          // cas 2\n\n  let captionText =\n    wrapper?.querySelector('.image-field-caption p')?.textContent ||\n    currentImg.alt || // fallback si pas de blockquote\n    '';\n\n  caption.textContent = captionText;\n\n  lightbox.style.display = 'flex';\n}\n\n\n// Clic sur une image\nimages.forEach((image, index) => {\n  image.addEventListener('click', (e) => {\n    e.preventDefault();     // empêche le <a> de s'ouvrir\n    e.stopPropagation();    // empêche des comportements externes\n    showImage(index);\n  });\n\n  // 🔒 Empêche le clic sur le <a> parent d'agir aussi\n  const parentLink = image.closest('a');\n  if (parentLink) {\n    parentLink.addEventListener('click', (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    });\n  }\n});\n\n\n// Navigation & fermeture\ncloseBtn.addEventListener('click', () => lightbox.style.display = 'none');\nprevBtn.addEventListener('click', (e) => {\n  e.stopPropagation();\n  showImage(currentIndex - 1);\n});\nnextBtn.addEventListener('click', (e) => {\n  e.stopPropagation();\n  showImage(currentIndex + 1);\n});\n\n// Clic en dehors de l'image pour fermer\nlightbox.addEventListener('click', (e) => {\n  if (e.target === lightbox) lightbox.style.display = 'none';\n});\n\n// Clavier\ndocument.addEventListener('keydown', (e) => {\n  if (lightbox.style.display === 'flex') {\n    if (e.key === 'Escape') lightbox.style.display = 'none';\n    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);\n    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);\n  }\n});\n\n\n//////////////// end lightbox galerie image page site////////////////////////","\n\n\n// // document.addEventListener('DOMContentLoaded', function() {\n\n// //   const header = document.querySelector('header[role=\"banner\"]');\n// //   const headerNavContainer = document.querySelector('.header_nav_container');\n\n// //   const threshold = 100;\n// //   let lastScrollTop = 0;\n// //   let isHidden = false;\n// //   let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est \"déjà finie\"\n\n// //   /* -------------------\n// //      Animations nav\n// //   ------------------- */\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.animate([\n// //       { transform: 'translateY(-100%)' },\n// //       { transform: 'translateY(0%)' }\n// //     ], {\n// //       duration: 300,\n// //       fill: 'forwards'\n// //     });\n// //     isHidden = false;\n// //   }\n\n// //   function slideUp() {\n// //     headerNavContainer.animate([\n// //       { transform: 'translateY(0%)' },\n// //       { transform: 'translateY(-100%)' }\n// //     ], {\n// //       duration: 300,\n// //       fill: 'forwards'\n// //     });\n// //     isHidden = true;\n// //   }\n\n// //   function initNavPosition() {\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// //      Scroll / resize header\n// //   ------------------- */\n\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// //     if (!introDone) return; // ici ça passe, introDone = true\n\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// //     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n// //   }\n\n// //   function handleTouchAndMouseEnter() {\n// //     if (!introDone) return;\n\n// //     if (isHidden) {\n// //       if (window.innerWidth < 811) {\n// //         slideDown();\n// //       } else {\n// //         slideIn();\n// //       }\n// //     }\n// //   }\n\n// //   function handleTouchAndMouseLeave() {\n// //     if (!introDone) return;\n\n// //     if (lastScrollTop > threshold && !isHidden) {\n// //       if (window.innerWidth < 811) {\n// //         slideUp();\n// //       } else {\n// //         slideOut();\n// //       }\n// //     }\n// //   }\n\n// //   // ✅ on n'a plus besoin de masquer la nav au début\n// //   if (headerNavContainer) {\n// //     headerNavContainer.style.visibility = 'visible';\n// //   }\n\n// //   window.addEventListener('scroll', handleScroll);\n// //   window.addEventListener('scroll', adjustHeaderHeight);\n\n// //   header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n// //   header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n\n// //   header.addEventListener('touchstart', handleTouchAndMouseEnter);\n// //   header.addEventListener('touchend', handleTouchAndMouseLeave);\n\n// //   // ✅ position initiale de la nav\n// //   initNavPosition();\n\n// // });\n\n\n// document.addEventListener('DOMContentLoaded', function() {\n\n//   const header = document.querySelector('header[role=\"banner\"]');\n//   const headerNavContainer = document.querySelector('.header_nav_container');\n\n//   if (!header || !headerNavContainer) return;\n\n//   const threshold = 100;\n//   let lastScrollTop = 0;\n//   let isHidden = false;\n//   let introDone = true; // ✅ pas d'intro, donc direct prêt\n\n//   /* -------------------\n//      Helpers show / hide\n//   ------------------- */\n\n//   function hideNav() {\n//     headerNavContainer.classList.add('nav-hidden');\n//     isHidden = true;\n//   }\n\n//   function showNav() {\n//     headerNavContainer.classList.remove('nav-hidden');\n//     isHidden = false;\n//   }\n\n//   function isMobile() {\n//     return window.innerWidth < 811;\n//   }\n\n//   /* -------------------\n//      Position initiale\n//   ------------------- */\n\n//   function initNavPosition() {\n//     if (window.pageYOffset <= threshold) {\n//       showNav();   // en haut de page → nav visible\n//     } else {\n//       if (isMobile()) {\n//         hideNav(); // mobile scrollé → nav cachée\n//       } else {\n//         showNav(); // desktop : nav visible même en bas\n//       }\n//     }\n//   }\n\n//   /* -------------------\n//      Scroll / resize header\n//   ------------------- */\n\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//     if (!introDone) return;\n\n//     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\n//     if (scrollTop > threshold && !isHidden) {\n//       // on cache la nav\n//       hideNav();\n//     } else if (scrollTop <= threshold && isHidden) {\n//       // on ré-affiche la nav\n//       showNav();\n//     }\n\n//     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n//   }\n\n//   function handleTouchAndMouseEnter() {\n//     if (!introDone) return;\n//     if (isHidden) {\n//       showNav();\n//     }\n//   }\n\n//   function handleTouchAndMouseLeave() {\n//     if (!introDone) return;\n\n//     if (lastScrollTop > threshold && !isHidden) {\n//       hideNav();\n//     }\n//   }\n\n//   // Rendre la nav visible (plus de visibility:hidden)\n//   headerNavContainer.style.visibility = 'visible';\n\n//   window.addEventListener('scroll', handleScroll);\n//   window.addEventListener('scroll', adjustHeaderHeight);\n\n//   header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n//   header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n\n//   header.addEventListener('touchstart', handleTouchAndMouseEnter);\n//   header.addEventListener('touchend', handleTouchAndMouseLeave);\n\n//   // Position de départ\n//   initNavPosition();\n//   adjustHeaderHeight();\n// });\n\n\n\ndocument.addEventListener('DOMContentLoaded', function () {\n  const header = document.querySelector('header[role=\"banner\"]');\n  const headerNavContainer = document.querySelector('.header_nav_container');\n\n  if (!header || !headerNavContainer) return;\n\n  const threshold = 100;\n  let lastScrollTop = 0;\n  let isHidden = false; // au chargement : nav visible\n\n  function isMobile() {\n    return window.innerWidth < 811;\n  }\n\n  /* --- helpers --- */\n\n  function hideNav() {\n    headerNavContainer.classList.add('nav-hidden');\n    isHidden = true;\n  }\n\n  function showNav() {\n    headerNavContainer.classList.remove('nav-hidden');\n    isHidden = false;\n  }\n\n  /* --- init : nav visible au chargement --- */\n\n  headerNavContainer.style.visibility = 'visible';\n  showNav();\n\n  /* --- shrink header --- */\n\n  function adjustHeaderHeight() {\n    if (window.scrollY > 0) {\n      header.classList.add('shrink');\n    } else {\n      header.classList.remove('shrink');\n    }\n  }\n\n  /* --- scroll : cache / montre la nav --- */\n\n  function handleScroll() {\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\n    if (scrollTop > threshold && !isHidden) {\n      // on cache la nav (desktop & mobile)\n      hideNav();\n    } else if (scrollTop <= threshold && isHidden) {\n      // on la remonte en haut de page\n      showNav();\n    }\n\n    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n  }\n\n  /* --- hover / touch sur le header : on montre la nav --- */\n\n  function handleEnter() {\n    if (isHidden) {\n      showNav();\n    }\n  }\n\n  function handleLeave() {\n    if (lastScrollTop > threshold && !isHidden) {\n      hideNav();\n    }\n  }\n\n  window.addEventListener('scroll', handleScroll, { passive: true });\n  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });\n\n  header.addEventListener('mouseenter', handleEnter);\n  header.addEventListener('mouseleave', handleLeave);\n\n  header.addEventListener('touchstart', handleEnter);\n  header.addEventListener('touchend', handleLeave);\n\n  // init\n  adjustHeaderHeight();\n});\n","\n(function($, window) {\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  $(document).ready(function(){\n//   ////////////////////// start  calendrier home   /////////////////////////////////\n\n  // // Aller au 9e élément à l'initialisation\n  // $('.__timeline-content').on('init', function(event, slick){\n  //   slick.slickGoTo(11); // Index 8 = 9e item\n  // });\n\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      initialSlide: 13,\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            initialSlide: 13,\n          }\n        }]\n    });\n    console.log('salut slick calendrier');\n  \n  });\n  \n//////////////////////// end   calendrier home   /////////////////////////////////\n\n\n\n//////////////////////// end Timeline script /////////////////////////////////////////////\n})(jQuery, window);","/**\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(function($, window) { \n    $(document).ready(function () {\n        /////////////// start class à view-rows-ressources ////////\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        ////////////////// end class à view-rows-wrapper ////////////////\n\n\n\n\n        /////////////////// start voir plus...  ressources ////////////////////\n\n\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 (par défaut)\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            // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)\n            if (typeClass && typeClass.toLowerCase() === \"type-mission-photo\") {\n                items.show(); // aucun masquage\n                return;       // on sort : pas de \"voir plus\"\n            }\n\n            // Ajuster le nombre d'éléments visibles en fonction du type\n            if (typeClass && (typeClass === \"type-podcast\" || typeClass.toLowerCase() === \"type-vidéo\")) {\n                visibleCount = 2; // Pour Podcast et Vidéo\n            } else if (typeClass === \"type-kit-de-communication\") {\n                visibleCount = 1; // Pour Kit de Communication\n            }\n\n            // Si le nombre total d'éléments est inférieur ou égal à la limite, ne pas ajouter le bouton\n            if (items.length <= visibleCount) {\n                return; // Sortir de la boucle\n            }\n\n            // Ajouter le bouton dynamiquement après chaque `.view-rows-wrapper`\n            let button = $(\"<button>\")\n                .addClass(\"voir-plus\")\n                .text(\"Voir plus de \" + typeName)\n                .insertAfter(container);\n\n            // Cacher tous les éléments sauf ceux définis par `visibleCount`\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        // slimselect\n        let ressource_type_select = new SlimSelect({\n        select: '#edit-field-type-de-ressource-target-id--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        let ressource_motscles_select = new SlimSelect({\n        select: '#edit-field-mots-clefs-target-id--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        let ressource_sites_select = new SlimSelect({\n        select: '#edit-field-site-target-id-verf--2',\n        settings:{\n            placeholderText: 'choisir',\n            searchPlaceholder: 'choisir'\n        }\n        })\n        // console.log(('sites_select'), sites_select);\n\n        }\n\n        ///////////////////  end voir plus...  ressources ////////////////////\n\n        ///////////////////////// start ressource img clicable mission photo //////////////////////\n        $('.view-rows-wrapper.type-Mission-photo .views-row').each(function () {\n            var $row = $(this);\n\n            // Lien cible : d'abord le titre, sinon \"Voir la gallerie photo\"\n            var $link = $row.find('.views-field-views-conditional-field-1 a, .views-field-views-conditional-field a').first();\n\n            // L'image\n            var $img = $row.find('.views-field-field-images img').first();\n\n            if ($link.length && $img.length && !$img.data('missionPhotoBound')) {\n            console.log('→ Bind click sur image pour', $link.attr('href'));\n\n            $img.css('cursor', 'pointer');\n            $img.on('click', function () {\n                window.location.href = $link.attr('href');\n            });\n\n            // éviter de binder plusieurs fois (si AJAX / re-init)\n            $img.data('missionPhotoBound', true);\n            }\n        });\n        ///////////////////////// end ressource img clicable mission photo //////////////////////\n\n    });\n\n\n\n  \n\n})(jQuery, window);  ","export default __webpack_public_path__ + \"./css/bundle.css\";"],"names":[],"sourceRoot":""}
\ No newline at end of file
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 b9aed26..d7dd33d 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
@@ -258,16 +258,61 @@ svg.ext {
 }
 
 /*partials*/
+/* ===========================
+   HEADER GLOBAL
+   =========================== */
 header[role=banner] {
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
-  width: 100%;
-  z-index: 99;
-  max-width: 100vw;
   position: fixed;
   top: 0;
-  transition: height 1.4s ease-in-out, width 1.4s ease-in-out;
+  left: 0;
+  z-index: 50;
+  max-width: 100vw;
+  display: flex;
+  flex-direction: row;
+  transform-origin: bottom right;
+  height: 200px;
+  width: 35%;
+  transition: all 1.4s ease-in-out;
+  background-color: rgb(255, 255, 255);
+  /* ===========================
+     LANGUAGE SWITCHER
+     =========================== */
+  /* ===========================
+     COLONNE GAUCHE (LOGO)
+     =========================== */
+  /* ===========================
+     BLOC DROITE OPTIONNEL
+     =========================== */
+  /* ===========================
+     NAVIGATION (COLONNE DROITE)
+     =========================== */
+  /* ===========================
+     ÉTATS D’AFFICHAGE DU MENU
+     (pilotés en JS avec .nav-hidden)
+     =========================== */
+  /* État par défaut : visible */
+  /* Desktop : caché → slide vers la gauche */
+  /* Mobile : on utilise translateY pour cacher/montrer */
+}
+@media (max-width: 1090px) {
+  header[role=banner] {
+    height: 160px;
+  }
+}
+@media (min-width: 1400px) {
+  header[role=banner] {
+    height: 250px;
+  }
+}
+@media (max-width: 810px) {
+  header[role=banner] {
+    width: 100%;
+    height: 170px;
+    flex-direction: row;
+  }
+}
+header[role=banner] .qdd-header {
+  opacity: 1 !important;
 }
 header[role=banner] .language-switcher-language-url {
   text-transform: uppercase;
@@ -296,28 +341,20 @@ header[role=banner] .language-switcher-language-url ul li:nth-child(1)::after {
 header[role=banner] .language-switcher-language-url ul .is-active {
   font-family: "gilroy-bold";
 }
-@media (max-width: 810px) {
-  header[role=banner] {
-    height: 100vh;
-  }
-  header[role=banner] header {
-    position: relative;
-    flex-direction: column;
-    height: auto !important;
-  }
-}
 header[role=banner] .contextual-region {
   width: max-content;
 }
 header[role=banner] .header_left_container {
-  flex: 0 0 100%;
+  flex: 0 0 45%;
   display: flex;
   flex-direction: row;
   background-color: rgb(255, 255, 255);
   transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out;
 }
-header[role=banner] .header_left_container img {
-  display: none;
+@media (max-width: 810px) {
+  header[role=banner] .header_left_container {
+    flex: 1 0 100%;
+  }
 }
 @media (max-width: 660px) {
   header[role=banner] .header_left_container {
@@ -344,24 +381,12 @@ header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2
 header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
   margin: auto;
 }
-header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
-  width: 90%;
-  margin: auto;
-}
-@media (max-width: 1650px) {
-  header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
-    width: 80%;
-  }
-}
-header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
-  width: 100%;
-}
 header[role=banner] .header_left_container img {
   width: auto;
   margin: auto;
-  height: calc(200px - 1rem);
+  height: calc(200px - 4rem);
   padding: 2rem;
-  transition: height 0.3s; /* Add transition for smooth resizing */
+  transition: height 0.3s;
 }
 @media (max-width: 891px) {
   header[role=banner] .header_left_container img {
@@ -387,78 +412,46 @@ header[role=banner] .header_right_container {
   text-align: center;
   transform: translateX(0);
   transition: transform 0.3s ease-in-out;
-  z-index: -1;
+  z-index: 60;
   position: fixed;
   right: 0;
   border-radius: 11px;
-  padding: 0.5rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
   margin: 1rem;
-  padding-top: 0rem;
-  padding-bottom: 0rem;
 }
 @media (max-width: 660px) {
   header[role=banner] .header_right_container {
     padding-right: 0;
   }
 }
-header[role=banner] .header_right_container .language-switcher-language-url {
-  text-transform: uppercase;
-  color: white;
-}
-header[role=banner] .header_right_container .language-switcher-language-url ul {
-  display: flex;
-  flex-direction: row;
-  font-size: 0.6rem;
-  padding: 0;
-}
-@media (max-width: 660px) {
-  header[role=banner] .header_right_container .language-switcher-language-url ul {
-    margin-bottom: 0;
-  }
-}
-@media (max-width: 500px) {
-  header[role=banner] .header_right_container .language-switcher-language-url ul {
-    flex-direction: column;
-    margin: auto;
-  }
-}
-header[role=banner] .header_right_container .language-switcher-language-url ul li a {
-  color: white;
-  font-family: "gilroy-light";
-}
-header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
-  content: " / ";
-  white-space: pre;
-}
-@media (max-width: 660px) {
-  header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
-    content: none;
-  }
-}
-header[role=banner] .header_right_container .language-switcher-language-url ul .is-active {
-  font-family: "gilroy-bold";
-}
 header[role=banner] .header_nav_container {
-  flex: 0 0 0%;
+  flex: 0 0 30%;
   width: 100%;
   min-width: fit-content;
   background: rgb(7, 50, 194);
   text-align: center;
-  transform: translateX(0);
-  transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
-  z-index: -1;
   display: flex;
   flex-direction: column;
+  z-index: -1;
+  transform: translateX(0);
+  transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
+  /* ---- Bloc menu principal ---- */
+  /* ---- Sélecteur de langue en bas du menu ---- */
 }
 @media (max-width: 810px) {
   header[role=banner] .header_nav_container {
+    /* 🔹 en mobile : nav en dessous du header, en absolu */
+    position: absolute;
+    left: 0;
+    top: 170px;
+    width: 100%;
     height: 200px;
-    top: -30px;
+    flex: 0 0 auto;
   }
 }
 @media (max-width: 500px) {
   header[role=banner] .header_nav_container {
-    flex: 0 0 40%;
+    height: auto;
   }
 }
 header[role=banner] .header_nav_container #block-quartiers-de-demain-entete {
@@ -534,18 +527,27 @@ header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurde
     margin-top: 0.5rem;
   }
 }
-header[role=banner] .header_nav_container.hidden {
-  transform: translateX(30%);
-}
-header[role=banner] .header_nav_container.visible {
+header[role=banner] .header_nav_container {
   transform: translateX(0);
 }
-header[role=banner] .header:hover + .header_nav_container {
-  transform: translateX(0);
+header[role=banner] .header_nav_container.nav-hidden {
+  transform: translateX(-100%);
+}
+@media (max-width: 810px) {
+  header[role=banner] .header_nav_container {
+    transform: translateY(0);
+  }
+  header[role=banner] .header_nav_container.nav-hidden {
+    transform: translateY(-100%);
+  }
 }
 
+/* ===========================
+   HEADER "SHRINK" AU SCROLL
+   =========================== */
 .shrink {
   height: 260px;
+  background: none;
 }
 @media (max-width: 810px) {
   .shrink {
@@ -553,143 +555,6 @@ header[role=banner] .header:hover + .header_nav_container {
   }
 }
 
-/* Taille définitive du header après l'animation */
-header[role=banner].header--collapsed {
-  height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 35%;
-  transform-origin: bottom right;
-  transition: all 1.4s ease-in-out;
-}
-@media (max-width: 1090px) {
-  header[role=banner].header--collapsed {
-    height: 160px;
-  }
-}
-@media (min-width: 1400px) {
-  header[role=banner].header--collapsed {
-    height: 250px;
-  }
-}
-header[role=banner].header--collapsed .qdd-header {
-  opacity: 1 !important;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed {
-    width: 100%;
-    height: 170px;
-  }
-}
-header[role=banner].header--collapsed .header_left_container {
-  flex-basis: 65%;
-  transform-origin: bottom right;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed .header_left_container {
-    flex: 1 0 100%;
-  }
-}
-header[role=banner].header--collapsed .header_nav_container {
-  flex-basis: 30%;
-  transform-origin: bottom right;
-  min-width: fit-content;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed .header_nav_container {
-    flex: 1 0 100%;
-    position: relative;
-    left: -100%;
-  }
-}
-
-header[role=banner].header--collapsed-already {
-  height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 35%;
-  transform-origin: bottom right;
-  transition: all 0s ease-in-out;
-}
-header[role=banner].header--collapsed-already .qdd-header {
-  opacity: 1 !important;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed-already {
-    width: 100%;
-  }
-}
-@media (min-width: 1400px) {
-  header[role=banner].header--collapsed-already {
-    height: 250px;
-  }
-}
-header[role=banner].header--collapsed-already .header_left_container {
-  flex-basis: 65%;
-  transform-origin: bottom right;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed-already .header_left_container {
-    flex: 1 0 100%;
-  }
-}
-header[role=banner].header--collapsed-already .header_nav_container {
-  flex-basis: 30%;
-  min-width: fit-content;
-  transform-origin: bottom right;
-}
-@media (max-width: 810px) {
-  header[role=banner].header--collapsed-already .header_nav_container {
-    flex: 1 0 100%;
-    position: relative;
-    left: -100%;
-  }
-}
-@media (max-width: 550px) {
-  header[role=banner].header--collapsed-already .header_nav_container {
-    top: 0px;
-  }
-}
-
-/* Empêcher le scroll pendant l'intro */
-body.logo-intro-animating {
-  overflow: hidden;
-}
-
-/* Header plein écran au tout début */
-body.logo-intro-active header[role=banner] {
-  height: 100vh;
-  width: 100%;
-}
-
-/* État normal du SVG (dans le header) */
-#block-quartiers-de-demain-logoquartiersdedemain svg {
-  position: relative;
-  top: auto;
-  left: auto;
-  transform: none;
-  transform-origin: center center;
-  transition: transform 1.4s ease-in-out, top 1.4s ease-in-out, left 1.4s ease-in-out;
-}
-
-/* État intro : logo centré, scale(2) */
-body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(2);
-  z-index: 9999;
-}
-
-/* Pendant l'intro : même si le header est "collapsed",
-   on garde TOUT l'espace pour le bloc gauche,
-   la nav ne prend AUCUNE place (0%) */
-body.logo-intro-animating header[role=banner].header--collapsed .header_left_container {
-  flex: 0 0 100%;
-}
-
-body.logo-intro-animating header[role=banner].header--collapsed .header_nav_container {
-  flex: 0 0 0%;
-  width: 0;
-  overflow: hidden;
-}
-
 footer {
   z-index: 100;
 }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/header.js b/web/themes/custom/quartiers_de_demain/src/assets/js/header.js
index ed51cde..85f64e3 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/header.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/header.js
@@ -1,191 +1,71 @@
-// // //////// start header ////////////
+
+
+
 // // document.addEventListener('DOMContentLoaded', function() {
 
-// //     const header = document.querySelector('header[role="banner"]');
-// //     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)');
-// //     const headerNavContainer = document.querySelector('.header_nav_container');
-// //     const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
-// //     const isTargetPath = window.location.pathname === '/';
-  
-// //     // Fonction pour démarrer l'animation du logo SVG
-// //     function startLogoAnimation() {
-// //       logo.classList.add('animated');
-// //     }
-  
-// //     // Fonction pour arrêter l'animation du logo SVG
-// //     function stopLogoAnimation() {
-// //       logo.classList.remove('animated');
-// //     }
-  
-// //     // Vérifier si le header a la classe header--collapse
-// //     function checkHeaderCollapse() {
-// //       if (header.classList.contains('header--collapsed')) {
-// //         stopLogoAnimation();
-// //       } else if (header.classList.contains('header--collapsed-already'))  {
-// //           stopLogoAnimation();
-// //         } else {
-// //         startLogoAnimation();
-// //       }
-  
-// //     }
+// //   const header = document.querySelector('header[role="banner"]');
+// //   const headerNavContainer = document.querySelector('.header_nav_container');
 
+// //   const threshold = 100;
+// //   let lastScrollTop = 0;
+// //   let isHidden = false;
+// //   let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
 
+// //   /* -------------------
+// //      Animations nav
+// //   ------------------- */
 
-// //     // Appeler la fonction au chargement initial
-// //     checkHeaderCollapse();
-  
-// //     // Observer les changements de classe sur le header
-// //     const observer = new MutationObserver(function(mutations) {
-// //       mutations.forEach(function(mutation) {
-// //         if (mutation.attributeName === 'class') {
-// //           checkHeaderCollapse();
-// //         }
-// //       });
+// //   function slideOut() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(0)' },
+// //       { transform: 'translateX(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
 // //     });
-// //     observer.observe(header, { attributes: true });
-  
-  
-// //     // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
-// //     if (!isFirstLoad || !isTargetPath) {
-// //       header.classList.add('header--collapsed-already');
-// //       stopLogoAnimation();
-// //     } else {
-// //       // Sinon, appliquer la transition après un délai, sauf si scroll
-// //       let collapseTimeout = setTimeout(() => {
-// //         header.classList.add('header--collapsed');
-// //       }, 1000);
-  
-// //       function interruptCollapseOnScroll() {
-// //         if (!header.classList.contains('header--collapsed')) {
-// //           clearTimeout(collapseTimeout); // annule l'animation
-// //           header.classList.add('header--collapsed');
-// //         }
-// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
-// //       }
-  
-// //       window.addEventListener('scroll', interruptCollapseOnScroll);
-// //     }
-// //     //////////////////////////////////////
-  
-// //     let lastScrollTop = 0;
-// //     let threshold = 100; // Change this value as needed
-// //     let isHidden = false;
-  
-// //     function slideOut() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateX(0)' },
-// //         { transform: 'translateX(-100%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = true;
-// //     }
-  
-// //     function slideIn() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateX(-100%)' },
-// //         { transform: 'translateX(0)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = false;
-// //     }
-    
-// //     function slideDown() {
-// //       // headerNavContainer.style.display = 'block';
-// //       headerNavContainer.animate([
-// //         { transform: 'translateY(0%)' },
-// //         { transform: 'translateY(+100%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       });
-// //       isHidden = false;
-// //     }
-  
-// //     function slideUp() {
-// //       headerNavContainer.animate([
-// //         { transform: 'translateY(100%)' },
-// //         { transform: 'translateY(0%)' }
-// //       ], {
-// //         duration: 300,
-// //         fill: 'forwards'
-// //       }).onfinish = function() {
-// //         // headerNavContainer.style.display = 'none';
-// //       };
-// //       isHidden = true;
-// //     }
-// //       // Fonction pour ajuster la hauteur du header lors du défilement
-// //       function adjustHeaderHeight() {
-// //         if (window.scrollY > 0) {
-// //           header.classList.add('shrink');
-// //         } else {
-// //           header.classList.remove('shrink');
-// //         }
-// //       }
-  
-// //     function handleScroll() {
-// //       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-// //       const isMobile = window.innerWidth < 811;
-  
-// //       if (scrollTop > threshold && !isHidden) {
-// //         if (isMobile) {
-// //           slideUp();
-// //         } else {
-// //           slideOut();
-// //         }
-// //       } else if (scrollTop <= threshold && isHidden) {
-// //         if (isMobile) {
-// //           slideDown();
-// //         } else {
-// //           slideIn();
-// //         }
-// //       }
-  
-  
-// //       lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
-// //     }
-  
-// //     function handleTouchAndMouseEnter() {
-// //       if (isHidden) {
-// //         if (window.innerWidth < 811) {
-// //           slideDown();
-// //         } else {
-// //           slideIn();
-// //         }
-// //       }
-// //     }
-  
-// //     function handleTouchAndMouseLeave() {
-// //       if (lastScrollTop > threshold && !isHidden) {
-// //         if (window.innerWidth < 811) {
-// //           slideUp();
-// //         } else {
-// //           slideOut();
-// //         }
-// //       }
-// //     }
-  
-// //     window.addEventListener('scroll', handleScroll);
-// //     window.addEventListener('scroll', adjustHeaderHeight);
-  
-// //     // Mouse events for desktop
-// //     header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-// //     header.addEventListener('mouseleave', handleTouchAndMouseLeave);
-  
-// //     // Touch events for tablets and mobile devices
-// //     header.addEventListener('touchstart', handleTouchAndMouseEnter);
-// //     header.addEventListener('touchend', handleTouchAndMouseLeave);
-  
-// //     // Initial check to see if we're at the top of the page
+// //     isHidden = true;
+// //   }
+
+// //   function slideIn() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateX(-100%)' },
+// //       { transform: 'translateX(0)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideDown() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(-100%)' },
+// //       { transform: 'translateY(0%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = false;
+// //   }
+
+// //   function slideUp() {
+// //     headerNavContainer.animate([
+// //       { transform: 'translateY(0%)' },
+// //       { transform: 'translateY(-100%)' }
+// //     ], {
+// //       duration: 300,
+// //       fill: 'forwards'
+// //     });
+// //     isHidden = true;
+// //   }
+
+// //   function initNavPosition() {
 // //     if (window.pageYOffset <= threshold) {
 // //       if (window.innerWidth < 811) {
 // //         slideDown();
-// //       } else { 
+// //       } else {
 // //         slideIn();
-// //       } 
+// //       }
 // //     } else {
 // //       if (window.innerWidth < 811) {
 // //         slideUp();
@@ -193,105 +73,227 @@
 // //         slideIn();
 // //       }
 // //     }
-  
-// //   });
-  
-// //   //////// end header ////////////
-  
+// //   }
+
+// //   /* -------------------
+// //      Scroll / resize header
+// //   ------------------- */
+
+// //   function adjustHeaderHeight() {
+// //     if (window.scrollY > 0) {
+// //       header.classList.add('shrink');
+// //     } else {
+// //       header.classList.remove('shrink');
+// //     }
+// //   }
+
+// //   function handleScroll() {
+// //     if (!introDone) return; // ici ça passe, introDone = true
+
+// //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+// //     const isMobile = window.innerWidth < 811;
+
+// //     if (scrollTop > threshold && !isHidden) {
+// //       if (isMobile) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     } else if (scrollTop <= threshold && isHidden) {
+// //       if (isMobile) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+
+// //     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+// //   }
+
+// //   function handleTouchAndMouseEnter() {
+// //     if (!introDone) return;
+
+// //     if (isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   function handleTouchAndMouseLeave() {
+// //     if (!introDone) return;
+
+// //     if (lastScrollTop > threshold && !isHidden) {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideOut();
+// //       }
+// //     }
+// //   }
+
+// //   // ✅ on n'a plus besoin de masquer la nav au début
+// //   if (headerNavContainer) {
+// //     headerNavContainer.style.visibility = 'visible';
+// //   }
+
+// //   window.addEventListener('scroll', handleScroll);
+// //   window.addEventListener('scroll', adjustHeaderHeight);
+
+// //   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+// //   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+// //   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+// //   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+// //   // ✅ position initiale de la nav
+// //   initNavPosition();
+
+// // });
 
 
-///////////////start header sans animation logo////////////////
+// document.addEventListener('DOMContentLoaded', function() {
 
-document.addEventListener('DOMContentLoaded', function() {
+//   const header = document.querySelector('header[role="banner"]');
+//   const headerNavContainer = document.querySelector('.header_nav_container');
 
+//   if (!header || !headerNavContainer) return;
+
+//   const threshold = 100;
+//   let lastScrollTop = 0;
+//   let isHidden = false;
+//   let introDone = true; // ✅ pas d'intro, donc direct prêt
+
+//   /* -------------------
+//      Helpers show / hide
+//   ------------------- */
+
+//   function hideNav() {
+//     headerNavContainer.classList.add('nav-hidden');
+//     isHidden = true;
+//   }
+
+//   function showNav() {
+//     headerNavContainer.classList.remove('nav-hidden');
+//     isHidden = false;
+//   }
+
+//   function isMobile() {
+//     return window.innerWidth < 811;
+//   }
+
+//   /* -------------------
+//      Position initiale
+//   ------------------- */
+
+//   function initNavPosition() {
+//     if (window.pageYOffset <= threshold) {
+//       showNav();   // en haut de page → nav visible
+//     } else {
+//       if (isMobile()) {
+//         hideNav(); // mobile scrollé → nav cachée
+//       } else {
+//         showNav(); // desktop : nav visible même en bas
+//       }
+//     }
+//   }
+
+//   /* -------------------
+//      Scroll / resize header
+//   ------------------- */
+
+//   function adjustHeaderHeight() {
+//     if (window.scrollY > 0) {
+//       header.classList.add('shrink');
+//     } else {
+//       header.classList.remove('shrink');
+//     }
+//   }
+
+//   function handleScroll() {
+//     if (!introDone) return;
+
+//     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+//     if (scrollTop > threshold && !isHidden) {
+//       // on cache la nav
+//       hideNav();
+//     } else if (scrollTop <= threshold && isHidden) {
+//       // on ré-affiche la nav
+//       showNav();
+//     }
+
+//     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+//   }
+
+//   function handleTouchAndMouseEnter() {
+//     if (!introDone) return;
+//     if (isHidden) {
+//       showNav();
+//     }
+//   }
+
+//   function handleTouchAndMouseLeave() {
+//     if (!introDone) return;
+
+//     if (lastScrollTop > threshold && !isHidden) {
+//       hideNav();
+//     }
+//   }
+
+//   // Rendre la nav visible (plus de visibility:hidden)
+//   headerNavContainer.style.visibility = 'visible';
+
+//   window.addEventListener('scroll', handleScroll);
+//   window.addEventListener('scroll', adjustHeaderHeight);
+
+//   header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+//   header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+//   header.addEventListener('touchstart', handleTouchAndMouseEnter);
+//   header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+//   // Position de départ
+//   initNavPosition();
+//   adjustHeaderHeight();
+// });
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
   const header = document.querySelector('header[role="banner"]');
-  const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
   const headerNavContainer = document.querySelector('.header_nav_container');
 
-  const navEntry = performance.getEntriesByType("navigation")[0];
-  const isFirstLoad = !navEntry.type.includes('back_forward');
-  const isTargetPath = window.location.pathname === '/';
-  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
+  if (!header || !headerNavContainer) return;
 
   const threshold = 100;
   let lastScrollTop = 0;
-  let isHidden = false;
-  let introDone = false; // ✅ on saura quand l'intro est finie
+  let isHidden = false; // au chargement : nav visible
 
-  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
-  if (headerNavContainer) {
-    headerNavContainer.style.visibility = 'hidden';
+  function isMobile() {
+    return window.innerWidth < 811;
   }
 
-  /* -------------------
-     Animations nav
-  ------------------- */
+  /* --- helpers --- */
 
-  function slideOut() {
-    headerNavContainer.animate([
-      { transform: 'translateX(0)' },
-      { transform: 'translateX(-100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
+  function hideNav() {
+    headerNavContainer.classList.add('nav-hidden');
     isHidden = true;
   }
 
-  function slideIn() {
-    headerNavContainer.animate([
-      { transform: 'translateX(-100%)' },
-      { transform: 'translateX(0)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
+  function showNav() {
+    headerNavContainer.classList.remove('nav-hidden');
     isHidden = false;
   }
 
-  function slideDown() {
-    headerNavContainer.animate([
-      { transform: 'translateY(0%)' },
-      { transform: 'translateY(+100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
-    isHidden = false;
-  }
+  /* --- init : nav visible au chargement --- */
 
-  function slideUp() {
-    headerNavContainer.animate([
-      { transform: 'translateY(100%)' },
-      { transform: 'translateY(0%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    }).onfinish = function() {};
-    isHidden = true;
-  }
+  headerNavContainer.style.visibility = 'visible';
+  showNav();
 
-  // ✅ Position initiale de la nav,
-  // appelée UNIQUEMENT après la fin de l'intro
-  function initNavPosition() {
-    if (window.pageYOffset <= threshold) {
-      if (window.innerWidth < 811) {
-        slideDown();
-      } else {
-        slideIn();
-      }
-    } else {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideIn();
-      }
-    }
-  }
-
-  /* -------------------
-     Scroll / resize header
-  ------------------- */
+  /* --- shrink header --- */
 
   function adjustHeaderHeight() {
     if (window.scrollY > 0) {
@@ -301,115 +303,45 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  function handleScroll() {
-    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
+  /* --- scroll : cache / montre la nav --- */
 
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const isMobile = window.innerWidth < 811;
+  function handleScroll() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
     if (scrollTop > threshold && !isHidden) {
-      if (isMobile) {
-        slideUp();
-      } else {
-        slideOut();
-      }
+      // on cache la nav (desktop & mobile)
+      hideNav();
     } else if (scrollTop <= threshold && isHidden) {
-      if (isMobile) {
-        slideDown();
-      } else {
-        slideIn();
-      }
+      // on la remonte en haut de page
+      showNav();
     }
 
     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
   }
 
-  function handleTouchAndMouseEnter() {
-    if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
+  /* --- hover / touch sur le header : on montre la nav --- */
 
+  function handleEnter() {
     if (isHidden) {
-      if (window.innerWidth < 811) {
-        slideDown();
-      } else {
-        slideIn();
-      }
+      showNav();
     }
   }
 
-  function handleTouchAndMouseLeave() {
-    if (!introDone) return;
-
+  function handleLeave() {
     if (lastScrollTop > threshold && !isHidden) {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideOut();
-      }
+      hideNav();
     }
   }
 
-  window.addEventListener('scroll', handleScroll);
-  window.addEventListener('scroll', adjustHeaderHeight);
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
 
-  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  header.addEventListener('mouseenter', handleEnter);
+  header.addEventListener('mouseleave', handleLeave);
 
-  header.addEventListener('touchstart', handleTouchAndMouseEnter);
-  header.addEventListener('touchend', handleTouchAndMouseLeave);
-
-  /* -------------------
-     Intro du logo
-  ------------------- */
-
-  if (isFirstLoad && isTargetPath && logo  && !isMobile) {
-    // On bloque le scroll
-    document.body.classList.add('logo-intro-animating');
-
-    // 1) Logo plein écran SANS ANIMATION + header figé
-    logo.style.transition = 'none';
-    header.style.transition = 'none';
-    document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
-
-    void logo.offsetWidth; // reflow
-
-    const INTRO_DELAY = 1000;          // temps où le logo reste plein écran
-    const TRANSITION_DURATION = 1000;  // durée de l'anim de collapse
-
-    // 2) Après ce délai : on réactive les transitions et on lance l'anim
-    setTimeout(() => {
-      logo.style.transition = '';
-      header.style.transition = '';
-
-      header.classList.add('header--collapsed');           // header se rétracte
-      document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
-
-      // 3) Quand le header + logo ont fini de bouger :
-      setTimeout(() => {
-        document.body.classList.remove('logo-intro-animating');
-        introDone = true;
-
-        // 👉 maintenant seulement on affiche la nav et on la fait glisser
-        if (headerNavContainer) {
-          headerNavContainer.style.visibility = 'visible';
-        }
-        initNavPosition();
-
-      }, TRANSITION_DURATION + 100);
-
-    }, INTRO_DELAY);
-
-  } else {
-    // 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
-    // pas d'intro : header direct réduit, nav directement dispo
-    
-    header.classList.add('header--collapsed-already');
-    introDone = true;
-    if (headerNavContainer) {
-      headerNavContainer.style.visibility = 'visible';
-    }
-    initNavPosition();
-  }
+  header.addEventListener('touchstart', handleEnter);
+  header.addEventListener('touchend', handleLeave);
 
+  // init
+  adjustHeaderHeight();
 });
-
-///////////////end header sans animation logo////////////////
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
index b762404..6eb8f66 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
@@ -1,455 +1,690 @@
-header[role="banner"]{
-    display: flex;
-    flex-direction: row;
-    height: 100vh;
-    width: 100%;
-    z-index: 99;
-    max-width: 100vw;
+// /* ===========================
+//    HEADER GLOBAL
+//    =========================== */
+
+//    header[role="banner"] {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     z-index: 99;
+//     max-width: 100vw;
+  
+//     display: flex;
+//     flex-direction: row;
+//     transform-origin: bottom right;
+//     height: $header-height;
+//     width: 35%;
+//     transition: all 1.4s ease-in-out;
+  
+//     @media (max-width: 1090px) {
+//       height: $header-height-pad;
+//     }
+  
+//     @media (min-width: 1400px) {
+//       height: $header-height-big;
+//     }
+  
+//     @media (max-width: 810px) {
+//       width: 100%;
+//       height: 170px;
+//       flex-direction: row;
+//     }
+  
+//     .qdd-header {
+//       opacity: 1 !important;
+//     }
+  
+//     /* ===========================
+//        LANGUAGE SWITCHER
+//        =========================== */
+  
+//     .language-switcher-language-url {
+//       text-transform: uppercase;
+//       color: white;
+  
+//       ul {
+//         display: flex;
+//         flex-direction: row;
+//         font-size: 0.6rem;
+//         padding: 0;
+//         width: fit-content;
+  
+//         @media (max-width: 810px) {
+//           font-size: 0.9rem;
+//         }
+  
+//         li a {
+//           color: white;
+//           font-family: "gilroy-light";
+//         }
+  
+//         li:nth-child(1) {
+//           &::after {
+//             content: " / ";
+//             white-space: pre;
+//           }
+//         }
+  
+//         .is-active {
+//           font-family: "gilroy-bold";
+//         }
+//       }
+//     }
+  
+//     .contextual-region {
+//       width: max-content;
+//     }
+  
+//     /* ===========================
+//        COLONNE GAUCHE (LOGO)
+//        =========================== */
+  
+//     .header_left_container {
+//       flex: 0 0 45%;
+//       display: flex;
+//       flex-direction: row;
+//       background-color: $white-header;
+//       transition:
+//         flex-basis 0.9s ease-in-out,
+//         width 0.9s ease-in-out;
+  
+//       img {
+//         display: none;
+//       }
+  
+//       @media (max-width: 660px) {
+//         height: inherit;
+//       }
+  
+//       #block-quartiers-de-demain-logorepu-2 {
+//         display: none;
+  
+//         @media (max-width: 891px) {
+//           height: $header-height-pad;
+//         }
+//       }
+  
+//       #block-quartiers-de-demain-logoepau-2 {
+//         display: none;
+//         height: $header-height;
+  
+//         @media (max-width: 891px) {
+//           height: $header-height-pad;
+//         }
+//       }
+  
+//       #block-quartiers-de-demain-logoquartiersdedemain {
+//         margin: auto;
+  
+//         .field_field_logo {
+//           width: 90%;
+//           margin: auto;
+  
+//           @media (max-width: 1650px) {
+//             width: 80%;
+//           }
+  
+//           .qdd-header {
+//             width: 100%;
+//           }
+//         }
+//       }
+  
+//       img {
+//         width: auto;
+//         margin: auto;
+//         height: calc($header-height - 1rem);
+//         padding: 2rem;
+//         transition: height 0.3s;
+  
+//         @media (max-width: 891px) {
+//           height: $header-height-pad;
+//         }
+  
+//         @media (max-width: 660px) {
+//           height: $header-height-small;
+//         }
+  
+//         @media (max-width: 450px) {
+//           height: $header-height-ultrasmall;
+//         }
+//       }
+//     }
+  
+//     /* ===========================
+//        BOUTON / BLOCS DROITE (SI BESOIN)
+//        =========================== */
+  
+//     .header_right_container {
+//       display: none;
+//       flex: 0 0 0%;
+//       width: fit-content;
+//       min-width: fit-content;
+//       background: $blue_QDD;
+//       text-align: center;
+//       transform: translateX(0);
+//       transition: transform 0.3s ease-in-out;
+//       z-index: 10;
+//       position: fixed;
+//       right: 0;
+//       border-radius: 11px;
+//       padding: 0.5rem 0.5rem 0 0.5rem;
+//       margin: 1rem;
+  
+//       @media (max-width: 660px) {
+//         padding-right: 0;
+//       }
+//     }
+  
+//     /* ===========================
+//        NAVIGATION (COLONNE DROITE)
+//        =========================== */
+  
+//     .header_nav_container {
+//       flex: 0 0 0%;
+//       width: 100%;
+//       min-width: fit-content;
+  
+//       background: $blue_QDD;
+//       text-align: center;
+//       display: flex;
+//       flex-direction: column;
+  
+//       z-index: -1;
+//       transform: translateX(0);
+//       transition:
+//         flex-basis 0.9s ease-in-out,
+//         width 0.9s ease-in-out,
+//         transform 0.3s ease-in-out;
+  
+//       @media (max-width: 810px) {
+//         height: 200px;
+//         top: -30px;
+//         flex: 1 0 100%;
+//         position: relative;
+//       }
+  
+//       @media (max-width: 500px) {
+//         flex: 0 0 40%;
+//       }
+  
+//       /* ---- Bloc menu principal ---- */
+//       #block-quartiers-de-demain-entete {
+//         margin: auto;
+  
+//         h2 {
+//           display: none;
+//         }
+  
+//         ul {
+//           display: flex;
+//           flex-direction: column;
+//           align-items: flex-start;
+//           position: relative;
+//           padding-left: 1rem;
+//           padding-right: 1rem;
+//           margin: auto;
+  
+//           @media (max-width: 1025px) {
+//             top: 0;
+//             align-items: center;
+//             padding-top: 0.3rem;
+//           }
+  
+//           li {
+//             width: 100%;
+//             text-align: left;
+  
+//             .is-active {
+//               font-family: "gilroy-bold";
+//             }
+  
+//             :hover {
+//               font-family: "gilroy-bold";
+//             }
+  
+//             @media (max-width: 1090px) {
+//               padding-top: 0.3rem;
+//             }
+  
+//             @media (max-width: 810px) {
+//               line-height: 1.3rem;
+//             }
+  
+//             a {
+//               text-transform: uppercase;
+//               color: white;
+//               font-size: 0.5rem;
+  
+//               @media (max-width: 1090px) {
+//                 font-size: 0.6rem;
+//               }
+  
+//               @media (max-width: 810px) {
+//                 display: flex;
+//                 flex-direction: column;
+//                 align-items: center;
+//                 font-size: 0.8rem;
+//               }
+//             }
+//           }
+//         }
+//       }
+  
+//       /* ---- Sélecteur de langue en bas du menu ---- */
+//       #block-quartiers-de-demain-selecteurdelangue {
+//         width: fit-content;
+//         margin: auto;
+  
+//         @media (max-width: 810px) {
+//           padding-bottom: 0.5rem;
+//           margin-bottom: 0.5rem;
+  
+//           .links {
+//             margin-top: 0.5rem;
+//           }
+//         }
+//       }
+//     }
+  
+//     /* ===========================
+//        ÉTATS D’AFFICHAGE DU MENU
+//        (pilotés en JS avec .nav-hidden)
+//        =========================== */
+  
+//     /* État par défaut : menu visible */
+//     .header_nav_container {
+//       transform: translateX(0);
+//     }
+  
+//     /* Menu caché : desktop → slide vers la gauche */
+//     .header_nav_container.nav-hidden {
+//       transform: translateX(-100%);
+//     }
+  
+//     /* Spécifique mobile : on slide verticalement */
+//     @media (max-width: 810px) {
+//       .header_nav_container {
+//         transform: translateY(0);
+//       }
+  
+//       .header_nav_container.nav-hidden {
+//         transform: translateY(-100%);
+//       }
+//     }
+//   }
+  
+//   /* ===========================
+//      HEADER "SHRINK" AU SCROLL
+//      =========================== */
+  
+//   .shrink {
+//     height: 260px;
+  
+//     @media (max-width: 810px) {
+//       height: 170px;
+//     }
+//   }
+  
+//   /* ===========================
+//      RÉGLAGES DE LA RÉPARTITION GAUCHE / DROITE
+//      (quand le header est à son état "final")
+//      =========================== */
+  
+//   header[role="banner"] {
+//     .header_left_container {
+//       flex-basis: 65%;
+//       transform-origin: bottom right;
+  
+//       @media (max-width: 810px) {
+//         flex: 1 0 100%;
+//       }
+//     }
+  
+//     .header_nav_container {
+//       flex-basis: 30%;
+//       transform-origin: bottom right;
+//       min-width: fit-content;
+  
+//       @media (max-width: 810px) {
+//         flex: 1 0 100%;
+//         position: relative;
+//       }
+//     }
+//   }
+  
+
+
+/* ===========================
+   HEADER GLOBAL
+   =========================== */
+
+   header[role="banner"] {
     position: fixed;
     top: 0;
-    // transition: none;
-    // transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
-    // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
-    // transition: height 1s, padding 1s; /* Add transition for smooth resizing */
-    transition: height 1.4s ease-in-out,
-              width  1.4s ease-in-out;
-
-    .language-switcher-language-url{
-        text-transform: uppercase;
-        color: white;
-
-        ul{
-            display: flex;
-            flex-direction: row;   
-            font-size:0.6rem;
-            padding: 0;
-            width: fit-content;
-
-            @media(max-width: 810px){
-                font-size: 00.9rem;      
-            }
-            // @media(max-width: 500px){
-            //     flex-direction: column;
-            //     // margin-bottom: 0;
-            //     margin: auto;      
-            // }
-            li a {
-                color: white;
-                font-family: 'gilroy-light';
-
-            }
-            li:nth-child(1){
-                &::after{
-                    content: " / ";
-                    white-space: pre;
-                    @media(max-width: 660px){
-                        // content:none ;      
-                    }
-                }
-            }
-            .is-active{
-                font-family: 'gilroy-bold';
-            }
-        }
+    left: 0;
+    z-index: 50;
+    max-width: 100vw;
+  
+    display: flex;
+    flex-direction: row;
+    transform-origin: bottom right;
+    height: $header-height;
+    width: 35%;
+    transition: all 1.4s ease-in-out;
+    background-color: $white-header; // pour éviter la transparence
+  
+    @media (max-width: 1090px) {
+      height: $header-height-pad;
     }
-    
-    @media(max-width: 810px){
-        height: 100vh;
-        header {
-            position: relative;
-            flex-direction: column;
-            height: auto !important;
-          }
+  
+    @media (min-width: 1400px) {
+      height: $header-height-big;
     }
-
-    .contextual-region{
-        width: max-content;
+  
+    @media (max-width: 810px) {
+      width: 100%;
+      height: 170px;          // hauteur du bloc header-left
+      flex-direction: row;    // header_left + (nav positionnée en absolu)
     }
-
-    .header_left_container{
-        flex: 0 0 100%;
+  
+    .qdd-header {
+      opacity: 1 !important;
+    }
+  
+    /* ===========================
+       LANGUAGE SWITCHER
+       =========================== */
+  
+    .language-switcher-language-url {
+      text-transform: uppercase;
+      color: white;
+  
+      ul {
         display: flex;
         flex-direction: row;
-        // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
-        background-color: $white-header;
-            // 🔥 On anime la largeur via flex-basis (et width au cas où)
-        transition:
-            flex-basis 0.9s ease-in-out,
-            width      0.9s ease-in-out;
+        font-size: 0.6rem;
+        padding: 0;
+        width: fit-content;
   
-        img{display: none;}
-        @media(max-width: 660px){
+        @media (max-width: 810px) {
+          font-size: 0.9rem;
+        }
+  
+        li a {
+          color: white;
+          font-family: "gilroy-light";
+        }
+  
+        li:nth-child(1) {
+          &::after {
+            content: " / ";
+            white-space: pre;
+          }
+        }
+  
+        .is-active {
+          font-family: "gilroy-bold";
+        }
+      }
+    }
+  
+    .contextual-region {
+      width: max-content;
+    }
+  
+    /* ===========================
+       COLONNE GAUCHE (LOGO)
+       =========================== */
+  
+    .header_left_container {
+      flex: 0 0 45%;
+      display: flex;
+      flex-direction: row;
+      background-color: $white-header;
+      transition:
+        flex-basis 0.9s ease-in-out,
+        width 0.9s ease-in-out;
+  
+      @media (max-width: 810px) {
+        flex: 1 0 100%;
+      }
+  
+      @media (max-width: 660px) {
         height: inherit;
-        }
-        #block-quartiers-de-demain-logorepu-2{
+      }
+  
+      #block-quartiers-de-demain-logorepu-2 {
         display: none;
-            @media(max-width: 891px){
-            height: $header-height-pad;
-             }   
+  
+        @media (max-width: 891px) {
+          height: $header-height-pad;
         }
-        #block-quartiers-de-demain-logoepau-2{
+      }
+  
+      #block-quartiers-de-demain-logoepau-2 {
         display: none;
         height: $header-height;
-        @media(max-width: 891px){
-            height: $header-height-pad;
+  
+        @media (max-width: 891px) {
+          height: $header-height-pad;
         }
-
+      }
+  
+      #block-quartiers-de-demain-logoquartiersdedemain {
+        margin: auto;
+  
+        .field_field_logo {
+        //   width: 100%;
+        //   margin: auto;
+  
+        //   @media (max-width: 1650px) {
+        //     width: 80%;
+        //   }
+  
+        //   .qdd-header {
+        //     width: 100%;
+        //   }
         }
-        #block-quartiers-de-demain-logoquartiersdedemain{
-            // padding-right: 5%;
-            margin: auto;
-            .field_field_logo{
-                width: 90%;
-                margin: auto;
-                @media(max-width: 1650px){
-                    width: 80%;
-                }
-                .qdd-header{
-                    width: 100%;
-                }
-            }
+      }
+  
+      img {
+        width: auto;
+        margin: auto;
+        height: calc($header-height - 4rem);
+        padding: 2rem;
+        transition: height 0.3s;
+  
+        @media (max-width: 891px) {
+          height: $header-height-pad;
         }
-        img{
-            width: auto;
-            margin: auto;
-            height: calc($header-height - 1rem);
-            padding: 2rem;
-            transition: height 0.3s; /* Add transition for smooth resizing */   
-            @media(max-width: 891px){
-            height: $header-height-pad;
-        }
-        @media(max-width: 660px){
-            height: $header-height-small;
-        }
-        @media(max-width: 450px){
-            height: $header-height-ultrasmall;
+  
+        @media (max-width: 660px) {
+          height: $header-height-small;
         }
+  
+        @media (max-width: 450px) {
+          height: $header-height-ultrasmall;
         }
+      }
     }
-    .header_right_container{
-        display: none;
-        flex: 0 0 0%;
-        width: fit-content;
-        min-width: fit-content;
-        background: $blue_QDD;
-        text-align: center;
-        transform: translateX(0);
-        transition: transform 0.3s ease-in-out;
-        z-index: -1 ;
-        position: fixed;
-        right: 0;
-        border-radius: 11px;
-        padding: 0.5rem;
-        margin: 1rem;
-        padding-top: 0rem;
-        padding-bottom: 0rem;
-
-
-        @media(max-width: 660px){
-            padding-right: 0;
-        }
-        .language-switcher-language-url{
-            text-transform: uppercase;
-            color: white;
-
-            ul{
-                display: flex;
-                flex-direction: row;   
-                font-size:0.6rem;
-                padding: 0;
-
-                @media(max-width: 660px){
-                    margin-bottom: 0;      
-                }
-                @media(max-width: 500px){
-                    flex-direction: column;
-                    // margin-bottom: 0;
-                    margin: auto;      
-                }
-                li a {
-                    color: white;
-                    font-family: 'gilroy-light';
-
-                }
-                li:nth-child(1){
-                    &::after{
-                        content: " / ";
-                        white-space: pre;
-                        @media(max-width: 660px){
-                            content:none ;      
-                        }
-                    }
-                }
-                .is-active{
-                    font-family: 'gilroy-bold';
-                }
-            }
-        }
+  
+    /* ===========================
+       BLOC DROITE OPTIONNEL
+       =========================== */
+  
+    .header_right_container {
+      display: none;
+      flex: 0 0 0%;
+      width: fit-content;
+      min-width: fit-content;
+      background: $blue_QDD;
+      text-align: center;
+      transform: translateX(0);
+      transition: transform 0.3s ease-in-out;
+      z-index: 60;
+      position: fixed;
+      right: 0;
+      border-radius: 11px;
+      padding: 0.5rem 0.5rem 0 0.5rem;
+      margin: 1rem;
+  
+      @media (max-width: 660px) {
+        padding-right: 0;
+      }
     }
-
-    .header_nav_container{
-        flex: 0 0 0%;
+  
+    /* ===========================
+       NAVIGATION (COLONNE DROITE)
+       =========================== */
+  
+    .header_nav_container {
+      flex: 0 0 30%;
+      width: 100%;
+      min-width: fit-content;
+      background: $blue_QDD;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+  
+      z-index: -1;
+      transform: translateX(0);
+      transition:
+        flex-basis 0.9s ease-in-out,
+        width 0.9s ease-in-out,
+        transform 0.3s ease-in-out;
+  
+      @media (max-width: 810px) {
+        /* 🔹 en mobile : nav en dessous du header, en absolu */
+        position: absolute;
+        left: 0;
+        top: 170px;     // même valeur que la hauteur du header mobile
         width: 100%;
-        min-width: fit-content;
-        background: $blue_QDD;
-        text-align: center;
-        transform: translateX(0);
-        // transition: transform 0.3s ease-in-out;
-        transition:
-            flex-basis 0.9s ease-in-out,
-            width      0.9s ease-in-out,
-            transform  0.3s ease-in-out; // pour tes slides
-        z-index: -1 ;
-        display: flex;
-        flex-direction: column;
-
-        @media(max-width: 1090px){
-            // text-align:left;
-            // height: fit-content;
-           
+        height: 200px;
+        flex: 0 0 auto;
+      }
+  
+      @media (max-width: 500px) {
+        height: auto;
+      }
+  
+      /* ---- Bloc menu principal ---- */
+      #block-quartiers-de-demain-entete {
+        margin: auto;
+  
+        h2 {
+          display: none;
         }
-        @media(max-width: 810px){
-            height: 200px;
-            top: -30px;
-        }
-        @media(max-width: 500px){
-            flex: 0 0 40%;
-        }
-        #block-quartiers-de-demain-entete{
-            margin: auto;
-            h2{
-                display: none;
+  
+        ul {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          position: relative;
+          padding-left: 1rem;
+          padding-right: 1rem;
+          margin: auto;
+  
+          @media (max-width: 1025px) {
+            top: 0;
+            align-items: center;
+            padding-top: 0.3rem;
+          }
+  
+          li {
+            width: 100%;
+            text-align: left;
+  
+            .is-active {
+              font-family: "gilroy-bold";
             }
-            ul {
+  
+            :hover {
+              font-family: "gilroy-bold";
+            }
+  
+            @media (max-width: 1090px) {
+              padding-top: 0.3rem;
+            }
+  
+            @media (max-width: 810px) {
+              line-height: 1.3rem;
+            }
+  
+            a {
+              text-transform: uppercase;
+              color: white;
+              font-size: 0.5rem;
+  
+              @media (max-width: 1090px) {
+                font-size: 0.6rem;
+              }
+  
+              @media (max-width: 810px) {
                 display: flex;
                 flex-direction: column;
-                align-items: flex-start;
-                position: relative;
-                padding-left: 1rem;
-                padding-right: 1rem;
-                margin: auto;
-                // padding-top: 5%;
-                @media(max-width: 1025px){
-                    top: 0;
-                    align-items: center;
-                    padding-top: 0.3rem;
-                }
-                @media(max-width: 1090px){
-                }
-                li{
-                    width: 100%;
-                    text-align: left;
-                    .is-active{
-                        font-family: "gilroy-bold";
-                    }
-                    :hover{
-                        font-family: "gilroy-bold";
-                    }
-                    @media(max-width: 1090px){
-                        padding-top: 0.3rem;
-                        
-                    }
-                    @media(max-width: 810px){
-                        
-                        line-height: 1.3rem;
-                    }
-                    
-                    a{
-                        text-transform: uppercase;
-                        color: white;
-                        font-size: 0.5rem;
-                        @media(max-width:1090px){
-                            font-size: 0.6rem;
-                        }
-                        @media(max-width: 810px){
-                            display: flex;
-                            flex-direction: column;
-                            align-items: center;
-                            font-size: 0.8rem;
-                        }
-                       
-                    }
-                    // &:not(:last-of-type){
-                    //     ::after{
-                    //         content: "";
-                    //         display: block;
-                    //         border-bottom: solid white 1px;
-                    //         padding-bottom: 0.3rem;
-                    //         width: 60%; /* Réduit la largeur du soulignement à 50% */
-                    //         // margin: 0 auto; /* Centre le soulignement sous l'élément */
-                    //     }
-
-                    // }
-                } 
-            }
-            @media(max-width: 660px){
-
+                align-items: center;
+                font-size: 0.8rem;
+              }
             }
+          }
         }
-        #block-quartiers-de-demain-selecteurdelangue{
-            width: fit-content;
-            margin: auto;
-            @media(max-width: 810px){
-                padding-bottom: 0.5rem;
-                margin-bottom: 0.5rem;
-                .links{
-                    margin-top: 0.5rem;
-                }
-            }
+      }
+  
+      /* ---- Sélecteur de langue en bas du menu ---- */
+      #block-quartiers-de-demain-selecteurdelangue {
+        width: fit-content;
+        margin: auto;
+  
+        @media (max-width: 810px) {
+          padding-bottom: 0.5rem;
+          margin-bottom: 0.5rem;
+  
+          .links {
+            margin-top: 0.5rem;
+          }
         }
-       
+      }
     }
-
-  .header_nav_container.hidden {
-    transform: translateX(30%);
-  }
-
-  .header_nav_container.visible {
-    transform: translateX(0);
-  }
-    
-  .header:hover + .header_nav_container {
-    transform: translateX(0);
-  }
-}
-.shrink{
-    height: 260px ;
-    @media(max-width: 810px){
-        height: 170px;
-       }
-}
-
-
-/* Taille définitive du header après l'animation */
-header[role="banner"].header--collapsed {
-    height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 35%;
-    transform-origin: bottom right; 
-    // transition: all 1s ease-in-out;
-    // transition: all 1.4s ease-in-out; 
-    transition: all 1.4s ease-in-out;
-    @media(max-width: 1090px) {
-        height: $header-height-pad;
+  
+    /* ===========================
+       ÉTATS D’AFFICHAGE DU MENU
+       (pilotés en JS avec .nav-hidden)
+       =========================== */
+  
+    /* État par défaut : visible */
+  
+    .header_nav_container {
+      transform: translateX(0);
     }
-    @media (min-width: 1400px) {
-        height: $header-height-big;
+  
+    /* Desktop : caché → slide vers la gauche */
+    .header_nav_container.nav-hidden {
+      transform: translateX(-100%);
     }
-    .qdd-header{
-        opacity: 1 !important;
+  
+    /* Mobile : on utilise translateY pour cacher/montrer */
+    @media (max-width: 810px) {
+      .header_nav_container {
+        transform: translateY(0);
+      }
+  
+      .header_nav_container.nav-hidden {
+        transform: translateY(-100%);
+      }
     }
-    @media(max-width: 810px){
-     width: 100%;
-     height: 170px;
-    }
-    .header_left_container{
-        // flex: 1 0 65%;
-        flex-basis: 65%;
-
-        transform-origin: bottom right; 
-        @media(max-width: 810px){
-            flex: 1 0 100%;
-        }
-    }
-    .header_nav_container{
-        // flex: 0 0 30%;
-        flex-basis: 30%;
-        transform-origin: bottom right; 
-        min-width: fit-content;
-        @media(max-width: 810px){
-            flex: 1 0 100%;
-            position: relative;
-            left: -100%;
-            // top: -45px;  /* a remettre et faire varier si ajoute éléments dans menu */
-
-        }
-    }
-    
-}
-header[role="banner"].header--collapsed-already{
-    height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 35%;
-    transform-origin: bottom right; 
-    transition: all 0s ease-in-out;
-    .qdd-header{
-        opacity: 1 !important;
-    }
-    @media(max-width: 810px){
-        width: 100%;
-        // height: 170px;
-       }
-    @media (min-width: 1400px) {
-        height: $header-height-big;
-    }
-    .header_left_container{
-        // flex: 1 0 65%;
-        flex-basis: 65%;
-        transform-origin: bottom right; 
-        @media(max-width: 810px){
-            flex: 1 0 100%;
-        }
-    }
-    .header_nav_container{
-        // flex: 0 0 30%;
-        flex-basis: 30%;
-        min-width: fit-content;
-        transform-origin: bottom right; 
-        @media(max-width: 810px){
-            flex: 1 0 100%;
-            position: relative;
-            left: -100%;
-            // top: -75px;
-        }
-        @media(max-width: 550px){
-            top: 0px;
-        }
-    }
-
-}
-
-
-/* Empêcher le scroll pendant l'intro */
-body.logo-intro-animating {
-  overflow: hidden;
-}
-
-/* Header plein écran au tout début */
-body.logo-intro-active header[role="banner"] {
-  height: 100vh;
-  width: 100%;
-}
-
-/* État normal du SVG (dans le header) */
-#block-quartiers-de-demain-logoquartiersdedemain svg {
-  position: relative;
-  top: auto;
-  left: auto;
-  transform: none; // donc scale(1)
-  transform-origin: center center;
-  transition:
-    transform 1.4s ease-in-out,
-    top       1.4s ease-in-out,
-    left      1.4s ease-in-out;
-}
-
-/* État intro : logo centré, scale(2) */
-body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(2);
-  z-index: 9999;
-}
-/* Pendant l'intro : même si le header est "collapsed",
-   on garde TOUT l'espace pour le bloc gauche,
-   la nav ne prend AUCUNE place (0%) */
-
-   body.logo-intro-animating header[role="banner"].header--collapsed .header_left_container {
-    flex: 0 0 100%;
   }
   
-  body.logo-intro-animating header[role="banner"].header--collapsed .header_nav_container {
-    flex: 0 0 0%;
-    width: 0;
-    overflow: hidden;
+  /* ===========================
+     HEADER "SHRINK" AU SCROLL
+     =========================== */
+  
+  .shrink {
+    height: 260px;
+    background: none;
+  
+    @media (max-width: 810px) {
+      height: 170px; // la hauteur du bloc header-left reste la même en mobile
+    }
   }
   
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
index 638a0cc..4692b46 100644
--- a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
@@ -432,9 +432,9 @@
 
   {% for item in items %}
     <div{{ item.attributes }}>
-      <a class='logo-qdd' href="{{ ancre_href1 }}">
+      {# <a class='logo-qdd' href="{{ ancre_href1 }}">
         {{ svg_icon|raw }}
-      </a>
+      </a> #}
       
       <a clas='other-logo' href="{{ ancre_href }}">
         {{ item.content }}