/* ================================================================================= */
/* ============================= 1) STYLES DE BASE ================================== */
/* ================================================================================= */
.en-tete {
    position: sticky; /* Keep header at the top when scrolling */
    top: 0; /* Initial position */
    left: 0;
    right: 0; /* Ensure full width */
    z-index: 1030; /* Below the weather widget (1040) */
    background-color: #ffffff; /* Set a background color, essential for sticky/fixed */
    transition: top 0.3s ease; /* Animate the top property change */
    display: flex;
    flex-direction: column; /* empile d'abord la nav principale, ensuite la secondaire */
}

/* ~~~~~ Réinitialisation universelle des listes (suppression des puces) ~~~~~ */
ul,
ol,
.nav-links,
.nav-links li,
.liste-menu-utilisateur,
.liste-menu-utilisateur li,
.sous-menu,
.sous-menu li,
.sous-sous-menu,
.sous-sous-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ~~~~~ Mise en page globale pour la navigation principale ~~~~~ */
.navigation-principale {
    display: flex; /* Utilisation de flexbox pour l'agencement */
    justify-content: space-between; /* Répartition de l'espace entre les éléments */
    align-items: center; /* Alignement vertical centré */
    padding: 10px 0px; /* Espacement intérieur */
    background-color: #ffffff; /* Fond clair et moderne */
    position: relative; /* Position relative pour le contexte */
    flex-wrap: wrap;       /* Permet le retour à la ligne */
    z-index: 2; /* plus grand que la secondaire */
    width: 100%;
}

/* Conteneur principal du logo */
.logo {
    display: flex;                  /* Empile verticalement */
    flex-direction: column;
    align-items: center;            /* Centre horizontalement */
    text-align: center;
    margin-top: 5px;
  }
  
  /* Image du logo dans un cercle */
  .logo-img {
    height: 30px;                   /* Taille du logo */
    width: 30px;
    border-radius: 50%;             /* Cercle parfait */
    object-fit: cover;              /* Remplit le cercle sans déformation */
    border: 2px solid #304459;      /* Contour bleu */
    background-color: #fff;         /* Fond blanc dans le cercle */
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
    margin-top: -18px;              /* Rapproche l'image du texte incurvé */
  }
  
  /* Zone SVG contenant le texte incurvé */
  .logo-curve {
    width: 160px;                   /* Largeur du demi-cercle */
    height: 40px;                   /* Hauteur plus faible = texte plus proche */
    overflow: visible;              /* Affiche tout le texte */
  }
 
/* Texte incurvé dans le SVG */
.logo-curve text {
    font-size: 25px;              /* ✅ Taille du texte */
    font-family: 'Roboto', sans-serif; /* ✅ Police utilisée */
    font-weight: bold;            /* ✅ Texte en gras */
    fill: #ffffff;                /* ✅ Couleur du texte */
  }

/* Barre de recherche */
.barre-recherche {
    display: flex; /* Utilisation de flexbox */
    align-items: center; /* Centrage vertical */
    flex-grow: 0.5; /* Prend de l'espace selon besoin */
    margin: 0 20px; /* Marges horizontales */
    border: 1px solid #007bff; /* Harmonisation de la bordure */
    border-radius: 30px; /* Arrondi moderne */
    overflow: visible; /* Permet l'affichage des sous-menus */
    background-color: #f0f8ff; /* Légère teinte bleue */
}

/* Champ de recherche */
.barre-recherche input {
    padding: 10px 16px; /* Espacement intérieur */
    width: 100%; /* Prend toute la largeur disponible */
    border: none; /* Pas de bordure */
    border-radius: 0; /* Pas de bords arrondis internes */
    background: transparent; /* Hérite du conteneur */
    color: #333; /* Texte foncé */
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

/* Bouton de recherche */
.barre-recherche button {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    padding: 10px 16px; /* Espacement intérieur */
    cursor: pointer; /* Curseur en pointeur */
    color: #007bff; /* Bleu cohérent */
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.barre-recherche button:hover,
.barre-recherche button:focus {
    color: #0056b3;
    outline: none;
}

/* Boutons icônes utilisateur */
/* Boutons icônes utilisateur */
.icones-utilisateur {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icones-utilisateur button {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    padding: 8px 12px; /* Espacement intérieur */
    cursor: pointer; /* Curseur en pointeur */
    color: #007bff; /* Icônes en bleu moderne */
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 6px;
}

.icones-utilisateur button:hover,
.icones-utilisateur button:focus {
    color: #0056b3;
    background-color: rgba(0, 123, 255, 0.1);
    outline: none;
}


/* ================================================================================= */
/* ====================== 2) NAVIGATION SECONDAIRE - COMMUN ======================== */
/* ================================================================================= */
.navigation-secondaire {
    background-color: #ffffff; /* Fond clair */
    padding: 10px 20px; /* Espacement intérieur */
    position: relative; /* Position relative */
    z-index: 1; /* Au-dessus de la navigation principale */
    width: 100%;
}

/* ================================================================================= */
/* ====================== 3) MEGA MENU DESKTOP (MENU-MEGA) ========================= */
/* ================================================================================= */
.menu-mega {
    display: none; /* Caché par défaut, affiché via JS */
    position: absolute; /* Positionné par rapport au parent */
    top: 100%; /* Directement en dessous */
    left: 0; /* Aligné à gauche */
    width: 100%; /* Prend toute la largeur */
    background: white; /* Fond blanc */
    border: 1px solid transparent; /* Bordure transparente */
    z-index: 1000; /* Au-dessus des autres éléments */
    padding: 20px; /* Espacement intérieur */
}

/* Liste des catégories du mega menu */
.categories {
    display: flex; /* Flexbox pour l'agencement */
    justify-content: space-between; /* Espace égal entre les éléments */
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    gap: 5px; /* Espacement réduit entre les éléments */
    padding: 0; /* Pas de padding */
    margin: 0 auto; /* Centrage automatique */
    max-width: 1350px; /* Largeur maximale */
    width: 100%; /* Utiliser toute la largeur disponible */
}

/* Style de chaque catégorie */
.categorie {
    text-align: center; /* Texte centré */
    position: relative; /* Position relative */
    display: inline-block; /* Affichage en ligne */
    flex: 1; /* Distribution égale de l'espace */
}

/* Effet sur survol (pour compatibilité) */
.categorie:hover {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Bouton de catégorie */
.categorie button {
    display: flex; /* Flexbox */
    flex-direction: column; /* Colonnes */
    align-items: center; /* Centrage horizontal */
    padding: 10px 15px; /* Espacement intérieur */
    transition: all 0.3s ease; /* Transition douce */
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur en pointeur */
}

/* Icône dans la catégorie */
.categorie button i {
    margin-bottom: 8px; /* Marge sous l'icône */
    font-size: 1.5rem; /* Taille de l'icône */
    color: #007bff; /* Icône en bleu moderne */
}

/* Catégorie active */
.categorie.active button {
    font-weight: bold; /* Texte en gras */
    color: #007bff; /* Texte en bleu */
}

/* Bannières haut */
.bannieres-haut {
    display: flex; /* Alignement horizontal */
    gap: 20px; /* Espacement entre bannières */
    justify-content: center; /* Centrage horizontal */
    padding: 20px 0; /* Marge verticale */
  }

/* Bannière individuelle */
.banniere {
    width: 370px; /* Largeur fixe */
    height: 270px; /* Hauteur fixe */
    flex-shrink: 0; /* Pas de réduction automatique */
    background: #f5f5f5; /* Fond gris clair */
    border: 1px solid #ddd; /* Bordure grise */
    display: flex; /* Centrage du contenu */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    font-size: 18px; /* Taille du texte */
    color: #666; /* Couleur du texte */
    transition: transform 0.3s ease; /* Animation de zoom */
  }

  .banniere:hover {
    transform: scale(1.05); /* Zoom au survol */
    cursor: pointer; /* Curseur pointeur */
  }

/* Bannieres en bas du mega menu */
/* Bannières bas */
.bannieres-bas {
    display: flex; /* Alignement horizontal */
    gap: 30px; /* Espacement entre bannières */
    justify-content: center; /* Centrage horizontal */
    margin: 20px 0; /* Marges verticales */
    flex-wrap: wrap; /* Retour à la ligne si besoin */
  }

  

/* Style spécifique des bannières du bas */
.bannieres-bas .banniere {
    width: 555px; /* Largeur fixe */
    height: 259px; /* Hauteur fixe */
    flex-shrink: 0; /* Pas de réduction */
    background: #f5f5f5; /* Fond gris clair */
    border: 1px solid #ddd; /* Bordure grise */
    position: relative; /* Pour le texte centré */
    transition: transform 0.3s ease; /* Animation de zoom */
  }

  .bannieres-bas .banniere:hover {
    transform: scale(1.05); /* Zoom au survol */
    cursor: pointer; /* Curseur pointeur */
  }
  

/* Texte centré sur les bannières du bas */
.bannieres-bas .banniere::after {
    content: "760x259"; /* Texte */
    position: absolute; /* Position absolue */
    top: 50%; /* Centré verticalement */
    left: 50%; /* Centré horizontalement */
    transform: translate(-50%, -50%); /* Ajustement pour centrer */
    color: #666; /* Couleur du texte */
    font-size: 18px; /* Taille du texte */
}

/* Par défaut, le contenu est masqué */
.contenu-mega {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
    background-color: white;
    border: 1px solid transparent; /* Bordure transparente */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: var(--menu-width);
    max-height: none; /* Suppression de la hauteur maximale fixe */
    height: auto; /* Hauteur automatique */
    overflow-y: visible; /* Pas de défilement vertical par défaut */
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    transition: none !important; /* Désactivation totale des transitions */
    transition: none !important; /* Désactivation totale des transitions */
    transition: none !important; /* Suppression des transitions */
}
  

/* Lorsque le contenu est actif */
.contenu-mega.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block;
    max-height: min(600px, calc(100vh - 200px)); /* Hauteur dynamique réduite */
    overflow-y: auto; /* Activer le défilement uniquement si nécessaire */
}

/* Personnalisation de la scrollbar pour Webkit */
.contenu-mega::-webkit-scrollbar {
    width: 8px; /* Scrollbar fine (Chrome) */
  }
  .contenu-mega::-webkit-scrollbar-thumb {
    background: #ccc; /* Couleur de la poignée */
    border-radius: 4px; /* Bords arrondis */
  }
  .contenu-mega::-webkit-scrollbar-track {
    background: transparent; /* Fond de la scrollbar */
  }

  /* Sections en colonnes */
.sections-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  
  .section {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
  
  .section h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: #007bff;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .section h3 a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
  }
  
  .section h3 a:hover {
    text-decoration: underline;
  }
  
  .section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .section ul li {
    margin-bottom: 6px;
  }
  
  .section ul li a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
  }
  
  .section ul li a:hover {
    color: #007bff;
  }
  
  /* Responsive */
  @media (max-width: 992px) {
    .sections-wrapper {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 600px) {
    .sections-wrapper {
      grid-template-columns: 1fr;
    }
  }
/* ================================================================================= */
/* ======================= 4) PANIER (DESKTOP) ====================================== */
/* ================================================================================= */
.panier-container {
    position: relative; /* Position relative pour le menu panier */
}

/* Menu panier (affiché sur clic) */
.menu-panier {
    position: absolute; /* Position absolue */
    right: 0; /* Aligné à droite */
    top: 100%; /* Juste en dessous */
    background: white; /* Fond blanc */
    border: 1px solid #ddd; /* Bordure légère */
    padding: 15px; /* Espacement intérieur */
    min-width: 250px; /* Largeur minimale */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* Ombre légère */
    z-index: 10000; /* Au-dessus */
    display: none; /* Caché par défaut */
}

/* ================================================================================= */
/* =================== 5) ICÔNES DE NAVIGATION (DESKTOP) ============================ */
/* ================================================================================= */
/* ======================= DESKTOP NAVIGATION RIGHT – ICONES & PANIER ======================= */
.icones-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    justify-content: flex-end;
    width: 100%;
  }
  
  /* Boutons de navigation et du panier */
  .icones-navigation button,
  .icones-navigation .panier-container button {
    background: #fff; /* Fond blanc */
    border: 1px solid #007bff; /* Bordure bleue */
    padding: 8px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Boutons arrondis */
    cursor: pointer;
    color: #007bff;
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
    position: relative;
    flex-shrink: 0; /* Empêche les boutons de rétrécir */
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .icones-navigation button:hover,
  .icones-navigation .panier-container button:hover {
    background: #007bff;
    color: #fff;
    transform: scale(1.1);
  }
  
  /* Badge du panier */
  .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #007bff;
    color: #fff;
    padding: 4px 8px;
    border-radius: 50%;
    font-size: 0.75rem;
    min-width: 20px;
    text-align: center;
  }
  
  /* Menu panier Desktop */
  .menu-panier {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    min-width: 250px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: none;
    border-radius: 4px;
    transition: opacity 0.3s ease;
  }

  
/* ================================================================================= */
/* ================== 6) NAVIGATION SECONDAIRE (DESKTOP) ============================ */
/* ================================================================================= */
.desktop-only {
    display: none; /* Caché sur mobile */
}
.desktop-nav-container {
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: space-between; /* Répartition de l'espace */
    padding: 10px 0; /* Espacement vertical */
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 100%; /* Empêche le débordement */
    overflow: hidden; /* Cache le débordement */
}
.desktop-menu-left,
.desktop-menu-right {
    flex: 0 0 auto; /* Ne s'étend pas */
}
.desktop-nav-center {
    flex: 1 1 auto; /* S'étend pour occuper l'espace */
    min-width: 0; /* Permet au conteneur de rétrécir */
    overflow: hidden; /* Cache le débordement */
    margin: 0 10px; /* Marge pour éviter que les éléments se touchent */
}

/* Liens horizontaux centrés sur desktop */
@media (min-width: 769px) {
  .desktop-nav-center .nav-links {
    display: flex; /* Flexbox */
    justify-content: center; /* Centré horizontalement */
    list-style: none; /* Pas de puces */
    gap: 15px; /* Espacement réduit entre liens pour éviter le débordement */
    align-items: center; /* Centré verticalement */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de padding */
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le débordement */
  }
  
  /* Gestion des boutons de navigation pour éviter le débordement */
  .desktop-nav-center .nav-links li {
    flex-shrink: 1; /* Permet aux éléments de rétrécir si nécessaire */
    min-width: 0; /* Permet aux éléments de rétrécir en dessous de leur taille naturelle */
  }
  
  /* Style pour les boutons de navigation avec texte long */
  .desktop-nav-center .nav-links .um-bouton {
    max-width: 180px; /* Largeur maximale pour éviter le débordement */
    white-space: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si nécessaire */
    font-size: 0.9em; /* Taille de police légèrement réduite */
    padding: 8px 12px !important; /* Padding réduit */
  }
  
  /* Adaptation spéciale pour les traductions longues */
  .desktop-nav-center .nav-links .um-bouton[aria-label*="Cartes"],
  .desktop-nav-center .nav-links .um-bouton[aria-label*="Tarjetas"] {
    max-width: 160px; /* Largeur encore plus réduite pour les cartes cadeaux */
    font-size: 0.85em; /* Taille de police encore plus petite */
  }

  /* ================================================================================= */
/* ==================== HARMONISATION DES BOUTONS MENU NAVIGATION ================== */
/* ================================================================================= */
.nav-links .avec-sous-menu button,
.nav-links > li > button {
    background: none;
    border: none;
    color: #007bff;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-links .avec-sous-menu button:hover,
.nav-links .avec-sous-menu button:focus,
.nav-links > li > button:hover,
.nav-links > li > button:focus {
    color: #0056b3;
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 6px;
    outline: none;
}

.nav-links .sous-menu button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-links .sous-menu button:hover {
    background-color: #f0f8ff;
    color: #007bff;
}

.nav-links .sous-sous-menu button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-links .sous-sous-menu button:hover,
.nav-links .sous-sous-menu button:focus {
    background-color: #f5f5f5;
    color: #007bff;
}

}

.desktop-menu-left .bouton-menu {
    position: relative; /* Nécessaire pour ::after */
    z-index: 1;
    overflow: hidden;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05); /* Fond léger */
    border: 1px solid rgba(0, 123, 255, 0.2);
    border-radius: 8px;
    color: #007bff;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.1s ease;
    margin-left: 15px;
    backdrop-filter: blur(6px); /* 💎 effet verre flou */
    -webkit-backdrop-filter: blur(6px);
}

/* Animation clic */
.desktop-menu-left .bouton-menu:active {
    transform: scale(0.96); /* petit zoom arrière */
}

/* Effet au survol */
.desktop-menu-left .bouton-menu::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, #007bff, #00c6ff);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* Affichage du fond au hover */
.desktop-menu-left .bouton-menu:hover::after,
.desktop-menu-left .bouton-menu.active::after {
    transform: scaleX(1);
}

/* Texte blanc quand fond actif */
.desktop-menu-left .bouton-menu:hover,
.desktop-menu-left .bouton-menu.active {
    color: #fff;
}

.desktop-menu-right {
    position: relative;
    flex: 0 0 auto !important;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 140px; /* Largeur minimale pour éviter le rétrécissement */
    max-width: 200px; /* Largeur maximale pour éviter le débordement */
}

/* ================================================================================= */
/* ====== 7) NAVIGATION MOBILE (duplicata + styles spécifiques) ==================== */
/* ================================================================================= */
.mobile-only {
    display: none; /* Caché sur desktop */
}
.menu-header-line {
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: space-between; /* Espacement entre éléments */
    margin-top: 10px; /* Marge supérieure */

}
.mobile-nav-links,
.mobile-mega-menu {
    margin-bottom: 10px; /* Marge inférieure */
}
.icones-navigation-mobile {
    display: flex; /* Flexbox */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    gap: 1rem; /* Espacement entre icônes */
}
.panier-container-mobile {
    position: relative; /* Position relative */
    display: inline-block; /* Affichage en ligne */
}
.icone-panier-mobile {
    position: relative; /* Position relative pour le badge */
}

/* ===============================
   Styles spécifiques à la navigation secondaire mobile
   =============================== */
   .navigation-secondaire.mobile-only .menu-header-line button {
    background-color:  #f0f8ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 1rem;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1101;  /* Au-dessus de la navigation principale */
  }
  
  /* Bouton "M" (menu) */
  .navigation-secondaire.mobile-only .bouton-menu {
    background-color: #f0f8ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #007bff;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Boutons icônes (Accueil et Favoris) */
  .navigation-secondaire.mobile-only .icones-navigation-mobile button {
    background-color: #f0f8ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #007bff;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Bouton du panier mobile */
  .navigation-secondaire.mobile-only .panier-container-mobile .icone-panier-mobile {
    background-color: #f0f8ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Bouton de fermeture du menu mobile */
  .navigation-secondaire.mobile-only .close-menu {
    background-color: #f0f8ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Hover et focus commun à tous les boutons de cette section */
  .navigation-secondaire.mobile-only .menu-header-line button:hover,
  .navigation-secondaire.mobile-only .menu-header-line button:focus {
    background-color: #0056b3;
    transform: scale(1.05);
    outline: none;
  }
  
  /* Pour que les boutons icônes et du panier inversent les couleurs au survol */
  .navigation-secondaire.mobile-only .icones-navigation-mobile button:hover,
  .navigation-secondaire.mobile-only .panier-container-mobile .icone-panier-mobile:hover,
  .navigation-secondaire.mobile-only .icones-navigation-mobile button:focus,
  .navigation-secondaire.mobile-only .panier-container-mobile .icone-panier-mobile:focus {
    background-color: #007bff;
    color: #fff;
    transform: scale(1.1);
    outline: none;
  }

  /* Style du badge dans le bouton panier */
  .navigation-secondaire.mobile-only .badge {
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    position: absolute;
    top: -5px;
    right: -5px;
  }

  body.menu-mobile-ouvert .bouton-toggle-widget {
    display: none !important;
}

/* Correction du positionnement du widget météo pour mobile */
@media (max-width: 768px) {
  /* Supprimer les styles redondants */
}

/* ================================================================================= */
/* =================== 8) BADGE DU PANIER (MOBILE) ================================== */
/* ================================================================================= */
#badge-panier-mobile {
    position: absolute; /* Position absolue */
    top: -15px; /* Positionné en haut */
    right: -10px; /* Positionné à droite */
    background: #007bff; /* Fond bleu */
    color: white; /* Texte blanc */
    font-size: 0.75rem; /* Taille de texte réduite */
    font-weight: bold; /* Texte en gras */
    padding: 4px 4px; /* Espacement intérieur */
    border-radius: 50%; /* Forme circulaire */
    min-width: 18px; /* Largeur minimale */
    text-align: center; /* Texte centré */
    line-height: 1; /* Hauteur de ligne */
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre légère */
    transition: transform 0.2s ease-in-out, opacity 0.3s; /* Transition pour animation */
}
/* Masquer le badge s'il est vide */
#badge-panier-mobile:empty {
    display: none;
}
/* Animation pop pour le badge lors de l'ajout d'un article */
@keyframes pop {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.badge-pop {
    animation: pop 0.3s ease-in-out;
}

/* ================================================================================= */
/* ====== 9) LIENS DE NAVIGATION MOBILE (VERTICAL AVEC SOUS-MENUS) ================== */
/* ================================================================================= */
.nav-links-mobile {
    display: block;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    width: 100%;
}


.nav-links-mobile li {
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.nav-links-mobile li:last-child {
    border-bottom: none;
}

/* Boutons principaux du menu mobile */
.nav-links-mobile > li > .menu-parent-mobile > button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links-mobile > li > .menu-parent-mobile > button i:first-child {
    margin-right: 10px;
    color: #007bff;
    width: 20px;
    text-align: center;
}

.nav-links-mobile .toggle-icon-mobile {
    margin-left: auto;
    font-size: 0.8rem;
    color: #666;
    transition: transform 0.3s ease;
}

/* Style au survol/focus */
.nav-links-mobile > li > .menu-parent-mobile > button:hover,
.nav-links-mobile > li > .menu-parent-mobile > button:focus {
    background-color: #f0f8ff;
    color: #007bff;
    outline: none;
}
.nav-links-mobile > li > .menu-parent-mobile > button:focus .toggle-icon-mobile {
    color: #007bff;
}

/* Rotation de l'icône chevron quand le sous-menu est ouvert */
.nav-links-mobile button[aria-expanded="true"] .toggle-icon-mobile {
    transform: rotate(180deg);
}

/* Styles des sous-menus mobiles */
/* Sous-menus mobiles */
.nav-links-mobile .sous-menu-mobile {
    position: static;
    display: none;
    list-style: none;
    padding-left: 25px;
    margin: 0;
    background-color: #f9f9f9;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    left: auto;
    right: auto;
    box-shadow: none;
    border: none;
    min-width: unset;
}

.nav-links-mobile .sous-menu-mobile.open-mobile {
    display: block;
    max-height: 1000px;
}


.nav-links-mobile .sous-menu-mobile li {
    border-bottom: 1px dashed #ddd; /* Séparateur plus léger pour les sous-éléments */
    margin-bottom: 0;
}
.nav-links-mobile .sous-menu-mobile li:last-child {
    border-bottom: none;
}

.nav-links-mobile .sous-menu-mobile button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    color: #444;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links-mobile .sous-menu-mobile button:hover,
.nav-links-mobile .sous-menu-mobile button:focus {
    background-color: #e9f5ff;
    color: #007bff;
    outline: none;
}



/* Styles pour TOUS les sous-menus imbriqués dans la nav mobile */
.nav-links-mobile li ul {
    position: static !important; /* Force l'affichage en dessous */
    padding-left: 20px; /* Indentation de base */
    background-color: #f9f9f9; /* Fond de base */
    left: auto !important; 
    right: auto !important; 
    top: auto !important; 
    bottom: auto !important;
    box-shadow: none !important;
    border: none !important;
    min-width: unset !important;
    width: auto !important;
    transform: none !important;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Pour les sous-sous-menus, on renomme la classe */
.nav-links-mobile .sous-menu-mobile .sous-sous-menu-mobile {
    background-color: #f0f0f0;
    padding-left: 30px; /* Increase indentation for level 3+ */
}
.nav-links-mobile .sous-menu-mobile .sous-sous-menu-mobile .sous-sous-menu-mobile {
    background-color: #e8e8e8;
    padding-left: 40px; /* Increase indentation for level 4+ */
}

/* Règle générale pour tout sous-menu ou sous-sous-menu ouvert dans la nav mobile */
.nav-links-mobile .sous-menu-mobile.open-mobile,
.nav-links-mobile .sous-sous-menu-mobile.open-mobile {
    display: block;
    max-height: 1000px;
}

.nav-links-mobile .sous-sous-menu-mobile button {
    font-size: 0.9rem;
    color: #555;
    padding: 8px 15px;
}

.nav-links-mobile .sous-sous-menu-mobile button:hover,
.nav-links-mobile .sous-sous-menu-mobile button:focus {
    background-color: #e0f0ff;
}



/* ================================================================================= */
/* ========== 10) MEGA MENU MOBILE (accordéon + style) ============================== */
/* ================================================================================= */
.mobile-mega-menu {
    display: none; /* Caché par défaut */
    background: white; /* Fond blanc */
    border: 1px solid #ddd; /* Bordure légère */
    padding: 15px; /* Espacement intérieur */
    margin-top: 10px; /* Marge en haut */
    transform: translateX(-100%); /* Hors de l'écran à gauche */
    transition: transform 0.3s ease; /* Transition pour l'animation */
}
.mobile-mega-menu.active {
    display: block; /* Affiché lorsque actif */
    transform: translateX(0); /* Position normalisée */
}
.categories-mobile {
    display: flex; /* Flexbox */
    flex-direction: column; /* Disposition en colonne */
    gap: 10px; /* Espacement entre catégories */
    list-style: none; /* Pas de puces */
    padding: 0; /* Pas de padding */
    margin: 0; /* Pas de marge */
}
.categorie-mobile button {
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    gap: 8px; /* Espacement entre icône et texte */
    padding: 10px; /* Espacement intérieur */
    background: none; /* Pas de fond */
    border: 1px solid transparent; /* Bordure transparente */
    transition: background 0.3s; /* Transition de fond */
    width: 100%; /* Largeur complète */
    text-align: left; /* Texte aligné à gauche */
    cursor: pointer; /* Curseur en pointeur */
}
.categorie-mobile.active button,
.categorie-mobile button:hover {
    background: #007bff; /* Fond bleu lors du survol ou actif */
    color: #fff; /* Texte blanc */
}
.contenu-mega-mobile {
    margin-top: 15px; /* Marge en haut */
}
.contenu-mega-mobile-section {
    display: none; /* Caché par défaut */
}
.contenu-mega-mobile-section.active {
    display: block; /* Affiché lorsqu'actif */
}

/* ================================================================================= */
/* ====================== 11) HAMBURGER ET BOUTON FERMER =========================== */
/* ================================================================================= */
.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }


.hamburger-box {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}   


.hamburger-inner {
    width: 100%; /* Largeur complète */
    height: 2px; /* Hauteur de la ligne */
    background: #007bff; /* Ligne en bleu */
    position: absolute; /* Position absolue */
    top: 50%; /* Centré verticalement */
    transform: translate(-6px, -50%); /* Ajustement vertical */
    transition: transform 0.2s; /* Transition pour l'animation */
}
.hamburger-inner::before,
.hamburger-inner::after {
    content: ''; /* Contenu vide pour créer les lignes supplémentaires */
    width: 100%; /* Largeur complète */
    height: 2px; /* Hauteur de la ligne */
    background: #007bff; /* Couleur bleu */
    position: absolute; /* Position absolue */
    left: 0; /* Aligné à gauche */
    transition: transform 0.2s; /* Transition */
}
.hamburger-inner::before { top: -8px; } /* Ligne supérieure */
.hamburger-inner::after { top: 8px; } /* Ligne inférieure */
.hamburger.active .hamburger-inner {
    transform: rotate(45deg); /* Rotation pour former un X */
}
.hamburger.active .hamburger-inner::before {
    transform: translateY(8px) rotate(-45deg); /* Animation pour la ligne supérieure */
}
.hamburger.active .hamburger-inner::after {
    opacity: 0; /* Masquer la ligne inférieure */
}
.close-menu {
    background: #ff4d4d; /* Fond rouge pour le bouton de fermeture */
    border: none; /* Pas de bordure */
    color: white; /* Texte blanc */
    font-size: 1.2rem; /* Taille de texte */
    font-weight: bold; /* Texte en gras */
    padding: 8px 12px; /* Espacement intérieur */
    margin-right: 10px; /* Marge à droite */
    cursor: pointer; /* Curseur en pointeur */
    border-radius: 6px; /* Bords arrondis */
    transition: background 0.3s ease, transform 0.2s ease; /* Transition */
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    gap: 5px; /* Espacement entre icône et texte */
}
.close-menu i {
    font-size: 1rem; /* Taille de l'icône */
}
.close-menu:hover {
    background: #e60000; /* Fond rouge plus foncé au survol */
    transform: scale(1.05); /* Légère augmentation au survol */
}
.close-menu:active {
    transform: scale(0.95); /* Réduction lors du clic */
    background: #cc0000; /* Fond encore plus foncé */
}

/* ================================================================================= */
/* ====================== 12) ACCESSIBILITÉ (FOCUS, ETC.) ========================== */
/* ================================================================================= */
[role="menuitem"]:focus,
button:focus {
    outline: 2px solid #007bff; /* Contour bleu pour le focus */
    outline-offset: 3px; /* Décalage du contour */
}

/* ================================================================================= */
/* ====================== 13) FALLBACK SANS JS (NOSCRIPT) ========================== */
/* ================================================================================= */
noscript .navigation-secondaire {
    position: static; /* Position statique */
    height: auto; /* Hauteur automatique */
    display: block !important; /* Affiché */
}
noscript .menu-mega {
    display: block !important; /* Affiché pour les utilisateurs sans JS */
}

/* ================================================================================= */
/* ====================== 14) RESPONSIVE : DESKTOP vs MOBILE ======================= */
/* ================================================================================= */
@media (min-width: 769px) {
    .mobile-only {
        display: none; /* Masquer la navigation mobile sur desktop */
    }
    .desktop-only {
        display: block; /* Afficher la navigation desktop */
    }
    .hamburger {
        display: none; /* Masquer le bouton hamburger sur desktop */
    }
    
    /* Garantir que les catégories restent sur une seule ligne */
    .categories {
        display: flex;
        flex-wrap: nowrap !important;
        justify-content: space-evenly !important;
        width: 100%;
        overflow-x: auto;
        padding: 0;
        gap: 0 !important;
        margin: 0 auto;
        scrollbar-width: thin;
        border: 1px solid transparent; /* Bordure transparente */
        border-bottom-left-radius: 10px; /* Arrondi en bas à gauche */
        border-bottom-right-radius: 10px; /* Arrondi en bas à droite */
    }
    
    /* Menu mega et contenu mega avec bordures transparentes sur desktop */
    .menu-mega,
    .contenu-mega,
    .navigation-secondaire .contenu-mega {
        border: 1px solid transparent !important;
        box-shadow: none !important;
        border-bottom-left-radius: 10px !important; /* Arrondi en bas à gauche */
        border-bottom-right-radius: 10px !important; /* Arrondi en bas à droite */
    }
    
    /* Uniformiser la largeur et le padding pour sections-wrapper et bannieres-haut */
    .contenu-mega .sections-wrapper,
    .contenu-mega .bannieres-haut {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 30px;
        box-sizing: border-box;
    }
    
    /* Organisation des sections en grille avec alignement justifié */
    .contenu-mega .sections-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        justify-content: space-between;
        align-items: stretch;
    }
    
    /* Centrage et alignement des titres de section */
    .contenu-mega .section h3 {
        text-align: center;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
    }
    
    /* Centrage vertical du contenu des sections */
    .contenu-mega .section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 15px;
        height: 100%;
    }
    
    /* Centrage vertical des textes dans les listes */
    .contenu-mega .section ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .contenu-mega .section ul li {
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }
    
    .contenu-mega .section ul li a {
        display: inline-block;
        text-align: center;
    }
    
    /* Ajuster les boutons de catégorie pour qu'ils tiennent sur une ligne */
    .categorie {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        max-width: 120px;
    }
    
    .categorie button {
        padding: 6px 4px;
        font-size: 0.9em;
        min-width: 0;
        width: 100%;
    }
    
    /* Réduire davantage l'espacement pour les boutons avec texte plus long */
    .categorie:nth-child(n+6) button,
    .categorie:last-child button {
        padding: 6px 3px;
        font-size: 0.85em;
    }
    
    /* Réduire la taille des icônes */
    .categorie button i {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    
    /* Arrondir les bannières sur desktop */
    .banniere,
    .bannieres-bas .banniere {
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    
    /* Effet de zoom amplifié au survol */
    .banniere:hover,
    .bannieres-bas .banniere:hover {
        transform: scale(1.08);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Sous-menus droits pour la navigation secondaire */
    .navigation-secondaire .avec-sous-menu-droit .sous-sous-menu {
        left: 100% !important;
        right: auto !important;
        top: 0 !important; /* Aligner avec le haut de l'élément parent */
        position: absolute !important;
        z-index: 1100 !important; /* S'assurer qu'il est au-dessus des autres éléments */
    }
    
    /* Position des sous-menus par rapport à leur parent */
    .navigation-secondaire .avec-sous-menu-droit {
        position: relative !important;
    }
    
    /* Assurer que les parents des sous-menus sont aussi correctement positionnés */
    .navigation-secondaire .avec-sous-menu-droit .menu-parent {
        position: relative !important;
    }
    
    .navigation-secondaire .avec-sous-menu-droit .menu-parent button .fa-angle-right {
        margin-left: auto;
    }
    
    /* Styles spécifiques pour les sous-menus du menu utilisateur (paramètres) */
    .menu-utilisateur .avec-sous-menu-droit .sous-sous-menu {
        left: 100% !important;
        right: auto !important;
        top: 0 !important;
        position: absolute !important;
        z-index: 1200 !important; /* Z-index plus élevé pour être au-dessus des autres */
        margin-top: 0 !important;
    }
    
    /* Positionnement et dimensions optimisés pour les sous-menus droits des paramètres */
    .menu-utilisateur .avec-sous-menu-droit {
        position: relative !important;
        display: block !important;
    }
    
    .menu-utilisateur .avec-sous-menu-droit .menu-parent {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Garantir que la zone interactive est suffisamment grande */
    .menu-utilisateur .avec-sous-menu-droit .menu-parent button {
        width: 100% !important;
        text-align: left !important;
        padding: 8px 12px !important;
    }
    
    /* Créer un espace supplémentaire pour faciliter la sélection */
    .menu-utilisateur .avec-sous-menu-droit:hover .sous-sous-menu::before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        width: 10px; /* Zone tampon invisible pour faciliter la sélection */
        height: 100%;
    }
}
@media (max-width: 768px) {
    .desktop-only {
        display: none; /* Masquer la navigation desktop sur mobile */
    }
    .mobile-only {
        display: block; /* Afficher la navigation mobile */
    }
    /* Navigation principale mobile */
    .navigation-principale {
        padding: 6px 10px;
        gap: 5px;
        flex-wrap: nowrap; /* ❗ Empêche l'empilement des éléments */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Style du logo pour mobile */
    .logo-curve {
        width: 130px;
        height: 35px;
        margin-bottom: -10px;
    }
    
    .logo-curve text {
        display: none;
    }
    
    .logo-img {
        height: 26px;
        width: 26px;
        padding: 2px;
    }
    
    /* Style de la barre de recherche pour mobile */
    .barre-recherche {
        margin: 0 5px;
        flex-grow: 1;
        max-width: 30%;
        min-width: 30px;
        height: 36px;
    }
    
    .barre-recherche input {
        padding: 0 10px;
        font-size: 14px;
        border-radius: 18px;
        height: 36px;
    }
    
    .barre-recherche button {
        height: 36px;
        width: 36px;
        right: 0;
    }
    
    /* Style du menu utilisateur pour mobile */
    .menu-utilisateur {
        gap: 4px;
    }
    
    .liste-menu-utilisateur {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    /* Uniformisation des boutons pour mobile */
    .liste-menu-utilisateur button {
        min-width: 36px; 
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.9rem;
    }
    
    .liste-menu-utilisateur i {
        font-size: 1rem;
        margin: 0;
    }
    
    .hamburger {
        width: 35px; /* Dimensions ajustées pour mobile */
        height: 35px;
        margin-left: -8px;
    }
    .hamburger-box {
        width: 20px;
        height: 18px;
    }
    /* Navigation secondaire mobile */
    .navigation-secondaire.mobile-only { /* Plus spécifique */
        left: -100%; /* Hors de l'écran initialement */
        position: fixed; /* Position fixe pour recouvrir */
        top: 0; /* Aligné en haut */
        width: 85%; /* Largeur (ajustable si besoin) */
        height: 100%; /* Toute la hauteur */
        background-color: #2c3e50; /* Fond opaque (correspondant au header?) */
        transition: left 0.3s ease; /* Animation de glissement */
        display: flex; /* Utiliser flex pour la structure interne */
        flex-direction: column;
        overflow-y: auto; /* Permet le défilement si contenu trop long */
        z-index: 1100; /* Au-dessus de la plupart des éléments */
        padding: 0; /* Supprimer le padding du conteneur principal */
        border: none; /* Supprimer toute bordure */
        box-shadow: none; /* Supprimer toute ombre */
        border-radius: 0; /* Supprimer les coins arrondis si présents */
    }
    .navigation-secondaire.mobile-only.active {
        left: 0; /* Affiche le menu mobile */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* Optionnel: légère ombre à droite */
    }

    .navigation-secondaire.mobile-only.active ~ .bouton-toggle-widget {
        display: none !important;
      } 

      
}
@media (max-width: 480px) {
    .navigation-principale {
        padding: 4px 8px;
        gap: 3px;
        justify-content: space-between;
    }
    
    .logo-curve {
        width: 90px;
        height: 30px;
        margin-bottom: -5px;
        transform: translateY(-2px) !important; /* Ajustement plus fin pour petit écran */
    }
      
    .logo-curve text {
        display: none;
    }
      
    .logo-img {
        height: 22px;
        width: 22px;
        padding: 2px;
        transform: translateY(-2px) !important; /* Ajustement plus fin pour petit écran */
    }
    
    /* Maintenir la position rehaussée du logo */
    .logo {
        transform: translateY(-4px) !important; /* Légèrement moins que sur tablette */
        margin-top: -4px !important;
    }
    
    .barre-recherche {
        max-width: 28%;
        min-width: 28px;
        height: 32px;
        margin: 0 3px;
    }
    
    .barre-recherche input {
        font-size: 12px;
        height: 32px;
        padding: 0 8px;
    }
    
    .barre-recherche button {
        height: 32px;
        width: 32px;
    }
    
    .liste-menu-utilisateur {
        gap: 2px;
    }
    
    .liste-menu-utilisateur button {
        min-width: 32px;
        height: 32px;
    }
    
    .liste-menu-utilisateur i {
        font-size: 0.9rem;
    }
    
    .hamburger {
        width: 30px;
        height: 30px;
    }
    
    .hamburger-box {
        width: 18px;
        height: 18px;
    }
    
    .navigation-secondaire {
        width: 85%; /* Réduire davantage la largeur du menu mobile */
    }
    
    .navigation-secondaire.mobile-only.active ~ .bouton-toggle-widget {
        left: 85%;
    }
    
    .nav-links-mobile {
        padding: 5px;
    }
    
    .nav-links-mobile li {
        margin-bottom: 5px;
    }
    
    .nav-links-mobile li a {
        font-size: 14px;
    }
}
/* ================================================================================= */

/* Alignement du hamburger et du logo sur mobile */
@media (max-width: 768px) {
  .entete-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 50px !important; /* Fixer une hauteur précise */
    margin-top: 10px !important; /* Ajouter un espace au-dessus de la navigation */
  }
  
  .hamburger {
    margin: auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; /* Largeur fixe */
  }
  
  .logo-mobile {
    display: flex !important;
    align-items: center !important;
    margin: 0 5px !important;
  }
  
  /* Alignement optimisé des éléments de la barre de navigation */
  .navigation-principale {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    height: 50px !important;
  }
  
  /* Ajustement de la barre de recherche */
  .barre-recherche {
    flex: 1 !important;
    margin: 0 8px !important;
    max-width: 40% !important;
    min-width: 80px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Ajustement des icônes utilisateur */
  .menu-utilisateur {
    display: flex !important;
    align-items: center !important;
  }
  
  .liste-menu-utilisateur {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }

  /* Légèrement repositionner le hamburger si nécessaire */
  .hamburger-inner, 
  .hamburger-inner::before, 
  .hamburger-inner::after {
    display: block;
    margin-top: 0;
  }

  /* Ajustement de la position du logo sur mobile */
  .logo {
    transform: translateY(-2px) !important; /* Monter légèrement le logo */
    margin-top: -2px !important; /* Marge négative pour monter davantage */
  }
  
  .logo-img {
    transform: translateY(-2px) !important; /* Ajustement spécifique pour l'image */
  }
  
  .logo-curve {
    transform: translateY(-2px) !important; /* Ajustement harmonieux pour le SVG */
  }
}

/* Styles pour logo-mobile quand il est utilisé à la place de .logo */
@media (max-width: 768px) {
  .logo-mobile {
    transform: translateY(-2px) !important;
    margin-top: -2px !important;
  }
  
  .logo-mobile img {
    transform: translateY(-3px) !important;
  }
  
  /* S'assurer que le logo est bien aligné avec les autres éléments */
  .entete-mobile .logo-mobile {
    transform: translateY(-2px) !important;
    margin-top: -2px !important;
  }
}

/* Bouton toggle du widget météo - Nouveau positionnement sur mobile */
@media (max-width: 768px) {
  .bouton-toggle-widget {
    position: absolute !important;
    z-index: 1080 !important;
    top: -30px !important; /* Positionné au-dessus de la barre de recherche */
    left: 50% !important; /* Centré horizontalement */
    transform: translateX(-50%) !important; /* Correction du centrage */
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 123, 255, 0.5) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
  }
  
  /* Remplacer l'icône par une flèche vers le bas (v) quand fermé */
  .bouton-toggle-widget i {
    content: '\25BC' !important; /* Caractère Unicode pour flèche vers le bas */
    color: #007bff !important;
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Changer pour flèche vers le haut (^) quand le widget est visible */
  body.widget-visible .bouton-toggle-widget i {
    content: '\25B2' !important; /* Caractère Unicode pour flèche vers le haut */
    color: white !important;
  }
  
  /* Style quand le widget est visible */
  body.widget-visible .bouton-toggle-widget {
    background-color: rgba(0, 123, 255, 0.9) !important;
  }
  
  /* Ajustement de position en fonction de la taille de l'écran */
  .navigation-principale {
    position: relative !important; /* Pour que le bouton absolute soit positionné correctement */
  }
}