
.seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.background-texture {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-image: url('images/background-mobile.webp');
background-size: cover; background-position: center; z-index: -1; opacity: 0.4;
transition: filter 0.6s ease;
}

body.menu-open .background-texture { filter: blur(8px); }

body.menu-open header {
background: rgba(15, 15, 15, 0.7);
backdrop-filter: blur(25px);
}

header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
z-index: 2000;
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: none !important;
}

body.menu-open header {
background: rgba(15, 15, 15, 0.7) !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
}

.header-left .brand-name {
font-family: 'Tenor Sans', sans-serif;
font-size: 24px; letter-spacing: 1px;
text-transform: uppercase;
color: #d1ccc0;
text-decoration: none;
}

.header-right { display: flex; align-items: center; gap: 10px; }

.instagram-link { color: #d1ccc0; font-size: 24px; opacity: 0.8; transition: 0.3s; display: flex; align-items: center; }
.instagram-link:hover { color: #bc9d68; transform: translateY(-2px); opacity: 1; }

/* On remet tout le monde en BLANC brillant par défaut */
.lang-switch a, 
.lang-switch button {
    background: none !important;
    border: none !important;
    text-decoration: none !important;
    color: #d1ccc0 !important; /* Blanc par défaut */
    font-size: 14px;
    padding: 5px 8px;
    cursor: pointer;
   
    display: flex !important; /* Force l'alignement horizontal */
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Interdit le retour à la ligne */
    align-items: center;
    gap: 0;
}

/* On grise uniquement les liens (car le lien est forcément la langue inactive) */
.lang-switch a {
    color: rgba(209, 204, 192, 0.4) !important;
    white-space: nowrap !important; /* Empêche le texte de se couper */
    padding: 5px 4px;
}

/* Sécurité au survol pour que l'utilisateur voit qu'il peut cliquer */
.lang-switch a:hover {
    color: #d1ccc0 !important;
}
.reservation-btn {
background-color: transparent;
color: #ffffff !important;
border: 1px solid #ffffff;
padding: 12px 14px;
font-size: 12px;
font-family: 'Tenor Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
border-radius: 2px;
transition: all 0.3s ease;
}

.reservation-btn:hover {
background-color: #bc9d68;
border-color: #bc9d68;
color: #121212 !important;
transform: translateY(-2px);
}

.menu-trigger { background: none; border: none; color: #d1ccc0; font-size: 30px; cursor: pointer; }
.menu-trigger:hover { color: #bc9d68; }


.side-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: rgba(15, 15, 15, 0.7) !important;
backdrop-filter: blur(25px) !important;
-webkit-backdrop-filter: blur(25px) !important;
z-index: 1000;
transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
padding: 140px 60px 60px 60px;
display: flex;
flex-direction: column;
gap: 35px;
border-left: 1px solid rgba(188, 157, 104, 0.15);
}

.side-menu.active { right: 0; }

.side-menu a {
color: #d1ccc0; text-decoration: none; font-family: 'Tenor Sans', sans-serif;
font-size: 22px; letter-spacing: 4px; text-transform: uppercase;
opacity: 0; transform: translateX(20px); transition: 0.4s;
display: inline-block;
}

/* Ton nouveau hover doré */
.side-menu a:hover {
color: #bc9d68 !important;
transform: translateX(10px) !important;
}

.side-menu:hover a:not(:hover) {
opacity: 0.5;
}

.side-menu.active a { opacity: 1; transform: translateX(0); }

.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
z-index: 900;
visibility: hidden;
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(2px);
}

.menu-overlay.active { visibility: visible; opacity: 1; }


 .policy-footer-date {
            margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(188, 157, 104, 0.1);
            font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
            color: #d1ccc0; opacity: 0.8; display: block;
        }

footer {

padding: 90px 8% 40px 8%;
mask-image: linear-gradient(to bottom, transparent 0%, black 90px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 90px);
color: #d1ccc0; 
border-top: none;
font-family: 'Spectral', serif;
margin-top: 0px;
}

/* 1. Bloc Haut Gauche (Brand + Info) */
.footer-top {
text-align: left;
margin-bottom: 35px;
}

.footer-brand {
font-family: 'Tenor Sans', sans-serif;
font-size: 24px;
letter-spacing: 6px;
text-transform: uppercase;
color: #bc9d68; /* Votre doré */
margin-bottom: 25px;
}

.footer-info {
font-size: 13px;
line-height: 1.8;
opacity: 0.8;
font-style: italic;
}

.footer-info a {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}

.footer-info a:hover { color: #bc9d68; }



.footer-middle-keywords {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    gap: 40px;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.5;
}

/* 3. Ligne du Bas (Copyright Gauche | Liens Droite) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 30px;
    border-top: 1px solid rgba(209, 204, 192, 0.05);
}

.footer-copyright {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.4;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-links a {
    color: #d1ccc0;
    text-decoration: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.footer-links a:hover { color: #bc9d68; }
   


@media screen and (max-width: 768px) {
    header {
height: 70px !important;
padding: 0 15px !important;
}
footer { padding: 60px 5% 30px 5%;
mask-image: linear-gradient(to bottom, transparent 0%, black 60px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60px);
}
 .footer-bottom { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 20px; 
    }
    .footer-links { 
        flex-direction: column;
        gap: 15px; 
    }
    

}
@media screen and (min-width: 769px) {
    .background-texture {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-image: url('images/background-desktop.webp');
background-size: cover; background-position: center; z-index: -1; opacity: 0.4;
transition: filter 0.6s ease;
}
}