.tableProduit {
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  padding: 0px;
  margin: 0px;
  border-spacing: 0;
}

.sup_tableProduit {
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  padding: 10px;
  height: 100%;
}

.sup_tableProduit .tableProduit {
  border-radius: 0px;
  box-shadow: none;
}

.side {
  position: absolute;
  top: 13px;
  left: -10px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  opacity: .25;
}


#Fiche{
  background: #2A3E54;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgb(0 0 0 / 25%);
  display: flex;
  flex-direction: row;
  align-items: center;
  GAP: 10px;
}

.option_table table{
  width: 100%;
}

.option_table table div{
  padding: 20px;
}

.option_table tr{
  border-radius: 10px;
  Box-shadow: 0px 5px 10px rgb(0 0 0 / 25%);
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  flex-direction: row;
  align-items: center;
} */

.h4{
  padding: 10px;
  text-align: center;
  width: 100%;
  border-right: 1px solid #2F4D89;
}


.tableProduit th{
  border-radius: 10px;
  background: linear-gradient(120deg,#395EA7,#243C6A);
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;

}

tr .tdProduit:last-child{
  border-right: none;
}

.tdProduit {
  text-align: center;
  padding: 2px;
  width: 50%;
  border-right: 1px solid #ccc;
}

.imagePDFProduit{
    width:25px;
    vertical-align:middle;
}


.lienFicheTechniqueProduit h2{
    color : black;
    text-decoration: none;
    border-bottom: solid 1px #2F4D89;
    padding: 15px;
    margin: 2% 0px 0% 0px;
}

.lienFicheTechniqueProduit:hover{
    color : black;
}



.itemEnteteProduit {
  margin-bottom : 20px;
    text-align: center;
    vertical-align: middle;
}

.titreProduitFinal{
  margin-bottom: 10px;
  background: linear-gradient(120deg,#395EA7,#243C6A);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4rem;
}

.sous_titreProduit{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: solid 3px #2F4D89;
}

.containerCorpsProduit{
    margin: 150px 18% 0 18%;
    position: relative;
}

@media screen and (max-width: 1440px) {
  .containerCorpsProduit{
    margin: 150px 12% 0 12%;
  }
}

@media screen and (max-width: 1024px) {
  .containerCorpsProduit{
    margin: 125px 10% 0 10%;
  }
}

@media screen and (max-width: 800px) {
  .containerCorpsProduit{
    margin: 125px 5% 0 5%;
  }
}

.flex_sous{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 2.5%;
  gap: 1vw;
}

.flex_sous button{
  background: #2A3E54;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: 20px;
  align-items: center;
  cursor: pointer;
}

.imageProduitFinal {
    width : 250px;
}

.itemCorpsProduit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.itemCorpsProduit1 {
  width: 50%;
}

.itemCorpsProduitCaracteristique{
    text-align: center;
    vertical-align: middle;
}

.all_table_produit{
  display: flex;
}

.all_table_produit table{
  width: 100%;
}

.all_table_produit .div_table_1 table:first-child{
  height: 100%;
}

.all_table_produit .div_table_1{
  margin-right: 5%;
 
}

.all_table_produit h4{
  border-radius: 5px;
  background: #2A3E54;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}


.all_table_produit div {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: space-between;
}

.swiper {
  padding: 10px ;
  overflow: hidden;
  width: 50%;
  height: 100%;
  margin: 0px 0px 0px 5%;
  position: relative;
  z-index: 0;
}

.columnProduit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 5%;
  flex-direction: row;
  row-gap: 5VW;
  align-items: stretch;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
}


/* Caroussel image */
    .reglageTaille {
      display: block;
      width: 80%;
      max-width: 20rem;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
      box-shadow: 0px 5px 10px rgb(0 0 0 / 25%);
    }

    /* Next & previous buttons */
    .swiper-button-prev, .swiper-button-next {
      cursor: pointer;
      position: absolute;
      transition: 0.6s ease;
      border-radius: 3px 0 0 3px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      background: none;
    }

    .swiper-pagination{
      position: static;
    }

    .swiper-pagination span{
      padding: 5px;
      margin: 10px;
    }
    

    /* Position the "next button" to the right */
    .swiper-button-next {
      right: 0;
    }

    .swiper-button-prev {
      left: 0;
    }


    /* Caption text */
    .text {
      color: #f2f2f2;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      /* width: 100%; */
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: black;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 10px;
      width: 10px;
      margin: 0 2px;
      background-color: #9f9f9f;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #000f75;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }


    @media (max-width:1024px) {

      .itemCorpsProduit{
        flex-direction: column;
      }
      .itemCorpsProduit1 {
        width: 100%;
      }
      .swiper{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
    
      .all_table_produit{
        flex-direction: column;
      }

      .all_table_produit .div_table_1{
        margin-right: 0;
        margin-bottom: 5%;
      }
    }

    @media (max-width:800px) {
      .side {
        position: absolute;
        top: -20px;
        left: 6px;
        transform-origin: 0 0;
        transform: rotate(0deg);
        opacity: .25;
      }
      .titreProduitFinal{
        font-size: 3rem;
      }
    }