/* --- Variables Identitaires Avantage Loisirs --- */
:root {
  --al-violet: #9B2B8A;      /* Le violet du logo */
  --al-violet-deep: #7a216d; /* Version sombre pour les survol */
  --al-yellow: #FFD700;      /* Le jaune solaire pour l'action */
  --al-gray-light: #F9FAFB;  /* Gris très clair pour la sobriété */
  --al-text: #374151;        /* Gris ardoise pour le texte pro */
}

/* --- Barre de Réassurance (Top Bar) --- */
/* On la rend plus fine et pro */
.header-nav {
  background-color: var(--al-gray-light) !important;
  border-bottom: 1px solid #E5E7EB;
  font-size: 0.85rem;
}

/* --- Le Corps du Header --- */
#header {
  background: #ffffff !important;
  /* On ajoute une bordure basse violette qui rappelle la vague du logo */
  border-bottom: 3px solid var(--al-violet) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Optimisation du Logo (PC & Mobile) */
.header-bottom__logo img {
  max-height: 70px !important; /* Taille idéale pour la netteté */
  width: auto !important;
  transition: transform 0.3s ease;
}

.header-bottom__logo img:hover {
  transform: scale(1.02); /* Effet discret au survol */
}

/* --- Barre de Recherche "Pilule" --- */
#search_widget form {
  border-radius: 50px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFF !important;
  overflow: hidden;
  max-width: 500px;
}

#search_widget input[type="text"] {
  padding-left: 20px !important;
  border: none !important;
}

#search_widget .ps-searchbar__magnifier {
  color: var(--al-violet) !important;
  margin-right: 10px;
}

/* --- Menu de Navigation (Desktop) --- */
.ps-mainmenu__tree-link {
  color: var(--al-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.2rem 1rem !important;
  transition: all 0.2s ease-in-out;
}

.ps-mainmenu__tree-link:hover {
  color: var(--al-violet) !important;
  background: rgba(155, 43, 138, 0.04) !important;
}

/* Ligne active sous le menu */
.ps-mainmenu__tree-item--active .ps-mainmenu__tree-link {
  border-bottom: 2px solid var(--al-violet);
}

/* --- Le Panier (Impact Visuel) --- */
.blockcart {
  background: var(--al-gray-light);
  border-radius: 8px;
  padding: 5px 12px !important;
  transition: background 0.3s;
}

.blockcart:hover {
  background: #f3f4f6;
}

/* La pastille de notification en JAUNE */
.header-block__badge {
  background-color: var(--al-yellow) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(0,0,0,0.1);
}

/* --- Adaptabilité Mobile (Responsive) --- */
@media (max-width: 767px) {
  .header-bottom__logo img {
    max-height: 50px !important; /* Plus petit sur mobile */
  }
  
  #header {
    border-bottom-width: 2px !important;
  }

  /* On s'assure que le menu mobile utilise nos couleurs */
  .ps-mainmenu--mobile {
    border-left: 4px solid var(--al-violet) !important;
  }
}
/* --- Re-structuration du Header Avantage Loisirs --- */

/* On force la recherche à prendre de la place au centre */
#_desktop_ps_searchbar {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 auto !important;
}

/* On déplace le Menu Principal dans la barre du bas */
.ps-mainmenu--desktop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -55px; /* Ajustez selon la hauteur de votre menu */
    display: flex;
    justify-content: center; /* Centre le menu parfaitement */
    background: #fff;
}

/* Le conteneur du Header doit permettre ce positionnement */
.header-top {
    position: relative;
    padding-bottom: 60px !important; /* Laisse l'espace pour le menu en dessous */
}

/* --- Finition du Menu --- */
.ps-mainmenu__desktop ul#top-menu {
    display: flex;
    gap: 15px;
}