/* Scroll hide/show animation for the hero header and footer on the homepage - FONCTIONNE SUR TOUTE LA PAGE */
.scroll-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-header.scroll-hide,
.site-header.scroll-hide {
  transform: translateY(-100%) !important;
}
.site-header__inner.scroll-hide {
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-footer.scroll-hide {
  transform: translateY(100%) !important;
}
.btn-wrapper.contact-btn.scroll-hide,
.btn-wrapper.btn-reserve-space-mobile.scroll-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(100%) !important;
}

/* S'assurer que les transitions fonctionnent sur mobile et desktop */
.hero-header,
.site-header,
.site-header__inner,
.hero-footer,
.btn-wrapper.contact-btn,
.btn-wrapper.btn-reserve-space-mobile {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  will-change: opacity, transform;
}

/* Cacher le bouton "Réserver un espace" sur desktop */
.btn-reserve-space-mobile {
  display: none !important;
}

/* Afficher les deux boutons de part et d'autre sur mobile et tablette */
@media (max-width: 1024px) {
  .hero-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 10px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .btn-reserve-space-mobile {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    height: 35px !important;
    margin-left: auto !important;
  }
  
  .hero-footer .contact-btn {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    height: 35px !important;
    margin-right: auto !important;
  }
  
  .hero-footer .contact-btn .btn-text,
  .hero-footer .btn-reserve-space-mobile .btn-text {
    font-size: 12px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }
}

/* S'assurer que le header reste visible sur toute la page */
.hero-header,
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* S'assurer que le site-header__inner est visible */
.site-header__inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Cacher le header et footer pendant le chargement initial */
body[data-loading="true"] .hero-header,
body[data-loading="true"] .site-header,
body[data-loading="true"] .site-header__inner,
body[data-loading="true"] .hero-footer,
body[data-loading="true"] .btn-wrapper.contact-btn,
body[data-loading="true"] .btn-wrapper.btn-reserve-space-mobile,
body:not(.page-loaded) .hero-header,
body:not(.page-loaded) .site-header,
body:not(.page-loaded) .site-header__inner,
body:not(.page-loaded) .hero-footer,
body:not(.page-loaded) .btn-wrapper.contact-btn,
body:not(.page-loaded) .btn-wrapper.btn-reserve-space-mobile {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* S'assurer que le footer reste visible sur toute la page (desktop) */
@media (min-width: 769px) {
  .hero-footer {
    position: fixed !important;
    bottom: 30px !important;
    right: 56px !important;
    z-index: 9998 !important;
    width: auto !important;
  }
}

@media (max-width: 1024px) {
  .hero-header,
  .site-header,
  .site-header__inner,
  .hero-footer,
  .btn-wrapper.contact-btn,
  .btn-wrapper.btn-reserve-space-mobile {
    -webkit-transform: translateZ(0); /* Force l'accélération GPU sur iOS */
    transform: translateZ(0);
  }
  
  /* S'assurer que le footer reste visible sur toute la page (mobile et tablette) */
  .hero-footer {
    position: fixed !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(0) !important;
    z-index: 9998 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 10px 20px !important;
  }
  
  /* Positionner les boutons de part et d'autre */
  .hero-footer .contact-btn {
    margin-right: auto !important;
  }
  
  .hero-footer .btn-reserve-space-mobile {
    margin-left: auto !important;
  }
  
  /* S'assurer que le header reste fixe et visible */
  .hero-header,
  .site-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}