/**
 * ================================================
 *                  NAVIGATION CSS
 * ================================================
 * 
 * Fichier principal de style pour le système de navigation du thème WordPress
 * 
 * ARCHITECTURE DU SYSTÈME :
 * - Navigation desktop avec sous-menus dropdown
 * - Menu mobile overlay plein écran avec navigation hiérarchique
 * - Icônes interactives (recherche, profil, panier) avec états actifs
 * - Système responsive avec breakpoints définis
 * - Gestion des états actifs pour pages courantes
 * 
 * COULEURS PRINCIPALES :
 * - Fond header : var(--color-black)
 * - Texte principal : var(--color-white) 
 * - Accent/actif : var(--color-turquoise)
 * - Mobile overlay : var(--color-beige)
 * 
 * BREAKPOINTS :
 * - Desktop : > 1180px (navigation horizontale)
 * - Mobile : ≤ 1180px (menu hamburger + overlay)
 * 
 * Structure du fichier :
 * 1. Utilitaires et classes de base
 * 2. Header principal et logo
 * 3. Navigation principale desktop
 * 4. Icônes header et interactions
 * 5. Menu hamburger mobile
 * 6. Sous-menus desktop (dropdowns)
 * 7. Barre de recherche
 * 8. Menu mobile overlay et navigation
 * 9. Media queries responsive
 */

/* #region Utilitaires et classes de base */

/**
 * Classe utilitaire globale pour masquer des éléments
 * Utilisée par JavaScript pour contrôler l'affichage des sous-menus et overlays
 */
.d-none {
   display: none !important;
}

/* #endregion */

/* #region Header principal et structure de base */

/**
 * CONTAINER PRINCIPAL DU HEADER
 * 
 * Structure de base qui contient tous les éléments de navigation.
 * - Position sticky : header fixe lors du scroll avec transition fluide
 * - Z-index élevé : garantit que le header reste au-dessus du contenu
 * - Couleurs : fond noir avec texte blanc pour contraste élevé
 * - Transition : effet fluide pour apparition/disparition et changement de taille
 */
.header-wrapper {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   background-color: var(--color-black);
   color: var(--color-white);
   z-index: 1000;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * HEADER INTERNE - LAYOUT FLEXBOX TROIS ZONES
 * 
 * Architecture en 3 colonnes équilibrées :
 * 1. Logo (gauche) - largeur fixe 200px
 * 2. Navigation (centre) - positionnement absolu centré
 * 3. Icônes (droite) - largeur fixe 200px
 * 
 * Cette approche garantit un centrage parfait de la navigation
 * même si les zones gauche/droite ont des contenus de tailles différentes.
 * 
 * Padding adaptatif : plus grand par défaut, se réduit au scroll
 */
.header-wrapper .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-md);
   border-bottom: var(--color-dark-grey) 1px solid;
   margin: 0 auto;
   position: relative;
}

/**
 * ÉTAT SCROLLÉ DU HEADER
 * 
 * Effets visuels appliqués automatiquement lors du scroll :
 * - Ombre portée pour effet de profondeur
 * - Classe ajoutée/retirée par JavaScript selon position scroll
 */
.header-wrapper.scrolled {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* #endregion */

/* #region Logo et branding */

/**
 * ZONE LOGO - STRUCTURE ET DIMENSIONNEMENT
 * 
 * Largeur fixe de 200px pour maintenir l'équilibre du layout.
 * Contient deux versions du logo pour la compatibilité desktop/mobile.
 */

.header-wrapper .header__logo {
   flex: 0 0 200px; /* Largeur fixe pour équilibrer le layout */
}

/**
 * DIMENSIONNEMENT DU LOGO
 * 
 * Système adaptatif avec transitions fluides :
 * - Hauteur plus grande par défaut pour impact visuel
 * - Réduction au scroll pour header compact
 * - Largeur automatique pour préserver les proportions
 * - Transition fluide pour tous les changements de taille
 */
.header-wrapper .header__logo img {
   height: 60px;
   width: auto;
}

/**
 * LOGOS ADAPTATIFS DESKTOP/MOBILE
 * 
 * Deux logos pour s'adapter au contexte :
 * - Logo desktop (blanc) : affiché par défaut
 * - Logo mobile (noir) : affiché quand menu mobile ouvert (fond beige)
 */
.header-wrapper .header__logo .header-logo {
   display: block;
}

/* Logo desktop visible par défaut */
.header-wrapper .header__logo .header-logo-desktop {
   display: block;
}

/* Logo mobile masqué par défaut */
.header-wrapper .header__logo .header-logo-mobile {
   display: none;
}

/* Basculement des logos quand menu mobile ouvert */
body.mobile-menu-open .header-wrapper .header__logo .header-logo-desktop {
   display: none;
}

body.mobile-menu-open .header-wrapper .header__logo .header-logo-mobile {
   display: block;
}

/* PAGE D'ACCUEIL : SYSTÈME LOGO HERO/NAVIGATION */

/* Logo navigation masqué par défaut sur page d'accueil */
body.home .header-wrapper .header__logo {
   opacity: 0;
   transform: scale(0.8);
   transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Logo navigation visible au scroll sur page d'accueil */
body.home.scrolled .header-wrapper .header__logo {
   opacity: 1;
   transform: scale(1);
}

/* Logo navigation visible quand menu mobile ouvert, même sur homepage */
body.home.mobile-menu-open .header-wrapper .header__logo {
   opacity: 1;
   transform: scale(1);
}

/* Logo hero avec transition */
.hero-logo {
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.4s ease, transform 0.4s ease;
   height: 100px;
   width: auto;
   margin-bottom: var(--space-xl);
   object-fit: contain;
}

/* Logo hero masqué au scroll */
body.scrolled .hero-logo {
   opacity: 0;
   transform: scale(0.8);
}


@media (min-width: 1025px) {
   .hero-logo {
      height: 150px;
   }
}

/* #endregion */

/* #region Navigation principale desktop */

/**
 * CONTAINER DE NAVIGATION - CENTRAGE ABSOLU PARFAIT
 * 
 * Technique de centrage avancée :
 * 1. Position absolue pour sortir du flux flexbox
 * 2. left: 50% pour positionner le bord gauche au centre
 * 3. transform: translateX(-50%) pour centrer l'élément sur lui-même
 * 
 * Cette méthode garantit un centrage parfait indépendamment
 * de la taille des éléments gauche/droite du header.
 */
.header-wrapper .header__nav {
   flex: 1;
   display: flex;
   justify-content: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: auto;
}

/**
 * LISTE DE NAVIGATION HORIZONTALE
 * 
 * Layout flexbox horizontal avec espacement uniforme.
 * Suppression des styles de liste par défaut pour un rendu propre.
 */
.header-wrapper .nav__list {
   display: flex;
   gap: var(--space-md);
   list-style: none;
   margin: 0;
   padding: 0;
   justify-content: center;
}

/**
 * ITEMS DE NAVIGATION INDIVIDUELS
 * 
 * - Position relative : pour le positionnement des sous-menus
 * - white-space: nowrap : évite la cassure des liens sur plusieurs lignes
 */
.header-wrapper .nav__item {
   position: relative;
   white-space: nowrap;
}

/**
 * LIENS DE NAVIGATION - STYLE DE BASE
 * 
 * Design minimaliste avec :
 * - Couleur blanche sur fond noir pour contraste
 * - Espacement lettres légèrement augmenté pour lisibilité
 * - Transitions fluides pour tous les effets hover
 * - Padding équilibré pour zone de clic confortable
 */
.header-wrapper .nav__link {
   color: var(--color-white);
   text-decoration: none;
   font-size: var(--font-size-sm);
   padding: var(--space-xs) var(--space-sm);
   transition: var(--transition-fast);
   letter-spacing: 1px;
}

/**
 * INDICATEUR VISUEL POUR SOUS-MENUS
 * Curseur pointeur pour signaler l'interactivité des liens avec sous-menus
 */
.header-wrapper .nav__link.has-submenu {
   cursor: pointer;
}

/**
 * ÉTATS INTERACTIFS DES LIENS
 * 
 * Tous les états d'interaction (hover, active, focus) utilisent
 * la couleur turquoise pour une expérience utilisateur cohérente.
 */
.header-wrapper .nav__link:hover,
.header-wrapper .nav__link:active,
.header-wrapper .nav__link:focus {
   color: var(--color-turquoise);
}

/**
 * ÉTATS ACTIFS ET PAGES COURANTES
 * 
 * Système de classes WordPress + classes custom pour identifier :
 * - .active : état temporaire (menu ouvert)
 * - .current-page : page actuellement visitée
 * - Classes WP natives : current-menu-item, current-menu-ancestor, etc.
 * 
 * Toutes ces classes appliquent la couleur turquoise pour signaler l'état actif.
 */
.header-wrapper .nav__link.active,
.header-wrapper .nav__link.current-page,
.header-wrapper .current-menu-item .nav__link,
.header-wrapper .current-menu-ancestor .nav__link,
.header-wrapper .current_page_item .nav__link,
.header-wrapper .current_page_ancestor .nav__link {
   color: var(--color-turquoise);
}

/* #endregion */

/* #region Icônes header et interactions */

/**
 * ZONE ICÔNES DROITE - STRUCTURE
 * 
 * Largeur fixe identique au logo (200px) pour équilibrer le layout.
 * Alignement à droite avec espacement uniforme entre les icônes.
 */
.header-wrapper .header__icons {
   flex: 0 0 200px;
   display: flex;
   gap: var(--space-md);
   align-items: center;
   justify-content: flex-end;
}

/**
 * GROUPE ICÔNES DESKTOP
 * 
 * Container pour les icônes visibles uniquement en desktop.
 * Masqué automatiquement sur mobile via media queries.
 */
.desktop-icons {
   display: flex;
   gap: var(--space-md);
   align-items: center;
}

/**
 * BOUTONS ICÔNES - STYLE DE BASE
 * 
 * Design unifié pour toutes les icônes du header :
 * - Forme circulaire avec padding uniforme
 * - Transitions fluides pour effets hover
 * - Icônes blanches par défaut (filtrées)
 * - Zone de clic confortable (44px minimum recommandé)
 */
.header-wrapper .icon-button {
   background: none;
   border: none;
   padding: var(--space-md);
   cursor: pointer;
   transition: var(--transition-fast);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   aspect-ratio: 1 / 1;
   width: 56px;
   height: 56px;
}

/**
 * EFFET HOVER SUR ICÔNES
 * 
 * Au survol :
 * - Fond turquoise apparait (cercle parfait)
 * - Icône devient noire (inversion du filtre)
 * 
 * Crée un feedback visuel clair pour l'utilisateur.
 */
.header-wrapper .icon-button:hover {
   background-color: var(--color-turquoise);
}

.header-wrapper .icon-button:hover img{
   filter: brightness(1) invert(0); /* Icône noire sur fond turquoise */
}

/**
 * ICÔNES - DIMENSIONNEMENT ET FILTRES
 * 
 * - Taille uniforme 30px pour cohérence visuelle
 * - Filtre blanc par défaut (brightness(0) invert(1))
 * - Transition sur filtre pour animation fluide
 */
.header-wrapper .icon-button img {
   width: 30px;
   height: 30px;
   filter: brightness(0) invert(1); /* Icône blanche */
   transition: var(--transition-fast);
   display: block;
   object-fit: contain;
}

/**
 * ICÔNE PANIER - STRUCTURE AVEC COMPTEUR
 * 
 * Container avec positionnement relatif pour permettre
 * le placement absolu du badge de comptage d'articles.
 */
#header-cart-icon .cart-icon-container {
  position: relative;
}

/**
 * COMPTEUR D'ARTICLES PANIER
 * 
 * Badge circulaire positionné en bas à droite de l'icône panier.
 * - Position absolue pour chevauchement avec l'icône
 * - Dimensions fixes pour cercle parfait
 * - Fond turquoise permanent pour visibilité optimale
 */
#header-cart-icon .cart-icon-container .cart-count {
  position: absolute;
  bottom: -2px;
  right: -6px;
  font-size: 10px;
  width: 12px;
  height: 12px;
  background-color: var(--color-turquoise);
  color: var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * EFFET HOVER SUR COMPTEUR PANIER
 * 
 * Au survol de l'icône panier, le span du compteur devient noir
 * pour contraster avec le fond turquoise du bouton
 */
#header-cart-icon:hover .cart-count {
   background-color: var(--color-turquoise);
   border: 1px solid var(--color-black);
}

/**
 * CONTENU DU COMPTEUR
 * 
 * Span interne pour le nombre, avec dimensions identiques
 * pour maintenir la forme circulaire parfaite.
 */

/**
 * ÉTAT ACTIF DES ICÔNES
 * 
 * Quand une icône est active (ex: sous-menu ouvert, page courante) :
 * - Fond turquoise permanent (même style que hover)
 * - Icône noire pour contraste
 * 
 * Géré par JavaScript qui ajoute/retire la classe 'active'.
 */
.header-wrapper .icon-button.active {
   background-color: var(--color-turquoise);
}

.header-wrapper .icon-button.active img {
   filter: brightness(1) invert(0);
}

/* #endregion */

/* #region Menu hamburger mobile */

/**
 * BOUTON HAMBURGER - AFFICHAGE CONDITIONNEL
 * 
 * - Masqué par défaut sur desktop
 * - Visible sur mobile via media queries
 * - Grande taille pour accessibilité tactile
 */
.header-wrapper .hamburger-menu {
   display: none;
   font-size: 30px;
   color: var(--color-white);
}

/**
 * ICÔNES HAMBURGER - SYSTÈME DE BASCULE
 * 
 * Deux icônes Bootstrap Icons :
 * - bi-list : icône hamburger (3 barres)
 * - bi-x : icône croix de fermeture
 * 
 * Par défaut, seul le hamburger est visible.
 */
.header-wrapper .hamburger-menu .hamburger-icon {
   display: block;
}

.header-wrapper .hamburger-menu .close-icon {
   display: none;
}

/**
 * BASCULE AUTOMATIQUE DES ICÔNES
 * 
 * Quand le menu mobile est ouvert (classe sur body) :
 * - Hamburger disparaît
 * - Croix apparait avec z-index élevé pour rester cliquable
 * 
 * Cette logique est synchronisée avec l'overlay JavaScript.
 */
body.mobile-menu-open .header-wrapper .hamburger-menu .hamburger-icon {
   display: none;
}

body.mobile-menu-open .header-wrapper .hamburger-menu .close-icon {
   display: block;
   right: 0;
   bottom: 0;
   z-index: 9998; /* Au-dessus de l'overlay mais sous le header */
}

/* #endregion */

/* #region Sous-menus desktop (dropdowns) */

/**
 * CONTAINER SOUS-MENUS - OVERLAY PLEINE LARGEUR
 * 
 * Architecture dropdown :
 * - Position absolue sous le header (top: 100%)
 * - Largeur totale de l'écran (left: 0, right: 0)
 * - Fond noir uniforme avec bordure grise en bas
 * - Z-index identique au header pour cohérence
 * 
 * Cette approche crée un effet d'overlay élégant qui s'étend
 * sur toute la largeur, même si le contenu est centré.
 */
.header-wrapper .submenu-wrapper {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   background-color: var(--color-black);
   border-bottom: 1px solid var(--color-grey);
   z-index: 1000;
}

/**
 * CONTENU SOUS-MENUS - ZONE CENTRÉE
 * 
 * Le contenu réel est limité en largeur et centré :
 * - Max-width pour éviter des lignes trop longues
 * - Margin auto pour centrage horizontal
 * - Padding généreux pour aération visuelle
 */
.header-wrapper .submenu-content {
   max-width: 800px;
   margin: 0 auto;
   padding: var(--space-lg);
}

/**
 * LISTE SOUS-MENUS - LAYOUT VERTICAL CENTRÉ
 * 
 * Organisation verticale des liens de sous-menu :
 * - Flexbox en colonne pour alignement précis
 * - Centrage des éléments avec align-items
 * - Suppression des styles de liste par défaut
 */
.header-wrapper .submenu-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/**
 * ITEMS SOUS-MENUS - LARGEUR COMPLÈTE
 * 
 * Chaque item prend toute la largeur disponible
 * pour une zone de clic optimale.
 */
.header-wrapper .submenu-item {
   width: 100%;
}

/**
 * LIENS SOUS-MENUS - DESIGN ET LAYOUT
 * 
 * Structure flex pour organiser :
 * 1. Icône (gauche) - identité visuelle
 * 2. Texte (centre) - libellé du lien
 * 3. Flèche (droite) - indication d'action
 * 
 * Taille de police augmentée pour hiérarchie visuelle claire.
 */
.header-wrapper .submenu-link {
   color: var(--color-white);
   text-decoration: none;
   font-size: var(--font-size-xl);
   padding-top: var(--space-sm);
   display: flex;
   align-items: center;
}

/**
 * EFFET HOVER SOUS-MENUS
 * Couleur turquoise au survol pour cohérence avec navigation principale
 */
.header-wrapper .submenu-link:hover {
   color: var(--color-turquoise);
}

/**
 * ÉTATS ACTIFS SOUS-MENUS
 * 
 * Même système que navigation principale :
 * - Classes JavaScript (.active, .current-page)
 * - Classes WordPress natives
 * 
 * Permet de maintenir l'état actif des liens de sous-menu
 * et du lien parent correspondant.
 */
.header-wrapper .submenu-link.active,
.header-wrapper .submenu-link.current-page,
.header-wrapper .current-menu-item .submenu-link,
.header-wrapper .current-menu-ancestor .submenu-link,
.header-wrapper .current_page_item .submenu-link,
.header-wrapper .current_page_ancestor .submenu-link {
   color: var(--color-turquoise);
}

/**
 * ICÔNES DANS SOUS-MENUS
 * 
 * Deux types d'icônes :
 * 1. Icône principale (.icon-url) - grande taille pour identification
 * 2. Flèche (.fleche) - petite, filtrée en blanc, indication d'action
 */
.header-wrapper .submenu-link img.icon-url {
   width: 40px;
   height: 40px;
   margin-right: 20px;
}

.header-wrapper .submenu-link img.fleche {
   width: 15px;
   height: 15px;
   margin-left: 20px;
   filter: brightness(0) invert(1); /* Flèche blanche */
}

/* #endregion */

/* #region Barre de recherche */

/**
 * CONTAINER RECHERCHE - CENTRAGE DANS SOUS-MENU
 * 
 * La recherche utilise le même système de sous-menu que les autres dropdowns.
 * Layout centré avec largeur maximale pour optimiser la lisibilité.
 */
.header-wrapper .search-container {
   display: flex;
   justify-content: center;
   width: 100%;
}

/**
 * WRAPPER CHAMP DE RECHERCHE
 * 
 * Container avec position relative pour permettre
 * le positionnement absolu de l'icône de recherche à droite.
 */
.header-wrapper .search-input-wrapper {
   position: relative;
   width: 100%;
   max-width: 600px; /* Largeur optimale pour lisibilité */
}

/**
 * CHAMP DE SAISIE RECHERCHE - DESIGN MINIMALISTE
 * 
 * Style épuré avec :
 * - Fond transparent pour intégration dans header noir
 * - Bordure inférieure uniquement (style moderne)
 * - Focus visible avec bordure blanche
 * - Police et taille cohérentes avec le reste du site
 */
.header-wrapper .search-input {
   width: 100%;
   padding: var(--space-md);
   padding-right: 0px; /* Espace pour icône droite */
   border: none;
   border-bottom: 1px solid var(--color-grey);
   background-color: transparent;
   color: var(--color-white);
   font-size: var(--font-size-lg);
   font-family: var(--font-primary);
   border-radius: 0px; /* Supprime arrondis navigateur */
}

/**
 * PLACEHOLDER RECHERCHE
 * Couleur grise pour distinguer du texte saisi en blanc
 */
.header-wrapper .search-input::placeholder {
   color: var(--color-grey);
}

/**
 * ÉTAT FOCUS RECHERCHE
 * 
 * Au focus (clic dans le champ) :
 * - Suppression outline navigateur
 * - Bordure inférieure devient blanche pour feedback visuel
 */
.header-wrapper .search-input:focus {
   outline: none;
   border-bottom-color: var(--color-white);
}

/**
 * ICÔNE RECHERCHE - POSITIONNEMENT
 * 
 * Icône décorative positionnée à droite du champ :
 * - Position absolue pour chevauchement
 * - Centrage vertical avec transform
 * - Filtrée en blanc pour intégration
 * - pointer-events: none pour éviter interférence avec saisie
 */
.header-wrapper .search-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   filter: brightness(0) invert(1);
   pointer-events: none; /* Traverse les clics */
}

/**
 * LEGACY: CONTAINER DE TRANSITION
 * 
 * Code hérité pour compatibilité avec anciennes versions.
 * Peut être supprimé si plus utilisé.
 */
.header-wrapper .submenu-container {
   opacity: 1;
   transform: translateY(0);
   transition: all 0.3s ease;
   visibility: visible;
}

.header-wrapper .submenu-container:not([v-show]) {
   display: none;
}

/* #endregion */

/**
 * BREAKPOINT ÉCRANS MOYENS : TABLETTE/PETIT DESKTOP (769px - 1080px)
 * 
 * Adaptations pour écrans moyens où la navigation desktop est visible
 * mais l'espace est plus contraint :
 * - Réduction des espacements navigation
 * - Optimisation des tailles pour éviter débordements
 * - Maintien de la lisibilité et accessibilité
 */
@media (min-width: 769px) and (max-width: 1080px) {

   /**
    * ZONE LOGO ET ICÔNES - LARGEUR RÉDUITE
    * 
    * Réduction des largeurs fixes pour donner plus d'espace à la navigation.
    */
   .header-wrapper .header__logo,
   .header-wrapper .header__icons {
      flex: 0 0 120px; /* Réduit encore plus : de 200px à 120px */
   }

   /**
    * LOGO - TAILLE RÉDUITE
    * 
    * Réduction de la taille du logo par défaut pour s'adapter
    * aux contraintes d'espace des écrans moyens.
    */
   .header-wrapper .header__logo .logo-default {
      height: 45px; /* Réduit de 60px à 45px */
   }

   .header-wrapper .header__logo .logo-desktop {
      height: 35px;
      top: 15px;
   }

   /**
    * ICÔNES - ESPACEMENT RÉDUIT
    * 
    * Réduction de l'espacement entre les icônes pour gagner de l'espace.
    */
   .desktop-icons {
      gap: var(--space-sm); /* Réduit de --space-md à --space-sm */
   }

   /**
    * BOUTONS ICÔNES - TAILLE RÉDUITE
    * 
    * Réduction de la taille des boutons icônes pour optimiser l'espace
    * tout en maintenant une zone de clic suffisante.
    */
   .header-wrapper .icon-button {
      width: 40px;  /* Réduit de 56px à 40px */
      height: 40px;
      padding: var(--space-xs); /* Réduit le padding */
   }

   /**
    * ICÔNES - DIMENSIONS RÉDUITES
    * 
    * Adaptation des dimensions des icônes pour s'accorder 
    * avec les boutons plus petits.
    */
   .header-wrapper .icon-button img {
      width: 20px; /* Réduit de 30px à 20px */
      height: 20px;
   }

   /**
    * HEADER - PADDING AJUSTÉ
    * 
    * Légère réduction du padding du header pour optimiser l'espace.
    */
   .header-wrapper .header {
      padding: var(--space-sm) var(--space-md);
   }
}

@media (min-width: 769px) and (max-width: 992px) {
   /**
    * NAVIGATION - ESPACEMENT RÉDUIT
    * 
    * Réduction de l'espacement entre les liens de navigation
    * pour éviter les débordements sur écrans moyens.
    */
   .header-wrapper .nav__list {
      gap: var(--space-sm); /* Réduit de --space-md à --space-sm */
      gap: 0.4rem;
   }

   /**
    * LIENS NAVIGATION - PADDING OPTIMISÉ
    * 
    * Légère réduction du padding pour gagner de l'espace
    * tout en maintenant une zone de clic confortable.
    */
   .header-wrapper .nav__link {
      padding: var(--space-xs) var(--space-xs); /* Réduit le padding horizontal */
      font-size: 0.6rem;
   }
}

/**
 * BREAKPOINT PRINCIPAL : MOBILE/TABLETTE (≤ 768px)
 * 
 * Transformation majeure de l'interface :
 * 1. Navigation desktop → masquée
 * 2. Icônes desktop → masquées (sauf panier)
 * 3. Menu hamburger → visible
 * 4. Réorganisation layout header pour mobile
 * 
 * Ce breakpoint à 1180px est choisi pour :
 * - Permettre affichage navigation complète sur écrans moyens
 * - Éviter débordement sur tablettes en portrait
 * - Maintenir lisibilité optimale
 */
@media (max-width: 768px) {

   /**
   * ADAPTATION ICÔNES POUR MENU MOBILE OUVERT
   * 
   * Quand le menu mobile est ouvert (fond beige) :
   * - Couleur des icônes passe au noir
   * - Filtre changé pour adapter au nouveau contexte
   * 
   * Assure la lisibilité sur le fond beige du menu mobile.
   */
   body.mobile-menu-open .header-wrapper .icon-button {
   color: var(--color-black);
   }

   body.mobile-menu-open .header-wrapper .icon-button img {
   filter: brightness(0); /* Icônes noires sur fond beige */
   }
   
   .header-wrapper .submenu-wrapper {
      display: none;
   }


   /* #region Menu mobile overlay */

   /**
   * OVERLAY PLEIN ÉCRAN MENU MOBILE
   * 
   * Design contrastant avec le header pour distinguer clairement :
   * - Header : fond noir (maintien contexte)
   * - Overlay : fond beige (nouveau contexte navigation)
   * 
   * Cette approche crée une hiérarchie visuelle claire et moderne.
   */
   .mobile-menu-overlay {
      background-color: var(--color-beige);
   }

   /**
   * CONTENU MENU MOBILE - LAYOUT VERTICAL CENTRÉ
   * 
   * Organisation optimisée pour navigation tactile :
   * - Hauteur calculée : 100vh - hauteur header (93px)
   * - Centrage vertical du contenu principal
   * - Padding pour éviter les bords d'écran
   * - Espace en bas pour icônes fixées
   */
   .mobile-menu-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 93px);
      height: calc(100dvh - 93px);
      justify-content: center;
      padding-left: var(--space-md);
      padding-right: var(--space-md);
      padding-bottom: var(--space-lg);
   }

   /**
   * TRANSFORMATION HEADER POUR MENU MOBILE
   * 
   * Quand menu mobile ouvert (classe sur <body>) :
   * - Header devient fixe pour rester visible pendant scroll
   * - Changement de couleurs : noir → beige
   * - Z-index maximum pour rester au-dessus de tout
   * - Bordure supprimée pour intégration fluide
   * 
   * Cette transformation crée une expérience fluide et cohérente.
   */
   body.mobile-menu-open .header-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
   background-color: var(--color-beige);
   color: var(--color-black);
   }

   /**
   * BLOCAGE SCROLL PENDANT NAVIGATION MOBILE
   * 
   * Évite la confusion utilisateur et améliore les performances
   * en empêchant le scroll de la page principale derrière l'overlay.
   */
   body.mobile-menu-open {
      overflow: hidden;
   }

   /* #endregion */

   /* #region Navigation mobile */

   /**
   * LISTE NAVIGATION MOBILE - STRUCTURE DE BASE
   * 
   * Reset complet des styles de liste pour intégration propre
   * dans l'interface mobile tactile.
   */
   .mobile-nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
   }

   /**
   * LIENS NAVIGATION MOBILE - DESIGN TACTILE
   * 
   * Conception optimisée pour interaction tactile :
   * - Taille de police importante (--font-size-xxl)
   * - Flexbox pour étalement sur largeur complète
   * - Couleur noire sur fond beige (contraste élevé)
   * - Support boutons ET liens (polyvalence)
   * 
   * Le système gère :
   * - Liens directs (<a href="...">)
   * - Boutons avec sous-menus (<button data-mobile-submenu="...">)
   */
   .mobile-nav-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      color: var(--color-black) !important;
      font-family: var(--font-primary);
      font-size: var(--font-size-xl);
      line-height: 1.3;
      text-decoration: none;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      vertical-align: baseline;
   }

   /**
   * LIENS IMBRIQUÉS NAVIGATION MOBILE
   * 
   * Gestion des liens <a> à l'intérieur d'éléments .mobile-nav-link :
   * - Couleur noire forcée (!important)
   * - Suppression décoration par défaut
   */
   .mobile-nav-link a,
   .mobile-nav-link a:visited {
      color: var(--color-black) !important;
      text-decoration: none;
   }

   /**
   * ÉTATS ACTIFS NAVIGATION MOBILE
   * 
   * Système d'états identique au desktop :
   * - .current-page : page actuellement visitée
   * - .current-menu-item : item de menu actif
   * - .current-menu-ancestor : item parent d'une page active
   * 
   * Couleur turquoise pour maintenir la cohérence visuelle
   * avec l'ensemble du système de navigation.
   */
   .mobile-nav-link.current-page,
   .current-menu-item .mobile-nav-link,
   .current-menu-ancestor .mobile-nav-link {
      color: var(--color-turquoise) !important;
   }

   /**
   * ÉTATS ACTIFS SOUS-MENUS MOBILE
   * 
   * IMPORTANT : Volontairement limité aux classes directes
   * pour éviter que tous les sous-liens deviennent turquoise.
   * 
   * Seuls les liens avec .current-page ou dans .current-menu-item
   * sont mis en évidence, pas ceux dans .current-menu-ancestor.
   */
   .mobile-submenu-link.current-page,
   .current-menu-item .mobile-submenu-link {
      color: var(--color-turquoise) !important;
   }

   /**
   * ICÔNE CHEVRON - ANIMATION DE ROTATION
   * 
   * Transition fluide pour l'icône de dépliage des sous-menus.
   * Gérée par JavaScript (bi-chevron-down ↔ bi-chevron-up).
   */
   .mobile-nav-link i {
      transition: transform 0.3s ease;
   }

   /* #endregion */

   /* #region Sous-menus mobile */

   /**
   * LISTE SOUS-MENUS MOBILE
   * 
   * Structure imbriquée avec indentation visuelle :
   * - Reset styles de liste
   * - Margin pour créer l'indentation
   */
   .mobile-submenu {
      list-style: none;
      padding: 0;
      margin: var(--space-md) 0 var(--space-md) var(--space-sm);
      line-height: 1.2;
   }

   .mobile-submenu .mobile-submenu-item {
      margin-bottom: 4px;
   }

   /**
   * LIENS SOUS-MENUS MOBILE - STYLE COMPACT
   * 
   * Version compacte des liens principaux :
   * - Taille réduite par rapport aux liens parents
   * - Layout flex pour icône + texte
   * - Couleur noire cohérente
   * - Double display (legacy, à nettoyer)
   */
   .mobile-submenu-link {
      display: block; /* Legacy */
      color: var(--color-black) !important;
      text-decoration: none;
      font-size: var(--font-size-lg);
      font-family: var(--font-primary);
      display: flex; /* Actuel */
      align-items: center;
   }

   /**
   * ICÔNES SOUS-MENUS MOBILE
   * 
   * Taille réduite par rapport aux sous-menus desktop :
   * - 30px au lieu de 40px pour adaptation mobile
   * - Espacement optimisé pour écrans tactiles
   */
   .mobile-submenu-link .icon-url {
      width: 30px;
      height: 30px;
      margin-right: 8px;
   }

   /**
   * EFFET HOVER SOUS-MENUS MOBILE
   * 
   * Feedback tactile léger avec fond semi-transparent.
   */
   .mobile-submenu-link:hover {
      background-color: rgba(0, 0, 0, 0.1);
   }

   /* #endregion */

   /* #region Icônes mobile (bas d'écran) */

   /**
   * CONTAINER ICÔNES MOBILES - POSITION FIXE
   * 
   * Icônes d'accès rapide positionnées en bas à gauche :
   * - Position absolue par rapport au menu mobile
   * - Toujours visibles et accessibles
   * - Espacement uniforme entre icônes
   * 
   * Contient : recherche, profil (et potentiellement d'autres)
   */
   .mobile-bottom-icons {
      position: absolute;
      bottom: var(--space-md);
      left: var(--space-md);
      display: flex;
      gap: var(--space-md);
   }

   /**
   * BOUTONS ICÔNES MOBILES - DESIGN TURQUOISE
   * 
   * Style distinctif pour les actions secondaires :
   * - Cercles turquoise contrastant avec fond beige
   * - Icônes noires pour lisibilité optimale
   * - Layout vertical pour étiquettes optionnelles
   * - Taille tactile confortable
   * 
   * Ce design crée une hiérarchie claire :
   * 1. Navigation principale (texte noir, grande taille)
   * 2. Actions secondaires (icônes turquoise, taille moyenne)
   */
   .mobile-icon-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      background: none;
      border: none;
      border-radius: 50px;
      background-color: var(--color-turquoise);
      color: var(--color-black) !important;
      text-decoration: none;
      cursor: pointer;
      padding: var(--space-md);
   }

   /**
   * ICÔNES MOBILES - FILTRES ET DIMENSIONS
   * 
   * - Taille 24px pour équilibre visuel dans cercle turquoise
   * - Filtre noir (brightness(0)) pour contraste sur fond turquoise
   */
   .mobile-icon-button img {
      width: 24px;
      height: 24px;
      filter: brightness(0); /* Icônes noires */
   }

   /**
   * TEXTES ICÔNES MOBILES (OPTIONNEL)
   * 
   * Étiquettes textuelles sous les icônes si nécessaire.
   * Actuellement inutilisé mais prêpaté pour évolutions futures.
   */
   .mobile-icon-button span {
      font-size: var(--font-size-sm);
      color: var(--color-black) !important;
   }

   /**
   * EFFET HOVER ICÔNES MOBILES
   * 
   * Feedback tactile léger avec réduction d'opacité.
   */
   .mobile-icon-button:hover {
      opacity: 0.8;
   }

   /* #endregion */

   /* #region Media queries responsive */

   body.mobile-menu-open .header-wrapper .header {
      background-color: var(--color-beige);
      color: var(--color-black);
      border-bottom-color: transparent;
   }

   /**
   * BASCULEMENT AUTOMATIQUE DES LOGOS
   * 
   * Quand la classe 'mobile-menu-open' est ajoutée au body :
   * - Le header change de couleur (noir → beige)
   * - Le logo-default est masqué
   * - Le logo-desktop reste toujours visible
   * 
   * Cette logique est gérée par JavaScript dans header.php
   */
   body.mobile-menu-open .header-wrapper .header__logo .logo-default,
   body.mobile-menu-open .header-wrapper .header__logo .logo-desktop {
      display: none;
   }

   body.mobile-menu-open .header-wrapper .header__logo .logo-mobile {
      display: block;
      opacity: 1;
   }

   /**
    * MASQUAGE NAVIGATION DESKTOP
    * 
    * La navigation horizontale devient inutilisable sur petit écran.
    * Remplacée par le système mobile overlay.
    */
   .header-wrapper .header__nav {
      display: none;
   }

   /**
    * MASQUAGE ICÔNES DESKTOP
    * 
    * Les icônes recherche/profil sont déplacées dans le menu mobile.
    * Seul le panier reste visible car utilisé fréquemment.
    */
   .header-wrapper .desktop-icons {
      display: none;
   }

   /**
    * AFFICHAGE MENU HAMBURGER
    * 
    * Le bouton hamburger devient l'élément déclencheur
    * de la navigation mobile.
    */
   .header-wrapper .hamburger-menu {
      display: flex;
   }

   /**
    * RÉORGANISATION HEADER MOBILE
    * 
    * Nouveau layout optimisé :
    * - Logo : prend l'espace disponible (flex: 1)
    * - Icônes : ordre inversé pour UX (panier, puis hamburger)
    * - Espacement maintenu pour cohérence visuelle
    */
   .header-wrapper .header__icons {
      display: flex;
      flex-direction: row-reverse; /* Panier à droite, hamburger à côté */
      flex: 0 0 auto;
      gap: var(--space-md);
   }

   /**
    * EXPANSION LOGO MOBILE
    * 
    * Le logo prend tout l'espace central disponible
    * pour maintenir l'équilibre visuel.
    */
   .header-wrapper .header__logo {
      flex: 1;
   }
}

/**
 * BREAKPOINT DESKTOP (≥ 1025px)
 * 
 * Sécurité pour garantir que le menu mobile ne s'affiche jamais
 * sur desktop, même en cas de problème JavaScript.
 * 
 * Ajustements mineurs :
 * - Forcer masquage overlay mobile (!important)
 * - Ajuster taille icônes pour précision desktop
 */
@media (min-width: 1181px) {

   /**
    * SÉCURITÉ : MASQUAGE FORCÉ OVERLAY MOBILE
    * 
    * !important pour éviter conflits avec classes JavaScript
    * qui pourraient laisser l'overlay ouvert sur desktop.
    */
   .mobile-menu-overlay {
      display: none !important;
   }

   /**
    * OPTIMISATION ICÔNES DESKTOP
    * 
    * Taille légèrement réduite (24px au lieu de 30px)
    * pour précision curseur et esthetic desktop.
    */
   .header-wrapper .icon-button img {
      width: 24px;
      height: 24px;
   }
}

/* #endregion */

/**
 * FIN DU FICHIER NAVIGATION.CSS
 * 
 * Ce fichier constitue le cœur du système de navigation du thème.
 * Toute modification doit prendre en compte :
 * - Compatibilité desktop/mobile
 * - Accessibilité (tailles tactiles, contrastes)
 * - Performance (transitions, z-index)
 * - Cohérence avec le design system global
 * 
 * Pour maintenance :
 * - Tester sur tous breakpoints
 * - Vérifier interactions JavaScript (header.php)
 * - Valider avec WordPress standard (classes natives)
 */