header sans animation

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 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 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 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
+// //   function slideOut() {
-// //     checkHeaderCollapse();
+// //     headerNavContainer.animate([
-  
+// //       { transform: 'translateX(0)' },
-// //     // Observer les changements de classe sur le header
+// //       { transform: 'translateX(-100%)' }
-// //     const observer = new MutationObserver(function(mutations) {
+// //     ], {
-// //       mutations.forEach(function(mutation) {
+// //       duration: 300,
-// //         if (mutation.attributeName === 'class') {
+// //       fill: 'forwards'
-// //           checkHeaderCollapse();
-// //         }
-// //       });
 // //     });
-// //     observer.observe(header, { attributes: true });
+// //     isHidden = 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
+// //   function slideIn() {
-// //     if (!isFirstLoad || !isTargetPath) {
+// //     headerNavContainer.animate([
-// //       header.classList.add('header--collapsed-already');
+// //       { transform: 'translateX(-100%)' },
-// //       stopLogoAnimation();
+// //       { transform: 'translateX(0)' }
-// //     } else {
+// //     ], {
-// //       // Sinon, appliquer la transition après un délai, sauf si scroll
+// //       duration: 300,
-// //       let collapseTimeout = setTimeout(() => {
+// //       fill: 'forwards'
-// //         header.classList.add('header--collapsed');
+// //     });
-// //       }, 1000);
+// //     isHidden = false;
-  
+// //   }
-// //       function interruptCollapseOnScroll() {
+
-// //         if (!header.classList.contains('header--collapsed')) {
+// //   function slideDown() {
-// //           clearTimeout(collapseTimeout); // annule l'animation
+// //     headerNavContainer.animate([
-// //           header.classList.add('header--collapsed');
+// //       { transform: 'translateY(-100%)' },
-// //         }
+// //       { transform: 'translateY(0%)' }
-// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+// //     ], {
-// //       }
+// //       duration: 300,
-  
+// //       fill: 'forwards'
-// //       window.addEventListener('scroll', interruptCollapseOnScroll);
+// //     });
-// //     }
+// //     isHidden = false;
-// //     //////////////////////////////////////
+// //   }
-  
+
-// //     let lastScrollTop = 0;
+// //   function slideUp() {
-// //     let threshold = 100; // Change this value as needed
+// //     headerNavContainer.animate([
-// //     let isHidden = false;
+// //       { transform: 'translateY(0%)' },
-  
+// //       { transform: 'translateY(-100%)' }
-// //     function slideOut() {
+// //     ], {
-// //       headerNavContainer.animate([
+// //       duration: 300,
-// //         { transform: 'translateX(0)' },
+// //       fill: 'forwards'
-// //         { transform: 'translateX(-100%)' }
+// //     });
-// //       ], {
+// //     isHidden = true;
-// //         duration: 300,
+// //   }
-// //         fill: 'forwards'
+
-// //       });
+// //   function initNavPosition() {
-// //       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
 // //     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];
+  if (!header || !headerNavContainer) return;
-  const isFirstLoad = !navEntry.type.includes('back_forward');
-  const isTargetPath = window.location.pathname === '/';
-  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
 
   const threshold = 100;
   let lastScrollTop = 0;
-  let isHidden = false;
+  let isHidden = false; // au chargement : nav visible
-  let introDone = false; // ✅ on saura quand l'intro est finie
 
-  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
+  function isMobile() {
-  if (headerNavContainer) {
+    return window.innerWidth < 811;
-    headerNavContainer.style.visibility = 'hidden';
   }
 
-  /* -------------------
+  /* --- helpers --- */
-     Animations nav
-  ------------------- */
 
-  function slideOut() {
+  function hideNav() {
-    headerNavContainer.animate([
+    headerNavContainer.classList.add('nav-hidden');
-      { transform: 'translateX(0)' },
-      { transform: 'translateX(-100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
     isHidden = true;
   }
 
-  function slideIn() {
+  function showNav() {
-    headerNavContainer.animate([
+    headerNavContainer.classList.remove('nav-hidden');
-      { transform: 'translateX(-100%)' },
-      { transform: 'translateX(0)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
     isHidden = false;
   }
 
-  function slideDown() {
+  /* --- init : nav visible au chargement --- */
-    headerNavContainer.animate([
-      { transform: 'translateY(0%)' },
-      { transform: 'translateY(+100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
-    isHidden = false;
-  }
 
-  function slideUp() {
+  headerNavContainer.style.visibility = 'visible';
-    headerNavContainer.animate([
+  showNav();
-      { transform: 'translateY(100%)' },
-      { transform: 'translateY(0%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    }).onfinish = function() {};
-    isHidden = true;
-  }
 
-  // ✅ Position initiale de la nav,
+  /* --- shrink header --- */
-  // 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
-  ------------------- */
 
   function adjustHeaderHeight() {
     if (window.scrollY > 0) {
@@ -1088,118 +1090,49 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  function handleScroll() {
+  /* --- scroll : cache / montre la nav --- */
-    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
 
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  function handleScroll() {
-    const isMobile = window.innerWidth < 811;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
     if (scrollTop > threshold && !isHidden) {
-      if (isMobile) {
+      // on cache la nav (desktop & mobile)
-        slideUp();
+      hideNav();
-      } else {
-        slideOut();
-      }
     } else if (scrollTop <= threshold && isHidden) {
-      if (isMobile) {
+      // on la remonte en haut de page
-        slideDown();
+      showNav();
-      } else {
-        slideIn();
-      }
     }
 
     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
   }
 
-  function handleTouchAndMouseEnter() {
+  /* --- hover / touch sur le header : on montre la nav --- */
-    if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
 
+  function handleEnter() {
     if (isHidden) {
-      if (window.innerWidth < 811) {
+      showNav();
-        slideDown();
-      } else {
-        slideIn();
-      }
     }
   }
 
-  function handleTouchAndMouseLeave() {
+  function handleLeave() {
-    if (!introDone) return;
-
     if (lastScrollTop > threshold && !isHidden) {
-      if (window.innerWidth < 811) {
+      hideNav();
-        slideUp();
-      } else {
-        slideOut();
-      }
     }
   }
 
-  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('scroll', adjustHeaderHeight);
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
 
-  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+  header.addEventListener('mouseenter', handleEnter);
-  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  header.addEventListener('mouseleave', handleLeave);
 
-  header.addEventListener('touchstart', handleTouchAndMouseEnter);
+  header.addEventListener('touchstart', handleEnter);
-  header.addEventListener('touchend', handleTouchAndMouseLeave);
+  header.addEventListener('touchend', handleLeave);
-
-  /* -------------------
-     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();
-  }
 
+  // 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() {

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 {
+@media (max-width: 810px) {
-  display: none;
+  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 {
+header[role=banner] .header_nav_container {
-  transform: translateX(30%);
-}
-header[role=banner] .header_nav_container.visible {
   transform: translateX(0);
 }
-header[role=banner] .header:hover + .header_nav_container {
+header[role=banner] .header_nav_container.nav-hidden {
-  transform: translateX(0);
+  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;
 }

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 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 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 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
+// //   function slideOut() {
-// //     checkHeaderCollapse();
+// //     headerNavContainer.animate([
-  
+// //       { transform: 'translateX(0)' },
-// //     // Observer les changements de classe sur le header
+// //       { transform: 'translateX(-100%)' }
-// //     const observer = new MutationObserver(function(mutations) {
+// //     ], {
-// //       mutations.forEach(function(mutation) {
+// //       duration: 300,
-// //         if (mutation.attributeName === 'class') {
+// //       fill: 'forwards'
-// //           checkHeaderCollapse();
-// //         }
-// //       });
 // //     });
-// //     observer.observe(header, { attributes: true });
+// //     isHidden = 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
+// //   function slideIn() {
-// //     if (!isFirstLoad || !isTargetPath) {
+// //     headerNavContainer.animate([
-// //       header.classList.add('header--collapsed-already');
+// //       { transform: 'translateX(-100%)' },
-// //       stopLogoAnimation();
+// //       { transform: 'translateX(0)' }
-// //     } else {
+// //     ], {
-// //       // Sinon, appliquer la transition après un délai, sauf si scroll
+// //       duration: 300,
-// //       let collapseTimeout = setTimeout(() => {
+// //       fill: 'forwards'
-// //         header.classList.add('header--collapsed');
+// //     });
-// //       }, 1000);
+// //     isHidden = false;
-  
+// //   }
-// //       function interruptCollapseOnScroll() {
+
-// //         if (!header.classList.contains('header--collapsed')) {
+// //   function slideDown() {
-// //           clearTimeout(collapseTimeout); // annule l'animation
+// //     headerNavContainer.animate([
-// //           header.classList.add('header--collapsed');
+// //       { transform: 'translateY(-100%)' },
-// //         }
+// //       { transform: 'translateY(0%)' }
-// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+// //     ], {
-// //       }
+// //       duration: 300,
-  
+// //       fill: 'forwards'
-// //       window.addEventListener('scroll', interruptCollapseOnScroll);
+// //     });
-// //     }
+// //     isHidden = false;
-// //     //////////////////////////////////////
+// //   }
-  
+
-// //     let lastScrollTop = 0;
+// //   function slideUp() {
-// //     let threshold = 100; // Change this value as needed
+// //     headerNavContainer.animate([
-// //     let isHidden = false;
+// //       { transform: 'translateY(0%)' },
-  
+// //       { transform: 'translateY(-100%)' }
-// //     function slideOut() {
+// //     ], {
-// //       headerNavContainer.animate([
+// //       duration: 300,
-// //         { transform: 'translateX(0)' },
+// //       fill: 'forwards'
-// //         { transform: 'translateX(-100%)' }
+// //     });
-// //       ], {
+// //     isHidden = true;
-// //         duration: 300,
+// //   }
-// //         fill: 'forwards'
+
-// //       });
+// //   function initNavPosition() {
-// //       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
 // //     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];
+  if (!header || !headerNavContainer) return;
-  const isFirstLoad = !navEntry.type.includes('back_forward');
-  const isTargetPath = window.location.pathname === '/';
-  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
 
   const threshold = 100;
   let lastScrollTop = 0;
-  let isHidden = false;
+  let isHidden = false; // au chargement : nav visible
-  let introDone = false; // ✅ on saura quand l'intro est finie
 
-  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
+  function isMobile() {
-  if (headerNavContainer) {
+    return window.innerWidth < 811;
-    headerNavContainer.style.visibility = 'hidden';
   }
 
-  /* -------------------
+  /* --- helpers --- */
-     Animations nav
-  ------------------- */
 
-  function slideOut() {
+  function hideNav() {
-    headerNavContainer.animate([
+    headerNavContainer.classList.add('nav-hidden');
-      { transform: 'translateX(0)' },
-      { transform: 'translateX(-100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
     isHidden = true;
   }
 
-  function slideIn() {
+  function showNav() {
-    headerNavContainer.animate([
+    headerNavContainer.classList.remove('nav-hidden');
-      { transform: 'translateX(-100%)' },
-      { transform: 'translateX(0)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
     isHidden = false;
   }
 
-  function slideDown() {
+  /* --- init : nav visible au chargement --- */
-    headerNavContainer.animate([
-      { transform: 'translateY(0%)' },
-      { transform: 'translateY(+100%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    });
-    isHidden = false;
-  }
 
-  function slideUp() {
+  headerNavContainer.style.visibility = 'visible';
-    headerNavContainer.animate([
+  showNav();
-      { transform: 'translateY(100%)' },
-      { transform: 'translateY(0%)' }
-    ], {
-      duration: 300,
-      fill: 'forwards'
-    }).onfinish = function() {};
-    isHidden = true;
-  }
 
-  // ✅ Position initiale de la nav,
+  /* --- shrink header --- */
-  // 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
-  ------------------- */
 
   function adjustHeaderHeight() {
     if (window.scrollY > 0) {
@@ -301,115 +303,45 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  function handleScroll() {
+  /* --- scroll : cache / montre la nav --- */
-    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
 
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  function handleScroll() {
-    const isMobile = window.innerWidth < 811;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
     if (scrollTop > threshold && !isHidden) {
-      if (isMobile) {
+      // on cache la nav (desktop & mobile)
-        slideUp();
+      hideNav();
-      } else {
-        slideOut();
-      }
     } else if (scrollTop <= threshold && isHidden) {
-      if (isMobile) {
+      // on la remonte en haut de page
-        slideDown();
+      showNav();
-      } else {
-        slideIn();
-      }
     }
 
     lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
   }
 
-  function handleTouchAndMouseEnter() {
+  /* --- hover / touch sur le header : on montre la nav --- */
-    if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
 
+  function handleEnter() {
     if (isHidden) {
-      if (window.innerWidth < 811) {
+      showNav();
-        slideDown();
-      } else {
-        slideIn();
-      }
     }
   }
 
-  function handleTouchAndMouseLeave() {
+  function handleLeave() {
-    if (!introDone) return;
-
     if (lastScrollTop > threshold && !isHidden) {
-      if (window.innerWidth < 811) {
+      hideNav();
-        slideUp();
-      } else {
-        slideOut();
-      }
     }
   }
 
-  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('scroll', adjustHeaderHeight);
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
 
-  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+  header.addEventListener('mouseenter', handleEnter);
-  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  header.addEventListener('mouseleave', handleLeave);
 
-  header.addEventListener('touchstart', handleTouchAndMouseEnter);
+  header.addEventListener('touchstart', handleEnter);
-  header.addEventListener('touchend', handleTouchAndMouseLeave);
+  header.addEventListener('touchend', handleLeave);
-
-  /* -------------------
-     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();
-  }
 
+  // init
+  adjustHeaderHeight();
 });
-
-///////////////end header sans animation logo////////////////

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 }}