/***************************************HOME 2024*******************************************/

strong.p-home {
  color: #000;
  }

  .more-text {
    display: none;
}
 
.toggleButton {
  background: none; 
  border: none; 
  text-decoration: underline; 
  cursor: pointer;
}

.toggleButton:focus {
  outline: none; 
  box-shadow: none; 
}

.more-text ul {
  list-style-type: none;
  padding-left: 0; 
}

.more-text  ul li {
  font-size: 1rem;
  font-weight: 500;
}

.more-text  ul li:before {
  background-image: none;
}

/***************************************HOME 2024 CATEGORIES DE MOBILIER*******************************************/

.categories-mobilier {
  position: relative;
}

.categories-mobilier h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* Pour s'assurer que le texte est lisible */
  padding: 10px; /* Ajoutez du padding pour améliorer la lisibilité */
  width: 80%; /* Ajustez la largeur au besoin */
  z-index: 1;
  font-weight: 600;
  text-shadow: 1px 1px 10px black;
}

.categories-mobilier h3 span {
  font-size: 1.5rem;
  font-weight: 200;
  text-transform: capitalize;
}

.categories-mobilier p {
  display: none;
}

.categories-mobilier:hover h3 {
  display: none;
}

.categories-mobilier:hover p {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* Pour s'assurer que le texte est lisible */
  padding: 10px; /* Ajoutez du padding pour améliorer la lisibilité */
  width: 80%; /* Ajustez la largeur au besoin */
  z-index: 1;
}

.categories-mobilier::after {
  content: '';
  position: absolute;
  top: 5px; /* décalage vers le haut */
  left: 5px; /* décalage vers la gauche */
  right: 5px; /* décalage vers la droite */
  bottom: 5px; /* décalage vers le bas */
  border: 2px solid rgb(255, 255, 255); /* taille et couleur de la bordure */
  background-color: rgba(154, 142, 125, 0.4); /* Couleur et opacité du voile */
  transition: opacity 0.3s ease; /* Animation de la transition */
  pointer-events: none; /* Permet aux clics de passer à travers le voile */
}

.petite-vignette {
  max-width: 500px;
}

.grande-vignette {
  max-width: 1008px;
}

@media screen and (max-width: 767px) {
  .grande-vignette {
      max-width: 500px;
  }
}

@media screen and (max-width: 991px) {
  .categories-mobilier {
      margin-bottom: 20px; /* Ajouter de l'espace entre les catégories pour éviter le chevauchement */
  }

  .categories-mobilier h3 {
      width: 100%; /* Assurer que le texte ne dépasse pas le cadre */
  }

  .categories-mobilier p {
      width: 100%; /* Assurer que le texte ne dépasse pas le cadre */
  }

  .categories-mobilier::after {
      top: 10px; /* Ajuster les marges pour les écrans de taille moyenne */
      left: 10px;
      right: 10px;
      bottom: 10px;
  }
}
/***************************************FIN HOME 2024 CATEGORIES DE MOBILIER*******************************************/

/***************************************HOME 2024 SECTION BUREAUX & TABLES****************************/

.test-wrapper .col-12 {
  padding-left:0!important;
  padding-right:0!important;
}

.p-table {
  color:#000;
}

.p-table a {
  color:#6db7af;
}

.paragraphe,  #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
  position: absolute; /* Positionnement absolu */
  left: 29%; /* Centrage vertical */
  width: 600px; /* Largeur fixe */
  padding-left: 100px;
  padding-top: 20px;
}

#carousel a {
  color: black;
  text-decoration: none;
  display:flex;
  flex-direction: column;
}

.test-wrapper .nav-tabs, .nav-link{
  border:none!important;
  color:grey !important;
  }

.test-wrapper .nav-link.active {
  font-weight:500!important;
  color:black !important;
  }

  .test-wrapper  li.nav-item:before {
    background-image: none !important;
    }
  
    #myTab li.nav-item {
      padding:0 !important;
      }

.carousel-reunion {
position: relative;
}


#carousel {
  position: relative;
  height: 500px;
  overflow: hidden;
}

#carousel h3 {
  margin: 0.5rem 0rem;
}

#carousel p{
  margin: 0.5rem 0rem;
  font-size: 0.8rem;
}

#carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#carousel div img {
  width: 400px !important;
  max-width: 400px !important;
  transition: width 1s;
  border-radius: 20px;
}

/*******************carousel bureaux******************/

.carousel-desks {
  background-image: url("https://www.harmony-group.fr/docs/pics/bureaux-ergonomiques-mobilier-de-bureau-pro.jpg");
  height:800px!important;
  width:auto;
  background-repeat: no-repeat;
  }


#carousel div.hideLeft-desk, #carousel div.prevLeftThird-desk {
  opacity: 0;
  left: 0%;
  transform: translateY(150px) translateX(-50%);
}

#carousel div.hideLeft-desk img, #carousel div.prevLeftThird-desk img {
  width: 400px!important;
}

#carousel div.hideLeft-desk h3, #carousel div.prevLeftThird-desk h3 {
  font-size: 0.6rem;
  font-weight: 400;
}
#carousel div.hideLeft-desk p, #carousel div.prevLeftThird-desk p {
  font-size: 0.8rem;
  font-weight: 600;
}

#carousel div.prevLeftSecond-desk {
  z-index: 4;
  left: 15%;
  transform: translateY(150px) translateX(-50%);
  opacity: 0;
}

#carousel div.prevLeftSecond-desk img {
  width: 400px !important;
}

#carousel div.prevLeftSecond-desk h3 {
  font-size: 0.7rem;
  padding-left: 50px;
}
#carousel div.prevLeftSecond-desk p {
  font-size: 0.6rem;
  padding-left: 50px;
  order: -1;
}

#carousel div.prev-desk {
  z-index: 5;
  opacity:0;
  left: 22%;
  transform: translateY(150px) translateX(-50%);
}

#carousel div.prev-desk h3 {
  font-size: 0.6rem;
  font-weight: 400;
}

#carousel div.prev-desk p {
  font-size: 0.8rem;
  font-weight: 600;
}

#carousel div.prev-desk img {
  width: 400px!important;
}

#carousel div.selected-desk {
  z-index: 10;
  left: 38%;
  transform: translateY(150px) translateX(-50%);
}

#carousel div.selected-desk h3 {
  padding-left: 110px;
  font-size: 0.8rem;
  font-weight: 400;

}

#carousel div.selected-desk p {
  padding-left: 110px;
  order: -1;
  font-size: 1.75rem;
  font-weight: 600;
}

#carousel div.next-desk {
  z-index: 5;
  left: 59%;
  transform: translateY(200px) translateX(-50%);
}

#carousel div.next-desk h3 {
  font-size: 0.7rem;
  font-weight: 400;
  padding-left: 50px;
}

#carousel div.next-desk p {
  font-size: 0.8rem;
  font-weight: 600;
  padding-left: 50px;
  order: -1;
}

#carousel div.next-desk img {
  width: 300px!important;
  max-width: 300px!important;
}

#carousel div.nextRightSecond-desk {
  z-index: 4;
  left: 78%;
  transform: translateY(200px) translateX(-50%);
}

#carousel div.nextRightSecond-desk h3 {
  font-size: 0.7rem;
  font-weight: 400;
  padding-left: 50px;
}

#carousel div.nextRightSecond-desk p {
  font-size: 0.8rem;
  font-weight: 600;
  padding-left: 50px;
  order: -1;
}

#carousel div.nextRightSecond-desk img {
  width: 300px!important;
  max-width: 300px!important;
}

#carousel div.nextRightThird-desk {
  left: 97%;
  opacity: 0.3;
  transform: translateY(200px) translateX(-50%);
}

#carousel div.nextRightThird-desk img {
  width: 300px!important;
  max-width: 300px!important;
}

#carousel div.hideRight-desk {
  left: 125%;
  opacity: 0;
  transform: translateY(200px) translateX(-50%);
}

#carousel div.hideRight-desk h3, #carousel div.hideRight-desk p, #carousel div.nextRightThird-desk p, #carousel div.nextRightThird-desk h3 {
  opacity: 0;
}


#carousel div.hideRight-desk img {
  width: 300px!important;
  max-width: 300px!important;
}

/*****************flèches carousel desk*****************************/
.buttons-desk {
  position: absolute;
  top: 47%;
  width: 100%;
  /*transform: translateX(-50%);
  bottom: 10px;
  margin-top: 10px;*/
  z-index: 15;
}

.buttons-desk button {
  background-color: #f0f0f0; /* Couleur de fond des boutons */
  border: none; /* Supprimer les bordures */
  padding: 10px 20px; /* Ajout de rembourrage */
  font-size: 18px; /* Taille de la police */
  cursor: pointer; /* Changer le curseur en pointeur */
  border-radius: 50%;
  z-index: 15;
}

.buttons-desk button:hover {
  background-color: #e0e0e0; /* Couleur lors du survol */
}


.prev-desks {
  position: absolute; 
  left: 22%; 
  z-index: 10; 
}

.next-desks {
  position: absolute; 
  right: 5px; 
  z-index: 10;
}

//*********** Mobile & Tablettes Carousel Desk ***********/


@media screen and (max-width: 820px) {
  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.prev-desk,
  #carousel div.prevLeftSecond-desk,
  #carousel div.prevLeftThird-desk,
  #carousel div.hideLeft-desk {
    left: -20%;
  }

  #carousel div.next-desk {
    left: 85%;
    opacity: 0.5;
  }

  #carousel div.nextRightSecond-desk,
  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (max-width: 820px) {
  .carousel-desks {
    background-image: none;
  }
  
  .paragraphe, 
  #carousel p.hideLeft-desk, 
  #carousel p.prevLeftThird-desk, 
  #carousel p.prevLeftSecond-desk, 
  #carousel p.prev-desk, 
  #carousel p.selected-desk {
    position: static;
    padding: 25px;
    text-align: center;
    width: auto;
  }

  #carousel div.prev-desk h3, 
  #carousel div.prev-desk p, 
  #carousel div.selected-desk h3, 
  #carousel div.selected-desk p, 
  #carousel div.next-desk h3, 
  #carousel div.next-desk p {
    text-align: center;
    padding-left: 0!important;
  }
  

  #carousel div.nextRightSecond-desk, 
  #carousel div.nextRightThird-desk, 
  #carousel div.hideRight-desk {
    left: 150%;
    opacity: 0;
    transform: translateX(-50%);
  }

  #carousel div.prevLeftSecond-desk, 
  #carousel div.prevLeftThird-desk, 
  #carousel div.hideLeft-desk {
    left: -50%;
    opacity: 0;
    transform: translateX(-50%);
  }
  
  #carousel div.selected-desk {
    left: 50%;
    transform: translateX(-50%);
  }

  #carousel div.nextLeftSecond-desk img, 
  #carousel div.nextLeftThird-desk img, 
  #carousel div.hideLeft-desk img,
  #carousel div.prev-desk img, 
  #carousel div.selected-desk img, 
  #carousel div.next-desk img,
  #carousel div.nextRightSecond-desk img, 
  #carousel div.nextRightThird-desk img, 
  #carousel div.hideRight-desk img {
    width: 400px !important;
    max-width: 400px !important;
  }

  
  #carousel div.prev-desk, 
  #carousel div.selected-desk, 
  #carousel div.next-desk {
    text-align: center;
    padding-left: 0!important;
    transform: translateX(-50%);
  }

  
  #carousel div.prev-desk h3, 
  #carousel div.selected-desk h3, 
  #carousel div.next-desk h3 {
    font-size: 0.8rem;
    font-weight: 400;
  }

  #carousel div.prev-desk p, 
  #carousel div.selected-desk p, 
  #carousel div.next-desk p {
    font-size: 1.75rem;
    font-weight: 600;
  }

  .buttons-desk {
    top: 52% !important;
  }

  .prev-desks {
    left:5px;
  }
}

@media screen and (min-width: 651px) and (max-width: 820px) {
  #carousel div.next-desk {
    left: 115%;
    opacity: 0.3;
  }

  #carousel div.prev-desk {
    left: -15%;
    opacity: 0.3;
  }
}

@media screen and (max-width: 650px) {
 
  #carousel div.next-desk {
    opacity: 0;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1621px) and (max-width: 1890px) {
  .carousel-desks {
    background-position-x: -10%;
  }
}

@media screen and (min-width: 1531px) and (max-width: 1620px) {
  .carousel-desks {
    background-position-x: -15%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 50px;
  }

  #carousel div.next-desk {
    left: 63%;
  }

  #carousel div.nextRightSecond-desk {
    left: 85%;
  }

  #carousel div.nextRightThird-desk {
    left: 107%;
    opacity: 0.3;
  }

  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 1451px) and (max-width: 1530px) {
  .carousel-desks {
    background-position-x: -20%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 50px;
  }

  #carousel div.next-desk {
    left: 63%;
  }

  #carousel div.nextRightSecond-desk {
    left: 85%;
  }

  #carousel div.nextRightThird-desk {
    left: 107%;
    opacity: 0.3;
  }

  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 1351px) and (max-width: 1450px) {
  .carousel-desks {
    background-position-x: -28%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 50px;
  }

  #carousel div.next-desk {
    left: 70%;
  }

  #carousel div.nextRightSecond-desk {
    left: 98%;
    opacity: 0.3;
  }


  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 1251px) and (max-width: 1350px) {
  .carousel-desks {
    background-position-x: -37%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 50px;
  }

  #carousel div.next-desk {
    left: 70%;
  }

  #carousel div.nextRightSecond-desk {
    left: 98%;
    opacity: 0.3;
  }


  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 1151px) and (max-width: 1250px) {
  .carousel-desks {
    background-position-x: -51%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.next-desk {
    left: 75%;
  }

  #carousel div.nextRightSecond-desk {
    left: 107%;
    opacity: 0.3;
  }


  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 1051px) and (max-width: 1150px) {
  .carousel-desks {
    background-position-x: -72%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.next-desk {
    left: 75%;
  }

  #carousel div.nextRightSecond-desk {
    left: 107%;
    opacity: 0.3;
  }


  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 991px) and (max-width: 1050px) {
  .carousel-desks {
    background-position-x: -90%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.next-desk {
    left: 75%;
  }

  #carousel div.nextRightSecond-desk {
    left: 107%;
    opacity: 0.3;
  }


  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 901px) and (max-width: 990px) {
  .carousel-desks {
    background-position-x: -130%;
  }

  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.next-desk {
    left: 85%;
    opacity: 0.5;
  }

  #carousel div.nextRightSecond-desk,
  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 851px) and (max-width: 900px) {
  .carousel-desks {
    background-position-x: -150%;
  }
  .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
    padding-left: 0;
  }

  #carousel div.prev-desk,
  #carousel div.prevLeftSecond-desk,
  #carousel div.prevLeftThird-desk,
  #carousel div.hideLeft-desk {
    opacity: 0;
    left: -20%;
  }

  #carousel div.next-desk {
    left: 85%;
    opacity: 0.5;
  }

  #carousel div.nextRightSecond-desk,
  #carousel div.nextRightThird-desk,
  #carousel div.hideRight-desk {
    left: 120%;
    opacity: 0;
  }
}

@media screen and (min-width: 821px) and (max-width: 850px) {
  .carousel-desks {
    background-position-x: -190%;
  }
    .paragraphe, #carousel p.hideLeft-desk, #carousel p.prevLeftThird-desk, #carousel p.prevLeftSecond-desk, #carousel p.prev-desk, #carousel p.selected-desk {
      padding-left: 0;
    }
  
    #carousel div.prev-desk,
    #carousel div.prevLeftSecond-desk,
    #carousel div.prevLeftThird-desk,
    #carousel div.hideLeft-desk {
      opacity: 0;
      left: -20%;
    }
  
    #carousel div.next-desk {
      left: 85%;
      opacity: 0.5;
    }
  
    #carousel div.nextRightSecond-desk,
    #carousel div.nextRightThird-desk,
    #carousel div.hideRight-desk {
      left: 120%;
      opacity: 0;
    }
  }

/****FIN BACKGROUND IMAGE DESK***/

/*****************fin carousel desk*****************************/


/*************************carousel reunion************************/
.selected h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.prev h3, .prevLeftThird h3, .prevLeftSecond h3,  .hideLeft h3, .next h3, .nextRightSecond h3, .nextRightThird h3, .hideRight h3 {
  opacity:0;
}

.prev p, .prevLeftThird p, .prevLeftSecond p, .hideLeft p, .next p, .nextRightSecond p, .nextRightThird p, .hideRight p {
  opacity:0;
}

#carousel div.hideLeft {
  left: -25%;
  opacity: 0;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.hideLeft img {
  width: 300px!important;
}

#carousel div.prevLeftThird {
  left: -5%;
  opacity: 0.3;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.prevLeftThird img {
  width: 300px!important;
}

#carousel div.prevLeftSecond {
  z-index: 4;
  left: 12.5%;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.prevLeftSecond img {
  width: 300px!important;
}

#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.prev img {
  width: 300px!important;
}

#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
  max-width: 400px!important;
}
#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.next img {
  width: 300px!important;
}

#carousel div.nextRightSecond {
  z-index: 4;
  left: 87.5%;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.nextRightSecond img {
  width: 300px!important;
}

#carousel div.nextRightThird {
  left: 105%;
  opacity: 0.3;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.nextRightThird img {
  width: 300px!important;
}

#carousel div.hideRight {
  left: 125%;
  opacity: 0;
  transform: translateY(50px) translateX(-50%);
  max-width: 300px!important;
}

#carousel div.hideRight img {
  width: 300px!important;
}
/*****************flèches carousel reu*****************************/
.buttons-reu {
  position: absolute;
  top: 35%;
  width: 100%;
  /*transform: translateX(-50%);
  bottom: 10px;
  margin-top: 10px;*/
  z-index: 15;
}

.buttons-reu button {
  background-color: #f0f0f0; /* Couleur de fond des boutons */
  border: none; /* Supprimer les bordures */
  padding: 10px 20px; /* Ajout de rembourrage */
  font-size: 18px; /* Taille de la police */
  cursor: pointer; /* Changer le curseur en pointeur */
  border-radius: 50%;
  z-index: 15;
}

.buttons-reu button:hover {
  background-color: #e0e0e0; /* Couleur lors du survol */
}


#prev-reu {
  position: absolute; /* Position absolue */
  left: 5px; /* Position sur le côté gauche */
  z-index: 10; /* Pour être au-dessus du contenu du carrousel */
}

#next-reu {
  position: absolute; /* Position absolue */
  right: 5px; /* Position sur le côté droit */
  z-index: 10; /* Pour être au-dessus du contenu du carrousel */
}


/*********************version mobile & tablettes reunion***************/


  
  @media screen and (min-width: 1550px) and (max-width: 1700px) {
    #carousel div.prevLeftSecond {
      left: 7%;
      transform: translateY(50px) translateX(-50%);
      opacity: 0.3;
  }
  #carousel div.prev {
    left: 27%;
    transform: translateY(50px) translateX(-50%);
  }
  #carousel div.next {
    left: 73%;
    transform: translateY(50px) translateX(-50%);
  }
  #carousel div.nextRightSecond {
    left: 93%;
    transform: translateY(50px) translateX(-50%);
    opacity: 0.3;
  }
  
  #carousel div.hideRight, #carousel div.prevLeftThird, #carousel div.hideLeft, #carousel div.nextRightThird {
    opacity:0;
  }
  }
  
  @media screen and (min-width: 1080px) and (max-width: 1549px) {
    
  #carousel div.prev {
    left: 23%;
    opacity: 0.3;
    transform: translateY(50px) translateX(-50%);
  }
  
  #carousel div.next {
    left: 77%;
    opacity: 0.3;
    transform: translateY(50px) translateX(-50%);
  }
  
  #carousel div.hideRight, #carousel div.prevLeftThird, #carousel div.hideLeft,  #carousel div.prevLeftSecond, #carousel div.nextRightSecond, #carousel div.nextRightThird {
    opacity:0;
  }
  
  }
  
  @media screen and (max-width: 1200px) {
    #carousel div.hideRight, #carousel div.prevLeftSecond, #carousel div.prevLeftThird, #carousel div.hideLeft, #carousel div.nextRightSecond, #carousel div.nextRightThird {
      opacity:0;
    }
  }
  
  
  
  
  /*****************fin carousel reu*****************************/
  
/*************************carousel box acoustique************************/
#carousel-acoustique .hideLeft-acoustique, 
#carousel-acoustique .prevLeftSecond-acoustique, 
#carousel-acoustique .prevLeftThird-acoustique, 
#carousel-acoustique .prev-acoustique, 
#carousel-acoustique .selected-acoustique, 
#carousel-acoustique .next-acoustique, 
#carousel-acoustique .nextRightSecond-acoustique, 
#carousel-acoustique .nextRightThird-acoustique,
#carousel-acoustique .hideRight-acoustique {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
  text-align: center; /* Centrage du texte */
}

#carousel-acoustique .h-acoustique, 
#carousel-acoustique .h3-acoustique, 
#carousel-acoustique .p-home {
  width: 100%; /* Largeur 100% pour centrage horizontal */
  text-align: center;
}

#carousel-acoustique .h-acoustique {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem !important;
  color: #fff;
  text-shadow: 1px 1px 10px black;
  font-weight: 600;
  z-index: 1; /* Assurez-vous que c'est au-dessus de l'image */
}

#carousel-acoustique .h3-acoustique {
  display: block; 
  opacity: 1;
  text-shadow: 1px 1px 10px black;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #fff;
  padding: 20px;
  text-align: center;
  z-index: 1; /* Assurez-vous que c'est au-dessus de l'image */
}

#carousel-acoustique .p-home {
  display: none; /* Masquer par défaut */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #fff;
  padding: 20px;
  text-align: center;
  z-index: 1; /* Assurez-vous que c'est au-dessus de l'image */
}

/* Afficher les deux éléments au hover */
#carousel-acoustique .hideLeft-acoustique:hover .h-acoustique,
#carousel-acoustique .prevLeftThird-acoustique:hover .h-acoustique,
#carousel-acoustique .prevLeftSecond-acoustique:hover .h-acoustique,
#carousel-acoustique .prev-acoustique:hover .h-acoustique,
#carousel-acoustique .selected-acoustique:hover .h-acoustique,
#carousel-acoustique .next-acoustique:hover .h-acoustique,
#carousel-acoustique .nextRightSecond-acoustique:hover .h-acoustique,
#carousel-acoustique .nextRightThird-acoustique:hover .h-acoustique,
#carousel-acoustique .hideRight-acoustique:hover .h-acoustique {
  bottom: 30%; /* Placer h-acoustique plus haut pour laisser la place à p-home */
  transform: translate(-50%, 50%);
}

#carousel-acoustique .hideLeft-acoustique:hover .h3-acoustique,
#carousel-acoustique .prevLeftThird-acoustique:hover .h3-acoustique,
#carousel-acoustique .prevLeftSecond-acoustique:hover .h3-acoustique,
#carousel-acoustique .prev-acoustique:hover .h3-acoustique,
#carousel-acoustique .selected-acoustique:hover .h3-acoustique,
#carousel-acoustique .next-acoustique:hover .h3-acoustique,
#carousel-acoustique .nextRightSecond-acoustique:hover .h3-acoustique,
#carousel-acoustique .nextRightThird-acoustique:hover .h3-acoustique,
#carousel-acoustique .hideRight-acoustique:hover .h3-acoustique {
  display: none;
}

#carousel-acoustique .hideLeft-acoustique:hover .p-home,
#carousel-acoustique .prevLeftThird-acoustique:hover .p-home,
#carousel-acoustique .prevLeftSecond-acoustique:hover .p-home,
#carousel-acoustique .prev-acoustique:hover .p-home,
#carousel-acoustique .selected-acoustique:hover .p-home,
#carousel-acoustique .next-acoustique:hover .p-home,
#carousel-acoustique .nextRightSecond-acoustique:hover .p-home,
#carousel-acoustique .nextRightThird-acoustique:hover .p-home,
#carousel-acoustique .hideRight-acoustique:hover .p-home {
  display: block; /* Afficher p-home */
  bottom: 10px; /* Placer p-home en bas de l'image */
}

#carousel-acoustique {
  position: relative;
  height: 445px;
  overflow: hidden;
}

#carousel-acoustique h3 {
  margin: 0.5rem 0rem;
}

#carousel-acoustique p{
  margin: 0.5rem 0rem;
  font-size: 0.8rem;
}

#carousel-acoustique div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#carousel-acoustique div img {
  width: 325px !important;
  max-width: 325px !important;
  transition: width 1s;
  border-radius: 20px;
}
.selected-acoustique h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.h-acoustique {
  position: absolute;
  opacity: 1!important;
  bottom: 10px;
  z-index: 1;
  font-size: 1.5rem !important;
  color: #fff;
  text-shadow: 1px 1px 10px black;
  font-weight: 600;
}

strong.p-acoustique{
color: #fff;
}
.prev-acoustique h3, .prevLeftThird-acoustique h3, .prevLeftSecond-acoustique h3, .hideLeft-acoustique h3, .selected-acoustique h3, .next-acoustique h3, .nextRightSecond-acoustique h3, .nextRightThird-acoustique h3, .hideRight-acoustique h3 {
  opacity:0;
}

.prev-acoustique p, .prevLeftThird-acoustique p, .prevLeftSecond-acoustique p, .hideLeft-acoustique p, .selected-acoustique p, .next-acoustique p, .nextRightSecond-acoustique p, .nextRightThird-acoustique p, .hideRight-acoustique p {
  opacity:0;
}

.prev-acoustique::before, .prevLeftThird-acoustique::before, .prevLeftSecond-acoustique::before, .hideLeft-acoustique::before, .selected-acoustique::before, .next-acoustique::before, .nextRightSecond-acoustique::before, .nextRightThird-acoustique::before, .hideRight-acoustique::before {
  opacity:0;
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-radius: 20px;
    transition: opacity 0.3s ease; /* Transition douce */
}

.prev-acoustique:hover::before, .prevLeftThird-acoustique:hover::before, .prevLeftSecond-acoustique:hover::before, .hideLeft-acoustique:hover::before, .selected-acoustique:hover::before, .next-acoustique:hover::before, .nextRightSecond-acoustique:hover::before, .nextRightThird-acoustique:hover::before, .hideRight-acoustique:hover::before {
  opacity:1;
}


.prev-acoustique:hover p, .prevLeftSecond-acoustique:hover p, .prevLeftThird-acoustique:hover p, .hideLeft-acoustique:hover p, .selected-acoustique:hover p, .next-acoustique:hover p, .nextRightSecond-acoustique:hover p, .nextRightThird-acoustique:hover p, .hideRight-acoustique:hover p {
  opacity:1;
  position: absolute;
  bottom: 10px;
  color: #fff;
  padding: 20px;
}


#carousel-acoustique div.hideLeft-acoustique {
  left: -30%;
  opacity: 0;
  max-width: 325px!important;
  height: 445px;
}

#carousel-acoustique div.prevLeftThird-acoustique {
  z-index: 4;
  left: -10%;
  max-width: 325px!important;
  transform: translateX(-50%);
  height: 445px;
  opacity: 0;
}

#carousel-acoustique div.prevLeftSecond-acoustique {
  z-index: 4;
  left: 8%;
  transform: translateX(-50%);
  max-width: 325px!important;
  height: 445px;
  opacity: 0.3;
}

#carousel-acoustique div.prev-acoustique {
  z-index: 5;
  left: 29%;
  transform: translateX(-50%);
  max-width: 325px!important;
  height: 445px;
}

#carousel-acoustique div.selected-acoustique {
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  max-width: 325px!important;
  height: 445px;
}
#carousel-acoustique div.next-acoustique {
  z-index: 5;
  left: 71%;
  transform: translateX(-50%);
  max-width: 325px!important;
  height: 445px;
}

#carousel-acoustique div.nextRightSecond-acoustique {
  z-index: 4;
  left: 92%;
  opacity: 0.3;
  max-width: 325px!important;
  transform: translateX(-50%);
  height: 445px;
}

#carousel-acoustique div.nextRightThird-acoustique {
  z-index: 4;
  left: 110%;
  opacity: 0;
  max-width: 325px!important;
  transform: translateX(-50%);
}

#carousel-acoustique div.hideRight-acoustique {
  left: 130%;
  opacity: 0;
  max-width: 325px!important;
  height: 445px;
}

#carousel-acoustique .hideLeft-acoustique a,
#carousel-acoustique .prevLeftThird-acoustique a,
#carousel-acoustique .prevLeftSecond-acoustique a,
#carousel-acoustique .prev-acoustique a,
#carousel-acoustique .selected-acoustique a,
#carousel-acoustique .next-acoustique a,
#carousel-acoustique .nextRightSecond-acoustique a,
#carousel-acoustique .nextRightThird-acoustique a,
#carousel-acoustique .hideRight-acoustique a {
  opacity: 1;
  height: 445px !important;
  display: block;
  /* position: sticky; */
  position: static;
}

/*****************mobile  carousel box acoustique*****************************/
@media screen and (max-width: 650px) {

  #carousel-acoustique div.hideLeft-acoustique, #carousel-acoustique div.prevLeftSecond-acoustique, #carousel-acoustique div.prevLeftThird-acoustique, #carousel-acoustique div.prev-acoustique, #carousel-acoustique div.next-acoustique, #carousel-acoustique div.nextRightSecond-acoustique, #carousel-acoustique div.nextRightThird-acoustique, #carousel-acoustique div.hideRight-acoustique {
    opacity: 0;
  }

  #carousel-acoustique div.prev-acoustique {
  left: 0%;
}

#carousel-acoustique div.next-acoustique {
  left: 100%;
}
}

@media screen and (min-width: 651px) and (max-width: 900px) {

  #carousel-acoustique div.prev-acoustique {
  left: 0;
  opacity: 0.3;
}

#carousel-acoustique div.next-acoustique {
  left: 100%;
  opacity: 0.3;
}

#carousel-acoustique div.hideLeft-acoustique, #carousel-acoustique div.prevLeftSecond-acoustique, #carousel-acoustique div.prevLeftThird-acoustique {
  opacity: 0;
  left: -50%;
}

#carousel-acoustique div.nextRightSecond-acoustique, #carousel-acoustique div.nextRightThird-acoustique, #carousel-acoustique div.hideRight-acoustique {
  opacity: 0;
  left: 150%;
}

}

@media screen and (min-width: 901px) and (max-width: 1100px) {

  #carousel-acoustique div.prev-acoustique {
  left: 0%;
  opacity: 0.3;
  transform: translateX(-50%);
}

#carousel-acoustique div.next-acoustique {
  left: 100%;
  opacity: 0.3;
  transform: translateX(-50%);
}
#carousel-acoustique div.hideLeft-acoustique, #carousel-acoustique div.prevLeftSecond-acoustique, #carousel-acoustique div.prevLeftThird-acoustique {
  opacity: 0;
  left: -50%;
}

#carousel-acoustique div.nextRightSecond-acoustique, #carousel-acoustique div.nextRightThird-acoustique, #carousel-acoustique div.hideRight-acoustique {
  opacity: 0;
  left: 150%;
}

}

@media screen and (min-width: 1101px) and (max-width: 1450px) {

  #carousel-acoustique div.prev-acoustique {
  left: 17%;
  opacity: 1;
  transform: translateX(-50%);
}

#carousel-acoustique div.next-acoustique {
  opacity: 1;
  left: 83%;
  transform: translateX(-50%);
}

#carousel-acoustique div.hideLeft-acoustique, #carousel-acoustique div.prevLeftSecond-acoustique, #carousel-acoustique div.prevLeftThird-acoustique {
  opacity: 0;
  left: -20%;
}

#carousel-acoustique div.nextRightSecond-acoustique, #carousel-acoustique div.nextRightThird-acoustique, #carousel-acoustique div.hideRight-acoustique {
  opacity: 0;
  left: 120%;
}

}

@media screen and (min-width: 1451px) and (max-width: 1650px) {

  #carousel-acoustique div.prevLeftSecond-acoustique {
    opacity: 0.3;
    left: 0%;
    transform: translateX(-50%);
  }
  
  #carousel-acoustique div.nextRightSecond-acoustique {
    opacity: 0.3;
    left: 100%;
    transform: translateX(-50%);
  }

  #carousel-acoustique div.prev-acoustique {
  left: 25%;
  transform: translateX(-50%);
}

#carousel-acoustique div.next-acoustique {
  left: 75%;
  transform: translateX(-50%);
}

#carousel-acoustique div.hideLeft-acoustique, #carousel-acoustique div.prevLeftThird-acoustique {
  opacity: 0;
  left: -40%;
}

#carousel-acoustique div.nextRightThird-acoustique, #carousel-acoustique div.hideRight-acoustique {
  opacity: 0;
  left: 140%;
}
}
/***********flèches carousel box acoustique*****************************/
.buttons-acoustique {
  position: absolute;
  top: 60%;
  width: 100%;
  /*transform: translateX(-50%);
  bottom: 10px;
  margin-top: 10px;*/
  z-index: 15;
}

.buttons-acoustique button {
  background-color: #f0f0f0; /* Couleur de fond des boutons */
  border: none; /* Supprimer les bordures */
  padding: 10px 20px; /* Ajout de rembourrage */
  font-size: 18px; /* Taille de la police */
  cursor: pointer; /* Changer le curseur en pointeur */
  border-radius: 50%;
  z-index: 15;
}

.buttons-acoustique button:hover {
  background-color: #e0e0e0; /* Couleur lors du survol */
}


#prev-acoustique {
  position: absolute; /* Position absolue */
  left: 5px; /* Position sur le côté gauche */
  z-index: 10; /* Pour être au-dessus du contenu du carrousel */
}

#next-acoustique {
  position: absolute; /* Position absolue */
  right: 5px; /* Position sur le côté droit */
  z-index: 10; /* Pour être au-dessus du contenu du carrousel */
}


/*****************fin carousel box acoustique*****************************/




      /***************ACCUEIL RANGEMENTS*****************************/
    

        .h2-rangement {
            font-weight: 900; 
            font-size:2.5rem;
        }

        .h2-rangement span {
            font-size:1.8rem; 
            font-weight: 400;
        }
        strong.p-rangement {
            color: #fff !important;
            padding: 0;
        }

        .p-rangement {
               padding: 3rem;
            }

            @media (max-width: 991.98px) { 

                .h2-rangement {
            font-weight: 900; 
            font-size:2rem;
        }

        .h2-rangement span {
            font-size:1.2rem; 
            font-weight: 400;
        }
                .p-rangement {
                padding-top: 2rem;
                padding-bottom: 2rem;
                padding-left: 0rem;
                padding-right: 0rem;
             }
 }
        @media (min-width: 992px) {
            .carousel-item-next,
            .carousel-item-prev,
            .slider-accueil-eshop.active {
                display: flex;
            }
            .carousel-item {
                height: 100vh; /* Full viewport height */
            }
            .carousel-item .col-xl-7,
            .carousel-item .col-lg-6 {
                height: 100%;
                padding: 0 !important;
                display: flex;
                align-items: center;
            }
            .carousel-item img {
                height: 100% !important;
                width: 100% !important;
                object-fit: cover;
            }
            
        }
        
        @media (min-width: 1300px) {
            .img-slider-accueil-eshop-perso-2 {
                max-width: 60% !important;
                height: auto;
            }
        
            .txt-slider-accueil-eshop-perso-2 {
                position: absolute;
                width: 50%;
            }
        }
    /***************FIN ACCUEIL RANGEMENTS*****************************/


    /*************************carousel sieges************************/

    .carousel-sieges {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%; /* Assurez-vous que la hauteur de la div est spécifiée */
      position:relative
    }

    .intro-siege {
      display: none;
    }

    .liens-sieges button {
      display: none;
    }

    #description-sieges {
      text-align: right;
      max-width: 300px;
      margin-left: auto;
    }

    #image-sieges img {
      max-width: 400px!important;
      max-height: 400px!important;
    }

    #carousel-sieges .hideLeft-sieges, 
    #carousel-sieges .prevLeftThird-sieges, 
    #carousel-sieges .prevLeftSecond-sieges, 
    #carousel-sieges .prev-sieges, 
    #carousel-sieges .selected-sieges, 
    #carousel-sieges .next-sieges, 
    #carousel-sieges .nextRightSecond-sieges, 
    #carousel-sieges .nextRightThird-sieges, 
    #carousel-sieges .hideRight-sieges {
      position: absolute;
      transition: transform 1s, left 1s, opacity 1s, z-index 0s;
      opacity: 1;
      text-align: center; /* Centrage du texte */
    }
    
    
    #carousel-sieges {
      position: relative;
      height: 225px;
      overflow: hidden;
    }
    
    #carousel-sieges h3 {
      margin: 0.5rem 0rem;
      display: none;
    }

    .gamme-siege {
      font-size: 1.4rem; 
      font-weight: 700;
      margin-bottom: 0;
   }

    .desc-gamme-siege {
      color: #A4917A; 
      font-weight: 600; 
      font-size: 1.8rem;
    }
    
    #carousel-sieges p {
      margin: 0.5rem 0rem;
      font-size: 0.8rem;
      opacity: 1;
    }
    
    #carousel-sieges p.p-sieges{
      display: none;
    }

    #carousel-sieges div {
      position: absolute;
      /*transition: transform 1s, left 1s, opacity 1s, z-index 0s;*/
      opacity: 1;
    }
    #carousel-sieges div img {
      width: 200px !important;
      max-width: 200px !important;
      /*transition: width 1s;*/
      background-color: #f9f8f7;
      border-radius: 20px;
    }
    .selected-sieges h3 {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 600;
    }
    
    .h-sieges {
      position: absolute;
      opacity: 1!important;
      bottom: 10px;
      z-index: 1;
      font-size: 1.5rem !important;
      color: #fff;
      text-shadow: 1px 1px 10px black;
      font-weight: 600;
    }
    
    strong.p-sieges{
    color: #000;
    }
    .prev-sieges h3, .prevLeftThird-sieges h3, .prevLeftSecond-sieges h3, .hideLeft-sieges h3, .selected-sieges h3, .next-sieges h3, .nextRightSecond-sieges h3, .nextRightThird-sieges h3, .hideRight-sieges h3 {
      display: none;
    }
    
    .p-sieges p {
      display: none;
    }
   
    #carousel-sieges div.hideLeft-sieges {
      left: -20%;
      transform: translateX(-5%);
      max-width: 200px!important;
      height: 200px;
      opacity: 0;
    }

    #carousel-sieges div.prevLeftThird-sieges {
      left: 5%;
      transform: translateX(-5%);
      max-width: 200px!important;
      height: 200px;
    }
    
    #carousel-sieges div.hideLeftTotal-sieges {
      left: -25%;
      max-width: 200px!important;
      height: 200px;
    }

    #carousel-sieges div.nextRightThird-sieges {
      left: 95%;
      transform: translateX(-95%);
      max-width: 200px!important;
      height: 200px;
    }
    
    #carousel-sieges div.hideRight-sieges {
      left: 110%;
      transform: translateX(-110%);
      max-width: 200px!important;
      height: 200px;
    }
    
    
    #carousel-sieges div.prev-sieges {
      z-index: 5;
      left: 35%;
      transform: translateX(-35%);
      max-width: 200px!important;
      height: 200px;
    }
    
    
    #carousel-sieges div.prevLeftSecond-sieges {
      z-index: 4;
      left: 20%;
      transform: translateX(-20%);
      max-width: 200px!important;
      height: 200px;
    }
    
    
    #carousel-sieges div.selected-sieges {
      z-index: 10;
      left: 50%;
      transform: translateX(-50%);
      max-width: 200px!important;
      height: 200px;
    }
    #carousel-sieges div.next-sieges {
      z-index: 5;
      left: 65%;
      transform: translateX(-65%);
      max-width: 200px!important;
      height: 200px;
    }
    
    #carousel-sieges div.nextRightSecond-sieges {
      z-index: 4;
      left: 80%;
      transform: translateX(-80%);
      max-width: 200px!important;
      height: 200px;
    }
    
    /***********flèches carousel sieges*****************************/
    .buttons-sieges {
      position: absolute;
      bottom: 65%;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 100%;
      z-index: 5;
    }
    
    .buttons-sieges button {
      background-color: #f0f0f0; /* Couleur de fond des boutons */
      border: none; /* Supprimer les bordures */
      padding: 10px 20px; /* Ajout de rembourrage */
      font-size: 18px; /* Taille de la police */
      cursor: pointer; /* Changer le curseur en pointeur */
      border-radius: 50%;
      z-index: 15;
    }
    
    .buttons-sieges button:hover {
      background-color: #e0e0e0; /* Couleur lors du survol */
    }
    
    
    .prev-seats {
      position: absolute; /* Position absolue */
      left: 5px; /* Position sur le côté gauche */
      z-index: 10; /* Pour être au-dessus du contenu du carrousel */
    }
    
    .next-seats {
      position: absolute; /* Position absolue */
      right: 5px; /* Position sur le côté droit */
      z-index: 10; /* Pour être au-dessus du contenu du carrousel */
    }
    
    @media screen and (min-width: 1301px) and (max-width: 1600px) {

      #carousel-sieges div.hideLeft-sieges {
        left: -20%;
        transform: translateX(-20%);
        opacity: 0;
    }

    #carousel-sieges div.prevLeftThird-sieges {
      left: 5%;
      transform: translateX(-5%);
    }
    
    #carousel-sieges div.prevLeftSecond-sieges {
      left: 25%;
      transform: translateX(-25%);
    }

    #carousel-sieges div.prev-sieges {
      left: 45%;
      transform: translateX(-45%);
    }

    #carousel-sieges div.selected-sieges {
      left: 65%;
      transform: translateX(-65%);
    }

    #carousel-sieges div.next-sieges {
      left: 85%;
      transform: translateX(-85%);
    }

    #carousel-sieges div.nextRightSecond-sieges {
      left: 105%;
      transform: translateX(-105%);
  }

  #carousel-sieges div.nextRightThird-sieges {
    left: 125%;
    transform: translateX(-125%);
    opacity: 0;
}

#carousel-sieges div.hideRight-sieges {
  left: 145%;
  transform: translateX(-145%);
  opacity: 0;
}
}

@media screen and (min-width: 1001px) and (max-width: 1300px) {

  #description-sieges {
    text-align: right;
    max-width: 300px;
    margin-left: auto;
    /* margin-right: 25px; */
    padding-right: 0 !important;
  }

#image-sieges {
    position: relative;
    padding: 0;
   }

  #intro-siege {
    padding-left: 0 !important;
    left: -50px;
  }

  #carousel-sieges div.hideLeft-sieges {
    left: -20%;
    transform: translateX(-20%);
    opacity: 0;
}

#carousel-sieges div.prevLeftThird-sieges {
  left: 5%;
  transform: translateX(-5%);
}

#carousel-sieges div.prevLeftSecond-sieges {
  left: 35%;
  transform: translateX(-35%);
}

#carousel-sieges div.prev-sieges {
  left: 65%;
  transform: translateX(-65%);
}

#carousel-sieges div.selected-sieges {
  left: 95%;
  transform: translateX(-95%);
}

#carousel-sieges div.next-sieges {
  left: 125%;
  transform: translateX(-125%);
  opacity: 0.3;
}

#carousel-sieges div.nextRightSecond-sieges {
  left: 135%;
  transform: translateX(-135%);
  opacity: 0;
}

#carousel-sieges div.nextRightThird-sieges {
left: 165%;
transform: translateX(-165%);
opacity: 0;
}

#carousel-sieges div.hideRight-sieges {
left: 195%;
transform: translateX(-195%);
opacity: 0;
}
}

@media screen and (min-width: 701px) and (max-width: 1000px) {

  #intro-siege {
    padding-left: 0!important;
    left: 0;
  }

#carousel-sieges div.hideLeft-sieges, #carousel-sieges div.prevLeftThird-sieges {
  left: -45%;
  transform: translateX(-45%);
  opacity: 0;
}

#carousel-sieges div.prevLeftSecond-sieges {
  left: -25%;
  transform: translateX(-25%);
  opacity: 0.3;
}

#carousel-sieges div.prev-sieges {
  left: 5%;
  transform: translateX(-5%);
}


#carousel-sieges div.next-sieges {
  left: 95%;
  transform: translateX(-95%);
}

#carousel-sieges div.nextRightSecond-sieges {
  left: 140%;
  transform: translateX(-140%);
  opacity: 0.3;
}

#carousel-sieges div.nextRightThird-sieges, #carousel-sieges div.hideRight-sieges {
left: 175%;
transform: translateX(-175%);
opacity: 0;
}
}

@media screen and (max-width: 768px) {

  #intro-siege {
    padding-left: 0!important;
    padding-bottom: 0 !important;
    left: 0;
  }

  #image-sieges img {
    max-width: 350px !important;
    max-height: 350px !important;
  }
  #description-sieges {
    text-align: center;
    max-width: none;
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

@media screen and (max-width: 700px) {


#carousel-sieges div.hideLeft-sieges, #carousel-sieges div.prevLeftThird-sieges, #carousel-sieges div.prevLeftSecond-sieges  {
  left: -45%;
  transform: translateX(-45%);
  opacity: 0;
}

#carousel-sieges div.prev-sieges {
  left: -5%;
  transform: translateX(-5%);
  opacity: 0.3;
}

#carousel-sieges div.next-sieges {
  left: 110%;
  transform: translateX(-110%);
  opacity: 0.3;
}

#carousel-sieges div.nextRightSecond-sieges, #carousel-sieges div.nextRightThird-sieges, #carousel-sieges div.hideRight-sieges {
  left: 140%;
  transform: translateX(-140%);
  opacity: 0;
}

}
    /*****************fin carousel box acoustique*****************************/