/* ==========================================================================
   Materiautec Theme - Header
   Navigation style reemployez.fr : epure, blanc, bleu marine
   ========================================================================== */

/* --- Header principal --- */
#header {
  background-color: var(--mt-bg-root);
  box-shadow: var(--mt-shadow-light);
}

/* Supprime le bandeau banner par defaut */
.header-banner {
  display: none;
}

/* --- Barre de navigation superieure --- */
.header-nav {
  background-color: var(--mt-bg-root);
  border-bottom: none;
  max-height: 72px;
  padding: 0 30px;
}

.header-nav .container {
  max-width: 100%;
  padding: 0;
}

/* --- Zone logo + menu principal --- */
.header-top {
  background-color: var(--mt-bg-root);
  padding: 12px 30px;
  border-bottom: 1px solid var(--mt-grey-light);
}

.header-top .container {
  max-width: 100%;
}

/* Logo */
#_desktop_logo a img,
.header-top .logo {
  max-height: 40px;
}

/* --- Navigation liens --- */
#_desktop_top_menu .top-menu > li > a,
.header-top-right a {
  color: var(--mt-text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: none;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

#_desktop_top_menu .top-menu > li > a:hover,
.header-top-right a:hover {
  color: var(--mt-secondary);
}

/* --- Icones header (panier, user) --- */
.header-nav .cart-preview .header .material-icons,
.header-nav .user-info .material-icons {
  color: var(--mt-text-primary);
  font-size: 24px;
}

.header-nav .cart-preview:hover .header .material-icons,
.header-nav .user-info:hover .material-icons {
  color: var(--mt-secondary);
}

/* Badge panier */
.header-nav .cart-products-count {
  background-color: var(--mt-secondary);
  color: var(--mt-text-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--mt-radius-round);
}

/* --- Responsive mobile --- */
@media (max-width: 767px) {
  .header-nav {
    padding: 0 15px;
  }

  .header-top {
    padding: 10px 15px;
  }
}