@import "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";

body {
  margin: 0;
  padding: 0;
}

*{ 
  box-sizing:border-box;
  font-family:"Open Sans";
  scroll-behavior:smooth;
}

/* Optimisation des performances pour les animations */
* {
  will-change: auto;
}

.btn-outline-black {
  color: #172739;
  border: 1px solid #172739;
  font-weight: 600;
  font-size: 15px;
  line-height: 38px;
  border-radius: 10px;
  padding: 10px 20px;
  text-decoration: none;
}

.btn-outline-black:hover {
  background-color: #172739;
  color: #fff;
}

/* Animation fade-in-left pour le hero */
.hero-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInLeftHero 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}
@keyframes fadeInLeftHero {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation fade-in-right pour le hero */
.hero-fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRightHero 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
@keyframes fadeInRightHero {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animations pour le scroll - optimisées et uniformisées */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.fade-in-down.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animations spécifiques aux features */
.feature-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.feature-fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.feature-fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.feature-fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animations spécifiques aux témoignages */
.testimonial-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.testimonial-fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.testimonial-fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.testimonial-fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animation spécifique pour impact */
.impact-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.impact-fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}