/*==================================================
                 ECLOSIA PREMIUM
==================================================*/

:root{

--black:#050505;
--black2:#0d0d0d;
--white:#ffffff;
--gold:#c5a46d;
--gold2:#8f7446;
--grey:#8d8d8d;

--radius:18px;

--transition:.45s;

--shadow:
0 20px 60px rgba(0,0,0,.45);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--black);
color:white;
font-family:Inter,sans-serif;
overflow-x:hidden;

}

body::-webkit-scrollbar{

width:10px;

}

body::-webkit-scrollbar-thumb{

background:var(--gold);

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;
color:white;

}

section{

position:relative;

}

/*==================================================
                LOADER
==================================================*/

#loader{

position:fixed;
inset:0;
background:black;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;

transition:1s;

}

#loader.hide{

opacity:0;
visibility:hidden;

}

.loader-content{

text-align:center;

}

.loader-content h1{

font-family:"Playfair Display",serif;
font-weight:300;
font-size:65px;
letter-spacing:18px;

}

.loader-content p{

margin-top:20px;
letter-spacing:6px;
font-size:13px;
opacity:.7;

}

.loader-line{

margin:auto;
margin-top:25px;

width:0;

height:2px;

background:linear-gradient(to right,var(--gold),white);

animation:loader 2s forwards;

}

@keyframes loader{

100%{

width:260px;

}

}

/*==================================================
               CURSEUR
==================================================*/

.cursor{

position:fixed;

width:14px;
height:14px;

border-radius:50%;

background:white;

pointer-events:none;

z-index:999999;

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

transition:.05s;

mix-blend-mode:difference;

}

.cursor2{

position:fixed;

width:45px;
height:45px;

border:1px solid rgba(255,255,255,.5);

border-radius:50%;

pointer-events:none;

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

transition:.15s;

z-index:999998;

}

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

.menu{

position:fixed;

top:0;
left:0;

width:100%;

height:90px;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

backdrop-filter:blur(18px);

background:rgba(0,0,0,.35);

border-bottom:1px solid rgba(255,255,255,.08);

}

.menu-background{

position:absolute;

inset:0;

background:linear-gradient(to bottom,
rgba(0,0,0,.45),
rgba(0,0,0,.15));

}

.logo{

position:absolute;

left:60px;

font-family:"Playfair Display",serif;

font-size:34px;

letter-spacing:4px;

z-index:5;

}

.logo span{

color:var(--gold);

}

.menu-links{

display:flex;

gap:34px;

z-index:5;

}

.menu-links a{

letter-spacing:2px;

font-size:14px;

transition:.3s;

opacity:.85;

}

.menu-links a:hover{

opacity:1;

color:var(--gold);

}

.btn-menu{

padding:14px 28px;

border:1px solid var(--gold);

border-radius:50px;

}

.mobile-menu{

display:none;

}

/*==================================================
                   HERO
==================================================*/

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

background:
url(hero.jpg) center center/cover fixed;
overflow:hidden;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:radial-gradient(
        circle at center,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.35) 35%,
        rgba(0,0,0,.15) 65%,
        rgba(0,0,0,0) 100%
    );

}

.hero-gradient{

position:absolute;

bottom:0;

width:100%;

height:260px;

background:linear-gradient(transparent,
#050505);

}

.hero-noise{

position:absolute;

inset:0;

opacity:.04;

background-image:url(noise.png);

}

.hero-content{

position:relative;

z-index:5;

text-align:center;

max-width:900px;

padding:20px;

}

.hero-subtitle{

letter-spacing:8px;

font-size:13px;

opacity:.8;

}

.hero h1{

margin-top:25px;

font-family:"Playfair Display",serif;

font-weight:300;

font-size:82px;

line-height:1.05;

}

.hero p{

margin:35px auto;

max-width:720px;

opacity:.75;

line-height:2;

font-size:18px;

}
/*==================================================
                BOUTONS HERO
==================================================*/

.hero-buttons{

display:flex;
justify-content:center;
gap:25px;
margin-top:60px;
flex-wrap:wrap;

}

.hero-btn,
.hero-btn2{

padding:20px 55px;

border-radius:60px;

font-size:14px;

letter-spacing:3px;

transition:all .35s ease;

text-transform:uppercase;

}

.hero-btn{

background:linear-gradient(135deg,var(--gold),var(--gold2));

color:black;

font-weight:600;

box-shadow:0 10px 40px rgba(197,164,109,.35);

}

.hero-btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 60px rgba(197,164,109,.45);

}

.hero-btn2{

border:1px solid rgba(255,255,255,.35);

background:rgba(255,255,255,.05);

backdrop-filter:blur(12px);

}

.hero-btn2:hover{

background:white;

color:black;

}

/*==================================================
              INDICATEUR SCROLL
==================================================*/

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

z-index:10;

}

.mouse{

width:34px;

height:58px;

border:2px solid rgba(255,255,255,.7);

border-radius:30px;

display:flex;

justify-content:center;

}

.wheel{

width:4px;

height:12px;

background:white;

border-radius:10px;

margin-top:10px;

animation:wheel 1.8s infinite;

}

@keyframes wheel{

0%{

opacity:0;

transform:translateY(0);

}

100%{

opacity:1;

transform:translateY(22px);

}

}

/*==================================================
                  SECTIONS
==================================================*/

.container{

width:min(1300px,92%);

margin:auto;

}

.section{

padding:70px 0;

}

.section-title{

font-family:"Playfair Display",serif;

font-size:56px;

font-weight:300;

letter-spacing:4px;

text-align:center;

margin-bottom:35px;

}

.section-text{

max-width:850px;

margin:auto;

text-align:center;

opacity:.75;

line-height:2;

font-size:17px;

}

/*==================================================
                  GALERIE
==================================================*/

.gallery{

margin-top:90px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.gallery img{

width:100%;

height:650px;

object-fit:cover;

border-radius:var(--radius);

transition:.45s;

cursor:pointer;

box-shadow:var(--shadow);

}

.gallery img:hover{

transform:translateY(-10px) scale(1.02);

}

/*==================================================
                GUIDE IMAGES
==================================================*/

.guide-card{

margin-top:70px;

}

.guide-card img{

width:100%;

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

}

.guide-card img:hover{

transform:scale(1.015);

}

.guide-image{

margin-top:70px;

max-width:1200px;

margin-left:auto;

margin-right:auto;

overflow:hidden;

border-radius:18px;

}

.guide-image img{

display:block;

width:100%;

margin:0;

padding:0;

border:none;

box-shadow:none;

}

.guide-double img:hover{

transform:translateY(-8px);

}

/*==================================================
                 PRESTATIONS
==================================================*/

.options{

margin-top:90px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.option-card{

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

padding:45px;

border-radius:22px;

backdrop-filter:blur(18px);

transition:.35s;

position:relative;

overflow:hidden;

}

.option-card:hover{

transform:translateY(-10px);

border-color:rgba(197,164,109,.4);

}

.featured{

border:1px solid var(--gold);

box-shadow:0 0 50px rgba(197,164,109,.15);

}

.badge{

position:absolute;

top:18px;

right:18px;

padding:8px 14px;

background:var(--gold);

color:black;

border-radius:30px;

font-size:12px;

font-weight:600;

}

.option-icon{

font-size:42px;

margin-bottom:20px;

}

.option-card h3{

font-family:"Playfair Display",serif;

font-size:34px;

font-weight:300;

margin-bottom:25px;

}

.option-card ul{

list-style:none;

line-height:2.2;

opacity:.82;

}

.price{

margin-top:35px;

font-size:42px;

font-family:"Playfair Display",serif;

color:var(--gold);

}

/*==================================================
                 FEATURES
==================================================*/

.features{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:70px;

}

.feature{

padding:18px 28px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:50px;

letter-spacing:1px;

transition:.35s;

}

.feature:hover{

background:var(--gold);

color:black;

transform:translateY(-4px);

}

/*==================================================
             ANIMATION APPARITION
==================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.visible{

opacity:1;

transform:none;

}
/*==================================================
                VIDEO
==================================================*/

.video-container{

margin-top:70px;

max-width:1200px;

margin-left:auto;
margin-right:auto;

border-radius:20px;

overflow:hidden;

box-shadow:0 25px 70px rgba(0,0,0,.45);

}

.video-container video{

display:block;

width:100%;

height:auto;

border-radius:20px;

}

/*==================================================
              RESERVATION
==================================================*/

.reservation{

position:relative;

padding:220px 0;

background:

linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.82)),

url(hero.jpg) center center/cover fixed;

overflow:hidden;

}

.reservation-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

rgba(197,164,109,.12),

transparent 70%);

pointer-events:none;

}

.reservation-button{

display:flex;

justify-content:center;

align-items:center;

width:fit-content;

margin:60px auto 0;

padding:22px 65px;

border-radius:60px;

background:linear-gradient(135deg,var(--gold),var(--gold2));

color:black;

font-weight:700;

letter-spacing:3px;

transition:.35s;

box-shadow:0 15px 45px rgba(197,164,109,.35);

}

.reservation-button:hover{

transform:translateY(-5px);

box-shadow:0 25px 60px rgba(197,164,109,.45);

}

/*==================================================
                 FOOTER
==================================================*/

footer{

padding:120px 20px 80px;

text-align:center;

background:#040404;

border-top:1px solid rgba(255,255,255,.06);

}

.footer-logo{

font-family:"Playfair Display",serif;

font-size:48px;

letter-spacing:10px;

font-weight:300;

margin-bottom:25px;

}

.footer-social{

display:flex;

justify-content:center;

gap:35px;

margin:40px 0;

flex-wrap:wrap;

}

.footer-social a{

opacity:.65;

transition:.3s;

letter-spacing:2px;

}

.footer-social a:hover{

opacity:1;

color:var(--gold);

}

.copyright{

margin-top:30px;

opacity:.45;

font-size:13px;

letter-spacing:2px;

}

/*==================================================
                LIGHTBOX
==================================================*/

.lightbox{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.95);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999999;

}

.lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:92%;

max-height:92%;

border-radius:18px;

box-shadow:0 30px 80px rgba(0,0,0,.7);

animation:zoom .35s;

}

@keyframes zoom{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.lightbox-close{

position:absolute;

top:30px;

right:45px;

font-size:48px;

cursor:pointer;

color:white;

transition:.3s;

}

.lightbox-close:hover{

color:var(--gold);

transform:rotate(90deg);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px){

.gallery{

grid-template-columns:repeat(2,1fr);

}

.options{

grid-template-columns:1fr;

}

.guide-double{

grid-template-columns:1fr;

}

.hero h1{

font-size:64px;

}

}

@media(max-width:768px){

.menu{

height:auto;
min-height:90px;

display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;

padding:15px 20px;

}

.logo{

position:relative;
left:0;

font-size:28px;

margin-bottom:12px;

}

.menu-links{

display:none;

}

.mobile-menu{

display:flex;
align-items:center;
gap:10px;

font-size:20px;

cursor:pointer;

z-index:10;

color:#fff;

}

.menu-icon{

font-size:34px;
line-height:1;

}

.menu-text{

font-size:18px;
letter-spacing:2px;
text-transform:uppercase;

}

.hero{

background-attachment:scroll;

}

.hero h1{

font-size:46px;
line-height:1.2;

}

.hero p{

font-size:16px;

}

.hero-buttons{

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

}

.hero-btn,
.hero-btn2,
.reservation-button{

width:100%;
max-width:320px;

}

.section{

padding:110px 0;

}

.section-title{

font-size:40px;

}

.gallery{

grid-template-columns:1fr;

}

.gallery img{

height:420px;

}

.option-card{

padding:35px;

}

.footer-logo{

font-size:36px;
letter-spacing:6px;

}

.cursor,
.cursor2{

display:none;

}
}

@media(max-width:480px){

.hero h1{

font-size:36px;

}

.section-title{

font-size:34px;

}

.section-text{

font-size:15px;

}

.loader-content h1{

font-size:42px;

letter-spacing:10px;

}

}
/*==============================
        MENU MOBILE
==============================*/

@media(max-width:768px){

.menu-links{

position:fixed;

top:90px;
left:0;

width:100%;

background:#050505;

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

padding:40px 0;

transform:translateY(-150%);

transition:.45s;

border-bottom:1px solid rgba(255,255,255,.08);

}

.menu-links.open{

transform:translateY(0);

}

.menu-links a{

font-size:18px;

}

}
.background-blur{

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at 15% 20%,
rgba(197,164,109,.05),
transparent 35%),

radial-gradient(circle at 85% 70%,
rgba(90,140,90,.05),
transparent 35%),

radial-gradient(circle at center,
rgba(255,255,255,.015),
transparent 60%);

z-index:-1;

}
.gallery img{

filter:brightness(.95) contrast(1.08);

}

.gallery img:hover{

filter:brightness(1.02);

}
.option-card,
.guide-card img,
.guide-double img{

box-shadow:

0 25px 70px rgba(0,0,0,.45),

0 0 0 1px rgba(255,255,255,.04);

}
.section-title{

animation:titleFade 1s ease;

}

@keyframes titleFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}
::selection{

background:#c5a46d;

color:#000;

}
a:focus,
button:focus{

outline:2px solid #c5a46d;

outline-offset:5px;

}
.reglement-photo {
    text-align: center;
    margin-top: 25px;
}

.reglement-photo img {
    width: 100%;
    max-width: 800px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    display: block;
    margin: auto;
}
.pack-button{

display:inline-block;
margin-top:25px;
padding:16px 38px;
background:transparent;
border:1px solid white;
border-radius:8px;

color:white;
text-decoration:none;
letter-spacing:2px;
font-size:14px;
font-weight:500;

transition:.35s;

}

.pack-button:hover{

background:white;
color:black;
transform:translateY(-3px);

}
.pack-button{

display:inline-block;
margin-top:25px;
padding:16px 35px;
border:1px solid white;
border-radius:8px;

color:white;
background:transparent;

text-decoration:none;

letter-spacing:2px;

transition:.35s;

}

.pack-button:hover{

background:white;
color:black;

}
/* Section réservation */
.reservation{

    text-align:center;

}

/* Texte */
.reservation-info,
.reservation-best-price{

    max-width:900px;

    margin:20px auto;

    text-align:center;

}

/* ===========================
   Message avant réservation
=========================== */

.reservation-notice{

    max-width:900px;

    margin:20px auto 25px;

    padding:18px 25px;

    text-align:center;

    background:rgba(197,164,109,.08);

    border:1px solid rgba(197,164,109,.35);

    border-radius:14px;

    color:#f5f5f5;

    font-size:15px;

    line-height:1.8;

}

.reservation-notice a{

    color:#c5a46d;

    font-weight:600;

    text-decoration:none;

}

.reservation-notice a:hover{

    text-decoration:underline;

}
.password-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
justify-content:center;
align-items:center;
z-index:999999;
backdrop-filter:blur(10px);
}

.password-box{
width:420px;
max-width:90%;
background:#111;
border:1px solid rgba(197,164,109,.4);
border-radius:18px;
padding:40px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.password-box h2{
margin-bottom:15px;
font-family:"Playfair Display",serif;
}

.password-box p{
margin-bottom:20px;
opacity:.8;
}

.password-box input{
width:100%;
padding:15px;
background:#1b1b1b;
border:1px solid #444;
border-radius:10px;
color:white;
font-size:16px;
margin-bottom:20px;
}

.password-box button{
width:100%;
padding:16px;
border:none;
border-radius:10px;
background:#c5a46d;
color:black;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.password-box button:hover{
opacity:.9;
}

#passwordError{
margin-top:15px;
color:#ff7777;
font-size:14px;
}
.footer-follow{

    width:100%;

    display:block;

    text-align:center;

    margin:20px auto 25px;

    color:#d8d8d8;

    font-size:17px;

    letter-spacing:1px;

    opacity:.9;

}