/* ======================================================
   HEADER / NAVIGATION (spécifique page réservation)
   ====================================================== */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 5%;
background:rgba(10,10,10,.9);
border-bottom:1px solid rgba(212,175,55,.15);
z-index:1000;
}

.brand{
display:flex;
flex-direction:column;
text-decoration:none;
color:#fff;
}

.brand-main{
font-family:var(--font-title);
font-size:1.4rem;
letter-spacing:2px;
}

.brand-sub{
font-size:.7rem;
letter-spacing:3px;
color:var(--color-gold);
}

.nav-toggle{
background:none;
border:none;
color:#fff;
cursor:pointer;
line-height:1;
}

.site-nav{
position:fixed;
top:84px;
right:-100%;
width:280px;
height:calc(100vh - 84px);
background:#0a0a0a;
display:flex;
flex-direction:column;
padding:30px;
gap:20px;
transition:right .3s ease;
z-index:1001;
}

.site-nav.is-open{
right:0;
}

.nav-link{
color:#fff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
font-size:.85rem;
transition:color .2s ease;
}

.nav-link:hover{
color:var(--color-gold);
}

/* ======================================================
   BOOKING LAYOUT
   ====================================================== */

.booking-container{
width:min(680px,100% - 2rem);
margin:140px auto 60px;
padding:32px;
background:#111;
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius-md);
box-shadow:var(--shadow-soft);
}

/* ======================================================
   FORM HEADER
   ====================================================== */

#booking-form h1{
font-family:var(--font-title);
font-size:clamp(1.8rem,4vw,2.6rem);
margin-bottom:10px;
}

.subtitle{
color:var(--color-silver);
margin-bottom:30px;
font-size:var(--text-sm);
}

/* ======================================================
   FORM STRUCTURE
   ====================================================== */

.form-group{
margin-bottom:20px;
}

.form-group label{
display:block;
margin-bottom:8px;
font-size:.95rem;
font-weight:500;
}

/* ======================================================
   INPUTS
   ====================================================== */

.form-group input,
.form-group select{
width:100%;
padding:14px 16px;
background:#000;
color:#fff;
border:1px solid #333;
border-radius:var(--radius-sm);
transition:
border-color .2s ease,
box-shadow .2s ease;
}

.form-group input:hover,
.form-group select:hover{
border-color:#555;
}

.form-group input:focus,
.form-group select:focus{
border-color:var(--color-gold);
box-shadow:0 0 0 1px var(--color-gold);
outline:none;
}

/* calendrier */

input[type="date"]{
color:white;
}

input[type="date"]::-webkit-calendar-picker-indicator{
filter:invert(1);
cursor:pointer;
}

/* ======================================================
   CAPTCHA
   ====================================================== */

.captcha{
display:flex;
align-items:center;
gap:12px;
background:#0d0d0d;
padding:12px;
border:1px dashed var(--color-gold);
border-radius:var(--radius-sm);
}

#captcha-question{
color:var(--color-gold);
font-weight:700;
font-size:1rem;
}

#captcha-input{
width:90px;
text-align:center;
}

/* ======================================================
   CHECKBOX
   ====================================================== */

.checkbox-label{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:16px;
color:var(--color-silver);
font-size:.9rem;
}

.checkbox-label input{
width:auto;
margin-top:3px;
}

/* ======================================================
   SUBMIT BUTTON
   ====================================================== */

.btn-submit{
width:100%;
padding:16px;
background:var(--color-gold);
color:#000;
border:none;
border-radius:var(--radius-sm);
font-weight:700;
cursor:pointer;
transition:
transform .2s ease,
box-shadow .2s ease,
opacity .2s ease;
}

.btn-submit:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* ======================================================
   SUCCESS OVERLAY
   ====================================================== */

#success-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(10,10,10,.96);
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:30px;
z-index:2000;
animation:fadeOverlay .4s ease;
}

@keyframes fadeOverlay{
from{opacity:0}
to{opacity:1}
}

.highlight-info{
color:var(--color-gold);
font-weight:700;
margin:10px 0;
display:block;
font-size:1.1rem;
}

.btn-home{
margin-top:20px;
display:inline-block;
padding:12px 24px;
background:var(--color-gold);
color:#000;
text-decoration:none;
border-radius:var(--radius-sm);
font-weight:700;
transition:transform .2s ease;
}

.btn-home:hover{
transform:translateY(-2px);
}

/* ======================================================
   ANTI SPAM
   ====================================================== */

.gotcha-hidden{
display:none;
}

/* ======================================================
   COOKIE BANNER
   ====================================================== */

#cookie-banner{
display:none;
position:fixed;
bottom:20px;
left:0;
right:0;
margin:auto;
max-width:480px;
background:#111;
border:1px solid rgba(212,175,55,.2);
padding:16px;
border-radius:var(--radius-md);
z-index:3000;
flex-direction:column;
gap:12px;
box-shadow:var(--shadow-soft);
}

.cookie-btns{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.cookie-btn{
padding:10px 16px;
border:none;
cursor:pointer;
border-radius:var(--radius-sm);
font-weight:600;
}

.accept-btn{
background:var(--color-gold);
color:#000;
}

.decline-btn{
background:#222;
color:#fff;
}

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

@media(min-width:769px){

.nav-toggle{
display:none;
}

.site-nav{
position:static;
width:auto;
height:auto;
background:transparent;
flex-direction:row;
padding:0;
gap:24px;
right:0;
}

}

@media(max-width:768px){

.booking-container{
padding:24px;
margin-top:120px;
}

.checkbox-label{
font-size:.85rem;
}

}

@media(max-width:480px){

.booking-container{
padding:20px;
}

#booking-form h1{
font-size:1.7rem;
}

}