/* 1) Caché par défaut + prêt à s'afficher en "sticky/fixed" */
body.version-fr #menuhomeok2 {
  position: fixed;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 99999;
  margin-top: 0 !important;
  padding-top: 0 !important;

  /* caché */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
      border-bottom: 1px solid #ccc !important;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;

}

/* 2) Quand on décide de l'afficher */
body.version-fr #menuhomeok2.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
body.version-fr #menuhomeok2.is-open {
  height: 100%;
}

/* 3) Optionnel : éviter que le wrapper prenne un style étrange */
body.version-fr #menuhomeok2.submenu-main-wrapper {
  padding-top: 0 !important;
}

/* 4) Supprimer les icônes dans le menu */
body.version-fr #menuhomeok2 .sf-menu i,
body.version-fr #menuhomeok2 i.fa {
  display: none !important;
}

/* 5) Supprimer le burger */
body.version-fr #menuhomeok2 .burger {
  display: none !important;
}

/* 6) (optionnel) Ajuste un peu l'espacement des liens si besoin */
body.version-fr #menuhomeok2 .sf-menu a {
  display: inline-block;
  padding: 10px 12px; /* ajuste si besoin */
}

/* 7) (optionnel) Evite que le menu passe en dessous d'un header déjà fixed */
body.version-fr.has-fixed-header #menuhomeok2 {
  top: 0; /* mets ici la hauteur de ton header si nécessaire, ex: top: 80px; */
}

body.version-fr #menuhomeok2 .sf-menu a {
padding: 10px 0 !important;
}





/* ========= Base: menu caché par défaut ========= */
body.version-fr #menuhomeok2{
  display: none; /* caché avant scroll */
}

/* Quand on veut l'afficher (après scroll via une classe) */
body.version-fr #menuhomeok2.is-visible{
  display: block;
  position: fixed;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 999990;
  background: #dddddd;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  margin-top: 0 !important;
}

/* Optionnel: évite un “saut” de contenu si tu veux (sinon ignore) */
/* body.version-fr.has-sticky-submenu{ padding-top: 60px; } */


/* ========= Desktop: pas de burger, pas d’icônes ========= */
body.version-fr #menuhomeok2 .burger{ display:none !important; }
body.version-fr #menuhomeok2 .sf-menu i{ display:none !important; }





/* ========= Base: menu caché par défaut ========= */
body.version-fr #menuhomeok2{
  display: none; /* caché avant scroll */
}

/* Quand on veut l'afficher (après scroll via une classe) */
body.version-fr #menuhomeok2.is-visible{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999990;
  background: #dddddd;
  padding-top: 0 !important;
  padding-bottom: 8px !important;

}


/* ========= Desktop: pas de burger, pas d’icônes ========= */
body.version-fr #menuhomeok2 .burger{ display:none !important; }
body.version-fr #menuhomeok2 .sf-menu i{ display:none !important; }

/* ========= Layout style Apple : titre à gauche, menu à droite ========= */
body.version-fr #menuhomeok2 .submenu-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  margin: 0 !important;
  padding-top: 0 !important;
}

/* S'assurer que le container n'ajoute pas d'espace */
body.version-fr #menuhomeok2 .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.version-fr #menuhomeok2 .submenu-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Style pour .before avec h3 (titre à gauche) */
body.version-fr #menuhomeok2 .submenu-inner .before {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

body.version-fr #menuhomeok2 .submenu-inner .before h3 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Menu aligné à droite */
body.version-fr #menuhomeok2 .submenu-inner .sf-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.version-fr #menuhomeok2 .submenu-inner .sf-menu li {
  margin: 0;
  padding: 0;
}

body.version-fr #menuhomeok2 .submenu-inner .sf-menu a {
  display: inline-block;
  padding: 8px 16px;
  color: #1d1d1f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

body.version-fr #menuhomeok2 .submenu-inner .sf-menu a:hover {
  opacity: 0.7;
}

/* Cacher .after si présent */
body.version-fr #menuhomeok2 .submenu-inner .after {
  display: none;
}

/* S'assurer qu'aucun élément parent n'ajoute d'espace */
body.version-fr #menuhomeok2 .gdlr-color-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.version-fr #menuhomeok2 .gdlr-item {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.version-fr #menuhomeok2 .gdlr-content-item {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========= Mobile (<= 978px) - Style Apple ========= */
@media (max-width: 978px){

  /* Forcer le menu horizontal à être caché en mobile (sauf quand ouvert) */
  body.version-fr #menuhomeok2.is-visible .submenu-inner{
    display: none !important;
  }

  /* Cacher le menu horizontal par défaut en mobile */
  body.version-fr #menuhomeok2 .submenu-inner {
    display: none !important;
  }

  /* Forcer le menu à être vertical en mobile (même si ouvert) */
  body.version-fr #menuhomeok2 .sf-menu {
    display: none !important;
    flex-direction: column !important;
  }

  /* Cacher complètement le layout horizontal en mobile */
  body.version-fr #menuhomeok2 .submenu-inner .sf-menu {
    display: none !important;
  }

  /* Forcer tous les éléments du menu à être en bloc */
  body.version-fr #menuhomeok2 .sf-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  body.version-fr #menuhomeok2 .sf-menu a {
    display: block !important;
    width: 100% !important;
  }

  /* Le burger est un bouton FIXED en haut à droite */
  body.version-fr #menuhomeok2 .burger{
    display: block !important;
    position: fixed;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    z-index: 999999;

    /* avant scroll : caché (puis visible quand .is-visible) */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;

    /* petit shadow du bouton */
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }

  /* visible après scroll */
  body.version-fr #menuhomeok2.is-visible .burger{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* icône burger (3 barres) */
  body.version-fr #menuhomeok2 .burger::before,
  body.version-fr #menuhomeok2 .burger::after{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    height:2px;
    background:#222;
  }
  body.version-fr #menuhomeok2 .burger::before{
    top:15px;
    box-shadow: 0 8px 0 #222; /* barre du milieu */
  }
  body.version-fr #menuhomeok2 .burger::after{
    bottom:15px;
  }

  /* Overlay sombre en arrière-plan quand menu ouvert */
  body.version-fr #menuhomeok2.is-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999997;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
  }

  /* Empêcher le scroll du body quand menu ouvert */
  body.version-fr #menuhomeok2.is-open {
    overflow: hidden;
  }

  /* S'assurer que le wrapper ne cache pas le menu */
  body.version-fr #menuhomeok2.is-open .gdlr-color-wrapper {
    background: #fff !important;
    height: 100% !important;
  }

  /* Menu ouvert - Style Apple : fond blanc, plein écran */
  body.version-fr #menuhomeok2.is-open {
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
    background: #fff !important;
    border-bottom: none !important;
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
  }

  /* Quand menu ouvert (classe .is-open) => on déroule */
  body.version-fr #menuhomeok2.is-open .submenu-inner{
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0;
    z-index: 999998;
    box-shadow: none;
    height: 100%;
    min-height: 70vh;
    overflow: hidden;
    width: 100%;
  }

  /* En-tête du menu mobile style Apple */
  body.version-fr #menuhomeok2.is-open .submenu-inner .before {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  body.version-fr #menuhomeok2.is-open .submenu-inner .before h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }

  /* Bouton de fermeture/chevron à droite du titre (optionnel, peut être ajouté via JS) */
  body.version-fr #menuhomeok2.is-open .submenu-inner .before::after {
    content: "×";
    font-size: 32px;
    color: #1d1d1f;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }

  body.version-fr #menuhomeok2.is-open .submenu-inner .before::after:hover {
    opacity: 1;
  }

  /* Container du menu */
  body.version-fr #menuhomeok2.is-open .submenu-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }

  /* Container principal */
  body.version-fr #menuhomeok2.is-open .container {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.version-fr #menuhomeok2.is-open .gdlr-item {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    width: 100% !important;
  }

  body.version-fr #menuhomeok2.is-open .gdlr-content-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.version-fr #menuhomeok2.is-open .submenu-inner {
    display: block !important;
  }
  /* Menu en colonne verticale style Apple - FORCER vertical */
  body.version-fr #menuhomeok2.is-open .sf-menu{
    display: block !important;
        height: 100%;
        margin-top: 50px !important;
        margin-left: 30px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  /* Forcer les items à être en bloc (vertical) */
  body.version-fr #menuhomeok2.is-open .sf-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* Items du menu */
  body.version-fr #menuhomeok2.is-open .sf-menu > li {
    margin: 0;
    padding: 0;
    position: relative;
  }

  body.version-fr #menuhomeok2.is-open .sf-menu > li > a{
    display: flex !important;
    align-items: center;
    padding: 14px 20px;
    color: #1d1d1f;
    text-decoration: none;
    font-size: 17px;
    font-weight: 400;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: 0;
    background: transparent;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Indicateur pour l'élément actif (ligne verticale à gauche) */
  body.version-fr #menuhomeok2.is-open .sf-menu > li.current-menu-item > a::before,
  body.version-fr #menuhomeok2.is-open .sf-menu > li.current_page_item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #0071e3;
    border-radius: 0 2px 2px 0;
  }

  /* Texte de l'élément actif en gras */
  body.version-fr #menuhomeok2.is-open .sf-menu > li.current-menu-item > a,
  body.version-fr #menuhomeok2.is-open .sf-menu > li.current_page_item > a {
    font-weight: 500;
    color: #1d1d1f;
  }

  /* Effet hover sur les items */
  body.version-fr #menuhomeok2.is-open .sf-menu > li > a:hover {
    background-color: #f5f5f7;
    opacity: 1;
  }

  /* pas d'icônes */
  body.version-fr #menuhomeok2.is-open .sf-menu i{ 
    display: none !important; 
  }

  /* Cacher .after */
  body.version-fr #menuhomeok2.is-open .submenu-inner .after {
    display: none;
  }

  /* S'assurer que le menu est bien visible quand ouvert */
  body.version-fr #menuhomeok2.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Forcer le menu à prendre toute la largeur */
  body.version-fr #menuhomeok2.is-open * {
    max-width: 100% !important;
  }

  /* Empêcher tout float ou inline-block qui pourrait casser le layout */
  body.version-fr #menuhomeok2.is-open .sf-menu,
  body.version-fr #menuhomeok2.is-open .sf-menu li,
  body.version-fr #menuhomeok2.is-open .sf-menu a {
    float: none !important;
  }
}


@media (max-width: 978px){
  body.version-fr #menuhomeok2 .burger{
    z-index: 2147483647 !important;
  }

  /* Burger visible même quand menu ouvert */
  body.version-fr #menuhomeok2.is-open .burger {
    z-index: 999999 !important;
  }

  body.version-fr #menuhomeok2.is-open .submenu-inner .before {
        display: block !important;
        align-items: center;
        justify-content: space-between;
        /* padding: 20px 20px 16px 20px; */
        /* border-bottom: 1px solid #e5e5e5; */
        margin-bottom: 0;
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 10;
        border: 0 !important;
        width: 100%;
        height: 40px;
        line-height: 15px;
    }

    #menuhomeok2 .submenu-inner .before::before, #menuhomeok2 .submenu-inner .before::after {
        content: "" !important;
        display: none !important;
    }
    body.version-fr #menuhomeok2.is-open .sf-menu {
        position: relative;
        z-index: 99999 !important;
        display: block !important;
        height: auto;
        top: 60px;
        left: 20px;
    }
    body.version-fr #menuhomeok2.is-open .container {
        display: block !important;
    }

    body.version-fr #menuhomeok2.is-open .gdlr-content-item, body.version-fr #menuhomeok2.is-open .submenu-container {
        height: 100% !important;
        display: block !important;
    }
    body.version-fr #menuhomeok2.is-open .sf-menu > li.current-menu-item > a::before, body.version-fr #menuhomeok2.is-open .sf-menu > li.current_page_item > a::before {
        display: none !important;
    }
}

body.version-fr .fixedmenu .submenu-inner {
    top: 0 !important;
}