/* 
___________________________________________________________________________________________

                       Page  -->  Accessoires
___________________________________________________________________________________________
 */

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

.Accessoires 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%;
}

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

.Accessoires .cards {
  width: 95%;
  margin: 50px;
  margin-top: 100px;
}

.Accessoires .cards-img {
  width: 40%;
  margin-right: 80px;
  margin-left: 80px;
}

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

.Accessoires .cards-text {
  width: 50%;
  height: 50%;
}

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

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

.Accessoires .cards-text p {
  font-size: clamp(12px, 1.7vw, 18px);
  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: 1300px) {

  .Accessoires .cards {
    flex-direction: column;
  }

  .reverse1 {
    display: none;
  }

  .reverse2 {
    display: flex;
  }

  .Accessoires .cards {
    margin-top: 50px;
  }

  .Accessoires .cards-img {
    width: 50%;
  }

  .Accessoires .cards-text {
    width: 80%;

  }

  .Accessoires {
    padding: 50px 100px 0px 100px;
  }

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

}

@media (max-width: 900px) {

  .Accessoires .cards-img {
    width: 80%;
  }

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

  .Accessoires .cards {
    width: 95%;
    margin: 0px;
    margin-top: 100px;
  }

  .Accessoires {
    padding: 50px 50px 0px 50px;
  }

}