/* ================================================================
   L'Eclipse — Fouras-les-Bains
   Styles personnalisés (complète Tailwind CSS)
================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Hero parallax ─────────────────────────────────────────────── */
.hero-section {
    background:
        linear-gradient(155deg, rgba(15,52,96,.72) 0%, rgba(15,52,96,.3) 45%, rgba(15,52,96,.78) 100%),
        url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    background-attachment: fixed;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
#navbar { transition: background .35s ease, box-shadow .35s ease; }
#navbar.solid {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 30px rgba(0,0,0,.09);
}
#navbar.solid .n-link      { color: #374151; }
#navbar.solid .n-link:hover { color: #f97316; }
#navbar.solid .n-logo      { color: #0f3460; }
#navbar.solid .n-burger    { color: #0f3460; }

/* ── Scroll-reveal ──────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .75s ease, transform .75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ── Gallery grid ───────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 240px 240px;
    gap: 10px;
}
.g-main { grid-row: 1 / 3; }

@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 160px 160px;
    }
    .g-main { grid-column: 1 / 3; grid-row: 1; }
}

.g-cell {
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
}
.g-cell img            { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-cell:hover img      { transform: scale(1.07); }

.g-overlay {
    position: absolute; inset: 0;
    background: rgba(15,52,96,0);
    display: flex; align-items: center; justify-content: center;
    transition: background .3s ease;
}
.g-cell:hover .g-overlay          { background: rgba(15,52,96,.28); }
.g-overlay svg                     { opacity: 0; transform: scale(.7); transition: all .3s ease; color: white; }
.g-cell:hover .g-overlay svg      { opacity: 1; transform: scale(1); }

/* ── Lightbox ───────────────────────────────────────────────────── */
#lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.93);
    align-items: center; justify-content: center;
    padding: 20px;
}
#lightbox.open { display: flex; }
#lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }

/* ── Price cards ────────────────────────────────────────────────── */
.price-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    border: 2px solid #e5e7eb;
}
.price-card:hover    { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(15,52,96,.13); border-color: #0f3460; }
.price-card.featured { border-color: #0f3460; box-shadow: 0 24px 60px rgba(15,52,96,.13); }

/* ── Counter buttons (simulateur voyageurs) ─────────────────────── */
.cnt-btn {
    width: 34px; height: 34px;
    border-radius: 50%; border: 1.5px solid #d1d5db;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s;
    background: white; color: #374151;
    user-select: none; font-size: 20px; line-height: 1;
    flex-shrink: 0;
}
.cnt-btn:hover:not([disabled]) { border-color: #0f3460; color: #0f3460; }
.cnt-btn[disabled]             { opacity: .3; cursor: not-allowed; }

/* ── Flatpickr overrides ────────────────────────────────────────── */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
    border: none !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange          { background: #0f3460 !important; border-color: #0f3460 !important; }
.flatpickr-day.inRange           { background: rgba(15,52,96,.1) !important; border-color: rgba(15,52,96,.1) !important; color: #0f3460 !important; }
.flatpickr-day.today             { border-color: #f97316 !important; }
.flatpickr-day:hover:not(.flatpickr-disabled) { background: rgba(15,52,96,.08) !important; }

/* ── Amenity cards ──────────────────────────────────────────────── */
.amen-card { transition: box-shadow .25s ease, transform .25s ease; }
.amen-card:hover { box-shadow: 0 8px 30px rgba(15,52,96,.1); transform: translateY(-3px); }

/* ── Scroll-to-top button ───────────────────────────────────────── */
#back-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 40;
    width: 44px; height: 44px;
    background: #0f3460; color: white;
    border-radius: 50%; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(15,52,96,.35);
    transition: background .25s, transform .25s;
}
#back-top.show  { display: flex; }
#back-top:hover { background: #f97316; transform: translateY(-3px); }

/* ── WhatsApp floating button ───────────────────────────────────── */
#wa-btn {
    position: fixed; left: 20px; bottom: 20px; z-index: 40;
    width: 52px; height: 52px;
    background: #25d366; color: white;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,.4);
    transition: transform .25s, box-shadow .25s;
}
#wa-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.5); }

/* ── Map container ──────────────────────────────────────────────── */
.map-frame { border-radius: 16px; overflow: hidden; }