/*
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: 5.0
License: License asticoweb.com
License URI: https://asticoweb.com
Text Domain: asticotheme
*/

::selection {
    background: var(--or);
    color: white;
    text-shadow: none;
}

::-webkit-selection {
    background: var(--or);
    color: white;
    text-shadow: none;
}

::-moz-selection {
    background: var(--or);
    color: white;
    text-shadow: none;
}

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

::-webkit-scrollbar-thumb {
    background: var(--bleu);
    border-left: solid 1px var(--bleu2);
}

::-webkit-scrollbar-button {
    display: 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: arboria, sans-serif;
    position: relative;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden;
    overflow-y: overlay;
    background: var(--bleu);
    color: white;
    font-size: 18px;
    line-height: 1.75em;
}

body:not(#tinymce) {

    opacity: 0;
    transition: opacity .5s;
}

main,
body>.elementor,
#slogan,
#footer {

    transform: translateY(-100px);
    filter: blur(10px);
    transition: transform .5s, filter .5s;
}

a {
    color: var(--or);
}

:root {
    --bleu: #282C54;
    --bleu2: #1C1E36;
    --ciel: #C2DDF5;
    --or: #BE9B65;
    --blanc95: #dae9f2;
    --blanc90: #cfdbe5;
    --gris75: #afb8bf;
    --gris50: #747b7f;
    --gris25: #3a3e3f;
}

button,
a {

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input {

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

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

    display: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1 !important;
}

.balance {

    text-wrap: balance;
}

.pretty {

    text-wrap: pretty;
}

.nowrap {

    text-wrap: nowrap;
}

main li {

    list-style: square inside;
}

main li::marker {

    color: var(--or);
}

.title .elementor-heading-title {

    line-height: .75 !important;
}

.title .elementor-heading-title span {

    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: 1.25em;
    display: inline-block;
    font-weight: var(--e-global-typography-secondary-font-weight);
    color: var(--or);
}

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

input[type="search"] {

    background: white;
}

/*------------------------------------*\
    SCROLL REVEAL
\*------------------------------------*/

.reveal:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal),
.reveal li:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal li),
.custom-swiper .swiper-slide:not(:is(body.elementor-editor-active, .elementor-editor-preview) .custom-swiper .swiper-slide) {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

.reveal.left li:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal li),
.reveal.left:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal) {

    transform: translateX(-50px);
}

.reveal.bottom:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal),
.custom-swiper .swiper-slide:not(:is(body.elementor-editor-active, .elementor-editor-preview) .custom-swiper .swiper-slide) {

    transform: translateY(50px);
}

.reveal.right:not(:is(body.elementor-editor-active, .elementor-editor-preview) .reveal) {

    transform: translateX(50px);
}

.img {

    overflow: hidden !important;
}

.img:not(:is(body.elementor-editor-active, .elementor-editor-preview) .img):before {

    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bleu);
    pointer-events: none;
    transform: translate(0);
    transition: transform 1s ease;
}

.img.white:before {

    background-color: white !important;
}

.img.active.left:before {

    transform: translateX(100%) !important;
}

.img.active.right:before {

    transform: translateX(-100%) !important;
}

.reveal.active,
.reveal.active li,
.custom-swiper .swiper-slide.active {
    opacity: 1 !important;
    transform: translate(0) !important;
}

.d1,
.elementor-widget-text-editor ul li:nth-child(2),
.custom-swiper .swiper-slide:nth-child(2) {
    transition-delay: .2s !important;
}

.d2,
.elementor-widget-text-editor ul li:nth-child(3),
.custom-swiper .swiper-slide:nth-child(3) {
    transition-delay: .4s !important;
}

.d3,
.elementor-widget-text-editor ul li:nth-child(4),
.custom-swiper .swiper-slide:nth-child(4) {
    transition-delay: .6s !important;
}

.d4,
.elementor-widget-text-editor ul li:nth-child(5),
.custom-swiper .swiper-slide:nth-child(5) {
    transition-delay: .8s !important;
}

.d5,
.elementor-widget-text-editor ul li:nth-child(6),
.custom-swiper .swiper-slide:nth-child(6) {
    transition-delay: 1s !important;
}

.d6,
.elementor-widget-text-editor ul li:nth-child(7),
.custom-swiper .swiper-slide:nth-child(7) {
    transition-delay: 1.2s !important;
}

.d7,
.elementor-widget-text-editor ul li:nth-child(8),
.custom-swiper .swiper-slide:nth-child(8) {
    transition-delay: 1.4s !important;
}

.d8,
.elementor-widget-text-editor ul li:nth-child(9),
.custom-swiper .swiper-slide:nth-child(9) {
    transition-delay: 1.6s !important;
}

.d9,
.elementor-widget-text-editor ul li:nth-child(10),
.custom-swiper .swiper-slide:nth-child(10) {
    transition-delay: 1.8s !important;
}


/*------------------------------------*\
    SWIPER
\*------------------------------------*/

.custom-swiper .swiper {

    overflow: visible;
    padding: 0 !important;
}

.custom-swiper .elementor-swiper-button {

    width: 50px;
    height: 50px;
    background-color: var(--or);
    display: flex;
    justify-content: center;
    align-items: center;
    top: auto !important;
    bottom: calc(100% + 50px) !important;
    transform: none !important;
    transition: background-color .3s;
}

.custom-swiper .elementor-swiper-button:hover {

    background-color: var(--ciel);
}

.custom-swiper .elementor-swiper-button.swiper-button-lock {

    display: none !important;
}

.custom-swiper .elementor-swiper-button i {

    font-size: 14px !important;
    color: white !important;
}

.custom-swiper .elementor-swiper-button-next {

    right: 0 !important;
}

.custom-swiper .elementor-swiper-button-prev {

    left: auto !important;
    right: 62.5px !important;
}

.custom-swiper .swiper-button-disabled {

    pointer-events: none !important;
    opacity: 1 !important;
    background-color: var(--bleu2);
}

.custom-swiper .swiper-button-disabled i {

    color: var(--bleu);
}

.custom-swiper .swiper-pagination {

    position: absolute !important;
    left: 0 !important;
    transform: none !important;
    bottom: auto !important;
    top: calc(100% + 50px) !important;
    color: var(--gris50) !important;
    display: flex !important;
    gap: 12.5px !important;
}

.custom-swiper .swiper-pagination-bullet {

    background-color: var(--bleu2) !important;
    transition: background-color .5s !important;
    margin: 0 !important;
    width: 6.25px !important;
    height: 6.25px !important;
    border-radius: 100% !important;
    opacity: 1 !important;
}

.custom-swiper .swiper-pagination-bullet:hover,
.custom-swiper .swiper-pagination-bullet-active {

    background-color: var(--or) !important;
}

.border:not(.custom-swiper):after,
.custom-swiper.border .swiper-slide:after {

    content: '';
    position: absolute;
    inset: 12.5px;
    border: solid 2px var(--or);
    pointer-events: none;
}


.custom-swiper.counter .swiper-wrapper {

    counter-reset: counter;
}

.custom-swiper.counter .swiper-slide>.elementor-element>.e-con-inner {

    padding-top: 0;
}

.custom-swiper.counter .swiper-slide>.elementor-element>.e-con-inner>.elementor-widget-heading {

    z-index: 1;
}

.custom-swiper.counter .swiper-slide>.elementor-element>.e-con-inner>.elementor-widget-heading:before {

    counter-increment: counter;
    content: "0" counter(counter);
    width: 50px;
    height: 50px;

    background: var(--or);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-family: "span-condensed", Sans-serif;
    font-size: 30px;
    margin-bottom: 25px;
}

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


    .custom-swiper .elementor-swiper-button {

        display: none !important;
    }
}

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


    .custom-swiper .swiper {

        margin-right: 25px;
    }
}



/*------------------------------------*\
    LOGOS
\*------------------------------------*/

.custom-carousel .swiper {

    overflow: visible;
    line-height: 0;
    pointer-events: none;
}

.mask {

    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 1) calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 1) calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
}

.elementor-widget-image-carousel .swiper-slide:after {
    content: '';
    position: absolute;
    inset: 6.25px;
    border: solid 2px var(--or);
    pointer-events: none;
}

.elementor-widget-image-carousel img {

    padding: 0;
    background-color: white;
    padding: 25px;
    object-fit: contain;
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
}

.custom-carousel .swiper-wrapper {

    transition-timing-function: linear !important;
}

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


.underline .elementor-button-text,
.elementor-widget-text-editor a,
#nav ul li a span.menu-item-title,
#footer ul li a,
#footer ul li button {

    position: relative;
}

.elementor-widget-text-editor a {

    line-height: 1.25 !important;
    display: inline-block;
}

.underline .elementor-button-text:before,
.elementor-widget-text-editor a:before,
#nav ul li a span.menu-item-title:before,
#footer ul li a:before,
#footer ul li button:before {
    content: '';
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform .5s;
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--or);
    top: 100%;
    left: 0;
    pointer-events: none;
}

.underline .elementor-button-text:before,
.elementor-widget-text-editor a:before,
#nav ul li a:hover span.menu-item-title:before,
#footer ul li a:hover::before,
#footer ul li button:hover::before {

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

.underline a:hover .elementor-button-text:before,
.elementor-widget-text-editor a:hover::before {

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

.underline a {

    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    color: white;
}

/*------------------------------------*\
    BTN
\*------------------------------------*/

:is(#header, #slogan) a.contact {

    background-color: var(--ciel);
    padding: 15px 20px;
    color: var(--bleu);
    font-weight: bold;
}

:is(#header, #slogan) a.contact span,
.elementor-button-text span {

    display: inline-block;
    transition: translate .5s cubic-bezier(0, 0, 0, 1);
}

:is(#header, #slogan) a.contact .dash,
.elementor-button-text .dash {

    width: 2em;
    height: 2px;
    margin: 0 5px;
    background-color: var(--bleu);
    vertical-align: middle;
    transition: scale .5s cubic-bezier(0, 0, 0, 1);
}

:is(#header, #slogan) a.contact:hover .dash,
.elementor-button:hover .dash {

    scale: 0 1;
}

:is(#header, #slogan) a.contact:hover span:first-child,
.elementor-button:hover .elementor-button-text span:first-child {

    translate: calc(2em / 2 + 5px / 2);
}

:is(#header, #slogan) a.contact:hover span:last-child,
.elementor-button:hover .elementor-button-text span:last-child {

    translate: calc(2em / -2 - 5px / 2);
}

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

#exit {

    position: fixed;
    z-index: 998;
    inset: 0;
    background-color: rgba(28, 30, 54, .5);
    cursor: pointer;
    display: none;
}

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

#header>.wrapper,
#slogan>.wrapper,
#footer>.wrapper {

    max-width: 1920px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#header a,
#footer a {

    font-weight: normal;
}

#header {

    position: fixed;
    width: 100%;
    border-bottom: solid 1px var(--bleu2);
    z-index: 999;
    background-color: transparent;
    backdrop-filter: blur(0);
    padding: 50px;
    transition: background-color .3s, backdrop-filter .3s, padding .3s;
}

.active-header {

    background-color: rgba(40, 44, 84, .75) !important;
    backdrop-filter: blur(10px) !important;
    padding: 25px !important;
}

#header .wrapper {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header a#logo {

    line-height: 0;
}

#header a#logo svg {

    width: auto;
    height: 50px;
}

#header a#logo svg * {

    transition: fill .3s;
}

#header a#logo:hover svg * {

    fill: var(--or);
}

#nav .mobile {

    display: none;
}

#nav ul {

    list-style: none;
}

#nav ul.menu {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

#nav .menu>li>a {

    color: white;
    display: inline-block;
    line-height: 61.5px;
}


#nav .menu>li.menu-item-has-children>a>span:after {

    content: '';
    width: 1cap;
    height: 1cap;
    display: inline-block;
    margin-left: 6.25px;
    mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 66"><path d="M58,66c-2.05,0-4.09-.78-5.66-2.34L2.34,13.66C-.78,10.53-.78,5.47,2.34,2.34,5.47-.78,10.53-.78,13.66,2.34l44.34,44.34L102.34,2.34c3.12-3.12,8.19-3.12,11.31,0,3.12,3.12,3.12,8.19,0,11.31l-50,50c-1.56,1.56-3.61,2.34-5.66,2.34Z"/></svg>');
    mask-position: center bottom;
    mask-repeat: no-repeat;
    background-color: var(--or);
}

#nav .menu li.menu-item-has-children {

    position: relative;
}

#nav .menu>li.menu-item-has-children>ul.sub-menu li {

    line-height: 0;
}

#nav .menu>li.menu-item-has-children>ul.sub-menu a {

    color: var(--bleu);
    font-family: "span-condensed";
    font-weight: bold;
    font-size: 20px;
    line-height: 1.25;
    text-wrap: balance;
    margin-bottom: 6.25px;
}

#nav .menu>li.menu-item-has-children>ul.sub-menu {

    position: absolute;
    display: inherit;
    opacity: 0;
    pointer-events: none;
    width: max-content;
    max-width: 720px;
    padding: 37.5px;
    padding-top: 6.25px;
    left: 50%;
    top: 100%;
    translate: -50%;
    transition: opacity .3s, padding .3s;
    z-index: 1;
    background: var(--ciel);
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

#nav .menu>li.menu-item-has-children>ul.sub-menu>li {

    width: calc(50% - 12.5px);
}

#nav .menu>li.menu-item-714>ul.sub-menu {

    max-width: 1000px;
}

#nav .menu>li.menu-item-714>ul.sub-menu>li {

    width: calc(33.333% - 17.5px);
}

#nav .menu>li.menu-item-has-children>ul.sub-menu span.menu-desc {

    display: inline-block;
    width: 100%;
    font-family: arboria, sans-serif;
    font-weight: normal;
    color: var(--gris50);
    font-size: 14px;
    line-height: 1.5;
}

#nav .menu>li.menu-item-has-children>ul.sub-menu:after {

    content: '';
    position: absolute;
    inset: 12.5px;
    border: solid 2px var(--or);
    pointer-events: none;
}

#nav .menu>li.menu-item-has-children:hover>ul.sub-menu {

    opacity: 1;
    pointer-events: all;
    padding-top: 37.5px;
}

#header .btn {

    display: flex;
    align-items: center;
    gap: 12.5px;
}

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

#header .btn #menu {

    align-items: center;
    gap: 6.25px;
    cursor: pointer;
    display: none;
}

#header .btn #menu div {

    width: 1.5cap;
    height: .75cap;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    translate: 0 12.5%;
}

#header .btn #menu div span {

    width: 100%;
    height: .125em;
    background: var(--bleu);
    position: absolute;
    transition: margin .5s, transform .5s;
    transform-origin: center;
    margin-bottom: -.125em;
}

#header .btn #menu div span.a {

    margin-bottom: calc(.75cap - .125em);
}

.active-first-span {

    transform: rotate(45deg) !important;
    margin: 0 !important;
}

#header .btn #menu div span.b {

    margin-top: calc(.75cap - .125em);
}

.active-last-span {

    transform: rotate(-45deg) !important;
    margin: 0 !important;
}


/*------------------------------------*\
    SLOGAN
\*------------------------------------*/

section#slogan {

    border-top: solid 1px var(--bleu2);
}

section#slogan .wrapper {

    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

section#slogan .sociaux {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    list-style: none;
    gap: 12.5px;
}

section#slogan .sociaux .follow {

    width: 100%;
    color: var(--or);
}

section#slogan .sociaux svg {

    height: 25px;
    width: auto;
    fill: white;
    transition: fill .3s;
}

section#slogan .sociaux a:hover svg {

    fill: var(--or);
}

section#slogan .marquee {

    overflow: hidden;
    width: 100%;
    height: 31.5px;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 1) calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 1) calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
}

section#slogan .marquee ul {

    display: flex;
    width: 200%;
    position: absolute;
    left: 0;
    animation: marquee 10s linear infinite;
    font-size: 30px;
    white-space: nowrap;
    list-style: none;
}

@keyframes marquee {
    to {
        left: -100%;
    }
}

section#slogan .marquee li {

    color: white;
}

section#slogan .marquee li:before {

    content: '\00A0\0025AA\00A0';
    color: var(--or);
}

section#slogan h6 {

    font-size: 0;
    width: 100%;
    aspect-ratio: 1 / 0.0649;
    background-image: url('https://www.expole.fr/wp-content/uploads/valorisons.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}


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

#footer {
    border-top: solid 1px var(--bleu2);
}

#footer .wrapper {

    display: flex;
    padding: 25px 50px;
    align-items: center;
    justify-content: space-between;
    gap: 12.5px;
}

#footer ul {
    list-style: none;
    display: flex;
    gap: 12.5px 37.5px;
    justify-content: center;
    flex-wrap: wrap;
} 

#footer a,
#footer button {
    color: var(--gris50);
    transition: color .3s;
    font-size: 14px;
    font-weight: normal;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

#footer a:hover,
#footer button:hover {
    color: var(--or);
}


#footer a#asticoweb {
    position: relative;
    display: flex;
    align-items: center;
    transition: color .3s;
}

#footer a#asticoweb:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 3.125px;
    background: var(--gris50);
    transition: background-color .3s;
    -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 194.4 200"><path d="M90.5,102.2c-1.2-.2-2.9-.3-4.1-.3-5.9-.4-12.2,1.5-15.3,6.3-5,6.9-3.9,19,3.7,23.8,3.4,2.3,7.8,2.8,13.4,2.2h0c11.7-1,22.3-7.9,28.6-17.6-6.6-7.8-15.9-13.2-26.3-14.4Z"/><path d="M108.3,0C59.7,0,0,59.3,0,109.3s59.7,90.7,108.3,90.7,86.1-40.7,86.1-90.7h0C194.4,59.5,156.9,0,108.3,0ZM137.2,142.2c0,3-2.5,5.4-5.5,5.3-2.9,0-5.3-2.4-5.3-5.3,0-3.1-.4-6.2-1.2-9.1-10,10.4-24.1,16.7-38.5,16.9-7.2.3-14.5-1.2-20.5-5.5-10.6-7.3-14.6-21.3-11.6-33.4,3-12.6,13.9-21.7,26.8-22.3,1.8-.2,3.7-.1,5.5,0,1,.1,3.1.2,4.1.3,11.6,1.5,22.6,7,30.8,15.3.4-1.6.6-3.5.8-5.1.1-1.1.1-2.7.1-3.9-.1-3.6-.8-7.1-2.3-10.4-.5-.9-1.1-2.3-1.7-3.1-8.6-14.2-28.9-16.6-40.3-4.5-9.8,9.5-24-4-14.9-14.3,17.9-18.3,49.2-17.5,65.9,2,6.7,7.5,10.7,17.4,11.1,27.4h0c.5,10.2-2.2,20.5-7.2,29.4,2.7,6.5,4,13.5,3.9,20.3Z"/></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 194.4 200"><path d="M90.5,102.2c-1.2-.2-2.9-.3-4.1-.3-5.9-.4-12.2,1.5-15.3,6.3-5,6.9-3.9,19,3.7,23.8,3.4,2.3,7.8,2.8,13.4,2.2h0c11.7-1,22.3-7.9,28.6-17.6-6.6-7.8-15.9-13.2-26.3-14.4Z"/><path d="M108.3,0C59.7,0,0,59.3,0,109.3s59.7,90.7,108.3,90.7,86.1-40.7,86.1-90.7h0C194.4,59.5,156.9,0,108.3,0ZM137.2,142.2c0,3-2.5,5.4-5.5,5.3-2.9,0-5.3-2.4-5.3-5.3,0-3.1-.4-6.2-1.2-9.1-10,10.4-24.1,16.7-38.5,16.9-7.2.3-14.5-1.2-20.5-5.5-10.6-7.3-14.6-21.3-11.6-33.4,3-12.6,13.9-21.7,26.8-22.3,1.8-.2,3.7-.1,5.5,0,1,.1,3.1.2,4.1.3,11.6,1.5,22.6,7,30.8,15.3.4-1.6.6-3.5.8-5.1.1-1.1.1-2.7.1-3.9-.1-3.6-.8-7.1-2.3-10.4-.5-.9-1.1-2.3-1.7-3.1-8.6-14.2-28.9-16.6-40.3-4.5-9.8,9.5-24-4-14.9-14.3,17.9-18.3,49.2-17.5,65.9,2,6.7,7.5,10.7,17.4,11.1,27.4h0c.5,10.2-2.2,20.5-7.2,29.4,2.7,6.5,4,13.5,3.9,20.3Z"/></svg>') no-repeat;
}

#footer a#asticoweb:hover::before {
    background-color: var(--or);
}

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

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

    .img {

        aspect-ratio: 4/3;
    }

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

    #header,
    .active-header {

        padding: 25px !important;
    }

    .active-header {

        background-color: var(--bleu) !important;
    }

    #header #nav {

        position: absolute;
        transform: translateX(-100%);
        left: 0;
        top: calc(100% + 1px);
        height: calc(100dvh - 112.5px);
        background-color: var(--bleu);
        border-right: solid 1px var(--bleu2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform .8s cubic-bezier(.85, 0, .075, 1), -webkit-transform .75s cubic-bezier(.85, 0, .075, 1);
        overflow-y: auto;
        min-width: 66.666vw;
    }

    .active-nav {

        transform: translateX(0) !important;
    }

    #header #nav>.menu-menu-container>ul {

        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #header #nav>.menu-menu-container>ul>li,
    #header #nav>.menu-menu-container>ul>li>a,
    #header #nav>.menu-menu-container>ul>li>a>span.menu-item-title {

        width: 100%;
    }

    #header #nav>.menu-menu-container>ul>li>a>span.menu-item-title {

        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    #nav .menu>li.menu-item-has-children>a>span:after {

        width: .75cap;
        height: .75cap;
    }

    #header #nav>.menu-menu-container>ul>li>a {

        font-family: var(--e-global-typography-primary-font-family), Sans-serif;
        font-size: var(--e-global-typography-primary-font-size);
        font-weight: var(--e-global-typography-primary-font-weight);
        line-height: 1;
        padding: 25px 50px;
        border-bottom: solid 1px var(--bleu2);
    }

    #nav .menu>li.menu-item-has-children>ul.sub-menu a {

        font-family: var(--e-global-typography-accent-font-family), Sans-serif;
        font-size: var(--e-global-typography-accent-font-size);
        font-weight: var(--e-global-typography-accent-font-weight);
        line-height: var(--e-global-typography-accent-line-height);
    }

    #header #nav ul li.menu-item-has-children>a {

        pointer-events: none;
    }

    #header #nav li:hover>ul.sub-menu,
    #header #nav ul.sub-menu {

        position: static;
        translate: 0;
        border-radius: 0;
        background-color: transparent;
        display: none;
        visibility: visible;
        opacity: 1;
        pointer-events: all;
        transition: none;
        border-bottom: solid 1px var(--bleu2);
        padding: 25px 50px 50px 50px;
        max-width: 100% !important;
        width: 100%;
    }

    #header #nav>.menu-menu-container>ul>li>a>span.menu-item-title:before,
    #nav .menu>li.menu-item-has-children>ul.sub-menu span.menu-desc,
    #nav .menu>li.menu-item-has-children>ul.sub-menu:after {

        display: none;
    }

    #nav .menu>li.menu-item-has-children>ul.sub-menu>li {

        width: 100% !important;
    }

    #nav .menu>li.menu-item-has-children>ul.sub-menu a {

        color: var(--ciel);
    }

    #header #nav .mobile {

        padding: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    #header #nav .mobile .contact {

        width: 100%;
        text-align: center;
    }

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

    #header .btn #menu {

        display: flex;
    }

    /*------------------------------------*\
    SLOGAN + FOOTER
\*------------------------------------*/

    section#slogan .wrapper {

        padding: 100px 50px;
    }

    #footer .wrapper {

        flex-direction: column;
    }

}

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

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

    #header .btn .contact {

        display: none;
    }

    #header #nav {

        width: calc(100% + 1px);
        height: calc(100dvh - 109px);
    }

    #header #nav .mobile,
    #header #nav li:hover>ul.sub-menu,
    #header #nav ul.sub-menu,
    #header #nav>.menu-menu-container>ul>li>a {

        padding: 25px;
    }

    #header #nav .mobile {

        padding-top: 50px;
    }

    /*------------------------------------*\
    SLOGAN + FOOTER
\*------------------------------------*/

    section#slogan .wrapper {

        padding: 50px 25px;
        gap: 25px;
    }

    section#slogan ul {

        font-size: 16px;
    }

    #footer .wrapper {

        padding: 25px 0;
    }
    

    #footer ul {

        gap: 6.25px 25px;
        line-height: 1;
    }

    #footer a, #footer button {

        font-size: 12px;
    }

}