/* Menu fixe */

   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       padding: 0px;
       z-index: 1000;
   }

   /* Bande noire top */
   .top-bar {
       background-color: #282828;
       color: #fff;
       padding: 5px 10%;
       text-align: right;
       width: 100%;
       display: flex;
       justify-content: flex-end;

   }

   .top-bar i {
       margin-left: 20px;
       color: #fff;
       cursor: pointer;

   }

   /* ===== MENU DESKTOP ===== */
   .menu-desktop {
       width: 100%;
       background-color: white;
       border-bottom: 1px solid #e1e1e1;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }

   .menu-container {
       max-width: 1140px;
       margin: auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 80px;
   }

   /* Logo */
   .menu-container .logo {
       margin-right: 30px;
   }

   .menu-container .logo img {
       vertical-align: middle;
       transition: opacity 0.3s;
   }

   .menu-container .logo img:hover {
       opacity: 0.8;
   }

   /*end logo*/

   /* Menu principal */
   .main-menu {
       list-style: none;
       display: flex;
       margin: 0;
       padding: 0;
   }

   /* Liens menu principal */
   .main-menu li {
       position: relative;
   }

   .main-menu li a {
       display: block;
       color: #444;
       text-decoration: none;
       padding: 28px 20px;
       transition: all 0.3s ease;
       font-weight: 500;
   }

   .main-menu a:hover,
   .main-menu a.active {
       background: #9b8e68;
       color: #fff;
   }

   /* ===== SOUS-MENU ===== */
   .submenu {
       position: absolute;
       top: 100%;
       left: auto;
       right: -180px;
       background-color: white;
       border: 1px solid #e1e1e1;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
       display: none;
       width: 450px;
       padding: 20px;
       z-index: 1001;
       border-radius: 0 0 4px 4px;
       animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       transform-origin: top;
   }

   @keyframes scaleIn {
       0% {
           transform: scaleY(0);
           opacity: 0;
       }

       100% {
           transform: scaleY(1);
           opacity: 1;
       }
   }

   .has-submenu:hover .submenu {
       display: flex;
   }

   .submenu-column {
       flex: 1;
       padding: 0 10px;
   }

   .submenu h3 {
       color: #9b8e68;
       margin-bottom: 12px;
       font-size: 15px;
       font-weight: 600;
       padding-bottom: 5px;
       border-bottom: 1px dashed #e1e1e1;
   }

   .submenu ul {
       list-style: none;
       padding: 0;
   }

   .submenu ul li a {
       padding: 6px 6px;
       color: #555;
   }

   .submenu ul li a:hover {
       color: #ffffff;
       background-color: #9b8e68;
   }


   /* ===== MENU MOBILE ===== */
   /* ===== VISIBILITÉ  ===== */
   .menu-mobile {
       display: none;
       background-color: #ffffff;
       font-family: Arial, sans-serif;
       width: 100%;
       padding-left: 2rem;
       padding-right: 2rem;

   }



   /* Header mobile */
   .mobile-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
   }

   /* Bouton menu hamburger  */
   .mobile-toggle {
       font-size: 26px;
       background: none;
       border: none;
       cursor: pointer;
       color: #333;
   }

   .mobile-toggle span {
       display: block;
       width: 25px;
       height: 3px;
       background: #444;
       margin: 5px 0;
       transition: all 0.3s;
   }

   /* Liste du menu  accueil, produits, etc. */
   .mobile-menu {
       list-style: none;
       padding: 0;
       margin: 0;
       display: none;
       flex-direction: column;
       /* fermé par défaut */
       border-bottom: 1px solid #e1e1e1;
       animation: fadeInDown 0.5s ease forwards;
       opacity: 0;
       transform: translateY(-10px);
   }

   @keyframes fadeInDown {
       0% {
           opacity: 0;
           transform: translateY(-20px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* Activer le menu mobile */
   .mobile-menu.active {
       display: flex;

   }

   /* Liens menu */
   .mobile-menu li a {
       display: block;
       padding: 14px 16px;
       text-decoration: none;
       color: #333;
       border-top: 1px solid #eee;
       font-size: 16px;
   }

   /* Hover  */
   .mobile-menu li a:hover {
       background-color: #f5f5f5;
   }

   /* Sous-menus */
   .has-submenu .submenu-mobile {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
   }

   /* Activer le sous-menu */
   .has-submenu.active .submenu-mobile {
       max-height: 500px;
       margin-left: 2rem;
   }

   /*titre sous-menu mobile*/
   .submenu-mobile h3 {
       color: #9b8e68;
       margin-bottom: 12px;
       font-size: 15px;
       font-weight: 700;
       padding: 8px 0;
       /*border-top: 2px dashed #e1e1e1;*/
   }

   /* Bouton pour dérouler le sous-menu */
   .submenu-toggle {
       width: 100%;
       background: none;
       border: none;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 16px;
       padding: 12px;
       cursor: pointer;
       border-top: 1px solid #eee;
   }

   /* Icône de flèche */
   .has-submenu.active .icon {
       transform: rotate(180deg);
       transition: transform 0.3s ease;
   }

   .submenu ul {
       list-style: none;
       padding: 0;
   }

   /*liens sous-menu mobile*/
   .submenu-mobile ul li a {
       color: #666;
       padding: 8px 0;
       display: block;
       transition: all 0.2s;
       font-size: 14px;
   }

   /*hover liens sous-menu mobile*/
   .submenu-mobile ul li a:hover {
       color: #ffffff;
       padding-left: 5px;
       text-decoration: none;
       background-color: #9b8e68;
   }

   @media (max-width: 992px) {
       body {
           padding-top: 42px;

       }

       .menu-desktop {
           display: none;
       }

       .menu-mobile {
           display: block;
           background: #fff;
           border-bottom: 1px solid #e1e1e1;
       }

       /* Animation bouton hamburger */
       .mobile-toggle.active span:nth-child(1) {
           transform: rotate(45deg) translate(5px, 5px);
       }

       .mobile-toggle.active span:nth-child(2) {
           opacity: 0;
       }

       .mobile-toggle.active span:nth-child(3) {
           transform: rotate(-45deg) translate(7px, -6px);
       }
   }