.landing__intro {
  display: flex;
  flex-direction: column; /* Le bouton reste en-dessous */
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  width: 100%; /* Correction ajoutée pour éviter tout débordement */
  margin: 0 auto;
  text-align: left; /* Pour aligner le texte à gauche */
}

/* Bloc contenant texte + image */
.landing__intro-content {
  display: flex;
  flex-direction: row; /* texte à gauche, image à droite */
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%; /* Prend toute la largeur dispo du parent */
  flex-wrap: wrap; /* Allow wrapping for mobile */
}

/* Texte à gauche */
.landing__intro-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Desktop: Stack vertically - h1, animation, h2/CTA */
@media screen and (min-width: 769px) {
  .landing__intro-content {
    flex-direction: column;
    align-items: center;
  }

  .landing__intro-text {
    width: 100%;
    max-width: 800px;
    align-items: center;
    text-align: center;
  }

  .landing__intro-text--top {
    order: 1;
  }

  .hero-motion {
    order: 2;
  }

  .landing__intro-text--bottom {
    order: 3;
  }

  .landing__intro-cta {
    align-self: center;
  }
}

/* Image à droite (legacy - gardé pour compatibilité) */
.landing__intro img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}

/* Motion design à droite - Remplace l'image */
.landing__intro .hero-motion {
  flex: 1 1 auto;
  min-width: 300px; /* Largeur minimale pour garantir l'affichage */
  max-width: 600px;
  width: 100%;
  height: 500px;
}

.landing__intro-cta {
  align-self: center; /* aligne le bouton au centre */
  display: inline-block; /* pour éviter qu'il prenne toute la largeur */
  width: auto; /* remet la largeur à la taille du contenu */
}

/* ===== Responsive (Tablette et petits écrans) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .landing__intro .hero-motion {
    min-width: 280px; /* Réduit min-width pour les écrans moyens */
    height: 450px;
  }
}

/* ===== Responsive (Mobile) ===== */
@media screen and (max-width: 768px) {
  .landing__intro-content {
    flex-direction: column; /* Stack vertically on mobile */
    text-align: center; /* Centre le texte pour un meilleur rendu sur mobile */
  }

  .landing__intro-text {
    width: 100%;
    align-items: center; /* Centre les éléments à l'intérieur */
    text-align: center; /* Centre le texte */
  }

  /* Order: h1, animation, h2/CTA */
  .landing__intro-text--top {
    order: 1;
  }

  .hero-motion {
    order: 2;
  }

  .landing__intro-text--bottom {
    order: 3;
  }

  .landing__intro-cta {
    align-self: center; /* Centre le bouton */
  }

  .landing__intro .hero-motion {
    display: block !important; /* Force l'affichage sur mobile */
    height: 350px; /* Hauteur optimisée pour mobile */
    max-width: 100%;
    width: 100% !important;
    min-width: 100% !important; /* Garantit l'affichage pleine largeur sur mobile */
    flex: none; /* Désactive flexbox sur mobile pour éviter les réductions */
  }
}

/* ===== Responsive (Très petits mobiles) ===== */
@media screen and (max-width: 480px) {
  .landing__intro .hero-motion {
    height: 300px; /* Hauteur réduite pour très petits écrans */
    min-height: 300px;
  }
}