/* Styles pour les animations au scroll */

/* Réduction du padding des éléments de texte hero */
.h1-hero-text._1,
.h1-hero-text._2 {
  padding: 10px !important;
  margin: 0 !important;
}


.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-on-scroll.left.is-visible {
  transform: translateX(0);
}

.fade-in-on-scroll.right {
  transform: translateX(30px);
}

.fade-in-on-scroll.right.is-visible {
  transform: translateX(0);
}

/* Délai pour créer un effet en cascade */
.fade-in-on-scroll:nth-child(2) {
  transition-delay: 0.1s;
}

.fade-in-on-scroll:nth-child(3) {
  transition-delay: 0.2s;
}

.fade-in-on-scroll:nth-child(4) {
  transition-delay: 0.3s;
}

/* Styles pour la section globale du téléphone */
.hero-product-demo {
  position: relative;
  height: 200vh; /* Hauteur pour l'animation complète sur desktop */
  overflow: visible;
  padding-top: 10vh;
}

/* Configuration du conteneur sticky */
.product-demo-sticky {
  position: -webkit-sticky !important; /* Pour Safari */
  position: sticky !important;
  z-index: 10;
  display: block;
  height: 700px; /* Hauteur adaptée */
}

/* Styles pour l'image de l'écran de verrouillage qui doit glisser */
.iphone-lock-screen-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  transition: transform 0.1s ease-out; /* Transition fluide pendant le défilement */
  will-change: transform; /* Optimisation des performances */
}

/* Styles pour l'image qui est révélée en dessous */
.product-phone-demo-image-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

/* Styles des conteneurs */
.product-phone-content {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  border-radius: 40px; /* Arrondi pour correspondre au téléphone */
}


/* Positionnement du contenu à l'intérieur du téléphone */
.product-phone-content {
  position: absolute;
  top: 24px;
  width: 270px;
  height: 590px;
  overflow: hidden;
  border-radius: 40px;
}





/* État animé - contrôlé par JavaScript */
.iphone-lock-screen-image.slide-up {
  transform: translateY(-100%); /* Glisse complètement vers le haut */
}

/* Styles pour le conteneur du téléphone */
.product-phone-image-holder {
  position: relative;
  width: 100%;
  max-width: 340px; /* Limite la largeur maximale */
  margin: 0 auto;
}

.product-phone-image {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10; /* S'assurer que l'image du téléphone est au-dessus */
}

.product-phone-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* S'assurer que les images dans le téléphone restent à l'intérieur */
.product-container {
  position: relative;
  width: 100%;
  max-width: 340px; /* Limite la largeur maximale */
  margin: 0 auto;
}

/* === GESTION VISIBILITÉ MOBILE/DESKTOP === */

/* Logo compact mobile - visible uniquement sur mobile */
.hero-mobile-compact {
  display: block;
  text-align: center;
  padding: 20px 0;
}

/* Logos animés desktop - visibles par défaut */
.hero-text-sticky {
  display: block;
}

/* Media query pour mobile (768px et moins) */
@media (max-width: 768px) {
  /* Afficher le logo compact sur mobile */
  .hero-mobile-compact {
    display: block;
  }

    .hero-product-demo{
        display: none;
    }

    .section.top-margin{
        margin-top: 0;
    }
  /* Cacher complètement les logos animés sur mobile */
  .hero-text-sticky {
    display: none !important;
  }

  /* Réduire la hauteur sur mobile car pas d'animation de rapprochement */
  .hero-product-demo {
    height: 80vh; /* Hauteur réduite pour mobile - juste pour l'animation du téléphone */
  }
}

/* Media query pour desktop (769px et plus) */
@media (min-width: 769px) {
  /* Cacher le logo compact sur desktop */
  .hero-mobile-compact {
    display: none;
  }

  /* Afficher les logos animés sur desktop */
  .hero-text-sticky {
    display: block;
  }
}

/* === PHONE SLIDER - CORRIGER LE DÉBORDEMENT === */

/* Appliquer overflow: hidden au bon niveau - le conteneur parent */
.phone-slider-container {
  overflow: hidden !important;
}

.phone-slider-mask.w-slider-mask {
  overflow: hidden !important;
}

/* Optimisation pour le wrapper des slides */
.slides-wrapper {
  will-change: transform;
}