@media screen and (min-width:1024px){
  
/** //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------------------------------------------------------------------------------
                                                  STRUCTURE - MENU
--------------------------------------------------------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// **/

    /* -----------------------------------------------------------
                        BARRE DE NAVIGATION
    ------------------------------------------------------------ */

    .gtm-header-main {
      justify-content: flex-end;/* Centrer les éléments du menu */
    }

    .gtm-header-main .menu.mod-menu.mod-list.nav {
      margin: 0;
    }

    /* ------------------- LOGO -------------------- */

    /*** VOIR gtm-menu-logo ***/



    /* -----------------------------------------------------------
                      NAVIGATION
    ------------------------------------------------------------ */


    /* ------------------- PREMIER NIVEAU -------------------- */

    /* Design des liens du menu 
    .gtmHeader .menu > .menu-item:not(.default) {
      margin-left: 50px;   espace les liens du menu de 50px à gauche 
    }*/

    .gtmHeader .menu > .menu-item {
      padding: 10px 20px;/* permet de bien centrer les items de menu */
      margin: 0;
    }

    .gtmHeader .menu > .menu-item.parent {
      margin: auto 25px auto 10px;/* permet de bien centrer les items de menu */
    }

    .gtmHeader .menu > .menu-item > a {
      display: block; /* permet de center verticalement les liens du menu */
      padding: 0;/* espacement des liens de menu */
    }


    /* ------------------- SECOND NIVEAU -------------------- */

    /* Design des liens du sous-menu */
    .gtmHeader .menu > .menu-item > .gtm-sub-menu > .menu-item > a {
      padding: 5px 20px;/* Padding de lien de sous menu */
    }

    /* Design du sous-menu */    
    .gtmHeader .menu > .menu-item > .gtm-sub-menu {
      position: absolute;
      left:0%;/* Opx à gauche */
      top:35px;/* 50px du haut */
      width: 220px;/* Largeur du sous menu */
      padding: 10px 0px 10px 0px;/* Padding du sous-menu */
      opacity:0;/* Rendre le sous-menu transparent quand il n'est pas visible */
      transform: translateY(20px); /* position du sous menu 20px plus bas pour effet d'apparition */
      visibility: hidden;/* Cacher le sous-menu */
    }


    /* Apparition du sous menu au survol */
    .gtmHeader .menu > .gtm-menu-item-has-children:hover > .gtm-sub-menu{
      opacity: 1;/* Ajoute l'opacité */
      visibility: visible; /* Rendre le sous-menu visible */
      transform: translateY(0);/* position du sous menu 0px pour effet d'apparition */
    }

    .gtmHeader .menu > .menu-item > .gtm-sub-menu {
      z-index: 10;/* Permet de passer au dessus de l'image du logo */
    }

    /* -----------------------------------------------------------
          LIGNE AU DESSOUS DES LIENS DU MENU
    ------------------------------------------------------------ */

    .gtmFada {
      position: relative;/* Définir la position pour les élément after et before de l'icone */
    }

    .gtmFada::before {
      content: '';
      position: absolute;/* Position absolute par raport à l'élément .gtmFada */
      bottom: 0px;/* colle la ligne sur le haut de l'écran */
      transform: scaleX(0);/* fait disparaitre la barre  */
    }

    .gtmFada:hover::before {
      transform: scaleX(1);/* fait apparaitre la barre  */
    }

    .gtm-sub-menu .gtmFada::before {
      display: none;/* supprime la barre créée automatiquement dans le sous-menu */
    }

    .gtmFada.active::before {
      transform: scaleX(1);/* laisse la barre visible quand le lien est actif */
    }


    /* -----------------------------------------------------------
                  ICÔNES SOUS MENU
    ------------------------------------------------------------ */

    .gtm-menu-item-has-children .separator {
      position: relative;/* Définir la position pour les élément after et before de l'icone */
    }

    /* Barre horizontale du + */
    .gtm-menu-item-has-children .separator::after {
      content:'';
      position: absolute;/* Position absolute par raport à l'élément .separator */
      top: 50%;/* 50 % du haut */
      right: -10px;/* du bord droit du separateur */
      width: 10px;/* largeur de la barre */
      height: 2px;/* hauteur de la barre */
      transform: translate(5px, -50%);/* permet de bien centrer verticalement et de décaler de 5px vers la gauche */
    }

    /* Barre verticale du + */
    .gtm-menu-item-has-children .separator::before {
      content:'';
      position: absolute;/* Position absolute par raport à l'élément .separator */
      top: 50%;;/* 50 % du haut */
      right: -10px;/* du bord droit du separateur */
      width: 10px;/* largeur de la barre */
      height: 2px;/* hauteur de la barre */
      transform: translate(5px, -50%) rotate(-90deg);	/* centrage de la barre par rapport à la ligne et rotation de la barre pour former un + décalage de 5px vers la gauche */
      transition: all .2s ease;/* transition du passage de + à - */
    }


    .gtm-menu-item-has-children:hover .separator::before {
      transform: translate(5px, -50%) rotate(0deg);/* rotation de la barre verticale actif et garde les barres au bon endroit pendant l'animation */
    }

    .gtm-menu-item-has-children:hover .separator::after {
      transform: translate(5px, -50%);/* garde les barres au bon endroit pendant l'animation */
    }

  }

/** //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------------------------------------------------------------------------------
                                                  MENU
--------------------------------------------------------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// **/

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


/* -----------------------------------------------------------
                          ICÔNE BURGER
------------------------------------------------------------ */
  
/* ------------------- OUVRIR & FERMER -------------------- */
  
    .gtm-header-main {
        justify-content: flex-end; /* Positionne le burger à droite*/
    }
  
    /* Attribut flex des boites ouvrir et fermer */
    .gtmHeader .gtm-close-nav-menu,
    .gtmHeader .gtm-open-nav-menu {
        display: flex;
        z-index: 10000; /* Permet de passer au dessus de l'overlay du menu */
    }
  
  
  /* ------------------- OUVRIR -------------------- */
  
    /* Boite de l'icône burger */
    .gtmHeader .gtm-open-nav-menu{
        height: 52px; /* hauteur du fond */
        width: 52px; /* largeur du fond */
        margin: 0px;
        align-items: center; /* centrer les barres du burger verticalement */
        justify-content: center; /* centrer les barres du burger horizontalement */
        cursor: pointer;
    }
  
    /* *** Lignes de l'icône burger *** */
  
  
    /* Ligne centrale */
    .gtmHeader .gtm-open-nav-menu span {
        display: block;
        position: relative;
    }
  
    /* Lignes haute & basse */
    .gtmHeader .gtm-open-nav-menu span:before,
    .gtmHeader .gtm-open-nav-menu span:after{
        content: '';
        position: absolute;
        left:0; /* positionnement tout à gauche de la ligne centrale */
        width: 100%; /* largeur des lignes haute & basse */
        height: 100%; /* utilise toute la hauteur */
        box-sizing: border-box;
    }
  
    /* Lignes haute */
    .gtmHeader .gtm-open-nav-menu span:before{
        top:-7px;/* Positionnement de la ligne haute */
    }
  
    .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 */
  }
  
  .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 */
  }
  
/* -----------------------------------------------------------
                          MENU
------------------------------------------------------------ */
  
  .gtmHeader .gtm-nav-menu{
      position: fixed;/* pour que le menu reste toutjours présent */
      width: 100%;/* menu pleine page (prend toute la largeur) */
      height: 100%;/* menu pleine page (prend toute la hauteur) */
      /*top:0; Fixe le menu en haut de l'écran */
      z-index: 1000;
      padding: 15px 0;
      overflow-y: auto;
  }
  
  
    /* Menu ouvert */
  .gtmHeader .gtm-nav-menu.gtmOpen {
      visibility: visible;/* Rendre le menu visible */
  }
  
  /* ------------------- OVERLAY SI MENU NE PREND PAS TOUT L'ECRAN -------------------- */
  
  /*** VOIR gtm-menu-overlay ***/
  
  
/* -----------------------------------------------------------
                          NAVIGATION
------------------------------------------------------------ */

ul.menu.mod-menu.mod-list.nav {
  margin-left: 0px;
  padding-right: 0px;
}

li.menu-item {
  margin: 5px 0px;
}
  
  .gtmHeader .gtm-nav-menu .menu {
       position: relative;
      z-index: 10001;
      flex-direction: column;
      /* align-items: center; */
      /* justify-content: center; */
      flex-wrap: nowrap;
      height: 100%;
  }
  
  /* Centrer verticalament et horizontalement les liens du menu */
  .gtmHeader .menu > .gtm-menu-item-has-children > a{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  
  /* ------------------- LOGO -------------------- */
  
  /*** VOIR gtm-menu-logo ***/
  
  
  /* ------------------- PREMIER NIVEAU -------------------- */
  
  
  .gtmHeader .menu > .menu-item {
      display: block;
      /* padding: 0 25px;
      margin: 0 auto 20px auto; */
      /* text-align: center; */
      line-height: 1.8rem;
  }
  
  /* liens parent (ouvre les sous-menus) */
  .mod-menu__separator.separator {
       padding: 0 !important;
  }
  
  
  /* ------------------- SECOND NIVEAU -------------------- */
  
  /* Design des liens de second niveau  */
  /* .gtmHeader .menu > .menu-item > .gtm-sub-menu li a {
  } */
  


  .gtmHeader .menu > .menu-item:last-child > .gtm-sub-menu {
    left: auto;
    right: 0% !important;
}

  .gtmHeader .menu > .menu-item > .gtm-sub-menu{
      width: 100%;
      position: relative;
      border:none;
      background-color: transparent;
      box-shadow: none;
      transform: translateY(0px);
      padding: 0px;
      left: auto;
      top:auto;
      max-height: 0;
      overflow: hidden; 
  }
  
  .menu-item.gtm-menu-item-has-children .gtm-sub-menu {
      visibility: hidden;
      opacity: 0;
  }
      
  
  .menu-item.gtm-menu-item-has-children.gtm-active .gtm-sub-menu {
      visibility: visible;
      opacity: 1;
  }
      
  
  
/* -----------------------------------------------------------
                      ICÔNES SOUS MENU
------------------------------------------------------------ */
  
    .gtm-menu-item-has-children .separator {
        position: relative;/* Définir la position pour les élément after et before de l'icone */
    }
  
    /* Barre horizontale du + */
    .gtm-menu-item-has-children .separator::after {
        content:'';
        position: absolute;/* Position absolute par rapport à l'élément .separator */
        width: 10px;/* largeur de la barre */
        height: 2px;/* hauteur de la barre */
        top: 50%;/* 50 % du haut */
        transform: translateY(50%);/* permet de bien centrer verticalement */
        right: -15px;/* du bord droit de la ligne */
    }
      
    /* Barre verticale du + */
    .gtm-menu-item-has-children .separator::before {
        content:'';
        position: absolute;/* Position absolute par rapport à l'élément .separator */
        width: 10px;/* largeur de la barre */
        height: 2px;/* hauteur de la barre */
        top: 50%;/* 50 % du haut */
        right: -15px;/* du bord droit de la ligne */
              transform: translateY(50%) rotate(-90deg);  /* centrage de la barre par rapport à la ligne et rotation de la barre pour former un + */
    }

    /* Barre verticale du + */
    .gtm-menu-item-has-children.gtm-active .separator::before {
      transform: rotate(0deg);
    }
      
  
  }