:root{
    --etw-global-padding : max(2%, 1rem);
}
section{
    padding-left: var(--etw-global-padding, inherit);
    padding-right: var(--etw-global-padding, inherit);
}

/*Empeche de scroller lorsque qu'un menu est ouvert*/
body:has(header.open),
body:has(header .etw-menu .elementor-menu-toggle.elementor-active){
    overflow: hidden!important;
}



/*
1 - ETW MENU
2 - TOPBAR
3 - TIROIR
4 - CLASSES ADDITIONNELLES
5 - DEBUG ET HACK
*/



/**********************************************************/
/******************** *  * MENU *  * *********************/
/********************************************************/


header:has(.etw-menu),
[data-elementor-type="header"]:has(.etw-menu){

    position: fixed;
    z-index: 1000;
    width: 100vw;
    transform: translatey(0); 
    transition : transform var(--etw-header-transition-duration) ease;

    /************* VARIABLES ***************/

    
    /*Généralités*/
    --etw-menu-height : 5rem; /* Hauteur de la partie avec le menu principale */       
    --etw-topbar-height : 0rem; /* Hauteur de la top bar */
    --etw-header-height : calc(var(--etw-menu-height) + var(--etw-topbar-height)); /*Hauteur totale du header (topbar + menu)*/
    --etw-header-content-max-width : 100rem;  /* Seuil de largeur max pour les grands ecrans */
    --etw-header-side-width : calc( (100vw - var(--etw-header-content-max-width)) / 2 ) ;    /* Largeur des cotés hors contenu */

    --etw-header-background-color : white; /* Couleur de fond */
    
    
    /*Logo*/
    --etw-menu-logo-width : min(15rem, 10vh);
    --etw-menu-logo-min-width : 10rem;
    --etw-menu-logo-transform-origin: center left ;
    --etw-menu-logo-scale : 1;
    --etw-menu-mutated-logo-scale : 0.8;

    
    /*Menu*/

    --etw-menu-menu-item-gap : clamp(0rem, calc(1vw + 0.02rem), 0.5rem); /*Gere les espaces entre les éléments de menu dynamiquement*/
    --etw-menu-menu-item-font-size : clamp(0.8rem, calc(1vw + 0.02rem), 1rem) ; /*Taille de la police des éléments de menu dynamiquement*/
    --etw-menu-menu-item-before-size : 0.4rem; /*Taille des éléments décoratifs des items du menu principal*/
    --etw-menu-menu-item-before-color : white; /*Couleur des éléments décoratifs des items du menu principal*/

    
    /*Animation & transition*/

    --etw-header-transition-duration : 0.4s; /* Durée des transitions du header */
    --etw-header-translate-y-value : calc(100% + var(--wp-admin--admin-bar--height, 0px)); 
    
    .etw-menu{
        --content-width: var(--etw-header-content-max-width, inherit); 
        --min-height: var(--etw-menu-height, inherit);

        background-color: var(--etw-header-background-color, inherit);
        padding-left: var(--etw-global-padding, inherit);
        padding-right : var(--etw-global-padding, inherit);
    }
    
    /*Logo*/
    
    .etw-menu-logo img{
        transform-origin: var(--etw-menu-logo-transform-origin);
        max-height:  var(--etw-menu-height);
        width : var(--etw-menu-logo-width, inherit);
        min-width : var(--etw-menu-logo-min-width, inherit);
        transform : scale(var(--etw-menu-logo-scale));
        transition : transform var(--etw-header-transition-duration, inherit) ease!important; 
    }

    /* Widget Menu Worpress (Elementor)*/

    .etw-menu .elementor-nav-menu > .menu-item a{
        @media(min-width: 767px){
            font-size: var(--etw-menu-menu-item-font-size, inherit)!important;
        }
        
    }
    /* Submenu du widget Menu Worpress (Elementor)*/
    
    .etw-menu .sub-menu .menu-item a{
        font-size: 90%!important;
    }    

    /***************************** STYLES ALTERNATIFS AU SCROLL**************************/

    /* 
     il y a 3 styles alternatifs possible, en fonction de la valeur du scroll de la page : 
     1 - mutation lorsqu'un seuil de scroll prédéfini est atteint
     2 - mutation lorsque l'utilisateur scroll vers le bas
     3 - mutation lorsque l'utilisateur scroll vers le haut

    */

    /* 1- Mutation lorsque le seuil dans l'objet Header de header.js de scroll prédéfini est atteint */

    &.mutated{
        .etw-menu-logo img{
            transform : scale(var(--etw-menu-mutated-logo-scale));
        }
    }
    /* 2- Mutation lorsque l'utilisateur scroll vers le bas */

    &.scroll-down{
        transform: translatey(calc( var(--etw-header-translate-y-value) * -1)  ); /*Translate le header vers le haut en fonction de la variable --etw-header-translate-y-value et de la hauteur de la barre admin wp si elle existe*/
    }

    /* 3- Mutation lorsque l'utilisateur scroll vers le haut */

    &.scroll-up{
        transform: translatey(0); 
    }
}

/**********************************************************/
/******************* *  * TOPBAR *  * ********************/
/********************************************************/
    
header:has(.etw-topbar),
[data-elementor-type="header"]:has(.etw-topbar){
    --etw-topbar-height: 2rem;

    .etw-topbar{
        --content-width: var(--etw-header-content-max-width, inherit); 
        --min-height: var(--etw-topbar-height, inherit);

        padding-left: var(--etw-global-padding, inherit);
        padding-right : var(--etw-global-padding, inherit);
        background-color: var(--etw-header-background-color, inherit);
    }
}
header:has(.etw-topbar.hide-on-scroll){
    --etw-header-translate-y-value : calc(var(--etw-topbar-height) + var(--wp-admin--admin-bar--height, 0px))!important;
}


/*********************************************************************/
/************************  * * TIROIR * *  **************************/
/*******************************************************************/

header:has(.etw-drawer),
[data-elementor-type="header"]:has(.etw-drawer){
        
    .etw-drawer{
        --content-width : var(--etw-header-content-max-width, auto);

        width : var(--etw-width-value, 100%);
        height: calc(var(--etw-height-value, 30vh) - var(--etw-header-height, 5rem) - var(--wp-admin--admin-bar--height, 0px)); /*Hauteur du tiroir calculé en fonction de la hauteur du menu et de la barre admin wp*/
        position: var(--etw-position, absolute);
        top : var(--etw-menu-height);
        left: var(--etw-left, auto);
        right: var(--etw-right, auto);
        padding-left: var(--etw-global-padding, inherit);
        padding-right: var(--etw-global-padding, inherit);
    
        transform : var(--etw-translate-value, translatey(-100%));
        transition: var(--etw-transition-duration, 0.4s) var(--etw-transition-delay, 0s) var(--etw-transition-ease, ease);
    }

    .etw-drawer-button,
    .etw-drawer-killswitch,
    .etw-drawer-overlay{
        cursor: pointer;
    }
    .etw-drawer-overlay{
        opacity: 0;
        pointer-events: none;
        transform: var(--etw-translate-value);
        transition: opacity var(--etw-transition-duration, 0.4s) var(--etw-transition-delay, 0s) var(--etw-transition-ease, ease);
    }

    /*Si le tiroir est ouvert*/
    &.open .etw-drawer-overlay{
        opacity: 1;
        transform: translate(0);
        pointer-events: auto;
        z-index : -1;

    }
    &.open .etw-drawer-button svg{
        transform : rotate(45deg);
    }
    &.open .etw-drawer{
        z-index: 0;
        transform : translate(0);
    }

}

/*Classes qui permettent de changer les effets d'entrées du tiroir et la taille */

.width-30{
    --etw-width-value : clamp( 25rem, 30dvw, 30rem);
}
.width-50{
    --etw-width-value : clamp( 25rem, 50dvw, 100rem);
}
.width-100{
    --etw-width-value : 100dvw;
}
.height-100{
    --etw-height-value : 100dvh;
}

.slidein-top{
    --etw-translate-value : translatey(-100%);
    --etw-position: absolute;
    --etw-top : 0;
    --etw-right : auto;
    --etw-left : auto;
}

.slidein-left{
    --etw-translate-value : translatex(-100%);
    --etw-position: absolute;
    --etw-top : auto;
    --etw-right : auto;
    --etw-left : 0;

}
.slidein-right{
    --etw-translate-value : translatex(100%);
    --etw-position: absolute;
    --etw-top : auto;
    --etw-right : 0;
    --etw-left : auto;
}

/*******************************************************/
/**************** CLASSES ADDITIONNELLEs ***************/
/*****************************************************/

/* L'ajout de certaines classe permet d'overide le widget Menu Worpress:
    .menu-item-decoration : Ajoute des éléments décoratifs aux items du menu principal du widget "Menu Wordpress"
    .sub-menu-decoration : Ajoute des éléments décoratifs aux containers des submenu du widget "Menu Wordpress"
    .fullheight-sub-menu : force le widget "Menu Wordpress" a 100vh pour les mobiles
    .last-item-hightlighted : Permet de styliser le dernier élément du menu principal du widget"Menu Wordpress"
*/

/*Classe(s) a ajouter directement au parent */

header:has(.sub-menu-decoration),
[data-elementor-type="header"]:has(.sub-menu-decoration){      
    /* Permet d'ajouter une decoration sur l'élément submenu du widget "Menu Wordpress" */
    /* ETW Header - Classic 1 pour crééer la pointe de la bulle */

    --etw-sub-menu-before-width : 1.4rem; /*Largeur de l'élément décoratif du submenu*/
    --etw-sub-menu-before-height : 0.8rem; /*Hauteur de l'élément décoratif du submenu*/
    --etw-sub-menu-background-color : var(--e-global-color-15dceb9); /*Couleur de la déco*/

    .sub-menu::before{
        content: '';
        position:absolute;
        width: var(--etw-sub-menu-before-width);
        height: var(--etw-sub-menu-before-height);
        background-color: var(--etw-sub-menu-background-color, white);
        top: calc(var(--etw-sub-menu-before-height) * -1);
        left: 20px;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    
}

header:has(.fullheight-sub-menu),
[data-elementor-type="header"]:has(.fullheight-sub-menu){
    /*Force la hauteur du menu du widget "Menu Wordpress" a 100vh */
    /* ETW Header - Topbar 1 */
    .etw-menu nav.elementor-nav-menu--dropdown {
        z-index: -1;
        top : calc(var(--etw-menu-height) * -1)!important;
        padding-top: var(--etw-menu-height);
        min-height: 110dvh;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
    }
    
}

header:has(.menu-item-decoration),
[data-elementor-type="header"]:has(.menu-item-decoration){
    /* Ajoute un élément décoratif relatif au items du menu principal */
    /* ETW Header - Topbar 2 */
    .etw-menu .elementor-nav-menu > .menu-item::before{            
        content: '';
        display: block;
        position:absolute;
        width: var(--etw-menu-menu-item-before-size);
        height: var(--etw-menu-menu-item-before-size);
        bottom: calc( (0.5rem + var(--etw-menu-menu-item-before-size)) * -1 );
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        opacity : 0;
        background-color: var(--etw-menu-menu-item-before-color);
    }

    .etw-menu .elementor-nav-menu > .menu-item:has(.highlighted)::before,
    .etw-menu .elementor-nav-menu > .menu-item:hover::before{
        
        @media(min-width: 1024px){
            opacity: 1;
        }
    }
    
}
header:has(.last-item-hightlighted),
[data-elementor-type="header"]:has(.last-item-hightlighted) {
    
    /* Permet de styliser le(s) dernier(s) élément du widget "Menu Wordpress" */
    /* ETW Header - Classic 1 */

    --etw-color : var(--e-global-color-accent); /*Couleur du lien*/

    /*On peu changer le nombre de lien concerné dans le :nth-child*/
    .elementor-nav-menu > .menu-item:nth-last-child(-n + 1){
        height: 30px;
        align-self:center;
        border-radius: 50px;
        background-color: white;
        padding: 0 5px;
        
        a{
            color: var(--e-global-color-accent)!important;
            padding: 0 10px;
        }
    }
}


/**********************************************************/
/***************** *  * DEBUG ET HACK *  * ******************/
/********************************************************/

/*Optimise l'affichage du menu dans le builder */
body.elementor-editor-active,
body.elementor-editor-preview{

    /*Permet d'afficher le tiroir en mode ouvert dans le builder*/
    [data-elementor-type="header"]:has(.etw-drawer) .etw-drawer,
    [data-elementor-type="header"]:has(.etw-drawer) .etw-drawer-overlay{
        transform: translate(0);
        opacity: 1;
    }
    
    /*Masque le titre du header dans l'éditeur*/
    .page-header{
        display:none;
    }
    /*Force la position du header dans l'éditeur*/
    .elementor-location-header{
        top:0!important;
    }
}