/*
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(--vert);
    color: white;
    text-shadow: none;
}

::-webkit-selection {
    background: var(--vert);
    color: white;
    text-shadow: none;
}

::-moz-selection {
    background: var(--vert);
    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: 'Sweet Sans Pro', 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;
}

::-webkit-scrollbar-thumb {
    background: var(--vert);
}

::-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(--marron2);
}


:root {
    --vert: #3B4B40;
    --marron: #3D3A33;
    --marron2: #89573E;
    --marron3: #D5A461;
    --gris50: #7F7973;
    --gris75: #BFB6AC;
    --blanc90: #E5DBCF;
    --blanc95: #e5dbcf;
}

.balance {

    text-wrap: balance;
}

.title .elementor-heading-title {

    display: flex;
    align-items: center;
}

.title .elementor-heading-title:before {

    content: 'Les';
    display: inline-block;
    writing-mode: sideways-lr;
    line-height: .75;
    margin-right: 12.5px;
}

/*------------------------------------*\
    SWIPER
\*------------------------------------*/

.custom-swiper .swiper {

    overflow: visible;
}

.custom-swiper .elementor-swiper-button {

    transform: none !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(100% + 50px) !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: solid 1px var(--vert) !important;
    transition: background-color .3s, border .3s !important;
}

.custom-swiper .swiper-button-disabled {

    opacity: 1 !important;
    pointer-events: none !important;
    border-color: var(--blanc90) !important;
    z-index: -1 !important;
}

.custom-swiper .elementor-swiper-button:hover {

    background-color: var(--vert);
}

.custom-swiper .elementor-swiper-button svg {

    fill: var(--vert) !important;
    transition: fill .3s;
}

.custom-swiper .elementor-swiper-button:hover svg {

    fill: white !important;
}

.custom-swiper .swiper-button-disabled svg {

    fill: var(--blanc90) !important;
}

.custom-swiper .elementor-swiper-button-prev {

    right: 57px !important;

}

.custom-swiper .elementor-swiper-button-next {

    right: 0 !important;

}

.custom-swiper .swiper-pagination {

    top: auto !important;
    left: 0 !important;
    top: calc(100% + 50px) !important;
    transform: none !important;
    display: flex !important;
    gap: 12.5px !important;
}

.custom-swiper .swiper-pagination-bullet {

    background: var(--vert) !important;
    transition: opacity .3s !important;
    margin: 0 !important;
    width: 6.25px !important;
    height: 6.25px !important;
    opacity: .333 !important;
}

.custom-swiper .swiper-pagination-bullet-active {

    opacity: 1 !important;
}

/*------------------------------------*\
    OVERLAY
\*------------------------------------*/

.overlay:not(:has(.elementor-background-video-container, .elementor-motion-effects-container)):before,
.overlay:not(:has(.elementor-background-video-container, .elementor-motion-effects-container)):after,
.overlay .elementor-background-video-container:before,
.overlay .elementor-background-video-container:after,
.overlay .elementor-motion-effects-container:before,
.overlay .elementor-motion-effects-container:after {

    content: '' !important;
    position: absolute;
    inset: 0;
    background: var(--vert);
}

.overlay:not(:has(.elementor-background-video-container, .elementor-motion-effects-container)):before,
.overlay .elementor-background-video-container:before,
.overlay .elementor-motion-effects-container:before {

    mix-blend-mode: color !important;
    z-index: 1;
}

.overlay:not(:has(.elementor-background-video-container, .elementor-motion-effects-container)):after,
.overlay .elementor-background-video-container:after,
.overlay .elementor-motion-effects-container:after {

    opacity: .9;
    z-index: 2;
}

.overlay>*:not(.elementor-background-video-container, .elementor-motion-effects-container) {

    z-index: 3;
}

/*------------------------------------*\
    UNDERLINE
\*------------------------------------*/

#nav a,
#footer a,
#footer button,
.underline .elementor-button-text,
#header .container a span,
.elementor-widget-text-editor a {

    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transition: background-size .3s cubic-bezier(.75, 0, .25, 1);
}

#header .container a:hover span,
#footer a:hover,
#footer button:hover,
.elementor-widget-text-editor a,
.underline .elementor-button-text {

    background-size: 100% 1px;
    background-position: bottom left;
}

#header .container a span,
#footer a,
#footer button,
.underline a:hover .elementor-button-text,
.elementor-widget-text-editor a:hover {

    background-size: 0% 1px;
    background-position: bottom right;
}

#nav a {

    margin-bottom: -1px;
    background-size: 0% 3px;
    background-position: bottom right;
}

#nav a:hover {

    background-size: 100% 3px;
    background-position: bottom left;
}

#nav a,
#footer a,
#footer button,
.underline .elementor-button-text {

    background-image: linear-gradient(var(--marron3), var(--marron3));
}

.underline a {

    color: var(--vert) !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/*------------------------------------*\
    BANNER
\*------------------------------------*/

:root {
    --banner: 40px;
}

#banner {
    background-color: var(--vert);
}

#banner .wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

#banner .swiper-button {
    width: var(--banner);
    height: var(--banner);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: white;
    transition: background-color .3s;
}

#banner .swiper-button:hover {

    background-color: var(--marron);
}

#banner .swiper-container {
    height: var(--banner);
    flex: 1;
    overflow: hidden;
}

#banner .swiper-wrapper {
    height: var(--banner);
}

#banner .swiper-slide {
    height: var(--banner);
    flex-shrink: 0;
}

#banner li,
#banner a {
    display: inline-block;
    width: 100%;
    line-height: var(--banner);
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: normal;
    transition: color .3s;
}

#banner a:hover {

    color: var(--marron3);
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

#header .responsive {

    display: none;
}

#header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#header a {

    color: var(--vert);
    text-wrap: nowrap;
    line-height: 1.5;
}

#header .wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

#header .container {

    display: flex;
    padding: 25px 50px;
    background-color: white;
}

#header .container .btn-container {

    display: flex;
    gap: 18.75px;
    flex: 1;
}

#header .btn-container.right {

    justify-content: flex-end;
}

#header a#logo svg {

    height: 40px;
    width: auto;
    fill: var(--vert);
    transition: fill .3s;
}

#header a#logo:hover svg {

    fill: var(--marron3);
}

#header form {

    display: flex;
    align-items: center;
}

#header form input[type="search"] {


    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);
    color: var(--vert);
    border: none;
    width: 180px;
}

#header form input[type="search"]::placeholder {

    color: var(--gris50);
}

#header form button {

    padding: 0;
    background-color: transparent;
    line-height: 1;
    cursor: pointer;
}

#header .container a {

    display: flex;
    align-items: center;
    gap: 6.25px;
    color: var(--gris50);
    transition: color .3s;
}

#header .container a:hover {

    color: var(--vert);
}

#header a.magasin {
    padding-left: 18.75px;
    border-left: 1px solid var(--gris75);
}

#header svg.icon {

    height: 25px;
    width: 25px;
    overflow: visible;
    fill: none;
    stroke: var(--gris50);
    stroke-miterlimit: 10;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s;
}

#header a:hover svg.icon,
#header button:hover svg.icon {

    stroke: var(--vert);
}

#nav {

    border-top: solid 1px var(--blanc90);
    border-bottom: solid 1px var(--blanc90);
    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
}

#nav ul {

    width: 100%;
    display: flex;
    justify-content: center;
    gap: 37.5px;
    list-style: none;
}

#nav a {

    text-transform: uppercase;
    letter-spacing: var(--e-global-typography-secondary-letter-spacing);
    display: inline-block;
    line-height: 60px;
    font-size: 14px;
}

#nav ul li:is(:first-child, :last-child) a {

    color: var(--marron3);
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

#footer {

    background-color: var(--vert);
}

#footer .container.top {

    padding: 100px;

}

#footer .container.bottom {

    padding: 25px;
    background-color: #323f36;
}

#footer .wrapper {

    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}

#footer .column {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
}

#footer li {

    list-style: none;
}

#footer li,
#footer a,
#footer button {

    color: white;
}

#footer h4,
#footer .contact li.magasin a {

    color: var(--marron3);
    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);
    text-transform: var(--e-global-typography-secondary-text-transform);
    letter-spacing: var(--e-global-typography-secondary-letter-spacing);
    margin-bottom: 25px;
}

#footer .top #logo {

    fill: white;
    width: 200px;
    height: auto;
}

#footer .contact li.magasin a {

    color: white;

}

#footer .contact small {

    color: var(--gris75);
    text-transform: none;
    letter-spacing: 0;
}

#footer p {

    color: var(--gris75);
    font-size: 14px;
    line-height: 1.75;
    width: 300px;
}

#footer .sociaux svg {

    height: 25px;
    width: auto;
    fill: var(--marron3);
    transition: fill .3s;
}

#footer .sociaux a:hover svg {

    fill: white;
}

#footer .bottom .wrapper {

    align-items: center;
}

#footer .bottom a,
#footer .bottom button {

    font-size: 14px;
    color: var(--gris75);
    line-height: 1;
}

#footer .bottom button {

    padding: 0;
    background-color: transparent;
    border: none;
}

#footer .bottom ul {

    display: flex;
    gap: 37.5px;
}

#footer a#asticoweb {

    position: relative;
    display: flex;
    align-items: center;
    transition: color .3s;
}

#footer a#asticoweb:hover {

    color: var(--marron3);
}

#footer a#asticoweb:before {

    content: '';
    display: inline-block;
    width: 22.5px;
    height: 22.5px;
    margin-right: 6.25px;
    background-color: var(--gris75);
    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(--marron3);
}

#footer .sociaux a,
#footer a#asticoweb {

    background-image: none;
}

/*------------------------------------------------------------------------*\
    RESPONSIVE
\*------------------------------------------------------------------------*/

@media only screen and (max-width:1024px) {}

@media only screen and (max-width:650px) {}