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

/* Ajout d'un logo dans le fond du menu */

  .gtmHeader.gtmOpen::before {
    content: url("/images/logo-frequence.png");
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* width: 100%; */
    opacity: 1;
    z-index: 0;
    box-sizing: border-box;
    padding: 20px 25px 0px 25px;
  }
    
/* -----------------------------------------------------------
                          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: #50b964; /* 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;
    margin-left: 0px;
  }
  
/* Apparition disparition du menu */
    
  .gtmHeader {
    top: -100%;/* déplacement du menu hors site */
    transition: all 0.5s ease;/* Transition d'apparition du menu*/
  }

  /* Menu ouvert */
  .gtmHeader.gtmOpen {
    top: 0px;/* Décalage de 100% pour faire apparaitre le menu */
    z-index: 100;
    background-color: #fff;
  }

/* -----------------------------------------------------------
                  NAVIGATION PRINCIPALE
------------------------------------------------------------ */
  
  .menu-item.default {
    display: block;
  }
        
  nav.gtm-nav-menu .menu {
    display: block;
    text-align: center;
    margin: 0px;
  }
  
/* espacement des liens */
    
  .gtmHeader .menu > .menu-item  {
    margin-bottom: 10px;
  }

  .gtmHeader .menu > .menu-item > a {
    font-family: 'Oswald', sans-serif;
    color: #000;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0px;
    transition: all 0.3s ease;/* transition au survol des liens */
  }
  
  @media screen and (max-width: 375px) {
    .gtmHeader .menu > .menu-item > a {
      font-size: 1.7rem;
    }
  }
    
/* Design des liens actifs */
    
  .menu > .gtmFada.active > a{ 
    color: #50b964;
    font-weight: 600;
  }

  /* curseur sur les séparateurs */
  .separator {
    cursor: pointer;
  }

  /* Design des séparateurs actifs  */

  .parent.gtm-active a.separator {
    color: #50b964 !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 .gtm-sub-menu {
    display: block;
    text-align: center;
    list-style: none;
  }

  .gtmHeader .menu > .gtm-menu-item-has-children .gtm-sub-menu {
    position: relative;
    max-height: 0;
    overflow: hidden; 
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
  } 

  .gtmHeader .menu > .gtm-menu-item-has-children.gtm-active .gtm-sub-menu  {
    visibility: visible;
    opacity: 1;
  }

/* Design des liens du sous menu  */
  nav.gtm-nav-menu .gtm-sub-menu li:first-child {
    padding-top: 10px;
  }

  nav.gtm-nav-menu .gtm-sub-menu li {
    line-height: 1.8rem;
  }

  nav.gtm-nav-menu .gtm-sub-menu li a {
    font-family: 'Oswald', sans-serif;
    color: #000;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.2rem;
    transition: all 0.3s ease;
  }
    
  /* Design des liens Au survol et actif */
  nav.gtm-nav-menu .gtm-sub-menu li.active a {
    color: #50b964;
  }

/* -----------------------------------------------------------
                      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 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: 48%;/* 48 % du haut */
    right: -15px;/* du bord droit de la ligne */
    background-color: #50b964;/* couleur de la barre */
    transform: translateY(48%) rotate(-90deg);  /* centrage de la barre par rapport à la ligne et rotation de la barre pour former un + */
    transition: all .3s ease;/* transition du passage de + à - */
  }

  /* 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: 48%;/* 50 % du haut */
    transform: translateY(48%);/* permet de bien centrer verticalement */
    right: -15px;/* du bord droit de la ligne */
    background-color: #50b964;/* couleur de la barre */
  }
    
  /* Barre verticale du + */
  .gtm-menu-item-has-children.gtm-active .separator::before {
    transform: rotate(0deg);
  }  

  .gtm-menu-item-has-children.gtm-active .separator::after, 
  .gtm-menu-item-has-children.gtm-active .separator::before {
    background-color: #50b964;/* couleur du picto actif */
  }

  .gtm-menu-item-has-children.active .separator::after, 
  .gtm-menu-item-has-children.active .separator::before {
    background-color: #50b964;/* couleur du picto actif */
  }
}
  
/* ============================ FIN DU MENU MOBILE ================================= */


/* ============================ MENU GRAND MOBILE ================================= */
    
@media screen and (min-width: 400px) and (max-width: 1199px) {

  /* 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 .gtm-sub-menu li a {
    font-size: 20px;
  }
}

/* ============================ FIN DU MENU GRAND MOBILE ================================= */
  
  
    
/** //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------------------------------------------------------------------------------
                                                              MENU DESKTOP
--------------------------------------------------------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// **/
    
@media screen and (min-width: 1200px) {
    
/* -----------------------------------------------------
                          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: absolute;
    height: 50px;
    z-index: 10000000;
    right: 20px;
    top: 0;
    background-color: transparent;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: all .2s ease-in-out;
  }

  .gtm-body.gtm-scroll .gtm-header-main {
    background-color: #fff;
  }

    
  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;
  }
    
/* -----------------------------------------------------
                NAVIGATIOM PRINCIPALE
------------------------------------------------------- */
    
/* Design des liens */
    
  .gtmHeader .menu > .menu-item > a {
    font-family: 'Oswald', sans-serif;
    color: #000;
    font-size: 2.5rem;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0px;
  }

.gtm-body.gtm-scroll .gtmHeader .menu > .menu-item > a {
    color: #132d44;
  }
  
/* Design des liens Au survol */
  
  .gtmHeader .menu > .menu-item > a:hover {
    color: #50b964;/* couleur des liens de menu */
  }

  .gtm-body.gtm-scroll .gtmHeader .menu > .menu-item > a:hover {
    color: #50b964;/* couleur des liens de menu */
  }
    
/* Design des liens actifs */
    
  .menu > .gtmFada.active > a{ 
    color: #50b964;
    font-weight: 600;
  }
    
  .gtm-body.gtm-scroll .menu > .gtmFada.active > a{ 
    color: #50b964;
    font-weight: 600;
  }
    
/* Design des séparateurs actifs  */
    
  .parent.gtm-active a.separator {
    color: #50b964 !important;
    font-weight: 600 !important;
  }

  .gtm-body.gtm-scroll .parent.gtm-active a.separator {
    color: #50b964 !important;
    font-weight: 600 !important;
  }

  .gtm-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 > .gtm-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;
      transition: all 0.3s ease;/* transition liens du sous-menu */
    }
    
    .gtmHeader .menu > .gtm-menu-item-has-children:hover > .gtm-sub-menu {
      opacity: 1; 
      visibility: visible; 
    }

    .gtmHeader .menu > .menu-item > .gtm-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 > .gtm-sub-menu {
      right: 0%;
      left: auto;
    }

    /* Design des liens du sous menu  */

    nav.gtm-nav-menu .gtm-sub-menu li {
      padding-bottom: 0px !important;
    }

    nav.gtm-nav-menu .gtm-sub-menu li a {
    font-family: 'Oswald', sans-serif;
      color: #132d44;
      font-size: 22px;
      font-weight: 400;
      margin: 0;
      transition: all 0.3s ease;
    }
    
    /* Design des liens Au survol et actif */

    nav.gtm-nav-menu .gtm-sub-menu li:hover a, 
    nav.gtm-nav-menu .gtm-sub-menu li.active a {
      color: #50b964;
    }
    
/* -----------------------------------------------------------
                  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 verticale du + */

  .gtm-menu-item-has-children .separator::before {
    content:"";
    position: absolute;/* Position absolute par raport à l'élément .separator */
    top: 48%;;/* 50 % du haut */
    right: -10px;/* du bord droit du separateur */
    width: 10px;/* largeur de la barre */
    height: 2px;/* hauteur de la barre */
    background-color: #50b964;/* couleur de la barre */
    transform: translate(5px, -48%) 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 + à - */
  }

/* Barre horizontale du + */

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

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

  .gtm-menu-item-has-children:hover .separator::after {
    background-color: #50b964;/* couleur de la barre verticale actif */
  }

  .gtm-menu-item-has-children.active .separator::after, 
  .gtm-menu-item-has-children.active .separator::before {
    background-color: #50b964;/* couleur du picto actif */
  }
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: transparent;
    border: 0px transparent;
}