/*
Theme Name: Hello Ethicweb
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Ethicweb
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1744636565
Updated: 2025-04-14 15:16:05

*/

/*GENERALITIES*/

/* Tips

blue : var(--e-global-color-88a2520); 
light grey : var(--e-global-color-c86aee3)
dark grey : var(--e-global-color-958bfd1)
orange : var(--e-global-color-accent)

*/
:root{
    /*fonts*/
    --title-font: 'eurostile', 'Monterrat', 'open sans';
    --text-font : 'Montserrat', 'open sans', 'sans serif';

    --circle-icon: '〇';
}
.no-break{
    @media(max-width:767px){
        br{
            display:none;
        }
    }
}
/*-_-_-_-_-_-_-_-FONT STYLE-_-_-_-_-_-_--_*/

/*Headings*/
h1, h2, h3{
    font-family: var(--title-font);
}

h1{
    font-weight: 900;
}
h2{
    --title-color : var(--e-global-color-958bfd1);
    color : var(--title-color);
    font-weight: 900;
}
    

h3{
    font-weight: bold;
}

/*Content*/

p{
    font-family: var(--text-font);
}
a{
    color: var(--e-global-color-c86aee3);

    &:hover{
        color: var(--e-global-color-primary)!important;
    }
}
.eurostile {
    p, span{
        font-family: var(--title-font);
    } 
}
/*COLORS*/
.blue{
    color: var(--e-global-color-primary);
}

.white{
    color: white;
}


/*-_-_-_-_-_-_-_-_ELEMENTS STYLE-_-_-_-_-_-_-_-_-_*/

/*LISTS*/

.etw-bullet-list{ 
    --bullet-content : '•';
    --bullet-scale : 2.5;
    --bullet-offset-top : 0;
    --bullet-color : var(--e-global-color-958bfd1);

    --list-padding-left: 0;
    --list-elements-gap : 15px;    
    --list-element-indentation : 30px;
    
    
    ul{
        padding-left: var(--list-element-indentation);
    }
    li{
        position: relative;
        list-style: none;
        margin-bottom : var(--list-elements-gap);
        

        &:first-child{
            margin-top : var(--list-elements-gap);
        }
        
        &:before{
            position: absolute;
            width: auto;
            height: auto;
            top : var(--bullet-offset-top);
            left : calc(var(--list-element-indentation)* -1);
            content : var(--bullet-content);
            transform:  scale(var(--bullet-scale));
            color: var(--bullet-color);
        }
    }
}

/*BUTTONS*/

.etw-button{
    --button-width : 200px;
    
    --icon-size : 45px;
    --icon-background-color: var(--e-global-color-primary);
    --icon-background-color-hover: var(--e-global-color-958bfd1);
    --icon-space-from-text : 5px;
    
    --text-color:  var(--e-global-color-primary);
    --text-color-hover:  var(--e-global-color-958bfd1);
    --text-transform : uppercase;
    
    --text-background-color : var(--e-global-color-958bfd1);
    --text-background-color-hover: var(--e-global-color-primary);
    
    
    a{
        display:flex;
        justify-content: center;
        align-items: center;
        width: var(--button-width);
        gap : var(--icon-space-from-text);
    }
    
    .etw-button-text{
        display:flex;
        justify-content: center;
        width: 70%;
        color: var(--e-global-color-primary);
        text-transform: var(--text-transform);
        font-weight: 800;
        font-family: var(--text-font);
        letter-spacing: 0.48px;
        background-color: var(--text-background-color);
        border-radius : 30px;
        padding:10px 30px;
        transition : 0.2s ease;
    }
    .etw-button-icon{
        width: var(--icon-size);
        height: var(--icon-size);
        background-color: var(--icon-background-color);
        border-radius: 30px;
        display:flex;
        justify-content: center;
        align-items: center;
        transition : transform 0.4s ease-out;
    }
    
    &:hover{
        .etw-button-text{
            background-color: var(--text-background-color-hover);
            color : var(--text-color-hover);
        }
        .etw-button-icon{
            background-color: var(--icon-background-color-hover);
            transform : translatex(10px) rotate(45deg);
        }
    }
}

.elementor-widget-button{
    /*Supercharges elementor button*/
    --button-outline-color: var(--e-global-color-primary);
    --button-font-family : var(--title-font);
    
    a{
        font-family: var(--button-font-family);
        outline: 2px solid transparent;
    }
    &:hover a{
        outline-color:var(--button-outline-color);
    }

    &.button-orange-outline{
        --button-outline-color : var(--e-global-color-accent);
    }
    &.button-blue-outline{
        --button-outline-color : var(--e-global-color-primary);
    }
}
/*TITLES*/

.dotted{
    --title-circle-color: var(--e-global-color-primary);
    --title-circle-size: 15px;
    position: relative;

    &:after{
        content : var(--circle-icon);
        position:absolute;
        right:calc(var(--title-circle-size) * -1.5);
        bottom: 0;
        line-height: 1.1em;
        font-weight: 500;
        font-size: var(--title-circle-size);
        color : var(--title-circle-color);
    }
}
.dotted-orange{
    --title-circle-color: var(--e-global-color-accent);
}
.dotted-blue{
    --title-circle-color: var(--e-global-color-primary);
}

/*CARDS*/

.blue-card{
    &:hover{
        h3{
            transform: translatey(-15px);
            transition: 0.3s ease;
            
            span:first-child{
                opacity : 0;
            }
        }
        svg{
            transform : translatex(25px);
            transition : transform 0.1s 0.4s ease-out;
            
            path{
                &:last-child{
                    fill: var(--e-global-color-accent);
                }
                &:nth-child(1){
                    transition: 0.1s 0.3s ease;
                    opacity: 0;
                }
                &:nth-child(2){
                    transition: 0.1s 0.2s ease;
                    opacity: 0;
                }
                &:nth-child(3){
                    transition: 0.1s 0.1s ease;
                    opacity: 0;
                }
            }
        }
    }
}
/*-_-_-_-_-_-_-_-_-_ SECTIONS STYLE -_-_-_-_-_-_-_-_-_*/


/*HEADER*/

header{
    /*Menu links style*/
    .menu a{
        --icon-width : 18px;
     
        &:after{
            content : url('/wp-content/uploads/2025/06/ondes-bleu.svg');
            position: absolute;
            right: 0;
            top: 5px;
            width:var(--icon-width);
            background-color: transparent!important;
            transform-origin:left;
            transform: scale(0.5);
            transition: 0.2s ease;
        }
        
        &:hover{
            &:after{
                transform: scale(1) ;
            }
        }
    }
}

/*DECORATION*/

.etw-decoration{
    /*Availlable decoration */
    --half-grey-gear : url('/wp-content/uploads/2025/06/Fond-Engrenage.svg');
    --circle-round-blue-orange : url('/wp-content/uploads/2025/06/Cercle-Ronds-Separateur-Yin-Yang.svg');
    
    /*Availlable properties*/
    --deco-before-offset-left : clamp(0px, 5vw, 100px);
    --deco-before-offset-top : -186px;
    --deco-before-type : var(--half-grey-gear);
    --deco-before-reverse : 1; /* Use -1 to invert svg*/
    --deco-before-scale: 1 ;
    --deco-before-transform-origin : top;
    
    --deco-after-offset-left : calc(clamp(0px, 5vw, 300px) + 85px);
    --deco-after-offset-top : -22%;
    --deco-after-type : var(--circle-round-blue-orange);
    --deco-after-reverse : 1; /* Use -1 to invert svg*/
    --deco-after-scale: 1 ;
    --deco-after-transform-origin : center;
    
    /*Magic begins*/
    
    &:before{
        position: absolute;
        content: var(--deco-before-type)!important;
        left: var(--deco-before-offset-left)!important;
        top: calc(
                var(--deco-before-offset-top) * (var(--deco-before-scale))
            )!important;
        transform-origin: var( --deco-before-transform-origin);
        transform: scale( calc( var(--deco-before-reverse) * var(--deco-before-scale)), var(--deco-before-scale)); 
    }
    
    &:after{
        position: absolute;
        content: var(--deco-after-type);
        left: var(--deco-after-offset-left);
        top: calc(var(--deco-after-offset-top) * (var(--deco-after-scale)  ));
        transform-origin: var( --deco-after-transform-origin);
        transform: scale( calc( var(--deco-after-reverse) * var(--deco-after-scale)), var(--deco-after-scale)); 
    }
}

.decoration-gear{
    /*Before*/
    --deco-before-type : var(--half-grey-gear);

    --deco-before-offset-left : clamp(0px, 5vw, 100px);
    --deco-before-offset-top : -186px;
    --deco-before-reverse : 1; /* Use -1 to invert svg*/
    --deco-before-scale: 1 ;
    --deco-before-transform-origin : top;
    
    /*after*/   
    --deco-after-type : var(--circle-round-blue-orange);

    --deco-after-offset-left : calc(clamp(0px, 5vw, 300px) + 85px);
    --deco-after-offset-top : -120px;
    --deco-after-reverse : 1; /* Use -1 to invert svg*/
    --deco-after-scale: 1 ;
    --deco-after-transform-origin : center;
    
    @media(max-width:767px){
        /*Before*/
        --deco-before-offset-left : -100px;
        --deco-before-scale: 0.5 ;

        /*after*/        
        --deco-after-offset-left : -20px;
        --deco-after-scale: 0.5 ;
        --deco-after-offset-top : -240px;
    }
}