.image-container2{
         position: relative;
     }
     
     .circle{

            border-radius: 50%;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
     }
     
     form{
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
     }
     
     .image-title2{
         position: absolute;
         background-color: rgba(0,0,0,0.5);
         size: 20px;
         opacity: 0,5;
     }
     .nouveau{
         position: absolute;
         top: 0;
         margin:0;
     } 
     .img{
         width: 200px;
         height: 200px;
         margin: 0 auto;
         margin-top: 80px;
         display: block;
        
     }
     .image-title-article{
         position: absolute;
         bottom:0;
         margin-left:50px;
     }
     
     #article2{
         overflow:auto;
         display: flex;
         white-space: nowrap;
     }
        .menu :hover{
           opacity: 0.5;
        }
        
        .propos-class{
            background-image:url("https://img.freepik.com/photos-premium/modele-emballage-produits-cosmetiques_1305674-8.jpg?semt=ais_hybrid");
            background-repeat:no-repeat;
            background-size: cover;
        }
        
   .w3-title2 {
    white-space: nowrap;  /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden;     /* Masque tout débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte dépasse */
}
.image-container {
    width: 100%;
    height: 200px; /* Ajustez la hauteur selon votre besoin */
    overflow: hidden;
    position: relative;
}


.stars {
    color: #FFD700; /* Couleur des étoiles */
}

.image-title {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #FFD700;
    color: white;
    padding: 5px;
    font-size: 8px;
}

.h4 {
  color: #DAA520;
  text-shadow: 2px 2px 4px #000000;
  font-size: 60px;
  opacity:0,5;
  font-family: "Times New Roman", Times, serif;
  overflow: hidden;
    text-overflow:ellipsis;
}

h4 {
  text-shadow: 2px 2px 4px #000000;
  font-size: 40px;
}



.div {
  box-shadow: 10px 10px 5px #DAA520;
  border-color:#DAA520;
  border-style: solid;
      position: relative;
    width: 600px;
    max-width: 550px;
    height: 250px;
    max-height: 300px;
  
}

/* code pour les bar */

/* Pour s'assurer que tous les éléments sont alignés sur une ligne */
.w3-bar-item {
    display: flex;
    align-items: center;
}

.logo {
    max-width: 80px; /* Contrôle la taille de l'image logo */
}

.product-image {
    width: 250px;
    height: 250px;
/*    object-fit: contain; /* Remplit le conteneur sans déformer l'image */
}

.product-item{
    width: 250px;
    height:350px;
    
}


/* Style adaptatif pour s'assurer que les éléments restent sur la même ligne */
@media (max-width: 600px) {
    .title {
        font-size: 14px; /* Réduit la taille du texte pour les petits écrans */
    }
    .logo {
        max-width: 50px; /* Réduit la taille du logo sur les écrans plus petits */
    }
    .bar{
        max-width:50px;
    }
    
    .heart{
        max-width: 50px;
    }
    .cart{
        max-width: 50px;
    }
     .div{
        width: 380px;
    }
    
    .product-item{
    width:200px; /* Adapte l'image à la largeur du conteneur */
    height:350px; /* Adapte l'image à la hauteur du conteneur */
   /* object-fit: cover; /* Assure que l'image remplit le conteneur sans déformation */
   /* display: block; /* Évite les espaces indésirables dus au comportement inline des images */
}

.product-image{
    width: 200px;
    height: 200px;
}
    
}
@media (max-width: 400px) {
    .title {
        font-size: 10px;
    }
    .logo {
        max-width: 40px;
    }
        .bar{
        max-width:40px;
    }
    
    .heart{
        max-width: 40px;
    }
    .cart{
        max-width: 40px;
    }     
   .div{
        width: 300px;
    }
    .product-item{
    width:150px; /* Adapte l'image à la largeur du conteneur */
    height:250px; /* Adapte l'image à la hauteur du conteneur */
   /* object-fit: cover; /* Assure que l'image remplit le conteneur sans déformation */
    display: block; /* Évite les espaces indésirables dus au comportement inline des images */
}

.product-image{
    width: 150px;
    height: 150px;
}
}

@media (max-width: 380px) {
    .title {
        font-size: 10px;
    }
    .logo {
        max-width: 40px;
    }
        .bar{
        max-width:40px;
    }
    
    .heart{
        max-width: 40px;
    }
    .cart{
        max-width: 40px;
    }     
   .div{
        width: 300px;
    }
    .product-item{
    width:150px; /* Adapte l'image à la largeur du conteneur */
    height:250px; /* Adapte l'image à la hauteur du conteneur */
   /* object-fit: cover; /* Assure que l'image remplit le conteneur sans déformation */
    display: block; /* Évite les espaces indésirables dus au comportement inline des images */
    margin-bottom: 100px;
}

.product-image{
    width: 150px;
    height: 150px;
}
}

@media (max-width: 200px) {
    .title {
        font-size: 8px;
    }
    .logo {
        max-width: 30px;
    }
        .bar{
        max-width:30px;
    }
    
    .heart{
        max-width: 30px;
    }
    .cart{
        max-width: 30px;
    }
    .div{
        width: 250px;
    }
    .product-item{
    width:150px; /* Adapte l'image à la largeur du conteneur */
    height:150px; /* Adapte l'image à la hauteur du conteneur */
   /* object-fit: cover; /* Assure que l'image remplit le conteneur sans déformation */
   /* display: block; /* Évite les espaces indésirables dus au comportement inline des images */
}

.product-image{
    width: 150px;
    height: 150px;
}
}

@media (max-width: 100px) {
    .title {
        font-size: 5px;
    }
    .logo {
        max-width: 20px;
    }
        .bar{
        max-width:20px;
    }
    
    .heart{
        max-width: 20px;
    }
    .cart{
        max-width: 20px;
    }
    
        .div{
        width: 150px;
    }
    
}

@media (max-width: 50px) {
    .title {
        font-size: 5px;
    }
    .logo {
        max-width: 10px;
    }
        .bar{
        max-width:10px;
    }
    
    .heart{
        max-width: 10px;
    }
    .cart{
        max-width: 10px;
    }
            .div{
        width: 100px;
    }
    
}

        .quantity-badge {
            background-color: white;
            color: black;
            font-size: 12px;
            font-weight: bold;
            border: 1px solid #ddd;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex; 
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }