/* 
___________________________________________________________________________________________

                    Page  -->  Les Combinaisons
___________________________________________________________________________________________
 */


.Combinaisons {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 150px;
}

.Combinaisons h2 {
  color: rgba(0, 0, 0, 0.712);
  font-size: clamp(28px, 4vw, 60px);
  margin: 110px 0;
  position: relative;
  cursor: default;
  text-align: center;
  width: 60%;
}


.container-combinaisons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Combinaisons .container-combinaisons {
  width: 100%
}

.Combinaisons .container-text {
  width: 70%;
}

.Combinaisons .container-text p {
  text-align: justify;
  font-size: clamp(12px, 1.7vw, 22px);
  color: rgba(0, 0, 0, 0.8);
  margin-top: 40px;
}

.Combinaisons .container-text h3 {
  text-align: center;
  color: #282C34;
  font-size: clamp(20px, 4vw, 30px);
}



.Combinaisons .cards {
  display: flex;
  justify-content: center;
  align-items: center
}

.Combinaisons .cards {
  width: 85%;
  margin: 50px;
}

.Combinaisons .cards-img {
  max-width: 40%;
  margin: 40px;
}

.Combinaisons .cards-img img {
  width: 100%;
}

.Combinaisons .cards-text {
  width: 45%;
}

.Combinaisons .cards-text h3 {
  color: #282C34;
  font-size: clamp(20px, 4vw, 30px);
  letter-spacing: 3px
}

.Combinaisons .cards-text span {
  color: #222222;
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: bold;
}

.Combinaisons .cards-text p {
  font-size: clamp(12px, 1.7vw, 22px);
  color: rgba(0, 0, 0, 0.8);
  margin-top: 40px;
  text-align: justify;
  letter-spacing: 2px
}

.reverse1 {
  display: flex;
}

.reverse2 {
  display: none;
}

@media (max-width: 1650px) {
  .Combinaisons .cards {
    width: 95%;
    margin: 50px;
  }

  .Combinaisons {
    padding: 0 50px;
  }


}

@media (max-width: 1300px) {
  .Combinaisons .cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .reverse1 {
    display: none;
  }

  .reverse2 {
    display: flex;
  }

  .Combinaisons .cards {
    width: 90%;
    margin: 50px;
  }

  .Combinaisons .cards-img {
    max-width: 100%;
    margin: 40px;
  }

  .Combinaisons .cards-text {
    width: 100%;
  }

  .Combinaisons h2 {
    margin: 110px 0 0 0;
  }

}

@media (max-width: 800px) {

  .Combinaisons .container-text {
    width: 95%;
  }

  .Combinaisons h2 {
    margin: 150px 0 0 0;
  }

  .Combinaisons h2 {
    width: 90%;
  }

}