/* ═══════════════════════════════════════════════════════════════
   RIAD DAR MAMOUNI — Polish v3.8.0
   Corrections post v3.7.3 (directeur artistique briefing)
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. ICÔNES LUCIDE UNIFIÉES (cohérence globale)
─────────────────────────────────────────────────────────────── */
.lux-active .lux-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Quick features → icônes Lucide or au lieu d'emojis */
.lux-active .lux-quick-feature__icon {
    color: var(--lux-gold) !important;
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 14px !important;
    font-size: 0 !important; /* hide emoji fallback */
    display: grid;
    place-items: center;
}
.lux-active .lux-quick-feature__icon .lux-icon {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   2. NAVBAR ARCHITECTURALE (rayon léger, pas de pilule)
   v3.8.2 : retrait de la forme capsule (28px → 14px)
─────────────────────────────────────────────────────────────── */
.lux-active .lux-nav {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 20px 0 0 !important;
    border-bottom: none !important;
}
.lux-active .lux-nav__inner {
    background: rgba(20, 12, 8, 0.55) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    border: 1px solid rgba(248, 245, 240, 0.14) !important;
    border-radius: 14px !important;     /* v3.8.2 : rayon léger, architectural */
    padding: 14px 28px !important;
    width: min(1400px, 92%) !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.4s var(--lux-ease) !important;
}

/* Scroll : navbar reste rectangulaire, change juste de couleur */
.lux-active .lux-nav.is-scrolled {
    padding: 12px 0 0 !important;
    background: transparent !important;
}
.lux-active .lux-nav.is-scrolled .lux-nav__inner {
    background: rgba(251, 246, 236, 0.94) !important;
    border-color: rgba(43, 24, 16, 0.1) !important;
    box-shadow: 0 8px 32px rgba(43, 24, 16, 0.1) !important;
}
.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;
}
.lux-active .lux-nav.is-scrolled .lux-nav__burger {
    color: var(--lux-charcoal) !important;
}

/* Logo plus discret */
.lux-active .lux-nav__logo-mark {
    width: 32px !important;
    height: 32px !important;
    color: var(--lux-gold);
}
.lux-active .lux-nav.is-scrolled .lux-nav__logo-mark {
    color: var(--lux-terracotta);
}
.lux-active .lux-nav__logo-title {
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
}
.lux-active .lux-nav__logo-eyebrow,
.lux-active .lux-nav__logo-sub {
    font-size: 8px !important;
    letter-spacing: 0.32em !important;
}
.lux-active .lux-nav__menu {
    gap: 26px !important;
}
.lux-active .lux-nav__menu a {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
}

/* Bouton BOOK NOW : pas de capsule non plus, rayon léger 8px */
.lux-active .lux-nav .lux-btn--primary {
    padding: 10px 22px !important;
    font-size: 10px !important;
    border-radius: 8px !important;  /* v3.8.2 : pas de 100px */
}

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

/* ─────────────────────────────────────────────────────────────
   3. HERO — Lisibilité texte (overlay plus sombre)
─────────────────────────────────────────────────────────────── */
.lux-active .lux-hero__media::after {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.40) 50%,
        rgba(20, 12, 8, 0.80) 100%
    ) !important;
}
.lux-active .lux-hero__title {
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}
.lux-active .lux-hero__lead {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────
   4. GALERIE CHAMBRE — VRAIE mosaïque Airbnb correctement structurée
   Pattern : 1 grande à gauche (60%) + 4 petites en 2x2 à droite (40%)
─────────────────────────────────────────────────────────────── */
.rl-gallery {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
    height: 520px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 24px 0 0 !important;
    background: var(--lux-sand);
    position: relative;
}

/* La grande photo prend 2 lignes × 1 colonne (à gauche) */
.rl-gallery__main {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--lux-sand);
}
.rl-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--lux-ease-out);
}
.rl-gallery__main:hover img {
    transform: scale(1.04);
}

/* Les 4 tuiles se placent dans la grille 2x2 (colonnes 2 et 3, lignes 1 et 2) */
.rl-gallery__side {
    display: contents !important;
}
.rl-gallery__tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--lux-sand);
    width: 100%;
    height: 100%;
}
.rl-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--lux-ease-out);
}
.rl-gallery__tile:hover img {
    transform: scale(1.06);
}

/* Bouton "Voir toutes les photos" élégant en bas à droite */
.rl-gallery__see-all {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.96);
    color: var(--lux-charcoal);
    border: 1px solid rgba(43, 24, 16, 0.12);
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(43, 24, 16, 0.18);
    transition: all 0.3s;
}
.rl-gallery__see-all:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43, 24, 16, 0.25);
}

/* Mobile : grande en haut, 4 en bas (2 lignes de 2) */
@media (max-width: 900px) {
    .rl-gallery {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 280px 130px 130px !important;
        height: auto !important;
        gap: 6px !important;
    }
    .rl-gallery__main {
        grid-row: 1 !important;
        grid-column: 1 / span 2 !important;
    }
    .rl-gallery__tile:nth-child(1) { grid-row: 2; grid-column: 1; }
    .rl-gallery__tile:nth-child(2) { grid-row: 2; grid-column: 2; }
    .rl-gallery__tile:nth-child(3) { grid-row: 3; grid-column: 1; }
    .rl-gallery__tile:nth-child(4) { grid-row: 3; grid-column: 2; }
}

/* ─────────────────────────────────────────────────────────────
   5. ICÔNES DANS LES MÉTA CHAMBRE
─────────────────────────────────────────────────────────────── */
.rl-room-meta .lux-icon {
    color: var(--lux-terracotta) !important;
    width: 18px;
    height: 18px;
}

/* Icônes amenities en mode neutre */
.rl-amenity__icon {
    color: var(--lux-terracotta-dark) !important;
}

/* ─────────────────────────────────────────────────────────────
   6. FOOTER COHÉRENT TERRACOTTA
─────────────────────────────────────────────────────────────── */
.lux-active .lux-footer {
    background:
        linear-gradient(180deg, #4A2D1F 0%, #2B1810 100%) !important;
    background-image:
        linear-gradient(180deg, #4A2D1F 0%, #2B1810 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23C9A34E' stroke-width='0.5' opacity='0.06'><path d='M40 5 L48 25 L68 25 L52 40 L60 60 L40 50 L20 60 L28 40 L12 25 L32 25 Z'/></g></svg>");
    background-blend-mode: normal;
    color: rgba(245, 239, 230, 0.75) !important;
}
.lux-active .lux-footer__col h4 {
    color: #C9A34E !important;
    font-family: var(--lux-font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.lux-active .lux-footer__col a {
    color: rgba(245, 239, 230, 0.7) !important;
    transition: color 0.2s;
}
.lux-active .lux-footer__col a:hover {
    color: #C9A34E !important;
}
.lux-active .lux-footer__brand p {
    color: rgba(245, 239, 230, 0.65) !important;
}

/* Newsletter dans le footer — cohérence terracotta */
.lux-active .lux-footer .riad-newsletter,
.lux-active .lux-footer [class*="newsletter"] {
    background: transparent !important;
    border: 1px solid rgba(201, 163, 78, 0.2);
    padding: 18px;
    border-radius: 10px;
    margin-top: 16px;
}
.lux-active .lux-footer input[type="email"],
.lux-active .lux-footer .riad-newsletter input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(201, 163, 78, 0.25) !important;
    color: #F5EFE6 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}
.lux-active .lux-footer input[type="email"]::placeholder {
    color: rgba(245, 239, 230, 0.4) !important;
}
.lux-active .lux-footer button[type="submit"],
.lux-active .lux-footer .riad-newsletter button {
    background: #C9A34E !important;
    color: #2B1810 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background 0.2s;
}
.lux-active .lux-footer button[type="submit"]:hover {
    background: #B8902C !important;
}

/* Réseaux sociaux footer — icônes Lucide propres */
.lux-active .lux-footer__social a {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(201, 163, 78, 0.25) !important;
    color: rgba(245, 239, 230, 0.8) !important;
}
.lux-active .lux-footer__social a:hover {
    background: #C9A34E !important;
    border-color: #C9A34E !important;
    color: #2B1810 !important;
}
.lux-active .lux-footer__social .lux-icon {
    width: 16px;
    height: 16px;
}

.lux-active .lux-footer__bottom {
    border-top: 1px solid rgba(201, 163, 78, 0.15) !important;
    color: rgba(245, 239, 230, 0.45) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. HOST CARD : icônes badges Lucide
─────────────────────────────────────────────────────────────── */
.rl-host-badge__icon {
    font-size: 0 !important; /* hide emoji */
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: var(--lux-gold);
}
.rl-host-badge__icon .lux-icon {
    width: 18px;
    height: 18px;
}

/* ─────────────────────────────────────────────────────────────
   8. WHATSAPP BUTTON
─────────────────────────────────────────────────────────────── */
.rl-whatsapp .lux-icon {
    color: #FFFFFF !important;
    width: 26px;
    height: 26px;
}