/* ═══════════════════════════════════════════════════════════════
   RIAD DAR MAMOUNI — Fiche Chambre Airbnb Luxe v3.7.3
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   STRUCTURE GÉNÉRALE
─────────────────────────────────────────────────────────────── */
.rl-room-page {
    background: var(--lux-cream);
    color: var(--lux-charcoal);
    min-height: 100vh;
}

/* Breadcrumb */
.rl-room-breadcrumb {
    max-width: 1280px;
    margin: 0 auto;
    padding: 110px var(--lux-gutter) 12px;
}
.rl-room-breadcrumb a {
    color: var(--lux-charcoal-soft);
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: color 0.3s;
}
.rl-room-breadcrumb a:hover { color: var(--lux-terracotta); }

/* ─────────────────────────────────────────────────────────────
   HERO : titre + meta + galerie sur fond image floutée
─────────────────────────────────────────────────────────────── */
.rl-room-hero {
    background: var(--lux-cream);
    padding: 0 var(--lux-gutter);
    position: relative;
}
.rl-room-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
}
.rl-room-hero__main { width: 100%; }

.rl-room-title {
    font-family: var(--lux-font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    color: var(--lux-charcoal);
    line-height: 1.05;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.rl-room-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(62, 107, 87, 0.1);
    color: var(--lux-emerald);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}
.rl-room-tag::before {
    content: '♡';
    font-size: 14px;
}

.rl-room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    color: var(--lux-charcoal-soft);
    font-size: 14px;
    margin-bottom: 28px;
}
.rl-room-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rl-room-meta svg {
    flex-shrink: 0;
    color: var(--lux-terracotta);
}

/* ─────────────────────────────────────────────────────────────
   GALERIE MOSAÏQUE STYLE AIRBNB
   1 grande à gauche + 2x2 à droite, hauteur fixe
─────────────────────────────────────────────────────────────── */
.rl-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    border-radius: 16px;
    overflow: hidden;
    height: 480px;
    margin-bottom: 0;
    box-shadow: 0 8px 32px rgba(43, 24, 16, 0.12);
}
.rl-gallery__main {
    grid-row: 1 / 3;
    grid-column: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--lux-sand);
    display: block;
}
.rl-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--lux-ease-out);
}
.rl-gallery__main:hover img { transform: scale(1.03); }

.rl-gallery__side {
    display: contents;
}
.rl-gallery__tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--lux-sand);
    display: block;
}
.rl-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--lux-ease-out);
}
.rl-gallery__tile:hover img { transform: scale(1.05); }
.rl-gallery__tile--empty {
    background: linear-gradient(135deg, rgba(168, 91, 58, 0.1) 0%, rgba(214, 194, 168, 0.2) 100%);
    cursor: default;
}

/* Overlay "Voir toutes les photos" sur la dernière tuile */
.rl-gallery__tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 8, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: var(--lux-ivory);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    transition: background 0.3s;
}
.rl-gallery__tile--more:hover .rl-gallery__tile-overlay {
    background: rgba(20, 12, 8, 0.5);
}

/* Mobile : 1 grande puis 4 petites en bas */
@media (max-width: 900px) {
    .rl-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 130px;
        height: auto;
        gap: 6px;
    }
    .rl-gallery__main {
        grid-row: 1;
        grid-column: 1 / 3;
    }
}
@media (max-width: 500px) {
    .rl-gallery {
        grid-template-rows: 220px 100px;
    }
    .rl-room-breadcrumb { padding-top: 90px; }
    .rl-room-title { font-size: 32px; }
}

/* ─────────────────────────────────────────────────────────────
   CORPS : Layout 2 colonnes (1fr contenu + 380px sticky aside)
─────────────────────────────────────────────────────────────── */
.rl-room-body {
    background: var(--lux-cream);
    padding: 30px var(--lux-gutter) 60px;
    position: relative;
}
.rl-room-body__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: start;
}

@media (max-width: 1024px) {
    .rl-room-body__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────
   TABS NAVIGATION (sticky en haut du contenu)
─────────────────────────────────────────────────────────────── */
.rl-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(43, 24, 16, 0.15);
    position: sticky;
    top: 70px;
    background: var(--lux-cream);
    z-index: 10;
    padding: 8px 0;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}
.rl-tabs::-webkit-scrollbar { display: none; }
.rl-tab {
    color: var(--lux-charcoal-soft);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s;
}
.rl-tab.is-active {
    color: var(--lux-terracotta);
    font-weight: 600;
}
.rl-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lux-terracotta);
}

/* ─────────────────────────────────────────────────────────────
   SECTIONS DE CONTENU
─────────────────────────────────────────────────────────────── */
.rl-section {
    padding: 24px 0 40px;
    border-bottom: 1px solid rgba(43, 24, 16, 0.08);
    scroll-margin-top: 130px;
}
.rl-section:last-of-type { border-bottom: none; }

.rl-section__title {
    font-family: var(--lux-font-display);
    font-size: 28px;
    font-weight: 500;
    color: var(--lux-charcoal);
    margin: 0 0 20px;
    line-height: 1.2;
}
.rl-section__text {
    color: var(--lux-charcoal-l);
    font-size: 15px;
    line-height: 1.7;
}
.rl-section__text p {
    margin: 0 0 14px;
}

/* ─────────────────────────────────────────────────────────────
   ÉQUIPEMENTS (grid icônes + label)
─────────────────────────────────────────────────────────────── */
.rl-amenities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
}
.rl-amenity {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--lux-charcoal);
    font-size: 14px;
}
.rl-amenity__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--lux-charcoal-soft);
    display: grid;
    place-items: center;
}
.rl-amenity__icon svg { width: 100%; height: 100%; }

@media (max-width: 600px) {
    .rl-amenities { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   REVIEWS (note moyenne + plateformes + 3 avis)
─────────────────────────────────────────────────────────────── */
.rl-reviews-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    padding: 24px 0;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(43, 24, 16, 0.08);
    align-items: center;
}
.rl-reviews-summary__score { text-align: left; }
.rl-reviews-summary__big {
    font-family: var(--lux-font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--lux-terracotta-dark);
}
.rl-reviews-summary__big small {
    font-size: 24px;
    color: var(--lux-charcoal-soft);
    font-weight: 400;
}
.rl-reviews-summary__label {
    font-family: var(--lux-font-display);
    font-size: 18px;
    color: var(--lux-charcoal);
    margin: 4px 0 6px;
}
.rl-reviews-summary__count {
    font-size: 12px;
    color: var(--lux-charcoal-soft);
}
.rl-reviews-summary__stars {
    color: var(--lux-gold);
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 6px;
}

.rl-reviews-platforms {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.rl-review-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--lux-charcoal-l);
}
.rl-review-platform strong {
    color: var(--lux-charcoal);
    font-weight: 600;
}

@media (max-width: 700px) {
    .rl-reviews-summary { grid-template-columns: 1fr; }
    .rl-reviews-platforms { gap: 16px; justify-content: flex-start; }
}

/* Reviews list */
.rl-reviews-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.rl-review {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 18px;
    background: rgba(251, 246, 236, 0.6);
    border: 1px solid rgba(201, 163, 78, 0.15);
    border-radius: 12px;
}
.rl-review__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lux-terracotta);
    color: var(--lux-ivory);
    display: grid;
    place-items: center;
    font-family: var(--lux-font-display);
    font-size: 20px;
    font-weight: 500;
}
.rl-review__head {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}
.rl-review__head strong {
    color: var(--lux-charcoal);
    font-size: 14px;
    font-weight: 600;
}
.rl-review__head span {
    color: var(--lux-charcoal-soft);
    font-size: 11px;
    letter-spacing: 0.05em;
}
.rl-review__stars {
    color: var(--lux-gold);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.rl-review p {
    font-size: 13px;
    color: var(--lux-charcoal-l);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 700px) {
    .rl-reviews-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   LOCALISATION (carte)
─────────────────────────────────────────────────────────────── */
.rl-location-map {
    margin-top: 16px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(201, 163, 78, 0.2);
}
.rl-location-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: sepia(0.15);
}

/* ─────────────────────────────────────────────────────────────
   CONDITIONS (liste)
─────────────────────────────────────────────────────────────── */
.rl-conditions {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rl-conditions li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(43, 24, 16, 0.08);
    font-size: 14px;
    color: var(--lux-charcoal-l);
}
.rl-conditions li:last-child { border: none; }
.rl-conditions strong {
    color: var(--lux-charcoal);
    margin-right: 8px;
}

/* ─────────────────────────────────────────────────────────────
   STICKY BOOKING ASIDE
─────────────────────────────────────────────────────────────── */
.rl-booking-aside {
    position: sticky;
    top: 100px;
    align-self: start;
}

/* ─────────────────────────────────────────────────────────────
   BOOKING CARD
─────────────────────────────────────────────────────────────── */
.rl-booking-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(43, 24, 16, 0.1);
    box-shadow: 0 10px 40px rgba(43, 24, 16, 0.08);
    padding: 24px;
    margin-bottom: 20px;
}

.rl-booking-card__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
}
.rl-booking-card__price {
    font-family: var(--lux-font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--lux-charcoal);
}
.rl-booking-card__per {
    font-size: 14px;
    color: var(--lux-charcoal-soft);
}

.rl-booking-form { margin-bottom: 16px; }
.rl-booking-form__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(43, 24, 16, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.rl-booking-form__dates .rl-field {
    border-right: 1px solid rgba(43, 24, 16, 0.2);
}
.rl-booking-form__dates .rl-field:last-child { border-right: none; }

.rl-field {
    padding: 10px 12px;
    background: transparent;
    cursor: pointer;
    display: block;
}
.rl-field > span {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lux-charcoal);
    margin-bottom: 4px;
}
.rl-field input,
.rl-field select {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 14px;
    color: var(--lux-charcoal);
    font-family: var(--lux-font-body);
    padding: 0;
    outline: none;
    cursor: pointer;
}

.rl-field--full {
    border: 1px solid rgba(43, 24, 16, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
}

.rl-booking-card__cta {
    width: 100%;
    background: linear-gradient(135deg, var(--lux-terracotta) 0%, var(--lux-terracotta-d) 100%);
    color: var(--lux-ivory);
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    font-family: var(--lux-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 16px;
    transition: all 0.3s;
}
.rl-booking-card__cta:hover {
    background: linear-gradient(135deg, var(--lux-terracotta-d) 0%, var(--lux-terracotta-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(168, 91, 58, 0.3);
}

.rl-booking-card__free {
    text-align: center;
    color: var(--lux-emerald);
    font-size: 12px;
    margin: 12px 0 0;
}

.rl-booking-card__breakdown {
    padding-top: 16px;
    border-top: 1px solid rgba(43, 24, 16, 0.08);
}
.rl-booking-card__breakdown > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--lux-charcoal-l);
}
.rl-booking-card__total {
    padding-top: 12px !important;
    margin-top: 8px;
    border-top: 1px solid rgba(43, 24, 16, 0.1);
    font-weight: 600 !important;
    color: var(--lux-charcoal) !important;
    font-size: 15px !important;
}
.rl-booking-card__total strong {
    font-size: 16px;
    color: var(--lux-terracotta-dark);
}

/* ─────────────────────────────────────────────────────────────
   HOST CARD
─────────────────────────────────────────────────────────────── */
.rl-host-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(43, 24, 16, 0.1);
    box-shadow: 0 6px 24px rgba(43, 24, 16, 0.06);
    padding: 24px;
}
.rl-host-card__title {
    font-family: var(--lux-font-display);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 18px;
    color: var(--lux-charcoal);
}
.rl-host-card__profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.rl-host-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--lux-emerald);
    display: grid;
    place-items: center;
}
.rl-host-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rl-host-card__initial {
    color: var(--lux-ivory);
    font-family: var(--lux-font-display);
    font-size: 28px;
    font-weight: 500;
}
.rl-host-card__profile strong {
    display: block;
    font-family: var(--lux-font-display);
    font-size: 18px;
    color: var(--lux-charcoal);
    margin-bottom: 2px;
}
.rl-host-card__profile small {
    font-size: 12px;
    color: var(--lux-charcoal-soft);
}
.rl-host-card__bio {
    font-size: 13px;
    line-height: 1.6;
    color: var(--lux-charcoal-l);
    margin: 0 0 16px;
}
.rl-host-card__link {
    color: var(--lux-terracotta);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 18px;
    transition: gap 0.3s;
}
.rl-host-card__link:hover { color: var(--lux-terracotta-d); }

.rl-host-card__badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(43, 24, 16, 0.08);
}
.rl-host-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(251, 246, 236, 0.8);
    border-radius: 8px;
    font-size: 11px;
    color: var(--lux-charcoal);
    font-weight: 500;
}
.rl-host-badge__icon {
    font-size: 18px;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE STICKY CTA (bottom bar)
─────────────────────────────────────────────────────────────── */
.rl-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #FFFFFF;
    border-top: 1px solid rgba(43, 24, 16, 0.1);
    box-shadow: 0 -4px 20px rgba(43, 24, 16, 0.08);
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rl-mobile-cta__price strong {
    display: block;
    font-family: var(--lux-font-display);
    font-size: 20px;
    color: var(--lux-charcoal);
    line-height: 1;
}
.rl-mobile-cta__price small {
    font-size: 11px;
    color: var(--lux-emerald);
}
@media (max-width: 1024px) {
    .rl-mobile-cta { display: flex; }
    body.lux-active { padding-bottom: 80px; }
}

/* ─────────────────────────────────────────────────────────────
   WHATSAPP FLOATING
─────────────────────────────────────────────────────────────── */
.rl-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: grid;
    place-items: center;
    z-index: 99;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s;
}
.rl-whatsapp:hover { transform: scale(1.1); }
@media (max-width: 1024px) {
    .rl-whatsapp { bottom: 90px; }
}

/* ─────────────────────────────────────────────────────────────
   POPUP COUPON (bottom left)
─────────────────────────────────────────────────────────────── */
.rl-room-coupon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 98;
    width: 320px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(43, 24, 16, 0.18);
    border: 1px solid rgba(201, 163, 78, 0.3);
    transform: translateY(150%);
    opacity: 0;
    transition: all 0.5s var(--lux-ease-out);
}
.rl-room-coupon.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.rl-room-coupon__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--lux-charcoal-soft);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.2s;
}
.rl-room-coupon__close:hover { background: rgba(0,0,0,0.05); }

.rl-room-coupon__head { margin-bottom: 14px; padding-right: 24px; }
.rl-room-coupon__title {
    display: block;
    font-family: var(--lux-font-display);
    font-size: 16px;
    color: var(--lux-terracotta-dark);
    margin-bottom: 4px;
    font-weight: 600;
}
.rl-room-coupon__head p {
    font-size: 13px;
    color: var(--lux-charcoal-l);
    margin: 0;
    line-height: 1.5;
}
.rl-room-coupon__head strong {
    color: var(--lux-terracotta);
}

.rl-room-coupon__code {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
}
.rl-room-coupon__code span {
    flex: 1;
    background: rgba(251, 246, 236, 0.8);
    border: 1px dashed var(--lux-gold);
    padding: 10px 12px;
    border-radius: 8px 0 0 8px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--lux-terracotta-dark);
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 15px;
}
.rl-room-coupon__copy {
    background: var(--lux-terracotta);
    color: var(--lux-ivory);
    border: none;
    padding: 11px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.rl-room-coupon__copy:hover { background: var(--lux-terracotta-d); }

.rl-room-coupon__timer {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lux-terracotta);
    font-size: 11px;
    font-weight: 500;
}
.rl-room-coupon__timer svg { flex-shrink: 0; }

@media (max-width: 600px) {
    .rl-room-coupon {
        left: 12px;
        right: 12px;
        bottom: 90px;
        width: auto;
    }
}

/* ─────────────────────────────────────────────────────────────
   BTN GLOBAL (utilisé dans la fiche)
─────────────────────────────────────────────────────────────── */
.rl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--lux-font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}
.rl-btn--primary {
    background: var(--lux-terracotta);
    color: var(--lux-ivory);
}
.rl-btn--primary:hover {
    background: var(--lux-terracotta-d);
    color: var(--lux-ivory);
}