﻿/* ═══════════════════════════════════════════════════════
   ESCAPADE CORSE — Design v4
   Inspiré de akchourermitage.com
   Palette : Forêt profonde · Crème · Or chaud
   Fonts   : Cormorant Garant (display) + Jost (UI)
   Structure : Hero cinéma → Sections immersives
═══════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
    scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;
    overflow-x:hidden; /* bloque le défilement horizontal à la racine */
    max-width:100%;
}
body{
    font-family:'Jost',system-ui,sans-serif;
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
    max-width:100%;
    line-height:1.7;
}
img{display:block;max-width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
address{font-style:normal}
input,select,textarea{font-family:inherit;font-size:inherit}
em{font-style:italic;font-family:'Cormorant Garant',serif}

/* ── ANTI-DÉBORDEMENT GLOBAL ────────────────────────
   Les items de grille ont min-width:auto par défaut,
   ce qui les empêche de rétrécir. On force min-width:0
   sur tous les conteneurs critiques.
─────────────────────────────────────────────────── */
.nav-inner>*,
.detail-wrap>*,
.booking-inner>*,
.footer-inner>*,
.xp-grid>*,
.map-selector-row>*,
.chapter-body>*,
.form-row>*,
.ci-specs>*,
.detail-specs-grid>*
{ min-width:0; }

/* Triptych : ne peut pas dépasser son parent */
.triptych,
.trip-grid,
.trip-strip
{ max-width:100%; }

/* Tous les wrappers max-width prennent toute la largeur dispo */
.detail-wrap,
.booking-inner,
.footer-inner,
.xp-grid,
.xp-header,
.map-intro,
.map-selector-row,
.map-frame-wrap
{ width:100%; }

/* ── TOKENS ────────────────────────────────────────── */
:root{
    --forest:     #0b1f18;
    --forest2:    #152e22;
    --forest3:    #1e3a2c;
    --moss:       #3a6b52;
    --gold:       #c4965a;
    --gold-lt:    #d8b07a;
    --gold-vl:    rgba(196,150,90,.2);
    --cream:      #f7f3ec;
    --cream2:     #ede8de;
    --white:      #ffffff;
    --ink:        #181810;
    --mid:        #5a5650;
    --muted:      #9a9688;
    --onD:        rgba(255,255,255,.88);
    --onDm:       rgba(255,255,255,.5);
    --onDl:       rgba(255,255,255,.28);
    --line-d:     rgba(255,255,255,.12);
    --line-l:     rgba(24,24,16,.1);
    --gutter:     clamp(20px,5vw,90px);
    --section:    120px;
    --r:          4px;
    --ease:       cubic-bezier(.4,0,.2,1);
    --t4:         .4s var(--ease);
    --t6:         .6s var(--ease);
    --shadow:     0 24px 80px rgba(11,31,24,.22);
}

/* ── TYPOGRAPHY ────────────────────────────────────── */
h1,h2,h3{
    font-family:'Cormorant Garant',Georgia,serif;
    font-weight:600;line-height:1.08;
}
h1{font-size:clamp(3.2rem,7vw,7rem)}
h2{font-size:clamp(2.4rem,5vw,5rem)}
h3{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400}
em{color:inherit}

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--forest)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
::selection{background:var(--gold);color:var(--white)}

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:900;
    transition:var(--t4);
}
.nav.scrolled .nav-inner{
    padding-top:14px;padding-bottom:14px;



}

.nav-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding:22px var(--gutter);
    width:100%;
    background:rgba(11,31,24,.95);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line-d);
    transition:padding var(--t4);
}

.nav-links{
    display:flex;align-items:center;gap:0;
}
.nav-links--left{justify-content:flex-start}
.nav-links--right{justify-content:flex-end;gap:24px}

.nl{
    color:var(--onDm);
    font-size:.72rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
    padding:6px 14px;position:relative;
    transition:color var(--t4);
}
.nl::after{
    content:'';position:absolute;bottom:-2px;left:14px;right:14px;
    height:1px;background:var(--gold);
    transform:scaleX(0);transition:transform var(--t4);
    transform-origin:left;
}
.nl:hover{color:var(--white)}
.nl:hover::after,.nl.current::after{transform:scaleX(1)}
.nl.current{color:rgba(255,200,140,.85)}

.nl--cta{
    color:var(--white)!important;
    border:1px solid rgba(255,255,255,.35);
    border-radius:2px;padding:8px 18px;
    letter-spacing:.15em;
    transition:background var(--t4),border-color var(--t4)!important;
}
.nl--cta:hover{background:var(--gold);border-color:var(--gold)}
.nl--cta::after{display:none}

.nav-logo{
    font-family:'Cormorant Garant',serif;
    font-size:1.05rem;font-weight:300;
    letter-spacing:.25em;text-transform:uppercase;
    color:var(--white);
    display:flex;align-items:center;gap:8px;
    justify-self:center;white-space:nowrap;
}
.logo-sep{color:var(--gold);font-size:.8em;letter-spacing:0}
.logo-corse{font-style:italic;font-weight:600;letter-spacing:.2em}

/* ── Hamburger ──────────────────────────────────── */
.nav-ham{
    display:none;flex-direction:column;gap:6px;
    padding:8px;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
}
.nav-ham span{
    display:block;width:22px;height:1px;
    background:var(--white);transition:var(--t4);transform-origin:center;
}
.nav-ham.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ── Drawer ─────────────────────────────────────── */
.nav-drawer{
    position:fixed;top:0;right:-100%;
    width:min(320px,90vw);height:100dvh;
    background:var(--forest);z-index:890;
    display:flex;flex-direction:column;
    padding:90px 40px 40px;
    border-left:1px solid var(--line-d);
    transition:right .4s var(--ease);
}
.nav-drawer.open{right:0}
.drawer-close{
    position:absolute;top:24px;right:24px;
    color:var(--onDm);padding:8px;transition:color var(--t4);
}
.drawer-close:hover{color:var(--white)}
.drawer-close svg{width:20px;height:20px}
.nav-drawer nav{display:flex;flex-direction:column;gap:0;flex:1}
.nav-drawer nav a{
    color:var(--onDm);font-size:1rem;font-weight:300;
    letter-spacing:.1em;text-transform:uppercase;
    padding:16px 0;border-bottom:1px solid var(--line-d);
    transition:color var(--t4),padding var(--t4);
}
.nav-drawer nav a:hover{color:var(--white);padding-left:8px}
.nav-drawer nav .drawer-cta{
    color:var(--white)!important;border:1px solid var(--gold);
    padding:14px 20px;margin-top:20px;text-align:center;
    border-bottom:1px solid var(--gold)!important;
    background:transparent;transition:background var(--t4)!important;
}
.nav-drawer nav .drawer-cta:hover{background:var(--gold)!important;padding-left:20px!important}
.drawer-foot{
    display:flex;flex-direction:column;gap:8px;
    padding-top:24px;
}
.drawer-foot a{color:var(--onDl);font-size:.78rem;letter-spacing:.08em;transition:color var(--t4)}
.drawer-foot a:hover{color:var(--gold)}
.nav-scrim{
    display:none;
    position:fixed;inset:0;z-index:889;
    background:rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero{
    height:100svh;min-height:600px;
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.hero-bg{
    position:absolute;inset:0;
    transform:scale(1.08);
    will-change:transform;
}
.hero-img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 12s linear;
}
.hero-img.zoomed{transform:scale(1.06)}

.hero-veil{
    position:absolute;inset:0;
    background:
        linear-gradient(180deg,rgba(11,31,24,.45) 0%,rgba(11,31,24,.55) 60%,rgba(11,31,24,.75) 100%);
}

.hero-body{
    position:relative;z-index:1;
    text-align:center;
    padding:0 var(--gutter);
    max-width:900px;
}
.hero-eyebrow{
    font-size:.72rem;font-weight:400;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-lt);
    margin-bottom:28px;
    display:flex;align-items:center;justify-content:center;gap:14px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
    content:'';display:block;
    width:40px;height:1px;background:var(--gold);opacity:.5;
}
.hero-title{
    color:var(--white);
    margin-bottom:24px;
    text-shadow:0 2px 40px rgba(0,0,0,.3);
    font-weight:300;
}
.hero-title em{font-style:italic;font-weight:600;color:var(--white)}
.hero-sub{
    color:var(--onDm);
    font-size:clamp(.9rem,1.5vw,1.05rem);
    font-weight:300;letter-spacing:.06em;
}

/* Scroll down indicator */
.hero-scroll{
    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    color:var(--onDm);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
    z-index:1;transition:color var(--t4);
    animation:scrollPulse 3s ease infinite;
}
.hero-scroll:hover{color:var(--gold)}
.scroll-line{
    display:block;width:1px;height:50px;
    background:linear-gradient(to bottom,transparent,var(--gold));
    animation:scrollLine 2.5s ease infinite;
}
.scroll-label{letter-spacing:.18em;margin-top:4px}
@keyframes scrollLine{
    0%{transform:scaleY(0);transform-origin:top}
    50%{transform:scaleY(1);transform-origin:top}
    51%{transform:scaleY(1);transform-origin:bottom}
    100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes scrollPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ═══════════════════════════════════════════════════
   INTRO
═══════════════════════════════════════════════════ */
.intro-section{
    background:var(--cream);
    padding:var(--section) var(--gutter);
}
.intro-inner{
    max-width:760px;margin:0 auto;
    text-align:center;
}
.intro-rule{
    width:60px;height:1px;
    background:var(--gold);opacity:.5;
    margin:0 auto 40px;
}
.intro-quote{
    font-family:'Cormorant Garant',serif;
    font-size:clamp(1.5rem,3vw,2.4rem);
    font-weight:300;font-style:italic;
    color:var(--forest2);
    line-height:1.4;
    margin-bottom:28px;
}
.intro-text{
    color:var(--mid);font-size:.95rem;font-weight:300;
    line-height:1.85;margin-bottom:36px;
}
.intro-pills{
    display:flex;align-items:center;justify-content:center;
    gap:16px;flex-wrap:wrap;
    font-size:.68rem;font-weight:400;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);
}

/* ═══════════════════════════════════════════════════
   CINEMA SECTIONS
═══════════════════════════════════════════════════ */
.cinema{
    height:100svh;min-height:580px;
    position:relative;overflow:hidden;
    scroll-margin-top:82px;
    display:flex;align-items:flex-end;
}
.cinema--right{align-items:flex-end}
.cinema--tall{height:100svh;min-height:700px}

.cinema-bg{
    position:absolute;inset:0;
    transform:scale(1.06);
    transition:transform 8s var(--ease);
    will-change:transform;
}
.cinema:hover .cinema-bg,.cinema:focus-within .cinema-bg{transform:scale(1.02)}
.cinema-img{
    width:100%;height:100%;object-fit:cover;
}

/* Gradient overlays */
.cinema-veil{position:absolute;inset:0;pointer-events:none}
.cinema-veil--bottom{
    background:linear-gradient(to top,
        rgba(8,20,15,.92) 0%,
        rgba(8,20,15,.55) 40%,
        rgba(8,20,15,.12) 75%,
        transparent 100%);
}
.cinema-veil--full{
    background:linear-gradient(180deg,
        rgba(8,20,15,.3) 0%,
        rgba(8,20,15,.6) 50%,
        rgba(8,20,15,.92) 100%);
}

/* Cinema body */
.cinema-body{
    position:relative;z-index:1;
    padding:0 var(--gutter) clamp(48px,8vh,100px);
    max-width:1200px;margin:0 auto;
    width:100%;min-width:0;
    overflow:hidden;
}
.cinema-body--right{
    display:flex;flex-direction:column;align-items:flex-end;text-align:right;
}
.cinema-body--center{
    display:flex;flex-direction:column;align-items:center;text-align:center;
}

.cinema-num{
    font-size:.68rem;font-weight:400;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-lt);opacity:.7;
    margin-bottom:14px;
    display:flex;align-items:center;gap:12px;
}
.cinema-body--right .cinema-num{flex-direction:row-reverse}
.cinema-body--center .cinema-num{justify-content:center}

.cinema-title{
    color:var(--white);
    font-weight:300;
    margin-bottom:24px;
    text-shadow:0 2px 30px rgba(0,0,0,.25);
    max-width:600px;
}
.cinema-title em{font-weight:600;color:var(--white);font-style:italic}
.cinema-title--xl{font-size:clamp(3.5rem,9vw,9rem);max-width:none}

.villa-premium-badge{
    display:inline-block;
    border:1px solid var(--gold);
    color:var(--gold-lt);
    font-size:.65rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
    padding:6px 18px;margin-bottom:16px;
}

.cinema-specs{
    display:flex;gap:24px;flex-wrap:wrap;
    margin-bottom:32px;
}
.cinema-body--right .cinema-specs{justify-content:flex-end}
.cinema-body--center .cinema-specs{justify-content:center}
.cinema-specs li{
    color:var(--onDm);
    font-size:.72rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;
    position:relative;
}
.cinema-specs li:not(:last-child)::after{
    content:'·';position:absolute;right:-14px;color:var(--gold);opacity:.5;
}
.cinema-specs--center li:not(:last-child)::after{right:-14px}

.cinema-btn{
    display:inline-flex;align-items:center;gap:16px;
    color:var(--white);
    font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
    border:1px solid rgba(255,255,255,.35);
    padding:14px 32px;
    position:relative;overflow:hidden;
    transition:color var(--t4);
}
.cinema-btn::before{
    content:'';
    position:absolute;inset:0;
    background:var(--gold);
    transform:scaleX(0);transform-origin:left;
    transition:transform var(--t4);
    z-index:-1;
}
.cinema-btn:hover{border-color:var(--gold)}
.cinema-btn:hover::before{transform:scaleX(1)}

/* ═══════════════════════════════════════════════════
   DETAIL SECTIONS
═══════════════════════════════════════════════════ */
.detail{
    background:var(--cream);
    padding:var(--section) var(--gutter);
}
.detail--alt{background:var(--white)}
.detail--dark{background:var(--forest)}

.detail-wrap{
    max-width:1200px;margin:0 auto;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(32px,5vw,72px);
    align-items:start;
}
.detail--alt .detail-wrap{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}

/* ── TRIPTYCH ────────────────────────────────────── */
.triptych{display:flex;flex-direction:column;gap:10px}

.trip-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    grid-template-rows:260px 260px;
    gap:4px;overflow:hidden;position:relative;
    box-shadow:var(--shadow);
}
.trip-main{grid-row:1/3;position:relative;overflow:hidden;cursor:pointer}
.trip-cell{position:relative;overflow:hidden;cursor:pointer}
.trip-main img,.trip-cell img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .7s var(--ease),filter .4s;
}
.trip-main:hover img,.trip-cell:hover img{transform:scale(1.07);filter:brightness(1.06)}
.trip-more{
    position:absolute;inset:0;
    background:rgba(11,31,24,.65);backdrop-filter:blur(3px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:var(--white);pointer-events:none;z-index:2;
}
.trip-more span{font-family:'Cormorant Garant',serif;font-size:2.8rem;font-weight:600;line-height:1}
.trip-more small{font-size:.68rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-top:4px}
.villa-chip{
    position:absolute;top:14px;left:14px;z-index:10;
    background:rgba(11,31,24,.8);backdrop-filter:blur(6px);
    border:1px solid var(--gold);
    color:var(--gold-lt);font-size:.65rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    padding:5px 14px;pointer-events:none;
}

.trip-all-btn{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--mid);
    font-size:.68rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
    border:none;background:none;padding:4px 0;
    border-bottom:1px solid var(--line-l);
    transition:color var(--t4),border-color var(--t4);
    width:fit-content;
}
.trip-all-btn svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}
.trip-all-btn:hover{color:var(--ink);border-color:var(--gold)}
.detail--dark .trip-all-btn{color:var(--onDm);border-color:var(--line-d)}
.detail--dark .trip-all-btn:hover{color:var(--white);border-color:var(--gold)}

.trip-strip{
    display:flex;gap:4px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.trip-strip::-webkit-scrollbar{display:none}
.trip-thumb{
    flex-shrink:0;width:64px;height:48px;
    overflow:hidden;opacity:.55;
    border:1.5px solid transparent;cursor:pointer;
    transition:opacity .2s,border-color .2s,transform .2s;
}
.trip-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.trip-thumb:hover{opacity:.85;transform:translateY(-2px)}

/* ── DETAIL INFO ─────────────────────────────────── */
.detail-tag{
    display:block;
    font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;
}
.detail--dark .detail-tag{color:var(--gold-lt)}

.detail-name{
    font-family:'Cormorant Garant',serif;
    font-size:clamp(2rem,3.5vw,3.2rem);
    font-weight:300;
    color:var(--forest);
    margin-bottom:20px;line-height:1.1;
}
.detail--dark .detail-name{color:var(--white)}

.detail-desc{
    color:var(--mid);font-size:.93rem;font-weight:300;
    line-height:1.85;max-width:420px;
    margin-bottom:32px;
}
.detail--dark .detail-desc{color:var(--onDm)}

/* Specs grid */
.detail-specs-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:0;
    border-top:1px solid var(--line-l);
    border-left:1px solid var(--line-l);
    margin-bottom:32px;
}
.detail--dark .detail-specs-grid{border-color:var(--line-d)}
.dspec{
    padding:16px 12px;
    border-right:1px solid var(--line-l);
    border-bottom:1px solid var(--line-l);
    text-align:center;
}
.detail--dark .dspec{border-color:var(--line-d)}
.dspec strong{
    display:block;
    font-family:'Cormorant Garant',serif;
    font-size:1.4rem;font-weight:600;
    color:var(--forest);line-height:1;margin-bottom:4px;
}
.detail--dark .dspec strong{color:var(--white)}
.dspec span{font-size:.65rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.detail--dark .dspec span{color:var(--onDl)}

/* Amenities */
.detail-amenities{
    display:flex;flex-direction:column;gap:10px;
    margin-bottom:32px;
    padding-left:0;
}
.detail-amenities li{
    display:flex;align-items:center;gap:12px;
    font-size:.85rem;font-weight:300;color:var(--mid);
    padding-bottom:10px;border-bottom:1px solid var(--line-l);
}
.detail--dark .detail-amenities li{color:var(--onDm);border-color:var(--line-d)}
.detail-amenities li:last-child{border-bottom:none}
.detail-amenities svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}

/* Location */
.detail-location{
    margin-bottom:32px;
    padding:20px;
    border:1px solid var(--line-l);
    display:flex;flex-direction:column;gap:12px;
}
.detail--dark .detail-location{border-color:var(--line-d)}
.dloc-addr{
    display:flex;align-items:flex-start;gap:12px;
    font-size:.85rem;font-weight:300;
}
.dloc-addr svg{width:14px;height:14px;color:var(--gold);flex-shrink:0;margin-top:4px}
.dloc-addr strong{display:block;color:var(--forest);margin-bottom:3px;font-weight:500;font-size:.88rem}
.detail--dark .dloc-addr strong{color:var(--white)}
.dloc-addr span{color:var(--mid);font-size:.82rem}
.detail--dark .dloc-addr span{color:var(--onDm)}
.dloc-dist{
    display:flex;flex-wrap:wrap;gap:16px;
    padding-left:26px;
}
.dloc-dist span{font-size:.75rem;font-weight:300;color:var(--muted);letter-spacing:.05em}
.detail--dark .dloc-dist span{color:var(--onDl)}

.btn-map{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--forest);font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    border-bottom:1px solid var(--line-l);
    padding-bottom:3px;margin-left:0;
    transition:color var(--t4),border-color var(--t4);
    width:fit-content;margin-left:26px;
}
.btn-map svg{width:12px;height:12px;opacity:.5}
.btn-map:hover{color:var(--gold);border-color:var(--gold)}
.detail--dark .btn-map{color:var(--onDm);border-color:var(--line-d)}
.detail--dark .btn-map:hover{color:var(--gold-lt)}

/* CTA row */
.detail-cta{
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    padding-top:24px;border-top:1px solid var(--line-l);
}
.detail--dark .detail-cta{border-color:var(--line-d)}
.detail-price{
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.detail-price .detail-price-note{font-size:.72rem;font-style:italic;color:var(--muted);width:100%;margin-top:2px;text-transform:none;letter-spacing:0}
.detail-price span{font-size:.68rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.detail--dark .detail-price span{color:var(--onDl)}
.detail-price strong{
    font-family:'Cormorant Garant',serif;
    font-size:2.4rem;font-weight:600;
    color:var(--forest);line-height:1;
}
.detail--dark .detail-price strong{color:var(--white)}

.btn-reserve{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--forest);color:var(--white);
    font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    padding:14px 30px;
    position:relative;overflow:hidden;
    transition:background var(--t4);
}
.btn-reserve::after{
    content:'→';position:absolute;right:-20px;
    transition:right var(--t4);
    font-size:.9rem;
}
.btn-reserve:hover{background:var(--forest2)}
.btn-reserve:hover::after{right:16px}
.btn-reserve--gold{background:var(--gold)}
.btn-reserve--gold:hover{background:var(--gold-lt)}

/* ═══════════════════════════════════════════════════
   EXPÉRIENCES
═══════════════════════════════════════════════════ */
.xp-section{
    background:var(--forest);
    padding:var(--section) var(--gutter);
}
.xp-header{
    max-width:1200px;margin:0 auto;
    width:100%;
    text-align:center;margin-bottom:60px;
}
.xp-eyebrow{
    font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);display:block;margin-bottom:16px;
}
.xp-title{
    color:var(--white);font-weight:300;
    font-size:clamp(2rem,4.5vw,4rem);
}
.xp-title em{font-style:italic;font-weight:600;color:var(--white)}

.xp-grid{
    max-width:1200px;margin:0 auto;
    width:100%;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;margin-bottom:60px;
}
.xp-card{position:relative;overflow:hidden;aspect-ratio:3/4;cursor:default}
.xp-card-img{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    transition:transform .8s var(--ease),filter .5s;
}
.xp-card:hover .xp-card-img{transform:scale(1.06);filter:brightness(1.1)}
.xp-card::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(11,31,24,.85) 0%,transparent 55%);
}
.xp-card-body{
    position:absolute;bottom:0;left:0;right:0;
    padding:28px;z-index:1;
}
.xp-card-body h3{
    color:var(--white);font-family:'Cormorant Garant',serif;
    font-size:1.4rem;font-weight:400;margin-bottom:8px;
}
.xp-card-body p{color:var(--onDm);font-size:.82rem;font-weight:300;line-height:1.6}

.xp-footer{
    max-width:1200px;margin:0 auto;
    width:100%;
    text-align:center;
}
.btn-outline{
    display:inline-flex;align-items:center;gap:12px;
    border:1px solid rgba(255,255,255,.3);
    color:var(--white);
    font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    padding:14px 36px;
    transition:background var(--t4),border-color var(--t4);
}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ═══════════════════════════════════════════════════
   MAP SECTION
═══════════════════════════════════════════════════ */
.map-section{
    background:var(--cream2);
    padding:var(--section) var(--gutter);
}
.map-intro{
    max-width:1200px;margin:0 auto;
    width:100%;
    text-align:center;margin-bottom:48px;
}
.map-sub{color:var(--mid);font-size:.9rem;font-weight:300;margin-top:14px}
.map-intro .xp-title{color:var(--forest);font-size:clamp(2rem,4vw,3.6rem)}
.map-intro .xp-title em{color:var(--forest)}
.map-intro .xp-eyebrow{color:var(--gold)}

.map-selector-row{
    max-width:1200px;margin:0 auto 28px;
    width:100%;
    display:flex;gap:2px;flex-wrap:wrap;
}
.msel{
    flex:1;
    display:flex;align-items:center;gap:14px;
    padding:16px 20px;
    background:var(--white);
    border:1px solid transparent;
    cursor:pointer;text-align:left;
    transition:var(--t4);
}
.msel:hover,.msel.active{
    background:var(--forest);
    border-color:var(--forest);
}
.msel-n{
    font-family:'Cormorant Garant',serif;
    font-size:1.5rem;font-weight:600;
    color:var(--gold);min-width:32px;
    transition:color var(--t4);
}
.msel:hover .msel-n,.msel.active .msel-n{color:var(--gold-lt)}
.msel-t{
    font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
    color:var(--mid);
    transition:color var(--t4);
}
.msel-t em{font-style:normal;color:var(--muted);margin-left:4px}
.msel:hover .msel-t,.msel.active .msel-t{color:var(--white)}
.msel:hover .msel-t em,.msel.active .msel-t em{color:var(--onDm)}

.map-frame-wrap{
    max-width:1200px;margin:0 auto;
    width:100%;
    position:relative;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.map-frame-wrap iframe{display:block;width:100%;height:420px;border:none;filter:grayscale(15%)}
.map-open{
    position:absolute;bottom:14px;right:14px;
    background:var(--forest);color:var(--white);
    font-size:.65rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    padding:10px 18px;
    transition:background var(--t4);
    z-index:5;
}
.map-open:hover{background:var(--gold)}

/* ═══════════════════════════════════════════════════
   BOOKING
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════
   SECTION RÉSERVATION — Design split premium
═══════════════════════════════════════════════════ */

/* ── Section & fond ── */
.booking-section {
  position: relative;
  overflow: hidden;
}

.bk-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bk-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) brightness(.38);
}
.bk-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(4,10,20,.97) 0%,
    rgba(7,16,30,.93) 45%,
    rgba(10,20,36,.9) 100%
  );
}

/* ── Layout 2 colonnes ── */
.bk-layout {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(64px,9vw,110px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px,6vw,80px);
  align-items: start;
}

/* ── Colonne gauche ── */
.bk-left {
  position: sticky;
  top: 96px;
}
.bk-left-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* En-tête */
.bk-eyebrow {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #c9a96e);
}
.bk-title {
  font-family: 'Cormorant Garant', serif;
  font-size: clamp(2.4rem, 4vw, 3.7rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
}
.bk-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold, #c9a96e);
}
.bk-subtitle {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .05em;
  line-height: 1.7;
}

/* Badges de confiance */
.bk-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.bk-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bk-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.28);
  background: rgba(201,169,110,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold, #c9a96e);
}
.bk-trust-icon svg { width: 17px; height: 17px; }
.bk-trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bk-trust-text strong {
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
}
.bk-trust-text span {
  font-size: .7rem;
  color: rgba(255,255,255,.32);
}

/* Contacts */
.bk-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-clink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  color: rgba(255,255,255,.36);
  transition: color .2s;
  letter-spacing: .04em;
  text-decoration: none;
}
.bk-clink svg { width: 14px; height: 14px; color: var(--gold, #c9a96e); flex-shrink: 0; }
.bk-clink:hover { color: rgba(255,255,255,.72); }
.bk-csep { display: none; }

/* ── Colonne droite ── */
.bk-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Barre de progression */
.bk-progress {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  margin-bottom: 4px;
}
.bk-prog-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bk-prog-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.03);
  transition: all .3s;
  flex-shrink: 0;
}
.bk-prog-lbl {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  transition: color .3s;
}
.bk-prog-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.09);
  min-width: 28px;
  max-width: 56px;
  transition: background .3s;
}
.bk-prog-item.active .bk-prog-num {
  background: var(--gold, #c9a96e);
  border-color: var(--gold, #c9a96e);
  color: #1a1209;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(201,169,110,.45);
}
.bk-prog-item.active .bk-prog-lbl { color: var(--gold, #c9a96e); }
.bk-prog-item.done .bk-prog-num {
  background: rgba(201,169,110,.14);
  border-color: var(--gold, #c9a96e);
  color: var(--gold, #c9a96e);
}
.bk-prog-item.done .bk-prog-lbl { color: rgba(201,169,110,.5); }
.bk-prog-item.done + .bk-prog-line { background: rgba(201,169,110,.22); }

/* Panneaux étapes */
.bk-panel {
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: clamp(20px,3.5vw,34px);
  animation: panelIn .32s ease;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-step--hidden { display: none !important; }

.bk-panel-label {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 20px;
}
.bk-panel-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.bk-panel-top .bk-panel-label { margin-bottom: 0; flex: 1; }
.bk-hint {
  font-size: .68rem;
  color: rgba(255,255,255,.22);
  font-style: italic;
}

/* Bouton retour */
.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.38);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: .7rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
}
.bk-back svg { width: 13px; height: 13px; }
.bk-back:hover {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.07);
}

/* ── Cartes logement ── */
.bk-prop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-prop {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #fff;
  transition: background .22s, border-color .22s, box-shadow .22s, transform .22s;
  width: 100%;
}
.bk-prop:hover {
  background: rgba(201,169,110,.07);
  border-color: rgba(201,169,110,.32);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.bk-prop.active {
  background: rgba(201,169,110,.1);
  border-color: var(--gold, #c9a96e);
  box-shadow: 0 0 0 1px rgba(201,169,110,.22), 0 8px 28px rgba(201,169,110,.08);
  transform: none;
}
.bk-prop-thumb {
  width: 90px;
  height: 68px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.07);
}
.bk-prop-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bk-prop-tag {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold, #c9a96e);
  opacity: .82;
}
.bk-prop-name {
  font-size: 1.02rem;
  font-weight: 400;
  font-family: 'Cormorant Garant', serif;
  letter-spacing: .02em;
}
.bk-prop-meta {
  font-size: .7rem;
  color: rgba(255,255,255,.33);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-prop-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.bk-prop-price {
  font-size: .7rem;
  color: rgba(255,255,255,.38);
  text-align: right;
  line-height: 1;
}
.bk-prop-price strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 1px;
}
.bk-prop-price small { font-size: .62rem; }
.bk-prop-arr {
  width: 16px; height: 16px;
  color: var(--gold, #c9a96e);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s, transform .2s;
}
.bk-prop:hover .bk-prop-arr,
.bk-prop.active .bk-prop-arr {
  opacity: 1;
  transform: translateX(0);
}

/* Résumé dates */
.date-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(201,169,110,.07);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 12px;
  padding: 13px 18px;
  margin-bottom: 22px;
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  flex-wrap: wrap;
}
.date-nights {
  background: var(--gold, #c9a96e);
  color: #1a1209;
  font-weight: 600;
  font-size: .7rem;
  padding: 4px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Grille formulaire */
.bk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-bottom: 4px;
}
.fg--full { grid-column: 1 / -1; }
.fg { display: flex; flex-direction: column; gap: 7px; }
.fg label {
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
}
.fg input,
.fg textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  padding: 12px 14px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 300;
  outline: none;
  transition: border-color .2s, background .2s;
}
.fg input::placeholder,
.fg textarea::placeholder { color: rgba(255,255,255,.17); }
.fg input:focus,
.fg textarea:focus {
  border-color: rgba(201,169,110,.5);
  background: rgba(201,169,110,.04);
}
.fg textarea { resize: none; min-height: 82px; }

/* Sélecteur voyageurs */
.sel-wrap { position: relative; }
.sel-wrap select {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  padding: 12px 32px 12px 14px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 300;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.sel-wrap select option { background: #1a2030; color: #fff; }
.sel-wrap select:focus { border-color: rgba(201,169,110,.5); }
.sel-wrap > svg {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: rgba(255,255,255,.3);
  pointer-events: none;
}

/* Bouton soumettre */
.bk-form-submit {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #d4ad6d 0%, #c9a96e 55%, #b8924c 100%);
  color: #1a1209;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(201,169,110,.22);
}
.btn-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.13);
  opacity: 0;
  transition: opacity .2s;
}
.btn-submit:hover::after { opacity: 1; }
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(201,169,110,.38);
}
.btn-submit:active { transform: none; box-shadow: 0 2px 8px rgba(201,169,110,.18); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-submit svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-spin {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(26,18,9,.25);
  border-top-color: #1a1209;
  border-radius: 50%;
  animation: spin .75s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-note {
  text-align: center;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .bk-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: clamp(56px,8vw,80px);
    padding-bottom: clamp(56px,8vw,80px);
  }
  .bk-left { position: static; }
  .bk-trust-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .bk-trust-item { flex: 1; min-width: 150px; }
  .bk-contact { flex-direction: row; flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 600px) {
  .bk-prop-meta  { display: none; }
  .bk-form-grid  { grid-template-columns: 1fr; }
  .fg--full      { grid-column: auto; }
  .bk-panel-top  { flex-direction: column; align-items: flex-start; }
  .bk-trust-list { flex-direction: column; }
  .bk-prop { grid-template-columns: 72px 1fr auto; }
  .bk-prop-thumb { width: 72px; height: 56px; }
}
/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer{
    background:var(--forest2);
    color:var(--onDm);
    padding:80px var(--gutter) 40px;
}
.footer-inner{
    max-width:1200px;margin:0 auto;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,60px);
    padding-bottom:60px;margin-bottom:40px;
    border-bottom:1px solid var(--line-d);
}
.footer-logo{
    font-family:'Cormorant Garant',serif;
    font-size:1.2rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;
    color:var(--white);margin-bottom:10px;
}
.footer-tagline{
    font-size:.78rem;font-weight:300;font-style:italic;
    font-family:'Cormorant Garant',serif;
    color:var(--onDm);margin-bottom:20px;
}
.footer-addr{font-size:.78rem;font-weight:300;line-height:2}
.footer-addr a{transition:color var(--t4)}
.footer-addr a:hover{color:var(--gold-lt)}
.footer-nav h4{
    font-size:.65rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    color:var(--onDl);margin-bottom:20px;
}
.footer-nav ul{display:flex;flex-direction:column;gap:12px}
.footer-nav li{font-size:.8rem;font-weight:300}
.footer-nav span{color:var(--onDl);font-size:.72rem}
.footer-nav a{transition:color var(--t4)}
.footer-nav a:hover{color:var(--gold-lt)}
.footer-reserve h4{font-size:.65rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--onDl);margin-bottom:8px}
.footer-reserve > p{font-size:.78rem;color:var(--onDl);margin-bottom:20px}
.footer-reserve .btn-outline{padding:12px 24px;font-size:.65rem;width:100%;justify-content:center}
.footer-bottom{
    max-width:1200px;margin:0 auto;
    width:100%;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
    font-size:.68rem;font-weight:300;letter-spacing:.06em;color:var(--onDl);
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════ */
.lightbox{position:fixed;inset:0;z-index:10000;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lightbox.open{opacity:1;pointer-events:all}
.lb-overlay{position:absolute;inset:0;background:rgba(5,12,10,.97)}
.lb-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:1400px;margin:0 auto}
.lb-topbar{display:flex;align-items:center;gap:14px;padding:16px 24px;flex-shrink:0;border-bottom:1px solid var(--line-d)}
.lb-name{font-family:'Cormorant Garant',serif;font-size:1rem;font-style:italic;font-weight:300;color:var(--white);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-counter{font-size:.65rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--onDl);white-space:nowrap}
.lb-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--onDm);border:1px solid var(--line-d);transition:color var(--t4),border-color var(--t4);flex-shrink:0}
.lb-close svg{width:16px;height:16px}
.lb-close:hover{color:var(--white);border-color:rgba(255,255,255,.4)}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:0}
.lb-img-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px 72px}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s;user-select:none;box-shadow:0 32px 100px rgba(0,0,0,.6)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--onDm);border:1px solid var(--line-d);transition:color var(--t4),border-color var(--t4),transform var(--t4);z-index:5}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-prev:hover,.lb-next:hover{color:var(--white);border-color:var(--gold);transform:translateY(-50%) scale(1.05)}
.lb-prev svg,.lb-next svg{width:20px;height:20px}
.lb-strip-wrap{padding:10px 20px 16px;flex-shrink:0;border-top:1px solid var(--line-d)}
.lb-strip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lb-strip::-webkit-scrollbar{display:none}
.lb-thumb{flex-shrink:0;width:68px;height:50px;overflow:hidden;border:1.5px solid transparent;cursor:pointer;opacity:.45;transition:opacity .2s,border-color .2s,transform .2s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.lb-thumb:hover{opacity:.75;transform:translateY(-2px)}
.lb-thumb.active{border-color:var(--gold);opacity:1}

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:12px;background:var(--toast-bg,var(--forest));border:1px solid var(--gold);color:var(--white);padding:16px 20px;max-width:300px;transform:translateY(120px);opacity:0;transition:var(--t6);pointer-events:none}
.toast.show{transform:none;opacity:1;pointer-events:all}
.toast-icon{width:26px;height:26px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0;color:var(--gold)}
.toast-body strong{display:block;font-size:.82rem;margin-bottom:2px}
.toast-body span{font-size:.72rem;color:var(--onDm);font-weight:300}
.toast-close{margin-left:auto;color:var(--onDm);font-size:1.1rem;padding:4px;transition:color var(--t4)}
.toast-close:hover{color:var(--white)}

/* ═══════════════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════════════ */
.back-top{position:fixed;bottom:24px;left:24px;z-index:999;width:40px;height:40px;background:var(--forest);color:var(--white);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-d);opacity:0;transform:scale(0);transition:var(--t4)}
.back-top.show{opacity:1;transform:scale(1)}
.back-top:hover{background:var(--gold);border-color:var(--gold)}
.back-top svg{width:16px;height:16px}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.on{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-l.on{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-r.on{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1100px){
    .detail-wrap,.detail--alt .detail-wrap{grid-template-columns:1fr;gap:48px}
    .detail--alt .detail-gallery{order:-1}
    .booking-inner{grid-template-columns:1fr;gap:48px}
    .footer-inner{grid-template-columns:1fr 1fr;gap:40px}
    .xp-grid{grid-template-columns:repeat(3,1fr)}
}
/* Le scrim s affiche uniquement quand le drawer est ouvert */
.nav-drawer.open ~ .nav-scrim{display:block}

@media(max-width:768px){
    :root{--section:72px;--gutter:24px}
    .nav-links{display:none}
    .nav-ham{display:flex}
    .nav-inner{grid-template-columns:1fr auto;position:relative}
    .nav-logo{justify-self:auto}
    .hero-eyebrow::before,.hero-eyebrow::after{width:20px}
    .cinema-specs{gap:16px}
    .xp-grid{grid-template-columns:1fr 1fr}
    .map-selector-row{flex-direction:column;gap:2px}
    .trip-grid{grid-template-columns:1fr 1fr;grid-template-rows:180px 180px;gap:3px}
    .trip-main{grid-row:1;grid-column:1/3}
    .trip-cell:nth-child(n+4){display:none}
    .trip-cell:nth-child(2),.trip-cell:nth-child(3){grid-row:2}
    .detail-specs-grid{grid-template-columns:repeat(2,1fr)}
    .form-row{grid-template-columns:1fr}
    .booking-form{padding:28px 20px}
    .footer-inner{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;text-align:center}
    .lb-img-wrap{padding:10px 52px}
    .lb-prev{left:6px}.lb-next{right:6px}
}
@media(max-width:500px){
    .xp-grid{grid-template-columns:1fr}
    .cinema-specs{flex-wrap:wrap}
    .trip-grid{grid-template-columns:1fr;grid-template-rows:280px}
    .trip-main{grid-row:1;grid-column:1}
    .trip-cell{display:none}
    .detail-specs-grid{grid-template-columns:repeat(2,1fr)}
    .cinema-body--center .cinema-specs{flex-direction:column;align-items:center;gap:10px}
    .cinema-specs li::after{display:none}
    .lb-img-wrap{padding:8px 40px}
    .lb-prev,.lb-next{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .scroll-line,.hero-scroll{animation:none}
}


/* Calendrier */
.bk-calendar {
  width: 100%;
}

.cal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: rgba(255,255,255,.5);
  font-size: .9rem;
}

.cal-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--gold,#c9a96e);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Navigation mois */
.cal-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border-radius: 6px;
  width: 36px; height: 36px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover:not(:disabled) {
  background: rgba(201,169,110,.15);
  border-color: var(--gold,#c9a96e);
  color: var(--gold,#c9a96e);
}
.cal-nav-btn:disabled { opacity: .3; cursor: default; }

/* Deux mois côte à côte */
.cal-months-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .cal-months-wrap { grid-template-columns: 1fr; }
}

/* Mois individuel */
.cal-month-title {
  text-align: center;
  font-size: .85rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cal-daynames {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cal-daynames span {
  text-align: center;
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Cellules */
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: .8rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  color: rgba(255,255,255,.8);
  font-family: inherit;
}
.cal-day-num {
  line-height: 1;
  font-size: .82rem;
}
.cal-day-price {
  font-size: .58rem;
  color: rgba(201,169,110,.75);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.cal-in-range .cal-day-price,
.cal-sel-start .cal-day-price,
.cal-sel-end .cal-day-price {
  color: rgba(201,169,110,1);
}
.cal-empty  { visibility: hidden; pointer-events: none; }

/* États */
.cal-avail:hover {
  background: rgba(201,169,110,.2);
  border-color: rgba(201,169,110,.4);
  color: #fff;
}
/* Disponible = léger vert */
.cal-avail {
  color: rgba(255,255,255,.8);
}

/* Réservé = rouge clair */
.cal-blocked {
  background: rgba(200,60,60,.12);
  color: rgba(220,80,80,.6);
  text-decoration: line-through;
  cursor: not-allowed;
  border-color: rgba(200,60,60,.15);
}

/* Passé = gris */
.cal-past {
  color: rgba(255,255,255,.2);
  cursor: not-allowed;
}

/* Dans la sélection */
.cal-in-range {
  background: rgba(201,169,110,.18);
  color: #fff;
  border-radius: 0;
  border-color: transparent;
}

/* Début/fin de sélection */
.cal-sel-start,
.cal-sel-end {
  background: var(--gold,#c9a96e);
  color: #1a1209;
  font-weight: 600;
  border-color: transparent;
}
.cal-sel-start { border-radius: 6px 0 0 6px; }
.cal-sel-end   { border-radius: 0 6px 6px 0; }

/* Animation secouement si plage invalide */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.cal-shake { animation: shake .4s ease; }

/* Légende */
.cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cal-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: rgba(255,255,255,.4);
}
.leg {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.leg--avail { background: rgba(201,169,110,.3); border: 1px solid rgba(201,169,110,.5); }
.leg--block { background: rgba(200,60,60,.3);   border: 1px solid rgba(200,60,60,.4);   }
.leg--sel   { background: var(--gold,#c9a96e); }

/* Résumé dates sélectionnées */
.date-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(201,169,110,.1);
  border: 1px solid rgba(201,169,110,.25);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: .9rem;
}
.date-nights {
  background: var(--gold,#c9a96e);
  color: #1a1209;
  font-weight: 600;
  font-size: .8rem;
  padding: 3px 10px;
  border-radius: 20px;
}


/* ── DATE SUMMARY PRICING ─────────────────────── */
.date-price {
  font-size: .85rem;
  color: var(--gold, #c9a96e);
  font-weight: 600;
  margin-left: auto;
}
.date-price strong { font-size: 1rem; }
.date-notes {
  width: 100%;
  font-size: .75rem;
  font-style: italic;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}
.date-nights--warn {
  background: #e67e22 !important;
  color: #fff !important;
}
.date-summary--error {
  border-color: rgba(231,76,60,.4) !important;
  background: rgba(231,76,60,.08) !important;
}

/* ── ALERTE DURÉE MINIMUM ───────────────────────── */
.date-min-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(230, 126, 34, 0.12);
  border: 1px solid rgba(230, 126, 34, 0.45);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: .85rem;
  color: rgba(255,255,255,.9);
  line-height: 1.45;
}
.date-min-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.date-min-warning strong {
  color: #f39c12;
}
.date-summary--muted {
  opacity: .5;
  pointer-events: none;
}

/* ── Champs enfants (réservation) ── */
.bk-field-note {
  font-size: .55rem;
  color: rgba(201,169,110,.7);
  font-weight: 400;
  letter-spacing: .06em;
  margin-left: 4px;
}
.child-ages-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.child-age-input {
  flex: 1;
  min-width: 90px;
  max-width: 130px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: .85rem;
  transition: border-color .2s;
  -moz-appearance: textfield;
}
.child-age-input::-webkit-inner-spin-button,
.child-age-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.child-age-input::placeholder { color: rgba(255,255,255,.3); }
.child-age-input:focus {
  outline: none;
  border-color: rgba(201,169,110,.5);
}
.child-ages-wrap label { display: flex; align-items: center; gap: 0; }

/* ── Spec enfants dans le descriptif logement ── */
.dspec--children strong { color: var(--gold, #c4965a); }
.dspec--children span em {
  display: block;
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--muted, rgba(0,0,0,.45));
  margin-top: 2px;
}
