/*
Theme Name: asticotheme
Theme URI: None
Author: asticoweb.com
Author URI: https://asticoweb.com
Description: Simple wordpress theme made with ❤️ by asticoweb.com | All rights reserved ©
Tags: theme, madewithlove, asticonet, asticoweb, asticoweb.com, asticotheme, coding, spreadthelove, personal, personaluseonly
Version: 3.8
License: License asticoweb.com
License URI: https://asticoweb.com
Text Domain: asticotheme
*/

::selection {
    background: var(--violet);
    color: var(--bleu);
    text-shadow: none;
}

::-webkit-selection {
    background: var(--violet);
    color: var(--bleu);
    text-shadow: none;
}

::-moz-selection {
    background: var(--violet);
    color: var(--bleu);
    text-shadow: none;
}

*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    outline: none !important;
    text-decoration: none;

}

section,
div,
header,
nav,
article,
section,
aside,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure,
figcaption,
class,
img {

    margin: 0;
    padding: 0;
}


html,
body {

    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Urbanist', sans-serif;
    position: relative;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {

    overflow-x: hidden;
    overflow-y: overlay;
    background: white;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-left: solid 1px var(--blanc90);
}

::-webkit-scrollbar-thumb {
    background: var(--violet);
}

::-webkit-scrollbar-button {
    display: none;
}

.page main > section > h1,
br.clear,
a.post-edit-link {

    display: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1 !important;
}

a {

    color: var(--violet);
}

input {

    accent-color: var(--violet);
}


:root {
    --violet: #928DF3;
    --cyan: #00DADC;
    --bleu: #25345F;
    --bleu2: #4C6DBF;
    --gris25: #3F3F3F;
    --gris50: #7F7F7F;
    --gris75: #BFBFBF;
    --blanc90: #E5E5E5;
    --blanc95: #F2F2F2;
}

/*------------------------------------*\
    UNDERLINE
\*------------------------------------*/

.underline .elementor-button-text,
#header #nav a {

    position: relative;
}

.underline .elementor-button-text:after,
#header #nav a:after {
    content: '';
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform .5s, background .5s;
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--violet);
    bottom: -2px;
    left: 0;
    pointer-events: none;
}

.underline:hover .elementor-button-text:after,
#header #nav a:hover::after,
#header #nav .current-menu-item a::after {

    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}


/*------------------------------------*\
    OVERLAY
\*------------------------------------*/

.overlay:after,
.overlay:before {

    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--bleu) !important;
    pointer-events: none !important;
    transition: all .5s !important;
}

.overlay:after {

    mix-blend-mode: color !important;
    z-index: 3 !important;
}

.overlay:before {

    z-index: 2 !important;
    opacity: .9 !important;
}

.overlay.safari:after {

    display: none !important;
}

/*------------------------------------*\
    EXIT
\*------------------------------------*/

#exit {

    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(37, 52, 95, .75);
    z-index: 998;
    cursor: pointer;
    display: none;
}

/*------------------------------------*\
    DARK MODE
\*------------------------------------*/

input[type="search"] {

    background: white;
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

#burger,
#contact-mobile {

    display: none;
}

#header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid var(--blanc90);
    border-top: none;
    border-radius: .5em;
    width: calc(100vw - 100px);
    margin: 50px;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 9999;
}

#header ul {

    display: flex;
    gap: 50px;
}

#header li {

    list-style: none;
}

#header a {

    color: var(--bleu);
    line-height: 100px;
    display: inline-block;
    font-weight: 500;
}

#header a#logo {

    padding: 25px;
    border-right: 1px solid var(--blanc90);
}

#header a#logo * {

    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 1.5vw;
    color: var(--bleu);
    text-align: center;
    line-height: 1;
}

#header a#logo h3 {

    font-weight: normal;
    color: var(--violet);
}

#header a#contact {

    border-radius: .5em;
    background: var(--violet);
    color: var(--bleu);
    display: inline-block;
    font-weight: bold;
    padding: 0 37.5px;
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

#footer {

    padding: 0 50px 50px 50px;
}

#footer div {

    background: var(--violet);
    width: 100%;
    border-radius: .5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
}

#footer ul {

    display: flex;
    gap: 25px;
}

#footer li {

    list-style: none;
}

#footer a {

    color: var(--bleu);
    font-size: .9vw;
}

#footer a#asticoweb {

    position: relative;
}

#footer a#asticoweb:before {

    content: '';
    transform: translateY(0.33em);
    width: 1.5em;
    height: 1.5em;
    margin-right: 6.25px;
    transition: all .5s;
    background: var(--bleu);
    display: inline-block;
    transition: all .5s;
    -webkit-mask: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 102.9"><path d="m46.6,52.59c-.61-.12-1.49-.14-2.12-.15-3.05-.23-6.26.78-7.89,3.22-2.59,3.55-2,9.78,1.89,12.26,1.77,1.16,3.99,1.44,6.9,1.12,6-.54,11.48-4.07,14.7-9.06-3.35-4-8.13-6.8-13.47-7.39h-.01Z"/><path d="m55.71,0C30.71,0,0,30.6,0,56.22s30.71,46.68,55.71,46.68,44.29-20.95,44.29-46.68S80.71,0,55.71,0Zm14.89,73.17c-.02,1.54-1.29,2.77-2.84,2.75-1.51-.02-2.73-1.25-2.75-2.75,0-1.6-.21-3.18-.59-4.7-5.13,5.35-12.39,8.6-19.8,8.68-3.71.17-7.45-.63-10.56-2.83-5.42-3.77-7.53-10.96-5.95-17.2,1.53-6.47,7.15-11.18,13.78-11.46.94-.08,1.92-.06,2.86.02.52.04,1.61.08,2.1.18,5.99.75,11.6,3.62,15.85,7.86.2-.83.31-1.79.42-2.6.05-.58.03-1.41.07-2-.04-1.84-.44-3.65-1.16-5.35-.25-.46-.56-1.18-.87-1.6-4.41-7.3-14.88-8.54-20.76-2.32-5.06,4.89-12.33-2.06-7.66-7.34,9.22-9.42,25.33-8.99,33.92,1.02,3.44,3.85,5.52,8.95,5.73,14.1.23,5.25-1.12,10.57-3.71,15.14,1.33,3.3,1.99,6.86,1.93,10.4h-.01Z"/></svg>') no-repeat;
    mask: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 102.9"><path d="m46.6,52.59c-.61-.12-1.49-.14-2.12-.15-3.05-.23-6.26.78-7.89,3.22-2.59,3.55-2,9.78,1.89,12.26,1.77,1.16,3.99,1.44,6.9,1.12,6-.54,11.48-4.07,14.7-9.06-3.35-4-8.13-6.8-13.47-7.39h-.01Z"/><path d="m55.71,0C30.71,0,0,30.6,0,56.22s30.71,46.68,55.71,46.68,44.29-20.95,44.29-46.68S80.71,0,55.71,0Zm14.89,73.17c-.02,1.54-1.29,2.77-2.84,2.75-1.51-.02-2.73-1.25-2.75-2.75,0-1.6-.21-3.18-.59-4.7-5.13,5.35-12.39,8.6-19.8,8.68-3.71.17-7.45-.63-10.56-2.83-5.42-3.77-7.53-10.96-5.95-17.2,1.53-6.47,7.15-11.18,13.78-11.46.94-.08,1.92-.06,2.86.02.52.04,1.61.08,2.1.18,5.99.75,11.6,3.62,15.85,7.86.2-.83.31-1.79.42-2.6.05-.58.03-1.41.07-2-.04-1.84-.44-3.65-1.16-5.35-.25-.46-.56-1.18-.87-1.6-4.41-7.3-14.88-8.54-20.76-2.32-5.06,4.89-12.33-2.06-7.66-7.34,9.22-9.42,25.33-8.99,33.92,1.02,3.44,3.85,5.52,8.95,5.73,14.1.23,5.25-1.12,10.57-3.71,15.14,1.33,3.3,1.99,6.86,1.93,10.4h-.01Z"/></svg>') no-repeat;

}

/*------------------------------------------------------------------------*\
    RESPONSIVE
\*------------------------------------------------------------------------*/

@media only screen and (max-width:950px) {
    
        /*------------------------------------*\
    IMG
\*------------------------------------*/ 
    
    .img {
        
        aspect-ratio: 4/3 !important;
    }

    /*------------------------------------*\
    CONTACT
\*------------------------------------*/

    #header a#contact {

        display: none;
    }

    a#contact-mobile {

        display: inherit;
        position: fixed;
        bottom: 0;
        width: calc(100vw - 100px);
        margin: 50px;
        background: var(--violet);
        color: var(--bleu);
        font-weight: bold;
        text-align: center;
        padding: 25px;
        border-radius: .5em;
        z-index: 9999;
        transition: all .3s;
    }

    /*------------------------------------*\
    HEADER
\*------------------------------------*/

    #header a#logo * {

        font-size: 2.5vw;
    }

    /*------------------------------------*\
    NAV
\*------------------------------------*/

    #nav {

        display: none;
        position: absolute;
        top: calc(100% + 25px);
        background: white;
        width: 100%;
        border-radius: .5em;
        border: solid 1px var(--blanc90);
        padding: 0 25px;
        white-space: nowrap;
    }

    #header ul {

        gap: 25px;
    }

    /*------------------------------------*\
    BURGER
\*------------------------------------*/

    #burger {

        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25px;
        aspect-ratio: 1;
    }

    #burger .bloc {

        width: 2em;
        height: 2em;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    #burger .bloc div {

        width: 100%;
        height: 20%;
        position: relative;
    }

    #burger .bloc div span {

        width: 20%;
        min-width: 20%;
        height: 100%;
        min-height: 100%;
        aspect-ratio: 1;
        background: var(--bleu);
        position: absolute;
        transition: all .3s;

    }

    #burger .bloc div span.r {

        bottom: 0;
    }

    #burger .bloc div span.c {

        transform-origin: 50% .25em;
    }

    .active-span {

        scale: 0;
    }

    .active-span-t {

        width: 2em !important;
    }

    .active-span-r {

        height: 2em !important;
    }

    .active-span-c {

        rotate: 45deg;
        height: 2.5em !important;
    }

    #burger .bloc div span:nth-child(2) {

        left: 50%;
        translate: -50% 0;
    }

    #burger .bloc div span:last-child {

        right: 0;
        left: auto;
    }

    /*------------------------------------*\
    FOOTER
\*------------------------------------*/

    #footer div {

        flex-direction: column;
    }

    #footer a {

        font-size: 2vw;
    }

}

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

    /*------------------------------------*\
    UNDERLINE
\*------------------------------------*/

    .underline .elementor-button-text:after,
    #header #nav a:after {

        height: 1.5px;
        bottom: 0;
    }

    /*------------------------------------*\
    CONTACT
\*------------------------------------*/

    a#contact-mobile {

        width: calc(100vw - 50px);
        margin: 25px;
    }

    /*------------------------------------*\
    HEADER
\*------------------------------------*/

    #header {

        width: calc(100vw - 50px);
        margin: 25px;
    }

    #header a#logo * {

        font-size: 3.5vw;
    }

    #header ul {

        gap: 0;
        flex-wrap: wrap;
        flex-direction: column;
    }

    #header a {

        line-height: 1.75em;
    }

    #nav {

        padding: 50px;
    }

    /*------------------------------------*\
    FOOTER
\*------------------------------------*/

    #footer {

        padding: 0 25px 25px 25px;
    }

    #footer a {

        font-size: 2.5vw;
    }
}