/*  Theme Name:   gestimark enfant
  Description:   gestimark - Menu
  Author:       Gestimark  
  Author URI:   https://gestimark.com/
  Template:     blankslate 
  Version:      0.1.0 */



  @media screen and (max-width: 1474px) {

        
      /* -----------------------------------------------------------
                                ICÔNE BURGER
      ------------------------------------------------------------ */
          
      /* Boite de l'icône burger */
      
        .gtmHeader .gtm-open-nav-menu{
          display: flex;
          position: fixed;
          top: 0;
          right: 0;
          height: 45px; /* hauteur du fond */
          width: 45px; /* largeur du fond */
          border-radius: 50%;
          background-color: #5B283E; /* couleur d'arrière plan de la boite */
          margin: 15px 15px 0px 0px;
          align-items: center; /* centrer les barres du burger verticalement */
          justify-content: center; /* centrer les barres du burger horizontalement */
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 10000000;
    
        }
            
      /* ------------------- OUVRIR & FERMER -------------------- */
          
      /* ligne centrale du menu burger */
      
        .gtmHeader .gtm-open-nav-menu span {
          display: block;
          position: relative;
          height: 3px;/* hauteur */
          width: 25px;/* longueur */
          /* transform: rotate(-55deg); */
          background-color: #fff; /* couleur */
          border-radius: 4px;
        }
            
      /* Lignes haute & basse */
          
        .gtmHeader .gtm-open-nav-menu span:before,
        .gtmHeader .gtm-open-nav-menu span:after{
          content: "";
          position: absolute;
          left:0px; /* positionnement tout à gauche de la ligne centrale */
          width: 100%; /* largeur des lignes haute & basse */
          height: 100%; /* utilise toute la hauteur */
          box-sizing: border-box;
          background-color: #fff;/* couleur des lignes */
          transition: all .2s ease;/* transition des lignes */
          border-radius: 4px;
        }
          
      /* Lignes haute */
          
        .gtmHeader .gtm-open-nav-menu span:before{
          top:-7px;/* Positionnement de la ligne haute */
        }
      
      /* Lignes basse */
        .gtmHeader .gtm-open-nav-menu span:after{
          top:7px;/* Positionnement de la ligne basse */
        }
          
      /* ------------------- FERMER -------------------- */
                
            
        .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span {
          background-color: transparent !important; /* suppression de la ligne centrale */
        }
      
        .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span:before {
          transform: rotate(45deg);/* rotation de la barre haute */
          top:0px; /* position la ligne basse au center */
          background-color: #fff;
          left:0px; /* positionnement tout à gauche de la ligne centrale */
        }
      
        .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span:after{
          transform: rotate(-45deg); /* rotation de la ligne basse */
          top:0px; /* position la ligne basse au center */
          left:0px; /* positionnement tout à gauche de la ligne centrale */
        }
          
      /* -----------------------------------------------------------
                              MENU
      ------------------------------------------------------------ */
        
        .gtm-menu {
          z-index: 2000;
          position: relative;
        }
      
        .gtmHeader {
          position: fixed;
          left: 0;
          width: 100%;
          /* min-height: 100vh; */
          z-index: 1;
          /* display: flex;
          justify-content: center;
          align-items: center; */
          background-color: transparent;
        }
      
        .gtm-header-main {
          position: relative;
          z-index: 10;
        }
      
      
        nav.gtm-nav-menu ul.menu {
          list-style: none;
          padding-left: 0px;
        }
        
      /* Apparition disparition du menu */
          
        .gtmHeader {
          top: -200%;/* déplacement du menu hors site */
          transition: all 0.5s ease;/* Transition d'apparition du menu*/
        }
      
        /* Menu ouvert */
        .gtmHeader.gtmOpen {
            top: 0;
            z-index: 100;
            background-color: #fff;
            height: 100dvh;              /* 🔥 prend toute la hauteur de l'écran */
            overflow-y: auto;           /* 🔥 permet le scroll si contenu trop long */
            -webkit-overflow-scrolling: touch;  /* pour un scroll fluide sur mobile */
        }
      

        body.gtm-hidden-scrolling {
            overflow: hidden;  /* déjà fait dans ton JS, mais au cas où */
          }




.menu-haut {
  padding-top: 45px;
}

          
      /* -----------------------------------------------------------
                        NAVIGATION PRINCIPALE
      ------------------------------------------------------------ */
    
      .menu-item.page_item a {
        color: #5B283E !important;
      }
        
        .menu-item.default {
          display: block;
        }
              
        nav.gtm-nav-menu .menu {
          display: block;
          text-align: center;
        }
        
      /* espacement des liens */
          
        .gtmHeader .menu > .menu-item  {
          margin-bottom: 10px;
        }
      
        .gtmHeader .menu > .menu-item > a {
          /*font-family: "Quicksand", serif; */
          color: #5B283E;
          font-size: 1.3rem;
          font-weight: 600;
          letter-spacing: 1px;
          border: none;
          transition: all 0.3s ease;
        }
        
    
      /* Design des liens actifs */
          
        .menu > .menu-item.gtm-other-link > a{ 
          color: #5B283E;
          font-weight: 600;
        }
      
        /* curseur sur les séparateurs */
        .separator {
          cursor: pointer;
        }
      
        /* Design des séparateurs actifs  */
      
        .parent.gtm-active a.separator {
          color: #ffaa00 !important;
          font-weight: 600 !important;
      
        }
      
      /* Design du logo à la place du lien de menu accueil */
      
        .default img {
          width: 100px;
        }
      
      /* -----------------------------------------------------------
                        SOUS MENU
      ------------------------------------------------------------ */
          
        nav.gtm-nav-menu .menu .sub-menu {
          display: block;
          text-align: center;
          list-style: none;
          padding-left: 0px;
        }
          
        nav.gtm-nav-menu .menu .sub-menu a {
          text-decoration: none;
          line-height: 2;
        }
      
        .gtmHeader .menu > .menu-item-has-children .sub-menu {
          position: relative;
          max-height: 0;
          overflow: hidden; 
          visibility: hidden;
          opacity: 0;
          transition: all .2s ease-in-out;
        } 
      
        .gtmHeader .menu > .menu-item-has-children.gtm-active .sub-menu  {
          visibility: visible;
          opacity: 1;
        }
      
      /* Design des liens du sous menu  */
        nav.gtm-nav-menu .sub-menu li:first-child {
          padding-top: 10px;
        }
      
        nav.gtm-nav-menu .sub-menu li {
          line-height: 1.8rem;
        }
      
        nav.gtm-nav-menu .sub-menu li a {
          color: #5B283E;
          font-size: 22px;
          font-weight: 400;
          line-height: 1.1rem;
          transition: all 0.3s ease;
        }
          
        /* Design des liens Au survol et actif */
        nav.gtm-nav-menu .sub-menu li.active a {
          color: #ffaa00;
        }
      
      /* -----------------------------------------------------------
                            ICÔNES SOUS MENU
      ------------------------------------------------------------ */
            
        .menu-item-has-children .separator {
          position: relative;/* Définir la position pour les élément after et before de l'icone */
        }
      
        /* Icônes du menu */
        .menu-item-has-children .separator::before {
          content: url(/wp-content/uploads/2025/01/symbole.svg);
          position: absolute;
          top: 0;
          right: -20px;
          width: 15px;
        } 

        .menu-item-has-children .separator::after {
          content: url(/wp-content/uploads/2025/01/sourire.svg);
          position: absolute;
          bottom: -15px;
          left: 0px;
          width: 30px;
          opacity: 0;
          transition: opacity .2s ease-in-out;
        }
      
        .menu-item-has-children.current-menu-ancestor .separator::after {
          opacity: 1;
        }
      
        .menu-item-has-children .separator:hover::after {
          opacity: 1;
        }
      }
        
      /* -----------------------------------------------------------
                            MENU TROISIÈME NIVEAU
      ------------------------------------------------------------ */
      .menu-item-84 a::before, .menu-item-84 a::after {
        display: none;
      }

      .menu-item-84 ul.sub-menu {
        padding: 0 20px
      }

      .menu-item-84 ul.sub-menu li::marker {
        color: transparent;
      }


      /* ============================ FIN DU MENU MOBILE ================================= */
      
      
      /* ============================ MENU GRAND MOBILE ================================= */
          
      @media screen and (min-width: 400px) and (max-width: 1474px) {
      
        /* taille de la typo des liens du menu principal */
        .gtmHeader .menu > .menu-item > a {
          font-size: 1.7rem;
        }
      
        /* taille de la typo des liens du sous menu */
        nav.gtm-nav-menu .sub-menu li a {
          font-size: 20px;
        }
      }
      
      /* ============================ FIN DU MENU GRAND MOBILE ================================= */
        
        
          
      /** //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      --------------------------------------------------------------------------------------------------------------------------------------------------
                                                                    MENU DESKTOP
      --------------------------------------------------------------------------------------------------------------------------------------------------
      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// **/
          
      @media screen and (min-width: 1475px) {
          
      /* -----------------------------------------------------
                                MENU 
      ------------------------------------------------------- */
          
        .menu-item.default {
          display: none;
        }
      
        .gtm-header-main .menu {
          background-color: transparent;
          border-bottom-left-radius: 30px;
          transition: all .2s ease-in;
        }
      
        .gtm-header-main {
          position: fixed;
          height: 60px;
          z-index: 10000000;
          right: 20px;
          top: 0px;
          background-color: #fff;
          /* border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px; */
        }

        .menu-secondaire {
          position: static;
          height: 60px;
          /* background-color: #fff; */
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          transform: translateY(-21px);
      }
    
      
        .gtm-header-main.scroll .menu {
          background-color: #000000;
        }
        
          
        nav.gtm-nav-menu ul.menu {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 30px;
          padding: 0px 30px;
          list-style: none;
          margin: 0;
        }
        
        nav.gtm-nav-menu ul.menu li {
          padding: 10px 0px;
          position: relative;
          top: 3px;
        }
          
      /* -----------------------------------------------------
                      NAVIGATION PRINCIPALE
      ------------------------------------------------------- */
          
      /* Design des liens */
          
        .gtmHeader .menu > .menu-item > a {
          color: #5B283E;
          font-size: 1rem;
          letter-spacing: 1px;
          font-weight: 700;
          border: none;
        }
    
      /* Design des liens Au survol */
        
        .gtmHeader .menu > .menu-item > a:hover {
          color: #BCBE00;/* couleur des liens de menu */
        }
          
      /* Design des liens actifs */
          
        .current_page_item a{ 
          color: #BCBE00 !important;
        }

        .gtmHeader .menu > .menu-item > a:active {
          color: #BCBE00 !important;
        }
          
      /* Design des séparateurs actifs  */
          
        .current_page_item a.separator {
          color: #BCBE00 !important;
          font-weight: 600 !important;
        }
      
        .menu-item-has-children {
          padding-right: 10px !important;
        }
          
      /* Design du logo à la place du lien de menu accueil */

        .menu-item a {
          display: flex;
          align-items: center;
        }
      
        .default img {
          height: 35px;
        }
      
      /* -----------------------------------------------------------
                  LIGNE AU DESSOUS DES LIENS DU MENU
      ------------------------------------------------------------ */
      
      /* -----------------------------------------------------
                      SOUS MENU
      ------------------------------------------------------- */
          
          /* Design du sous-menu */ 
      
          .gtmHeader .menu > .menu-item > .sub-menu {
            position: absolute;
            left: 0%;/* Opx à gauche */
            top: 100%;/* 50px du haut */
            min-width: 250px;/* Largeur du sous menu */
            background-color: #fff;
            padding: 0px 10px 10px 10px;/* Padding du sous-menu */
            list-style: none;
            opacity:0;/* Rendre le sous-menu transparent quand il n'est pas visible */
            visibility: hidden;/* Cacher le sous-menu */
            margin: 0;
            border-radius: 10px;
            transition: all 0.3s ease;/* transition liens du sous-menu */
          }
          
          .gtmHeader .menu > .menu-item-has-children:hover > .sub-menu {
            opacity: 1; 
            visibility: visible; 
          }
      
          .gtmHeader .menu > .menu-item > .sub-menu {
            z-index: 10;/* Permet de passer au dessus de l'image du logo */
          }
      
          /* ==================================
          Forcer le dernier sous menu
          à s'aligner à droite si necessaire 
          ======================================*/ 
      
          .gtmHeader .menu > .menu-item:last-child > .sub-menu {
            right: 0%;
            left: auto;
          }
      
          /* Design des liens du sous menu  */
      
          nav.gtm-nav-menu .sub-menu li {
            padding-bottom: 0px !important;
          }
      
          nav.gtm-nav-menu .sub-menu li a {
            color: #5B283E;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2rem;
            text-decoration: none;
            transition: all 0.3s ease;
          }
          
          /* Design des liens Au survol et actif */
      
          nav.gtm-nav-menu .sub-menu li:hover a, 
          nav.gtm-nav-menu .sub-menu li.active a {
            color: #BCBE00;
          }
          
      /* -----------------------------------------------------------
                        ICÔNES SOUS MENU
      ------------------------------------------------------------ */
      
      .menu-item-has-children .separator {
          position: relative;/* Définir la position pour les élément after et before de l'icone */
        }
      
      /* Barre verticale du + */
      a.separator::before {
        content: url(/wp-content/uploads/2025/01/symbole.svg);
        position: absolute;
        top: 0;
        right: -20px;
        width: 15px;
      }

      .menu-item-has-children .separator::after {
        content: url(/wp-content/uploads/2025/01/sourire.svg);
        position: absolute;
        bottom: -15px;
        left: 0px;
        width: 30px;
        opacity: 0;
        transition: opacity .2s ease-in-out;
      }

      .gtmHeader .menu > .menu-item > a:hover {
        color: #BCBE00;
      }
    
      .menu-item-has-children.current-menu-ancestor .separator::after {
        opacity: 1;
      }
    
      .menu-item-has-children .separator:hover::after {
        opacity: 1;
      }
    }
    

  /* TEST menu */
  .menu-haut ul li a:not(.menu-haut ul li.gtm-recherche a), input.bsearch-submit.searchsubmit.search-submit {
    border-radius: 99px !important;
    box-sizing: border-box !important;
    color: #5B283F !important;
    border: 2px solid #BCBE00 !important;
    background-color: #BCBE00 !important;
    line-height: .8 !important;
    padding: 3px 20px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all .2s ease-in-out !important;
    font-weight: 700 !important;
    margin-left: 0 !important;
    font-size: 1rem;
    font-family: 'Quicksand';
    height: 24.4px;
  }

  input.bsearch-submit.searchsubmit.search-submit {
      transform: translateY(2px);
  }

  .menu-haut ul li a:not(.menu-haut ul li.gtm-recherche a):hover{
    background-color: transparent !important;
    color: #BCBE00 !important;
    border: #BCBE00;
  }


  @media screen and (min-width: 1475px) {
    nav.menu-haut {
      height: 50px;
      background: #5B283F;
    }

    .menu-haut ul.menu li {
      padding: 5px 0px !important;
      position: relative;
  }

    .gtm-header-main {
        width: 100%;
        right: 0;;
    }

    .menu-menu-principal-container {
      width: fit-content;
      display: flex;
      height: 55px;
      justify-content: flex-end;
      margin: 0 0 auto auto;
    }

    ul#menu-menu-principal {
      width: 1155px;
      background-color: #fff;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      padding-top: 20px;
    }

    .gtm-header-main {
      background-color: transparent;
    }

    .gtm-logo {
      top: 50px !important;
    }
  }