/*Design du bloc Head*/
.head{
    background: var(--background-color-second);
    font-size: 13.5px;
  }
.head a{
    color: var(--font-color-second);
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
  .header {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 10px 0;
    transition: all 0.5s;
    z-index: 997;
    margin-bottom: 30px;
  }
  .header .logo {
    line-height: 1;
  }
  
  .header .logo img {
    max-height: 70px;
    margin-right: 10px;
  }
  
  .header .logo h1 {
    font-size: 35px;
    margin: 0;
    font-weight: 700;
    color: var(--default-color);
  }
  
  .scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
  }
  #row2 {
  display: none;
}


  /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
      padding: 0;
    }
  
    .navmenu ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
      margin-left: 10%;
    }
  
    .navmenu li {
      position: relative;
    }
  
    .navmenu>ul>li a {
      white-space: nowrap;
      padding: 10px 8px;
      font-size: 15px ;
    }
  
    .navmenu>ul>li:last-child {
      padding-right: 0;
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--default-color);
      font-size: 13.5px;
      padding: 0 2px;
      font-family: var(--Police-title);
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
      position: relative;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 10px;
      line-height: 0;
      margin-left: 5px;
      transition: 0.3s;
    }
  
    .navmenu>ul>li>a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -6px;
      left: 0;
      background-color: var(--background-color);
      visibility: hidden;
      width: 0px;
      transition: all 0.3s ease-in-out 0s;
    }
  
    .navmenu a:hover:before,
    .navmenu li:hover>a:before,
    .navmenu .active:before {
      visibility: visible;
      width: 100%;
    }
  
    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
      color: var(--accent-color);
    }
  
    .navmenu .dropdown ul {
      margin: 0;
      padding: 10px 0;
      background: var(--background-color);
      display: block;
      position: absolute;
      visibility: hidden;
      left: 10px;
      top: 130%;
      opacity: 0;
      transition: 0.3s;
      border-radius: 4px;
      z-index: 99;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
  
    .navmenu .dropdown ul li {
      min-width: 200px;
    }
  
    .navmenu .dropdown ul a {
      color: #000000;
      padding: 10px 20px;
      font-size: 13px;
      text-transform: none;
    }
  
    .navmenu .dropdown ul a i {
      font-size: 12px;
    }
  
    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
      color: var(--accent-color);
    }
  
    .navmenu .dropdown:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  
    .navmenu .dropdown .dropdown ul {
      top: 0;
      left: -90%;
      visibility: hidden;
    }
  
    .navmenu .dropdown .dropdown:hover>ul {
      opacity: 1;
      top: 0;
      left: -100%;
      visibility: visible;
    }
  }
  /* Mobile Navigation */
  @media (max-width: 1199px) {
    .mobile-nav-toggle {
      color: var(--font-color);
      font-size: 28px;
      line-height: 0;
      margin-right: 10px;
      cursor: pointer;
      transition: color 0.3s;
    }
    .sitename{
      color: var(--font-color) !important;
    }
    .navmenu {
      padding: 0;
      z-index: 9997;
    }
    .dark{
      background: var(--background-color-second) !important;
      color: var(--font-color) !important;
    }
  
    .navmenu ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 6px;
      background-color: var(--background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
    }
  
    .navmenu>ul>li a {
      font-size: 20px ;
    }
    .navmenu a,
    .navmenu a:focus {
      color: var(--default-color);
      padding: 10px 20px;
      font-family: var(--Police-title);
      font-size: 17px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s;
      background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    }
  
    .navmenu a i:hover,
    .navmenu a:focus i:hover {
      background-color: var(--accent-color);
      color: var(--accent-color);
    }
  
    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
      color: var(--accent-color);
    }
  
    .navmenu .active i,
    .navmenu .active:focus i {
      background-color: var(--accent-color);
      color: var(--contrast-color);
      transform: rotate(180deg);
    }
  
    .navmenu .dropdown ul {
      position: static;
      display: none;
      z-index: 99;
      padding: 10px 0;
      margin: 10px 20px;
      background-color: var(--background-color-);
      transition: all 0.5s ease-in-out;
    }
  
    .navmenu .dropdown ul ul {
      background-color: rgba(33, 37, 41, 0.1);
    }
  
    .navmenu .dropdown>.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .mobile-nav-toggle {
      color: var(--font-color);
      position: absolute;
      font-size: 32px;
      top: 15px;
      right: 15px;
      margin-right: 0;
      z-index: 9999;
    }
  
    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.8);
      transition: 0.3s;
    }
  
    .mobile-nav-active .navmenu>ul {
      display: block;
    }
  }

/*Début Le responsive design*/
/*Design sur pc*/
  @media(min-width: 1199px)  {

  .pc-none{
    display: none;
    }
    .profil-img{
      width: 50px;
      height: 50px;
    }
    .profil-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .img-fond{
      object-fit: cover;
      width: 100%;
      height: 90vh;
      margin-top: 12px;
      filter: brightness(65%);
    }
    .overlay-card-e-img{
      font-family: var(--fine-font);
      background: transparent;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      color: var(--background-color);
      padding: 15px;
      word-wrap: break-word;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 10px;
    
    }
    .overlay-card-e-img .h3{
      color: var(--font-color);
      margin-left: 2%;
      font-size: 55px;
      margin-left: 10%;
    }
    .overlay-card-e-img h3{
      position: absolute;
      top: 90%;
      font-size: 25px;
      font-weight: 100 !important;
      color: var(--font-color);
      margin-left: 10%;
    }
    .create{
      font-style: normal !important;
      position: absolute;
      margin-left: 10%;
    }
    .create-two{
      font-style: normal !important;
      position: absolute;
      margin-left: 10%;
      top: 200%;
    }
   /*product-image-card*/
   .product-image-card-solo{
    object-fit: cover;
    width: 100%;
    height: 580px;
    border-radius: 10px 10px 0 0;
    }
    .bottom-nav{
      background: var(--heading-color);
      border: 2px solid var(--accent-color);
      box-shadow: 0 -5px 25px rgba(255, 72, 0, 0.9);
      position: fixed;
      margin-bottom: 10%;
      left: 10px;
      width: 5%;
      flex-direction: column;
      display: flex;
      justify-content: space-around;
      padding: 10px 10px;
      border-radius: 5rem;
      z-index: 1;
      
    }
    .nav-item{
      text-align: center;
      color: var(--nav-color);
      font-size: 25px;
      text-decoration: none;
      margin-top: 15px;
    }
    .nav-item i{
      font-size: 25px;
      display: block;
    }
    .nav-item.active{
      color: var(--accent-color);
      font-weight: bold;
    }
    .nav-item.active i{
      color: var(--accent-color);
    }

    .scroll-toptwo{
      display: none;
    }
    /*les design des écrits de la carte solo*/
    .title-card-solo{
      font-size: 28px;
      color: var(--default-color);
      font-weight: bold;
    }
    .description-card-solo{
      font-size: 20px;
      font-weight: bold;
    }
    .price-solo{
      font-size: 28px;
      float: right;
      font-weight: bold;
      color: var(--default-color);
    }
    .price-before-solo{
      font-size: 18px;
      margin-top: 3px;
      float: left;
      font-weight: bold;
      text-decoration: line-through;
    }
    .overlay-solo{
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 80%;
      left: 50%;
      border-radius: 5rem;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 10px;
    
    }
    .overlay-solo button{
      border: none;
      background: transparent;
      width: 80px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 38px;
    }
    .images-bloc{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(75%);
    }
    .images-bloc-two{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(75%);
    }
    /*product-image-card*/
  .product-image-card{
    object-fit: cover;
    width: 100%;
    height: 280px;
    border-radius: 10px 10px 0 0;
  }
  /*les design des écrits de la carte produits*/
  .title-card{
    font-size: 15.8px;
    color: var(--default-color);
    font-weight: bold;
  }
  .description-card{
    font-size: 13px;
    font-weight: bold;
  }
  .price{
    font-size: 18px;
    float: right;
    font-weight: bold;
    color: var(--default-color);
  }
  .price-before{
    font-size: 14px;
    margin-top: 3px;
    float: left;
    font-weight: bold;
    text-decoration: line-through;
  }
    /*product-image*/
  .product-image{
    object-fit: cover;
    width: 100%;
    height: 300px;
    border-radius: 10px 10PX 0 0;
  }
 .dropdown{
  background: var(--background-color-second);
  color: var(--font-color) !important;
  border: none;
  border-radius: 10rem;
  font-style: normal !important;
  position: absolute;
  top: 160%;
  margin-left: 30%;
 }
 
}
  
  /*Design sur mobile*/
  @media(max-width: 1199px)  {
    /*Image fond*/
    .img-fond{
      object-fit: cover;
      width: 100%;
      height: 90vh;
      filter: brightness(65%);
    }
    .image-plane{
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: hidden;
      filter: brightness(65%);
    }
    .overlay-card-e-img{
      font-family: var(--fine-font);
      background: transparent;
      position: absolute;
      top: 35%;
      left: 50%;
      color: var(--font-color);
      width: 100%;
      padding: 15px;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 10px;
      flex-direction: column;
    
    }
    .overlay-card-e-img .h3{
      font-size: 40px;
      font-weight: 100 !important;
      width: 100%;
      color: var(--font-color);
      margin-left: 2%;
    }
    .overlay-card-e-img h3{
      position: absolute;
      top: 90%;
      font-size: 15px;
      font-weight: 100 !important;
      color: var(--font-color);
      margin-left: 0.5%;
    }
    .create{
      position: absolute;
      font-style: normal;
      top: 150%;
    }
    .create-two{
      position: absolute;
      font-style: normal;
      top: 180%;
    }
    .profil-img{
      width: 50px;
      height: 50px;
    }
    .profil-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
   .mobile-none{
    display: none;
    }
   /*product-image-card*/
   .product-image-card-solo{
    object-fit: cover;
    width: 100%;
    height: 280px;
    border-radius: 10px 10px 0 0;
    }
    /*les design des écrits de la carte solo*/
    .title-card-solo{
      font-size: 18px;
      color: var(--default-color);
      font-weight: bold;
    }
    .description-card-solo{
      font-size: 14px;
      font-weight: bold;
    }
    .price-solo{
      font-size: 18px;
      float: right;
      font-weight: bold;
      color: var(--default-color);
    }
    .price-before-solo{
      font-size: 14px;
      margin-top: 3px;
      float: left;
      font-weight: bold;
      text-decoration: line-through;
    }
    .overlay-solo{
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 80%;
      left: 50%;
      border-radius: 5rem;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 10px;
    
    }
    .overlay-solo button{
      border: none;
      background: transparent;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
    img{
      object-fit: cover;
    }
    /*le design du bottom nav*/
    .bottom-nav{
      background: var(--heading-color);
      border: 2px solid var(--accent-color);
      box-shadow: 0 -5px 25px rgba(255, 72, 0, 0.9);
      position: fixed;
      margin-bottom: 8px;
      left: 10px;
      width: 95%;
      display: flex;
      justify-content: space-around;
      padding: 10px 10px;
      border-radius: 5rem;
      z-index: 1;
      
    }
    .nav-item{
      text-align: center;
      color: var(--nav-color);
      font-size: 25px;
      text-decoration: none;
    }
    .nav-item i{
      font-size: 25px;
      display: block;
    }
    .nav-item.active{
      color: var(--accent-color);
      font-weight: bold;
    }
    .nav-item.active i{
      color: var(--accent-color);
    }

    .scroll-toptwo {
      position: fixed;
      visibility: hidden;
      opacity: 0;
      right: 10px;
      bottom: -15px;
      z-index: 99999;
      background-color: var(--background-color-second);
      width: 44px;
      height: 44px;
      border-radius: 50px;
      transition: all 0.4s;
    }
    
    .scroll-toptwo i {
      font-size: 24px;
      color: var(--contrast-color);
      line-height: 0;
    }
    
    .scroll-toptwo:hover {
      background-color: color-mix(in srgb, var(--heading-color), transparent 50%);
      color: var(--contrast-color);
    }
    
    .scroll-toptwo.active {
      visibility: visible;
      opacity: 1;
      bottom: 180px;
    }
       /*product-image-card*/
  .product-image-card{
    object-fit: cover;
    width: 100%;
    height: 150px;
    border-radius: 10px 10PX 0 0;
  }
  /*les design des écrits de la carte produits*/
  .title-card{
    font-size: 15.8px;
    color: var(--default-color);
    font-weight: bold;
  }
  .description-card{
    font-size: 13px;
    font-weight: bold;
  }
  .price{
    font-size: 18px;
    float: right;
    font-weight: bold;
    color: var(--default-color);
  }
  .price-before{
    font-size: 14px;
    margin-top: 3px;
    float: left;
    font-weight: bold;
    text-decoration: line-through;
  }
    /*product-image*/
  .product-image{
    object-fit: cover;
    width: 100%;
    height: 200px;
    border-radius: 10px 10PX 0 0;
  }
 .dropdown{
  background: var(--background-color-second);
  color: var(--font-color) !important;


 }

  }
  /*Fin Le responsive design*/
   /*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 0;
  scroll-margin-top: 120px;
  overflow: clip;
}
.product-image-pub{
  object-fit: cover;
  width: 100%;
  height: 300px;
  border-radius: 10px 10PX 0 0;
}
.card-statut-2{
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .card-statut-mobile{
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .p-info-card-2{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 80%;
    width: 92%;
    height: 20vh;
    word-wrap: break-word;
    float: left;
    margin-left: 4%;
  }
  .p-info-card-2 h1{
    color: var(--font-color);
    font-size: 20px;
  }
  .p-info-card-2 p{
    color: var(--font-color);
    font-size: 15px;
    font-family: var(--fine-font);
  }

  .p-infos-2{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 80%;
    width: 100%;
    word-wrap: break-word;

  }
  .p-infos-2 button{
    color: var(--font-color);
    font-size: 20px;
  }
  /*overlay statut 2*/
    .overlay-statut-2{
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 75%;
      left: 50%;
      border-radius: 5rem;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 10px;
    
    }
    .overlay-statut-2 button{
      border: none;
      background: transparent;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
  /*overlay statut*/
  .overlay-statut{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 75%;
    left: 50%;
    border-radius: 5rem;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay-statut button{
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  /*overlay statut second*/
  .overlay-statut-second{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 5rem;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay-statut-second button{
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  /*overlay statut second*/
  .overlay-statut-mobile{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 5rem;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay-statut-mobile button{
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  .p-infos-two{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 90%;
    width: 100%;
    word-wrap: break-word;

  }
  .p-infos-two button{
    color: var(--font-color);
    font-size: 20px;
  }
  .p-info-card-second{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 60%;
    width: 92%;
    height: 20vh;
    word-wrap: break-word;
    float: left;
    margin-left: 4%;
  }
  .p-info-card-second h1{
    color: var(--font-color);
    font-size: 20px;
  }
  .p-info-card-second p{
    color: var(--font-color);
    font-size: 15px;
    font-family: var(--fine-font);
  }

  .p-infos-second{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 88%;
    width: 100%;
    word-wrap: break-word;

  }
  .p-infos-second button{
    color: var(--font-color);
    font-size: 20px;
  }
  .p-info-card-mobile{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 60%;
    width: 92%;
    height: 20vh;
    word-wrap: break-word;
    float: left;
    margin-left: 4%;
  }
  .p-info-card-mobile h1{
    color: var(--font-color);
    font-size: 20px;
  }
  .p-info-card-mobile p{
    color: var(--font-color);
    font-size: 15px;
    font-family: var(--fine-font);
  }

  .p-infos-mobile{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 88%;
    width: 100%;
    word-wrap: break-word;

  }
  .p-infos-mobile button{
    color: var(--font-color);
    font-size: 20px;
  }
  .card-statut-mobile{
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .p-infos-mobile-two{
    background: transparent;
    border-radius: 0.5rem;
    padding: 5px;
    top: 80%;
    width: 100%;
    word-wrap: break-word;

  }
  .p-infos-mobile-two button{
    color: var(--font-color);
    font-size: 20px;
  }
@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 100px;
  }
}
/*Fin section*/
/*l'espace entre deux elements*/
  .space-one{
    height: 3rem;
  }
  .space-end{
    height: 8rem;
  }
  .space{
    background: transparent;
    width: 2rem;
  }
/*Le design de la carte vedette*/
  .card-featured-card{
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 5px;
    overflow: hidden;
  }
  .card-featured-card img{
    filter: brightness(50%);
    object-fit: cover;
    width: 100%;
    height: 100%  ;
    object-fit: cover;
  }
  .card-featured-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }
  .card-featured-content{
    position: absolute;
    top: 70%;
    left: 5%;
    color: var(--font-color);
    padding: 8px;
  }
  .custom-ratio{
    height: 300px;
  }
  .overlay-card-featured{
    background: transparent;
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    padding: 4px;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay-card-featured h3{
    color: var(--font-color);
    margin-left: 2%;
    font-family: var(--fine-font);
  }
  .overlay-card-featured-two{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 84%;
    left: 80%;
    border-radius: 5rem;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay-card-featured-two button{
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  .btn-visit{
    background: var(--accent-color);
    color: var(--font-color);
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: bold;
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    backdrop-filter: blur(40px);
  }
  .btn-visit:hover{
    background: rgb(255, 148, 109);
    color: var(--nav-color);
  }
  .btn-visit-two{
    background: var(--background-color-second);
    color: var(--font-color);
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: bold;
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    backdrop-filter: blur(40px);
  }
  .btn-visit-two:hover{
    background: rgb(57, 57, 57);
    color: var(--nav-color);
  }
 /*Fin Le design de la carte vedette*/
/*Le design de la carte statut */
  .card-statut{
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    margin-top: 30px;
   
  }
  .discount-badge-statut{
    position: absolute;
    top: 3%;
    right: 5%;
    background: var(--surface-colo);
    color: var(--font-color);
    padding: 8px 12px;
    border-radius: 5rem;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;  
  }
  .discount-badge-statut-reduc{
    position: absolute;
    top: 200px;
    right: 18px;
    background: var(--danger-color);
    color: var(--nav-color);
    padding: 8px;
    border-radius: 100em;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
  
  }
  .discount-badge-statut-reduc-price{
    position: absolute;
    top: 240px;
    right: 18px;
    background: var(--background-color);
    color: var(--default-color);
    padding: 4px;
    border-radius: 100em;
    font-size: 13px;
    font-weight: bold;
    z-index: 1;
    text-decoration: line-through;
  
  }
  .discount-badge-promo{
    position: absolute;
    top: 50%;
    right: 5%;
    background: var(--danger-color);
    color: var(--font-color);
    padding: 8px 12px;
    border-radius: 5rem;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;  
  }
  .card-statut img{
    width: 100%;
    height: 400px;
    border-radius: 0.5rem;
    object-fit: cover;
  
  }
  .buy-button{
    position: absolute;
    top: 40px;
    left: 10px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 1rem;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
  }
  .buy-button:hover{
    background: rgb(255, 148, 109);
    color: var(--contrast-color);
  }
  /*Overlay design*/
  .product-image{
    object-fit: cover;
    width: 100%;
    height: 180px;
    border-radius: 10px;
  }
  /*overlay*/
  .overlay{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 80%;
    left: 50%;
    border-radius: 5rem;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
  
  }
  .overlay button{
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  /*swiper*/
  .swiper-slide{
    font-size: 15px;
    margin-top: 5px;
  }
  
  .swiperTwo{
    margin-top: 1.5rem;
  }
  /*product-card design*/
  .product-card{
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
  }
  .product-card .position-relative{
    width: 100%;
  }

  /*les design de la carte promotions*/
  .discount-badge-promo-card{
    position: absolute;
    top: 50%;
    right: 10px;
    background: var(--danger-color);
    color: var(--font-color);
    padding: 8px 12px;
    border-radius: 5rem;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;  
  }
  .discount-badge{
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--danger-color);
    color: var(--font-color);
    font-size: 14px;
    font-weight: bold;
    padding: 5px 5px;
    border-radius: 5rem;
  }
  .boutique-couverture{
    object-fit: cover;
    width: 100%;
    height: 250px;
  }
  .boutique-profil{
    position: absolute;
    object-fit: cover;
    top: 52%;
    left: 5%;
    width: 60px;
    height: 60px;
    border: 2px solid;
  }
    /*overlay*/
    .p-a-info-b{
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0.5rem;
      padding: 5px;
      top: 5%;
      float: left;
      margin-left: 4%;
    }
    .p-a-info-b h3{
      color: var(--font-color);
      font-size: 20px;
    }
    .p-a-info-b h5{
      color: var(--font-color);
      font-size: 15px;
    }
    .imgs-profil{
      object-fit: cover;
      width: 70px;
      height: 70px;
    }
  /*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 10px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 80px;
}

/*Notification*/
.img-notif{
  object-fit: cover;
  width: 70px;
  height: 70px;
}
.store{
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  transform: translate(25%, 25%);
}
.strong{
  color: var(--default-color);
  font-weight: bold;
  font-size: 18px;
}
.moments{
  margin-top: 4px;
  float: right;
}