


// // 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 {
      header.classList.remove('shrink');
    }
  }

  /* --- 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();
    }

    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
  }

  /* --- hover / touch sur le header : on montre la nav --- */

  function handleEnter() {
    if (isHidden) {
      showNav();
    }
  }

  function handleLeave() {
    if (lastScrollTop > threshold && !isHidden) {
      hideNav();
    }
  }

  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();
});
