.elementor-16 .elementor-element.elementor-element-3963356{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-9d9142f *//* ========================================
   BODY
======================================== */

body {
    margin: 0;
    padding: 0;
    background: #171717;
}

/* ========================================
   VARIABLES RESPONSIVE
   IDENTIQUES AU FOOTER
======================================== */

:root {
    --header-margin-x: 50px;
    --header-margin-top: 20px;

    --header-logo-height: 30px;
    --header-font-size: 18px;
    --header-menu-gap: 30px;

    --header-color: #F4F1EA;
    --header-button-color: #F5F6F0;
}

/* ========================================
   HEADER TOUJOURS VISIBLE
======================================== */

header {
    position: fixed !important;

    top: 0;
    left: 0;

    width: 100%;

    background: none !important;

    z-index: 1000;

    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transition: none !important;
}

/* ========================================
   HEADER CONTAINER
======================================== */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding:
        var(--header-margin-top)
        var(--header-margin-x);

    box-sizing: border-box;
}

/* ========================================
   LOGO
======================================== */

.logo {
    cursor: none;

    display: flex;
    align-items: center;

    transform: translateX(0);
    opacity: 1;
}

/* Animation premier chargement */

.first-load .logo {
    transform: translateX(-100%);
    opacity: 0;

    animation: slideInLeft 1s ease-out 1.5s forwards;
}

/* Image logo */

.logo img {
    display: block;

    height: var(--header-logo-height);
    width: auto;

    max-width: none;

    mix-blend-mode: difference;
}

/* ========================================
   ANIMATION LOGO
======================================== */

@keyframes slideInLeft {

    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }

}

/* ========================================
   MENU
======================================== */

.menu-items {
    display: flex;
    align-items: center;

    gap: var(--header-menu-gap);
}

/* ========================================
   LIENS NAVIGATION
======================================== */

.nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    cursor: none;

    mix-blend-mode: difference;

    font-family: 'Bebas Neue', sans-serif;
    font-size: var(--header-font-size);

    color: var(--header-color);

    opacity: 1;

    transform: translateX(0);
}

/* ========================================
   ANIMATION ENTRÉE MENU
======================================== */

.first-load .menu-items .nav-link {
    opacity: 0;

    animation: slideInRight 1s ease-out 1.5s forwards;
}

.first-load .menu-items .nav-link:nth-child(1) {
    animation-delay: 1.5s;
}

.first-load .menu-items .nav-link:nth-child(2) {
    animation-delay: 2s;
}

.first-load .menu-items .nav-link:nth-child(3) {
    animation-delay: 2.5s;
}

/* ========================================
   ANIMATION SLIDE RIGHT
======================================== */

@keyframes slideInRight {

    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }

}

/* ========================================
   ANIMATION TEXTE AU SURVOL
======================================== */

.nav-link__inner {
    position: relative;

    display: inline-block;

    overflow: hidden;

    color: transparent;

    padding-bottom: 1px;
}

/* Textes superposés */

.nav-link__inner::before,
.nav-link__inner::after {
    content: attr(data-text);

    position: absolute;

    left: 0;
    top: 0;

    color: var(--header-color);

    white-space: nowrap;

    transform-origin: left center;

    transition: transform 0.45s cubic-bezier(
        0.19, 1, 0.22, 1
    );
}

/* Texte initial */

.nav-link__inner::before {
    transform: translateY(0%);
}

/* Texte secondaire */

.nav-link__inner::after {
    transform: translateY(110%);
}

/* Hover */

.nav-link:hover .nav-link__inner::before {
    transform: translateY(-110%);
}

.nav-link:hover .nav-link__inner::after {
    transform: translateY(0%);
}

/* ========================================
   SOULIGNEMENT
======================================== */

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 1px;

    background-color: var(--header-color);

    transform: translateX(-50%);

    transition: width 0.75s cubic-bezier(
        0.19, 1, 0.22, 1
    );
}

.nav-link:hover::after {
    width: 0;
}

.nav-link.active::after {
    width: 100%;
}

/* ========================================
   BOUTON CONTACT
======================================== */

.nav-link.btn-contact {
    background-color: transparent;

    border: 1px solid var(--header-button-color);

    padding: 6px 18px;

    border-radius: 30px;

    mix-blend-mode: normal !important;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

/* ========================================
   TEXTE BOUTON CONTACT
======================================== */

.nav-link.btn-contact .nav-link__inner::before,
.nav-link.btn-contact .nav-link__inner::after {
    color: var(--header-button-color);
}

/* ========================================
   SUPPRESSION SOULIGNEMENT BOUTON
======================================== */

.nav-link.btn-contact::after,
.nav-link.btn-contact.active::after {
    display: none !important;
}

/* ========================================
   GRAND DESKTOP
   1441px ET PLUS
======================================== */

@media screen and (min-width: 1441px) {

    :root {
        --header-margin-x: 60px;
        --header-margin-top: 25px;

        --header-logo-height: 30px;
        --header-font-size: 18px;
        --header-menu-gap: 30px;
    }

}

/* ========================================
   DESKTOP
   1025px À 1440px
======================================== */

@media screen and (min-width: 1025px) and (max-width: 1440px) {

    :root {
        --header-margin-x: 50px;
        --header-margin-top: 20px;

        --header-logo-height: 30px;
        --header-font-size: 18px;
        --header-menu-gap: 30px;
    }

}

/* ========================================
   TABLETTE
   769px À 1024px
======================================== */

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

    :root {
        --header-margin-x: 30px;
        --header-margin-top: 20px;

        --header-logo-height: 30px;
        --header-font-size: 17px;
        --header-menu-gap: 25px;
    }

}

/* ========================================
   MOBILE
   481px À 768px
======================================== */

@media screen and (min-width: 481px) and (max-width: 768px) {

    :root {
        --header-margin-x: 20px;
        --header-margin-top: 24px;

        --header-logo-height: 28px;
        --header-font-size: 16px;
        --header-menu-gap: 20px;
    }

    .nav-link.btn-contact {
        padding: 6px 15px;
    }

}

/* ========================================
   PETIT MOBILE
   361px À 480px
======================================== */

@media screen and (min-width: 361px) and (max-width: 480px) {

    :root {
        --header-margin-x: 24px;
        --header-margin-top: 24px;

        --header-logo-height: 26px;
        --header-font-size: 16px;
        --header-menu-gap: 15px;
    }

    .nav-link.btn-contact {
        padding: 5px 12px;
    }

}

/* ========================================
   TRÈS PETIT MOBILE
   360px ET MOINS
======================================== */

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

    :root {
        --header-margin-x: 12px;
        --header-margin-top: 12px;

        --header-logo-height: 24px;
        --header-font-size: 14px;
        --header-menu-gap: 10px;
    }

    .nav-link.btn-contact {
        padding: 5px 10px;
    }

}

/* ========================================
   SAFE AREA — IPHONE
======================================== */

@supports (padding-top: env(safe-area-inset-top)) {

    .header-container {
        padding-top: calc(
            var(--header-margin-top) +
            env(safe-area-inset-top)
        );
    }

}/* End custom CSS */