/* Global Styles - Luxury Vintage Magazine */
:root {
    --text-primary: #1A1A1A;
    /* Charcoal Black */
    --text-accent: #3D3229;
    /* Warm Driftwood Brown */
    --bg-color: #FAF8F5;
    /* Warm Sand White */
    --line-color: #C9B99A;
    /* Sandy Gold */
    --white: #FFFFFF;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Raleway', sans-serif;

    --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-primary);
    background-color: var(--bg-color);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    letter-spacing: 0.5px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Subtle vintage tint */
    filter: sepia(10%) contrast(1.05);
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-accent);
}

.italic {
    font-style: italic;
    font-weight: 300;
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.section {
    padding: 120px 0;
}

.text-center {
    text-align: center;
}

/* Section Titles - Minimalist Luxury */
.section-title {
    margin-bottom: 80px;
    text-align: center;
    position: relative;
}

.section-title h2 {
    font-size: 3.5rem;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.section-title p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #888;
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #C9B99A;
    margin: 25px auto 0;
}

/* Buttons - Chic Rounded Style */
.btn-primary {
    display: inline-block;
    background-color: #C9B99A;
    color: #2C2C2C;
    padding: 14px 45px;
    border: 1px solid #C9B99A;
    border-radius: 30px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
    background-color: #b8a688;
    color: #2C2C2C;
    border-color: #b8a688;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Navbar - Transparent & Elegant */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(249, 248, 244, 0.95);
    /* Matches bg-color */
    backdrop-filter: blur(5px);
    z-index: 1000;
    height: 90px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: var(--text-accent);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links li a {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 5px;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 50%;
    background-color: var(--text-accent);
    transition: var(--transition);
    transform: translateX(-50%);
}

.nav-links li a:hover::after {
    width: 100%;
}

.btn-nav {
    border: 1px solid var(--text-accent);
    padding: 10px 25px;
}

.btn-nav:hover {
    background-color: var(--text-accent);
    color: var(--white);
}

/* Hero Section - Full Bleed Editorial */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/Photo%20Claouey/Header/vue-bassin-home.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    /* Lighter overlay to let photo shine */
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    margin-bottom: 15px;
}

.hero-line {
    width: 50px;
    height: 1px;
    background-color: #C9B99A;
    margin: 0 auto 15px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    color: var(--white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
    letter-spacing: 2px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
}

.hero h1 span {
    display: block;
    font-size: 2rem;
    font-family: var(--font-body);
    font-weight: 200;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 0.9;
}

.hero p {
    font-size: 1.4rem;
    font-family: var(--font-heading);
    font-style: italic;
    margin-bottom: 50px;
    opacity: 0.9;
}

/* Intro Section - Magazine Spread */
.intro.section {
    background-color: var(--white);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.intro-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
}

.intro-text .lead {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
    font-family: var(--font-heading);
    font-style: italic;
    border-left: 3px solid var(--line-color);
    padding-left: 20px;
}

.intro-image {
    position: relative;
}

.intro-image img {
    width: 100%;
    box-shadow: 20px 20px 0 #F2F2F2;
    /* Subtle offset */
}

/* Detailed Listing - Clean & Airy */
.details.section {
    background-color: var(--bg-color);
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    width: 100%;
}

.full-width {
    grid-column: 1 / -1;
}

.subsection-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--text-accent);
    margin-bottom: 40px;
    margin-top: 20px;
    position: relative;
    display: inline-block;
}

.subsection-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--line-color);
    margin: 10px auto 0;
}

.detail-card {
    background: transparent;
    transition: transform 0.5s ease;
    min-width: 0;
    /* Prevents overflow in grid */
    max-width: 100%;
}

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

.detail-card .card-img {
    height: 350px;
    overflow: hidden;
    margin-bottom: 30px;
}

.detail-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensure full image is visible, no cropping */
    transition: transform 1s ease;
    background-color: #f9f9f9;
    /* Background for empty space */
}

.detail-card:hover .card-img img {
    transform: scale(1.05);
}

.card-content h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    padding-bottom: 10px;
}

.card-content ul {
    margin-top: 15px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.card-content li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.card-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--line-color);
}

/* Gallery - Horizontal Scroll for Sections */
.gallery-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    scroll-snap-type: x mandatory;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    max-width: 100%;
}

.gallery-scroll::-webkit-scrollbar {
    height: 8px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background-color: var(--line-color);
    border-radius: 4px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background-color: #eee;
}

.gallery-scroll img {
    height: 400px;
    /* Fixed height for uniformity */
    width: auto;
    /* Width adjusts to maintain aspect ratio */
    max-width: none;
    /* Prevent constraint */
    object-fit: contain;
    /* Ensure full image is visible */
    border-radius: 4px;
    scroll-snap-align: start;
    flex-shrink: 0;
    /* Prevent squishing */
    background-color: #f0f0f0;
    /* Placeholder background if aspect ratio leaves gaps */
}

/* Specific adjust for the cards that are NOT full width but have galleries */
.detail-card .gallery-scroll img {
    height: 300px;
    /* Slightly smaller for column cards */
}

/* Full width cards can have larger images */
.full-width .gallery-scroll img {
    height: 450px;
}

/* Gallery - Minimal Grid (Footer Gallery) */
.gallery.section {
    background-color: var(--white);
    padding-bottom: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
    opacity: 0.9;
}

.gallery-item:hover img {
    transform: scale(1.03);
    opacity: 1;
}

/* Amenities - Serene List */
.amenities.section {
    background-color: #3D3229;
    /* Warm Driftwood Background */
    color: var(--bg-color);
    padding: 100px 0;
}

.amenities .section-title h2 {
    color: var(--bg-color);
}

.amenities .section-title p {
    color: rgba(255, 255, 255, 0.6);
}

.amenities-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.amenity-item:hover {
    opacity: 1;
}

.amenity-item i {
    font-size: 1.5rem;
    color: var(--line-color);
}

.amenity-item span {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Booking - Form Styling */
.booking.section {
    background-color: var(--bg-color);
    padding: 100px 0;
}

.booking-container {
    max-width: 600px;
    margin: 0 auto;
}

.booking-card {
    background: var(--white);
    padding: 60px;
    border: 1px solid #eee;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
    text-align: center;
}

.booking-card h2 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.booking-card .subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    color: #888;
    margin-bottom: 40px;
}

.form-group {
    margin-bottom: 25px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-accent);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--line-color);
    background: var(--white);
}

.price-quote {
    background: #F4F4F4;
    padding: 20px;
    margin: 30px 0;
    border-left: 3px solid var(--line-color);
}

.location-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.location-gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* Landscape shots usually look better covered, but user asked for "entier" everywhere? Let's stick to cover for mood shots or contain if strict. Given "photos en entier", let's use contain or just auto height. Let's use object-fit: cover for these as they are likely atmospheric, but if user insists on "entier" everywhere, maybe contain is safer. However, atmospheric shots often look bad with whitespace. I will use object-fit: cover for these grid items as they are supplementary, but if the user complains I will switch. Wait, user said "vraiment qu'on voit les photos en entier". I should probably respect that. */
    object-fit: contain;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.hidden {
    display: none;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.price-row.total {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
    font-weight: 600;
    color: var(--text-accent);
    font-size: 1.1rem;
}

.small-note {
    font-size: 0.7rem;
    color: #999;
    margin-top: 10px;
    font-style: italic;
}

.contact-direct {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
    color: #666;
}

.contact-direct a {
    color: var(--text-accent);
    font-weight: 500;
    margin: 0 5px;
}

/* Footer */
footer {
    background-color: var(--bg-color);
    padding: 40px 0;
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: #888;
}

/* Language Switcher */
.lang-switcher {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 999;
    display: flex;
    gap: 5px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 5px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.lang-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 25px;
    transition: var(--transition);
    color: var(--text-primary);
}

.lang-btn.active {
    background: var(--text-accent);
    color: var(--white);
}

.lang-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

/* Burger Menu */
.burger {
    display: none;
    cursor: pointer;
    z-index: 1001;
}

.burger div {
    width: 25px;
    height: 2px;
    background-color: var(--text-primary);
    margin: 5px 0;
    transition: var(--transition);
}

/* Responsive - Tablet (1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .section {
        padding: 80px 0;
    }

    .section-title h2 {
        font-size: 2.8rem;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .intro-grid {
        gap: 40px;
    }

    .intro-text h2 {
        font-size: 2.5rem;
    }

    .details-grid {
        gap: 40px;
    }

    .amenities-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .full-width .gallery-scroll img {
        height: 350px;
    }

    .gallery-scroll img {
        height: 300px;
    }

    .booking-card {
        padding: 40px 30px;
    }

    .booking-card h2 {
        font-size: 2.5rem;
    }

    .lang-switcher {
        top: 100px;
        right: 15px;
    }
}

/* Responsive - Mobile (768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 60px 0;
    }

    /* Navbar Mobile */
    .burger {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: right 0.4s ease, visibility 0.4s;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
        visibility: hidden;
    }

    .nav-links.active {
        right: 0;
        visibility: visible;
    }

    .burger.active .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .burger.active .line2 {
        opacity: 0;
    }

    .burger.active .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Hero Mobile */
    .hero h1 {
        font-size: 2rem;
    }

    .hero h1 span {
        font-size: 1rem;
        letter-spacing: 3px;
    }

    .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    /* Intro Mobile */
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .intro-text h2 {
        font-size: 2rem;
    }

    .intro-image img {
        box-shadow: 10px 10px 0 #F2F2F2;
    }

    /* Section Titles */
    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    .subsection-title {
        font-size: 1.8rem;
    }

    /* Details Grid Mobile */
    .details-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .detail-card .card-img {
        height: 250px;
    }

    .card-content h3 {
        font-size: 1.6rem;
    }

    /* Gallery Scroll Mobile */
    .gallery-scroll img {
        height: 250px;
    }

    .full-width .gallery-scroll img {
        height: 280px;
    }

    .gallery-scroll {
        gap: 10px;
    }

    /* Amenities Mobile */
    .amenities-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .amenities .section-title {
        margin-bottom: 40px;
    }

    /* Location Mobile */
    .location-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .location-gallery-grid img {
        height: 150px;
    }

    /* Booking Mobile */
    .booking-card {
        padding: 30px 20px;
    }

    .booking-card h2 {
        font-size: 2rem;
    }

    .contact-direct {
        font-size: 0.75rem;
    }

    .contact-direct a {
        display: block;
        margin: 8px 0;
    }

    /* Features Grid Mobile */
    .features-grid {
        flex-direction: column;
        gap: 15px;
    }

    /* Lang Switcher Mobile */
    .lang-switcher {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
    }
}

/* Responsive - Small Mobile (480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .section {
        padding: 50px 0;
    }

    .hero {
        height: 90vh;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .hero h1 span {
        font-size: 0.85rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .btn-primary {
        padding: 12px 30px;
        font-size: 0.7rem;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    .subsection-title {
        font-size: 1.5rem;
    }

    .intro-text h2 {
        font-size: 1.7rem;
    }

    .intro-text .lead {
        font-size: 1rem;
    }

    .gallery-scroll img {
        height: 200px;
    }

    .full-width .gallery-scroll img {
        height: 220px;
    }

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

    .amenity-item i {
        font-size: 1.2rem;
    }

    .amenity-item {
        font-size: 0.8rem;
    }

    .location-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .booking-card h2 {
        font-size: 1.8rem;
    }

    .navbar {
        height: 70px;
    }

    .logo {
        font-size: 1.4rem;
    }

    .lang-switcher {
        bottom: 15px;
    }

    .lang-btn {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    z-index: 2001;
    line-height: 1;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--line-color);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--line-color);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-caption {
    color: #fff;
    margin-top: 15px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
    opacity: 0.8;
}

/* Mobile Adjustments for Lightbox */
@media (max-width: 768px) {

    .lightbox-prev,
    .lightbox-next {
        display: none;
        /* Use swipe on mobile */
    }

    .lightbox-img {
        max-height: 80vh;
    }
}

/* Mobile App Optimization */