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

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

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

::-moz-selection {
    background: var(--bleu2);
    color: white;
    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: 'Nunito', sans-serif;
    position: relative;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {

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

html::before,
html::after {

    content: '';
    position: fixed;
    z-index: -1;
    transition: opacity .5s;
    opacity: 0;
    inset: 0;

}

html::before {

    width: 200vw;
    height: 200dvh;
    background-image: url('/wp-content/uploads/pattern.svg');
    background-position: center;
    background-size: 12.5% auto;
    background-repeat: repeat;
    animation: bg 20s linear forwards infinite;
    background-color: var(--bleu);
}

html::after {

    width: 100vw;
    height: 100dvh;
    background-image: url('/wp-content/uploads/logo-texte-blanc.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 25%;
}

@keyframes bg {

    to {

        transform: translate(-50%, -50%);
    }
}

.active-loader::before,
.active-loader::after {

    opacity: 1;
}

body:not(#tinymce) {

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

main,
body>.elementor,
footer {

    transform: translateY(-100px);
    transition: transform .5s;
}

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

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

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

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

    display: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1 !important;
}

input {

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


:root {
    --bleu: #3E2279;
    --bleu2: #1d123b;
    --rose: #FF33B4;
    --jaune: #F4D2A6;
    --gris50: #73757F;
    --gris75: #ACB0BF;
    --blanc90: #CFD3E5;
    --blanc95: #DADFF2;
}

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

input[type="search"] {

    background: white;
}

.balance {

    text-wrap: balance;
}

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

#lire-plus,
.border,
#header .container,
.e-loop-item.product,
.swiper-button,
input[type="submit"],
.elementor-swiper-button,
a:is(.button, .elementor-button),
button:is(.button, .elementor-button),
.woocommerce ul.products li.product a,
.quantity button {

    -webkit-box-shadow: 0 5px 0 0 var(--bleu) !important;
    box-shadow: 0 5px 0 0 var(--bleu) !important;
    cursor: pointer !important;
    transition: box-shadow .3s, translate .3s, opacity .3s !important;
}


#lire-plus:hover,
.swiper-button:hover,
.e-loop-item.product:hover,
input[type="submit"]:hover,
.elementor-swiper-button:hover,
a:is(.button, .elementor-button:not(.underline .elementor-button)):hover,
button:is(.button, .elementor-button):hover,
.woocommerce ul.products li.product a:hover,
.quantity button:hover {

    translate: 0 5px;
    -webkit-box-shadow: 0 0 0 0 var(--bleu) !important;
    box-shadow: 0 0 0 0 var(--bleu) !important;
}

.border {

    cursor: inherit !important;
}

.border,
.e-loop-item.product {

    border: solid 2px var(--bleu);
}

.e-loop-item.product {

    border-radius: .5em;
    background: white;
}

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

#exit {

    position: fixed;
    z-index: 998;
    inset: 0;
    background-color: rgba(29, 18, 59, .5);
    display: none;
    cursor: pointer;
}

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

.underline .elementor-button-text,
#custom-menu-2>li>.sub-menu>li>.sub-menu>li>a,
#footer ul li a,
#footer figcaption,
#footer ul li button,
#header .menu a {

    position: relative;
}

.underline .elementor-button-text:before,
#custom-menu-2>li>.sub-menu>li>.sub-menu>li>a:after,
#footer ul li a:before,
#footer figcaption:before,
#footer ul li button:before,
#header .menu > li > a:before,
#header #custom-menu .sub-menu a:after {
    content: '';
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform .5s;
    position: absolute;
    width: 100%;
    background: var(--rose);
    bottom: 0;
    left: 0;
    height: 3px;
    pointer-events: none;
    border-radius: 3px;
}

#header .menu>li>a:before {

    height: 7px;
    bottom: -7px;
    pointer-events: all;
}

#custom-menu-2>li>.sub-menu>li>.sub-menu>li>a:hover::after,
#header .menu li.current-menu-item a:before,
.underline a .elementor-button-text:before,
#footer ul li a:hover::before,
#footer a:hover figcaption:before,
#footer ul li button:hover::before,
#header .menu>li:hover>a:before,
#header #custom-menu .sub-menu a:hover::after {

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

}

.underline a:hover .elementor-button-text:before {

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

.underline a {

    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.underline .elementor-button-text {

    color: var(--bleu);
}

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

.custom-swiper .swiper {

    overflow: visible;
    padding: 0 !important;
}

.custom-swiper .elementor-swiper-button,
.custom-swiper .swiper-button {

    color: white;
    background: var(--rose);
    border-radius: .5em;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--e-global-typography-text-font-size) !important;
    font-weight: bold;
    top: auto !important;
    bottom: calc(100% + 25px) !important;
    transform: none !important;
    transition: opacity .3s, background .3s, box-shadow .3s, translate .3s !important;
}



.custom-swiper .elementor-swiper-button svg,
.custom-swiper .swiper-button svg {

    height: 1em;
    width: 1em;
    fill: white !important;
}

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

    left: 0 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {

    display: none !important;
}

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

    right: 0 !important;
}

.custom-swiper .swiper-button-disabled {

    opacity: 0 !important;
    pointer-events: none;
}

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

#header {

    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    position: fixed;
    z-index: 999;
    width: 100%;
}

#header .container {

    max-width: 1440px;
    width: 100%;
    margin: 0 50px;
    background-color: white;
    border-radius: 0 0 .75em .75em;
    display: flex;
    justify-content: space-between;
    border: solid 2px var(--bleu);
    border-top: 0;
    position: relative;
}

#header ul {

    list-style: none;
    gap: 12.5px;
}

#header #nav,
#header ul.menu {

    gap: 37.5px;
    display: flex;
    justify-content: center;
}

#header #nav ul li a {

    line-height: 85.5px;
    color: var(--bleu);
    display: flex;
    align-items: baseline;
}

#header #nav>ul>li>a {

    white-space: nowrap;
}

#header #nav>ul>li:has(.sub-menu)>a:after {

    content: '';
    width: .666em;
    height: .666em;
    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 88.56 51.28"><path d="M44.28,51.28c-1.86,0-3.64-.74-4.95-2.05L2.05,11.95C-.68,9.22-.68,4.78,2.05,2.05c2.73-2.73,7.17-2.73,9.9,0l32.33,32.33L76.61,2.05c2.73-2.73,7.17-2.73,9.9,0,2.73,2.73,2.73,7.17,0,9.9l-37.28,37.28c-1.31,1.31-3.09,2.05-4.95,2.05Z"/></svg>');
    mask-position: center bottom;
    mask-repeat: no-repeat;
    background-color: var(--rose);
}

#header a#logo {

    padding: 12.5px;
    border-right: solid 1px var(--blanc90);
    transition: background-color .3s;
    border-bottom-left-radius: .75em;
}

#header a#logo:hover {

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

#header a#logo img {

    height: 50px;
    width: auto;
}

#header #nav {

    flex: 1;
}

#header #nav,
#header form,
#header .btn {

    padding: 0 37.5px;
}

#header form {

    background: var(--blanc95);
    display: flex;
    align-items: center;
    position: absolute;
    top: calc(100% - .75em);
    left: -2px;
    z-index: -1;
    padding-top: calc(7px + .75em);
    width: calc(100% + 4px);
    border-radius: 0 0 .75em .75em;
    border: solid 2px var(--bleu);
    border-top: 0;
    -webkit-box-shadow: 0 5px 0 0 var(--bleu) !important;
    box-shadow: 0 5px 0 0 var(--bleu) !important;
    display: none;
}

#header form input.search-input {
    border: none;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: normal;
    color: var(--bleu);
    padding: 0;
    background: transparent;
    line-height: 85.5px;
    flex: 1;
    width: 100%;
}

#header form input.search-input::placeholder {

    color: var(--gris50);
}

#header form input::-webkit-search-cancel-button {
    position: relative;
    right: 0;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    padding-right: 12.5px;
    margin-right: 12.5px;
    border-right: 1px solid var(--gris50);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style> .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23FF33B4; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 8px; } </style></defs><g id="Calque_1-2" data-name="Calque 1"><line class="cls-2" x1="12.5" y1="87.5" x2="87.5" y2="12.5"/><line class="cls-2" x1="12.5" y1="12.5" x2="87.5" y2="87.5"/><rect class="cls-1" width="100" height="100"/></g></svg>');
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}


#header form button.search-submit {

    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: flex;
    cursor: pointer;
}

#header ul.btn {

    display: flex;
    align-items: center;
    border-bottom-right-radius: .75em;
    border-left: solid 1px var(--blanc90);
}

#header ul.btn a,
#header ul.btn button {

    display: flex;
}

#header ul.btn {

    position: relative;
}

#header ul.btn li span {

    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    color: var(--bleu);
    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);
    opacity: 0;
    transition: opacity .3s;
    line-height: 27.75px;
    pointer-events: none;
    font-size: 16px;
}

#header ul.btn li:hover span {

    opacity: 1;
}

#header ul.btn a.panier {

    position: relative;
}

#header ul.btn .count {

        position: absolute;
    right: 2px;
    bottom: 2px;
    translate: 50% 50%;
    font-size: 14px;
    line-height: 1;
    background: white;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
}

#header ul.btn button {

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

#header svg {

    height: 30px;
    width: auto;
    fill: none;
    stroke: var(--bleu);
    stroke-miterlimit: 10;
    stroke-width: 8px;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke .3s;
}

#header a:hover svg,
#header button:hover svg {

    stroke: var(--rose);
}

#header .menu>li>.sub-menu {

    position: absolute;
    z-index: -1;
    background: var(--bleu2);
    padding: 50px;
    padding-top: 25px;
    width: 100%;
    left: 0;
    top: calc(100% - .75em);
    opacity: 0;
    pointer-events: none;
    border-radius: 0 0 .75em .75em;
    transition: padding .3s, opacity .3s;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

#header .menu>li>.sub-menu>li {

    width: calc(33.333% - 33.333px);
    text-wrap: balance;
}

#header .menu>li:hover>.sub-menu {

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

#header #custom-menu>li>.sub-menu>li>a {

    color: var(--rose);
}

#header #custom-menu>li>.sub-menu>li>.sub-menu>li>div.sale-percentage,
#header #custom-menu>li>.sub-menu>li>.sub-menu>li>a {

    font-weight: normal;
    font-size: 16px;
    line-height: 1.25em;
}
#header #custom-menu>li>.sub-menu>li>.sub-menu>li>a:before {

        content: '';
    height: 7.5px;
    width: 7.5px;
    border-radius: 100%;
    background: var(--rose);
    display: inline-block;
}

#header #custom-menu>li>.sub-menu>li>.sub-menu>li>div.sale-percentage {

    background: var(--rose);
    display: inline-block;
    margin-right: 6.25px;
    padding: 0 6.25px;
    font-weight: bold;
    border-radius: .333em;
    color: white;
}

#header #custom-menu .sub-menu a {

    line-height: 1.75em;
    color: white;
    display: inline-block;
}

#menu {

    display: none !important;
}

/*------------------------------------*\
    WOOCOMMERCE
\*------------------------------------*/

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {

    border: none !important;
    padding: 25px !important;
    background-color: var(--jaune) !important;
    color: var(--bleu2) !important;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    border-radius: .5em !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.woocommerce-error a.button,
.woocommerce-info a.button,
.woocommerce-message a.button {

    background-color: var(--blanc95) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    color: var(--bleu) !important;
    border-radius: .5em !important;
    padding: 15px 25px !important;
}

.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after {

    display: none !important;
}

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

#footer .container {

    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    border-top: dashed 2px var(--blanc90);
    display: flex;
    flex-direction: column;
}


#footer .container .wrapper {

    display: flex;
    justify-content: space-between;
    padding: 50px 75px;
    gap: 50px;
}

#footer ul {

    list-style: none;
}

#footer a {

    color: var(--bleu);
    font-size: 16px;
}


#footer #compte>li:first-child>a,
#footer #custom-menu>li>a {

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

#footer #custom-menu>li>.sub-menu>li>.sub-menu,
#footer #custom-menu>li:first-child {

    display: none;

}

#footer img {

    height: 150px;
    width: auto;
}

#footer figure img {

    height: 100px;
}

.product-template-default #footer .qualiopi {

    display: none;
}

#footer nav,
#footer nav #custom-menu {

    display: flex;
    align-items: flex-start;
    /* gap: 100px; */
}

#footer nav #custom-menu>li:last-child {

    padding: 0 50px;
    margin: 0 50px;
    border-left: solid 1px var(--blanc90);
    border-right: solid 1px var(--blanc90);
}

#footer .container .bottom {

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

#footer .container .bottom ul {

    display: flex;
    gap: 25px;
}

#footer .container .bottom li,
#footer .container .bottom button,
#footer .container .bottom a {
    
    line-height: 1;

}

#footer .container .bottom button,
#footer .container .bottom a {

    font-size: 14px;
    color: var(--bleu);
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

#footer a#asticoweb {

    position: relative;
    display: flex;
    transition: color .3s;
    text-wrap: nowrap;
    align-items: center;
}

#footer a#asticoweb:hover {

    color: var(--bleu);
}

#footer a#asticoweb:before {

    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 3.125px;
    background-color: var(--bleu);
    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 {

    color: var(--rose);
}

#footer a#asticoweb:hover::before {

    background: var(--rose);
}

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

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

    .custom-swiper .elementor-swiper-button,
    .custom-swiper .swiper-button {

        display: none !important;
    }

    /*------------------------------------*\
    LOADER
\*------------------------------------*/

    html::after {

        background-size: 50% auto;
    }

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

    #menu {

        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: solid 3px var(--bleu) !important;
        border-radius: .333em !important;
        cursor: pointer;
        transition: background-color .3s;
    }

    #menu:hover {

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

    #menu div {

        width: 15px;
        height: 15px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #menu div span {

        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: var(--bleu);
        position: absolute;
        transition: margin .3s, transform .3s, background-color .3s;
        transform-origin: center;
    }

    #menu div span.a {

        margin-bottom: 6px;
    }

    .active-first-span {

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

    #menu div span.b {

        margin-top: 6px;
    }

    .active-last-span {

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

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

#header ul.btn li span {

    display: none;
}

    #header a#logo,
    #header ul.btn {

        border: none;
    }

    #header .container {

        margin: 0;
    }

    #header #nav {

        background: white;
        position: absolute;
        top: calc(100% - .75em);
        left: -2px;
        z-index: -1;
        padding: 0;
        padding-top: calc(7px + .75em);
        width: calc(100% + 4px);
        border-radius: 0 0 .75em .75em;
        border: solid 2px var(--bleu);
        border-top: 0;
        -webkit-box-shadow: 0 5px 0 0 var(--bleu) !important;
        box-shadow: 0 5px 0 0 var(--bleu) !important;
        display: none;
        max-height: calc(100svh - 90px);
        overflow-y: auto;
        justify-content: flex-start;
    }

    #header #nav,
    #header ul.menu {

        flex-direction: column;
        gap: 0;
    }

    #header #nav ul.menu>li:not(ul#menu-menu li:last-child) {

        border-bottom: solid 1px var(--blanc90);
    }

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

        line-height: 1.75em;
        padding: 12.5px 25px;
    }

    #header .menu>li>.sub-menu>li {

        width: 100%;
    }

    #header .menu>li>.sub-menu>li:not(:last-child) {

        margin-bottom: 25px;
    }

    #header .menu>li:has(.sub-menu)>a {

        pointer-events: none;
    }

    #header .menu>li>a:before {

        height: 3px;
        bottom: 0;
    }

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

        position: static;
        opacity: 1;
        pointer-events: all;
        padding: 25px;
        border-radius: 0;
        display: none;
        gap: 12.5px;
        flex-direction: column;
    }

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

    #footer .container .wrapper {

        flex-direction: column;
        align-items: center;
        padding: 50px 0;
    }

    #footer nav,
    #footer nav #custom-menu {

        flex-direction: column;
        text-align: center;
        align-items: center;
    }


    #footer nav #custom-menu>li:last-child {
        padding: 25px 0;
        margin: 0;
        border: none;
    }

    #footer .container .bottom {

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

    #footer .container .bottom ul {

        flex-wrap: wrap;
        justify-content: center;
        gap: 0 25px;
    }

}

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

    /*------------------------------------*\
    LOADER
\*------------------------------------*/

    html::before {

        background-size: 33.333% auto;
    }

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


    #header ul {

        gap: 12.5px
    }

    #header ul.btn {

        padding: 0 25px;
    }

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

    #footer .container .wrapper {

        gap: 25px;
    }

    #footer .container .bottom {

        padding: 25px;
    }

    #footer .container .bottom button,
    #footer .container .bottom a {

        font-size: 12px;
    }

}