/* HEADER */
.app-header {
    position: relative;
    z-index: 100;
    background: #fff;
  }
  
  /* TOP BAR */
  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;          /* IMPORTANT */
    padding: 0;       /* padding horizontal seulement */
  }
  
  .header-left, .header-right {
    display: flex;
    align-items: center;
  }
  
  .header-left {
    display: flex;
    align-items: center;
  }
  
  .header-right .cart-btn:hover {
      color: #0073aa; /* couleur hover icône */
  }
  
  /* Compteur panier en badge orange */
  .header-right .cart-btn .cart-count {
      position: absolute;
      top: 10px;
      right: 7px;
      background-color: #ff7f00; /* orange vif */
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      border-radius: 100%;
      padding: 4px 4px;
      line-height: 1;
      min-width: 18px;
      text-align: center;
      box-sizing: border-box;
  }
  
  /* NAV BAR */
  /* === OMBRE NIVEAU 2 HEADER (vers le bas uniquement) === */
  /* === NAV BAR – OMBRE BAS STYLE COLISSIMO === */
  .header-nav {
    background-color: #F9F9F9;
    height: 38px;
  
    position: relative;
    z-index: 20;
  
    /* Ombre franche vers le bas */
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.07);
  }
  
  
  /* Centrage du menu lui-même */
  .header-nav .nav-menu,
  .main-header-bar .main-header-menu {
    justify-content: center;
  }
  
  
  /* === MENU ACTIF – INDICATION PAGE COURANTE === */
  .header-nav .nav-menu li.current-menu-item > a,
  .header-nav .nav-menu li.current_page_item > a,
  .header-nav .nav-menu li.current-menu-ancestor > a {
    color: #333; /* bleu Colissimo */
    font-weight: 600;
    position: relative;
  }
  
  /* Barre active sous l’item */
  .header-nav .nav-menu li.current-menu-item > a {
    background: rgba(0,112,186,0.08);
    padding: 10px 10px;
  }
  
  
  /* === MENU NIVEAU 2 – Séparateurs verticaux (style Colissimo) === */
  .main-header-menu {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Séparateurs */
  .main-header-menu > li:not(:last-child)::after {
    content: "|";
    margin: 0 18px;
    color: #d6d6d6;
    font-weight: 300;
  }
  
  /* Nettoyage */
  .main-header-menu > li {
    position: relative;
  }
  
  
  .nav-menu {
    display: flex;
    gap: 30px;
    padding: 5px 20px;
    padding-top:5pt;
    list-style: none;
  }
  
  .nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
  }
  
  .branding {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .custom-logo {
    width: 170px;
    object-fit: contain;
  }