/* Styles généraux */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        header {
			display: flex;
			justify-content: space-between;
			align-items: center; /* Aligne tous les éléments verticalement au centre */
			height: 120px;
			padding: 0 20px;
            background-color: #4A90E2;
        }
		
		.texte-head {
			font-family: 'Caveat', cursive; /* Application de la police manuscrite */
			font-size: 48px;
			padding-left: 50px; /* Espace entre le logo et le texte */
			padding-right: 0px;
			margin-right: 0px;
			/*line-height: 1.2;*/
			text-align: right; 
		}

		.texte-head p {
			margin: 0;
		}
		.header-container {
			height: 100%; /* Assure que le div prend toute la hauteur du header */
			overflow: hidden; /* Masque tout débordement de l'image */
			position: relative; /* Nécessaire pour un positionnement relatif à ce conteneur */
		}

        /* Style pour le logo dans le coin supérieur gauche */
		.logo {
			display: flex;
			align-items: center;
		}
		.logo img {
			height: auto; /* Le logo est maintenant de la même hauteur que le header */
			width: 240px; /* Garde les proportions du logo */	
		}
        .logo-container {
            display: flex;
            align-items: center;
			padding: 0px;
        }

        .logo-container img {
            width: 50px;  /* Taille du logo */
            margin-right: 20px;
        }
		.banniere {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 0; /* Réduit l'espace à gauche de la bannière */
			padding-left: 0; /* Supprime tout padding interne si existant */
			flex: 1; /* Permet à la bannière de prendre l'espace disponible */
		}

		.banniere img {
			 max-height: 100%;
			width: auto;
			object-fit: contain; /* Pour s'assurer que l'image ne dépasse pas du header */
		}
		.banner {
			height: 100%; /* Ajuste cette valeur selon la hauteur souhaitée */
			width: auto;
			object-fit: cover;
}
/*
.shop-banner {
    max-height: 20px; /* Ajuste cette valeur selon la hauteur souhaitée */
   /* width: auto;
    object-fit: cover; /* Pour s'assurer que l'image s'ajuste bien */
}
        header nav {
            margin-top: 2px;
        }

        header nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
            font-size: 24px; /* Taille des liens augmentée */
        }

        header button {
            background-color: #ff4d4d;
            border: none;
            color: white;
            padding: 15px 25px;
            cursor: pointer;
            font-size: 22px; /* Taille augmentée du bouton de déconnexion */
            border-radius: 5px;
        }

        main {
            padding: 40px;
        }

        h2 {
            color: #4A90E2;
            font-size: 24px; /* Augmenter la taille de la police pour les titres */
            margin-bottom: 20px;
        }

        /* Styles pour les articles du shop */
        #product-list {
            display: flex;
			flex-wrap: wrap; /* Permet d'ajuster les colonnes à l'écran */
			gap: 10px; /* Espacement entre les colonnes */
			justify-content: space-between; /* Distribution uniforme des colonnes */
        }

        .article {
			 width: 30%;
            border: 1px solid #ccc;
			padding: 16px;
			display: flex;
			flex-direction: column;
			background-color: #f9f9f9; /* Une légère couleur de fond pour les articles */
			border-radius: 5px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour effet visuel */
        }

        /* .article img {
            max-width: 30%; 
            height: auto;
            border-radius: 4px;
            margin-bottom: 5px;
        } */

        .article h3 {
            color: #4A90E2;
            font-size: 24px; /* Agrandir la taille des titres des articles */
            margin-bottom: 15px;
        }
		.article h4 {
            color: #93bad3;
            font-size: 18px; /* Agrandir la taille des titres des articles */
            margin-bottom: 15px;
        }

        .article-details {
            text-align: left;
        }

        .article-details p {
            margin: 8px 0;
            color: #666;
            font-size: 16px; /* Augmenter la taille des descriptions */
        }

        .price {
            font-size: 22px; /* Agrandir le texte des prix */
            color: #3fc61b;
            font-weight: bold;
			align-content: left;
        }
		.pv {
            font-size: 22px; /* Agrandir le texte des prix */
            color: #b4bab3;
            font-weight: bold;
			align-content: left;
        }
		
		/* Style pour le Prix Achat */
		.price.achat {
		font-weight: bold;
		/*font-size: 1.5em; */
		color: #26922c;
		font-weight: bold;
		align-content: left;
		}

		/* Style pour le Prix Vente */
		.price.vente {  
		font-style: italic;
		font-size: 18px;
		color: #b4bab3;
		font-weight: bold;
		align-content: left;
		}
		.price.public {  
		font-style: italic;
		font-size: 14px;
		color: #606464;
		font-weight: bold;
		text-align: left;
		align-content: left;
		}

        .old-unitor {
            font-style: italic;
            color: yellow;
            font-size: 5px; /* Taille du texte des unités augmentée */
        }
		.unite {  
		font-style: italic;
		font-size: 12px;
		color: #b4bab3; 
		font-weight: light;
		text-align: left;
		align-content: left;
		}
		/* Style personnalisé pour la ligne horizontale */
		.unite hr {
		border: 0; /* Enlève la bordure par défaut */
		height: 2px; /* Épaisseur de la ligne */
		background-color: #ccc; /* Couleur de la ligne */
		margin: 10px 0; /* Espacement au-dessus et en dessous de la ligne */
		}

        label, input[type="number"] {
            display: block;
            margin-top: 15px;
            font-size: 20px; /* Agrandir la taille du texte des labels et des inputs */
            color: #333;
        }

        input[type="number"] {
            padding: 10px;
            width: 80px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 20px; /* Augmenter la taille du texte dans l'input */
        }

        button {
            background-color: #4A90E2;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 5px;
            margin-top: 10px;
            cursor: pointer;
            font-size: 20px; /* Taille du texte des boutons augmentée */
            width: 100%;
        }

        button:hover {
            background-color: #357ABD;
        }

       

        footer {
            text-align: center;
            padding: 5px;
            background-color: #4A90E2;
            color: white;
            margin-top: 40px;
            font-size: 20px; /* Agrandir le texte du footer */
        }
    
	/* Mise en forme de la section d'achat */
.purchase-options {
    display: flex;
    align-items: center;
    margin-top: 10px;
	justify-content: flex-start;
}

/* Icône du panier */
.cart-icon {
    font-size: 28px;
    margin-right: 10px;
}

/* Champ de quantité avec un style plus visible */
.quantity-input {
    width: 60px;
    padding: 5px;
    border: 2px solid #007BFF; /* Couleur plus marquée */
    border-radius: 4px;
    font-size: 22px;
    text-align: center;
    margin-right: 10px;
}
/* Bouton ajouter au panier à droite du champ de quantité */
.add-to-cart-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
	white-space: nowrap; /* Empêche le retour à la ligne dans le bouton */
    display: inline-block;
    width: auto; /* Laisse la largeur du bouton s'adapter au texte */
    text-align: center;
}

.add-to-cart-btn:hover {
    background-color: #218838; /* Couleur plus sombre au survol */
}

/* Style pour la fenêtre lightbox */
.image-lightbox {
    display: none; /* Cachée par défaut */
    position: fixed; /* Position fixe sur toute la page */
    z-index: 1000; /* Au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%; /* Occupe toute la largeur de l'écran */
    height: 100%; /* Occupe toute la hauteur de l'écran */
    background-color: rgba(0, 0, 0, 0.9); /* Fond semi-transparent noir */
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Style de l'image affichée dans la lightbox */
.lightbox-content {
    max-width: 90%; /* L'image prend au maximum 90% de la largeur */
    max-height: 90%; /* L'image prend au maximum 90% de la hauteur */
    margin-top: 50px;
}

/* Bouton de fermeture (croix) */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Animation de transition pour la lightbox */
.lightbox-content {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

.notification-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente */
}

.notification-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    font-size: 18px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#closeNotificationBtn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}

#closeNotificationBtn:hover {
    background-color: #45a049;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	padding: 1em 0;  /* Ajuste ces valeurs selon tes préférences */
}

.dropdown-content.show {
    display: block; /* Affiché quand la classe 'show' est ajoutée */
}
.dropdown-content a {
    color: black; /* Couleur du texte */
    padding: 10px 15px; /* Espacement intérieur des liens */
    text-decoration: none; /* Pas de soulignement */
    display: block; /* Pour les empiler */
}

/* Ajouter un espacement plus grand entre les éléments */
.dropdown-content a:not(:last-child) {
    margin-bottom: 10px; /* Espace entre les éléments */
}

.dropdown-content a:hover {
    background-color: #ddd; /* Couleur au survol */
}
.dropdown-content a {
        display: flex;
        align-items: center;
        padding: 10px;
        font-size: 18px;
        color: black;
        text-decoration: none;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
	.image-container3 {
    display: flex;
    justify-content: space-around; /* Répartit les images dans l'espace disponible */
    align-items: center; 
    gap: 40px; /* Espacement entre les deux images */
    width: 100%; /* Assure que le conteneur occupe toute la largeur disponible */
    padding: 20px; /* Ajoute un peu d'espace interne autour des images */
}

.product-ima1 {
    width: 30% !important; /* La photo de gauche prend 60% de la largeur du conteneur */
    max-width: 500px !important; /* Limite la taille maximale à 500px */
    height: auto !important; /* Garde les proportions */
    margin-left: 7em !important; /* Ajoute un décalage pour mieux centrer l'image si nécessaire */
}

.product-ima2 {
    width: 18% !important; /* La photo de droite prend 20% de la largeur du conteneur */
    max-width: 200px !important; /* Limite la taille maximale à 200px */
    height: auto !important; /* Garde les proportions */
}