/* ===================================================
   PALMERAIE LODGE – Custom Styles
   =================================================== */

/* ---- Variables ---- */
:root {
    --gold:        #C9A84C;
    --gold-dark:   #a8883a;
    --dark:        #111111;
    --dark-2:      #1c1c1c;
    --text-muted:  #6c757d;
    --font-script: 'Dancing Script', cursive;
    --font-body:   'Raleway', sans-serif;
    --font-title:  'Cormorant Garamond', Georgia, serif;
    --section-py:  5rem;
}

/* ---- Base ---- */
body {
    font-family: var(--font-body);
    color: #2c2c2c;
    background: #fff;
}

.py-6 { padding-top: var(--section-py) !important; padding-bottom: var(--section-py) !important; }
.mb-6 { margin-bottom: 4rem !important; }

/* ---- Utilities ---- */
.text-gold  { color: var(--gold) !important; }
.bg-gold    { background-color: var(--gold) !important; }
.letter-spacing { letter-spacing: .12em; }

/* ---- Buttons ---- */
.btn-gold {
    background-color: var(--gold);
    color: #fff;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: .05em;
    border: none;
    transition: background .25s ease;
}
.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--gold-dark);
    color: #fff;
}

/* ---- Links ---- */
.link-gold {
    color: var(--gold);
    text-decoration: none;
    transition: color .2s;
}
.link-gold:hover { color: var(--gold-dark); }

/* ===================================================
   NAVBAR
   =================================================== */
#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease;
}

/* Transparent state (top of page) */
#mainNav.navbar-transparent {
    background-color: transparent;
    box-shadow: none;
}

/* Scrolled state */
#mainNav.navbar-scrolled {
    background-color: var(--dark);
    padding-top: .6rem;
    padding-bottom: .6rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.navbar-brand .logo-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .18em;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
}

.navbar-brand .logo-text small {
    font-size: .65rem;
    font-weight: 400;
    opacity: .8;
    letter-spacing: .22em;
}

#mainNav .nav-link {
    color: rgba(255,255,255,.88) !important;
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .4rem .6rem;
    transition: color .2s;
}
#mainNav .nav-link:hover { color: var(--gold) !important; }

.nav-phone {
    font-size: .82rem;
    opacity: .85;
}

/* Dropdown */
.dropdown-menu {
    border: none;
    border-radius: 0;
    border-top: 2px solid var(--gold);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.dropdown-item:hover { color: var(--gold); }

/* ===================================================
   HERO CAROUSEL
   =================================================== */
#heroCarousel {
    height: 100vh;
    min-height: 600px;
    position: relative;
}

.carousel-inner,
.carousel-item { height: 100%; }

/* Ken Burns : zoom lent sur chaque slide */
@keyframes kenBurns {
    0%   { transform: scale(1);    }
    100% { transform: scale(1.05); }
}

.hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    animation: kenBurns 8s ease-out forwards;
}

/* Relance l'animation à chaque activation du slide */
.carousel-item.active .hero-slide {
    animation: kenBurns 8s ease-out forwards;
}

/* Overlay gradient */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.2) 40%,
        rgba(0,0,0,.55) 100%
    );
}

/* Caption overlay */
.hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
    pointer-events: none; /* laisse passer les clics vers les contrôles */
}

/* Réactiver les clics sur les éléments interactifs dans la caption */
.hero-caption h1,
.hero-caption .btn {
    pointer-events: auto;
}

/* Contrôles et indicateurs au-dessus de la caption */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next,
#heroCarousel .carousel-indicators {
    z-index: 20;
}

/* Fade-in du texte hero au chargement */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.hero-caption h1,
.hero-caption .btn {
    animation: heroFadeIn .9s ease both;
}
.hero-caption .btn { animation-delay: .35s; }

.hero-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Carousel indicators */
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    opacity: .5;
    background-color: #fff;
}
.carousel-indicators .active { opacity: 1; background-color: var(--gold); }

/* ===================================================
   FEATURES BAR
   =================================================== */
.features-bar {
    background-color: var(--dark);
}

.feature-item {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #eae3d8;
    font-size: 1.1em;
}

.feature-icon-img {
    height: 50px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

@media (max-width: 767.98px) {
    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .5rem;
    }
}

/* ===================================================
   SECTION HEADINGS
   =================================================== */
.script-label {
    font-family: var(--font-script);
    font-size: 1.8rem;
    display: block;
    line-height: 1;
}

.section-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.25;
    color: #1a1a1a;
}

.lodge-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.9rem;
    color: #1a1a1a;
}

/* ===================================================
   ABOUT SECTION
   =================================================== */
.about-img-wrap img {
    border-radius: .5rem;
}

/* ===================================================
   LODGE IMAGES
   =================================================== */
.lodge-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: .5rem;
    display: block;
}

@media (max-width: 991.98px) {
    .lodge-img { height: 300px; }
}

/* ===================================================
   LODGE CARDS
   =================================================== */
.badge-check {
    font-size: .9rem;
    font-weight: 600;
    color: #2c2c2c;
}

/* ===================================================
   SERVICES – SHOWCASE
   =================================================== */

/* Conteneur desktop */
.services-showcase {
    position: relative;
    height: 580px;
    overflow: hidden;
}

/* Couches images (crossfade) */
.service-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
}
.service-bg-layer.active { opacity: 1; }

/* Gradient bas */
.services-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
    z-index: 2;
}

/* Barre des onglets – couvre toute la hauteur */
.services-tabs {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 3;
}

.service-tab {
    flex: 1;
    padding: 2rem 2rem 2.5rem;
    text-decoration: none;
    color: rgba(255,255,255,.7);
    border-right: 1px solid rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end; /* contenu collé en bas */
    gap: .4rem;
    transition: color .3s, background .3s;
}
.service-tab:last-child { border-right: none; }
.service-tab:hover     { color: rgba(255,255,255,.9); }

/* Icône */
.service-tab-icon {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .65;
    transition: opacity .3s;
}
.service-tab.active .service-tab-icon,
.service-tab:hover  .service-tab-icon { opacity: 1; }

/* Titre */
.service-tab-title {
    display: block;
    font-family: var(--font-title);
    font-size: 1.55rem;
    font-weight: 700;
    color: inherit;
    transition: color .3s;
}
.service-tab.active .service-tab-title { color: var(--gold); }

/* Sous-titre */
.service-tab-sub {
    display: block;
    font-size: .82rem;
    opacity: .7;
}

/* Animation titre + icône au changement */
@keyframes tabActivate {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.service-tab.active .service-tab-title,
.service-tab.active .service-tab-icon {
    animation: tabActivate .45s cubic-bezier(.22,.68,0,1.2) both;
}

/* ── Mobile : cartes empilées ── */
.service-mobile-card {
    display: flex;
    align-items: flex-end;
    height: 260px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.service-mobile-overlay {
    width: 100%;
    padding: 1.25rem;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
    display: flex;
    align-items: center;
    gap: .75rem;
}

.service-mobile-icon {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.service-mobile-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

/* ===================================================
   À PROXIMITÉ
   =================================================== */
.proximite-list li {
    padding: .55rem 0;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.proximite-list li:last-child { border-bottom: none; }

/* ===================================================
   FOOTER
   =================================================== */
.footer-dark {
    background-color: var(--dark-2);
}

.footer-logo-img {
    max-width: 150px;
    width: 100%;
    height: auto;
    display: block;
}

.social-icon {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .2s;
}
.social-icon:hover { color: var(--gold); }

.payment-badge {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12);
}

.footer-link {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-size: .82rem;
    transition: color .2s;
}
.footer-link:hover { color: var(--gold); }

/* ===================================================
   BOUTON WHATSAPP FLOTTANT
   =================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 58px;
    height: 58px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
    animation: whatsappPulse 2.2s ease-in-out infinite;
    transition: transform .2s ease, background-color .2s ease;
}
.whatsapp-float:hover {
    background-color: #1ebe5d;
    color: #fff;
    transform: scale(1.1);
    animation: none;
}

@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,.45); }
    50%       { box-shadow: 0 4px 32px rgba(37,211,102,.8), 0 0 0 10px rgba(37,211,102,.12); }
}

/* ===================================================
   SERVICES PAGE – HERO
   =================================================== */
.services-page-hero {
    height: 80vh;
    min-height: 520px;
    position: relative;
    overflow: hidden;
}

.services-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurns 10s ease-out forwards;
}

.services-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.65) 100%
    );
}

.services-page-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

/* ===================================================
   SERVICES PAGE – SERVICE ROWS
   =================================================== */

/* Image avec zoom au hover */
.service-img-wrap {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.service-img-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}

.service-img-wrap:hover img {
    transform: scale(1.04);
}

/* Pictogramme */
.service-picto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f5f0e8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-picto i {
    font-size: 1.5rem;
    color: var(--gold);
}

/* Sous-titre accroche */
.service-tagline {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}

/* Séparateur discret */
.service-divider {
    padding: 0;
}

@media (max-width: 991.98px) {
    .service-img-wrap img { height: 300px; }
}

@media (max-width: 575.98px) {
    .service-img-wrap img { height: 240px; }
}

/* ===================================================
   RESIDENCE PAGE – HERO
   =================================================== */
.residence-hero {
    height: 100vh;
    min-height: 600px;
}

.residence-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurns 10s ease-out forwards;
}

.residence-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.5) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,.6) 100%
    );
}

.residence-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

.residence-hero-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.residence-hero-sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: .9;
    font-family: var(--font-body);
}

/* ===================================================
   RESIDENCE PAGE – PARALLAX IMAGES
   =================================================== */
.residence-parallax-wrap {
    overflow: hidden;
}

.residence-parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
    transform: scale(1.06);
    transition: transform .1s linear;
}

/* ===================================================
   RESIDENCE PAGE – LODGE CARDS HOVER
   =================================================== */
.res-lodge-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.res-lodge-img-wrap {
    position: relative;
    height: 380px;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
}

.res-lodge-img-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}

.res-lodge-card:hover .res-lodge-img-wrap > img {
    transform: scale(1.05);
}

.res-lodge-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    /* Gradient permanent en bas */
    background: linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.2)  45%,
        transparent     100%
    );
}

.res-lodge-content {
    width: 100%;
}

/* Titre visible par défaut */
.res-lodge-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: block;
    transform: translateY(0);
    transition: transform .4s cubic-bezier(.22,.68,0,1.1);
}

/* Description : cachée par défaut */
.res-lodge-desc {
    font-size: .88rem;
    color: rgba(255,255,255,.85);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .35s ease .05s;
    line-height: 1.5;
}

/* CTA */
.res-lodge-cta {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: .06em;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .35s ease .1s;
    margin-top: 0;
}

/* Hover : titre monte, desc + cta apparaissent */
.res-lodge-card:hover .res-lodge-title {
    transform: translateY(-8px);
}

.res-lodge-card:hover .res-lodge-desc {
    max-height: 5rem;
    opacity: 1;
}

.res-lodge-card:hover .res-lodge-cta {
    max-height: 2rem;
    opacity: 1;
}

/* ===================================================
   RESIDENCE PAGE – GRILLE EXPÉRIENCE
   =================================================== */
.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: .5rem;
    border-radius: .5rem;
    overflow: hidden;
}

.experience-grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

@media (max-width: 767.98px) {
    .res-lodge-img-wrap { height: 280px; }
    .experience-grid {
        grid-template-rows: 180px 180px;
    }
}

/* ===================================================
   LODGE DETAIL – HERO
   =================================================== */
.lodge-hero {
    height: 80vh;
    min-height: 520px;
}

.lodge-hero-label {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/* Boutons carousel circulaires */
.lodge-carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    background-color: transparent;
    opacity: 1;
    flex: none;
    transition: border-color .2s, background-color .2s;
    top: 50%;
    transform: translateY(-50%);
}
.lodge-carousel-btn:hover {
    border-color: var(--gold);
    background-color: var(--gold);
    opacity: 1;
}

/* ===================================================
   LODGE DETAIL – ÉQUIPEMENTS
   =================================================== */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem 1rem;
    border-top: 1px solid #eee;
    padding-top: 1.25rem;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 500;
    color: #2c2c2c;
}

.amenity-item i {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ===================================================
   LODGE DETAIL – GALERIE
   =================================================== */
.lodge-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .5rem;
    height: 480px;
    border-radius: .5rem;
    overflow: hidden;
}

.gallery-main {
    grid-row: 1 / 3;
}

.lodge-gallery-grid .gallery-item {
    display: block;
    overflow: hidden;
}

.lodge-gallery-grid .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.lodge-gallery-grid .gallery-item:hover img {
    transform: scale(1.05);
}

@media (max-width: 767.98px) {
    .lodge-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 160px 160px;
        height: auto;
    }
    .gallery-main { grid-row: 1 / 2; grid-column: 1 / 3; }
}

/* ===================================================
   LODGE DETAIL – VIDÉO
   =================================================== */
.lodge-video-wrap {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,.15);
    max-width: 900px;
    margin: 0 auto;
}

/* ===================================================
   LODGE DETAIL – SERVICE CARDS
   =================================================== */
.service-lodge-card {
    display: block;
    position: relative;
    height: 320px;
    border-radius: .5rem;
    overflow: hidden;
    text-decoration: none;
}

.service-lodge-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.service-lodge-card:hover > img {
    transform: scale(1.05);
}

.service-lodge-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.5rem;
    gap: .25rem;
}

.service-lodge-icon {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: .25rem;
}

.service-lodge-title {
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    display: block;
}

.service-lodge-sub {
    font-size: .8rem;
    color: rgba(255,255,255,.75);
    display: block;
}

/* ===================================================
   LODGE DETAIL – INFOS PRATIQUES
   =================================================== */
.lodge-info-card {
    background: #fff;
    border: 1px solid #ece8e0;
    border-radius: .75rem;
    padding: 2rem 2rem 1.75rem;
    height: 100%;
}

.lodge-info-title {
    font-family: var(--font-title);
    font-size: 1.45rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #eee;
}

.lodge-info-subtitle {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-bottom: .75rem;
}

.lodge-included-list,
.lodge-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.lodge-included-list li,
.lodge-rules-list li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .93rem;
    font-weight: 500;
    color: #2c2c2c;
}

.lodge-included-list i,
.lodge-rules-list i {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ===================================================
   LODGE DETAIL – CTA
   =================================================== */
.section-cta {
    background-color: #f5f0e8;
}

/* ===================================================
   LODGE DETAIL – AUTRES LODGES
   =================================================== */
.lodge-card-link {
    text-decoration: none;
    display: block;
}

.lodge-card {
    position: relative;
    overflow: hidden;
}

.lodge-card-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.lodge-card-link:hover .lodge-card-img {
    transform: scale(1.04);
}

.lodge-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 100%);
}

.lodge-card-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
}

.lodge-card-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.lodge-badge {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    padding: .2rem .55rem;
}

/* ===================================================
   RÉSERVATION PAGE – HERO
   =================================================== */
.resa-hero {
    height: 75vh;
    min-height: 480px;
}

.resa-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurns 10s ease-out forwards;
}

.resa-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.65) 100%
    );
}

.resa-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

/* ===================================================
   RÉSERVATION PAGE – BLOC RÉASSURANCE
   =================================================== */
.resa-reassurance-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.09);
    overflow: hidden;
}

.resa-rassurance-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem 1.75rem;
    gap: .2rem;
}

.resa-rassurance-divider {
    width: 1px;
    background: #ece8e0;
    align-self: stretch;
    flex-shrink: 0;
    margin: 1.75rem 0;
}

.resa-rassurance-icon {
    font-size: 1.75rem;
    color: var(--gold);
    margin-bottom: .5rem;
}

.resa-rassurance-value {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.resa-rassurance-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

@media (max-width: 767.98px) {
    .resa-reassurance-bar { flex-direction: column; }
    .resa-rassurance-divider { width: auto; height: 1px; margin: 0 2rem; align-self: auto; }
    .resa-rassurance-item { padding: 1.5rem; }
}

/* ===================================================
   RÉSERVATION PAGE – BOOKING PLACEHOLDER
   =================================================== */
.resa-booking-placeholder {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

/* Barre de recherche */
.resa-search-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f5f0e8;
    border-radius: 3rem;
    padding: .85rem 1.25rem .85rem 2rem;
    flex-wrap: wrap;
}

.resa-search-dates {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 220px;
}

.resa-search-field {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.resa-search-field-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #2c2c2c;
}

.resa-search-field-value {
    font-size: .88rem;
}

.resa-search-arrow {
    color: var(--gold);
    font-size: 1rem;
}

.resa-search-divider {
    width: 1px;
    height: 36px;
    background: #d5ccbc;
    flex-shrink: 0;
}

.resa-search-guests {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

.resa-search-counter {
    font-size: .88rem;
    font-weight: 600;
    color: #2c2c2c;
    background: #fff;
    border-radius: 2rem;
    padding: .15rem .75rem;
}

@media (max-width: 767.98px) {
    .resa-search-bar {
        border-radius: 1rem;
        padding: 1.25rem;
        flex-direction: column;
        align-items: stretch;
    }
    .resa-search-divider { display: none; }
    .resa-search-dates { justify-content: space-between; }
}

/* Lodge cards dans le placeholder */
.resa-lodge-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ece8e0;
    transition: box-shadow .3s ease, transform .3s ease;
}

.resa-lodge-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    transform: translateY(-4px);
    color: inherit;
}

.resa-lodge-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.resa-lodge-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}

.resa-lodge-card:hover .resa-lodge-img-wrap img {
    transform: scale(1.06);
}

.resa-lodge-price-badge {
    position: absolute;
    top: .85rem;
    right: .85rem;
    background: rgba(255,255,255,.95);
    border-radius: .5rem;
    padding: .3rem .7rem;
    font-size: .75rem;
    color: #555;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.resa-lodge-price-badge strong {
    display: block;
    font-size: 1.05rem;
    color: var(--gold);
    font-family: var(--font-title);
}

.resa-lodge-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.resa-lodge-name {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 .35rem;
    line-height: 1.3;
}

.resa-lodge-location {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0 0 .65rem;
}

.resa-lodge-meta {
    display: flex;
    gap: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #2c2c2c;
}

/* ===================================================
   RÉSERVATION PAGE – FAQ
   =================================================== */
.faq-accordion {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid #e8e2d8;
}

.faq-item:first-child { border-top: 1px solid #e8e2d8; }

.faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
}

.faq-question {
    flex: 1;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

.faq-toggle {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--gold);
    transition: transform .3s ease;
}

.faq-btn:not(.collapsed) .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 1.25rem 3.25rem;
    font-size: .93rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ===================================================
   RÉSERVATION PAGE – CONTACT SECONDAIRE
   =================================================== */
.resa-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    background: #fff;
    border: 1.5px solid #ece8e0;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.resa-contact-card:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 32px rgba(201,168,76,.15);
    transform: translateY(-4px);
    color: inherit;
}

.resa-contact-card--whatsapp:hover {
    border-color: #25D366;
    box-shadow: 0 8px 32px rgba(37,211,102,.15);
}

.resa-contact-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f5f0e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: .5rem;
    transition: background .25s, color .25s;
}

.resa-contact-card--whatsapp .resa-contact-icon-wrap {
    background: #edf9f0;
    color: #25D366;
}

.resa-contact-card:hover .resa-contact-icon-wrap {
    background: var(--gold);
    color: #fff;
}

.resa-contact-card--whatsapp:hover .resa-contact-icon-wrap {
    background: #25D366;
    color: #fff;
}

.resa-contact-type {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.resa-contact-value {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

.resa-contact-hint {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ===================================================
   CONTACT PAGE – HERO
   =================================================== */
.contact-hero {
    height: 80vh;
    min-height: 520px;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurns 10s ease-out forwards;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.65) 100%
    );
}

.contact-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

/* ===================================================
   CONTACT PAGE – INFO BAR
   =================================================== */
.contact-info-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.09);
    overflow: hidden;
}

.contact-info-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    gap: .4rem;
}

.contact-info-divider {
    width: 1px;
    background: #ece8e0;
    align-self: stretch;
    flex-shrink: 0;
    margin: 2rem 0;
}

.contact-info-icon {
    font-size: 1.9rem;
    color: var(--gold);
    margin-bottom: .4rem;
}

.contact-info-label {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.contact-info-text {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 500;
    color: #2c2c2c;
    margin: .25rem 0 0;
    line-height: 1.55;
}

.contact-info-link {
    color: #2c2c2c;
    text-decoration: none;
    transition: color .2s;
}
.contact-info-link:hover { color: var(--gold); }

.contact-info-cta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    margin-top: .35rem;
    transition: color .2s;
}
.contact-info-cta:hover { color: var(--gold-dark); }

@media (max-width: 767.98px) {
    .contact-info-bar { flex-direction: column; }
    .contact-info-divider { width: auto; height: 1px; margin: 0 2rem; align-self: auto; }
    .contact-info-item { padding: 1.75rem 1.5rem; }
}

/* ===================================================
   CONTACT PAGE – FORMULAIRE
   =================================================== */
.contact-form-card {
    background: #fff;
    border-radius: 1rem;
    padding: 3rem 3rem 2.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

.contact-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #2c2c2c;
    margin-bottom: .5rem;
}

.contact-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid #e8e2d8;
    border-radius: .5rem;
    font-family: var(--font-body);
    font-size: .93rem;
    color: #2c2c2c;
    background: #faf9f7;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    appearance: none;
}

.contact-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
    background: #fff;
}

.contact-input::placeholder { color: #b0a899; }

.contact-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A84C' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.contact-textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.contact-radio { cursor: pointer; }

.contact-radio input[type="radio"] { display: none; }

.contact-radio-label {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 1.5px solid #e8e2d8;
    border-radius: 2rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #faf9f7;
    transition: border-color .2s, background .2s, color .2s;
    cursor: pointer;
    user-select: none;
}

.contact-radio input[type="radio"]:checked + .contact-radio-label {
    border-color: var(--gold);
    background: #fdf6e7;
    color: var(--gold-dark);
}

.contact-radio-label:hover {
    border-color: var(--gold);
    color: var(--gold);
}

@media (max-width: 575.98px) {
    .contact-form-card { padding: 2rem 1.25rem; }
}

/* ===================================================
   CONTACT PAGE – CARTE
   =================================================== */
.contact-map-wrap {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.contact-map-wrap iframe { display: block; }

/* ===================================================
   PROXIMITÉ PAGE – HERO
   =================================================== */
.proximite-hero {
    height: 80vh;
    min-height: 520px;
}

.proximite-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurns 10s ease-out forwards;
}

.proximite-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.65) 100%
    );
}

.proximite-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10;
}

/* ===================================================
   PROXIMITÉ PAGE – SECTION IMAGES
   =================================================== */
.proximite-img-wrap {
    overflow: hidden;
    border-radius: .75rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.proximite-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    will-change: transform;
    transform: scale(1.06);
    transition: transform .1s linear;
}

.proximite-img-wrap:hover .proximite-img {
    transform: scale(1.1) !important;
    transition: transform .55s ease !important;
}

@media (max-width: 991.98px) {
    .proximite-img { height: 320px; }
}
@media (max-width: 575.98px) {
    .proximite-img { height: 240px; }
}

/* ===================================================
   PROXIMITÉ PAGE – CHECK LIST
   =================================================== */
.proximite-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.proximite-check-list li {
    padding: .55rem 0;
    font-weight: 500;
    color: #2c2c2c;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.proximite-check-list li:last-child { border-bottom: none; }

/* ===================================================
   PROXIMITÉ PAGE – INCONTOURNABLES CARDS
   =================================================== */
.incont-card {
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s ease, transform .3s ease;
}

.incont-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.14);
    transform: translateY(-4px);
}

.incont-img-wrap {
    overflow: hidden;
    height: 200px;
    flex-shrink: 0;
}

.incont-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}

.incont-card:hover .incont-img-wrap img {
    transform: scale(1.07);
}

.incont-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.incont-distance {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold);
}

.incont-title {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.25;
}

.incont-desc {
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

/* ===================================================
   RESPONSIVE TWEAKS
   =================================================== */
@media (max-width: 991.98px) {
    #mainNav.navbar-transparent { background-color: rgba(0,0,0,.7); }
    .feature-item { border-right: none !important; }
    .hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .amenities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .script-label { font-size: 1.5rem; }
    .whatsapp-float { bottom: 1.25rem; right: 1.25rem; width: 50px; height: 50px; font-size: 1.45rem; }
    .amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .service-lodge-card { height: 240px; }
}

/* ===================================================
   RESPONSIVE – ALTERNANCE IMAGE / TEXTE
   Force image au-dessus du texte sur mobile
   quand l'image est le second élément dans le DOM
   =================================================== */
@media (max-width: 991.98px) {
    /* Services page : texte gauche, image droite (massage, chauffeur…) */
    .row.align-items-center > div:last-child:has(.service-img-wrap),

    /* Résidence : présentation et privatiser (texte gauche, image droite) */
    .row.align-items-center > div:last-child:has(.residence-parallax-wrap),

    /* Proximité : restaurants et emplacement (texte gauche, image droite) */
    .row.align-items-center > div:last-child:has(.proximite-img-wrap),

    /* Contact : section "Comment venir" (texte gauche, carte droite) */
    .row.align-items-center > div:last-child:has(.contact-map-wrap),

    /* Home page : section À Proximité (texte gauche, grille images droite) */
    .section-proximite .row.align-items-center > div:last-child {
        order: -1;
    }
}

/* ===================================================
   RESPONSIVE – LODGE CARDS PAGE RÉSIDENCE
   Texte + CTA toujours visibles sur mobile (pas de hover)
   =================================================== */
@media (max-width: 991.98px) {
    .res-lodge-title      { transform: translateY(-8px); }
    .res-lodge-desc       { max-height: 6rem; opacity: 1; }
    .res-lodge-cta        { max-height: 2rem; opacity: 1; }
    .res-lodge-img-wrap   { height: 300px; }
}