*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}



body{
    position: relative;
}

body.no-scroll {
  overflow-y: hidden;
}


header{

    width: 100%;
    position: fixed;
    z-index: 9999;

    top:0;
    background-color: #000000;
}

.ancre {
    transform:translateY(100%);
    opacity: 0;
    display: block;
    cursor: pointer;
    color: white;
  text-decoration: none;
  font-size: 1rem;
  font-family: var(--font-subtitleBold);
}

.ancre:hover{
    text-decoration: underline; /* souligné au hover */
}


.line-bottom-header{
    width: 100%;
    height: 0.1rem;
    background-color: white;
    transform: scaleX(0);
    transform-origin: left;
}

.not-fixed{
    position: initial;
}

.navigation{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
     padding:1rem 3rem;
}

.content-navigation{
    display: flex;
    align-items: center;
    gap:5rem;
}

.nav-links{
    display: flex;
    list-style: none;
    gap:3rem;
}





.content-cart-login{
    display: flex;
    gap:1.2rem;
    align-items: center;
    opacity: 0;
}

.cart{
    width: 1.5rem;
    height: auto;
}

.login{
    width: 1rem;
    height: auto;
}

.btn-cart{
    background-color: #0A0A0A;
    border:none;
    position: relative;

}

.btn-cart:hover{
     transform: scale(1.06)
}

/* Drawer */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -25rem;
    width: 25rem;
    max-width: 100%;
    height: 100dvh;
    background-color: #fff;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.25s ease;
    z-index: 1000;
    padding: 1rem 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  
  .cart-drawer.open {
    right: 0;
  }

  #close-cart{
    background-color: white;
    border:none;
    cursor: pointer;
    align-self: flex-end;
  }
  /* Bouton fermeture */
  #close-cart > img{
    width: 1.3rem;
  }

  .title-cart{
    margin: 1rem 0 1.5rem 0;
  }

  #cartEmpty{
    background-color: #0A0A0A;
    color:white;
    text-align: center;
    padding:0.6rem 0;
    font-style: italic;
  }
  
  /* Items */
  .cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 80%;
    overflow: scroll;
  }

  .cart-item.loading {
  position: relative;
  opacity: 0.5;
}

.cart-item .loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
}

  .container-item-cart{
    display: flex;
    gap:1rem;
    align-items: start;
  }
  
  .cart-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .error-quantity-panier{
    font-size: 0.7rem;
    color: red;
  }

  .cart-item img {
    width: 4rem;
    object-fit: cover;
    padding: 0.3rem;
  }

  .cart-item-info{
    flex:3
  }
  
  .cart-item-info h3 {
    margin: 0;
    font-size: 1rem;
  }

  .cart-item-info p {
    margin: 0.2rem 0;
    font-size: 0.75rem;
  }

  .container-quantity{
    display: flex;
    align-items: center;
    gap:0.5rem
  }

  .container-update-quantity-header{
    display: flex;
    width: 5rem;
    border:1px solid black;
    align-items: center;

  }

  #product-quantity-header{
    width: 40%;
    text-align: center;
    border:none;
  }

  #product-quantity-header:focus{
    outline: none;
  }

  input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


    #decrease-qty-header,#increase-qty-header{
      width: 30%;
      background-color: white;
      border:none;
       font-size: 1rem;
       cursor: pointer;
    }

  #product-quantity-header{
    font-size: 0.75rem;
  }



  .remove-item{
    align-self: flex-start;

  }

  .remove-item > .garbage-cart{
    width: 1.5rem;
  }

  .lineCart{
    height: 0.06rem;
    width: 100%;
    background-color: #d6d6d6;
  }
  
  .remove-item {
    background: none;
    color: red;
    border: none;
    cursor: pointer;
    font-size: 1rem;
  }
  
  .btn-commander {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background: black;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    text-align: center;
  }

  #totalPrice{
    margin-top: 3rem;
  }

  .mobile-menu-toggle,.line-menu-mobile,.number-menu-mobile,.title-menu-mobile,.copyright-mobile{
    display: none;
  }



.bloc-cart-count {
  position: absolute;
  top: 40%;
  right: -10%;
  background: rgb(87, 154, 100);
  color: white;
  font-size: 0.6rem;
  font-weight: bold;
  width: 0.8rem;
  height: 0.8rem;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 100%;

}

.link-login{
  text-decoration: none;
}

.link-login:hover{
   transform: scale(1.06)
}

#first_name_login{
  display: none;
  color:white;
  font-style: italic;
  font-size: 0.8rem;
}

/* Positionne le conteneur */
.list-menu {
  position: relative;
}

/* Style du sous-menu (caché par défaut) */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  margin: 8px 0 0;
  list-style: none;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 1000;

  /* animation d’apparition fluide */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.submenu li a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #222;
}

.submenu li a:hover {
  background: #f6f6f6;
}

/* Affichage au survol (desktop) et au focus clavier */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu.open > .submenu {           /* classe ajoutée pour mobile */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



  @media (max-width: 991.98px) {


  .container-update-quantity-header{

    width: 8rem;

  }

  .error-quantity-panier {
  font-size: 1.1rem;
}


 .submenu{
    opacity: 1!important;
    visibility: visible;
    position: initial;
    min-width: auto;
    color: white;
    background-color: #000000;
    display: none;
    flex-direction: column;
    align-items: end;
    border:none;
  }

  .submenu.active{
    display: flex;
  }

  .submenu li a:hover {
    background-color: #000000;
  }




    #decrease-qty-header,#increase-qty-header{

       font-size: 1.7rem;

    }

  #product-quantity-header{
    font-size: 1.7rem;
  }


    #first_name_login {
      font-size: 1.7rem;
    }


.bloc-cart-count {
    font-size: 1.2rem;
    width: 1.8rem;
    height: 1.8rem;
}


    .title-menu-mobile{
      color:white;
      font-size: 2rem;
      display: flex;
      align-items: center;
      width: 100%;

    }

    .title-menu-mobile > span{
      margin-left: auto;
    }

    .copyright-mobile{
      color: white;
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 1.5rem;
      padding: 3rem 3rem;

    }

    .copyright-mobile > a{
      color: white;
      text-decoration: none;
    }

    .list-menu,.list-menu > div{
      display: flex;
      justify-content: space-between;
    }

    .submenu li a {
      font-size: 1.8rem;
      color:white
    }

    .has-submenu{
      display: flex;
      flex-direction: column;
    }

    .number-menu-mobile{
      color:white;
      font-size: 2rem;
      display: block;
    }

    .mobile-menu-toggle{
      display: flex;
      flex-direction: column;
      gap:1.15rem;
      background-color: #0A0A0A;
      border:none;
      cursor: pointer;
      z-index: 3;
    }

    .line-menu-mobile{
      height: 1px;
      width: 100%;
      background-color: #d6d6d6;
      display: block;
    }

    .nav-btn-line {
      height: 1px;
      width: 4rem;
      background-color: white;
      transition: all 0.3s ease; /* Animation fluide */
      transform-origin: center; /* Point de pivot au centre */
    }
    
    /* État initial des lignes, espacées verticalement */
    .mobile-menu-toggle.active .nav-btn-line:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
      margin-bottom: 0;
    }
    
    /* Deuxième ligne qui tourne à -45 degrés */
    .mobile-menu-toggle.active .nav-btn-line:nth-child(2) {
      transform: translateY(-6.3px) rotate(-45deg);
      margin-top: 0;
    }



    .content-cart-login {
      gap:2.5rem
    }

    .login {
      width: 2.2rem;
    }

    .cart {
      width: 3.2rem;
    }

    .content-navigation {
      display: none;
      flex-direction: column;
      background-color: #0A0A0A;
      position: absolute;
      top: 0; /* ou selon ta navbar */
      left:-3rem;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      height: 100dvh;
      width: calc(100% + 6rem);
      justify-content: space-between;
      z-index: 2;


    }

    .ancre {
      font-size: 5rem;
    }



    .content-navigation.active {
        display: flex;

    }

     .title-menu-mobile {
      padding: 2.5rem 2rem;
    }

    .content-navigation {
  padding: 0 7rem;
 }

    .nav-links{
      flex-direction: column;
      width: 100%;

      gap:2rem
    }

    .cart-drawer {
      width: 45rem;
      right:-45rem;
      padding: 2rem;
    }

    .title-cart {
      font-size: 3rem;
      margin: 1rem 0 3rem 0;

    }

    #cartEmpty{
      font-size: 2rem;
      margin-top: 2rem;
    }

    #close-cart > img {
      width: 3rem;
    }

    .cart-item-info h3 {
      font-size: 2rem;
    }

    .cart-item-info p {
      font-size: 1.5rem;
    }

    .remove-item > .garbage-cart {
      width: 2.3rem;
    }

    .cart-item img {
      width: 9rem;
    }

    .details-price{
      font-size: 1.5rem;
    }

    .btn-commander {
      font-size: 1.7rem;
      margin-top: 2rem;
    }

     .navigation {
  padding: 2rem 2rem;
 }
  }


  @media (max-width: 767.98px) {


    .nav-links {
      padding: 0 3rem;
    }



     .content-navigation {
  padding: 0 4rem;
 }



  }


  @media (max-width: 575.98px) {

     .error-quantity-panier {
  font-size: 1.2rem;
}


 .content-navigation {
  padding: 0 2rem;
 }


    .copyright-mobile {
      padding: 2rem;
    }

    .nav-links {
      padding:0 2rem
    }

    .number-menu-mobile {
      font-size: 1.3rem;
    }

    .ancre {
      font-size: 3rem;
    }

    .cart-drawer {
      width: 100%;
      right: -100%;
    }



    .content-cart-login {
      gap:1.6rem
    }


    .login {
      width: 2rem;
    }

    .cart {
      width: 3rem;
    }


  }