header sans animation

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -388,38 +388,45 @@ $(document).ready(function () {
   if ($("#actualites" ).length > 0 || $("#home").length > 0)  {
     $(".node-type-actualite").each(function () {
       let article = $(this);
-
+  
       let body = article.find(".field_body");
       let links = article.find(".field_field_liens");
-
+  
       body.hide();
       links.hide();
-
+  
       let toggleButton = $("<button>")
           .addClass("toggle-actualite")
           .insertAfter(article);
-
-      toggleButton.on("click", function () {
+  
+      // Fonction de toggle (à utiliser partout)
+      function toggleActu() {
           body.slideToggle();
           links.slideToggle();
-          $(this).toggleClass("open");
-      });
-      
-         // Clic sur la flèche
+          toggleButton.toggleClass("open");
+      }
+  
+      // Clic sur le bouton
       toggleButton.on("click", function (e) {
-        e.stopPropagation(); // évite des conflits éventuels
-        toggleActu();
+          e.stopPropagation();
+          toggleActu();
       });
-
-      // Clic n'importe où sur le node
+  
+      // Clic sur le node entier sauf liens
       article.on("click", function (e) {
-        // Optionnel : ne pas toggle si on clique sur un lien
-        if ($(e.target).closest("a").length) {
-          return;
-        }
-        toggleActu();
+          if ($(e.target).closest("a").length) {
+              return;
+          }
+          toggleActu();
       });
-    });
+  
+      // 👉 Clic aussi sur le H2
+      article.find("h2").on("click", function (e) {
+          e.stopPropagation();
+          toggleActu();
+      });
+  });
+  
     // slimselect
     // duplicated due to embeded view (archives)
     let actu_type_select = new SlimSelect({
@@ -778,211 +785,354 @@ 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();
-      }
-  
-    }
-  
-    // 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();
-        }
-      });
-    });
-    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');
-      // logo.classList.remove('animated');
-      stopLogoAnimation();
-    // } else {
-    //   // Sinon, appliquer la transition après un délai
-    //   setTimeout(() => {
-    //       header.classList.add('header--collapsed');
-    //   }, 5000);
-    // }
+
+
+// // document.addEventListener('DOMContentLoaded', function() {
+
+// //   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
+// //   ------------------- */
+
+// //   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.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 {
+// //         slideIn();
+// //       }
+// //     } else {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   /* -------------------
+// //      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();
+
+// // });
+
+
+// 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 headerNavContainer = document.querySelector('.header_nav_container');
+
+  if (!header || !headerNavContainer) return;
+
+  const threshold = 100;
+  let lastScrollTop = 0;
+  let isHidden = false; // au chargement : nav visible
+
+  function isMobile() {
+    return window.innerWidth < 811;
+  }
+
+  /* --- helpers --- */
+
+  function hideNav() {
+    headerNavContainer.classList.add('nav-hidden');
+    isHidden = true;
+  }
+
+  function showNav() {
+    headerNavContainer.classList.remove('nav-hidden');
+    isHidden = false;
+  }
+
+  /* --- init : nav visible au chargement --- */
+
+  headerNavContainer.style.visibility = 'visible';
+  showNav();
+
+  /* --- shrink header --- */
+
+  function adjustHeaderHeight() {
+    if (window.scrollY > 0) {
+      header.classList.add('shrink');
     } else {
-      // Sinon, appliquer la transition après un délai, sauf si scroll
-      let collapseTimeout = setTimeout(() => {
-        header.classList.add('header--collapsed');
-      }, 2500);
-  
-      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);
+      header.classList.remove('shrink');
     }
-    //////////////////////////////////////
-  
-    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: 200,
-        fill: 'forwards'
-      });
-      isHidden = true;
+  }
+
+  /* --- scroll : cache / montre la nav --- */
+
+  function handleScroll() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > threshold && !isHidden) {
+      // on cache la nav (desktop & mobile)
+      hideNav();
+    } else if (scrollTop <= threshold && isHidden) {
+      // on la remonte en haut de page
+      showNav();
     }
-  
-    function slideIn() {
-      headerNavContainer.animate([
-        { transform: 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ], {
-        duration: 200,
-        fill: 'forwards'
-      });
-      isHidden = false;
+
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  }
+
+  /* --- hover / touch sur le header : on montre la nav --- */
+
+  function handleEnter() {
+    if (isHidden) {
+      showNav();
     }
-    
-    function slideDown() {
-      // headerNavContainer.style.display = 'block';
-      headerNavContainer.animate([
-        { transform: 'translateY(0%)' },
-        { transform: 'translateY(+100%)' }
-      ], {
-        duration: 200,
-        fill: 'forwards'
-      });
-      isHidden = false;
+  }
+
+  function handleLeave() {
+    if (lastScrollTop > threshold && !isHidden) {
+      hideNav();
     }
-  
-    function slideUp() {
-      headerNavContainer.animate([
-        { transform: 'translateY(100%)' },
-        { transform: 'translateY(0%)' }
-      ], {
-        duration: 200,
-        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 { 
-        slideIn();
-      } 
-    } else {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideIn();
-      }
-    }
-  
-  });
-  
-  //////// end header ////////////
-  
+  }
+
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
+
+  header.addEventListener('mouseenter', handleEnter);
+  header.addEventListener('mouseleave', handleLeave);
+
+  header.addEventListener('touchstart', handleEnter);
+  header.addEventListener('touchend', handleLeave);
+
+  // init
+  adjustHeaderHeight();
+});
+
 }();
 // This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
 !function() {
@@ -1044,10 +1194,10 @@ document.addEventListener('DOMContentLoaded', function() {
   $(document).ready(function(){
 //   ////////////////////// start  calendrier home   /////////////////////////////////
 
-  // Aller au 9e élément à l'initialisation
-  $('.__timeline-content').on('init', function(event, slick){
-    slick.slickGoTo(11); // Index 8 = 9e item
-  });
+  // // Aller au 9e élément à l'initialisation
+  // $('.__timeline-content').on('init', function(event, slick){
+  //   slick.slickGoTo(11); // Index 8 = 9e item
+  // });
 
     $('.__timeline-content').slick({
       slidesToShow: 3,
@@ -1057,6 +1207,7 @@ document.addEventListener('DOMContentLoaded', function() {
       centerMode: false,
       draggable: true,
       infinite: false,
+      initialSlide: 13,
       responsive: [
         {
           breakpoint: 810,
@@ -1067,6 +1218,7 @@ document.addEventListener('DOMContentLoaded', function() {
             draggable: true,
             centerMode: false,
             infinite: false,
+            initialSlide: 13,
           }
         }]
     });

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -258,16 +258,60 @@ 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 5s ease-in-out, width 5s 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;
+  /* ===========================
+     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 +340,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 70%;
   display: flex;
   flex-direction: row;
-  transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
   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 +380,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 - 3rem);
   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 +411,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: 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 +526,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,100 +554,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 1s 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: 1 0 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: 0 0 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: 1 0 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: 0 0 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;
-  }
-}
-
 footer {
   z-index: 100;
 }
@@ -1063,78 +970,6 @@ footer {
   order: 5;
 }
 
-#logo-animated-container {
-  width: 60%;
-  margin-left: 20%;
-  margin-right: 20%;
-}
-
-@media (max-width: 810px) {
-  #logo-animated-container {
-    width: 74%;
-    margin-left: 13%;
-    margin-right: 13%;
-  }
-}
-@media (max-width: 640px) {
-  #logo-animated-container {
-    width: 80%;
-    margin-left: 10%;
-    margin-right: 10%;
-  }
-}
-#logo-animated {
-  position: relative;
-  top: 0;
-  left: 0;
-  width: 100%;
-  max-width: 1300px;
-  max-height: 1000px;
-  overflow: hidden;
-}
-
-#logo-animated svg {
-  position: absolute;
-  width: 100%;
-  height: auto;
-  max-width: 1030px;
-  top: 0;
-  left: 0;
-}
-
-#logo-animated img {
-  position: absolute;
-  opacity: 0;
-}
-
-#consultation-couleur {
-  left: min(17%, 180px);
-  top: 0.5%;
-  width: 32%;
-  max-width: 330px;
-}
-
-#consultation-noir {
-  left: min(17%, 180px);
-  top: 0.5%;
-  width: 32%;
-  max-width: 330px;
-}
-
-#quartier-couleur {
-  width: 60%;
-  max-width: 620px;
-  left: min(30%, 310px);
-  top: 3%;
-}
-
-#quartier-noir {
-  width: 60%;
-  max-width: 620px;
-  left: min(30%, 310px);
-  top: 3%;
-}
-
 /* Slider */
 .slick-loading .slick-list {
   background: #fff url("./ajax-loader.gif") center center no-repeat;
@@ -2042,65 +1877,6 @@ footer {
   height: 25px;
 }
 
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
-  opacity: 0;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
-  opacity: 1;
-  transform: scale(2);
-}
-@media (max-width: 820px) {
-  header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
-    transform: scale(1);
-  }
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
-  opacity: 0;
-  animation-delay: 0.1s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
-  opacity: 0;
-  animation-delay: 0.3s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
-  opacity: 0;
-  animation-delay: 0.5s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
-  opacity: 0;
-  animation-delay: 1s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-@keyframes blink {
-  0%, 100% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation {
-  display: none;
-  animation-name: slideIn;
-  animation-delay: 0.5s;
-  animation-duration: 1s;
-}
-@keyframes slideIn {
-  0% {
-    transform: translateX(0px);
-  }
-  100% {
-    transform: translateX(600px);
-  }
-}
-
 #home #background-animated {
   position: absolute;
   top: 1500px;

web/themes/custom/quartiers_de_demain/src/assets/js/header.js

@@ -1,205 +1,347 @@
-//////// 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();
-      }
-  
-    }
-  
-    // 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();
-        }
-      });
-    });
-    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');
-      // logo.classList.remove('animated');
-      stopLogoAnimation();
-    // } else {
-    //   // Sinon, appliquer la transition après un délai
-    //   setTimeout(() => {
-    //       header.classList.add('header--collapsed');
-    //   }, 5000);
-    // }
+
+
+// // document.addEventListener('DOMContentLoaded', function() {
+
+// //   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
+// //   ------------------- */
+
+// //   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.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 {
+// //         slideIn();
+// //       }
+// //     } else {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+// //   }
+
+// //   /* -------------------
+// //      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();
+
+// // });
+
+
+// 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 headerNavContainer = document.querySelector('.header_nav_container');
+
+  if (!header || !headerNavContainer) return;
+
+  const threshold = 100;
+  let lastScrollTop = 0;
+  let isHidden = false; // au chargement : nav visible
+
+  function isMobile() {
+    return window.innerWidth < 811;
+  }
+
+  /* --- helpers --- */
+
+  function hideNav() {
+    headerNavContainer.classList.add('nav-hidden');
+    isHidden = true;
+  }
+
+  function showNav() {
+    headerNavContainer.classList.remove('nav-hidden');
+    isHidden = false;
+  }
+
+  /* --- init : nav visible au chargement --- */
+
+  headerNavContainer.style.visibility = 'visible';
+  showNav();
+
+  /* --- shrink header --- */
+
+  function adjustHeaderHeight() {
+    if (window.scrollY > 0) {
+      header.classList.add('shrink');
     } else {
-      // Sinon, appliquer la transition après un délai, sauf si scroll
-      let collapseTimeout = setTimeout(() => {
-        header.classList.add('header--collapsed');
-      }, 2500);
-  
-      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);
+      header.classList.remove('shrink');
     }
-    //////////////////////////////////////
-  
-    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: 200,
-        fill: 'forwards'
-      });
-      isHidden = true;
+  }
+
+  /* --- scroll : cache / montre la nav --- */
+
+  function handleScroll() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > threshold && !isHidden) {
+      // on cache la nav (desktop & mobile)
+      hideNav();
+    } else if (scrollTop <= threshold && isHidden) {
+      // on la remonte en haut de page
+      showNav();
     }
-  
-    function slideIn() {
-      headerNavContainer.animate([
-        { transform: 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ], {
-        duration: 200,
-        fill: 'forwards'
-      });
-      isHidden = false;
+
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  }
+
+  /* --- hover / touch sur le header : on montre la nav --- */
+
+  function handleEnter() {
+    if (isHidden) {
+      showNav();
     }
-    
-    function slideDown() {
-      // headerNavContainer.style.display = 'block';
-      headerNavContainer.animate([
-        { transform: 'translateY(0%)' },
-        { transform: 'translateY(+100%)' }
-      ], {
-        duration: 200,
-        fill: 'forwards'
-      });
-      isHidden = false;
+  }
+
+  function handleLeave() {
+    if (lastScrollTop > threshold && !isHidden) {
+      hideNav();
     }
-  
-    function slideUp() {
-      headerNavContainer.animate([
-        { transform: 'translateY(100%)' },
-        { transform: 'translateY(0%)' }
-      ], {
-        duration: 200,
-        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 { 
-        slideIn();
-      } 
-    } else {
-      if (window.innerWidth < 811) {
-        slideUp();
-      } else {
-        slideIn();
-      }
-    }
-  
-  });
-  
-  //////// end header ////////////
-  
+  }
+
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
+
+  header.addEventListener('mouseenter', handleEnter);
+  header.addEventListener('mouseleave', handleLeave);
+
+  header.addEventListener('touchstart', handleEnter);
+  header.addEventListener('touchend', handleLeave);
+
+  // init
+  adjustHeaderHeight();
+});

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -330,38 +330,45 @@ $(document).ready(function () {
   if ($("#actualites" ).length > 0 || $("#home").length > 0)  {
     $(".node-type-actualite").each(function () {
       let article = $(this);
-
+  
       let body = article.find(".field_body");
       let links = article.find(".field_field_liens");
-
+  
       body.hide();
       links.hide();
-
+  
       let toggleButton = $("<button>")
           .addClass("toggle-actualite")
           .insertAfter(article);
-
-      toggleButton.on("click", function () {
+  
+      // Fonction de toggle (à utiliser partout)
+      function toggleActu() {
           body.slideToggle();
           links.slideToggle();
-          $(this).toggleClass("open");
-      });
-      
-         // Clic sur la flèche
+          toggleButton.toggleClass("open");
+      }
+  
+      // Clic sur le bouton
       toggleButton.on("click", function (e) {
-        e.stopPropagation(); // évite des conflits éventuels
-        toggleActu();
+          e.stopPropagation();
+          toggleActu();
       });
-
-      // Clic n'importe où sur le node
+  
+      // Clic sur le node entier sauf liens
       article.on("click", function (e) {
-        // Optionnel : ne pas toggle si on clique sur un lien
-        if ($(e.target).closest("a").length) {
-          return;
-        }
-        toggleActu();
+          if ($(e.target).closest("a").length) {
+              return;
+          }
+          toggleActu();
       });
-    });
+  
+      // 👉 Clic aussi sur le H2
+      article.find("h2").on("click", function (e) {
+          e.stopPropagation();
+          toggleActu();
+      });
+  });
+  
     // slimselect
     // duplicated due to embeded view (archives)
     let actu_type_select = new SlimSelect({

web/themes/custom/quartiers_de_demain/src/assets/js/timeline.js

@@ -53,10 +53,10 @@
   $(document).ready(function(){
 //   ////////////////////// start  calendrier home   /////////////////////////////////
 
-  // Aller au 9e élément à l'initialisation
-  $('.__timeline-content').on('init', function(event, slick){
-    slick.slickGoTo(11); // Index 8 = 9e item
-  });
+  // // Aller au 9e élément à l'initialisation
+  // $('.__timeline-content').on('init', function(event, slick){
+  //   slick.slickGoTo(11); // Index 8 = 9e item
+  // });
 
     $('.__timeline-content').slick({
       slidesToShow: 3,
@@ -66,6 +66,7 @@
       centerMode: false,
       draggable: true,
       infinite: false,
+      initialSlide: 13,
       responsive: [
         {
           breakpoint: 810,
@@ -76,6 +77,7 @@
             draggable: true,
             centerMode: false,
             infinite: false,
+            initialSlide: 13,
           }
         }]
     });

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss

@@ -3,9 +3,12 @@ header{
         .field_field_logo{
             .qdd-header{
                 opacity: 0;
+                animation-delay: 0.9s;
+                animation-name: scale;
+                animation-duration: 2.8s;
                 &.animated{
                     opacity: 1;
-                    transform: scale(2);   
+                    transform: scale(2); 
                     @media(max-width:820px) {
                         transform: scale(1);
                     }
@@ -33,7 +36,7 @@ header{
     
                     .blink-black2 {
                         opacity: 0;
-                        animation-delay: 1s;
+                        animation-delay: 0.7s;
                         animation-name: blink;
                         animation-duration: 5s;
                     }
@@ -62,15 +65,14 @@ header{
                         }
                     } 
 
-                    // @keyframes scale {
-                    //     0%{
-                    //         transform: scale(2);
-                    //     }
-                    //     90%{transform: scale(2);}
-                    //     100% {
-                    //         transform: scale(1);
-                    //     }
-                    // }
+                    @keyframes scale {
+                        0%{
+                            transform: scale(2);
+                        }
+                        100% {
+                            transform: scale(1);
+                        }
+                    }
     
                            
                 }
@@ -78,4 +80,6 @@ header{
 
         }
     }
-}
+}
+
+

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -15,6 +15,7 @@
 @import "global/layout";
 @import "global/reset";
 @import "global/mediaquerries";
+
 // @import "global/_animated-logo";
 
 
@@ -24,12 +25,12 @@
 @import "partials/header";
 @import "partials/footer";
 @import "partials/aside";
-@import "partials/animation-logo";
+// @import "partials/animation-logo";
 @import "partials/slick-theme";
 @import "partials/slick";
 @import "partials/timeline";
 @import "partials/actu-caroussel-home";
-@import "partials/animation-logo-header";
+// @import "partials/animation-logo-header";
 @import "partials/formes-animees";
 @import "partials/animation-pilliers";
 @import "partials/map";

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