:root{
  --ink:#0F2A30; --ink2:#17383F; --salt:#F4F5F0; --maree:#2F6F73; --sable:#E8E1D0; --ocre:#D4A03C; --muted:#4C6166;
  --pad:clamp(20px,5vw,96px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Newsreader',Georgia,serif;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:72px;background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--salt);color:var(--ink);font-family:var(--text);font-size:19px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ocre);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;font-family:var(--display);font-weight:600}
.skip:focus{left:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:17px;line-height:1;border:1.5px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ocre);color:var(--ink)}
.btn.primary:hover{background:#E3B458;transform:translateY(-2px)}
.btn.ghost{border-color:rgba(244,245,240,.55);color:var(--salt)}
.btn.ghost:hover{background:rgba(244,245,240,.1);transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:var(--salt)}
.btn.dark:hover{background:var(--ink2);transform:translateY(-2px)}
.btn.line{border-color:var(--ink);color:var(--ink)}
.btn.line:hover{background:rgba(15,42,48,.07);transform:translateY(-2px)}

/* Header */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--ocre);transform-origin:left;transform:scaleX(0);z-index:60}
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;color:var(--salt);transition:transform .45s var(--ease),background .3s}
.hdr.solid{background:rgba(15,42,48,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hdr.hide{transform:translateY(-100%)}
.brand{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:10px}
.brand small{font-weight:500;font-size:14px;letter-spacing:0;opacity:.75}
.nav{display:flex;gap:32px;font-family:var(--display);font-weight:500;font-size:16px}
.nav a{position:relative;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ocre);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a.active::after,.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-cta .btn{min-height:44px;padding:0 20px;font-size:15px}
.burger{display:none;width:48px;height:48px;border:0;border-radius:50%;background:rgba(244,245,240,.12);color:var(--salt);cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:nth-child(1){top:19px}.burger span:nth-child(2){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:23px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--salt);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad);transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.menu.open{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.menu a{font-family:var(--display);font-weight:600;font-size:clamp(38px,11vw,64px);letter-spacing:-.03em;line-height:1.15;padding:6px 0}
.menu .btn{margin-top:24px;align-self:flex-start;font-size:18px}

/* Hero */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--salt);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,80px);padding:calc(104px + env(safe-area-inset-top)) var(--pad) 72px;overflow:hidden}
.hero h1{font-family:var(--display);font-weight:650;font-size:clamp(38px,4.9vw,78px);line-height:1;letter-spacing:-.035em}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
.js .ln>span{transform:translateY(112%);animation:up 1s var(--ease) forwards}
.js .ln:nth-child(2)>span{animation-delay:.14s}
@keyframes up{to{transform:none}}
.lead{margin-top:28px;max-width:30em;font-size:clamp(18px,1.6vw,22px);color:#D3DEDA}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.js .lead,.js .cta{opacity:0;animation:fade .9s var(--ease) .55s forwards}
.js .cta{animation-delay:.7s}
@keyframes fade{to{opacity:1}}
.arch-wrap{will-change:transform;justify-self:end;width:100%;max-width:520px}
.arch{aspect-ratio:4/5;width:100%;border-radius:999px 999px 24px 24px;overflow:hidden}
.js .arch{clip-path:inset(100% 0 0 0);animation:reveal 1.3s var(--ease) .15s forwards}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.ph{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;padding:20px}
.ph span{font-family:var(--display);font-weight:500;font-size:13px;line-height:1.2;padding:7px 12px;border-radius:999px;background:rgba(15,42,48,.78);color:var(--salt)}
.ph-hero{background:linear-gradient(#BBD5D0 0 56%,#2F6F73 56% 100%)}
.ph-img{display:block;width:100%;height:100%;object-fit:cover}
/* Photos des chambres : affichées en entier, dans leur format d'origine */
.room-media.fit{aspect-ratio:auto;height:auto}
.room-media.fit .ph-img{height:auto}

/* Galerie photo (page chambre) : on fait défiler du doigt sur mobile */
.gal-sec{background:var(--ink);color:var(--salt)}
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.gal-nav{display:flex;gap:8px;flex:none}
.gal-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(244,245,240,.45);background:none;color:var(--salt);font-size:24px;line-height:1;cursor:pointer;transition:background .25s}
.gal-btn:hover{background:rgba(244,245,240,.12)}
.gal{list-style:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.gal::-webkit-scrollbar{display:none}
.gal li{flex:0 0 86%;scroll-snap-align:start}
.gal figure{margin:0}
.gal img{display:block;width:100%;height:auto;border-radius:18px;background:var(--ink2)}
.gal figcaption{margin-top:10px;font-family:var(--display);font-weight:500;font-size:15px;color:#C6D6D2}
.gal-hint{margin-top:16px;font-family:var(--display);font-size:14px;color:#A9BDB8}
@media (min-width:860px){
  .gal{gap:16px;align-items:center}
  .gal li{flex:0 0 auto}
  .gal img{width:auto;height:min(460px,60svh)}
  .gal-hint{display:none}
}

/* Hero vidéo (accueil) : mobile d'abord, texte en bas sur la vidéo */
.hero.hero--video{grid-template-columns:minmax(0,1fr);align-content:end;isolation:isolate;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.hero-media{position:absolute;inset:0;z-index:-1;background:var(--ink)}
.hero-media img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .hero-video{opacity:0;transition:opacity 1s var(--ease)}
.js .hero-video.on{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,48,.62) 0,rgba(15,42,48,0) 22%,rgba(15,42,48,0) 38%,rgba(15,42,48,.78) 66%,rgba(15,42,48,.96) 100%)}
.hero--video .hero-text{max-width:640px}
.hero--video h1{text-shadow:0 2px 24px rgba(15,42,48,.35)}
.hero--video .lead{color:#E3EBE8}
@media (min-width:860px){
  .hero.hero--video{align-content:center;padding-bottom:72px}
  .hero-media::after{background:linear-gradient(90deg,rgba(15,42,48,.9) 0,rgba(15,42,48,.62) 38%,rgba(15,42,48,.08) 72%),linear-gradient(180deg,rgba(15,42,48,.55) 0,rgba(15,42,48,0) 20%)}
}

/* Intro */
.intro{background:var(--salt);padding:clamp(96px,14vw,200px) var(--pad) clamp(72px,9vw,128px)}
.intro-text{font-family:var(--display);font-weight:550;font-size:clamp(28px,4.6vw,64px);line-height:1.13;letter-spacing:-.025em;max-width:19em}
.js .w{opacity:.2}
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(56px,8vw,112px)}
.promise{border-top:2px solid var(--ink);padding-top:20px}
.promise h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}
.promise p{color:var(--muted);font-size:18px}

/* Chambres */
.rooms{background:var(--sable);padding:clamp(72px,10vw,144px) var(--pad)}
.h2{font-family:var(--display);font-weight:620;font-size:clamp(32px,5vw,68px);line-height:1.02;letter-spacing:-.03em}
.rooms-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.badge{font-family:var(--display);font-weight:500;font-size:16px;padding:12px 20px;border:1.5px solid var(--ink);border-radius:999px}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:560px;padding:6px;background:rgba(15,42,48,.09);border-radius:999px;margin-bottom:32px}
.pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/2);background:var(--ink);border-radius:999px;transition:transform .55s var(--ease)}
.tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;border:0;background:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:19px;line-height:1.1;cursor:pointer;border-radius:999px;transition:color .4s}
.tab small{font-weight:500;font-size:14px;opacity:.75}
.tab[aria-selected="true"]{color:var(--salt)}
.panels{display:grid}
.panel{grid-area:1/1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .1s,transform .6s var(--ease) .1s}
.room-media{aspect-ratio:4/3;border-radius:24px;overflow:hidden}
.ph-r1{background:linear-gradient(#C9D8CF 0 62%,#8FB0A5 62% 100%)}
.ph-r2{background:linear-gradient(#E3D3B0 0 55%,#B99A5E 55% 100%)}
.room-info h3{font-family:var(--display);font-weight:620;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.025em;line-height:1.05}
.room-info .sub{margin-top:8px;color:var(--muted)}
.feats{list-style:none;margin:24px 0;padding:0;display:grid;gap:0}
.feats li{padding:14px 0;border-top:1px solid rgba(15,42,48,.25);font-size:18px}
.feats li:last-child{border-bottom:1px solid rgba(15,42,48,.25)}
.price{font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:20px}
.price small{display:block;font-weight:500;font-size:15px;color:var(--muted);margin-top:2px}
.price2{font-size:clamp(18px,4.8vw,21px);line-height:1.35}
.price2>span{display:block}
.room-cta{display:flex;flex-wrap:wrap;gap:12px}

/* Le lieu, pinned story */
.story{position:relative;height:340svh;background:var(--ink2);color:var(--salt)}
.stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:calc(88px + env(safe-area-inset-top)) var(--pad) 40px}
.story h2{font-family:var(--display);font-weight:500;font-size:18px;color:#A9BDB8;margin-bottom:24px}
.idxbox{position:relative;padding-left:28px}
.idx{list-style:none;margin:0;padding:0}
.track{position:absolute;left:0;top:4px;bottom:4px;width:2px;background:rgba(244,245,240,.2)}
.fill{position:absolute;inset:0;background:var(--ocre);transform-origin:top;transform:scaleY(0)}
.idx li{padding:10px 0;opacity:.35;transition:opacity .5s}
.idx li.on{opacity:1}
.idx h3{font-family:var(--display);font-weight:620;font-size:clamp(30px,4.4vw,60px);letter-spacing:-.03em;line-height:1.05}
.d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.on .d{grid-template-rows:1fr}
.d p{overflow:hidden;color:#C6D6D2;max-width:26em;padding-top:0}
.on .d p{padding-top:12px}
.scenes{position:relative;aspect-ratio:4/3;max-height:70svh;border-radius:28px;overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;transform:scale(1.07);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.scene.on{opacity:1;transform:none}
.scene:has(> .ph-img){transform:none}
.ph-s1{background:linear-gradient(#9FD0D2 0 100%)}
.ph-s2{background:linear-gradient(#A9C79A 0 100%)}
.ph-s3{background:linear-gradient(#DCC9A0 0 100%)}
.scene .ph{align-items:flex-start}

/* Reserver */
.around{background:#EFE9DA;padding:clamp(72px,10vw,144px) var(--pad);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,112px);align-items:start}
.lead2{margin-top:20px;color:var(--muted);max-width:26em}
.spots{list-style:none;margin:0;padding:0}
.spots li{padding:22px 0;border-top:1px solid rgba(15,42,48,.25)}
.spots li:last-child{border-bottom:1px solid rgba(15,42,48,.25)}
.spots h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1.2}
.spots p{color:var(--muted);margin-top:6px;font-size:18px}
.rsv{background:var(--salt);padding:clamp(72px,10vw,144px) var(--pad);display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"head card" "steps card";column-gap:clamp(32px,6vw,112px);row-gap:48px;align-items:start}
.rsv-head{grid-area:head}
.rsv-head p{margin-top:20px;color:var(--muted);max-width:28em}
.steps{grid-area:steps;position:relative;padding-left:56px;display:grid;gap:36px}
.tline{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:#C9D0C9}
.tline i{position:absolute;inset:0;background:var(--maree);transform-origin:top;transform:scaleY(0)}
.step{position:relative}
.dot{position:absolute;left:-56px;top:0;width:40px;height:40px;border-radius:50%;background:var(--salt);border:2px solid #C9D0C9;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:16px;color:var(--muted);transition:background .4s,border-color .4s,color .4s,transform .5s var(--ease)}
.step.done .dot{background:var(--maree);border-color:var(--maree);color:#fff;transform:scale(1.08)}
.step h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1.2;padding-top:6px}
.step p{color:var(--muted);margin-top:6px;font-size:18px}
.card{grid-area:card;position:sticky;top:96px;background:var(--ink);color:var(--salt);border-radius:28px;padding:clamp(28px,3.4vw,48px);display:grid;gap:8px}
.card .k{font-family:var(--display);font-weight:500;font-size:16px;color:#A9BDB8}
.card .big{font-family:var(--display);font-weight:650;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.card .big:hover{color:var(--ocre)}
.card hr{width:100%;border:0;border-top:1px solid rgba(244,245,240,.2);margin:20px 0}
.card .note{margin-top:16px;font-size:17px;color:#C6D6D2}

/* Avis */
.reviews{background:var(--sable);padding:clamp(72px,10vw,144px) 0}
.reviews .h2{padding:0 var(--pad);margin-bottom:40px}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 28px;scroll-padding-left:var(--pad);-webkit-overflow-scrolling:touch}
.rev{flex:0 0 min(440px,82vw);scroll-snap-align:start;background:var(--salt);border-radius:24px;padding:32px;display:grid;grid-template-rows:auto 1fr auto;gap:20px;min-height:260px}
.rev blockquote{margin:0}
.rev blockquote p{font-family:var(--text);font-style:italic;font-size:clamp(18px,1.5vw,20px);line-height:1.5}
.rev .stars{font-size:18px;letter-spacing:3px;color:#B07F1E;line-height:1}
.rev b{font-family:var(--display);font-weight:600;font-size:16px}
.rev small{display:block;color:var(--muted);font-size:15px;margin-top:2px}

/* Footer */
.foot{background:var(--ink);color:var(--salt);padding:clamp(72px,9vw,128px) var(--pad) calc(40px + 88px + env(safe-area-inset-bottom));overflow:hidden}
.wm{font-family:var(--display);font-weight:700;font-size:clamp(84px,24vw,360px);letter-spacing:-.05em;line-height:.85;display:block;overflow:hidden;padding-bottom:.08em}
.wm span{display:inline-block}
.js .wm span{transform:translateY(105%);transition:transform 1.1s var(--ease)}
.wm.in span{transform:none}
.wm span:nth-child(2){transition-delay:.05s}.wm span:nth-child(3){transition-delay:.1s}.wm span:nth-child(4){transition-delay:.15s}.wm span:nth-child(5){transition-delay:.2s}.wm span:nth-child(6){transition-delay:.25s}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-top:clamp(40px,6vw,80px);padding-top:32px;border-top:1px solid rgba(244,245,240,.2)}
.fgrid h3{font-family:var(--display);font-weight:500;font-size:15px;color:#A9BDB8;margin-bottom:12px}
.fgrid address{display:block;font-style:normal;font-size:18px;line-height:1.6}
.fgrid p,.fgrid a{display:block;font-size:18px;line-height:1.6}
.fgrid a:hover{color:var(--ocre)}
.legal{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;margin-top:48px;font-size:15px;color:#A9BDB8}

/* Sticky action bar */
.bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,160%);display:flex;gap:8px;padding:8px;background:rgba(15,42,48,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;z-index:30;visibility:hidden;box-shadow:0 12px 40px rgba(15,42,48,.35);transition:transform .55s var(--ease),visibility 0s .55s}
.bar.show{transform:translate(-50%,0);visibility:visible;transition:transform .55s var(--ease)}
.bar .btn{min-height:52px;padding:0 24px}

/* Responsive */
@media (max-width:1023px){
  .panel{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:859px){
  .nav,.hdr-cta .btn,.hdr-cta .tel{display:none}
  .burger{display:block}
  .hero{grid-template-columns:1fr;align-content:start;padding-top:calc(96px + env(safe-area-inset-top))}
  .arch-wrap{justify-self:center;max-width:420px}
  .promises{grid-template-columns:1fr;gap:28px}
  .stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:20px;align-items:start;padding-top:calc(84px + env(safe-area-inset-top))}
  .scenes{order:-1;border-radius:22px}
  .story h2{margin-bottom:12px}
  .idx h3{font-size:clamp(26px,8vw,38px)}
  .around{grid-template-columns:1fr}
  .rsv{grid-template-columns:1fr;grid-template-areas:"head" "card" "steps"}
  .card{position:static}
  .fgrid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .cta .btn{flex:1 1 100%}
  .bar .btn{padding:0 20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .ln>span,.js .wm span{transform:none}
  .js .lead,.js .cta,.js .w{opacity:1}
  .js .arch{clip-path:none}
}

/* ===== Pages intérieures ===== */
.pagehead{background:var(--ink);color:var(--salt);padding:calc(120px + env(safe-area-inset-top)) var(--pad) clamp(48px,6vw,88px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--display);font-size:15px;color:#A9BDB8;margin-bottom:28px}
.crumbs a:hover{color:var(--ocre)}
.crumbs [aria-current]{color:var(--salt)}
.pagehead h1{font-family:var(--display);font-weight:650;font-size:clamp(34px,5.2vw,78px);line-height:1.02;letter-spacing:-.035em;max-width:17em}
.sec{padding:clamp(64px,9vw,128px) var(--pad)}
.sec.sable{background:var(--sable)}
.sec.salt{background:var(--salt)}
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:start}
.prose p{margin:0 0 1em;max-width:34em}
.prose h2{font-family:var(--display);font-weight:620;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.1;margin:1.6em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em;max-width:34em}
.prose a,.link{font-family:var(--display);font-weight:600;border-bottom:2px solid var(--ocre);padding-bottom:1px}
.prose a:hover,.link:hover{background:rgba(212,160,60,.2)}
.link{display:inline-block;margin-top:24px;color:inherit}
.roomcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:40px}
.rcard{display:flex;flex-direction:column;gap:18px}
.rcard h3{font-family:var(--display);font-weight:620;font-size:clamp(28px,3vw,40px);letter-spacing:-.025em;line-height:1.05}
.rcard .sub{color:var(--muted)}
.rcard .feats{margin:4px 0}
.blocks{display:grid;gap:clamp(48px,7vw,96px)}
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.block:nth-child(even) .room-media{order:2}
.block h2{font-family:var(--display);font-weight:620;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.025em;line-height:1.05;margin-bottom:16px}
.block p{color:var(--muted);max-width:30em}
.ph-a{background:linear-gradient(#9FD0D2 0 100%)}
.ph-b{background:linear-gradient(#A9C79A 0 100%)}
.ph-c{background:linear-gradient(#DCC9A0 0 100%)}
.cta-band{background:var(--ink);color:var(--salt);padding:clamp(56px,8vw,112px) var(--pad);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band h2{font-family:var(--display);font-weight:620;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;line-height:1.05;max-width:16em}
.cta-band .cta{margin:0}
.faq{display:grid;gap:0;margin-top:32px}
.faq details{border-top:1px solid rgba(15,42,48,.25);padding:20px 0}
.faq details:last-child{border-bottom:1px solid rgba(15,42,48,.25)}
.faq summary{font-family:var(--display);font-weight:600;font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:8px;max-width:38em}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.contact-grid h2{font-family:var(--display);font-weight:600;font-size:16px;color:var(--muted);margin-bottom:10px}
.contact-grid p,.contact-grid a,.contact-grid address{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;line-height:1.3;font-style:normal;overflow-wrap:anywhere}
.contact-grid a:hover{color:var(--maree)}

/* ===== Réservation : calendrier + formulaire ===== */
.book{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:start}
.form{display:grid;gap:36px}
.fs{border:0;padding:0;margin:0;display:grid;gap:14px;min-width:0}
.fs legend,.lbl{font-family:var(--display);font-weight:620;font-size:22px;letter-spacing:-.015em;margin-bottom:6px;padding:0}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt>span{display:flex;flex-direction:column;justify-content:center;min-height:68px;padding:10px 16px;border:1.5px solid rgba(15,42,48,.35);border-radius:16px;background:#fff;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;transition:background .3s,color .3s,border-color .3s}
.opt small{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:500;font-size:14px;color:var(--muted);transition:color .3s}
.opt input:checked+span{background:var(--ink);color:var(--salt);border-color:var(--ink)}
.opt input:checked+span small{color:#C6D6D2}
.opt input:focus-visible+span{outline:3px solid var(--ocre);outline-offset:3px}
.cal{background:#fff;border:1px solid rgba(15,42,48,.15);border-radius:24px;padding:clamp(14px,2vw,24px)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:12px}
.cal-head p{font-family:var(--display);font-weight:500;font-size:15px;color:var(--muted)}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(15,42,48,.3);background:none;cursor:pointer;color:var(--ink);font-size:20px;line-height:1;transition:background .25s,transform .25s var(--ease)}
.cal-nav button:hover:not(:disabled){background:rgba(15,42,48,.08)}
.cal-nav button:active:not(:disabled){transform:scale(.94)}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed}
.months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.mtitle{font-family:var(--display);font-weight:600;font-size:18px;text-align:center;text-transform:capitalize;margin-bottom:6px}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr)}
.dow span{text-align:center;font-family:var(--display);font-size:13px;color:var(--muted);padding:6px 0}
.day{position:relative;aspect-ratio:1;min-height:40px;border:0;background:none;font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink);cursor:pointer;border-radius:50%;padding:0;transition:background .2s,color .2s}
.day.blank{visibility:hidden;cursor:default}
.day:hover:not(:disabled):not(.start):not(.end){background:rgba(47,111,115,.16)}
.day:disabled{color:#AEB6B1;cursor:not-allowed}
.day.today{box-shadow:inset 0 0 0 1.5px var(--maree)}
.day.inrange{background:rgba(212,160,60,.3);border-radius:0}
.day.start,.day.end{background:var(--ink);color:var(--salt)}
.day.start.hasend{border-radius:50% 0 0 50%}
.day.end{border-radius:0 50% 50% 0}
.sumbox{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--salt);font-family:var(--display);font-weight:500;font-size:16px;line-height:1.5;min-height:56px}
.sumbox .warn{color:#9A2B1F;font-weight:600}
.sumbox .rate{display:inline-block;margin-top:4px;color:var(--maree);font-weight:600}
.cal-season{display:block;margin-top:2px;font-weight:600;font-size:14px;color:var(--maree)}
.day.deponly{color:var(--muted)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-family:var(--display);font-weight:600;font-size:16px}
.fld input,.fld textarea{font-family:var(--text);font-size:18px;min-height:54px;padding:12px 16px;border:1.5px solid rgba(15,42,48,.35);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.fld textarea{min-height:128px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--ocre);outline-offset:2px;border-color:var(--ink)}
.trav{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border:1.5px solid rgba(15,42,48,.35);border-radius:999px;background:#fff}
.stepper span{font-family:var(--display);font-weight:600;font-size:16px}
.stepper div{display:flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:50%;border:0;background:var(--sable);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.stepper button:hover{background:#DDD3BC}
.stepper button:active{transform:scale(.92)}
.stepper output{min-width:22px;text-align:center;font-family:var(--display);font-weight:650;font-size:20px}
.note-cap{font-family:var(--display);font-weight:500;font-size:15px;color:#7A5A12;background:#FBF1D9;border-radius:12px;padding:10px 14px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--muted)}
.consent input{width:24px;height:24px;margin-top:2px;accent-color:var(--maree);flex-shrink:0}
.consent a{border-bottom:1.5px solid var(--ocre);color:var(--ink)}
.err{color:#8A2418;background:#FBEAE7;border-radius:12px;padding:14px 18px;font-family:var(--display);font-weight:500;font-size:16px}
.err:focus{outline:3px solid #8A2418;outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.submit .btn{min-width:240px}
.submit small{color:var(--muted);font-size:15px;max-width:22em;line-height:1.4}
.notice{border-radius:24px;padding:clamp(24px,3vw,40px);background:var(--ink);color:var(--salt);display:grid;gap:12px}
.notice:focus{outline:3px solid var(--ocre);outline-offset:3px}
.notice h2,.notice h3{font-family:var(--display);font-weight:620;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;line-height:1.1}
.notice ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;color:#D3DEDA;font-size:17px}
.notice p{color:#D3DEDA}
.notice .btn{justify-self:start;margin-top:8px}
.notice.warn2{background:#FBF1D9;color:var(--ink)}
.notice.warn2 p{color:#4C3B0E}

/* Barre d'action : deux boutons */
.bar .btn.ghost{color:var(--salt)}

@media (max-width:1023px){
  .cols,.block{grid-template-columns:1fr}
  .block:nth-child(even) .room-media{order:0}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:859px){
  .roomcards{grid-template-columns:1fr}
  .book{grid-template-columns:1fr}
  .months{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .fields,.trav{grid-template-columns:1fr}
  .submit .btn{width:100%}
}

/* ===== Distinction des deux chambres ===== */
.rc1{--rc:#2F6F73;--rct:#FFFFFF}
.rc2{--rc:#D4A03C;--rct:#0F2A30}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pi{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.ppl{display:inline-flex;gap:3px;align-items:center}
.rdot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--rc);margin-right:12px;vertical-align:middle;flex-shrink:0}
.rcard{position:relative;background:#fff;border:2px solid transparent;border-radius:28px;padding:14px 14px 28px;gap:0;transition:transform .55s var(--ease),opacity .4s,border-color .3s,box-shadow .5s}
.rcard .room-media{position:relative;border-radius:20px}
.cap{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:var(--rc);color:var(--rct);font-family:var(--display);font-weight:650;font-size:15px}
.rbody{display:flex;flex-direction:column;gap:16px;padding:22px 12px 0}
.rbody h3{display:flex;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border-radius:999px;border:1.5px solid var(--rc);font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2}
.rcard.match{border-color:var(--rc);transform:translateY(-8px);box-shadow:0 28px 64px rgba(15,42,48,.18)}
.rcard.dim{opacity:.5;transform:scale(.985)}
.match-tag{position:absolute;top:-15px;right:26px;background:var(--rc);color:var(--rct);font-family:var(--display);font-weight:650;font-size:14px;padding:7px 16px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.rcard.match .match-tag{opacity:1;transform:none}
.chooser{background:#fff;border-radius:24px;padding:clamp(18px,2.4vw,30px);display:grid;gap:16px;margin-top:32px}
.picks{display:flex;flex-wrap:wrap;gap:10px}
.pick{min-height:54px;padding:0 24px;border-radius:999px;border:1.5px solid rgba(15,42,48,.35);background:none;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .3s,color .3s,border-color .3s,transform .25s var(--ease)}
.pick:hover{background:rgba(15,42,48,.06)}
.pick:active{transform:scale(.97)}
.pick[aria-pressed="true"]{background:var(--ink);color:var(--salt);border-color:var(--ink)}
.picks-out{min-height:1.6em;color:var(--muted);font-size:18px}
.picks-out a{margin:0;color:var(--ink);margin-left:6px}
.roomswitch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:36px;max-width:680px}
.rs{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border-radius:20px;border:2px solid rgba(15,42,48,.2);border-left:10px solid var(--rc);background:#fff;font-family:var(--display);font-weight:650;font-size:21px;line-height:1.1;transition:background .3s,color .3s,transform .3s var(--ease)}
.rs small{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;color:var(--muted)}
.rs:hover{transform:translateY(-2px)}
.rs[aria-current="page"]{background:var(--rc);color:var(--rct);border-color:var(--rc)}
.rs[aria-current="page"] small{color:inherit;opacity:.9}
.cmpwrap{margin-top:32px;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:520px;font-family:var(--display)}
.cmp th,.cmp td{padding:16px 14px;text-align:left;border-bottom:1px solid rgba(15,42,48,.15);font-size:17px;line-height:1.3;vertical-align:middle}
.cmp thead th{font-weight:650;font-size:clamp(18px,2vw,24px);letter-spacing:-.015em;border-bottom:2px solid var(--ink);padding-top:0}
.cmp thead th:not(:first-child),.cmp td{text-align:center}
.cmp tbody th{font-weight:500;width:40%}
.cmp td:nth-child(2){background:rgba(47,111,115,.08)}
.cmp td:nth-child(3){background:rgba(212,160,60,.14)}
.cmp .grp th{font-size:13px;letter-spacing:.06em;text-transform:none;color:var(--muted);font-weight:600;padding:28px 14px 8px;border-bottom:0;background:none}
.cmp .ok{font-weight:700;font-size:20px;color:var(--maree)}
.cmp .no{color:#8B9791}
.cmp td b{font-weight:650}
.cmp .nw{display:block;white-space:nowrap;font-weight:600}
.cmp td small{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.cmp td small:last-child{margin-bottom:0}
.opt.rc1>span,.opt.rc2>span{padding-left:40px}
.opt.rc1>span::before,.opt.rc2>span::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 2px #fff}
.opt .ppl{margin-right:6px;vertical-align:-2px}
@media (max-width:859px){
  .roomswitch{grid-template-columns:1fr}
  .cmp th,.cmp td{padding:14px 8px;font-size:15px}
  .cmp{min-width:0}
  .picks .pick{flex:1 1 100%;justify-content:center}
}

/* ===== Finitions mobile ===== */
.picks-out:empty{display:none}
.cmp thead th.rc1,.cmp thead th.rc2{white-space:nowrap}
@media (max-width:1023px){ .cols{row-gap:48px} }
@media (max-width:859px){
  .cmp thead th{font-size:17px}
  .cmp .rdot{width:10px;height:10px;margin-right:6px}
  .cmp tbody th{width:36%}
  .rcard .room-cta .btn{flex:1 1 100%}
  .rcard{padding:12px 12px 24px}
  .rbody{padding:20px 8px 0}
  .chooser{padding:20px}
}

.book>*{min-width:0}
.form,.fs,.cal{min-width:0;max-width:100%}
.hp{max-width:1px}

[hidden]{display:none!important}

.book .card{grid-area:auto}
a[href^="tel:"]{white-space:nowrap}
.card .big.mail{font-size:clamp(17px,1.9vw,24px);overflow-wrap:anywhere}
@media (max-width:859px){.card .big.mail{font-size:clamp(19px,5.4vw,28px)}}
@media (max-width:859px){
  .stick{padding-bottom:104px}
  .hero{padding-top:calc(112px + env(safe-area-inset-top))}
}
.book .card{padding:clamp(24px,2.4vw,32px)}
.book .card .big{font-size:clamp(20px,2vw,28px);white-space:nowrap}
.book .card .big.mail{white-space:normal}
@media (max-width:859px){ .book .card .big{font-size:clamp(22px,6.4vw,30px)} }
@media (max-width:859px) and (min-width:720px){ .months{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:719px){ .months{grid-template-columns:1fr;max-width:400px;margin-inline:auto} }
@media (max-width:859px) and (min-width:600px){ .opts{grid-template-columns:repeat(3,minmax(0,1fr))} .fields,.trav{grid-template-columns:1fr 1fr} }
.menu a.btn{padding:0 28px;font-size:17px;line-height:1}
@media (max-width:859px){ .fgrid a{padding:7px 0;min-height:40px} .legal a{padding:6px 0;display:inline-block} }

/* ===== Carte ===== */
.mapsec{background:var(--salt)}
.mapgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center}
.map{position:relative;border-radius:28px;overflow:hidden;background:#E9E2CF;aspect-ratio:600/528;box-shadow:0 20px 50px rgba(15,42,48,.12)}
.map svg{display:block;width:100%;height:100%}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--ease)}
.map.live iframe{opacity:1}
.map.live .map-load{display:none}
.map-load{position:absolute;right:16px;bottom:16px;min-height:48px;padding:0 20px;font-size:15px}
.map-note{position:absolute;left:16px;top:14px;font-family:var(--display);font-size:12px;color:#5E6B63;background:rgba(244,245,240,.8);padding:4px 10px;border-radius:999px}
.map .lbl-place{font-family:var(--display);font-size:15px;font-weight:600;fill:#23403F}
.map .lbl-sea{font-family:var(--text);font-style:italic;font-size:17px;fill:#2F6F73}
.js .map .pin{transform-box:fill-box;transform-origin:50% 100%;animation:drop 1s var(--ease) .3s both}
@keyframes drop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.routes{display:grid;gap:10px;margin-top:24px}
.routes .btn{justify-content:flex-start;gap:12px}
.maptext address{font-style:normal;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.3;margin-top:18px}
.maptext p{color:var(--muted);margin-top:12px}
@media (max-width:1023px){ .mapgrid{grid-template-columns:1fr} }
@media (max-width:859px){ .map{border-radius:22px} .map .lbl-place{font-size:19px} .map .lbl-sea{font-size:21px} .routes .btn{justify-content:center} }
@media (prefers-reduced-motion:reduce){ .pulse{animation:none;opacity:0} }
@media (max-width:859px){
  .map .lbl-place{font-size:26px}
  .map .lbl-sea{font-size:24px}
  .map .minor{display:none}
  .map .tag{transform-box:fill-box;transform-origin:100% 100%;transform:scale(1.45)}
  .map-load{top:12px;bottom:auto;right:12px;min-height:40px;padding:0 16px;font-size:14px}
  .map-note{top:auto;bottom:12px}
}