/* --- VARIABLES ET BASES --- */
:root { 
    --main-red: #D4141C; 
    --white: #FFFFFF; 
    --soft-white: #F9F7F5; /* Nouveau : Blanc ivoire */
    --black: #0f0f0f;      /* Nouveau : Noir plus riche */
    --gold: #C5A059;       /* Nouveau : Doré prestige */
    --grey: #f4f4f4; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; scroll-behavior: smooth; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* --- BARRE DE NAVIGATION ÉPURÉE (SANS TRAITS) --- */
.navbar {
    position: fixed;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    
    /* État initial : Totalement invisible */
    background: transparent; 
    border: none; /* Supprime toute bordure */
    transition: all 0.4s ease-in-out;
}

/* État au défilement : Doux et Luxueux */
.navbar.scrolled {
    background: rgba(249, 247, 245, 0.98); /* Votre --soft-white presque opaque */
    height: 65px;
    border: none; /* Toujours aucune bordure ici */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Ombre très légère pour décoller du fond */
}

/* Couleur des liens quand on défile */
.navbar.scrolled .nav-links a {
    color: #333; /* Gris foncé pour la lecture sur fond blanc */
}

/* Couleur des liens quand on défile (bouton de réservation) */
.navbar.scrolled .btn-book {
    background: var(--main-red);
    color: white;
}

/* Effet Doré au survol des liens */
.nav-links a:hover {
    color: var(--gold) !important;
    transition: 0.3s;
}

/* --- LES LIENS --- */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.spacer {
    width: 300px !important; /* On écarte plus les liens pour laisser passer le logo */
    flex-shrink: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
}

/* --- AJUSTEMENT DU TITRE HERO --- */
.hero-content {
    margin-top: 250px !important; /* Pousse le texte vers le bas pour laisser la place au grand logo */
}

.btn-book {
    position: absolute;
    right: 5%;
    background: var(--white);
    color: var(--main-red);
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* --- SECTION HERO (SLIDER) --- */
/* --- CORRECTION SLIDER ACCUEIL --- */
.hero-slider .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: block !important; /* On s'assure que l'élément existe */
    opacity: 0; 
    transition: opacity 1.5s ease-in-out, transform 8s linear;
    z-index: 1;
    filter: none !important; /* Garde tes photos en couleur */
}

/* L'image devient visible quand elle a la classe .active */
.hero-slider .slide.active {
    opacity: 1 !important;
    transform: scale(1.12); /* L'effet de zoom lent que tu aimais */
    z-index: 2;
}

/* --- AJUSTEMENT DU TEXTE D'ACCUEIL --- */
.hero-content, .hero-text {
    position: relative;
    z-index: 3;
    /* On pousse le texte vers le bas. 
       400px permet de laisser passer ton logo de 320px + un espace vide */
    margin-top: 420px !important; 
    text-align: center;
    color: white;
    transition: all 0.5s ease;
}

/* --- ADAPTATION POUR MOBILE --- */
@media (max-width: 768px) {
    .hero-content, .hero-text {
        /* Sur téléphone, le logo est plus petit (140px), 
           donc on réduit la marge pour ne pas trop descendre */
        margin-top: 220px !important;
    }
}

.hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 15px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}

/* --- SECTIONS ET CARTES --- */
.section { padding: 80px 10%; }
.title { text-align: center; color: var(--main-red); margin-bottom: 40px; font-size: 2.5rem; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--white); border-top: 4px solid var(--main-red); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.card-img {
    width: 100%;
    height: 200px; /* Si tu ne mets pas de hauteur, l'image sera invisible ! */
    background-size: cover;
    background-position: center;
    border-radius: 8px 8px 0 0;
}
.card-info { padding: 20px; text-align: center; }

/* --- FORMULAIRE DE RÉSERVATION PRESTIGE --- */
.booking-section { 
    background: #fcfcfc; 
    padding: 80px 10%; 
}

.booking-form { 
    background: #ffffff; 
    padding: 50px; 
    border-top: 3px solid #b38728; /* Bordure dorée fine au lieu du rouge */
    max-width: 900px; 
    margin: 0 auto; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* Grille du formulaire */
form { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; 
}

.form-group { 
    display: flex; 
    flex-direction: column; 
}

/* Les champs qui doivent prendre toute la largeur */
.form-group.full-width, 
.checkbox-group, 
.btn-final, 
.booking-form p { 
    grid-column: span 2; 
}

/* Étiquettes (Labels) */
.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #b38728;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Champs de saisie */
input, select { 
    padding: 12px; 
    border: 1px solid #e0e0e0; 
    background: #fafafa;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

input:focus, select:focus {
    outline: none;
    border-color: #D4AF37;
    background: #fff;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.1);
}

/* Bouton Final Prestige */
.btn-final { 
    width: 100%; 
    padding: 18px; 
    background: #1a1a1a; /* Noir élégant */
    color: #fff; 
    border: none; 
    font-weight: 600; 
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer; 
    transition: all 0.4s ease;
    margin-top: 10px;
}

.btn-final:hover { 
    background: #D4AF37; /* Devient doré au survol */
    color: #000;
}

/* Ajustement Mobile */
@media (max-width: 768px) {
    form { grid-template-columns: 1fr; }
    .form-group.full-width, .checkbox-group, .btn-final { grid-column: span 1; }
}
/* --- FOOTER --- */
footer { background: #1a1a1a; color: white; padding: 40px 10%; text-align: center; }
@media (max-width: 768px) {
    
    .hero-content {
        margin-top: 150px !important;
    }
}
/* === RECTIFICATION SLIDER LUXE === */

.hero-home {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #000; /* Fond noir pour éviter le flash blanc entre les slides */
}

/* On force l'image en couleur réelle */
.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: none !important; /* SUPPRIME LE NOIR ET BLANC */
    transition: opacity 1.5s ease-in-out, transform 6s linear; /* Transition fluide */
    z-index: 1;
}

/* L'image qui s'affiche */
.slide.active {
    opacity: 1;
    transform: scale(1.1); /* L'effet de zoom lent */
}

/* L'overlay (le voile sur l'image) */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* On utilise un dégradé très léger (0.3 max) pour garder les couleurs vives */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

.hero-text {
    position: relative;
    z-index: 3;
    margin-top: 35vh; /* Centre mieux le texte verticalement */
    text-align: center;
    color: white;
}

/* === SCROLL INDICATOR === */

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-indicator span {
    display: block;
    width: 22px;
    height: 38px;
    border: 2px solid white;
    border-radius: 12px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    width: 4px;
    height: 6px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollMove 2s infinite;
}

@keyframes scrollMove {
    0% { opacity: 0; top: 8px; }
    50% { opacity: 1; }
    100% { opacity: 0; top: 20px; }
}

/* === MOBILE === */

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }
    .hero-text p {
        font-size: 0.9rem;
        letter-spacing: 3px;
    }
}
/* === CONTACT BAS LUXE === */

.contact-bottom {
    background: #1a1a1a;
    padding: 80px 10%;
    text-align: center;
}

.contact-bottom-title {
    color: var(--main-red);
    font-size: 1.8rem;
    letter-spacing: 3px;
    margin-bottom: 40px;
}

.contact-line {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.7;
}

.contact-line i {
    color: var(--main-red);
    font-size: 1rem;
    margin-top: 5px;
}
/* === MAP LUXE === */

.map-luxe {
    width: 100%;
    height: 400px;
    
}

.map-luxe iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.contact-section {
    background: #1a1a1a;
    color: white;
    padding: 50px 10%;
    text-align: center;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.map-luxe {
    flex: 1 1 500px;
    min-height: 400px;
}

.contact-info {
    flex: 1 1 300px;
    text-align: left;
    color: white;
}

.contact-info h2 {
    font-family: 'Playfair Display', serif;
    color: var(--main-red);
    margin-bottom: 30px;
    font-size: 2rem;
}

.contact-info p {
    margin: 12px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-info i {
    color: var(--main-red);
    font-size: 1.2rem;
}


footer {
    text-align: center;
    color: #777;
    font-size: 0.8rem;
    border-top: 1px solid #333;
    padding-top: 20px;
}
.fixed-contact {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.fixed-contact a {
    background: var(--main-red);
    color: white;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s;
    font-size: 1.2rem;
    text-decoration: none;
}

.fixed-contact a:hover {
    transform: scale(1.1);
}
.fixed-contact-pro {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

.contact-item {
    position: relative;
}

.contact-item button {
    background: var(--main-red);
    border: none;
    color: white;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    transition: transform 0.3s;
}

.contact-item button:hover {
    transform: scale(1.1);
}

/* MENU */
.contact-menu {
    position: absolute;
    right: 65px;
    bottom: 0;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px;
    display: none;
    flex-direction: column;
    min-width: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.contact-menu a {
    color: white;
    text-decoration: none;
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.contact-menu a:hover {
    background: var(--main-red);
}


.contact-label {
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-right: 8px;
    white-space: nowrap;
}

/* --- ICÔNES CONTACT ATTACHÉES À LA SECTION --- */
.contact-container {
    position: relative; /* pour que les icônes flottantes soient absolues par rapport à la section */
}

.contact-floating {
    position: absolute;
    top: 20px; /* distance depuis le haut de la section Contact */
    right: -100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

.contact-floating .contact-item button {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    border-radius: 50%;
    background: var(--main-red);
    color: white;
    border: none;
    box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform 0.3s;
}

.contact-floating .contact-item button:hover {
    transform: scale(1.1);
}

/* MENU */
.contact-floating .contact-menu {
    position: absolute;
    right: 65px;
    bottom: 0;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px;
    display: none;
    flex-direction: column;
    min-width: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.contact-floating .contact-menu a {
    color: white;
    text-decoration: none;
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.contact-floating .contact-menu a:hover {
    background: var(--main-red);
}
.map-luxe iframe {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* --- MENU MOBILE ET BURGER --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        width: 50px !important;  /* Zone de clic élargie */
        height: 50px !important; /* Zone de clic élargie */
        z-index: 99999 !important; /* Passe devant absolument TOUT */
        background: rgba(212, 20, 28, 0.2) !important; /* Un léger fond rouge pour voir où tu cliques */
        border-radius: 5px;
        cursor: pointer !important;
    }
}
/* --- CORRECTIF MENU MOBILE --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important; /* Force l'apparition du bouton burger */
        z-index: 10001 !important;
    }

    .nav-links {
        display: none !important; /* Caché par défaut */
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important; /* On commence tout en haut */
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important; /* Prend tout l'écran */
        background: var(--main-red) !important;
        padding-top: 100px !important; /* Laisse de la place pour le logo/bouton */
        gap: 30px !important;
        z-index: 10000 !important;
    }

    /* LA RÈGLE CRUCIALE : On force l'affichage quand JS est actif */
    .nav-links.mobile-open {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.2rem !important; /* Liens plus gros pour le doigt */
    }

    /* On cache le spacer sur mobile pour ne pas décaler le menu */
    .spacer { display: none !important; }
}



    .hero-text { margin-top: 200px !important; }
    .form-group { flex: 1 1 100%; }


/* STYLE COMMUN POUR TOUTES LES PAGES DE CHAMBRES */
.room-container {
    display: flex;
    gap: 50px;
    padding: 120px 10% 80px;
    flex-wrap: wrap;
    background: #fff;
}

.room-gallery { flex: 1.2; min-width: 400px; }
.main-img { 
    width: 100%; 
    height: 450px; 
    object-fit: cover; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

.thumbnails { display: flex; gap: 15px; margin-top: 20px; }
.thumbnails img { 
    width: 100px; 
    height: 70px; 
    object-fit: cover; 
    cursor: pointer; 
    border-radius: 8px; 
    transition: 0.3s;
    border: 2px solid transparent;
}
.thumbnails img:hover { border-color: var(--main-red); transform: translateY(-3px); }

.room-details { flex: 1; min-width: 300px; }
.room-details h1 { color: var(--main-red); font-size: 3rem; margin-bottom: 15px; }
.room-details .price { font-size: 1.5rem; color: #b08d57; margin-bottom: 25px; font-weight: bold; }

.specs h3 { border-bottom: 2px solid var(--main-red); display: inline-block; margin-bottom: 20px; }
.specs ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.specs li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.specs i { color: var(--main-red); width: 20px; }

.btn-action-group { margin-top: 40px; display: flex; flex-direction: column; gap: 15px; }

/* Bouton Voir Détails sur l'accueil */
.btn-details {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    border: 2px solid var(--main-red);
    color: var(--main-red);
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
.btn-details:hover { background: var(--main-red); color: white; }

/* --- DESIGN LUXE POUR PAGES CHAMBRES --- */
.room-hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/home.png') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.luxe-separator {
    width: 60px;
    height: 3px;
    background: var(--main-red);
    margin: 20px auto;
}

.room-details-grid {
    padding: 80px 10%;
    background: #fdfdfd;
}

.room-main-info {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

/* Galerie Style Pro */
.featured-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.thumb-strip {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.thumb-strip img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    filter: grayscale(40%);
}

.thumb-strip img:hover {
    filter: grayscale(0%);
    transform: translateY(-5px);
}

/* Texte et Liste */
.room-text-side h2 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.amenities-list {
    margin: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.amenities-list .item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #555;
}

.amenities-list i { color: var(--main-red); font-size: 1.1rem; }

/* Boutons */
.btn-gold {
    display: block;
    background: var(--main-red);
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
    transition: 0.3s;
}

.btn-gold:hover { background: #b01017; box-shadow: 0 10px 20px rgba(212,20,28,0.3); }

.btn-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
    .room-main-info { grid-template-columns: 1fr; }
    .featured-img { height: 350px; }
}
/* --- ORGANISATION PAGE CHAMBRE --- */
.room-header-banner {
    height: 50vh;
    background: url('images/home.png') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px; /* Pour ne pas être sous la navbar */
}

.header-overlay {
    background: rgba(0,0,0,0.4);
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: white; text-align: center;
}

.room-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Image large à gauche, texte à droite */
    gap: 50px;
    padding: 60px 10%;
    max-width: 1400px;
    margin: 0 auto;
}

.main-photo-wrapper img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.thumb-navigation {
    display: flex; gap: 15px; margin-top: 20px;
}

.thumb-navigation img {
    width: 100px; height: 70px; object-fit: cover;
    cursor: pointer; border-radius: 4px; transition: 0.3s;
}

.info-side h2 { color: var(--main-red); margin-bottom: 20px; }
.amenities-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 15px; margin-top: 20px;
}

.am-item { display: flex; align-items: center; gap: 10px; color: #555; font-size: 0.9rem; }
.am-item i { color: var(--main-red); }

.btn-primary-luxe {
    display: block; background: var(--main-red); color: white;
    padding: 18px; text-align: center; text-decoration: none;
    font-weight: bold; margin-top: 30px; border-radius: 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .room-grid { grid-template-columns: 1fr; }
}

/* --- PROTECTION DE L'ACCUEIL : CES RÈGLES NE TOUCHENT QUE LES CHAMBRES --- */

/* 1. On bloque la barre en haut seulement sur les chambres */
.page-interieure .navbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999;
}

/* 2. On réduit et on remonte le logo pour qu'il ne cache pas le titre */
.page-interieure 


/* 3. On pousse la bannière pour qu'elle ne commence pas "sous" la barre rouge */
.page-interieure .room-header-banner {
    margin-top: 70px !important; 
}

/* Le petit logo est un "fantôme" au début, il ne prend pas de place */
.small-logo-link {
    position: absolute; 
    left: 20px; 
    top: 50%;
    transform: translateY(-50%) translateX(-10px); /* Légèrement décalé à gauche */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1001;
}

.small-logo {
    height: 80px !important;
    width: auto;
}

/* Cette classe ne s'active QUE quand le JS le décide */
.small-logo-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0); /* Il glisse doucement vers sa place */
}
@media (max-width: 768px) {
    .small-logo-link {
        left: 70px; /* décale le logo vers la droite */
    }
}
/* === CORRECTION MOBILE : boutons flottants visibles === */
@media (max-width: 768px) {
    .contact-floating {
        right: -52px !important; /* les boutons restent flottants mais visibles */
    }
}
/* Conteneur principal du slider */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière l'overlay et le texte */
}

/* Chaque image du slider */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Effet de fondu doux */
}

/* Image visible */
.slide.active {
    opacity: 1;
}

/* On s'assure que le contenu du hero reste au-dessus */
.hero-overlay { z-index: 2; }
.hero-text { z-index: 3; }
.scroll-indicator { z-index: 3; }
/* Boutons Flèches */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 20, 28, 0.5); /* Rouge EuroJapan transparent */
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    transition: 0.3s;
    border-radius: 50%;
    margin: 0 20px;
}

.slider-btn:hover { background: #D4141C; }
.prev { left: 0; }
.next { right: 0; }

/* Points (Dots) */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active { background: #D4141C; width: 30px; border-radius: 10px; }
/* Grille spécifique pour les véhicules */
/* --- STYLE FLOTTE LUMINEUSE (BLANC ROYAL) --- */
#vehicule {
    background-color: var(--soft-white) !important; /* Fond crème très clair */
    padding: 80px 10%;
}

#vehicule .title {
    color: var(--main-red); /* Le titre redevient rouge pour la cohérence */
    margin-bottom: 50px;
}

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.fleet-card {
    background: var(--white); /* Cartes blanches sur fond crème */
    border-radius: 15px; /* Arrondi plus doux et moderne */
    overflow: hidden;
    transition: all 0.4s ease;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Ombre très légère */
    border: 1px solid #eee;
}

.fleet-img {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.6s ease;
}

.fleet-card h4 {
    color: #333;
    padding: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.95rem;
    margin: 0;
    background: var(--white);
}

/* Effets au survol */
.fleet-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(212, 20, 28, 0.1); /* Lueur rouge très discrète */
    border-color: var(--main-red);
}

.fleet-card:hover .fleet-img {
    transform: scale(1.05);
}
.lightbox {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 30px;
    transition: 0.3s;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background: #D4141C; /* Le rouge de ta charte */
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* On ajuste l'image pour laisser de la place aux flèches sur mobile */
@media (max-width: 768px) {
    .lightbox img { max-width: 80%; }
    .lightbox-prev, .lightbox-next { padding: 10px; font-size: 20px; }
}

/* --- AMÉLIORATION SLIDER --- */
.hero-slider {
    position: relative;
    height: 100vh;
    width: 100%;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 4s ease;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
    transform: scale(1.05); /* Effet de zoom lent comme sur le site exemple */
}

.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: white;
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

/* --- SECTION À PROPOS --- */
.about-section {
    padding: 100px 10%;
    background: #fff;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-text { flex: 1; }
.about-image { flex: 1; text-align: center; }

.about-text h2 {
    font-size: 2.8rem;
    color: var(--black);
    margin: 15px 0;
}

.subtitle {
    color: var(--main-red);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

.separator {
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--main-red), var(--gold));
    margin-bottom: 25px;
    border-radius: 5px;
}

/* On ajoute un petit losange doré au centre du trait */
.separator::after {
    content: '♦';
    color: var(--gold);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white); /* ou la couleur du fond */
    padding: 0 10px;
    font-size: 12px;
}

.about-text p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.about-img-signature {
    max-width: 80%;
    filter: grayscale(1);
    opacity: 0.3;
}

@media (max-width: 768px) {
    .about-container { flex-direction: column; text-align: center; }
    .about-text h2 { font-size: 2rem; }
}
/* === SLIDER STYLE PALACE === */
.slide {
    transform: scale(1);
    transition: opacity 1.5s ease-in-out, transform 8s linear;
}

.slide.active {
    opacity: 1;
    transform: scale(1.12); /* zoom lent luxe */
}
/* === ABOUT PHOTOS STYLE PALACE === */
.about-image {
    position: relative;
    width: 100%;
    min-height: 420px;
}

.about-img {
    position: absolute;
    width: 70%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    transition: transform 1s ease, opacity 1s ease;
}

.img-main {
    left: 0;
    top: 40px;
    z-index: 1;
}

.img-top {
    right: 0;
    top: 0;
    z-index: 2;
}
.about-img {
    opacity: 0;
    transform: translateY(40px);
}
/* === CORRECTION IMAGES À PROPOS (COULEUR) === */
.about img,
.about-image img,
.about-img {
    filter: none !important;
}
/* === ABOUT LUXE – STRUCTURE PRO === */
.about-image {
    display: flex;
    gap: 30px;
}

.about-image img {
    width: 50%;
    height: 320px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
/* === ABOUT : IMAGES NETTES ET CLAIRES === */
.about-image img,
.about-img {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
/* === ABOUT – EFFET DYNAMIQUE LUXE === */

.about-container {
    perspective: 1000px; /* Ajoute de la profondeur 3D */
}

.about-image {
    display: flex;
    gap: 30px;
    position: relative;
    padding: 20px;
}

.about-image img {
    width: 50%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    filter: none !important; /* On garde les couleurs */
    
    /* Transition très fluide pour le mouvement */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

/* Image de gauche : elle descend légèrement au survol */
.about-image img:first-child {
    transform: translateY(20px);
}

/* Image de droite : elle monte légèrement au survol */
.about-image img:last-child {
    transform: translateY(-20px);
}

/* L'effet Gazelle d'Or au survol du conteneur */
.about-container:hover .about-image img:first-child {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.about-container:hover .about-image img:last-child {
    transform: translateY(10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

/* le cadre */
.about-img-signature {
    width: 48%;
    height: 360px;
    object-fit: cover;

    /* TRÈS IMPORTANT */
    overflow: hidden;
    border-radius: 18px;

    box-shadow: 0 25px 50px rgba(0,0,0,0.28);
}
/* Animation d'entrée */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* --- EFFET PARALLAX DANS LE CADRE --- */
.about-image {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.parallax-frame {
    width: 48%;
    height: 450px; /* Hauteur fixe du cadre */
    overflow: hidden; /* Important : coupe ce qui dépasse */
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
}

.parallax-frame img {
    position: absolute;
    top: -20%; /* On fait remonter l'image pour avoir de la marge */
    left: 0;
    width: 100%;
    height: 100%; /* L'image est plus haute que le cadre */
    object-fit: cover;
    filter: none !important;
    transition: transform 0.5s linear; /* Mouvement fluide au scroll */
    will-change: transform;
}
h2 {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
}

.subtitle {
    color: var(--gold) !important; /* On passe le petit texte "Découvrez..." en doré */
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 0.85rem;
}

p {
    color: #444; /* Un gris très foncé, plus élégant que le noir pur pour le texte long */
    line-height: 1.8;
}
.btn-book, .btn-discover, .btn-final {
    border: 1px solid var(--main-red);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-discover:hover {
    background: var(--black);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2); /* Lueur dorée */
    transform: translateY(-3px);
}
.about-section {
    background-color: var(--soft-white); /* Donne un aspect "papier de haute qualité" */
}
/* 1. HEBERGEMENT (Clair et pur) */
#rooms {
    background-color: var(--white);
}

/* 2. RESTAURANT (Crème/Ivoire pour le goût) */
#restaurant {
    background-color: var(--soft-white);
    border-top: 1px solid #eee; /* Petite ligne discrète */
}

/* 3. FLOTTE DE VEHICULES (Noir Luxe) */
/* C'est ici qu'on marque la plus grosse séparation */
.fleet-section {
    background-color: var(--black) !important;
    color: white !important;
    padding: 100px 10%;
}

.fleet-section h2, .fleet-section .subtitle {
    color: var(--white);
}

/* 4. ESPACE CONFERENCE (Retour au clair pour travailler) */
#conference {
    background-color: var(--white);
}
.subtitle {
    color: var(--gold); /* Le doré remplace le rouge ici */
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}
/* --- SÉPARATIONS VISUELLES DES SECTIONS --- */

/* 1. À PROPOS (Fond Ivoire) */
#about {
    background-color: var(--soft-white);
    padding-top: 100px;
    padding-bottom: 100px;
}

/* 2. HEBERGEMENT (Fond Blanc) */
#hebergement {
    background-color: var(--soft-white);
}

#restaurant {
    /* La grande photo de fond */
    background: url('images/Grand-salle.png') no-repeat center center/cover !important;
    background-attachment: fixed; /* L'image reste fixe quand on scrolle, effet très luxe */
    padding: 60px 10%; /* Padding réduit pour gagner de l'espace vertical */
    position: relative;
    color: var(--white) !important;
}

/* Le voile sombre pour la lisibilité */
#restaurant::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* On assombrit un peu plus (0.7) */
    z-index: 1;
}

#restaurant .container {
    position: relative;
    z-index: 2;
}

/* Galerie compacte : 4 colonnes sur PC */
.restaurant-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 colonnes */
    gap: 10px; /* Espace réduit entre les photos */
    margin-top: 30px;
}

.gallery-item {
    height: 160px; /* Taille compacte pour que les 2 lignes ne soient pas trop hautes */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    transition: transform 0.3s ease;
}

/* Responsive : 2 colonnes sur mobile */
@media (max-width: 768px) {
    .restaurant-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 2. On donne une TAILLE aux images (Obligatoire) */
.gallery-item {
    height: 300px; /* Sans cette ligne, l'image fait 0px de haut */
    background-size: cover; /* Pour que l'image remplisse le cadre sans se déformer */
    background-position: center;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.3); /* Ta bordure dorée */
    transition: transform 0.3s ease;
}

/* Petit effet de survol sympa */
.gallery-item:hover {
    transform: scale(1.02);
    border-color: var(--gold);
}

/* 4. VEHICULES (Fond Blanc) */
#vehicule {
    background-color: var(--white);
    border-top: 1px solid #eee;
}

/* 5. CONFERENCE (Fond Ivoire) */
#conference {
    background-color: var(--soft-white);
}

/* 6. RESERVATION (Fond Blanc) */
#reservation {
    background-color: var(--white);
}

/* --- PETITES FINITIONS --- */
.subtitle {
    color: var(--gold) !important;
}

.contact-info i {
    color: var(--gold) !important; /* Icônes de contact dorées */
}
.services-section {
    padding: 100px 10%;
    background-color: var(--white);
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.service-item {
    padding: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Pour éviter le saut au survol */
}

/* L'icône en haut, comme sur ta photo */
.service-item i {
    font-size: 2.5rem;
    color: var(--gold); /* On utilise ton doré pour les icônes */
    margin-bottom: 20px;
    display: block;
}

.service-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--black);
}

.service-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Petit effet discret au survol */
.service-item:hover {
    background: var(--soft-white);
    transform: translateY(-5px);
}
.payment-badge {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
}
#restaurant .title {
    color: #FFFFFF !important;
}
/* --- TITRE EN GOLD --- */
#restaurant h2.title.white {
    color: var(--gold) !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Ombre pour mieux voir l'écriture */
}

/* --- AMÉLIORATION DU TEXTE (L'écriture) --- */
#restaurant .restaurant-intro {
    color: #ffffff !important;
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto 30px;
    background: rgba(0, 0, 0, 0.4); /* Fond léger derrière le texte pour lire facilement */
    padding: 15px;
    border-radius: 8px;
    text-shadow: 1px 1px 2px black;
}

#restaurant {
    padding: 60px 2%; /* On réduit les marges pour gagner de la largeur */
    background-attachment: fixed;
}

.restaurant-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 100%; /* Utilise tout l'écran */
}

/* --- TEXTE À GAUCHE (SANS BLOC NOIR) --- */
.restaurant-text-side {
    flex: 0.8; /* Prend un peu moins de place que les photos */
    padding-left: 30px;
}

.gold-title {
    color: #c5a059 !important;
    font-size: 3.2rem;
    font-weight: 800;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); /* Ombre pour lire sans fond noir */
    margin-bottom: 20px;
}

.clean-text {
    color: #ffffff;
    font-size: 1.1rem;
    max-width: 450px;
    line-height: 1.6;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.9); /* Ombre portée sur les lettres */
    margin-bottom: 30px;
}

/* On rend l'image de fond un peu plus sombre globalement, mais sans la cacher */
#restaurant {
    position: relative;
    padding: 100px 2%;
    background-attachment: fixed;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* LE SECRET DE LA LISIBILITÉ : Un dégradé de gauche à droite */
/* LE SECRET DE LA LISIBILITÉ : On baisse l'opacité pour voir la photo derrière */
.res-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* J'ai passé le 0.8 à 0.3 et le 0.4 à 0.1 pour que la photo de fond soit bien lisible */
    background: linear-gradient(to right, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 40%, transparent 80%);
    z-index: 1;
}

.res-flex-container {
    position: relative;
    z-index: 2; /* Passe au-dessus de l'overlay */
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
}

/* --- TEXTE ULTRA LISIBLE --- */
.res-text-content {
    flex: 0.8;
    padding-left: 5%;
}

.title-gold {
    color: #c5a059 !important;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    /* Ombre portée pour détacher les lettres du fond */
    text-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}

.res-description p {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
    /* Ombre portée subtile sur le texte blanc */
    text-shadow: 1px 1px 8px rgba(0,0,0,0.8);
}

/* --- PHOTOS LARGES --- */
.res-visuals-side {
    flex: 1.8;
    display: flex;
    gap: 20px;
    padding-right: 2%;
}

.res-visuals-side .parallax-frame {
    flex: 1;
    height: 500px; /* Plus grand pour l'impact visuel */
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 160, 89, 0.6);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.res-visuals-side .gallery-item {
    width: 100%;
    height: 150%;
    position: absolute;
    top: -25%;
    background-size: cover;
    background-position: center;
}
/* Style du bouton "Savoir Plus" */
.btn-gold-simple {
    background: transparent; /* Fond transparent pour voir la photo derrière */
    color: #c5a059; /* Couleur dorée */
    border: 2px solid #c5a059; /* Contour doré */
    padding: 12px 35px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease; /* Animation fluide */
    position: relative;
    z-index: 2;
    margin-top: 10px;
}

/* Effet au survol (Hover) */
.btn-gold-simple:hover {
    background: #c5a059; /* Le bouton se remplit de doré */
    color: #000; /* Le texte devient noir pour le contraste */
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.5); /* Lueur dorée */
    transform: translateY(-3px); /* Petit soulèvement */
}
/* Animation d'entrée pour la Modal */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.4s ease-out; /* Animation d'entrée */
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Style du Slider */
.modal-slider {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

.slide { display: none; text-align: center; }

.slide img {
    border: 1px solid #c5a059;
    border-radius: 5px;
    max-height: 70vh;
    object-fit: cover;
}

/* Flèches */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #c5a059;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    user-select: none;
    text-decoration: none;
}
.next { right: 0; }
.prev { left: 0; }
.prev:hover, .next:hover { background-color: rgba(197, 160, 89, 0.2); }

/* Animation de transition entre images */
.fade {
    animation: fadeEffect 1s;
}
@keyframes fadeEffect {
    from {opacity: .4} to {opacity: 1}
}

.slide-caption {
    color: #c5a059;
    font-size: 1.2rem;
    padding: 15px;
}
.prev:active, .next:active {
    transform: scale(0.8); /* Petit effet de clic quand on appuie */
}
/* Fond de la modal (couvre tout l'écran) */
.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

/* La boîte de contenu */
.modal-content {
    position: relative;
    background-color: #1a1a1a;
    margin: 5% auto;
    padding: 40px;
    width: 80%;
    max-width: 900px;
    border: 1px solid #c5a059;
    border-radius: 10px;
    color: white;
}

/* Le bouton fermer (X) */
.close-modal {
    position: absolute;
    top: 15px; right: 25px;
    color: #c5a059;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.modal-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.modal-images-grid img {
    width: 100%;
    border: 1px solid #c5a059;
}
/* --- SECTION VÉHICULES : SHOWROOM AUTOMOBILE --- */
.vehicle-showroom {
    background-color: var(--black) !important; /* Fond noir profond pour le contraste */
    padding: 100px 0; /* Pas de padding horizontal pour que le showroom prenne toute la largeur */
    position: relative;
    overflow: hidden; /* Cache ce qui dépasse du cadre */
}

.vehicle-showroom .title {
    color: var(--main-red) !important; /* Titre en blanc */
    text-align: center;
    margin-bottom: 60px;
    font-size: 3rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.showroom-container {
    max-width: 1200px; /* Largeur maximale du showroom */
    position: relative;
    margin: auto;
    overflow: hidden; /* Important pour les transitions */
    height: 600px; /* Hauteur fixe pour le showroom */
    border-radius: 15px; /* Coins arrondis pour un look moderne */
    box-shadow: 0 20px 60px rgba(0,0,0,0.7); /* Ombre profonde */
}

.showroom-slide {
    display: none; /* Masqué par défaut */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
    background-color: #222; /* Fond par défaut si l'image ne charge pas */
}

.showroom-slide.active {
    display: block;
    opacity: 1;
    transform: scale(1); /* Pas de zoom initial pour un effet propre */
}

.showroom-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre tout l'espace */
    filter: brightness(0.7); /* Assombrit un peu l'image pour que le texte ressorte */
}

.slide-caption {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white);
    text-align: center;
    z-index: 10;
    width: 80%;
    max-width: 600px;
    background: rgba(0, 0, 0, 0.6); /* Fond semi-transparent pour le texte */
    padding: 20px 30px;
    border-radius: 8px;
    border-top: 3px solid var(--gold); /* Ligne dorée au-dessus du texte */
}

.slide-caption h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--gold);
    letter-spacing: 2px;
}

.slide-caption p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 20px;
}

.btn-showroom {
    display: inline-block;
    background: var(--main-red);
    color: var(--white);
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-showroom:hover {
    background: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

/* Flèches de navigation */
.showroom-prev, .showroom-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 18px;
    margin-top: -30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

.showroom-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.showroom-prev:hover, .showroom-next:hover {
    background-color: rgba(212, 20, 28, 0.8);
}

/* Points de navigation */
.showroom-dots {
    text-align: center;
    margin-top: 30px;
    position: relative;
    z-index: 10;
}

.showroom-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.showroom-dot.active, .showroom-dot:hover {
    background-color: var(--gold);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .showroom-container {
        height: 400px; /* Moins de hauteur sur mobile */
    }
    /* --- BLOC TEXTE RÉDUIT ET DISCRET --- *//* --- LE BADGE MINIATURE FINAL --- */
/* --- SHOWROOM ÉPURÉ : FOCUS IMAGE --- */
.showroom-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important : l'image remplit tout sans être déformée */
    filter: brightness(1); /* On remet la luminosité normale */
    transition: transform 1.2s ease-in-out;
}

/* Effet de zoom très lent pour donner de la vie à l'image fixe */
.showroom-slide.active img {
    transform: scale(1.05); 
}

.showroom-container {
    height: 500px; /* Ajuste la hauteur selon tes préférences */
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
    }
    .showroom-prev, .showroom-next {
        padding: 10px;
        font-size: 16px;
    }
/* --- ADAPTATION MOBILE (TÉLÉPHONE) --- */
@media (max-width: 768px) {
    /* On réduit la hauteur pour que l'image ne prenne pas tout l'écran */
    .showroom-container {
        height: 250px !important; 
    }

    .showroom-slide img {
        object-fit: cover !important; /* Garde le remplissage propre */
        object-position: center !important;
    }
    
    .vehicle-showroom .title {
        font-size: 1.5rem !important; /* Titre plus petit pour mobile */
    }
}
/* --- CORRECTIF FINAL RESTAURANT MOBILE --- */
@media (max-width: 768px) {
    /* On réduit l'espace global */
    #restaurant {
        padding: 30px 5% !important;
    }

    .res-flex-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

/* --- FORCE LE FORMAT PAYSAGE SUR MOBILE --- */
@media screen and (max-width: 768px) {
    /* 1. On annule le mode Flex qui étire tout */
    .res-flex-container {
        display: block !important; /* On passe en mode bloc classique */
        height: auto !important;
        padding: 20px !important;
    }

    /* 2. On s'assure que le texte ne prend pas trop de place */
    .res-text-content {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* 3. LA GRILLE : On force les photos à être l'une SOUS l'autre */
    /* C'est la seule façon d'arrêter l'effet "tranches fines" */
    .res-images-grid {
        display: block !important; /* Pas de grid, pas de flex */
        width: 100% !important;
    }

    .res-images-grid img {
        width: 100% !important;   /* Prend toute la largeur du téléphone */
        height: 200px !important;  /* ON FORCE UNE HAUTEUR FIXE HORIZONTALE */
        object-fit: cover !important; /* Recadre proprement */
        margin-bottom: 15px !important; /* Espace entre les deux photos */
        display: block !important;
        border-radius: 10px;
    }
}

    /* On réduit un peu le titre pour gagner de la place */
    .title-gold {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }
}
/* =========================
   MENU BURGER – FIX FINAL
   ========================= */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    position: absolute;
    left: 20px;
    z-index: 20000;
}

@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: fixed;
        inset: 0;
        background: var(--main-red);
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 35px;
        z-index: 15000;
    }

    .nav-links.mobile-open {
        display: flex;
    }

    .nav-links a {
        font-size: 1.3rem;
        color: white;
    }

    .spacer,
    .btn-book {
        display: none;
    }
}
@media (max-width: 768px) {
    /* On force le bouton RÉSERVER à apparaître en haut à droite */
    .btn-book {
        display: block !important;
        visibility: visible !important;
        position: fixed !important; /* Il reste en haut même quand on descend */
        top: 15px !important;
        right: 15px !important;
        background-color: #FFFFFF !important; /* Fond blanc pour bien le voir */
        color: #D4141C !important; /* Texte rouge */
        padding: 8px 12px !important;
        border-radius: 5px !important;
        font-weight: bold !important;
        font-size: 0.75rem !important;
        z-index: 20000 !important; /* On le met au-dessus de TOUT */
        text-decoration: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }

    /* On s'assure que le bouton menu (traits) ne se superpose pas */
    .menu-toggle {
        z-index: 20001 !important;
    }
}
.modal-counter {
    text-align: center;
    color: #c5a059;
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: bold;
}

.modal-slides img {
    width: 100%;
    height: auto;
    max-height: 65vh; /* Évite que l'image dépasse de l'écran */
    object-fit: contain; /* Garde toute l'image visible sans la couper */
    background: #000;
    border: 1px solid #c5a059;
}

/* --- STYLE SPÉCIFIQUE À L'ACCUEIL --- */
#home .hero-content h1 {
    color: var(--soft-white);
    font-weight: 700;
}

#home .hero-content p {
    color: var(--soft-white); /* Le texte "Luxe • Confort • Prestige" reste en blanc pour équilibrer */
    letter-spacing: 5px;
    text-transform: uppercase;
}
/* On crée une variante de grille pour donner plus de place à l'image */
.grid-chef-focus {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr !important; /* Le texte prend 35%, l'image 65% */
    gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .grid-chef-focus {
        grid-template-columns: 1fr !important; /* Repasse en colonne sur mobile */
    }
}
/* Layout de la section */
.chef-mosaic-section {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr !important;
    gap: 40px;
    align-items: center;
    padding: 80px 5%;
}

/* Container de la mosaïque */
.mosaic-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 15px;
    height: 415px;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* La photo du Chef prend toute la hauteur à gauche */
.chef-main {
    grid-row: 1 / span 2;
}

/* Animation au survol */
.mosaic-item:hover img {
    transform: scale(1.08);
}

.mosaic-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 15px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

/* Adaptation Mobile */
@media (max-width: 900px) {
    .chef-mosaic-section {
        grid-template-columns: 1fr !important;
    }
    .mosaic-container {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 300px 200px 200px;
    }
}
/* Layout Global de la section */
.chef-mosaic-section {
    display: grid !important;
    grid-template-columns: 0.5fr 1.5fr !important; /* Texte serré à gauche, Mosaïque large */
    gap: 50px;
    align-items: center;
}

/* Grille Mosaïque */
.mosaic-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* La colonne du chef est plus large */
    grid-template-rows: 250px 250px;
    gap: 20px;
    height: 520px;
}

.mosaic-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
}

.chef-main { grid-row: 1 / span 2; } /* Le chef prend toute la hauteur */

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.mosaic-item:hover img { transform: scale(1.1); }

/* Overlay au survol */
.mosaic-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
    color: white;
    font-size: 2rem;
}

.mosaic-item:hover .mosaic-overlay { opacity: 1; }

/* LIGHTBOX STYLE */
.lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(0,0,0,0.95);
    padding: 40px;
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 50px;
    cursor: pointer;
}
/* --- SOLUTION POUR LES 2 PHOTOS CÔTE À CÔTE --- */
.gallery-dual {
    display: flex !important; /* Force l'alignement horizontal */
    gap: 15px;               /* Espace entre les deux photos */
    flex-wrap: nowrap;       /* Empêche de revenir à la ligne sur PC */
}

.gallery-dual img {
    flex: 1;                 /* Donne la même largeur aux deux images (50/50) */
    width: 50%;              /* S'assure qu'elles se partagent l'espace */
    height: 500px !important;/* Garde ta hauteur préférée */
    object-fit: cover;       /* Coupe l'image sans la déformer */
    border-radius: 8px;      /* Coins arrondis comme ton design */
}

/* Adaptation pour les téléphones */
@media (max-width: 768px) {
    .gallery-dual {
        flex-direction: column; /* Sur mobile, on les rempile l'une sous l'autre */
    }
    .gallery-dual img {
        width: 100%;
        height: 300px !important;
    }
}
/* ===== BOUTON CONTACT PREMIUM ===== */
.btn-discover {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 38px;
    margin-top: 25px;

    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;

    color: #c9a24d; /* or luxe */
    background: transparent;

    border: 2px solid #c9a24d;
    border-radius: 50px;

    text-decoration: none;
    position: relative;
    overflow: hidden;

    transition: all 0.4s ease;
}

/* Effet hover élégant */
.btn-discover::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(201,162,77,0.25), transparent);
    transition: all 0.6s ease;
}

.btn-discover:hover::before {
    left: 100%;
}

.btn-discover:hover {
    background: #c9a24d;
    color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(201,162,77,0.35);
    transform: translateY(-2px);
}
/* --- LOGO VERSION AGRANDIE --- */

.logo-premium {
    position: fixed;
    top: 70px; /* Remonté un peu pour laisser de la place à la plongée */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    transition: all 0.5s ease;
}

.logo-img {
    height: 320px !important; /* <--- C'est ici qu'on agrandit le logo */
    width: auto;
    filter: drop-shadow(0px 15px 30px rgba(0,0,0,0.6)); /* Ombre plus forte car le logo est plus grand */
}

/* Cache le gros logo quand on descend */
.logo-premium.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-30px);
}

/* --- REGLAGE SPECIAL MOBILE (Important pour ne pas boucher l'écran) --- */
@media (max-width: 768px) {
    .logo-img {
        height: 140px !important; /* Sur mobile, on l'agrandit un peu aussi, mais raisonnablement */
    }
    .logo-premium {
        top: 60px;
    }
}
/* --- RÉGLAGE SPÉCIAL POUR TOUTES LES PAGES CHAMBRES & RESTAURANT --- */

/* 1. On réduit le logo de force sur ces pages */
.page-interieure .logo-premium {
    top: 5px !important;
    transform: translateX(-50%) scale(0.35) !important; /* Logo miniature */
}

/* 2. On baisse le titre de la bannière pour qu'il ne soit pas sous la barre rouge */
.page-interieure .room-header-banner, 
.page-interieure .room-hero {
    margin-top: 70px !important; /* Aligné avec la hauteur de la navbar */
    height: 45vh !important;    /* Hauteur de bannière élégante */
}

/* 3. On centre le texte dans la bannière */
.page-interieure .header-overlay h1 {
    font-size: 3rem !important;
    margin-top: 20px;
}

/* 4. Réglage Mobile pour les chambres */
@media (max-width: 768px) {
    .page-interieure .logo-premium {
        top: 55px !important; /* Évite de cacher le menu burger sur mobile */
        transform: translateX(-50%) scale(0.25) !important;
    }
}
/* --- UNIFICATION DES TITRES DE BANNIÈRES EN ROUGE --- */

/* Cible le titre principal (H1) sur toutes les pages de chambres et restaurant */
.header-overlay h1, 
.room-header-banner h1 {
    color: #F9F7F5 !important; /* Rouge EuroJapan */
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    
    /* Ombre portée pour que le rouge reste lisible sur les photos */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7) !important;
    
    background: none !important;
    margin-bottom: 10px !important;
}

/* Cible le sous-titre (Gastronomie, Luxe & Confort, etc.) */
.header-overlay .subtitle, 
.room-header-banner .subtitle {
    color: #FFFFFF !important; /* On le laisse en blanc pour faire ressortir le rouge en dessous */
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Cible la ligne de séparation sous le titre */
.luxe-separator {
    background-color: #D4141C !important; /* La ligne devient rouge aussi */
    width: 80px !important;
    height: 3px !important;
    margin: 15px auto !important;
}
/* --- STYLE DES DRAPEAUX --- */
.lang-selector-flags {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 15px;
}

.flag-link img {
    width: 30px; /* Taille idéale */
    height: 20px;
    object-fit: cover;
    border-radius: 3px; /* Coins arrondis */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.flag-link:hover img {
    transform: scale(1.15);
    filter: brightness(1.2);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Cache les drapeaux dans le menu mobile pour plus de clarté si besoin */
@media (max-width: 768px) {
    .lang-selector-flags {
        justify-content: center;
        margin-top: 15px;
    }
}
/* --- SECTION HÉBERGEMENT VERSION FINALE --- */
.heb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

/* 1. La Carte */
.heb-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
    display: block;
    text-decoration: none;
    transition: transform 0.8s ease;
}

/* 2. L'Image avec EFFET PARALLAXE (Bouge au scroll) */
.heb-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* AJOUT DE L'EFFET DE MOUVEMENT AU DÉFILEMENT */
    background-attachment: fixed; 
    
    opacity: 0.85;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Note pour le mobile : Le background-attachment: fixed est souvent désactivé sur mobile. 
   On ajoute cette règle pour qu'il reste propre sur téléphone */
@media (max-width: 768px) {
    .heb-img {
        background-attachment: scroll; /* Revient au mode normal sur mobile pour éviter les bugs */
    }
}

/* 3. L'Overlay Texte */
.heb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
    z-index: 2;
    transition: transform 0.8s ease;
}

/* 4. Les Couleurs Gold et Gris */
.heb-tag {
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
}

.heb-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 10px;
    color: #d1d1d1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.heb-overlay p {
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.4;
}

/* --- LES EFFETS AU SURVOL (HOVER) --- */
.heb-card:hover .heb-img {
    transform: scale(1.1); /* Petit zoom en plus du mouvement de scroll */
    opacity: 1;
}

.heb-card:hover .heb-overlay {
    transform: translateY(-10px);
}

.heb-card::after {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(197, 160, 89, 0);
    transition: 0.8s ease;
    pointer-events: none;
    z-index: 3;
}

.heb-card:hover::after {
    border: 1px solid rgba(197, 160, 89, 0.3);
}

/* --- LA VILLA LARGE EN BAS --- */
.heb-grid a.heb-card:last-child {
    grid-column: 1 / -1;
    height: 500px;
}

@media (max-width: 768px) {
    .heb-grid a.heb-card:last-child {
        grid-column: auto;
        height: 450px;
    }
}
/* On force l'image à être prête pour le zoom */
.heb-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 1.2s ease-in-out !important; /* Animation de 1.2 secondes */
}

/* On force le zoom au survol */
.heb-card:hover .heb-img {
    transform: scale(1.2) !important; /* Zoom de 20% */
}

/* On s'assure que le texte reste lisible et en gris/gold */
.heb-overlay h3 {
    color: #d1d1d1 !important;
    font-family: 'Playfair Display', serif !important;
}

.heb-tag {
    color: #c5a059 !important; /* Ton Gold en dur si var() bug */
}
/* --- FORCE LE MODÈLE "HOME" SUR LA PAGE VILLA --- */
.room-hero-final {
    position: relative;
    width: 100%;
    height: 80vh; /* L'image prend 80% de l'écran */
    background: #000;
    margin-top: 0; 
    padding-top: 0;
    overflow: hidden;
    display: block;
}

/* L'image : On la force à monter tout en haut derrière la navbar */
.room-hero-final .heb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center 25% !important; /* Pour voir le haut de la pièce */
    opacity: 0.8;
    z-index: 1;
}

/* L'overlay : On copie exactement celui de tes cartes Home */
.room-hero-final .heb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Texte collé en bas */
    padding: 60px 8%; /* Marge à gauche pour l'élégance */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
    z-index: 2;
}

/* Style des écritures (Gris et Gold) */
.room-hero-final h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #d1d1d1 !important; /* Gris clair */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.room-subtitle-header {
    color: #a0a0a0 !important; /* Gris moyen */
    font-size: 1.1rem;
    margin-top: 10px;
}

/* Suppression de l'espace blanc si présent sur body */
.page-interieure {
    margin: 0;
    padding: 0;
}
/* --- AJUSTEMENT RESTAURANT --- */
.page-interieure .room-hero-final {
    height: 80vh !important; /* Image un peu moins haute pour voir la suite */
    margin-top: 0 !important;
    position: relative;
}

/* On s'assure que l'image remplit bien son conteneur */
.room-hero-final .heb-img {
    height: 100% !important;
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* NAVBAR : On force le passage au blanc quand la classe .scrolled est là */
.page-interieure .navbar.scrolled {
    background-color: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.page-interieure .navbar.scrolled .nav-links a {
    color: #333 !important; /* Liens noirs sur fond blanc */
}
/* --- CENTRAGE DU TITRE SUR L'IMAGE --- */
.heb-overlay {
    display: flex !important;         /* Active le mode flexible */
    flex-direction: column;           /* Aligne les éléments en colonne */
    justify-content: center;          /* Centre verticalement (haut/bas) */
    align-items: center;              /* Centre horizontalement (gauche/droite) */
    text-align: center;
    
    /* On s'assure qu'il prend toute la place de l'image */
    position: absolute;
    inset: 0; 
    background: rgba(0, 0, 0, 0.3);   /* Filtre sombre pour lire le texte */
}

.heb-overlay h1 {
    margin: 0;                        /* Supprime les marges par défaut */
    padding: 20px;
    width: 100%;                      /* Force le titre à occuper la largeur */
}
/* --- CHANGEMENT DU TEXTE GRIS EN GOLD --- */

/* Cible les descriptions sous les titres des chambres (ton cercle noir) */
.heb-overlay p, 
.room-card p,
.info-side p {
    color: #030303 !important; /* Le doré EuroJapan */
    font-weight: 500;          /* Un peu plus épais pour la lisibilité */
}

/* Cible aussi les petits textes de détails (lignes 619 et 805 de tes photos) */
.room-details .price, 
.am-item {
    color: #080808 !important;
}
/* =========================================
   SECTION CONFÉRENCE - LUXE CLAIRE (FIX)
   ========================================= */
.luxury-conference {
    background-color: #fcfcf9; /* Fond clair */
    padding: 100px 20px;
    color: #333;
    text-align: center;
    overflow: hidden;
}

/* État initial caché pour l'animation du script */
.luxury-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    background: transparent;
    perspective: 1000px;
}

/* État affiché (déclenché par le JS) */
.luxury-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.luxury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.card-inner {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    transition: all 0.5s ease;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.card-inner:hover {
    border-color: #D4AF37;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.15);
}

.card-img-container {
    height: 250px;
    overflow: hidden;
}

.card-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
}

.card-inner:hover .card-bg {
    transform: scale(1.1);
}

.card-content {
    padding: 30px;
    text-align: left;
}

.capacity {
    display: block;
    font-size: 0.75rem;
    color: #b38728;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.card-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.card-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-luxury {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #D4AF37;
    color: #b38728;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-luxury:hover {
    background: #D4AF37;
    color: #fff;
}
.link-arrow {
    text-decoration: none;
    color: #b38728;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 10px;
}

.link-arrow i {
    font-size: 0.7rem;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.link-arrow:hover i {
    transform: translateX(5px); /* La petite flèche bouge au survol */
}
.section-intro {
    max-width: 850px; /* On élargit un peu pour que la phrase respire */
    margin: 0 auto 60px;
    font-family: 'Montserrat', sans-serif;
    
    /* Modifications demandées */
    font-size: 1.2rem;       /* Plus grand (environ 19-20px) */
    font-weight: 600;        /* Plus gras (Semi-bold) */
    
    /* Touches de finition Luxe */
    color: #444;             /* Un gris très foncé, plus doux que le noir pur */
    line-height: 1.8;        /* Plus d'espace entre les lignes */
    letter-spacing: 0.5px;   /* Un léger espacement pour le prestige */
    text-align: center;
}
/* 1. Le container */
.heb-card {
    overflow: hidden;
    position: relative;
}

/* 2. L'image de base (doit correspondre au scale du JS pour éviter le saut) */
.heb-img {
    transition: transform 0.6s ease-out !important; /* Transition fluide */
    transform: scale(1.2); /* On part du même niveau que le JS */
}

/* 3. Le zoom au survol (doit être plus grand que 1.2) */
.heb-card:hover .heb-img {
    /* On augmente le scale à 1.35 pour un vrai effet de zoom */
    /* On utilise scale(1.35) seul, le JS continuera d'appliquer le translateY par dessus */
    transform: scale(1.35) !important; 
}
/* --- LA VILLA SUR TOUTE LA LARGEUR (FIX IMAGE) --- */
.villa-full-width {
    grid-column: 1 / -1; 
    margin-top: 20px;
    width: 100%;
}

@media (min-width: 1024px) {
    .villa-full-width .card-inner {
        display: flex; 
        align-items: stretch; /* Force la même hauteur pour l'image et le texte */
        min-height: 450px;
        background: #fff; /* Fond blanc au cas où */
    }

    /* FIX : On force le lien et le container à occuper tout l'espace de gauche */
    .villa-full-width .card-img-link {
        flex: 2; 
        display: flex !important;
        flex-direction: column;
    }

    .villa-full-width .card-img-container {
        flex: 1; /* Remplit toute la hauteur du lien */
        position: relative;
        overflow: hidden;
    }

    .villa-full-width .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* L'image est maintenant forcée de remplir le container */
        background-size: cover !important;
        background-position: center center !important;
    }

    .villa-full-width .card-content {
        flex: 1; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 50px;
    }
}
/* --- EFFET PARALLAXE UNIFIÉ --- */

/* On donne une marge de manoeuvre à l'image pour qu'elle puisse bouger sans montrer de bords blancs */
.luxury-card .card-bg {
    height: 120% !important; /* L'image est plus haute que son cadre */
    top: -10%; /* On la centre verticalement */
    transition: transform 0.1s linear !important; /* Très réactif au scroll */
    will-change: transform;
}

/* On s'assure que le container coupe bien ce qui dépasse */
.card-img-container {
    overflow: hidden !important;
    position: relative;
}
/* Unifie le comportement des images */
.heb-img, .card-bg {
    /* Le scale est géré ici, le translateY est géré par le JS via la variable */
    transform: scale(1.2) translateY(var(--scroll-y, 0px)) !important;
    transition: transform 0.6s ease-out !important;
}

/* Le zoom au survol s'ajoute maintenant au mouvement de scroll */
.heb-card:hover .heb-img, .card-inner:hover .card-bg {
    transform: scale(1.35) translateY(var(--scroll-y, 0px)) !important;
}

/* Prépare le cadre de conférence pour la 3D */
.card-inner {
    transition: transform 0.2s ease-out !important;
    transform-style: preserve-3d !important;
}
/* --- SECTION BIEN-ÊTRE LUXE 3D --- */
.wellness-section {
    padding: 120px 10%;
    background-color: var(--soft-white);
    position: relative;
    overflow: hidden;
}

.wellness-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Le rectangle doré en arrière-plan qui crée la 3D */
.wellness-bg-accent {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 400px;
    height: 500px;
    background: linear-gradient(135deg, #c5a059 0%, #a68545 100%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: 1;
}

.wellness-content {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

/* Bloc Image 3D */
.wellness-image-box {
    flex: 1.2;
    position: relative;
    perspective: 1500px;
}

.pool-main-img {
    width: 100%;
    height: 550px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.15);
    
    /* On part d'une position neutre pour éviter le saut */
    transform: rotateY(0deg) rotateX(0deg); 
    
    transition: transform 0.4s ease-out; /* Transition douce */
    will-change: transform;
    border: 8px solid white;
}

.wellness-image-box:hover .pool-main-img {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
    box-shadow: 10px 10px 40px rgba(0,0,0,0.2);
}

/* Petit badge flottant sur l'image */
.pool-badge {
    position: absolute;
    top: 40px;
    right: -20px;
    background: var(--main-red);
    color: white;
    padding: 15px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    box-shadow: 0 10px 20px rgba(212, 20, 28, 0.3);
    z-index: 3;
    transform: translateZ(50px); /* Le fait sortir de l'image en 3D */
}

/* Texte */
.wellness-text {
    flex: 0.8;
}

.wellness-text h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 25px;
}

.gold-text {
    color: var(--gold);
    font-style: italic;
    font-family: 'Playfair Display', serif;
}

.wellness-amenities {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.wellness-amenities li {
    margin-bottom: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wellness-amenities li i {
    color: var(--main-red);
}

/* Adaptation Mobile */
@media (max-width: 992px) {
    /* On cache le rectangle doré qui dépasse de l'écran sur mobile */
    .wellness-bg-accent {
        display: none;
    }

    .wellness-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 0 10px; /* Ajoute une petite marge de sécurité sur les côtés */
    }

    .wellness-image-box {
        width: 100%;
        perspective: none; /* Désactive la 3D pour éviter les bugs d'affichage mobile */
    }

    .pool-main-img {
        height: 300px; /* Un peu plus petit pour mieux voir le texte dessous */
        transform: none !important;
        border-width: 4px; /* Bordure plus fine sur petit écran */
        box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
    }

    /* On repositionne le badge pour qu'il ne sorte pas de l'écran */
    .pool-badge {
        right: 10px;
        top: 20px;
        padding: 10px 20px;
        font-size: 0.7rem;
        transform: none; /* Désactive l'effet translateZ */
    }

    .wellness-text {
        width: 100%;
    }

    .wellness-text h2 {
        font-size: 2.2rem; /* Titre plus adapté aux téléphones */
        margin-bottom: 15px;
    }

    .wellness-amenities {
        display: inline-block; /* Pour pouvoir centrer la liste */
        text-align: left; /* Mais garder le texte aligné à gauche à l'intérieur */
        margin-top: 20px;
    }

    .wellness-amenities li {
        justify-content: flex-start; /* Aligne les icônes et le texte proprement */
    }
}
/* Correction pour centrer 2 cartes au lieu de 3 */
.force-center-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    grid-template-columns: none !important; /* On annule le grid */
    gap: 40px !important;
}

.force-center-grid .luxury-card {
    flex: 0 1 350px !important; /* Largeur fixe pour les deux cartes */
    opacity: 1 !important;     /* Force l'affichage au cas où le JS bug */
    transform: none !important;
}
/* --- Style pour mobile (Téléphones) --- */
@media (max-width: 768px) {
    .booking-section {
        padding: 20px 10px; /* Réduit les marges extérieures */
    }

    .booking-form {
        padding: 20px; /* Réduit l'espace interne du formulaire */
        width: 95%;   /* Prend presque toute la largeur de l'écran */
        margin: 0 auto;
    }

    /* Force tous les groupes de champs à prendre 100% de la largeur */
    .booking-form form {
        display: flex;
        flex-direction: column; /* Aligne tout verticalement */
    }

    .form-group {
        width: 100% !important; /* Force la largeur totale */
        margin-bottom: 15px;
    }

    /* Ajuste la taille des textes pour mobile */
    .booking-form h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Rend le bouton plus gros et facile à cliquer avec le pouce */
    .btn-final {
        width: 100%;
        padding: 15px;
        font-size: 1rem;
    }

    /* Espace mieux les cases à cocher */
    .checkbox-group {
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
    }
    
    .checkbox-group input {
        margin-top: 5px; /* Aligne la coche avec le texte */
    }
}
@media (max-width: 768px) {
    /* On aligne les éléments du haut */
    .navbar {
        padding: 5px 10px !important;
    }

    /* Conteneur des drapeaux et du bouton */
    .nav-extras {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .btn-reserve {
        font-size: 11px !important; /* On réduit la police */
        padding: 6px 8px !important; /* On réduit la taille du bouton */
        min-width: fit-content !important;
    }

    .language-switcher img {
        width: 18px !important; /* Drapeaux plus petits pour gagner de la place */
    }
}
@media (max-width: 768px) {
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* On force le logo à se mettre AU DESSUS du texte, pas par-dessus */
    .hero-content img {
        position: relative !important;
        width: 80px !important; /* Plus petit sur mobile */
        margin-bottom: 20px !important;
        right: auto !important;
        top: auto !important;
    }
}