/* * {
  box-sizing: border-box;
  font-family: -apple-system, ubuntu, cantarell, "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */
/* html {
  height: 100%;
} */

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root{
  --card-height:65vh;
  --card-width: calc(var(--card-height)/1.5);
}
body {
  /* 28/02/2025 */
  margin: 0;
  /* padding: 20px; */
  /* display: flex; */
  /* flex-direction: row; */
  /* align-items: center; */
  /* 28/02/2025 */

  position: relative;
  min-height: 100%;
  color: #555555;
  background-color: #FFF;
  /* margin: 3px; */
  padding-bottom: 100px; /* Same height as footer */
  /* padding:1px; */
  overflow: auto;
/* bckbleudesk */
  background-image: url('../images/bckbleudesk.webp');
  background-size: cover;
  background-position: center center;
  background-color: hsl(0, 0%, 94%); /* Light gray background color */
  /* overflow: auto; */
}
/* Styles pour les écrans mobiles */
@media (max-width: 768px) {
  body {
    margin: 0;
    /* padding: 20px; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
    /* 28/02/2025 */
  
    position: relative;
    min-height: 100%;
    color: #555555;
    background-color: #FFF;
    /* margin: 3px; */
    padding-bottom: 100px; /* Same height as footer */
    /* padding:1px; */
    overflow: auto;
  
    background-image: url('../images/backbleumb.webp');
    background-size: cover;
    background-position: top center;
    background-color: hsl(0, 0%, 94%);
  }
}

.navigation-logo-hide {
  transform: translateY(0);
  opacity: 0.5;
  /* visibility: hidden; */
  width: 20%;


}
.bodymain{
  /* font-family: Arial, Helvetica, sans-serif; */

  font-family: Arial, sans-serif;

  /* background-color: #FFF; */
  background-color: #eee;
  /* background-color: #f4f4f4; */

  /* width: 100%; */
  /* max-width: 100%; */
  /* margin: 3px; */
  
  margin: 0px;
  width: 100%;
  max-width: 100%;

  padding: 0;
  /* min-height: 100vh; */

  
}

@media (max-width: 767px) {

  .bodymain{
    margin-top: 160px;
    /* margin-top: 175px; */
    /* margin-top: 375.2px; */
    
  }
}


.header-container{
  position: sticky;
  top: -1px;
  background: #f1f1f1;
  /* width: auto; */
  width: 100%;
  /* margin: 10px; */

  
  
  /* min-height: 200px; */
  /* max-width: 500px;  */
 /* height: 100vh; */
 

}

@media (max-width: 767px) {

  .header-container{
    position: fixed;
  }
}

.h-container-filter{
  align-items: center;
  justify-content: space-between;
  background: #e5ca8e;
  display: flex;
  font-size: 12px;
  height: 50px;
  flex-wrap: wrap;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.08);
  position: sticky;
  
}





.account-container, .account-container * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.account-container {
    position: relative;
    padding: 50px 50px 50px 50px;
     min-height: 300px;
     /* max-width: 500px;  */
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5ca8e;

    
}
.right-container {
  /* z-index: 4; */
  /* right: 16.667%; */
  position: relative;
  background: #FFF;
  border-radius: 32px;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.08);
  /* top: 30%; */
  /* left: 50%;
  right: 50%; */
  /* transform: translateY(-50%); */
  padding: 10px; 
  /* width: 50%; */
  /* min-width: 488px; */
  margin: 10 auto;
}
.biggold {
  color: rgb(176, 120, 1);
  font-size: 2rem;
  line-height: 17px;
  /* font-weight: 300; */
  font-family: "Lucida Grande", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  white-space: nowrap;
  padding: 4px 0;
  padding: 5px 10px 4px;
  min-height: 30px;
}


.label-text {
  /* background: #FFF; */
  color: #e2a92f;
  /* display: block; */
  text-align: center;
  font-size: 1.5rem;
  width: auto;
  overflow: hidden; /* Empêche le débordement */
  /* position: relative; */
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: row;
  flex-wrap: wrap;
  padding: 3px;
}
.label-text-green {
  /* background: #FFF; */
  color: #7dce72;
  display: block;
  text-align: center;
  
  
}
.label-text-promo {
  /* background: #FFF; */
  color: #f81808;
  display: block;
  text-align: center;
  margin-bottom:3px ;
  /* font-weight:400; */
  
  
}
.discount-text{
  font-size: 0.7em;
  font-weight: bold;
  color: #ff0000; /* Couleur de la réduction */
  /* animation: blink 1s step-end infinite; */
  /* animation: blink 1.2s ease-in-out infinite; */
  overflow: hidden;
  /* position: relative; */
  text-overflow: ellipsis;
   
  white-space: nowrap;      /* une seule ligne */
  max-width: 100%;          /* ne dépasse pas */
  display: block;

}
@keyframes blink {
  20% {
    opacity: 0.5; /* Pleinement visible */
  }
  50% {
    opacity: 0.5; /* Semi-transparente */
  }
  100% {
    opacity: 1; /* Retour completement visible */
  }
}

.pricing {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  font-family: Arial, sans-serif;
  justify-content: center;
}

.old-price {
  text-decoration: line-through;
  color: #888;
  font-size: 0.8em;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transform: rotate(-20deg); */
  /* position: relative; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%) rotate(-20deg); */
   /* Centered */
  /* transform: rotate(-20deg); */
   /* Angle oblique */
  width: 50%;
}

.new-price {
  font-size: 1em;
  font-weight: bold;
  color: #ff0000; /* Nouveau prix en rouge */
}

.no-discount {
  font-size: 1.2em;
  color: #999;
  font-style: italic;
}
@keyframes blink {
  50% {
    opacity: 0;
  } 
}

.label-icon {
  /* background: #FFF; */
  color: #3db461;
  display: block;
  
  
}
.input-text {
  background: #FFF;
  color: #353030;
  height: 48px;
  padding: 0 16px;
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: 0.3s;
  font-size: 16px;
}



/* #categoriesnav{display: flex;flex-direction: row;} */

@media only screen and (min-width: 800px){

  .h-container {
      align-items: center;
      display: flex;
      justify-content: space-between;
  }
  
}
.h-container {
    align-items: center;
    justify-content: space-between;
    background: #f1f1f1;
    display: flex;
    font-size: 12px;
    max-height: 16rem;
    /* flex-wrap: wrap; */
    flex-direction: row;
    /* padding: 0px 0px 16px 16px; */
    
}
.h-container-footer {
    align-items: center;
    justify-content: space-between;
    background: #eab308;
    display: flex;
    font-size: 12px;
    height: auto;
    flex-wrap: wrap;
    /* padding: 0px 0px 16px 16px; */
    
}

.navigation-cat-main-menu {
  display: flex;
  gap: 32px;
  /* place-content: center; */
  justify-content: space-between;
  padding-left: 3px;
  
}
.main-button{

  font-size: 1rem;
  position: relative;
  text-transform: uppercase;
  /* background-color: initial; */
  border: none;
  cursor: pointer;
  line-height: 1;
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;

}
.x-btn-mc {
  border-radius: 4px;
  border: 1px solid #717a82;
  background: #ffffff;
  color: #717a82;
  cursor: pointer;
  margin: 5px;
  text-transform: uppercase;
}
.nbrprds {
  border-radius: 4px;
  border: 1px solid #717a82;
  background: #ffffff;
  color: #717a82;
  cursor: pointer;
  margin: 5px;
  text-transform: uppercase;
  /* width: 30%; */

  line-height: 0.7rem;
}



.ajouter-button{
  /* position: relative; */
  text-transform: uppercase;
  border: 1px solid #a3abb2;
  background: #b2e6c0;
  color: #717a82;
  cursor: pointer;
  margin: 5px;
  padding: 5px; 
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  border-radius: 4px;
  line-height: 1rem;
  /* width: 50%; */



}
/* je pouvais minimiser le css par le inherit mais je prefer faire comme ca pour pas avoire des changements dans le display */
.ajouter-button-tbl{
  /* position: relative; */
  width:auto;
  border: 1px solid #a3abb2;
  background: #e6dcb9;
  color: #717a82;
  cursor: pointer;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  border-radius: 4px;
  line-height: 1rem;
}
.js-add-session-product{

  margin-left: 10px;
}

.h-pub-container{
 
    height: 70px;

    position: relative;
    top: 0;

    display: flex;
    /* background-color: black; */
    color: white;
    background-color: #0e77c2;

    left: 0;
    /* right: 0; */
    top: 0;
    /* z-index: 1; */
    align-items: center;
    height: 45px;
    padding: 0;
    /* color: white; */

    font-family: Helvetica, Arial, sans-serif;
    font-size: 36px;
  
  
}

.navigation-logo {
  width: 6rem;
  display: block;
  visibility: visible;
  transition: 1s all ease;
  transform: translateY(0px);
  opacity: 1;
  /* transition: visibility 0s, opacity 0.5s linear; */

}

.navigation-logo-show {
  /* transform: translateY(0);
  opacity: 1; */
  display: block;
  /* visibility: visible; */
}


.navigation-logo-remove{
  /*  */
  display: none;
}

.navigation-user-menu{
  display: flex;
  gap: 20px;
  height: 50px;
  padding: 3px;
  margin: 3px;

  
}
.navigation-user-menu-br{
  display: flex;
  flex-flow:column;
  gap: 20px;
  align-items: start;
  justify-content: start;
  margin: 5px;
}


li {
  display: inline;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #c4b8b8; */
}
.navigation-cat-main-menu {
  display: flex;
  gap: 20px;
  place-content: center;
}
.navigation-action {
  display: flex;
  gap: 0.05rem;
  align-items: center;
  /* justify-content: center; */
  padding: 0.5px;
}
.navigation-action-search {
  display: flex;
  flex-flow: row;
  gap: 1rem;
  align-items: flex-end;
  margin: 10px;

  position: sticky;
  top: 0; 
  z-index: 10000;
  color: white;
  background-color: #0e77c2; 
}
.navigation-sticky{
  position: sticky;
  top: 0; 
  /* z-index: 10000; */

}
.navigation-action-br {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
}
.navigation-action-search-br {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  align-items: flex-end;
  margin: 10px;
  position: sticky;
}


.searchtextinput{
  display: relative;
  /* padding: 0.375rem 0.75rem; */
  font-size: 1rem;
  font-weight: 12px;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  width: 200px;
}
.cardflexrowatextstart{
  text-align: start;
  /* padding: 1rem; */
}
.checkbox-wrapper label {
  display: block; /* Affiche le label en bloc (sur une nouvelle ligne) */
  margin: 5px; /* Espacement entre le label et la case à cocher */
  display: flex;
  flex-direction: column; /* Stack label and checkbox vertically */
  align-items: flex-start; /* Optional: Align to the left */
}
.cardflexrowastart{
  align-items: start;
}
.cardflexrow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:flex-start;
    width: 100%;
    flex-wrap: wrap;
    padding: 3px;
    overflow: visible;
    /* margin-left: 5px; */
  }
.cardflexrowfix{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:flex-start;
    width: 100%;
    flex-wrap: wrap;
    padding: 3px;
    overflow: hidden;
    /* margin-left: 5px; */
  }

.cardflexrowNouveaute{
  justify-content: center;
  align-items: center;
}



.cardflexspace{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  /* margin-left: 10px;
  margin-top: 10px;   */
  /* max-width: 1500px;   */
  flex-wrap: wrap;
  /* margin:3px; */
}

.cardflexrowcenter{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* margin-left: 10px;
  margin-top: 10px;     */
  margin:3px;
  width: 100%;
  flex-wrap: wrap;
  
  }
.cardflexcol{
  display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin:10px;  */
    width: 97%;
    /* margin-bottom:3px; */
    
  }
  .cardflexcolNouveaute{
    
    width:95%;
    /* background-color: red;
    background-image: linear-gradient(90deg, #DD466E, #fccb6d);
    box-shadow: 0 0 50px rgba(245, 48, 13, 0.25); */
    background-color: rgb(0, 0, 255);
    background-image: linear-gradient(90deg, #92ed6e, #1202bd);
    box-shadow: 0 0 50px rgba(226, 156, 5, 0.25);
    border-radius: 20px;
  }

    
    
@media only screen and (max-width: 400px) {
    .cardflexrow {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .logo-l-o {width: 6rem; align-items: center;font-size: 1rem;height:auto; display: none; }

     
  }
    .cardbody .cardimg{
    border-radius: 4px;
    width: 100%;
    height: 70%;
    object-fit: contain;
    /* max-width: 2rem; */
    max-height: 15rem;

  }
    .cardimg{
    border-radius: 4px;
    width: 100%;
    height: 50%;
    object-fit: contain;
    /* max-width: 2rem; */
    max-height: 15rem;

  }
    .cardimglogo{
    border-radius: 4px;
    width: 100%;
    height: auto;
    object-fit:contain;
    /* max-width: 2rem; */
    max-height: 15rem;

  }
  .trcentre{
    justify-content: center;
    align-items: center;

  }
  .theadcss{
    background-color: white;
  }
  /* td{
    padding: 10px;
    text-align: center;
  } */
  table, th, td
  {    text-align: center;
    background-color: white;

    /* border: 0.5px solid rgb(144, 183, 211); */
    overflow-x:auto;
    margin: 10px;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse; /* Remove extra spacing between cells */

    border-right: 1px solid #ccc;
    padding: 10px; /* Add some padding for better readability */
    /* width: 1px; */
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
}

  div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
  }
  /* <div class="absolute">This div element has position: absolute;</div> */

  /* For mobile phones: add css for all col- classes  */
[class*="col-"] {
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    /* display: flex; */
    max-height: auto;

    margin: 3px 3px 3px 0;
    

    
    
    

  }



[class*="col-tbl"] {
    width: 20%;
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    /* display: flex; */
    max-height: 4rem;
    
    

  }
  /* .col-1-card-info {width:50%;font-size: 1rem;height:auto} */

/*    */
  @media only screen and (min-width: 401px) {
    
    /* For tablets: */
    /* .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;} */
    .logo-l-o {width: 33.33%; align-items: center;font-size: 1rem;height:auto}
    .col-s-5 {width: 48.00%; align-items: center;font-size: 1rem;height:17rem}
    /* cas precis pour la card panier */
    .col-s-5-card-panier {width: 48.00%; align-items: center;font-size: 1rem}
    .col-tbl-6{width: 20.00%;}
    .col-prd-6{width: 100.00%;}
    /* .col-s--6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;} */
    .col-1-card-info {width:100%;font-size: 1rem;height:auto}


  }
  
  @media only screen and (min-width: 700px) {
    /* For tablets: */
    /* .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;} */
    .col-sg-5 {width: 24.00%; align-items: center;font-size: 1rem;height:17rem}
    .col-tbl-5{width: 20.00%}
    .col-prd-5{width: 100.00%;}

    /* .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;} */
    .col-1-card-info {width:40%;font-size: 1rem;height:auto}
    
  }
  @media only screen and (min-width: 701px) {
    /* For tablets: */
    .col-prd-5{width: 48.00%;}
    .col-1-card-info {width:30%;font-size: 1rem;height:auto}

  }
   

  @media only screen and (min-width: 940px) {
    /* For tablets: */
    /* .col-mg-1 {width: 8.33%;}
    .col-mg-2 {width: 16.66%;} */
    .col-mg-3 {width: 17%;font-size: 1rem;height:15.5rem}
    .col-tbl-3{width: 20%}
    .col-prd-3{width: 48.00%;}
    /* .col-mg-4 {width: 33.33%;}
    .col-mg-5 {width: 41.66%;}
    .col-mg-6 {width: 50%;}
    .col-mg-7 {width: 58.33%;}
    .col-mg-8 {width: 66.66%;}
    .col-mg-9 {width: 75%;}
    .col-mg-10 {width: 83.33%;}
    .col-mg-11 {width: 91.66%;}
    .col-mg-12 {width: 100%;} */
    .col-1-card-info {width:48%;font-size: 1rem;height:auto}
    
  }
  /* 890 */

  @media only screen and (min-width: 1047px) {
    /* For desktop: */
    /* .col-1 {width: 8.33%;} */

.col-2 {width:16%;font-size: 1rem;height:17rem}

.col-tbl-2 {width:20%}
.col-prd-2{width: 48.00%;}
    /* .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;} */
.col-1-card-info {width:33%;font-size: 1rem;height:auto}
  
  }



  .carde{
    /* background-color: beige; */
    background-color: beige;
    /* width: var(--card-width);
    height: var(--card-height); */
    /* width:auto; */
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 10px;  
    padding-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    /* width:var(--card-width);
    height:var(--card-height); */
    /* display: block; */
    
    /* color: rgb(88 199 250 / 100%); */
    /* position: relative;   */
  }
  .languages{
    align-content: right;
    flex-flow: column;
    text-align: right;

    height: 20px;
  }
  .lang-menu{
    text-align: right;
  }
  .cardbeautify{
    
    background-color: rgb(0, 0, 0);
    width:auto;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 10px;  
    padding-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 0 0 25px rgba(17, 230, 35, 0.25);
    }
  .cardaddress{
    background-color: rgb(16, 167, 226);
    width:auto;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 10px;  
    padding-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 0 0 25px rgba(23, 232, 41, 0.25);
    }
.variant-form{
  margin: 5px;
  background-color: #f1f1f1;
  border-radius: 6px;
  width:auto;
  height: 100%;
  padding: 3px;
  min-width: 10rem; 
  overflow: hidden;
  /* display: block; */
  border-radius: 10px 10px 10px 10px;
  /* box-shadow: 0 0 25px rgba(240, 70, 3, 0.25); */
  box-shadow: 0 0 25px rgba(26, 9, 177, 0.25); 
  
}
.cards{
  /* padding: 20px; */
  margin-bottom: 20px;
  text-align: center;
  width:100%;
  /* max-width:1800px; */
  
  margin: 5px;
  background-color: #f1f1f1;
  /* background-color: #021066; */
  border-radius: 6px;
  width:auto;
  height: 100%;
  padding: 3px;
  min-width: 10rem; 
  overflow: hidden;
  /* display: block; */
  border-radius: 10px 10px 10px 10px;
  /* box-shadow: 0 0 25px rgba(240, 70, 3, 0.25); */
  box-shadow: 0 0 25px rgba(26, 9, 177, 0.25); 
  
  /* box-shadow: 0 0 25px rgb(211, 211, 31); */
  overflow: hidden;   /* Empêche les enfants de dépasser */


  }
   .cardlogo:hover{
    background-color:rgb(88 199 250 / 100%);
    transition: color 1s;

    transform: scale(1.03);

  }
  .cardlogo:hover.before,.cardlogo:hover.after{
    animation:none;
    opacity:0 ;
  }
  .cardlogo::before{
    content: "";
    border-radius: 8px;
    width: 104%;
    height: 102%;
    background-image: linear-gradient(
      var(--rotate)
      ,#5ddcff,#3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
    }
  .cardlogo::after{
    transform:scale(0.8);
    top: calc(var(--card-height/6));
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transform: scale(0.8);
    filter: blur(calc(var(--card-height)/6));
    background-image: linear-gradient(
      var(--rotate)
      ,#5ddcff,#3c67e3 43%, #373141);
    opacity: 1;
    transition: opactiy .5s;
    animation: spin 2.5s linear infinite;
 
  }
  @keyframes spin {
    0%{
      --rotate:0deg;
    }
    100%{
      --rotate:360deg;
    }
  } 


.cards .cardbody{
  /* background-color: #e2cea5; */
  background-color: #f1f1f1;
  border-radius: 4px;
  width:auto;
  height: 70%;
  box-shadow: 0 0 25px rgb(58, 198, 245);

  
  /* padding-left: 10px;
  padding-right: 10px; */
  /* padding-top: 10px;  
  padding-bottom: 10px; */
  
  margin: 3px;
  /* font-size: 14px; */
  /* /* max-width: 15rem; */
  /* min-height: 10rem; */
  /* max-height: 15rem; */
  overflow: hidden;
  display: block;


} 

 a {
  color: #ff6201;
  text-decoration: none;
  /* margin-bottom: 5px; */
  /* padding: 5px; */

}
form{
  margin: 1px;
}
.form_inline{
  display: flex;
  text-align: center;
  column-gap: 2px;
  /* height: 500px; */
  overflow: visible;
}

.cardtitle{
    text-align: center;
    color: rgb(14, 13, 13);
    overflow: hidden;
    text-decoration: underline;
}
.prodtitle{
    text-align: center;
    color: rgb(14, 13, 13);
    overflow: hidden;
    text-decoration: underline;
}
.carddescription{
    
    text-align: left;
    color: rgb(48, 44, 44);
    overflow: hidden;
    font-size: small;

    
    
    

}
.cardtext{
    /* color: blue; */
    align-items: center;
    justify-content: center;
    
    /* margin-left: 10px; */
    margin-top: 10px;
    

}
.cardtextlang{    
    /* margin-left: 10px; */
    margin: 3px;
    color: rgb(48, 44, 44);
    overflow: hidden;
    font-size: small;

}
.cardfooter{
  color: rgb(5, 5, 5);
  align-items: center;
  justify-content: start;
  margin: 3px;
  padding: 0px;
   height: 27%; 
  /* box-shadow: 0 0 25px rgb(58, 198, 245); */

/*   
  margin-left: 10px;
  margin-top: 10px; */
}

h1,h2,h3,p,label{
    margin-left: 10px;
    margin-top: 10px;
    /* color: rgb(247, 212, 12); */
    color: #fe7600;

}
.js-add-session-module{

    margin-left: 10px;
}


/* Sidenav menu */
.sidenav {
  height: 80%;
  max-height: 80%;
  width: 250px;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: -250px;
  background-color: #f1f1f1;
  overflow: auto;
  overflow-y: auto;
  padding-top: 60px;
  transition: left 0.5s ease;
}

/* Sidenav menu links */
 #openBtn {
  padding: 1px 1px 1px 1px;
  text-decoration: none;
  font-size: 14px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* margin: 5px; */
}
 #openBtnFilter {
  padding: 1px 1px 1px 1px;
  text-decoration: none;
  font-size: 14px;
  color: #818181;
  display: block;
  transition: 0.3s;
  margin: 1px;
}

.sidenav a:hover {
  color: #111;
}

.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Active class */
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.burger-icon{
  max-width: 1rem;
}

/* Icône burger */
.burger-icon span {
  position: relative;
  display: block;
  width: 18px;
  height: 4px;
  background-color: black;
  margin: 1px 3px 3px 1px;
}

.categoriesnav {
  display: none;
}
  /* Cacher le menu complet pour la version mobile */
  @media (max-width: 870px) {
    .categoriesnav {
        display: none;
    }
    /* .navigation-action{
      display: none;
    } */
    .navigation-user-menu{
      display: none;
      
    }
    
    .navigation-action-search {
      display: none;
    }
    
    


    /* .searchtextinput{
      width: 100px;
    } */
    
}
.logomob{
  display: none;
}
.logomain{
  display: block;
}
.logomini{
  display: none;
}
/* cacher le table panier dans la class cart  */
@media (max-width: 499px) {
  .cart {
    display: none;
  }
  .logomob {
    display: block;
  }
  .logomain {
    display: none;
  }

  .carddescription{
    font-size: medium;
  }
}

/* Cacher le cartmobile */
@media (min-width: 500px) {
  .cartmobile {
    display: none;
}
  


  
}


/* Cacher le menu burger pour les autres versions */
@media (min-width: 871px) {
    .burgernav {
      width: 2rem;
      padding: 1px;
      display: none;
    }
    .searchnav {
      padding: 1px;
      width: 2rem;
      display: none;
  }
  .cartmobile {
    display: none;
}
    
}



/* .cartmobile{
  display: flex;
} */
/* table css */
main .cart table {
  width: 99%;
}
main .cart table thead td {
  padding: 10px 0;
  border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
  text-align: right;
}

main .cart table tbody td {
  /* padding: 20px 0; */
  border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
  text-align: center;
}

main .cart .img, main .cartmobile .img{
  max-width: 10rem;
}
main .cart .remove, main .cartmobile .remove{
  color: #ca4f4f;
  font-size: 2rem;
  margin-right: 2.5rem; 
  
  text-align: center;

}
main .cart .remove:hover, main .cartmobile .remove:hover{
  text-decoration: underline;
}
main .cart .price, main .cartmobile .price{
  color: #999999;
}

main .cart table a {
  text-decoration: none;
  color: #555555;
  display:flex;
  align-items: center;
  justify-content: center;
}
main .cart input[type="number"] , main .cartmobile input[type="number"]{
  width: 68px;
  padding: 10px;
  border: 1px solid #ccc;
  color: #555555;
  border-radius: 5px;
}
main .cart .subtotal , main .cartmobile .subtotal{
  text-align: right;
  padding: 0 10px;
}
main .cart .total 
{
  text-align: left;
  padding: 3px ;
  font-size: 1rem;

}
main .cartmobile .total
{
  text-align: center;
  padding: 3px ;
  font-size: 1rem;
  /* background-color: white; */

}
main .cart .subtotal .text , main .cartmobile .subtotal .text{
  padding-right: 40px;
  font-size: 18px;
}
main .cart .text , main .cartmobile .text{
  padding-right: 3px;
  /* font-size: 1rem; */
}
main .cart .price , main .cartmobile .price{
  font-size: 18px;
  color: #999999;
}

main .cart .qty, main .cartmobile .qty{
  font-size: 18px;
  color: #999999;
  justify-content: center;
}
main .cart .buttons {
  text-align: right;
  padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
  margin-left: 5px;
  padding: 12px 20px;
  border: 0;
  background: #4e5c70;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
  background: #434f61;
}

.a-button-confirme {
  background: #fafff1;
  border-color: #FCD200;
}

.text-color-price {
color: #B12704!important;
}

.text-size-medium {
  font-size: 18px!important;
  line-height: 24px!important;
}
.text-bold {
  font-weight: 700!important;
}


.tablenavbar {
  /* height: 2rem; */
  width: 100%;
  /* border-radius: 4px; */
  border-width: 1px;
  
  text-align: right;
  background-color: #f1f1f1;
  
  text-transform: uppercase;
  border: 1px solid #717a82;
  background: #ffffff;
  color: #717a82;
  
  margin: 5px;
  padding: 5px;
  
  font-family: 'Oswald', sans-serif;
  border-radius: 4px;

   border-radius: 0 0 10px 10px;
   box-shadow: 0 0 25px rgba(23, 232, 41, 0.25);

}


.pd-main {
    font-family: Montserrat,sans-serif;
    margin: 0 1%;
    width: 100%;
}

.qtycard{
  font-size: 18px;
  color: #999999;
  justify-content: center;
  min-width: 2rem;    
  
  
}
.qtyinput{

  width:6ch;
  /* padding: 10px; */
  border: 1px solid #ccc;
  color: #555555;
  border-radius: 5px;
}

/* @media (min-width: 1001px)
.pt_product-details {
    width: 50%;
} */
/* @media (min-width: 1001px)
.pt_product-details .pdp-main .product-col-1 .product-primary-image, .pt_product-details .pdp-main .product-col-1 .slick-list, .pt_product-details .pdp-main .product-col-1 .slick-track, .pt_product-details .pdp-main .product-col-1 .slider-for {
    height: 100%;
} */
/*slider css*/
.carousel-container {
  width: 600px;
  height: 400px;
  position: relative;
  margin: 0 auto;

}

.navigation-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.navigation-button .previous {
  /* position: relative; */
  /* z-index: 10; */
  font-size: 25px;
  top: 50%;
  left: 10px;
  font-weight: 700;
}

.navigation-button .next {
  right: 10px;
  /* position: relative; */
  font-size: 25px;
  /* z-index: 10; */
  top: -50%;
}

.navigation-button .nav-btn {
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
  background: white;
}

.slider-carousel {
  /* margin-top: 20px; */
  transition: all 0.3s ease;
  width: auto;

}
.slider-carousel img {
  width: 100%;
  transition: all 0.3s ease;
  border:8px solid white;
}

.images {
  /* position:relative; */
  display:none;
  max-height: 50rem;
  object-fit: contain;
  
}

.main {
  display: block;
}

.image-text {
  position: absolute;
  bottom: 0;
  width: 103%;
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.3);
  height: 35px;
}

/*slider css*/


/* css for about us dak mode card scroll display */

.containeraboutus {
  height: auto; /* Adjust height as needed for scrolling */
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
}
body.dark-mode {
  background-color: #222;
  color: #fff;
} 

.dark-mode-cards {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  /* position: sticky  ; */
  bottom: -200px;
  width: 100%;
  transition: bottom 1s ease-in-out;
}

.card-auto-scroll-d {
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 10px;
  min-width: 200px;
}

.cardscroll {
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 10px;
  min-width: 200px;


  margin: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition-property: opacity, display; transition-duration: 5s; display: block; opacity: 1;
  /* transition: opacity 1 1s ease; Adjust timing and easing as needed */
}

.hidden {
  opacity: 0;
}

.checkbox-class{
  color: #e2a92f;
  display: block;
  text-align: center;
  

}

.prix-width{
  width: 100px;
}

.product-form {
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;

  border-radius: 5%;

}
  
.form-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.size-options {
  /* display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; */

  display: inline-block;
  margin: 1px;
  padding: 1px;
  border-radius: 10%;
  cursor: pointer;
  /* border: 2px solid #ccc; */

  transition: background-color 0.3s, transform 0.3s;
}
.color-options {
  /* display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; */

  display: inline-block;
  margin: 10px;
  /* padding: 10px; */
  border-radius: 10%;
  cursor: pointer;
  border: 2px solid #ccc;
  /* width: 30px; */
  /* height: 30px; */
  transition: background-color 0.3s, transform 0.3s;
}

.size-option {
  /* background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid transparent;
  width: 40px;
  height: 40px;
  text-align: center; */

  border: 2px solid #ccc;
  color: #333;
  font-weight: bold;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 40px;

}

.size-option input {
  display: none;
  position: absolute;
  opacity: 0;
}


.size-option:hover, .size-option input[type="radio"]:checked + label {
  background-color: #007bff;
  border-color: #007bff; /* Affiche une bordure autour de la couleur sélectionnée */
  font-weight: bold;

  background-color: #f0f0f0;
  transform: scale(1.1);
}
.size-option.selected {
  background-color: #4CAF50;
  color: white;
}



/* .color-option {
  width: 40px;  
  height: 40px;
  border-radius: 1%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  border-color: #ccc;

  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
} */
.color-option input[type="radio"] {
  display: none;
  opacity: 50%;
  position: absolute;
}
/* General Product Options Styling */
.product-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: Arial, sans-serif;
}

/* Color Selection Styling */
.color-selection {
  display: flex;
  flex-direction: column;
}

.color-selection label {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.colors {
  display: flex;
  gap: 0.5rem;
}

.color-option {
  width: 40px;
  height: 40px;
  border-radius: 10%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.3s ease;

}

.color-option:hover {
  border: 2px solid #555;
}

.color-option.selected {
  border: 3px solid #000;
}

/* Size Selection Styling */
.size-selection {
  display: flex;
  flex-direction: column;
}

.size-selection label {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.sizes {
  display: flex;
  gap: 0.5rem;
}

.size-option {
  /* padding: 0.5rem 0.5rem; */
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.size-option:hover:not([disabled]) {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.size-option[disabled] {
  background-color: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

.size-option.selected {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.hidden-radio {
  display:  none;
  opacity: 50%;
}

.label-with-hidden-radio {
  cursor: pointer;
}

.label-with-hidden-radio::before {
  content: '○ ';
  color: #000;
  font-size: 16px;
}

.hidden-radio:checked + .label-with-hidden-radio::before {
  content: '● ';
  font-size: 16px;

}


.btn-submit {
  padding: 15px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

.btn-submit:hover {
  background-color: #0056b3;
}

@media screen and (max-width: 600px) {
  /* Styles spécifiques pour les petits écrans */
  .product-form {
      padding: 5px;
  }

  .size-option, .color-option {
      width: 45px;
      height: 45px;
      font-size: 14px;
  }
  

  .btn-submit {
      padding: 12px;
      font-size: 14px;
  }

  
}

/* Style for the product-list container */
.product-list {
  width: 300px; /* Adjust width */
  margin: 20px auto; /* Center the div horizontally */
  padding: 15px;
  background-color: #f9f9f9; /* Light background */
  border: 1px solid #ccc; /* Border around the container */
  border-radius: 8px; /* Rounded corners */
}

/* Style for the select element */
.product-select {
  width: 100%; /* Full width of the parent div */
  height: 200px; /* Adjust height for multiple selection */
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc; /* Border for the select box */
  border-radius: 4px; /* Rounded corners for the select box */
  background-color: #fff; /* White background for the select box */
  box-sizing: border-box; /* Include padding in width/height calculation */
}

/* Style when option is selected */
.product-select option:checked {
  background-color: #4CAF50; /* Green background for selected options */
  color: white; /* White text for selected options */
}

/* Optional: Style for when hovering over the select box */
.product-select:hover {
  border-color: #888; /* Darker border on hover */
}

.promotion-form {
  /* max-width: 600px; */
  margin: 0 auto;
  padding: 20px;
  background-color: #5e4e4e;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-rate {
  width: 100px; /* Applique une largeur de 200px */
  padding: 8px; /* Optionnel : ajoute du padding pour améliorer l'apparence */
  font-size: 14px; /* Optionnel : ajuste la taille de la police */
  border-radius: 4px; /* Optionnel : arrondir les bords du champ */
  border: 1px solid #ccc; /* Optionnel : ajoute une bordure */
}