/* @font-face {
    font-family: "SangBleu";
    src: url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.eot");
    src: url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/5ebc09361aef4dbfa14ad8492b8cca11.svg#SangBleu Sunrise")format("svg");
} */

@font-face {
    font-family: 'gistesyregular';
    src: url('../fonts/gistesy-webfont.woff2') format('woff2'),
         url('../fonts/gistesy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ol, ul {
    margin: 0;
    padding: 0;
}
body{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight:400;
    font-style: normal;
    color: #777;
}
ol, ul {
    list-style: none;
}
fieldset {
    border: 0;
}
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
button, input, textarea, select {
    font: inherit; /* Hérite de la police du parent */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}
button {
    background-color: transparent;
    cursor: pointer;
    appearance: none;
}
body {
    background-color: #fff;
}
.container{
    max-width: 1460px;
    width: 100%;
    margin: 0 auto;
    padding-left:55px  ;
    padding-right:55px  
}
.title {
    /* font-family: "SangBleu", serif; */
    font-family: "Noto Serif Display", serif;
    font-weight: 400;
    font-style: normal;
}
.scroll-container {
    position: relative;
    width: 100%;
    overflow: visible;
}
.w-full{
    width: 100%;
}
.relative{
    position:relative;
}
.gsap-marker-start,
.gsap-marker-end {
    z-index: 9999 !important; /* Assurez-vous qu'ils sont au-dessus de tout */
    pointer-events: all !important; /* Activez les interactions pour les marqueurs */
}
.wrapper-2-col{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wrapp-appear-img{
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    clip-path: inset(0px 100% 0px 0px);
    overflow: hidden;
    height: auto;
}
/* .wrapp-appear-img .hide-img{
    position:absolute;
    top: 0;
    right:0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 3;
} */
.background-overlay{
    position:absolute;
    top: 0;
    right:0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #dabcad;
}
.text-right{
    text-align:right
}


@media screen and (max-width: 820px) {
    .wrapper-2-col { 
        display: block;
    }
}
@media screen and (max-width: 580px) {
    .container { 
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* ================================= */
/* ============= TYPO ============== */
/* ================================= */
.title-anim .line{
    display: block;
    overflow: hidden;
}
.title-anim .line span{
    opacity: 0;
    display: block
}
.title-anim.is-inview .line span{
    transform:translateY(60px);
    animation: translateUp 0.8s cubic-bezier(0.34, 0.27, 0.39, 0.96) forwards;
}
.title-anim.is-inview .line:nth-child(1) span{
    animation-delay: 0s;
}
.title-anim.is-inview .line:nth-child(2) span{
    animation-delay: 0.15s;
}
.title-anim.is-inview .line:nth-child(3) span{
    animation-delay: 0.3s;
}
.title-anim.is-inview .line:nth-child(4) span{
    animation-delay: 0.45s;
}
.title-anim.is-inview .line:nth-child(5) span{
    animation-delay: 0.6s;
}
.title-anim{
    font-size: 42px;
    font-weight: 400;
    color: #444;
    transform:translateY(40px);
    transition: all 0.2s cubic-bezier(0.34, 0.27, 0.39, 0.96);
    will-change: transform, opacity;
}
.title-anim.is-inview{
    transform:translateY(0px);
    opacity: 1!important;
    transition: all 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}

.text-anim{
    will-change: transform, opacity;
    transform:translateY(40px);
    transition: all 0.2s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}
.text-anim strong{
    font-weight: 400;
    color: #444;
}
.text-anim.is-inview{
    transform:translateY(0px);
    transition: all 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
    opacity: 1!important;
} 
@keyframes translateDown {
    to {
        transform:translateY(40px);
        opacity: 0;
    }
}
.gistesy{
    font-family: 'gistesyregular';
}
.big-title{
    font-size: 200px;
    position: absolute;
    color: #f8f1ed;
    transform:translateX(-50px);
}
.big-title.cream{
    color: #e6c6b6;
}
.white{
    color: #fff!important;
}
.brown{
    color: #dabcad!important;
}
#wrap-sections-bg{
    background:#fff;
}
.viewport{
    overflow: hidden;
}
@media screen and (max-width: 980px) {
    .title-anim {
        font-size: 32px;
    }
}

/* ================================= */
/* ============ SPACING ============= */
/* ================================= */
.-mt-50{
    margin-top:-50px
}
.-mt-30{
    margin-top:-30px
}
.mt-30{
    margin-top: 30px;
}
.mt-50{
    margin-top: 50px;
}
.mt-150{
    margin-top: 150px;
}
.mt-300{
    margin-top: 300px;
}
.mt-200{
    margin-top: 200px;
}

.mt-100{
    margin-top: 100px;
}
.pb-100{
    padding-bottom: 100px;
}
.pb-150{
    padding-bottom: 150px;
}
.pb-200{
    padding-bottom: 200px;
}
.pb-250{
    padding-bottom: 250px;
}
.pb-300{
    padding-bottom: 300px;
}
.pt-300{
    padding-top: 300px;
}
.pt-200{
    padding-top: 200px;
}
.pt-150{
    padding-top: 150px;
}
.pt-100{
    padding-top: 100px;
}
.pt-70{
    padding-top: 70px;
}
.pt-10{
    padding-top: 10px;
}
.padding-text-left{
    padding-right: 150px;
}

@media screen and (max-width: 1080px) {
    .padding-text-left {
        padding-right: 100px;
    }
    .big-title {
        font-size: 150px;
    }
    .pt-200{
        padding-top: 170px;
    }
}
@media screen and (max-width: 980px) {
    .padding-text-left {
        padding-right: 75px;
    }
    .big-title {
        font-size: 130px;
    }
    .pt-200 {
        padding-top: 150px;
    }
}
@media screen and (max-width: 820px) {
    .pt-200 {
        padding-top: 100px;
    }
    .mobile-mt-100{
        margin-top: 100px;
    }
    .mobile-mt-110{
        margin-top: 110px;
    }
    .mobile-pt-0{
        padding-top: 0;
    }
    .mobile-pt-30{
        padding-top: 30px;
    }
    .mobile-pt-50{
        padding-top: 50px;
    }
    .padding-text-left {
        padding-right: 0;
    }
    .mt-50 {
        margin-top: 40px;
    }
    .mt-150 {
        margin-top: 100px;
    }
    .mobile-mt-80{
        margin-top: 80px;
    }
    .mobile-mt-70{
        margin-top: 70px;
    }
    .mobile-mt-50{
        margin-top: 50px;
    }
    .pb-150 {
        padding-bottom: 100px;
    }  
    .mobile-pb-220 {
        padding-bottom: 220px;
    }
    .mobile-pb-100 {
        padding-bottom: 100px;
    }
    .mobile-pb-70 {
        padding-bottom: 70px;
    }
    .mobile-pb-50 {
        padding-bottom: 50px;
    }
    .mobile-mt-20 {
        margin-top: 20px;
    }
    .mobile-mt-80{
        margin-top: 80px;
    }
    .mobile-mt-120{
        margin-top: 120px;
    }
    .mobile-pt-120{
        padding-top: 120px;
    }
}
@media screen and (max-width: 480px) {
    .big-title {
        font-size: 110px;
    }
}


/* ================================= */
/* ============ BUTTONS ============ */
/* ================================= */
.btn{
    z-index: 20;
    width: auto;
    height: auto;
    border-radius: 50px;
    transition-property: all;
    transition-duration: .3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ae9385;
    padding: 30px 40px;
    max-width: max-content;
    position: relative;
    display: block;
    /* font-family: "Noto Serif Display", serif; */
    font-size: 17px;
    text-transform: uppercase;
    /* background-color: #dabcad; */
    min-width: 230px;
    text-align: center;
    border: 1px solid #444;
    background: #fff;
}

.btn::after, .btn::before {
    /* content: ''; */
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #444;
    border-radius: 50px;
    box-sizing: border-box;
    opacity: 1;
    transition-property: all;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
    color: #444;
}
.btn::after {
    top: 3px;
    left: -3px;
}
.btn::before {
    top: -3px;
    left: 3px;
    border-color: #444;
}
.btn:hover::after, .btn:hover::before {
    top: 0;
    left: 0;
}
.btn:hover::after {
    opacity: 0;
}
.btn:hover {
    background-color: #444;
    color: #fff;
}
.btn[data-viewport]{
    transform:translateY(40px);
    transition: all 0.2s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}
.btn[data-viewport].is-inview{
    transform:translateY(0px);
    opacity: 1!important;
    transition: all 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}
.btn.rdv{
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn.rdv img{
    width: 20px;
    transform: translateY(-1px);
    transition: filter 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
    opacity: 0.8;
}
.btn.rdv:hover img{
    filter:invert(1)
}

/* ================================= */
/* ============ HEADER ============= */
/* ================================= */
header {
    position:relative
}
#header{
}
#header .wrapper{
    width: 100%;
    animation: translateDown 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) 2s forwards;
    transform:translateY(-100%);
}
#header .transf{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}
#header .wrapper .transf,
#header .wrapper .container{
    transition: all 0.5s ease;
}
#header .mixed {
    transform: translateY(-110%);
}
/* #header .wrapper.mixed .container {
    padding-top: 10px;
    padding-bottom: 10px;
} */
/* #header .wrapper .blurer {
    transition: all 0.5s ease 0s;
} */
/* #header .wrapper.mixed .blurer {
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(7px); 
    transition: all 0.5s ease 0.5s;
}
#header.overlay .wrapper.mixed .blurer {
    background-color: transparent; 
    backdrop-filter: blur(0px); 
    transition: all 0.5s ease 0s;
} */

#header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}
#header .logo {
    width: max-content;
    position: relative;
    z-index: 105;
}
#header .logo img{
    width: 150px;
    filter: invert(0); /* Logo blanc */
    will-change: filter, width;
    transition: all 0.3s ease 0s;
}
/* #header .mixed .wrapper img{
    filter: invert(1);
    width: 115px;
    opacity: 0.8;
    transition: all 0.3s ease 0.5s;
} */

#header .logo.black img{
    filter: invert(1); /* Logo noir */
}
@keyframes translateDown {
    to {
        transform:translateY(0);
    }
}

@media screen and (max-width: 680px) {
    #header .logo img {
        width: 130px;
    }
    #header .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
@media screen and (max-width: 480px) {
    #header .logo img {
        width: 110px;
    }
}

/* ====== BURGER ====== */
#burger-menu {
    cursor: pointer;
    height: 27px;
    width: 27px;
    overflow: visible;
    position: relative;
    z-index:110;
    margin: 20px 0 20px 20px;
}
#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
    background: #fff;
    display: block;
    height: 1.5px;
    opacity: 1;
    position: absolute;
    transition: 0.3s ease;
}
#header .wrapper.mixed #burger-menu span,
#header .wrapper.mixed #burger-menu span:before,
#header .wrapper.mixed #burger-menu span:after {
    background: #333;
}
#burger-menu span:before,
#burger-menu span:after {
    content: "";
}
#burger-menu span {
    right: 0px;
    top: 13px;
    width: 27px;
}
#burger-menu span:before {
    left: 0px;
    top: -10px;
    width: 16px;
}
#burger-menu span:after {
    left: 0px;
    top: 10px;
    width: 20px;
}
#burger-menu.close span {
    transform: rotate(-45deg);
    top: 13px;
    width: 27px;
}
#burger-menu.close span:before {
    top: 0px;
    transform: rotate(90deg);
    width: 27px;
}
#burger-menu.close span:after {
    top: 0px;
    left:0;
    transform: rotate(90deg);
    opacity:0;
    width:0;
}
  

/* ====== MENU ====== */
#menu{
    z-index: 999;
    min-width: 100vw;
    min-height: 100vh;
    position: fixed;
    top: 0%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    padding-top: 20px;
    transition: all 0.45s ease-in;
    left: 0%;
    transform:scale(0.4);
    will-change: opacity, transform;
    background: linear-gradient(0deg, rgba(200,172,158,1) 0%, rgba(218,188,173,1) 100%);
}
#header.overlay #menu{
    transform:scale(1);
    visibility: visible;
    opacity: 1;
}
#header.overlay.scaleUp #menu{
    transform:scale(1.3);
    opacity: 0;
}
#menu ul{
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    z-index: 2;
}
#menu li{
    list-style:none;
    transition: opacity 0.3s ease;
    opacity: 1;
    width: max-content;
    margin: 0 auto;
}
#menu ul a {
    display: block;
    overflow: hidden;
    line-height: 1;
    padding-bottom: 15px;
    padding-top: 15px;
}
#menu ul a span{
    color:#fff;
    display:block;
    font-size: 50px;
    text-decoration:none;
    transform:translateY(60px);
    opacity: 0;
    font-family: "Noto Serif Display", serif;
    will-change: transform, opacity;
    display: block;
    animation-delay: 0.3s;
} 
#header.overlay #menu ul a span{
    transform: translateY(60px);
    animation: translateUp 0.8s cubic-bezier(0.34, 0.27, 0.39, 0.96) forwards;
}
#menu ul li:nth-child(1) a span{
    animation-delay: 0.5s!important;
}
#menu ul li:nth-child(2) a span{
    animation-delay: 0.6s!important;
}
#menu ul li:nth-child(3) a span{
    animation-delay: 0.7s!important;
}
#menu ul li:nth-child(4) a span{
    animation-delay: 0.8s!important;
}
#menu ul li:nth-child(5) a span{
    animation-delay: 0.9s!important;
}
#menu .lines{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}
.socials{
    display: flex;
    gap: 20px;
    align-items: center;
    position:absolute;
    z-index: 30;
    bottom: 35px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(60px);
    transition: all .6s cubic-bezier(0.34, 0.27, 0.39, 0.96) 0s;
    
}
.socials a{
    width: 25px;
    transition: opacity 0.3s ease;
}
#header.overlay .socials{
    opacity: 1;
    transition: all .8s cubic-bezier(0.34, 0.27, 0.39, 0.96) 1.1s;
    transform: translateX(-50%) translateY(0px);
}


#menu-line1,
#menu-line2,
#menu-line3{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    /* animation: draw 1.4s ease-out forwards; */
    transition: all 0.3s ease-out 0.3s;
    stroke: #fff;
    opacity: 0.9;
}
#menu-line1 {
    stroke-dasharray: 1175;
    stroke-dashoffset: 1175;
    animation-delay: 1.3s;
}
#menu-line2 {
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
    animation-delay: 1.1s;
}
#menu-line3 {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation-delay: 0.9s;
}
#header.overlay #menu-line1,
#header.overlay #menu-line2,
#header.overlay #menu-line3{
    stroke-dashoffset: 0;
    transition: all 1.4s ease-out 1.1s;
}
@media screen and (max-width: 980px) {
    #menu ul a span {
        font-size: 44px;
    }
}
@media screen and (max-width: 680px) {
    #menu ul a span {
        font-size: 40px;
    }
}
@media screen and (max-width: 480px) {
    #menu ul a span {
        font-size: 32px;
    }
}

/* ================================= */
/* ============== TOP ============== */
/* ================================= */
#section-top{
    position:fixed;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(200,172,158,1) 0%, rgba(218,188,173,1) 100%);
    height: 100vh;
    width: 100vw;
    z-index: -2;
}

#section-top-ghost{
    height: 100vh;
}
.h1-container {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
    width: 100%;
    max-width: 1060px;
    text-align: center;
    font-size: 50px;
    font-weight: 300;
    line-height: 1;
    padding: 0 50px;
}
.h1-container .title-lines{
    opacity: 0;
    
}
.h1-container .title-lines .line{
    display: block;
    overflow: hidden;
}
.h1-container .title-lines .line span{
    opacity: 0;
    transform:translateY(80%);
    display: block;
    animation: translateUp 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) forwards;
}
.h1-container .title-lines .line:nth-child(1) span{
    animation-delay: 1.6s;
}
.h1-container .title-lines .line:nth-child(2) span{
    animation-delay: 1.8s;
}
.h1-container .title-lines .line:nth-child(3) span{
    animation-delay: 2s;
}
@keyframes translateUp {
    to {
        transform:translateY(0);
        opacity: 1;
    }
}

@media screen and (max-width: 980px) {
    .h1-container {
        font-size: 40px;
    }
}
@media screen and (max-width: 780px) {
    .h1-container {
        font-size: 34px;
    }
}
@media screen and (max-width: 580px) {
    .h1-container {
        font-size: 28px;
    }
}
@media screen and (max-width: 480px) {
    .h1-container {
        font-size: 25px;
        padding: 0 30px;
    }
}


/* ====== LINES ====== */
.intro-lines-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
#intro-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    will-change: opacity;
    animation: opacityDecrease 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) 2s forwards;
}
#line1, #line2, #line3, #line4, #line5, #line6 {
    stroke-dasharray: 1000; /* Valeur par défaut */
    stroke-dashoffset: 1000; /* Valeur par défaut */
    animation: draw 1.4s ease-out forwards;
    stroke: #fff;
    opacity: 0.42;
}
#line1 {
    stroke-dasharray: 1175; /* Longueur de la ligne 1 */
    stroke-dashoffset: 1175; /* Départ masqué */
    animation-delay: 1.3s; /* Animer cette ligne en dernier */
}
#line2 {
    stroke-dasharray: 1300; /* Longueur de la ligne 2 */
    stroke-dashoffset: 1300; /* Départ masqué */
    animation-delay: 1.1s; /* Cette ligne apparaît juste avant la première */
}
#line3 {
    stroke-dasharray: 1500; /* Longueur de la ligne 3 */
    stroke-dashoffset: 1500; /* Départ masqué */
    animation-delay: 0.9s;
}
#line4 {
    stroke-dasharray: 1900; /* Longueur de la ligne 4 */
    stroke-dashoffset: 1900; /* Départ masqué */
    animation-delay: 0.7s;
}
#line5 {
    stroke-dasharray: 2100; /* Longueur de la ligne 5 */
    stroke-dashoffset: 2100; /* Départ masqué */
    animation-delay: 0.5s;
}
#line6 {
    stroke-dasharray: 2500; /* Longueur de la ligne 6 */
    stroke-dashoffset: 2500; /* Départ masqué */
    animation-delay: 0.3s; /* Animer cette ligne en premier */
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes opacityDecrease {
    to {
        opacity: 0.35;
    }
}


/* ====== VIDEO ====== */
.video-container{
    position:absolute;
    top: 0;
    left:0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transform: translateY(-20px);
    height: 20px;
    will-change: height, transform;
    animation: containerVideoAppear 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) 2s forwards;
    
}
.video-container .para-video{
    position: relative;
    width: 100vw;
    height: 100vh;
    transform: scale(1.1) translateY(-10%);
    will-change: transform;
    animation: videoTranslate 1.2s cubic-bezier(0.34, 0.27, 0.39, 0.96) 2s forwards;
}
.video-container video{
    width: 100vw;
    height: 100vh;
    max-width: unset;
    object-fit: cover;
}
.video-container::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%; 
    background-color:rgba(0,0,0,0.38);
}

@keyframes containerVideoAppear {
    to {
        height: 100vh;
        transform:translateY(0)
    }
}
@keyframes videoTranslate {
    to {
        transform:translateY(0) scale(1.1)
    }
}

@media screen and (max-width: 1080px) {
    .video-container .para-video {
        transform: scale(1) translateY(-10%);
    }
    @keyframes videoTranslate {
        to {
            transform: translateY(0) scale(1)
        }
    }
} 

/* ====== MOUSE SCROLL ====== */
.wrap-scroll-button {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 5vh;
}
.scroll-button{
    width: 79px;
    height: 79px;
    border-radius: 50px;
    transition-property: all;
    transition-duration: .3s;
    cursor: pointer;
    display: flex;
    opacity: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-50%) translateY(90px);
    animation: translateUpMouse 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) 3.15s forwards;
}
#section-top-ghost .scroll-button.scroll-mouse {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 5vh;
    opacity: 0;
    width: 79px;
    height: 79px;
    border-radius: 50px;
    transition-property: all;
    transition-duration: .3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    background:rgba(255,255,255,0.15);
    transform: translateX(-50%) translateY(90px);
    animation: translateUpMouse 0.9s cubic-bezier(0.34, 0.27, 0.39, 0.96) 3.15s forwards;
}
.scroll-button::after {
    top: 2px;
    left: -2px;
}
.scroll-button::after, .scroll-button::before {
    /* content: ''; */
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    opacity: 1;
    transition-property: all;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}
.scroll-button::before {
    top: -2px;
    left: 2px;
    border-color: #fff;
}
.scroll-button:hover {
    background:rgba(255,255,255,0.25)
}
.scroll-button:hover::after {
    opacity: 0;
}
.scroll-button:hover::after, .scroll-button:hover::before {
    top: 0;
    left: 0;
}
@keyframes translateUpMouse {
    to {
        transform:translateY(0) translateX(-50%);
        opacity: 1;
    }
}

.mousey {
    border-radius: 25px;
    opacity: 1;
    box-sizing: content-box;
}
.scroller {
    width: 50px;
    animation-name: scroll;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
    filter: invert(1);
}
@keyframes scroll {
    0% { opacity: 0; }
    60% { transform: translateY(0); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0;}
}
#section-top .scroll-button {
    display: none;
}

@media screen and (max-width: 1280px) {
    #section-top .scroll-button {
        display: flex;
    }
    #section-top-ghost .scroll-button {
        display: none!important
    }
}
@media screen and (max-width: 480px) {
    .scroll-button.scroll-mouse {
        width: 70px;
        height: 70px;
    }
    .socials {
        bottom: 65px;
    }
}
@media screen and (max-width: 980px) {
}

/* ================================= */
/* ========== PRESENTATION ========= */
/* ================================= */
#presentation{
    position:relative;
    z-index: 100;
    background-color: #fff;
    margin:0 auto; 
    transform: scaleX(0.8);
    border-radius: 60px;
    will-change: transform, border-radius;
    width: 100%;
}


.wrap-word-anim .word {
    color: #c9ad9f;
    font-size: 50px;
    font-family: "Noto Serif Display", serif;
}
.wrap-word-anim .word.active {
    color: #333;
}
#presentation .wrapp-appear-img img{
    object-fit: cover;
    max-height: 720px;
    width: 100%;
    object-position: top center;
}
.box-image-fixed {
    width: 100vw;
    height: 100vh;
    position: relative;
}
.box-image .logo{
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    z-index: 5;
    width: 300px;
    object-fit: unset; 
}
.box-image .logo.is-inview{
    opacity: 1;
}
.box-image {
    overflow:hidden;
    width: 100%;
    height: 100%;
    transform: scale(0.8); /* Départ à scale 0.5 */
    transform-origin: center; /* Pour s'assurer que la transformation se fait autour du centre */
  
}

.box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-image .wrap {
    border-radius: 60px;
    clip-path: inset(0px 100% 0px 0px);
    overflow: hidden;
    height: 100%;
    will-change: clip-path, border-radius;
}
.lines-prestation-container {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0.055;
    transform: translateY(100px);
}
#lines-presentation {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}


@media screen and (max-width: 980px) {
    .wrap-word-anim .word {
        font-size: 40px; 
    }
}
@media screen and (max-width: 820px) {
    .big-title {
            transform: translateX(-20px) translateY(-120px)
        }
}
@media screen and (max-width: 580px) {
    .wrap-word-anim .word {
        font-size: 35px; 
    }
    .box-image img {
        object-position: right;
    }
    .box-image .logo {
        transform: translateX(-50%) translateY(-50%) scale(0.7);
    } 
}
@media screen and (max-width: 480px) {   
    .wrap-word-anim .word {
        font-size: 30px;
    }
}


/* ================================= */
/* =========== PRESTATION ========== */
/* ================================= */
#prestations{
    position:relative;
    z-index: 100;
    margin-top: -90px
}
#prestations .overlay-bg{
    background:#fff;
    position:absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 100%;
}
#prestations .wrapper-col{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
#prestations .wrapper-col .col:nth-child(1){
    grid-column: span 7;

}
#prestations .wrapper-col .col:nth-child(2){
    grid-column: span 5;
}
#prestations .prestations {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}
#prestations .wrap-prestas {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}
#prestations .wrap-prestas.is-inview {
    opacity: 1!important;
    transition: opacity 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
}
.presta {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
    height: 100vh;
}
.presta .wrap { 
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    opacity: 0;
    transform:translateY(50px);
    will-change: transform, opacity;
}
.presta-1 .wrap{
    opacity:1
}
.presta h4 {
  font-weight: 400;
  font-size: 42px;
  color: #333;
  font-family: "Noto Serif Display", serif;
}
.presta p {
  line-height: 125%;
}

.list-presta {
    background: #dabcad;
    padding: 30px;
}
.list-presta li{
    font-weight: 500;
    color: #fff;
    font-size: 17px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    position:relative;
}
.list-presta li:last-child{
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.list-presta li::after{
    content:'';
    height:1px;
    width: 30px;
    background:#ffffff72;
    position:absolute;
    bottom:0;
    left:0;
}
.list-presta li:last-child::after{
    display:none
}



.df-sticky-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    overflow: hidden;
}
.left-side{
    border-radius:40px
}
#prestations .hide-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 13;
  }
.left-side{
    clip-path: inset(0px 100% 0px 0px);
    overflow: hidden;
    height: auto;
}
.left-side,
.right-side {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow:hidden;

}
.df-sticky-card {
    width: 100%;
    height: 100vh;
will-change: clip-path;
}
.df-sticky-card .col-text{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: black;
    height: 100vh;
}

.df-sticky-card img{
    object-fit: cover;
    height: 100vh;
    width: 100%;
}
.prestations-desc .presta:nth-child(1),
.df-sticky-card:nth-child(1) {
    z-index: 10;
}
.prestations-desc .presta:nth-child(2),
.df-sticky-card:nth-child(2) {
    z-index: 9;
}
.prestations-desc .presta:nth-child(3),
.df-sticky-card:nth-child(3) {
    z-index: 8;
}
.prestations-desc .presta:nth-child(4),
.df-sticky-card:nth-child(4) {
    z-index: 7;
}
.prestations-desc .presta:nth-child(5),
.df-sticky-card:nth-child(5) {
    z-index: 6;
}
@media screen and (max-width: 820px) { 
    #prestations .big-title{
        transform: translateX(-20px) translateY(-20px);
    }
    .df-sticky-container {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
    }
    #prestations .wrapper-col {
        display: block;
        position: relative;
    }
    .df-sticky-card img {
        object-fit: cover;
        height: 50vh;
    }
    #prestations .wrapper-col .col:nth-child(1) {
        height: 50vh;
        overflow: hidden;
    }
    #prestations .wrapper-col .col:nth-child(2) {
        height: 50vh;
    }
    #prestations .prestations {
        padding-top: 30px;
    }
    #prestations .presta .wrap {
        transform: translateX(20px);
        gap: 18px;
    }
    #prestations .presta-1 .wrap{
        transform: translateX(0px);
    }
    #prestations .presta {
        padding: 0px 0;
        height: 55vh;
        display: block;
    }
    #prestations .presta h4 {
        font-weight: 400;
        font-size: 32px;
    }
    .list-presta {
        padding: 20px 30px;
    }
}



/* ================================= */
/* =========== REALISATION ========= */
/* ================================= */
#realisations{
    /* background:#fff; */
    position:relative;
}

#realisations .big-title{
    right:0
}
#horizontal-scoll {
    padding: 50px 0;
}
.horizontal-scoll-wrapper {
    overflow: hidden;
    height: 90vh;
}
.horizontal {
    display: flex;
    height: 100%
}
.horizontal>div {
    display: flex;
    flex-shrink: 0;
    padding: 0 5px;
}
.horizontal>div:first-child {
    padding: 0 5px 0 15px;
}
.horizontal>div:last-child {
    padding: 0 15px 0 5px;
}
.horizontal .card {
    align-items: stretch;
    width: 540px;
    height: 90vh;
    padding: 0 30px;
    color: #f6f2e8;
    overflow: hidden;
}
.horizontal .card .wrap{
    overflow: hidden;
    position: relative;
}
.horizontal .card[data-img-appear] .wrap{
    border-radius: 60px;
    clip-path: inset(0px 100% 0px 0px);
}
.horizontal .card img{
    height: 90vh;
    object-fit: cover;
}
#realisations #horizontal-scoll .btn{
    position: absolute;
    z-index: 100;
    right: 50%;
    transform: translateX(50%);
    bottom: -130px;
    border: 1px solid #c5a899;
    background: transparent;
    color: #fff;
    white-space: nowrap;
}
#realisations #horizontal-scoll .btn:hover{
    background: #fff;
    color: #ae9385;
    border-color: #fff;
}
#realisations #horizontal-scoll .btn img{
    filter:invert(1)
}
#realisations #horizontal-scoll .btn:hover img{
    filter:invert(0)
}
@media screen and (max-width: 480px) {
    .horizontal .card {
        width: 440px;
        height: calc(100vh - 230px);
    }
    .horizontal .card img {
        height: calc(100vh - 230px);
        object-fit: cover;
    }
    .horizontal{
        padding-top: 20px;
    }
    #realisations #horizontal-scoll .btn {
        bottom: 50px;
    }
}
 
/* ================================= */
/* ============ CONTACT ============ */
/* ================================= */
#contact{
    min-height: 100vh;
    background-color: #fff;
}
#contact .overlay-bg{
    /* background: #fbfbfb;
    position: absolute;
    top: 0;
    left: 0;
    height: 350px;
    width: 100%; */
}
#contact .wrapper-negative{
    /* margin-top: -50px; */
}
#contact .big-title{
    left: 7%;
    transform: unset;
    top: 40px;
}

#contact .col {
    display: flex;
    justify-content: center;
}
#contact .informations {
    transition: all 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96);
    line-height: 1.5;
    margin-top: 20px;
    padding-top: 20px;
    position:relative
}
#contact .informations::before{
    content: '';
    height: 1px;
    width: 50px;
    background: #ecded7;
    position: absolute;
    top: 0;
}
#contact .bloc-infos{
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.2s cubic-bezier(0.34, 0.27, 0.39, 0.96) 0s;
}
#contact .bloc-infos.is-inview {
    opacity: 1!important;
    transform: translateY(0px);
    transition: all 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96) 0.3s;
}
#contact .bg-bloc {
    transform: translateY(-50px);

}
#contact .bloc-horaire {
    background: #dabcad;
    width: 100%;
    padding: 50px 80px;
    color: #fff;
}
#contact .socials{
    opacity: 1;
    transform: translateX(0%) translateY(0px);
    filter: invert(1);
    position: static;
    margin-top: 40px;
    opacity: 0.9;
}
  
.wrap-map{
}
#map {
    border-radius: 40px;
    overflow: hidden;
    clip-path: inset(0px 100% 0px 0px);
}
#map img{
    height: 500px;
    
    width: 100%;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 820px) {
    #contact .big-title {
        left: -6%;
        top: -100px;
    }
    #contact .bloc-horaire {
        padding: 40px 30px;
    }
    #contact .col {
        display: block;
    }
    #contact .bloc-infos {
        padding-left: 35px;
    }
}
/* ================================= */
/* ============= PAGE ============ */
/* ================================= */
.content-page {
    padding-top: 80px;
    padding-bottom: 80px;
}
.wrap-banner {
    overflow: hidden;
    position: relative;
}

.banner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 130px 50px 0px 50px;
    overflow: hidden;
    min-height: 500px;
}

.banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5)
}

.banner .bg-img {
    background: #222;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    background-size: cover;
}

.banner .wrap {
    position: relative;
    z-index: 2;
    max-width: 70%;
    margin: 0 auto;
    text-align: center;
}

.banner .wrap .entry-title {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 58px;
}

.banner .attachment-banniere {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

    .banner,
    .single.single-product .banner,
    .single-courses .banner,
    .woocommerce-cart .banner,
    .woocommerce-checkout .banner {
        min-height: 420px;
    }
        .banner .wrap .entry-title{font-size: 44px;}
}

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

    .banner,
    .single.single-product .banner,
    .single-courses .banner,
    .woocommerce-cart .banner,
    .woocommerce-checkout .banner {
        min-height: 400px;
        padding: 130px 25px 0px 25px;
    }
                        .banner .wrap .entry-title {
                            font-size: 40px;
                        }
}

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

    .banner,
    .single.single-product .banner,
    .single-courses .banner,
    .woocommerce-cart .banner,
    .woocommerce-checkout .banner {
        min-height: 350px;
        padding: 110px 25px 0px 25px;
    }
                .banner .wrap .entry-title {
                    font-size: 36px;
                }
    .banner .wrap {
        max-width: 100%;
    }

    .banner .container {
        padding: 0 !important
    }
}

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

    .banner,
    .single.single-product .banner,
    .single-courses .banner,
    .woocommerce-cart .banner,
    .woocommerce-checkout .banner {
        padding: 100px 25px 0px 25px;
    }
}

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

    .banner,
    .single.single-product .banner,
    .single-courses .banner,
    .woocommerce-cart .banner,
    .woocommerce-checkout .banner {
        min-height: 310px;
    }
                        .banner .wrap .entry-title {
                            font-size: 32px;
                        }
}
/* ================================= */
/* ============= FOOTER ============ */
/* ================================= */
#footer {
    position: relative;
    margin-top: -420px;
    width: 100%;
    height: 420px;
    z-index: -1;
    box-sizing: border-box;
    padding: 0;
    background: #222;
    will-change: transform;
}

#partenaire{
    position: absolute;
    bottom: 60px;
    width: 100%;
}
#partenaire .title{
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}
#partenaire .title::after{
content: '';
    height: 1px;
    width: 50px; 
    background: #dabcad4b;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);  
}
.wrap-partenaires{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6vw;
}
.wrap-partenaires .partenaire{
    width: 200px;
    filter: invert(1);
}
.footer-bottom {
    padding: 20px 0;
    font-size: 14px;
    color: #888;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #1c1c1c;
}

.footer-bottom .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom p.copyright {
    color: #888;
    line-height: 1.3;
}
@media screen and (max-width: 480px) {
    #footer {
        height: 340px;
    }
    @supports (background: -webkit-named-image(i)) {
        #footer {
            margin-top: 0px !important;
        }
    }
    .footer-bottom .flex {
        display: block;
    }
    #partenaire .title {
        margin-bottom: 50px;
    }
    .footer-bottom p.copyright {
        margin-bottom: 8px;
    }
    #partenaire {
        bottom: 90px;
    }
}
@media screen and (max-width: 400px) {
    #footer {
        height: 280px;
    }
   
}



/* ================================= */
/* ============= GDPR ============== */
/* ================================= */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
    background-color: #c8a797 !important;
    border-top: 0 !important;
    width: 100%;
    max-width: 550px;
    position: fixed;
    right: 20px;
    left: auto;
    bottom: 20px;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
    clip-path: inset(0px 100% 0px 0px);
    border-radius: 30px;
    overflow: hidden;
    animation: animationGPDR 0.7s cubic-bezier(0.34, 0.27, 0.39, 0.96) 2.6s forwards;
}
@keyframes animationGPDR {
    to {
        clip-path: inset(0px 0% 0px 0px);
        border-radius: 0px;
    }
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content{
    display: block!important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 40px 20px!important
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p:nth-child(1){
    font-weight: 400!important;
    font-size: 18px!important; 
    margin-bottom: 10px;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p:nth-child(2){
    font-weight: 400!important;
    font-size: 15px!important;
    margin-bottom: 30px;  
    color: #f5e2d8 !important;
} 
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button {
    color: #fff !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton{
    color: #fff!important;
    text-transform: uppercase!important;
    font-weight: 500!important; 
   
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.moove-gdpr-infobar-settings-btn{
    background: transparent!important;
    border: 0!important;
    background-color: #dabcad!important;
    color: #fff!important;
    outline: unset!important;
        opacity: 1!important;  
        box-shadow: unset !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.moove-gdpr-infobar-reject-btn{
    background: transparent!important;
    border: 0!important;
    background-color: #dabcad !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover, 
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.moove-gdpr-infobar-allow-all{
    color: #fff; 
    border: 0!important;
    background: #333!important;
}

@media screen and (max-width: 680px) {
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p:nth-child(1) {
        font-size: 16px !important;
    }
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
        max-width: calc(100% - 40px);
    }
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder .moove-gdpr-infobar-reject-btn{
        display: none;
    }
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p:nth-child(2) {
        margin-bottom: 20px;
    }
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
        padding: 36px 20px !important;
    }
}