@charset "utf-8";
/* CSS Document */
<style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Pour que le body prenne toute la hauteur */
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }


        h1 {
	text-align: center;
	color: #e57b21;
	width: 100%;
        }


/*Sidebar*/


        .sidebar-container {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
        }

        .sidebar {
            background-color: #263485;
            color: #343a40;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 250px;
            flex-shrink: 0;
			 margin-top: 20px; /* Ajouter de l'espacement en haut */
        }
		
		
        .sidebar h3 {
            margin: 0;
            font-size: 1.5em;
            font-weight: bold;
            color: #fbd935;
        }

        .sidebar p {
            margin: 10px 0 0;
            font-size: 1em;
            color: #fff;
        }

		.sidebar li {
				background-color: #ffffff; /* Fond blanc pour les éléments non actifs */
				color: #ffffff; /* Texte en blanc pour les éléments non actifs */
				margin: 5px 0; /* Espacement entre les éléments de la liste */
				padding: 10px; /* Espacement interne des éléments de la liste */
				border-radius: 5px; /* Coins arrondis */
				transition: background-color 0.3s; /* Transition pour l'effet de survol */
			}

		
		.sidebar li:hover {
			background-color: #ce4f1f; /* Couleur de survol (bleu) */
			color: #ffffff; /* Texte en blanc au survol */
		}
		
		.sidebar li.active {
			background-color: #fbd935; /* Couleur de fond pour l'élément actif */
			color: #fff; /* Couleur du texte (noir) */
		}
		
		
/*contenu des images*/
	
		.content {
            flex: 1; /* Permet au contenu de prendre l'espace restant */
        }
		
        .container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: auto;
            flex-grow: 1;
        }
		.container2 {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: auto;
            flex-grow: 1;
        }

        .product {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin: 10px;
            width: 300px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.2s;
			position: relative; /* Nécessaire pour positionner la bannière */
			display: inline-block; /* Permet d'afficher les produits en ligne */
			margin: 20px; /* Espacement autour des produits */
		}
		
		.bannerproduct {
			background-color: #fbd935; /* Couleur de fond pour la bannière "Nouveau" */
			color: #000; /* Couleur du texte */
			padding: 5px 10px; /* Espacement interne */
			border-radius: 5px; /* Coins arrondis */
			position: absolute; /* Positionnement absolu */
			font-weight: bold; /* Texte en gras */
			z-index: 10; /* Assure que la bannière est au-dessus du produit */
		
		}

		.bannerproduct.new {
			top: 10px; /* Positionner en haut à gauche */
			left: 10px; /* Positionner à gauche */
		}
		
		.bannerproduct.out-of-stock {
			background-color: #ce4f1f; /* Couleur de fond pour la bannière "Out of Stock" */
			color: #fff; /* Couleur du texte pour "Out of Stock" */
			top: 10px; /* Positionner en haut à droite */
			right: 10px; /* Positionner à droite */
		}

        .product:hover {
            transform: scale(1.05);
        }

        .product img {
            max-width: 100%;
            border-radius: 8px;
        }

        .price {
            font-size: 1.2em;
            color: #e67e22;
            margin: 10px 0;
        }

        select {
            margin: 10px 0;
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #ccc;
            width: 100%;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .wishlist-button,
        .zoom-button,
        .details-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            flex: 1;
            margin: 5px;
        }

        .wishlist-button:hover,
        .zoom-button:hover,
        .details-button:hover {
            background-color: #45a049;
        }

		.popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            padding: 20px;
            width: 600px; /* Largeur de la popup agrandie */
            max-width: 90%; /* Responsive */
        }

        .popup img {
            max-width: 100%;
            border-radius: 8px;
        }

        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .details-popup {
            background: #e9f7f9;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        .details-popup h2 {
            margin: 0;
            color: #333;
        }

        .details-popup p {
            margin: 10px 0;
        }

        .shop-button {
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            width: 100%;
        }

        .shop-button:hover {
            background-color: #0056b3;
        }


        .filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .filter select,
        .filter input {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 48%;
            font-size: 1em;
        }
		
        .wishlist-button,
        .zoom-button,
        .details-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            flex: 1; /* Permet aux boutons de prendre une largeur égale */
            margin: 5px; /* Ajoute un espace entre les boutons */
        }

        .wishlist-button:hover,
        .zoom-button:hover,
        .details-button:hover {
            background-color: #45a049;
        }

        .wishlist {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            text-align: center;
        }
		
		.wishlist-button.in-wishlist {
			background-color: orange; /* Couleur quand le produit est dans la wishlist */
		}
		
		.wishlist-button.not-in-wishlist {
			background-color: #4CAF50; /* Couleur quand le produit n'est pas dans la wishlist */
		}
		
		
		#wishlist {
            margin-top: 40px;
            background: #fff;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            text-align: center;
        }

       
		#total2 {
            font-weight: bold;
            margin-top: 15px;
        }
		table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
		/*pagination*/
		
		#pagination {
            margin-top: 20px;
            text-align: center;
            width: 100%; /* Prendre toute la largeur */
        }

        #pagination button {
            margin: 0 5px; /* Espacement entre les boutons */
        }
		
		/* Style du bouton Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 100px; /* Positionne au-dessus du bouton WhatsApp */
            right: 20px;
            background-color: #263485;
            color:#fbd935;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            z-index: 1000;
            display: none; /* Masqué par défaut */
        }

        .back-to-top:hover {
            background-color: #0056b3;
        }
/*fin de page*/		
		.contact p {
   		 margin: 5px 0; /* Marge entre les paragraphes de contact */
		}

		.copyright {
			text-align: center; /* Centrer le texte des droits d'auteur */
			margin-top: 15px; /* Marge au-dessus du copyright */
		}
		.map-container {
			margin: 15px 0; /* Marge au-dessus et au-dessous de la carte */
			text-align: center; /* Centre le conteneur de la carte */
			margin: 20px 0; /* Espace autour de la carte */
			border-radius: 15px; /* Bords arrondis pour l'iframe */
		}

		footer {
			background-color: #8BC34A; /*#263485;*/
			color: white;
			padding: 20px 0;
			height:auto;
			margin-top: 20px; /* Ajoute de l'espace au-dessus du footer */
		}
		
		.footer-container {
			display: flex;
			justify-content: space-around; /* Espace égal entre les colonnes */
			max-width: 1200px; /* Largeur maximale */
			margin: auto; /* Centrer le footer */
		}
		
		.footer-column {
			flex: 1; /* Chaque colonne prend un espace égal */
			padding: 10px;
			text-align: center; /* Centrer le texte dans chaque colonne */
		}
		
		.footer-column h3 {
			border-bottom: 2px solid #ce4f1f; /* Ligne sous le titre */
			padding-bottom: 5px;
		}
		
		.footer a {
			color: #fbd935;
			text-decoration: none;
		}
		
		.footer a:hover {
			text-decoration: underline;
		}
		.style2 {color: #FFFFFF}
		

/*style entete*/

		.header {
            background-color:#8BC34A; /*#263485; /* Couleur de fond */
            color: #FFFFFF; /* Couleur du texte blanche */
            padding: 10px 20px; /* Ajustement du padding */
            text-align: left; /* Alignement à gauche du texte */
            font-size: 14px; /* Taille du texte */
            display: flex;
            justify-content: space-between; /* Espace entre les items */
            align-items: center; /* Centrer verticalement */
            flex-wrap: wrap; /* Permettre le retour à la ligne */
			height: 120px; /* Hauteur fixe */
			
        }

        .header img {
            height: 20px; /* Taille de l'icône d'aide */
            margin-left: 5px; /* Espacement à gauche de l'image */
        }
		.marquee {
            white-space: nowrap; /* Empêche le retour à la ligne */
            overflow: hidden; /* Cache le contenu débordant */
            width: 100%; /* Prend toute la largeur */
            box-sizing: border-box; /* Inclut le padding dans la largeur */
			/*margin-top:20px;*/
        }

        .marquee-content {
            display: inline-block;
            animation: marquee 60s linear infinite; /* Animation de défilement */
        }

        @keyframes marquee {
            0% { transform: translate(100%, 0); }
            100% { transform: translate(-100%, 0); }
        }

		.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ffffff; /* Couleur de fond blanche */
            padding: 15px 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre */
			
			
        }

        .navbar img {
            height: 100px; /* Hauteur du logo */
        }

        .nav-links {
            display: flex;
            gap: 30px; /* Espacement entre les liens */
            position: relative; /* Pour positionner les sous-menus */
        }

        .nav-links a {
            color: #000000; /* Couleur du texte noire */
            text-decoration: none;
            font-size: 16px;
            position: relative; /* Position pour les sous-menus */
            transition: color 0.3s;
            text-transform: uppercase; /* Mettre le texte en majuscules */
            font-weight: bold; /* Mettre le texte en gras */
        }

        .nav-links a:hover {
            color: #0b923b; /* Couleur au survol */
        }

        /* Styles pour les sous-menus */
        
		.dropdown {
            position: relative; /* Position pour le sous-menu */
        }

        .sub-menu {
            display: none; /* Cacher le sous-menu par défaut */
            position: absolute; /* Positionner le sous-menu */
            background-color: #000000; /* Couleur de fond noire pour le sous-menu */
            color: #FFFFFF; /* Couleur du texte blanche */
            padding: 10px;
            border-radius: 5px; /* Coins arrondis */
            top: 100%; /* Placer le sous-menu juste en dessous de l'élément parent */
            left: 0;
            width: 200px; /* Largeur fixe pour tous les sous-menus */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre du sous-menu */
            z-index: 1; /* Assurer que le sous-menu est au-dessus */
        }

        .dropdown:hover .sub-menu {
            display: block; /* Afficher le sous-menu au survol */
        }

        .sub-menu a {
            color: #FFFFFF; /* Couleur du texte des sous-menus en blanc */
            display: block; /* Chaque lien dans le sous-menu occupe une ligne */
            padding: 5px 0; /* Espacement interne des liens */
            text-transform: capitalize; /* Mettre la première lettre en majuscule et le reste en minuscule */
            font-weight: bold; /* Mettre le texte des sous-menus en gras */
            transition: color 0.3s; /* Transition pour la couleur */
        }

        .sub-menu a:hover {
            color: #0b923b; /* Couleur au survol des sous-menus */
            text-decoration: underline; /* Souligner au survol */
        }

        /* Styles pour le menu hamburger */
        .menu-toggle {
            display: none; /* Cacher le hamburger par défaut */
            flex-direction: column;
            cursor: pointer;
        }

        .bar {
            height: 3px;
            width: 25px;
            background-color: #000000; /* Couleur des barres du hamburger en noir */
            margin: 3px 0; /* Espacement entre les barres */
            transition: background-color 0.3s; /* Transition pour la couleur */
        }

        .menu-toggle:hover .bar {
            background-color: #0b923b; /* Couleur des barres au survol */
        }
		
		 /* Styles pour la bannière */
       
	    .banner {
            background-image: url('freshshop-master/freshshop-master/images/all-bg-title.jpg'); /* Image de fond */
            background-size: cover; /* Couvre toute la bannière */
            background-position: center; /* Centre l'image de fond */
            text-align: center; /* Centrer le texte */
            padding: 40px; /* Espacement interne */
            color: #FFFFFF; /* Couleur du texte en blanc */
            position: relative; /* Nécessaire pour le positionnement de l'image d'huile */
        }

        .banner-content {
            position: relative; /* Pour le positionnement des éléments internes */
            z-index: 2; /* S'assurer que le texte est au-dessus de l'image de fond */
			padding: 0 10%; /* Ajout de padding horizontal pour les petits écrans */
        }

        .oil-image {
			width: 20%; /* Ajuster la taille à un pourcentage */
			max-width: 100px; /* Limite maximale pour les grands écrans */
			margin-top: 20px; /* Espacement au-dessus de l'image d'huile */
			z-index: 2; /* S'assurer que l'image est au-dessus de l'arrière-plan */
		}


        .slogan {
            font-size: 18px; /* Taille de la police pour le slogan */
            margin-top: 10px; /* Espacement au-dessus du slogan */
            font-weight: bold; /* Mettre le texte en gras */
        }


	/* page index*/

</style>