:root{
  --bg:#0d0b0a; --fg:#f3eadc; --muted:#cbbfae;
  --brand:#d9a441; --brand-2:#b8862b; --paper:#171411; --border:#2b2621; --ink:#0a0a0a;
  --accent:#f59e0b;
}
:root[data-theme="light"]{
  --bg:#ffffff; --fg:#1f2937; --muted:#6b7280;
  --brand:#d9a441; --brand-2:#b8862b; --paper:#ffffff; --border:#e5e7eb; --ink:#111827; --accent:#b45309;
}
:root[data-theme="sepia"]{
  --bg:#1b1612; --fg:#f2e7d3; --muted:#cbb9a0;
  --brand:#caa157; --brand-2:#a97b2f; --paper:#201a15; --border:#3a2f27; --ink:#110e0b; --accent:#d28b26;
}
*{box-sizing:border-box} html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Work Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,sans-serif;line-height:1.6;overflow-x:hidden;opacity:0;transition:opacity .3s ease}
body.ready{opacity:1}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);mix-blend-mode:multiply}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:url('/assets/img/grain.png');opacity:.14;mix-blend-mode:overlay}
.container{max-width:1440px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:80;backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(12,10,9,.9),rgba(12,10,9,.55));border-bottom:1px solid var(--border)}
:root[data-theme="light"] .header{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75))}
.header .row{display:flex;align-items:center;gap:18px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:48px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));animation:logoFloat 8s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.brand-text{font-family:"Playfair Display",serif;font-weight:700;letter-spacing:.2px}
.brand-tag{font-size:12px;color:#d9a441}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#111;color:#fff;padding:8px 10px;border-radius:8px;z-index:1000}
nav a{color:var(--fg);text-decoration:none;padding:10px 12px;border-radius:10px;position:relative}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,var(--brand),transparent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav a:hover::after{transform:scaleX(1)}
a:focus, button:focus, .btn:focus, .btn-outline:focus, .theme-select:focus{outline:3px solid var(--brand); outline-offset:2px}
.theme-toggle{border:1px solid var(--border);background:var(--paper);color:var(--fg);padding:8px 10px;border-radius:12px;cursor:pointer}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-select{border:1px solid var(--border);background:var(--paper);color:var(--fg);padding:8px 8px;border-radius:12px}
.promo{position:sticky; top:0; z-index:90; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#111; text-align:center; padding:8px 12px; border-bottom:1px solid rgba(0,0,0,.25)}
.promo .close{float:right; margin-right:6px; background:transparent; border:0; font-weight:700; cursor:pointer}
.promo .copy{margin-left:10px; border:1px solid rgba(0,0,0,.25); background:rgba(255,255,255,.5); border-radius:8px; padding:2px 6px; cursor:pointer}
@media(min-width:901px){
  body{cursor:none}
  .cursor-dot,.cursor-outline{position:fixed;pointer-events:none;z-index:1000;mix-blend-mode:difference}
  .cursor-dot{width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
  .cursor-outline{width:26px;height:26px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .15s, height .15s, opacity .15s}
  .cursor-click{width:14px;height:14px;opacity:.7}
}
.btn{position:relative;display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#0f0f0f;font-weight:800;border:1px solid rgba(0,0,0,.25);box-shadow:0 10px 30px rgba(217,164,65,.18);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 40px rgba(217,164,65,.25)}
.btn::before{content:"";position:absolute;top:-50%;left:-20%;width:30%;height:200%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-20deg) translateX(-120%);transition:transform .6s ease}
.btn:hover::before{transform:skewX(-20deg) translateX(320%)}
.ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);animation:ripple .5s ease-out forwards}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(10);opacity:0}}
.btn-outline{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;background:transparent;border:1px dashed var(--border);color:var(--fg);transition:all .2s ease}
.btn-outline:hover{transform:translateY(-2px);border-style:solid}
.parallax:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .05s}
.parallax{transition:transform .3s ease}
.hero{padding:56px 0 16px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}
@media(min-width:980px){.grid-2{grid-template-columns:1.2fr .8fr}}
.card{background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
h1{font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,48px);margin:0 0 8px}
h2{font-family:"Playfair Display",serif;font-size:clamp(22px,3vw,32px);margin:0 0 12px}
h3{font-weight:700;font-size:20px;margin:0 0 8px}
.muted{color:var(--muted)}
.section{padding:28px 0}
.features{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{padding:16px;border:1px dashed var(--border);border-radius:12px;background:#14110e}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:780px){.gallery{grid-template-columns:repeat(4,1fr)}}
.polaroid{position:relative;background:#fff;color:#1f2937;border-radius:10px;padding:10px 10px 18px;box-shadow:0 18px 30px rgba(0,0,0,.35);transform:rotate(var(--r,-2deg)) translateY(0);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;filter:sepia(.18) contrast(.95) saturate(.9)}
.polaroid img{width:100%;height:auto;border-radius:6px;display:block}
.polaroid::after{content:"";position:absolute;inset:-10px;pointer-events:none;background:url('/assets/img/film-frame.png') center/cover no-repeat;opacity:.6}
.polaroid small{display:block;text-align:center;margin-top:6px;color:#374151;font-weight:600}
.polaroid:hover{transform:rotate(0deg) translateY(-4px) scale(1.02);box-shadow:0 26px 50px rgba(0,0,0,.5);filter:sepia(.05)}
.gallery .polaroid:nth-child(odd){--r:-3deg}.gallery .polaroid:nth-child(even){--r:2deg}.gallery .polaroid:nth-child(3n){--r:4deg}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.carousel{position:relative;overflow:hidden}
.slide{min-height:140px;opacity:0;transform:translateX(20px);transition:opacity .4s, transform .4s}
.slide.active{opacity:1;transform:translateX(0)}
.carousel .dots{display:flex;gap:6px;margin-top:10px}
.carousel .dot{width:8px;height:8px;border-radius:999px;background:#6b7280;border:0}
.carousel .dot.active{background:var(--brand)}
.faq-item{border:1px solid var(--border);border-radius:12px;margin:10px 0;overflow:hidden;background:#14110e}
.faq-q{padding:14px 16px;display:flex;justify-content:space-between;cursor:pointer}
.faq-a{padding:0 16px 16px;display:none;color:var(--muted)}
.faq-item.open .faq-a{display:block}
.bookbar{position:sticky;bottom:10px;z-index:60;display:flex;justify-content:center}
.bookbar .inner{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#111;padding:10px 16px;border-radius:999px;box-shadow:0 6px 22px rgba(217,164,65,.25)}
#progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));width:0;z-index:85}
#insta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){#insta-grid{grid-template-columns:repeat(6,1fr)}}
.insta-item{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--border);background:#111}
.insta-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;display:block}
.insta-item:hover img{transform:scale(1.06)}
.insta-item .cap{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));color:#eee;font-size:12px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lightbox .actions{position:fixed;bottom:20px;display:flex;gap:10px}
.star{color:var(--brand)}
.footer{border-top:1px solid var(--border);background:#0c0a09}
.footer a{color:#f3eadc;text-decoration:none}.footer a:hover{text-decoration:underline}
.mobile-nav{display:none}
@media(max-width:900px){nav{display:none}.mobile-nav{display:block}}
.alert{padding:12px 14px;background:#211c17;border:1px solid var(--border);border-radius:12px;color:#e9d7bd}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#1c1917;border:1px solid var(--border);border-radius:8px;padding:2px 6px}
.backtop{position:fixed;right:16px;bottom:16px;padding:10px 12px;border-radius:999px;background:#111;color:#fff;border:1px solid var(--border);opacity:.7}
.backtop:hover{opacity:1}
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:#161311;border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:none;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.consent.show{display:block}


/* --- HERO background fancy --- */
.hero{position:relative; overflow:hidden; background: radial-gradient(1200px 600px at 20% 0%, rgba(217,164,65,.10), transparent 55%),
                                     radial-gradient(1000px 500px at 100% 60%, rgba(217,164,65,.08), transparent 60%);}
.hero::before{content:""; position:absolute; inset:-30px; z-index:-1;
  background: url('/assets/img/paper-texture.jpg') center/cover no-repeat;
  opacity:.22; mix-blend-mode:overlay; filter:contrast(1.05) saturate(.9)}
.hero::after{content:""; position:absolute; inset:0; z-index:-2;
  background: radial-gradient(1200px 600px at 50% 110%, rgba(0,0,0,.45), transparent 60%);}

/* Clean header actions spacing */
.desktop-actions .theme-toggle{margin-left:6px}
.mobile-nav .theme-toggle{margin-left:6px}


/* --- Header animations & styles --- */
.header{
  transition: transform .24s ease, background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.header::before{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
  background-size: 200% 100%;
  animation: headerBar 6s linear infinite;
  opacity:.6;
}
@keyframes headerBar{0%{background-position:0% 0}100%{background-position:200% 0}}

.header .container{padding-top:10px; padding-bottom:10px}
.header .row{min-height:64px; transition:min-height .24s ease}

.header.compact{
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.header.compact .row{min-height:52px}
.header.compact .logo img{height:36px}
.header.compact .brand-text{font-size:18px}
.header.compact .brand-tag{font-size:11px}

@media (max-width:900px){
  .header.hidden{transform:none} /* ne pas cacher le header en mobile */
}

/* Hide-on-scroll (desktop) */
.header.hidden{
  transform: translateY(-100%);
}

/* --- Dropdown animation --- */
@keyframes menuPop{from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:none}}
.nav-group[open] .panel{animation: menuPop .18s ease both}


/* --- NAV groups (hover) --- */
nav .groups{display:flex; gap:14px; align-items:center; flex-wrap:nowrap; justify-content:center; width:100%}
.nav-group{position:relative; padding-bottom:12px}
.nav-group .label{display:inline-block; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--paper); color:var(--fg); font-weight:600}
.nav-group .panel{position:absolute; top:calc(100% + 8px); left:0; padding:10px; background:var(--paper); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.35); opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease; pointer-events:none; z-index:100; display:flex; gap:8px; align-items:center; white-space:nowrap; min-width:auto}
.nav-group:hover .panel, .nav-group:focus-within .panel{opacity:1; transform:translateY(0); pointer-events:auto}
.nav-group .panel a{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; border:1px dashed var(--border); background:var(--paper); color:var(--fg); text-decoration:none;}
.nav-group .panel a:hover{background:#14110e; border-style:solid}
.nav-group .label:hover{filter:brightness(1.06)}

/* --- Camera flash effect --- */
#flashfx{position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0;
  background:radial-gradient(600px 300px at 50% 60%, rgba(255,255,255,0.96), rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 70%)}
.flash-active #flashfx{animation:camFlash .5s ease-out}
 100%{opacity:0}}

/* --- FIX: Horizontal dropdown links --- */
nav .groups .nav-group .panel{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  min-width:auto !important;
}
nav .groups .nav-group .panel a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px dashed var(--border) !important;
  background:var(--paper) !important;
}
nav .groups .nav-group .panel a:hover{ background:#14110e !important; border-style:solid !important; }



/* --- DROPDOWN: hover bridge + horizontal pills --- */
.nav-group .panel{
  top:100% !important;
  margin-top:4px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  min-width:auto !important;
}
.nav-group .panel a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px dashed var(--border) !important;
  background:var(--paper) !important;
}
.nav-group .panel a:hover{ background:#14110e !important; border-style:solid !important; }

/* --- Double camera flash --- */
.flash-active #flashfx{ animation: camFlashDouble .62s ease-out; }
@keyframes camFlashDouble {
  0% { opacity: 1 }
  22% { opacity: 0 }
  45% { opacity: 1 }
  100% { opacity: 0 }
}

.nav-group.open .panel{opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important}


/* Carousel */
.carousel{position:relative; overflow:hidden}
.carousel .slides{display:flex; transition:transform .35s ease; gap:12px}
.carousel .slide{min-width:100%; display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center}
.carousel .slide img{width:120px; height:120px; object-fit:cover; border-radius:12px; background:#222}
.carousel .quote{font-size:15px}
.carousel .who{font-weight:700}
.carousel .controls{position:absolute; right:10px; bottom:10px; display:flex; gap:6px}

/* Pellicule filter */
.pellicule img{ filter: sepia(.35) contrast(1.15) saturate(.85); }
.pellicule::after{ content:''; pointer-events:none; position:fixed; inset:0; background:
  radial-gradient(ellipse at top left, rgba(255,255,255,.05), transparent 60%),
  radial-gradient(ellipse at bottom right, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode:overlay; }
.togglebar{ display:flex; gap:8px; align-items:center; margin:6px 0 }
.togglebar .btn-outline{ padding:6px 10px }
.sig-pad{ border:1px dashed var(--border); border-radius:8px; background:#fff; height:140px; }
.banner-analytics{ position:fixed; left:12px; bottom:12px; right:auto; z-index:9999; background:var(--paper); border:1px solid var(--border); padding:8px 10px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.banner-analytics small{ color:var(--muted) }


/* Gallery cleanup */
.gallery img{display:block;width:100%;height:260px;object-fit:cover;border-top-left-radius:16px;border-top-right-radius:16px}
.gallery .card{padding:0}



/* Google Form embed */
.gform-wrap{width:100%;}
.gform-frame{width:100%; height:1700px; border:0; background:var(--paper); border-radius:12px}
@media (max-width: 880px){ .gform-frame{ height:1900px } }
@media (max-width: 520px){ .gform-frame{ height:2100px } }


/* --- Form controls --- */
form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:820px){ form .row{ grid-template-columns:1fr } }
label{ display:block; font-weight:600; margin:10px 0 6px }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px;
  background:var(--paper); color:var(--fg)
}
textarea{ min-height:120px; resize:vertical }
input[type="file"]{ width:100%; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--paper) }
.hidden, .sr-only{ position:absolute !important; left:-9999px !important; }


/* --- Interactions: list items hover --- */
.list li{ transition: transform .15s ease, background .15s ease; border-radius:10px; padding:6px 10px }
.list li:hover{ transform: translateY(-2px); background: rgba(255,255,255,.03) }
:root[data-theme="light"] .list li:hover{ background: rgba(0,0,0,.035) }


.header nav{flex:1; display:flex; justify-content:center}

.stat{font-size:42px;font-weight:800}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}

/* equal two-column grid for reserver */
.grid.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 980px){ .grid.grid-2{grid-template-columns:1fr} }
.grid > *{min-width:0} /* allow equal width without overflow */
.gform-frame{width:100%;border:0;border-radius:12px}


/* reserver layout polish */
.reserver-grid{ display:grid !important; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
@media (max-width: 980px){ .reserver-grid{ grid-template-columns:1fr } }
.center-info{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.center-info p{ margin:0 }
.center-info .card, .center-info > div{ background:var(--panel); padding:10px 12px; border-radius:12px }


/* reserver grid v2 */
.reserver-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 980px){ .reserver-grid{grid-template-columns:1fr} }
.center-info{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.center-info > *{margin:0}


/* info chips on reserver bottom */
.info-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed var(--border);border-radius:999px;background:var(--panel);text-decoration:none}
.chip:hover{border-style:solid}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;border:2px solid #333}
.dot.free{background:rgba(0,200,120,.25);border-color:rgba(0,200,120,.6)}
.dot.booked{background:rgba(255,70,70,.2);border-color:rgba(255,70,70,.6)}


/* === Mobile drawer (added) === */
.nav-toggle{display:none;align-items:center;justify-content:center;border:1px solid var(--border);
  background:var(--panel);border-radius:12px;padding:6px;width:40px;height:40px}
@media (max-width: 980px){
  .nav-toggle{display:inline-flex}
  .header nav{display:none}
}
.drawer{position:fixed;top:0;left:0;height:100dvh;width:min(85vw,360px);background:var(--paper);
  border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .25s ease;
  z-index:1001;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.drawer-close{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:4px 8px}
.drawer-list{padding:8px 8px 16px 8px;overflow:auto}
.drawer-list a{display:block;padding:12px 10px;border-radius:10px;text-decoration:none}
.drawer-list a:hover{background:rgba(255,255,255,.05)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:1000;transition:opacity .2s}
.backdrop.show{opacity:1;pointer-events:auto}
body.no-scroll{overflow:hidden}

.price-line{margin-top:4px;font-weight:600;opacity:.9}
.price-card .price-line{font-size:1.05rem}