/* ---------- Section 1-HEADER ---------- */
.hero-section-pilate {
  position: relative;
  top: 0;
  width: 100%; /* Utilisation de la largeur totale de l'écran */
 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-section-pilate picture,
.hero-section-pilate img {
  display: block;
  width: 100%; /* L'image occupe 100% de la largeur */
  height: auto; /* L'image occupe 100% de la hauteur */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
}

.hero-text-pilate {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--pink2-color); /* Couleur du texte */
  max-width: 80%;
}

.hero-text-pilate h1 {
  font-family: var(--font-primary);
  font-size: 4.5rem;
  padding-bottom: 40px;
}

.hero-text-pilate h3 {
  font-family: var(--font-primary);
  font-size: 2rem;
}
/* Style pour l'animation de l'apparition du titre */
.title-pilate {
  opacity: 0; /* Commence invisible */
  transform: translateY(100px); /* Commence en bas de 50px */
  animation: slideUp 2s ease-out 1s forwards; /* Applique l'animation */
}

/* Définir l'animation "slideUp" */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Commence à 50px en bas */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Arrive à sa position d'origine */
  }
}

/* ✅ Breakpoint TABLETTE (768px - 1023px) */
@media (max-width: 1023px) {
  .hero-text-pilate h1 {
    font-size: 3.5rem;
  }
}



/* ✅ Autres breakpoints */
@media (max-width: 545px) {
 
  .hero-text-pilate h1 {
    font-size: 2.6rem;
  }
  .hero-text-pilate h3 {
    font-size: 1.15rem;
  }
  .hero-text-pilate a {
    font-size: 0.8rem;
  }
}

@media (max-width: 390px) {
  .hero-text-pilate {
    max-width: 100%;
  }
  .hero-text-pilate h1 {
    font-size: 2.6rem;
  }
  .hero-text-pilate h3 {
    font-size: 1.15rem;
  }
  .hero-text-pilate a {
    font-size: 0.8rem;
  }
}

@media (max-width: 320px) {
  .hero-text-pilate h1 {
    font-size: 2.2rem;
  }
}

/* ---------- Section 2-PRESENTATION ---------- */
.section-pilates {
  max-height: 910px;
  padding: max(5vh, 105px) 40px; /* haut/bas : 105px max, ajustable en responsive */
  display: flex;
  justify-content: flex-start;
  background-color:var(--pink2-color);
}

.pilates-container {
  display: flex;
  align-items: center; /* centre verticalement le texte */
  justify-content: center;
  width: 100%;
  gap: 40px;
}

.pilates-image {
  width: 100%;
  max-width: 900px;
  height: auto; 
  flex-shrink: 1;
}


.pilates-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pilates-text {
  width: 700px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(255, 188, 179, 0.5) ;
  padding:20px;
  box-sizing: border-box;
}

.pilates-text h2 {
  font-size: 1.75rem;
  margin-bottom: 10px;
}

.pilates-text p {
  font-size: 1rem;
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  .pilates-text {
    width: 400px;
    padding-left: 30px;
  }
}

@media screen and (max-width: 1020px) {
  .section-pilates {
    flex-direction: column;
    align-items: center;
    padding: max(5vh, 80px) 20px;
  }

  .pilates-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
 
  .pilates-image {
    transform: none;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }

  .pilates-text {
    width: 90%;
    height: auto;
  
   
    text-align: center;
  }

  .pilates-text h2 {
    font-size: 1.5rem;
  }

  .pilates-text p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 660px) {
  .section-pilates {
    max-height: 810px;
    padding: max(5vh, 50px) 10px; /* haut/bas : 105px max, ajustable en responsive */
    display: flex;
    justify-content: flex-start;
    background-color:var(--pink2-color);
  }
  .pilates-text {
    padding-inline: 10px;
  }
  
  .pilates-container {
    gap: 0px;
  }
}
@media screen and (max-width: 390px) {
.pilates-text h2 {
  font-size: 1.3rem;
}

.pilates-text p {
  font-size: 0.9rem;
}
}
/* ---------- Section 3-SEPARATION ---------- */

.second-hero-section-pilate-separation {
  background-image: url("/img/pilate/tapisEtBallon.webp");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}
@media screen and (max-width: 576px) {
  .second-hero-section-pilate-separation {
    background-image: url("/img/pilate/tapisEtBallon-mobile.webp");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
  }
}
/* ---------- Section 2-PRESENTATION REVERSE---------- */

.section-pilates-reverse {
  max-height: 910px;
  padding: max(5vh, 105px) 40px; /* haut/bas : 105px max, ajustable en responsive */
  display: flex;
  justify-content: flex-start;
  background-color: var(--pink2-color);
}

.pilates-container-reverse {
  display: flex;
  align-items: center; /* centre verticalement le texte */
  justify-content: center;
  width: 100%;
  gap: 40px;
  flex-direction: row-reverse; /* Inverser l'ordre des éléments */
}

.pilates-image-reverse {
  width: 100%;
  max-width: 900px;
  height: auto; 
  flex-shrink: 1;
}

.pilates-image-reverse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pilates-text-reverse {
  width: 700px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(255, 188, 179, 0.5);
  padding: 20px;
  box-sizing: border-box;
}

.pilates-text-reverse h2 {
  font-size: 1.75rem;
  margin-bottom: 10px;
}

.pilates-text-reverse p {
  font-size: 1rem;
  line-height: 1.5;
}

@media screen and (max-width: 1200px) {
  .pilates-text-reverse {
    width: 400px;
    padding-left: 30px;
  }
}

@media screen and (max-width: 1020px) {
  .section-pilates-reverse {
    flex-direction: column;
    align-items: center;
    padding: max(5vh, 80px) 20px;
  }

  .pilates-container-reverse {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .pilates-image-reverse {
    transform: none;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }

  .pilates-text-reverse {
    width: 90%;
    height: auto;
    text-align: center;
  }

  .pilates-text-reverse h2 {
    font-size: 1.5rem;
  }

  .pilates-text-reverse p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 660px) {
  .section-pilates-reverse {
    max-height: 810px;
    padding: max(5vh, 50px) 10px; /* haut/bas : 105px max, ajustable en responsive */
    display: flex;
    justify-content: flex-start;
    background-color: var(--pink2-color);
  }

  .pilates-text-reverse {
    padding-inline: 10px;
  }

  .pilates-container-reverse {
    gap: 0px;
  }
}

@media screen and (max-width: 390px) {
  .pilates-text-reverse h2 {
    font-size: 1.3rem;
  }

  .pilates-text-reverse p {
    font-size: 0.9rem;
  }
}

/* ---------- Section 5-CONCLUSION ---------- */
.section-pilate-conclusion {
  background-color: #f5f5f5; /* Fond de la section */
  padding: 90px; /* Ajout d'un padding pour éviter que le contenu touche les bords */
}
.custom-section-overlay-pilate-conclusion {
  position: relative;
  width: 90%;
  height: 785px; /* Hauteur du rectangle */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 100px; /* Espace à gauche */
}

.image-container-pilate-conclusion {
  width: 619px;
  height: 430px;
  position: relative;
  z-index: 1; /* S'assurer que l'image passe au-dessus du rectangle */
}

.image-container-pilate-conclusion img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-box-pilate-conclusion {
  position: absolute;
  left: 290px; /* Recouvre légèrement l'image */
  width: 670px;
  height: 785px;
  background-color: var(--pink-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 2; /* Passe sous l'image */
}

.text-box-pilate-conclusion h2,
.text-box-pilate-conclusion p {
  max-width: 489px;
  width: 100%;
  text-align: left;
  color: var(--dark);
}

.text-box-pilate-conclusion h2 {
  font-weight: 100;
  font-size: 1.875rem;
  margin-bottom: 15px;
}

.text-box-pilate-conclusion p {
  font-size: 1.25rem;
}