/* ===================================================================
   NAV MOBILE — fichier unique (fusion menu-fix.css + mobile-menu-override.css)
   Ancien menu-fix : règles desktop + couleurs / sous-menus.
   Suite : panneau plein écran, scroll, flèches, iOS, :has fallback.
   Doc : docs/lighthouse-scripts-audit.md
=================================================================== */

/* 
 * Menu Fix - Legacy compatibility
 * NOTE: Most menu styles are now in shared-header.css
 * This file is kept for backward compatibility and minimal fixes
 * 
 * #main-menu-state checkbox hide is now in shared-header.css (line 710)
 */

/* Desktop: Always show menu, hide hamburger */
@media (min-width: 768px) {
  .main-menu-btn {
    display: none !important;
  }
}

/* ================================================
   CRITICAL FIX: Submenu text color in responsive
   This file loads AFTER vendor CSS, so it can override
   Using multiple selector strategies to ensure coverage
   ================================================ */

@media (max-width: 767px) {
  /* ================================================
     IMPROVED SUBMENU STYLING - Better UX
     ================================================ */
  
  /* Strategy 1: Direct selectors without checkbox dependency - IMPROVED */
  .h-style3 .sm-mint ul li a,
  .h-style3 .sm-mint ul ul li a,
  .h-style3 #main-menu ul li a,
  .h-style3 #main-menu .sm-mint ul li a,
  .h-style3 .main-nav .sm-mint ul li a,
  .h-style3 .main-nav #main-menu ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    /* Improved spacing and typography */
    padding: 16px 20px 16px 40px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
  }
  
  /* Improved hover state */
  .h-style3 .sm-mint ul li a:hover,
  .h-style3 #main-menu ul li a:hover,
  .h-style3 .main-nav .sm-mint ul li a:hover {
    background: rgba(86, 194, 226, 0.25) !important;
    padding-left: 44px !important;
    color: #ffffff !important;
  }
  
  /* Strategy 2: With checkbox state (when menu is open) - IMPROVED */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:link,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:visited,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:not(:hover) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    /* Improved spacing */
    padding: 16px 20px 16px 40px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
  }
  
  /* Improved hover state for checkbox menu */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:focus {
    background: rgba(86, 194, 226, 0.25) !important;
    padding-left: 44px !important;
    color: #ffffff !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  /* Strategy 3: Using .sm class (alternative class name) */
  .h-style3 .sm ul li a,
  .h-style3 #main-menu.sm ul li a,
  .h-style3 .main-nav .sm ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  /* Improved submenu background and container - Better visual hierarchy */
  .h-style3 .sm-mint ul,
  .h-style3 .sm-mint ul ul,
  .h-style3 #main-menu ul,
  .h-style3 #main-menu .sm-mint ul,
  .h-style3 .main-nav .sm-mint ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul {
    background: rgba(26, 58, 92, 0.95) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Improved submenu item borders - More subtle and elegant */
  .h-style3 .sm-mint ul li,
  .h-style3 #main-menu ul li,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
  }
  
  .h-style3 .sm-mint ul li:last-child,
  .h-style3 #main-menu ul li:last-child,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li:last-child {
    border-bottom: none !important;
  }
  
  /* Override any inherited colors from body or parent elements */
  .h-style3 .sm-mint ul li a *,
  .h-style3 #main-menu ul li a * {
    color: inherit !important;
  }
  
  /* Strategy 4: Ultra-broad selector - catch ALL nested ul in menu - IMPROVED */
  .h-style3 #main-menu ul a,
  .h-style3 #main-menu li ul a,
  .h-style3 #main-menu li li a,
  .h-style3 .main-nav ul ul a,
  .h-style3 .main-nav li ul a,
  .h-style3 .main-nav li li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 16px 20px 16px 40px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
  }
  
  /* Strategy 5: Target by parent class regardless of structure - IMPROVED */
  .h-style3 .nh3-navber ul ul li a,
  .h-style3 .nh3-navber li ul li a,
  .h-style3 .nh3-navber #main-menu ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 16px 20px 16px 40px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
  }
  
  /* Active/current page indicator in submenu */
  .h-style3 .sm-mint ul li a.is-current-page,
  .h-style3 #main-menu ul li a.is-current-page,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a.is-current-page {
    background: rgba(86, 194, 226, 0.3) !important;
    font-weight: 600 !important;
    border-left: 3px solid rgba(86, 194, 226, 0.8) !important;
  }
}


/* ================================================================
   MENU MOBILE RESPONSIVE - Code propre et simple
   ================================================================ */

@media (max-width: 767px) {
  /* 0. SURCHARGER sm-style.css qui cache le menu - Spécificité maximale */
  /* Surcharger la règle #main-menu-state:not(:checked) ~ #main-menu { display: none; } */
  /* Cette règle est CRITIQUE car sm-style.css cache le menu même avec .active */
  #main-menu-state:not(:checked) ~ #main-menu.active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:not(:checked) ~ #main-menu.active,
  body #main-menu-state:not(:checked) ~ #main-menu.active,
  body .h-style3 .nh3-navber .main-nav #main-menu-state:not(:checked) ~ #main-menu.active,
  html body #main-menu-state:not(:checked) ~ #main-menu.active,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:not(:checked) ~ #main-menu.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  
  /* 1. CACHER LE MENU PAR DÉFAUT */
  .h-style3 .nh3-navber .main-nav #main-menu:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* 2. AFFICHER LE MENU QUAND CHECKED OU AVEC CLASSE active (comme freshiceland_web) */
  /* IMPORTANT: Spécificité élevée pour surcharger sm-style.css et les blocs du haut de ce fichier */
  /* Support pour menu dans .main-nav ET directement dans body (après déplacement JS) */
  /* SCROLL: Le menu peut scroller, mais pas la page en arrière-plan */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu,
  .h-style3 .nh3-navber .main-nav #main-menu.active,
  #main-menu.active,
  body #main-menu.active,
  html body #main-menu.active,
  body .h-style3 .nh3-navber .main-nav #main-menu.active,
  html body .h-style3 .nh3-navber .main-nav #main-menu.active {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 64px) !important;
    min-height: auto !important;
    height: auto !important;
    background: #1a3a5c !important;
    background-color: #1a3a5c !important;
    background-image: linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%) !important;
    z-index: 99999 !important;
    padding: 20px 15px !important;
    margin: 0 !important;
    /* SCROLL: Permettre le scroll uniquement dans le menu */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling sur iOS */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    animation: slideDown 0.3s ease !important;
    /* FIX iOS: Créer un nouveau stacking context pour éviter les problèmes avec overflow du parent */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    pointer-events: auto !important;
    /* FIX iOS: S'assurer que le menu n'est pas affecté par l'overflow du parent */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* S'assurer que le slider et tous les autres éléments sont en dessous du menu */
  body:has(#main-menu.active) section.hero-4,
  body.menu-active section.hero-4,
  body:has(#main-menu.active) .hero4-slide,
  body.menu-active .hero4-slide,
  body:has(#main-menu.active) .owl-carousel,
  body.menu-active .owl-carousel {
    z-index: 1 !important;
    position: relative !important;
  }
  
  /* 3. ITEMS DU MENU PRINCIPAL */
  /* Support pour menu dans .main-nav ET directement dans body */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li,
  #main-menu.active > li,
  body #main-menu.active > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  /* Dernier élément du menu - espacement en bas */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li:last-child,
  #main-menu.active > li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* 4. LIENS DU MENU PRINCIPAL */
  /* Support pour menu dans .main-nav ET directement dans body */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li > a,
  #main-menu.active > li > a,
  body #main-menu.active > li > a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li > a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li > a:active,
  #main-menu.active > li > a:hover,
  #main-menu.active > li > a:active,
  body #main-menu.active > li > a:hover,
  body #main-menu.active > li > a:active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateX(4px) !important;
  }
  
  /* 5. SOUS-MENUS - Cachés par défaut */
  /* Support pour menu dans .main-nav ET directement dans body */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul,
  #main-menu.active ul,
  body #main-menu.active ul {
    display: none !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    list-style: none !important;
  }
  
  /* Afficher le sous-menu quand le parent a la classe highlighted */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu li.highlighted > ul,
  #main-menu.active li.highlighted > ul,
  body #main-menu.active li.highlighted > ul {
    display: block !important;
    padding: 8px 0 !important;
    margin: 8px 0 0 0 !important;
    animation: slideDown 0.3s ease !important;
  }
  
  /* 6. ITEMS DES SOUS-MENUS */
  /* Support pour menu dans .main-nav ET directement dans body */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul li,
  #main-menu.active ul li,
  body #main-menu.active ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  #main-menu.active ul li:last-child,
  body #main-menu.active ul li:last-child {
    margin-bottom: 0 !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul li a,
  #main-menu.active ul li a,
  body #main-menu.active ul li a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 12px 20px !important;
    padding-left: 35px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border-radius: 6px !important;
    border-left: 3px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul li a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul li a:active,
  #main-menu.active ul li a:hover,
  #main-menu.active ul li a:active,
  body #main-menu.active ul li a:hover,
  body #main-menu.active ul li a:active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-left-color: rgba(255, 255, 255, 0.6) !important;
    padding-left: 40px !important;
  }
  
  /* 7. FLÈCHES DES SOUS-MENUS (+/-) */
  /* Support pour menu dans .main-nav ET directement dans body */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu li > a .sub-arrow::before,
  #main-menu.active li > a .sub-arrow::before,
  body #main-menu.active li > a .sub-arrow::before {
    content: '+' !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu li.highlighted > a .sub-arrow::before,
  #main-menu.active li.highlighted > a .sub-arrow::before,
  body #main-menu.active li.highlighted > a .sub-arrow::before {
    content: '−' !important;
    color: #ffffff !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu a .sub-arrow,
  #main-menu.active a .sub-arrow,
  body #main-menu.active a .sub-arrow {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    margin-top: -16px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu a .sub-arrow:hover,
  #main-menu.active a .sub-arrow:hover,
  body #main-menu.active a .sub-arrow:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.1) !important;
  }
  
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul a .sub-arrow,
  #main-menu.active ul a .sub-arrow,
  body #main-menu.active ul a .sub-arrow {
    width: 28px !important;
    height: 28px !important;
    margin-top: -14px !important;
    right: 20px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Override any rules that hide sub-arrow in responsive mode */
  /* Ensure sub-arrow is always visible when menu is open */
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint a .sub-arrow,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body #main-menu.active .sm-mint a .sub-arrow,
  html body #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint a .sub-arrow,
  html body .h-style3 .sm-mint > li > a .sub-arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* 8. FIX SPÉCIFIQUE POUR iOS - Force l'affichage avec spécificité maximale */
  @supports (-webkit-touch-callout: none) {
    /* FIX iOS: Forcer overflow visible sur TOUS les parents du menu */
    .h-style3:has(#main-menu.active),
    .h-style3 .nh3-navber:has(#main-menu.active),
    .h-style3 .nh3-navber .main-nav:has(#main-menu.active),
    .header-area:has(#main-menu.active),
    .header-area .nh3-navber:has(#main-menu.active),
    .header-area .nh3-navber .main-nav:has(#main-menu.active) {
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    
    /* Fallback si :has() n'est pas supporté - utiliser classe sur body */
    body.menu-active .h-style3,
    body.menu-active .h-style3 .nh3-navber,
    body.menu-active .h-style3 .nh3-navber .main-nav,
    body.menu-active .header-area,
    body.menu-active .header-area .nh3-navber,
    body.menu-active .header-area .nh3-navber .main-nav {
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    
    .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu,
    .h-style3 .nh3-navber .main-nav #main-menu.active,
    #main-menu.active,
    body #main-menu.active,
    html body #main-menu.active {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 99999 !important;
      transform: translate3d(0, 0, 0) !important;
      -webkit-transform: translate3d(0, 0, 0) !important;
      position: fixed !important;
      top: 64px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      background: #1a3a5c !important;
      background-color: #1a3a5c !important;
      pointer-events: auto !important;
      /* FIX iOS: Créer un nouveau stacking context pour éviter les problèmes */
      -webkit-backface-visibility: hidden !important;
      backface-visibility: hidden !important;
      /* FIX iOS: S'assurer que le menu n'est pas affecté par l'overflow du parent */
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    
    /* S'assurer que les items du menu sont visibles sur iOS */
    #main-menu.active > li,
    #main-menu.active li {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* S'assurer que les liens sont visibles sur iOS */
    #main-menu.active a,
    #main-menu.active li a {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }
  }
  
  /* 9. Empêcher le scroll du body et de html quand le menu est ouvert */
  /* IMPORTANT: Empêcher le scroll de la page en arrière-plan */
  body:has(#main-menu.active),
  html:has(#main-menu.active),
  body:has(#main-menu-state:checked),
  html:has(#main-menu-state:checked) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Fallback pour les navigateurs qui ne supportent pas :has() */
  body.menu-active,
  html.menu-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* S'assurer que le menu peut toujours scroller */
  body:has(#main-menu.active) #main-menu.active,
  body.menu-active #main-menu.active {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* ================================================
     RÈGLE PARTAGÉE GLOBALE - Spécificité maximale
     Garantit les bonnes couleurs du menu sur TOUTES les pages
     Même si des styles de page (inline ou <style>) tentent de les écraser
     ================================================ */
  
  /* Menu principal - Spécificité maximale pour surcharger TOUS les styles de page */
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu.sm > li > a,
  html body #main-menu.active > li > a,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu > li > a,
  html body #main-menu.active.sm-mint > li > a,
  html body #main-menu.active.sm > li > a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  /* Sous-menus - Spécificité maximale */
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:link,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:visited,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:not(:hover),
  html body #main-menu.active ul li a,
  html body #main-menu.active .sm-mint ul li a,
  html body #main-menu.active.sm-mint ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  /* Hover states - Spécificité maximale */
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a:hover,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:hover,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a:active,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:active,
  html body #main-menu.active > li > a:hover,
  html body #main-menu.active ul li a:hover,
  html body #main-menu.active > li > a:active,
  html body #main-menu.active ul li a:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  /* Focus states - Spécificité maximale */
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a:focus,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:focus,
  html body #main-menu.active > li > a:focus,
  html body #main-menu.active ul li a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* ================================================================
   ABSOLUTE FINAL OVERRIDE - Sub-arrow must ALWAYS be visible
   This file loads LAST (async), so these rules have final say
   MOBILE ONLY (< 768px)
   ================================================================ */
@media (max-width: 767px) {
  /* Force sub-arrow to be visible in ALL mobile contexts */
  html body .sm-mint li > a .sub-arrow,
  html body #main-menu li > a .sub-arrow,
  html body .h-style3 li > a .sub-arrow,
  html body li > a .sub-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    margin-top: -16px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    z-index: 10 !important;
  }

  /* Force ::before to be visible */
  html body .sm-mint li > a .sub-arrow::before,
  html body #main-menu li > a .sub-arrow::before,
  html body .h-style3 li > a .sub-arrow::before,
  html body li > a .sub-arrow::before {
    content: '+' !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
  }

  /* Change to "−" when open */
  html body li.highlighted > a .sub-arrow::before {
    content: '−' !important;
  }
}