/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

DESIGN GENERAL

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


.gtmContainer{
    max-width: 100%; /* prend la largeur complète de l'écran */
    padding: 0;/* supprime les padding */
}

/* supprime les padding */
.row.gtmMenu {
    padding-top:0;
    padding-bottom:0;
}

/* Position fixed de barre de navigation */
.gtmHeader{
	position: fixed;
	width: 100%;
	left:0;
	top:0;
	z-index: 99;
}

.gtm-header-main {
	display: flex; /* Ajoute la propriété FLEX aux menu DESKTOP et MOBILE */
}


.gtmHeader .menu > .menu-item {
    cursor: pointer; /* fait apparaitre la petite main */
}


.gtmHeader .menu > .menu-item > .gtm-sub-menu{
	transition: all 0.3s ease; /* Transition des sous-menu */
}

.gtmHeader .menu > .menu-item > .gtm-sub-menu > .menu-item > a{
	display: block; /* permet le bon alignement des liens de sous-menu verticaux */
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

DESIGN MOBILE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

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


/* -----------------------------------------------------------
                        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: 45px; /* hauteur du fond */
        width: 45px; /* largeur du fond */
        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;
    }

    /* *** Lignes de l'icône burger *** */


    /* Ligne centrale */
    .gtmHeader .gtm-open-nav-menu span {
        display: block;
        position: relative;
        height: 3px;/* épaisseur de la ligne centrale */
        width: 24px;/* largeur de la ligne centrale */
    }

    /* 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;
        transition: all .2s ease;/* transition des lignes */
    }

    /* 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{
        background-color: transparent; /* suppression ou changement de la couleur de la boite de l'icône */
    }

    .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 */
        /* background-color: whitesmoke; Permet de changer la couleur de la ligne 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 */
        /* background-color: whitesmoke; Permet de changer la couleur de la ligne basse */
        top:0px; /* position la ligne basse au center */
    }

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

    .gtmHeader .gtm-nav-menu{
       
        /* Design général du 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;
		transition: all 0.5s ease;/* Transition d'apparition du menu*/

        /* Menu fermé */

        right: -100%;/* Décalage du menu sur la droite (mouvement latéral de droite à gauche à l'ouverture) */
		visibility: hidden;/* Rendre le menu invisible */
	}
    

    /* Menu ouvert */
	.gtmHeader .gtm-nav-menu.gtmOpen {
		visibility: visible;/* Rendre le menu visible */
		right: 0px;/* Décalage de 100% pour faire apparaitre le menu */
	}

/* ------------------- OVERLAY SI MENU NE PREND PAS TOUT L'ECRAN -------------------- */

/*** VOIR gtm-menu-overlay ***/

.gtmLogoMenu {
    display: none;
}

.item-136 {
    margin:0 auto 0px auto !important
}


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

    .gtmHeader .gtm-nav-menu .menu {
        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;
        max-width: 300px; /* force la navigation à ne pas dépasser 300px de large (permet également d'aligner les icône sous-menu) */
        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 {
		padding: 10px 45px;
    }

    .gtmHeader .menu > .menu-item > .gtm-sub-menu{
		width: 100%;
		position: relative;
		opacity: 1;
		visibility: visible;
		border:none;
		background-color: transparent;
		box-shadow: none;
		transform: translateY(0px);
		padding: 0px;
		left: auto;
		top:auto;
		max-height: 0;
		overflow: hidden;
	}


/* -----------------------------------------------------------
                    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 */
        top: 50%;/* 50 % du haut */
        right: -15px;/* du bord droit de la ligne */
        width: 10px;/* largeur de la barre */
        height: 2px;/* hauteur de la barre */
        transform: translateY(50%);/* permet de bien centrer verticalement */
    }

    /* Barre verticale du + */
    .gtm-menu-item-has-children .separator::before {
        /*------*/
        content:'';
        position: absolute;/* Position absolute par rapport à l'élément .separator */
        top: 50%;/* 50 % du haut */
        right: -15px;/* du bord droit de la ligne */
        width: 10px;/* largeur de la barre */
        height: 2px;/* hauteur de la barre */
        transform: translateY(50%) 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 + à - */
    }


    .gtm-menu-item-has-children.gtm-active .separator::before {
        transform: rotate(0deg);/* rotation de la barre verticale actif */
    }


}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

DESIGN DESKTOP

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

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


/* -----------------------------------------------------------
                    BARRE DE NAVIGATION
------------------------------------------------------------ */
    .gtm-menu {
        margin-bottom: 48px; /* permet au contenu de se mettre en dessous du menu (à adapter selon le menu) */
    }


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

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

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

.menu-item.default {
    display: none !important;
}

.gtmLogoMenu {
    background-color: rgba(255, 255, 255, 1); /* arriere plan du logo */
}

.gtmLogoMenu img {
    width: 100px;/* taille du logo */
    padding: 0px 5px;
    transition: all .3s ease-in-out;
}

.gtmHeader .gtm-nav-menu {
    height: 40px; /* hauteur de la barre de menu ( annule la hauteur créée par le logo ) */ 
}

.gtmLogoMenu.scroll {
    background-color: rgba(255, 255, 255, 0);
    padding: 5px 0px 0px 0px!important;
}

.gtmLogoMenu.scroll img {
    width: 40px;
}


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


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

    .gtmHeader .menu > .menu-item > a {
        /* --------- */
        display: block; /* permet de center verticalement les liens du menu */
        padding: 12px 0;/* espacement des liens de menu */
        font-size: 20px;/* Taille des liens de menu */
        letter-spacing: normal;/* Espacement des lettres des liens de menu */
        text-transform: uppercase;/* met les liens en majuscule */
        font-weight: 400;/* épaisseur des liens */
        transition: all 0.3s ease;/* transition au survol des liens */
    }


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

    /* Design des liens du sous-menu */
    .gtmHeader .menu > .menu-item > .gtm-sub-menu > .menu-item > a {
        /* --------- */
        font-size: 16px;/* Taille liens du sous-menu */
        font-weight: 400;/* épaisseur liens du sous-menu */
        text-transform: capitalize;/* Ajoute une majuscule aux liens du sous-menu */
        padding: 5px 20px;/* Padding de lien de sous menu */
        transition: all 0.3s ease;/* transition liens du sous-menu */
    }


    /* Design du sous-menu */    
    .gtmHeader .menu > .menu-item > .gtm-sub-menu {
        /* ---------- */
        position: absolute;
        left:0;/* Opx à gauche */
        top:50px;/* 50px du haut */
        width: 220px;/* Largeur du sous menu */
        padding: 10px 0;/* 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 {
        background-color: #f19e1f ;/* couelur de barre  */
        /* -------- */
        content: '';
        position: absolute;/* Position absolute par raport à l'élément .gtmFada */
        top: 0px;/* colle la ligne sur le haut de l'écran */
        width: 100%;/* largeur de la barret  */
        height: 4px;/* hauteur de la barre  */
        transform: scaleX(0);/* fait disparaitre la barre  */
        transition: transform .3s ease;/* transition d'apparition de 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 {
        background-color: #656565;/* couleur de la barre */
        /* -------- */
        content:'';
        position: absolute;/* Position absolute par raport à l'élément .separator */
        top: 50%;/* 50 % du haut */
        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 {
        background-color: #656565;/* couleur de la barre */
        /* -------- */
        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 {
        background-color: #f19e1f ;/* couleur de la barre verticale actif */
        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 {
        background-color: #f19e1f ;/* couleur du picto actif */
        transform: translate(5px, -50%);/* garde les barres au bon endroit pendant l'animation */
    }

}