/* ═══════════════════════════════════════════════════════════════
   RIAD DAR MAMOUNI — Density Fix v3.7.2
   Élimination des espaces vides massifs
   "Sections must flow into each other, no template-like gaps"
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. FIX CRITIQUE : reveal animations
   Si IntersectionObserver ne fire pas, les éléments restent
   à opacity:0 et créent des vides énormes. Fallback : tout visible.
─────────────────────────────────────────────────────────────── */
.lux-active .lux-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.6s var(--lux-ease-out), transform 0.6s var(--lux-ease-out);
}
/* Animation au scroll = uniquement bonus, jamais bloquant */
.lux-active .lux-reveal:not(.is-visible) {
    /* déjà visible par défaut */
}

/* ─────────────────────────────────────────────────────────────
   2. COMPRESSION RADICALE DES PADDINGS DE SECTIONS
─────────────────────────────────────────────────────────────── */
.lux-active .lux-section {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-section__header {
    margin-bottom: 36px !important;
}
.lux-active .lux-features {
    padding: 50px var(--lux-gutter) 30px !important;
}
.lux-active .lux-quick-features {
    padding: 60px var(--lux-gutter) 50px !important;
}
.lux-active .lux-experiences {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-testimonials {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-cta {
    padding: 80px var(--lux-gutter) !important;
}
.lux-active .lux-explore-marrakech {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-map-section {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-instagram-strip {
    padding: 50px var(--lux-gutter) 40px !important;
}

/* Reduire la marge entre les sections (transitions naturelles) */
.lux-active .lux-section + .lux-section {
    border-top: none !important;
}

/* ─────────────────────────────────────────────────────────────
   3. FIX HEADERS DE SECTION — marge plus serrée
─────────────────────────────────────────────────────────────── */
.lux-active .lux-section__title {
    font-size: clamp(32px, 4vw, 48px) !important;
    margin-bottom: 14px !important;
}
.lux-active .lux-section__lead {
    font-size: 15px !important;
    margin-bottom: 0 !important;
}
.lux-active .lux-section__header {
    max-width: 600px !important;
}
.lux-active .lux-divider {
    margin: 16px auto !important;
}

/* Eyebrows plus compacts */
.lux-active .lux-eyebrow {
    margin-bottom: 12px !important;
    font-size: 11px !important;
}

/* ─────────────────────────────────────────────────────────────
   4. ROOMS SHOWCASE — Section problématique #2
   Fond sombre avec énorme vide
─────────────────────────────────────────────────────────────── */
.lux-active .lux-section--rooms {
    padding: 70px var(--lux-gutter) !important;
}
.lux-active .lux-section--rooms .lux-section__header {
    margin-bottom: 40px !important;
}
.lux-active .lux-section--rooms + section {
    /* La section suivante commence directement */
    margin-top: 0;
}

/* Gap réduit entre cards rooms */
.lux-active .lux-rooms-grid {
    gap: 24px !important;
}
.lux-active .lux-room-card__body {
    padding: 22px 24px 20px !important;
}
.lux-active .lux-room-card__title {
    font-size: 22px !important;
    margin-bottom: 10px !important;
}
.lux-active .lux-room-card__meta {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    font-size: 11px !important;
}
.lux-active .lux-room-card__desc {
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

/* Bouton "View all rooms" plus proche */
.lux-active .lux-section--rooms div[style*="margin-top:60px"] {
    margin-top: 32px !important;
}

/* ─────────────────────────────────────────────────────────────
   5. EXPERIENCES — Section problématique #3
─────────────────────────────────────────────────────────────── */
.lux-active .lux-experiences__grid {
    gap: 18px !important;
}
.lux-active .lux-experience-card {
    aspect-ratio: 4 / 5 !important;
}
.lux-active .lux-experience-card__content {
    padding: 22px !important;
}
.lux-active .lux-experience-card__title {
    font-size: 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   6. EXPLORE MARRAKECH — Section problématique #4
─────────────────────────────────────────────────────────────── */
.lux-active .lux-explore-marrakech__grid {
    margin-top: 32px !important;
    gap: 18px !important;
}
.lux-active .lux-explore-card {
    aspect-ratio: 4 / 5 !important;
}
.lux-active .lux-explore-card--big {
    aspect-ratio: 4 / 5 !important;
    grid-row: span 2 !important;
}
.lux-active .lux-explore-card__body {
    padding: 22px !important;
}
.lux-active .lux-explore-card__title {
    font-size: 19px !important;
}
.lux-active .lux-explore-card--big .lux-explore-card__title {
    font-size: 26px !important;
}
.lux-active .lux-explore-marrakech div[style*="margin-top:50px"] {
    margin-top: 32px !important;
}

/* ─────────────────────────────────────────────────────────────
   7. REVIEWS PLATFORMS — Section problématique #5
   Vide énorme entre les scores et les cards
─────────────────────────────────────────────────────────────── */
.lux-active .lux-reviews-platforms {
    gap: 40px !important;
    margin-bottom: 32px !important;
    padding: 20px 30px;
    background: rgba(251, 246, 236, 0.5);
    border-radius: var(--lux-radius-lg);
    border: 1px solid rgba(201, 163, 78, 0.15);
    max-width: 900px;
    margin: 0 auto 32px !important;
}
.lux-active .lux-review-platform__score {
    font-size: 28px !important;
}
.lux-active .lux-reviews-grid {
    gap: 20px !important;
    margin-top: 24px !important;
}
.lux-active .lux-review-card {
    padding: 22px !important;
}
.lux-active .lux-review-card__quote {
    font-size: 15px !important;
    margin-bottom: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   8. CTA + MAP + INSTAGRAM — Compression finale
   La 6e capture montrait un énorme vide après CTA
─────────────────────────────────────────────────────────────── */
.lux-active .lux-cta {
    padding: 100px var(--lux-gutter) !important;
}
.lux-active .lux-cta h2 {
    font-size: clamp(40px, 5vw, 64px) !important;
    margin-bottom: 16px !important;
}
.lux-active .lux-cta p {
    margin-bottom: 24px !important;
    font-size: 15px !important;
}

/* Map section — supprimer le grand vide */
.lux-active .lux-map-section {
    padding: 60px var(--lux-gutter) !important;
}
.lux-active .lux-map-section__inner {
    gap: 40px !important;
}
.lux-active .lux-map-frame {
    aspect-ratio: 4 / 3 !important;
}

/* Instagram strip plus compact */
.lux-active .lux-instagram-strip h3 {
    font-size: 28px !important;
    margin-bottom: 6px !important;
}
.lux-active .lux-instagram-strip p {
    margin-bottom: 28px !important;
}
.lux-active .lux-instagram-grid {
    gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   9. FOOTER — Plus compact
─────────────────────────────────────────────────────────────── */
.lux-active .lux-footer {
    padding: 60px var(--lux-gutter) 24px !important;
}
.lux-active .lux-footer__inner {
    gap: 40px !important;
    margin-bottom: 40px !important;
}

/* ─────────────────────────────────────────────────────────────
   10. NAVBAR FLOTTANTE PREMIUM (style Airbnb Luxe / Aman)
   Capsule arrondie + glassmorphism + margin top
─────────────────────────────────────────────────────────────── */
.lux-active .lux-nav {
    padding: 16px var(--lux-gutter) !important;
}
.lux-active .lux-nav__inner {
    background: rgba(20, 12, 8, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(248, 245, 240, 0.12);
    /* v3.8.2 : rayon léger (architectural), pas de pilule. Override final dans polish-v3.8.0.css */
    border-radius: 14px;
    padding: 12px 24px;
    max-width: 1320px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.4s var(--lux-ease);
}
.lux-active .lux-nav.is-scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    padding: 16px var(--lux-gutter) !important;
    box-shadow: none !important;
}
.lux-active .lux-nav.is-scrolled .lux-nav__inner {
    background: rgba(251, 246, 236, 0.92);
    border-color: rgba(43, 43, 43, 0.08);
    box-shadow: 0 8px 32px rgba(43, 43, 43, 0.08);
}
.lux-active .lux-nav.is-scrolled .lux-nav__menu a,
.lux-active .lux-nav.is-scrolled .lux-nav__lang,
.lux-active .lux-nav.is-scrolled .lux-nav__logo-text {
    color: var(--lux-charcoal) !important;
}

/* Réduire la taille du logo dans la capsule */
.lux-active .lux-nav__logo-mark {
    width: 36px !important;
    height: 36px !important;
}
.lux-active .lux-nav__logo-title {
    font-size: 16px !important;
}
.lux-active .lux-nav__logo-eyebrow,
.lux-active .lux-nav__logo-sub {
    font-size: 8px !important;
}
.lux-active .lux-nav__menu {
    gap: 24px !important;
}
.lux-active .lux-nav__menu a {
    font-size: 10px !important;
}
.lux-active .lux-nav .lux-btn--primary {
    padding: 10px 22px !important;
    font-size: 10px !important;
}

@media (max-width: 1100px) {
    .lux-active .lux-nav__inner {
        border-radius: var(--lux-radius-md) !important;
        padding: 10px 20px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   11. HERO — Plus dense, transition immédiate avec la suite
─────────────────────────────────────────────────────────────── */
.lux-active .lux-hero {
    min-height: 600px !important;
    height: 88vh !important;
}
.lux-active .lux-hero__title {
    font-size: clamp(44px, 6vw, 80px) !important;
    margin-bottom: 16px !important;
}
.lux-active .lux-hero__lead {
    margin-bottom: 32px !important;
}

/* La transition zellige en bas du hero — réduire sa hauteur */
.lux-active .lux-hero::after {
    height: 60px !important;
}

/* Booking widget — chevauchement plus important */
.lux-active .lux-booking-widget {
    margin-top: -40px !important;
    max-width: 1100px !important;
}
.lux-active .lux-booking-widget__field {
    padding: 16px 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   12. SCROLL REVEAL FALLBACK
   Forcer l'apparition même si l'observer plante
─────────────────────────────────────────────────────────────── */
@keyframes luxAutoReveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lux-active .lux-reveal {
    animation: luxAutoReveal 0.6s var(--lux-ease-out) forwards;
}

/* ─────────────────────────────────────────────────────────────
   13. MOBILE — Densité encore plus poussée
─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lux-active .lux-section,
    .lux-active .lux-features,
    .lux-active .lux-quick-features,
    .lux-active .lux-experiences,
    .lux-active .lux-testimonials,
    .lux-active .lux-explore-marrakech,
    .lux-active .lux-map-section,
    .lux-active .lux-instagram-strip {
        padding: 40px 20px !important;
    }
    .lux-active .lux-section__title {
        font-size: 28px !important;
    }
    .lux-active .lux-section__header {
        margin-bottom: 24px !important;
    }
    .lux-active .lux-cta {
        padding: 60px 20px !important;
    }
    .lux-active .lux-cta h2 {
        font-size: 32px !important;
    }
    .lux-active .lux-reviews-platforms {
        gap: 20px !important;
        padding: 16px;
    }
    .lux-active .lux-review-platform__score {
        font-size: 22px !important;
    }
}