anim header

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

@@ -785,188 +785,282 @@ document.addEventListener('keydown', (e) => {
 /*!*********************************!*\
   !*** ./src/assets/js/header.js ***!
   \*********************************/
-//////// start header ////////////
+// // //////// 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');
+// //       stopLogoAnimation();
+// //     } else {
+// //       // Sinon, appliquer la transition après un délai, sauf si scroll
+// //       let collapseTimeout = setTimeout(() => {
+// //         header.classList.add('header--collapsed');
+// //       }, 1000);
+  
+// //       function interruptCollapseOnScroll() {
+// //         if (!header.classList.contains('header--collapsed')) {
+// //           clearTimeout(collapseTimeout); // annule l'animation
+// //           header.classList.add('header--collapsed');
+// //         }
+// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+// //       }
+  
+// //       window.addEventListener('scroll', interruptCollapseOnScroll);
+// //     }
+// //     //////////////////////////////////////
+  
+// //     let lastScrollTop = 0;
+// //     let threshold = 100; // Change this value as needed
+// //     let isHidden = false;
+  
+// //     function slideOut() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateX(0)' },
+// //         { transform: 'translateX(-100%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = true;
+// //     }
+  
+// //     function slideIn() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateX(-100%)' },
+// //         { transform: 'translateX(0)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = false;
+// //     }
+    
+// //     function slideDown() {
+// //       // headerNavContainer.style.display = 'block';
+// //       headerNavContainer.animate([
+// //         { transform: 'translateY(0%)' },
+// //         { transform: 'translateY(+100%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = false;
+// //     }
+  
+// //     function slideUp() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateY(100%)' },
+// //         { transform: 'translateY(0%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       }).onfinish = function() {
+// //         // headerNavContainer.style.display = 'none';
+// //       };
+// //       isHidden = true;
+// //     }
+// //       // Fonction pour ajuster la hauteur du header lors du défilement
+// //       function adjustHeaderHeight() {
+// //         if (window.scrollY > 0) {
+// //           header.classList.add('shrink');
+// //         } else {
+// //           header.classList.remove('shrink');
+// //         }
+// //       }
+  
+// //     function handleScroll() {
+// //       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+// //       const isMobile = window.innerWidth < 811;
+  
+// //       if (scrollTop > threshold && !isHidden) {
+// //         if (isMobile) {
+// //           slideUp();
+// //         } else {
+// //           slideOut();
+// //         }
+// //       } else if (scrollTop <= threshold && isHidden) {
+// //         if (isMobile) {
+// //           slideDown();
+// //         } else {
+// //           slideIn();
+// //         }
+// //       }
+  
+  
+// //       lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+// //     }
+  
+// //     function handleTouchAndMouseEnter() {
+// //       if (isHidden) {
+// //         if (window.innerWidth < 811) {
+// //           slideDown();
+// //         } else {
+// //           slideIn();
+// //         }
+// //       }
+// //     }
+  
+// //     function handleTouchAndMouseLeave() {
+// //       if (lastScrollTop > threshold && !isHidden) {
+// //         if (window.innerWidth < 811) {
+// //           slideUp();
+// //         } else {
+// //           slideOut();
+// //         }
+// //       }
+// //     }
+  
+// //     window.addEventListener('scroll', handleScroll);
+// //     window.addEventListener('scroll', adjustHeaderHeight);
+  
+// //     // Mouse events for desktop
+// //     header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+// //     header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  
+// //     // Touch events for tablets and mobile devices
+// //     header.addEventListener('touchstart', handleTouchAndMouseEnter);
+// //     header.addEventListener('touchend', handleTouchAndMouseLeave);
+  
+// //     // Initial check to see if we're at the top of the page
+// //     if (window.pageYOffset <= threshold) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else { 
+// //         slideIn();
+// //       } 
+// //     } else {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+  
+// //   });
+  
+// //   //////// end header ////////////
+  
+
+
+///////////////start header sans animation logo////////////////
+
 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 logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
-    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
+  const navEntry = performance.getEntriesByType("navigation")[0];
-    function startLogoAnimation() {
+  const isFirstLoad = !navEntry.type.includes('back_forward');
-      logo.classList.add('animated');
+  const isTargetPath = window.location.pathname === '/';
-    }
+  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
 
-    // Fonction pour arrêter l'animation du logo SVG
+  const threshold = 100;
-    function stopLogoAnimation() {
+  let lastScrollTop = 0;
-      logo.classList.remove('animated');
+  let isHidden = false;
-    }
+  let introDone = false; // ✅ on saura quand l'intro est finie
 
-    // Vérifier si le header a la classe header--collapse
+  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
-    function checkHeaderCollapse() {
+  if (headerNavContainer) {
-      if (header.classList.contains('header--collapsed')) {
+    headerNavContainer.style.visibility = 'hidden';
-        stopLogoAnimation();
+  }
-      } else if (header.classList.contains('header--collapsed-already'))  {
-          stopLogoAnimation();
-        } else {
-        startLogoAnimation();
-      }
 
-    }
+  /* -------------------
+     Animations nav
+  ------------------- */
 
-
+  function slideOut() {
-
+    headerNavContainer.animate([
-    // Appeler la fonction au chargement initial
+      { transform: 'translateX(0)' },
-    checkHeaderCollapse();
+      { transform: 'translateX(-100%)' }
-  
+    ], {
-    // Observer les changements de classe sur le header
+      duration: 300,
-    const observer = new MutationObserver(function(mutations) {
+      fill: 'forwards'
-      mutations.forEach(function(mutation) {
-        if (mutation.attributeName === 'class') {
-          checkHeaderCollapse();
-        }
-      });
     });
-    observer.observe(header, { attributes: true });
+    isHidden = true;
+  }
 
+  function slideIn() {
+    headerNavContainer.animate([
+      { transform: 'translateX(-100%)' },
+      { transform: 'translateX(0)' }
+    ], {
+      duration: 300,
+      fill: 'forwards'
+    });
+    isHidden = false;
+  }
 
-    // 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 slideDown() {
-    if (!isFirstLoad || !isTargetPath) {
+    headerNavContainer.animate([
-      header.classList.add('header--collapsed-already');
+      { transform: 'translateY(0%)' },
-      stopLogoAnimation();
+      { transform: 'translateY(+100%)' }
-    } 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');
+    });
-      }, 2000);
+    isHidden = false;
+  }
 
-      function interruptCollapseOnScroll() {
+  function slideUp() {
-        if (!header.classList.contains('header--collapsed')) {
+    headerNavContainer.animate([
-          clearTimeout(collapseTimeout); // annule l'animation
+      { transform: 'translateY(100%)' },
-          header.classList.add('header--collapsed');
+      { transform: 'translateY(0%)' }
-        }
+    ], {
-        window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+      duration: 300,
-      }
+      fill: 'forwards'
+    }).onfinish = function() {};
+    isHidden = true;
+  }
 
-      window.addEventListener('scroll', interruptCollapseOnScroll);
+  // ✅ Position initiale de la nav,
-    }
+  // appelée UNIQUEMENT après la fin de l'intro
-    //////////////////////////////////////
+  function initNavPosition() {
-  
-    let lastScrollTop = 0;
-    let threshold = 100; // Change this value as needed
-    let isHidden = false;
-  
-    function slideOut() {
-      headerNavContainer.animate([
-        { transform: 'translateX(0)' },
-        { transform: 'translateX(-100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = true;
-    }
-  
-    function slideIn() {
-      headerNavContainer.animate([
-        { transform: 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
-    }
-    
-    function slideDown() {
-      // headerNavContainer.style.display = 'block';
-      headerNavContainer.animate([
-        { transform: 'translateY(0%)' },
-        { transform: 'translateY(+100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
-    }
-  
-    function slideUp() {
-      headerNavContainer.animate([
-        { transform: 'translateY(100%)' },
-        { transform: 'translateY(0%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      }).onfinish = function() {
-        // headerNavContainer.style.display = 'none';
-      };
-      isHidden = true;
-    }
-      // Fonction pour ajuster la hauteur du header lors du défilement
-      function adjustHeaderHeight() {
-        if (window.scrollY > 0) {
-          header.classList.add('shrink');
-        } else {
-          header.classList.remove('shrink');
-        }
-      }
-  
-    function handleScroll() {
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const isMobile = window.innerWidth < 811;
-  
-      if (scrollTop > threshold && !isHidden) {
-        if (isMobile) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      } else if (scrollTop <= threshold && isHidden) {
-        if (isMobile) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-  
-  
-      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
-    }
-  
-    function handleTouchAndMouseEnter() {
-      if (isHidden) {
-        if (window.innerWidth < 811) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-    }
-  
-    function handleTouchAndMouseLeave() {
-      if (lastScrollTop > threshold && !isHidden) {
-        if (window.innerWidth < 811) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      }
-    }
-  
-    window.addEventListener('scroll', handleScroll);
-    window.addEventListener('scroll', adjustHeaderHeight);
-  
-    // Mouse events for desktop
-    header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-    header.addEventListener('mouseleave', handleTouchAndMouseLeave);
-  
-    // Touch events for tablets and mobile devices
-    header.addEventListener('touchstart', handleTouchAndMouseEnter);
-    header.addEventListener('touchend', handleTouchAndMouseLeave);
-  
-    // Initial check to see if we're at the top of the page
     if (window.pageYOffset <= threshold) {
       if (window.innerWidth < 811) {
         slideDown();
@@ -980,11 +1074,132 @@ document.addEventListener('DOMContentLoaded', function() {
         slideIn();
       }
     }
+  }
 
-  });
+  /* -------------------
+     Scroll / resize header
+  ------------------- */
 
-  //////// end header ////////////
+  function adjustHeaderHeight() {
+    if (window.scrollY > 0) {
+      header.classList.add('shrink');
+    } else {
+      header.classList.remove('shrink');
+    }
+  }
 
+  function handleScroll() {
+    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
+
+    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; // ⛔ pas de hover avant la fin de l'intro
+
+    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();
+      }
+    }
+  }
+
+  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', adjustHeaderHeight);
+
+  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+  header.addEventListener('touchstart', handleTouchAndMouseEnter);
+  header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+  /* -------------------
+     Intro du logo
+  ------------------- */
+
+  if (isFirstLoad && isTargetPath && logo  && !isMobile) {
+    // On bloque le scroll
+    document.body.classList.add('logo-intro-animating');
+
+    // 1) Logo plein écran SANS ANIMATION + header figé
+    logo.style.transition = 'none';
+    header.style.transition = 'none';
+    document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
+
+    void logo.offsetWidth; // reflow
+
+    const INTRO_DELAY = 1000;          // temps où le logo reste plein écran
+    const TRANSITION_DURATION = 1000;  // durée de l'anim de collapse
+
+    // 2) Après ce délai : on réactive les transitions et on lance l'anim
+    setTimeout(() => {
+      logo.style.transition = '';
+      header.style.transition = '';
+
+      header.classList.add('header--collapsed');           // header se rétracte
+      document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
+
+      // 3) Quand le header + logo ont fini de bouger :
+      setTimeout(() => {
+        document.body.classList.remove('logo-intro-animating');
+        introDone = true;
+
+        // 👉 maintenant seulement on affiche la nav et on la fait glisser
+        if (headerNavContainer) {
+          headerNavContainer.style.visibility = 'visible';
+        }
+        initNavPosition();
+
+      }, TRANSITION_DURATION + 100);
+
+    }, INTRO_DELAY);
+
+  } else {
+    // 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
+    // pas d'intro : header direct réduit, nav directement dispo
+    
+    header.classList.add('header--collapsed-already');
+    introDone = true;
+    if (headerNavContainer) {
+      headerNavContainer.style.visibility = 'visible';
+    }
+    initNavPosition();
+  }
+
+});
+
+///////////////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

@@ -267,7 +267,7 @@ header[role=banner] {
   max-width: 100vw;
   position: fixed;
   top: 0;
-  transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
+  transition: height 1.4s ease-in-out, width 1.4s ease-in-out;
 }
 header[role=banner] .language-switcher-language-url {
   text-transform: uppercase;
@@ -313,8 +313,8 @@ header[role=banner] .header_left_container {
   flex: 0 0 100%;
   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;
@@ -445,7 +445,7 @@ header[role=banner] .header_nav_container {
   background: rgb(7, 50, 194);
   text-align: center;
   transform: translateX(0);
-  transition: transform 0.3s ease-in-out;
+  transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
   z-index: -1;
   display: flex;
   flex-direction: column;
@@ -558,7 +558,7 @@ 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;
+  transition: all 1.4s ease-in-out;
 }
 @media (max-width: 1090px) {
   header[role=banner].header--collapsed {
@@ -580,7 +580,7 @@ header[role=banner].header--collapsed .qdd-header {
   }
 }
 header[role=banner].header--collapsed .header_left_container {
-  flex: 1 0 65%;
+  flex-basis: 65%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -589,7 +589,7 @@ header[role=banner].header--collapsed .header_left_container {
   }
 }
 header[role=banner].header--collapsed .header_nav_container {
-  flex: 0 0 30%;
+  flex-basis: 30%;
   transform-origin: bottom right;
   min-width: fit-content;
 }
@@ -621,7 +621,7 @@ header[role=banner].header--collapsed-already .qdd-header {
   }
 }
 header[role=banner].header--collapsed-already .header_left_container {
-  flex: 1 0 65%;
+  flex-basis: 65%;
   transform-origin: bottom right;
 }
 @media (max-width: 810px) {
@@ -630,7 +630,7 @@ header[role=banner].header--collapsed-already .header_left_container {
   }
 }
 header[role=banner].header--collapsed-already .header_nav_container {
-  flex: 0 0 30%;
+  flex-basis: 30%;
   min-width: fit-content;
   transform-origin: bottom right;
 }
@@ -647,6 +647,49 @@ header[role=banner].header--collapsed-already .header_nav_container {
   }
 }
 
+/* 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;
 }
@@ -1063,78 +1106,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,76 +2013,6 @@ footer {
   height: 25px;
 }
 
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
-  opacity: 0;
-  animation-delay: 0.9s;
-  animation-name: scale;
-  animation-duration: 2.8s;
-}
-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: 0.7s;
-  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);
-  }
-}
-@keyframes scale {
-  0% {
-    transform: scale(2);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
 #home #background-animated {
   position: absolute;
   top: 1500px;

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

@@ -1,185 +1,279 @@
-//////// start header ////////////
+// // //////// 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');
+// //       stopLogoAnimation();
+// //     } else {
+// //       // Sinon, appliquer la transition après un délai, sauf si scroll
+// //       let collapseTimeout = setTimeout(() => {
+// //         header.classList.add('header--collapsed');
+// //       }, 1000);
+  
+// //       function interruptCollapseOnScroll() {
+// //         if (!header.classList.contains('header--collapsed')) {
+// //           clearTimeout(collapseTimeout); // annule l'animation
+// //           header.classList.add('header--collapsed');
+// //         }
+// //         window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+// //       }
+  
+// //       window.addEventListener('scroll', interruptCollapseOnScroll);
+// //     }
+// //     //////////////////////////////////////
+  
+// //     let lastScrollTop = 0;
+// //     let threshold = 100; // Change this value as needed
+// //     let isHidden = false;
+  
+// //     function slideOut() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateX(0)' },
+// //         { transform: 'translateX(-100%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = true;
+// //     }
+  
+// //     function slideIn() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateX(-100%)' },
+// //         { transform: 'translateX(0)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = false;
+// //     }
+    
+// //     function slideDown() {
+// //       // headerNavContainer.style.display = 'block';
+// //       headerNavContainer.animate([
+// //         { transform: 'translateY(0%)' },
+// //         { transform: 'translateY(+100%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       });
+// //       isHidden = false;
+// //     }
+  
+// //     function slideUp() {
+// //       headerNavContainer.animate([
+// //         { transform: 'translateY(100%)' },
+// //         { transform: 'translateY(0%)' }
+// //       ], {
+// //         duration: 300,
+// //         fill: 'forwards'
+// //       }).onfinish = function() {
+// //         // headerNavContainer.style.display = 'none';
+// //       };
+// //       isHidden = true;
+// //     }
+// //       // Fonction pour ajuster la hauteur du header lors du défilement
+// //       function adjustHeaderHeight() {
+// //         if (window.scrollY > 0) {
+// //           header.classList.add('shrink');
+// //         } else {
+// //           header.classList.remove('shrink');
+// //         }
+// //       }
+  
+// //     function handleScroll() {
+// //       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+// //       const isMobile = window.innerWidth < 811;
+  
+// //       if (scrollTop > threshold && !isHidden) {
+// //         if (isMobile) {
+// //           slideUp();
+// //         } else {
+// //           slideOut();
+// //         }
+// //       } else if (scrollTop <= threshold && isHidden) {
+// //         if (isMobile) {
+// //           slideDown();
+// //         } else {
+// //           slideIn();
+// //         }
+// //       }
+  
+  
+// //       lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+// //     }
+  
+// //     function handleTouchAndMouseEnter() {
+// //       if (isHidden) {
+// //         if (window.innerWidth < 811) {
+// //           slideDown();
+// //         } else {
+// //           slideIn();
+// //         }
+// //       }
+// //     }
+  
+// //     function handleTouchAndMouseLeave() {
+// //       if (lastScrollTop > threshold && !isHidden) {
+// //         if (window.innerWidth < 811) {
+// //           slideUp();
+// //         } else {
+// //           slideOut();
+// //         }
+// //       }
+// //     }
+  
+// //     window.addEventListener('scroll', handleScroll);
+// //     window.addEventListener('scroll', adjustHeaderHeight);
+  
+// //     // Mouse events for desktop
+// //     header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+// //     header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  
+// //     // Touch events for tablets and mobile devices
+// //     header.addEventListener('touchstart', handleTouchAndMouseEnter);
+// //     header.addEventListener('touchend', handleTouchAndMouseLeave);
+  
+// //     // Initial check to see if we're at the top of the page
+// //     if (window.pageYOffset <= threshold) {
+// //       if (window.innerWidth < 811) {
+// //         slideDown();
+// //       } else { 
+// //         slideIn();
+// //       } 
+// //     } else {
+// //       if (window.innerWidth < 811) {
+// //         slideUp();
+// //       } else {
+// //         slideIn();
+// //       }
+// //     }
+  
+// //   });
+  
+// //   //////// end header ////////////
+  
+
+
+///////////////start header sans animation logo////////////////
+
 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 logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
-    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
+  const navEntry = performance.getEntriesByType("navigation")[0];
-    function startLogoAnimation() {
+  const isFirstLoad = !navEntry.type.includes('back_forward');
-      logo.classList.add('animated');
+  const isTargetPath = window.location.pathname === '/';
-    }
+  const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
 
-    // Fonction pour arrêter l'animation du logo SVG
+  const threshold = 100;
-    function stopLogoAnimation() {
+  let lastScrollTop = 0;
-      logo.classList.remove('animated');
+  let isHidden = false;
-    }
+  let introDone = false; // ✅ on saura quand l'intro est finie
 
-    // Vérifier si le header a la classe header--collapse
+  // 🔹 On cache la nav au tout début (pour éviter toute secousse)
-    function checkHeaderCollapse() {
+  if (headerNavContainer) {
-      if (header.classList.contains('header--collapsed')) {
+    headerNavContainer.style.visibility = 'hidden';
-        stopLogoAnimation();
+  }
-      } else if (header.classList.contains('header--collapsed-already'))  {
-          stopLogoAnimation();
-        } else {
-        startLogoAnimation();
-      }
 
-    }
+  /* -------------------
+     Animations nav
+  ------------------- */
 
-
+  function slideOut() {
-
+    headerNavContainer.animate([
-    // Appeler la fonction au chargement initial
+      { transform: 'translateX(0)' },
-    checkHeaderCollapse();
+      { transform: 'translateX(-100%)' }
-  
+    ], {
-    // Observer les changements de classe sur le header
+      duration: 300,
-    const observer = new MutationObserver(function(mutations) {
+      fill: 'forwards'
-      mutations.forEach(function(mutation) {
-        if (mutation.attributeName === 'class') {
-          checkHeaderCollapse();
-        }
-      });
     });
-    observer.observe(header, { attributes: true });
+    isHidden = true;
+  }
 
+  function slideIn() {
+    headerNavContainer.animate([
+      { transform: 'translateX(-100%)' },
+      { transform: 'translateX(0)' }
+    ], {
+      duration: 300,
+      fill: 'forwards'
+    });
+    isHidden = false;
+  }
 
-    // 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 slideDown() {
-    if (!isFirstLoad || !isTargetPath) {
+    headerNavContainer.animate([
-      header.classList.add('header--collapsed-already');
+      { transform: 'translateY(0%)' },
-      stopLogoAnimation();
+      { transform: 'translateY(+100%)' }
-    } 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');
+    });
-      }, 2000);
+    isHidden = false;
+  }
 
-      function interruptCollapseOnScroll() {
+  function slideUp() {
-        if (!header.classList.contains('header--collapsed')) {
+    headerNavContainer.animate([
-          clearTimeout(collapseTimeout); // annule l'animation
+      { transform: 'translateY(100%)' },
-          header.classList.add('header--collapsed');
+      { transform: 'translateY(0%)' }
-        }
+    ], {
-        window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
+      duration: 300,
-      }
+      fill: 'forwards'
+    }).onfinish = function() {};
+    isHidden = true;
+  }
 
-      window.addEventListener('scroll', interruptCollapseOnScroll);
+  // ✅ Position initiale de la nav,
-    }
+  // appelée UNIQUEMENT après la fin de l'intro
-    //////////////////////////////////////
+  function initNavPosition() {
-  
-    let lastScrollTop = 0;
-    let threshold = 100; // Change this value as needed
-    let isHidden = false;
-  
-    function slideOut() {
-      headerNavContainer.animate([
-        { transform: 'translateX(0)' },
-        { transform: 'translateX(-100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = true;
-    }
-  
-    function slideIn() {
-      headerNavContainer.animate([
-        { transform: 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
-    }
-    
-    function slideDown() {
-      // headerNavContainer.style.display = 'block';
-      headerNavContainer.animate([
-        { transform: 'translateY(0%)' },
-        { transform: 'translateY(+100%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      });
-      isHidden = false;
-    }
-  
-    function slideUp() {
-      headerNavContainer.animate([
-        { transform: 'translateY(100%)' },
-        { transform: 'translateY(0%)' }
-      ], {
-        duration: 300,
-        fill: 'forwards'
-      }).onfinish = function() {
-        // headerNavContainer.style.display = 'none';
-      };
-      isHidden = true;
-    }
-      // Fonction pour ajuster la hauteur du header lors du défilement
-      function adjustHeaderHeight() {
-        if (window.scrollY > 0) {
-          header.classList.add('shrink');
-        } else {
-          header.classList.remove('shrink');
-        }
-      }
-  
-    function handleScroll() {
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const isMobile = window.innerWidth < 811;
-  
-      if (scrollTop > threshold && !isHidden) {
-        if (isMobile) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      } else if (scrollTop <= threshold && isHidden) {
-        if (isMobile) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-  
-  
-      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
-    }
-  
-    function handleTouchAndMouseEnter() {
-      if (isHidden) {
-        if (window.innerWidth < 811) {
-          slideDown();
-        } else {
-          slideIn();
-        }
-      }
-    }
-  
-    function handleTouchAndMouseLeave() {
-      if (lastScrollTop > threshold && !isHidden) {
-        if (window.innerWidth < 811) {
-          slideUp();
-        } else {
-          slideOut();
-        }
-      }
-    }
-  
-    window.addEventListener('scroll', handleScroll);
-    window.addEventListener('scroll', adjustHeaderHeight);
-  
-    // Mouse events for desktop
-    header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-    header.addEventListener('mouseleave', handleTouchAndMouseLeave);
-  
-    // Touch events for tablets and mobile devices
-    header.addEventListener('touchstart', handleTouchAndMouseEnter);
-    header.addEventListener('touchend', handleTouchAndMouseLeave);
-  
-    // Initial check to see if we're at the top of the page
     if (window.pageYOffset <= threshold) {
       if (window.innerWidth < 811) {
         slideDown();
@@ -193,8 +287,129 @@ document.addEventListener('DOMContentLoaded', function() {
         slideIn();
       }
     }
+  }
 
-  });
+  /* -------------------
+     Scroll / resize header
+  ------------------- */
 
-  //////// end header ////////////
+  function adjustHeaderHeight() {
+    if (window.scrollY > 0) {
+      header.classList.add('shrink');
+    } else {
+      header.classList.remove('shrink');
+    }
+  }
 
+  function handleScroll() {
+    if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
+
+    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; // ⛔ pas de hover avant la fin de l'intro
+
+    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();
+      }
+    }
+  }
+
+  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('scroll', adjustHeaderHeight);
+
+  header.addEventListener('mouseenter', handleTouchAndMouseEnter);
+  header.addEventListener('mouseleave', handleTouchAndMouseLeave);
+
+  header.addEventListener('touchstart', handleTouchAndMouseEnter);
+  header.addEventListener('touchend', handleTouchAndMouseLeave);
+
+  /* -------------------
+     Intro du logo
+  ------------------- */
+
+  if (isFirstLoad && isTargetPath && logo  && !isMobile) {
+    // On bloque le scroll
+    document.body.classList.add('logo-intro-animating');
+
+    // 1) Logo plein écran SANS ANIMATION + header figé
+    logo.style.transition = 'none';
+    header.style.transition = 'none';
+    document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
+
+    void logo.offsetWidth; // reflow
+
+    const INTRO_DELAY = 1000;          // temps où le logo reste plein écran
+    const TRANSITION_DURATION = 1000;  // durée de l'anim de collapse
+
+    // 2) Après ce délai : on réactive les transitions et on lance l'anim
+    setTimeout(() => {
+      logo.style.transition = '';
+      header.style.transition = '';
+
+      header.classList.add('header--collapsed');           // header se rétracte
+      document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
+
+      // 3) Quand le header + logo ont fini de bouger :
+      setTimeout(() => {
+        document.body.classList.remove('logo-intro-animating');
+        introDone = true;
+
+        // 👉 maintenant seulement on affiche la nav et on la fait glisser
+        if (headerNavContainer) {
+          headerNavContainer.style.visibility = 'visible';
+        }
+        initNavPosition();
+
+      }, TRANSITION_DURATION + 100);
+
+    }, INTRO_DELAY);
+
+  } else {
+    // 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
+    // pas d'intro : header direct réduit, nav directement dispo
+    
+    header.classList.add('header--collapsed-already');
+    introDone = true;
+    if (headerNavContainer) {
+      headerNavContainer.style.visibility = 'visible';
+    }
+    initNavPosition();
+  }
+
+});
+
+///////////////end header sans animation logo////////////////

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

@@ -8,9 +8,11 @@ header[role="banner"]{
     position: fixed;
     top: 0;
     // transition: none;
-    transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
+    // transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
     // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
     // transition: height 1s, padding 1s; /* Add transition for smooth resizing */
+    transition: height 1.4s ease-in-out,
+              width  1.4s ease-in-out;
 
     .language-switcher-language-url{
         text-transform: uppercase;
@@ -68,8 +70,13 @@ header[role="banner"]{
         flex: 0 0 100%;
         display: flex;
         flex-direction: row;
-        transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
+        // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
         background-color: $white-header;
+            // 🔥 On anime la largeur via flex-basis (et width au cas où)
+        transition:
+            flex-basis 0.9s ease-in-out,
+            width      0.9s ease-in-out;
+  
         img{display: none;}
         @media(max-width: 660px){
         height: inherit;
@@ -187,7 +194,11 @@ header[role="banner"]{
         background: $blue_QDD;
         text-align: center;
         transform: translateX(0);
-        transition: transform 0.3s ease-in-out;
+        // transition: transform 0.3s ease-in-out;
+        transition:
+            flex-basis 0.9s ease-in-out,
+            width      0.9s ease-in-out,
+            transform  0.3s ease-in-out; // pour tes slides
         z-index: -1 ;
         display: flex;
         flex-direction: column;
@@ -309,14 +320,14 @@ header[role="banner"]{
 }
 
 
-
-
 /* Taille définitive du header après l'animation */
 header[role="banner"].header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
     width: 35%;
     transform-origin: bottom right; 
-    transition: all 1s ease-in-out;
+    // transition: all 1s ease-in-out;
+    // transition: all 1.4s ease-in-out; 
+    transition: all 1.4s ease-in-out;
     @media(max-width: 1090px) {
         height: $header-height-pad;
     }
@@ -331,14 +342,17 @@ header[role="banner"].header--collapsed {
      height: 170px;
     }
     .header_left_container{
-        flex: 1 0 65%;
+        // flex: 1 0 65%;
+        flex-basis: 65%;
+
         transform-origin: bottom right; 
         @media(max-width: 810px){
             flex: 1 0 100%;
         }
     }
     .header_nav_container{
-        flex: 0 0 30%;
+        // flex: 0 0 30%;
+        flex-basis: 30%;
         transform-origin: bottom right; 
         min-width: fit-content;
         @media(max-width: 810px){
@@ -367,14 +381,16 @@ header[role="banner"].header--collapsed-already{
         height: $header-height-big;
     }
     .header_left_container{
-        flex: 1 0 65%;
+        // flex: 1 0 65%;
+        flex-basis: 65%;
         transform-origin: bottom right; 
         @media(max-width: 810px){
             flex: 1 0 100%;
         }
     }
     .header_nav_container{
-        flex: 0 0 30%;
+        // flex: 0 0 30%;
+        flex-basis: 30%;
         min-width: fit-content;
         transform-origin: bottom right; 
         @media(max-width: 810px){
@@ -389,3 +405,51 @@ header[role="banner"].header--collapsed-already{
     }
 
 }
+
+
+/* Empêcher le scroll pendant l'intro */
+body.logo-intro-animating {
+  overflow: hidden;
+}
+
+/* Header plein écran au tout début */
+body.logo-intro-active header[role="banner"] {
+  height: 100vh;
+  width: 100%;
+}
+
+/* État normal du SVG (dans le header) */
+#block-quartiers-de-demain-logoquartiersdedemain svg {
+  position: relative;
+  top: auto;
+  left: auto;
+  transform: none; // donc scale(1)
+  transform-origin: center center;
+  transition:
+    transform 1.4s ease-in-out,
+    top       1.4s ease-in-out,
+    left      1.4s ease-in-out;
+}
+
+/* État intro : logo centré, scale(2) */
+body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  z-index: 9999;
+}
+/* Pendant l'intro : même si le header est "collapsed",
+   on garde TOUT l'espace pour le bloc gauche,
+   la nav ne prend AUCUNE place (0%) */
+
+   body.logo-intro-animating header[role="banner"].header--collapsed .header_left_container {
+    flex: 0 0 100%;
+  }
+  
+  body.logo-intro-animating header[role="banner"].header--collapsed .header_nav_container {
+    flex: 0 0 0%;
+    width: 0;
+    overflow: hidden;
+  }
+  

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

@@ -25,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";