/* Riad Dar Rabiaa. One stylesheet for every page, FR and EN. Tokens first, then the pages in reading order. */
@font-face{font-family:"D";src:url("/assets/fonts/display.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"D";src:url("/assets/fonts/display-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"S";src:url("/assets/fonts/sans.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --chaux:#F6F3EC; --creme:#E5EFE8; --sable:#A9D2BC; --menthe:#A9D2BC;
  --encre:#15241D; --vert:#173F31; --vert2:#1F4B3C;
  --accent:#A84C38; --laiton:#9C7A43; --gris:#56605A;
  --rule:rgba(21,36,29,.15); --rule-l:rgba(246,243,236,.22);
  --fd:"D",Georgia,"Times New Roman",serif; --fs:"S",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g:clamp(20px,5vw,64px); --w:min(1240px,calc(100% - 2*var(--g)));
  --sec:clamp(84px,11vw,156px); --nav:84px;
  --ease:cubic-bezier(.2,.7,.2,1); --draw:cubic-bezier(.6,.1,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 64px)}
body{margin:0;background:var(--chaux);color:var(--encre);font:300 17px/1.72 var(--fs);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0}
::selection{background:var(--accent);color:var(--chaux)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:var(--w);margin-inline:auto}
.lab{font:500 12px/1.4 var(--fs);letter-spacing:.26em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--encre);color:var(--chaux);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}
body.menu-lock,body.lb-lock{overflow:hidden}

/* buttons and arrow links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;font:500 12.5px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid currentColor;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn--encre{background:var(--encre);border-color:var(--encre);color:var(--chaux)}
.btn--encre:hover{background:var(--accent);border-color:var(--accent)}
.btn--chaux{background:var(--chaux);border-color:var(--chaux);color:var(--encre)}
.btn--chaux:hover{background:var(--accent);border-color:var(--accent);color:var(--chaux)}
.btn--trait:hover{background:var(--encre);border-color:var(--encre);color:var(--chaux)}
.on-dark .btn--trait:hover{background:var(--chaux);border-color:var(--chaux);color:var(--encre)}
.fl{display:inline-flex;align-items:center;gap:12px;font:500 12.5px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid currentColor}
.fl svg{width:22px;height:10px;flex:none;transition:transform .5s var(--ease)}
.fl:hover svg{transform:translateX(6px)}
.ico{display:inline-flex;flex:none;width:28px;height:28px}
.ico svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- nav ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);color:var(--chaux);transition:background .45s var(--ease),color .45s var(--ease),height .45s var(--ease),box-shadow .45s}
.nav::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(180deg,rgba(16,22,19,.5),rgba(16,22,19,0));pointer-events:none;transition:opacity .45s}
.nav.is-solid,.nav.menu-open{background:var(--chaux);color:var(--encre);box-shadow:0 1px 0 var(--rule);--nav:72px;height:72px}
.nav.is-solid::before,.nav.menu-open::before{opacity:0}
.nav__in{position:relative;height:100%;width:min(1400px,calc(100% - 2*var(--g)));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;position:relative;z-index:120}
.nav__brand .logo{display:block;height:36px;width:auto}
.nav__sous{font:500 9px/1 var(--fs);letter-spacing:.36em;text-transform:uppercase;padding-left:.36em}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);list-style:none;margin:0;padding:0}
.nav__links a{font:400 17px/1 var(--fd);text-decoration:none;padding:8px 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links .nav__menu-only{display:none}
.nav__end{display:flex;align-items:center;gap:22px;position:relative;z-index:120}
.nav__lang{font:500 12px/1 var(--fs);letter-spacing:.2em;text-decoration:none;text-transform:uppercase}
.nav__cta{min-height:44px;padding:0 22px}
.nav:not(.is-solid):not(.menu-open) .nav__cta{border-color:rgba(247,242,234,.7)}
.nav:not(.is-solid):not(.menu-open) .nav__cta:hover{background:var(--chaux);color:var(--encre);border-color:var(--chaux)}
.nav.is-solid .nav__cta,.nav.menu-open .nav__cta{background:var(--encre);color:var(--chaux);border-color:var(--encre)}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:26px;height:1.5px;background:currentColor;position:relative;transition:background .3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:26px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.nav__burger span::before{top:-8px}.nav__burger span::after{top:8px}
.menu-open .nav__burger span{background:transparent}
.menu-open .nav__burger span::before{transform:translateY(8px) rotate(45deg)}
.menu-open .nav__burger span::after{transform:translateY(-8px) rotate(-45deg)}
@media (min-width:1081px){
  .nav__in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .nav__brand{justify-self:start}
  .nav__end{justify-self:end}
}
@media (max-width:1080px){
  .nav__burger{display:inline-flex}
  .nav__cta,.nav__lang{display:none}
  .nav__links{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:110;background:var(--chaux);color:var(--encre);flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:96px 24px 48px;transform:translateY(-102%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
  .nav__links.nav-open{transform:none;visibility:visible;transition:transform .6s var(--ease)}
  .nav__links li{width:100%;text-align:center}
  .nav__links a{display:inline-block;font-size:30px;padding:10px 0}
  .nav__links .nav__menu-only{display:block}
  .nav__links .nav__menu-only .btn{font-size:12.5px;margin-top:22px;padding:0 30px}
  .nav__links .nav__menu-only .nav__lang{display:inline-block;margin-top:18px;font-size:12px;padding:10px}
  .nav__links .nav__menu-only a::after{display:none}
}
@media (max-width:560px){.nav__brand .logo{height:31px}}

/* ---------------- hero: la grande porte ---------------- */
/* Jad chose it on 2026-10-17 (after the opening doors, « too much », and two rounds of options): the mint wall closes in
   around a wide arched doorway onto the patio, the moulding is traced after, their embroidered script is written from left
   to right in the middle, and the dates rest on the mint under the photo. Same arch on every page banner. */
.hero{position:relative;min-height:600px;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(var(--menthe),var(--menthe)) var(--vert);color:var(--chaux);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;clip-path:inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);animation:grande 2.2s var(--draw) .1s forwards}
@keyframes grande{to{clip-path:inset(92px 56px 116px 56px round calc(50vw - 56px) calc(50vw - 56px) 0 0 / 38vh 38vh 0 0)}}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.2s ease;transform:scale(1.03)}
.hero__slide.is-on{opacity:1;animation:pose 11s cubic-bezier(.25,.6,.3,1) both}
.hero__slide[data-media="m"]{display:none}
@media (max-width:767px){.hero__slide[data-media="d"]{display:none}.hero__slide[data-media="m"]{display:block}}
@keyframes pose{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 50% 47%,rgba(14,20,17,.44),rgba(14,20,17,0) 72%),
             linear-gradient(180deg,rgba(14,20,17,.42) 0,rgba(14,20,17,0) 22%),
             linear-gradient(0deg,rgba(14,20,17,.5) 0,rgba(14,20,17,0) 30%);transition:opacity 1.6s}
.hero.is-clair .hero__veil{background:radial-gradient(ellipse 48% 44% at 50% 47%,rgba(14,20,17,.56),rgba(14,20,17,0) 74%),
             linear-gradient(180deg,rgba(14,20,17,.48) 0,rgba(14,20,17,0) 24%),
             linear-gradient(0deg,rgba(14,20,17,.55) 0,rgba(14,20,17,0) 32%)}
.hero__lis{position:absolute;top:78px;left:42px;right:42px;bottom:116px;border:1px solid var(--vert);border-bottom:0;pointer-events:none;
  border-radius:calc(50vw - 42px) calc(50vw - 42px) 0 0 / calc(38vh + 14px) calc(38vh + 14px) 0 0;clip-path:inset(0 0 100% 0);animation:trace 2.4s var(--draw) 1.3s forwards}
@keyframes trace{to{clip-path:inset(0)}}
.hero__in{position:absolute;inset:92px 56px 116px;display:grid;place-items:center;padding:0 var(--g)}
.hero__porte{position:relative;display:grid;justify-items:center;text-align:center;width:min(640px,86vw);padding:calc(min(640px,86vw)*.27) 40px 40px}
.hero__sig{font-size:0;line-height:0}
.hero__sig-logo{display:block;width:min(540px,70vw);height:auto;color:var(--chaux);filter:drop-shadow(0 2px 22px rgba(10,14,12,.42));
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;
  animation:ecrit 2.6s cubic-bezier(.45,.05,.3,1) .5s both}
@keyframes ecrit{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.hero__mot{display:flex;align-items:center;gap:18px;margin-top:28px;font:500 12px/1 var(--fs);letter-spacing:.42em;text-transform:uppercase;text-shadow:0 1px 14px rgba(10,14,12,.5);animation:monte 1s var(--ease) 1.4s both}
.hero__mot::before,.hero__mot::after{content:"";width:40px;border-top:1px solid currentColor;opacity:.85}
.hero__mot::after{margin-left:-.42em}
.hero__sub{max-width:34ch;margin-top:20px;font-size:17px;line-height:1.6;text-shadow:0 1px 18px rgba(10,14,12,.4);animation:monte 1.2s var(--ease) .64s both}
.hero__cta{margin-top:30px;color:var(--chaux);border-color:rgba(246,243,236,.85);background:rgba(14,20,17,.08);animation:monte 1.2s var(--ease) .78s both}
.hero__cta:hover{background:var(--chaux);color:var(--encre);border-color:var(--chaux)}
@keyframes monte{from{transform:translateY(18px)}to{transform:none}}
/* the menu sits on the mint wall: dark green until it turns solid */
body:has(.hero,.ban) .nav::before{opacity:0}
body:has(.hero,.ban) .nav:not(.is-solid):not(.menu-open){color:var(--vert)}
body:has(.hero,.ban) .nav:not(.is-solid):not(.menu-open) .nav__cta{border-color:var(--vert)}
body:has(.hero,.ban) .nav:not(.is-solid):not(.menu-open) .nav__cta:hover{background:var(--vert);border-color:var(--vert);color:var(--chaux)}

.hero__ctrl{position:absolute;right:76px;bottom:136px;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 16px;border:1px solid rgba(247,242,234,.38);background:rgba(14,20,17,.22);border-radius:40px;font:500 12px/1 var(--fs);letter-spacing:.14em;z-index:2}
.hero__count{margin-right:6px}.hero__count i{font-style:normal;opacity:.7}
.hero__ctrl button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.hero__ctrl button:hover{background:rgba(247,242,234,.16)}
.hero__ctrl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.hero__ctrl [aria-pressed="true"] .p-pause,.hero__ctrl [aria-pressed="false"] .p-play{display:none}

/* the dates, on the mint under the photo */
.barre{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:3;width:min(980px,calc(100% - 2*var(--g)));display:grid;grid-template-columns:1fr 1fr .9fr auto;background:var(--chaux);color:var(--encre);border:1px solid var(--chaux);box-shadow:0 20px 40px -26px rgba(15,40,30,.45)}
.barre label{display:grid;gap:4px;padding:14px 22px;border-right:1px solid var(--rule);cursor:pointer}
.barre .lab{font-size:10.5px;color:var(--gris)}
.barre input,.barre select{font:400 18px/1.2 var(--fd);color:var(--encre);background:transparent;border:0;padding:0;min-height:30px;width:100%;-webkit-appearance:none;appearance:none}
.barre input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.barre input::-webkit-date-and-time-value{text-align:left;margin:0}
.barre button{min-height:auto;border:0;padding:0 34px;background:var(--vert);color:var(--chaux)}
.barre button:hover{background:var(--accent)}
@media (min-width:768px) and (max-height:780px){
  .hero__porte{padding-top:118px;padding-bottom:26px}
  .hero__sig-logo{width:460px}
  .hero__mot{margin-top:20px}
}
@media (max-width:767px){
  .hero__media{animation-name:grande-m}
  @keyframes grande-m{to{clip-path:inset(92px 16px 210px 16px round 172px 172px 0 0 / 172px 172px 0 0)}}
  .hero__lis{top:82px;left:6px;right:6px;bottom:210px;border-radius:182px 182px 0 0 / 182px 182px 0 0}
  .hero__in{inset:92px 16px 210px;padding:0 12px}
  .hero__porte{padding-top:66px;padding-bottom:14px}
  .hero__mot{font-size:11px;gap:12px}
  .hero__mot::before,.hero__mot::after{width:24px}
  .hero__cta{margin-top:24px}
  .hero__ctrl{bottom:216px;right:28px}
  .barre{bottom:14px;grid-template-columns:1fr 1fr;width:calc(100% - 28px);box-shadow:none}
  .barre label{padding:10px 14px}
  .barre label:nth-child(2){border-right:0}
  .barre label:nth-child(3){grid-column:1/-1;border-top:1px solid var(--rule);border-right:0}
  .barre button{grid-column:1/-1;min-height:50px}
  .barre input,.barre select{font-size:17px;min-height:26px}
}
@media (max-width:767px) and (max-height:700px){.hero__sub{display:none}}

/* facts band under the hero */
.faits{background:var(--chaux);border-bottom:1px solid var(--rule)}
.faits ul{list-style:none;margin:0 auto;padding:30px 0;width:var(--w);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.faits li{display:flex;align-items:center;gap:16px}
.faits .ico{color:var(--accent)}
.faits b{display:block;font:400 22px/1.2 var(--fd)}
.faits span{display:block;font-size:13.5px;color:var(--gris);line-height:1.4}
.faits a{text-decoration:none}
@media (max-width:900px){.faits ul{grid-template-columns:1fr 1fr;gap:22px 16px}}

/* ---------------- sections ---------------- */
.sec{padding:var(--sec) 0}
.sec--creme{background:var(--creme)}
.sec--vert{background:var(--vert);color:var(--chaux)}
.sec--encre{background:var(--encre);color:var(--chaux)}
.on-dark .lab,.sec--vert .lab,.sec--encre .lab,.sec--vert .tete .lab,.sec--encre .tete .lab{color:rgba(246,243,236,.74)}
.tete{display:grid;justify-items:center;text-align:center;max-width:760px;margin:0 auto clamp(48px,6vw,80px)}
.tete--g{justify-items:start;text-align:left;margin-left:0}
.tete .motif{margin-bottom:22px}
.tete .lab{color:var(--gris);margin-bottom:18px}
.tete h2{font-size:clamp(38px,5vw,64px)}
.tete h2 em{font-style:italic}
.tete p{margin-top:24px;max-width:56ch;font-size:18px}
.motif{display:block;width:46px;height:46px;color:var(--laiton)}
.motif svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.motif .tr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--draw)}
.is-drawn .motif .tr,.motif.is-drawn .tr{stroke-dashoffset:0}
html:not(.js) .motif .tr{stroke-dashoffset:0}
.sec--vert .motif,.sec--encre .motif{color:var(--sable)}

/* framed photo: one photo, one inset bordered with paper */
.duo{position:relative;padding:0 0 12% 0}
.duo__a{overflow:hidden}
.duo__a img{width:100%;height:100%;object-fit:cover}
.duo__b{position:absolute;right:-6%;bottom:0;width:44%;border:10px solid var(--chaux);background:var(--chaux);overflow:hidden}
.sec--creme .duo__b{border-color:var(--creme);background:var(--creme)}
.duo__b img{width:100%;aspect-ratio:4/5;object-fit:cover}
.zoom{overflow:hidden}
.zoom img{transition:transform 1s var(--ease)}
@media (hover:hover){.zoom:hover img,a:hover>.zoom img,.zoom-h:hover .zoom img{transform:scale(1.05)}}

/* home: the house in a few lines */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,8vw,120px);align-items:center}
.intro__txt h2{font-size:clamp(38px,4.6vw,60px);margin:20px 0 28px}
.intro__txt p+p{margin-top:18px}
.intro__txt .fl{margin-top:34px}
.intro .duo__a{aspect-ratio:4/5}
@media (max-width:900px){.intro{grid-template-columns:1fr}.intro .duo{max-width:560px;margin-right:6%}}

/* home: the rooms showcase */
.vitrine{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.vitrine__photo{position:sticky;top:calc(var(--nav) + 30px);aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.vitrine__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease,transform 1.2s var(--ease);transform:scale(1.02)}
.vitrine__pic.is-on{opacity:1;transform:none}
.vitrine__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.vitrine__row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule);cursor:pointer;transition:padding .5s var(--ease)}
.vitrine__row .n{font:italic 400 18px/1 var(--fd);color:var(--gris)}
.vitrine__row h3{font-size:clamp(25px,2.4vw,32px);transition:color .4s}
.vitrine__row .meta{grid-column:2;font-size:14.5px;color:var(--gris)}
.vitrine__row .prix{font:400 19px/1.2 var(--fd);text-align:right;white-space:nowrap}
.vitrine__row .prix small{display:block;font:300 12px/1.3 var(--fs);color:var(--gris);letter-spacing:.04em}
.vitrine__row .ask{grid-column:2/-1;justify-self:start;margin-top:10px;font:500 11.5px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;padding:9px 0;border-bottom:1px solid currentColor;max-height:0;overflow:hidden;transition:max-height .5s var(--ease),margin .5s;margin-top:0}
.vitrine__row.is-on{padding-left:10px}
.vitrine__row.is-on h3{color:var(--accent)}
.vitrine__row.is-on .ask,.vitrine__row:focus-within .ask{max-height:40px;margin-top:12px}
.vitrine__note{margin-top:22px;font-size:14px;color:var(--gris)}
.vitrine__all{margin-top:30px}
@media (max-width:900px){.vitrine{grid-template-columns:1fr}.vitrine__photo{position:relative;top:0;aspect-ratio:4/3}.vitrine__row .ask{max-height:40px;margin-top:12px}}

/* instagram tiles */
.ig{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ig a{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.ig a:hover img{transform:scale(1.05)}}
.ig__pied{display:flex;justify-content:center;margin-top:34px}
@media (max-width:900px){.ig{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* reviews: one quote at a time */
.avis{position:relative;max-width:900px;margin:0 auto;text-align:center}
.avis__list{list-style:none;margin:0;padding:0;display:grid}
.avis__item{grid-area:1/1}
.is-live .avis__item{visibility:hidden;transform:translateY(14px);transition:transform 1.1s var(--ease),visibility 0s 1.1s}
.is-live .avis__item.is-on{visibility:visible;transform:none;transition:transform 1.1s var(--ease)}
html:not(.js) .avis__list{gap:48px}
.avis blockquote{margin:0}
.avis q{display:block;font:italic 400 clamp(26px,3.3vw,42px)/1.3 var(--fd);quotes:"« " " »" "“" "”"}
.avis cite{display:block;margin-top:28px;font:500 12.5px/1 var(--fs);letter-spacing:.26em;text-transform:uppercase;font-style:normal;color:var(--sable)}
.avis__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:44px}
.avis__nav button.f{width:44px;height:44px;border:1px solid var(--rule-l);border-radius:50%;display:grid;place-items:center;transition:background .3s}
.avis__nav button.f:hover{background:rgba(247,242,234,.12)}
.avis__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.avis__dots{display:flex;gap:2px}
.avis__dot{width:24px;height:24px;display:grid;place-items:center}
.avis__dot::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(247,242,234,.3)}
.avis__dot[aria-current="true"]::before{background:var(--chaux)}
html:not(.js) .avis__nav{display:none}

/* direct-booking perks, before the footer of every page */
.av{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.av__t{padding:34px 30px 36px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:14px;align-content:start}
.av__t .lab{color:var(--accent)}
.av__t h3{font-size:clamp(25px,2.3vw,31px)}
.av__t p{font-size:15.5px;color:var(--gris)}
.av__t .ico{color:var(--laiton);width:34px;height:34px}
.av__t .ico svg{width:34px;height:34px}
.av__cond{margin-top:26px;text-align:center;font-size:14px;color:var(--gris)}
.av__cta{display:flex;justify-content:center;margin-top:34px}
@media (max-width:900px){.av{grid-template-columns:1fr}}

/* "Réservez en direct": the house's arch traced around the words */
.direct{position:relative;text-align:center;overflow:hidden}
.direct__cadre{position:relative;width:min(640px,100%);margin:0 auto;padding:clamp(110px,14vw,150px) clamp(24px,6vw,70px) 70px}
.direct__arc{position:absolute;inset:0;color:var(--menthe);opacity:.75;clip-path:inset(0 0 100% 0);transition:clip-path 2.2s var(--draw)}
.direct.is-drawn .direct__arc,html:not(.js) .direct__arc{clip-path:inset(0)}
.direct .motif{margin:0 auto 22px}
.direct h2{font-size:clamp(40px,5.2vw,68px)}
.direct p{margin:22px auto 0;max-width:40ch;font-size:18px;color:rgba(247,242,234,.86)}
.direct__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}

/* footer */
.pied{background:var(--encre);color:var(--chaux);padding:clamp(70px,9vw,110px) 0 34px}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:56px;border-bottom:1px solid var(--rule-l)}
.pied__logo svg{display:block;height:70px;width:auto;color:var(--chaux)}
.pied__phrase{margin-top:22px;max-width:34ch;color:rgba(247,242,234,.76);font-size:15.5px}
.pied__haut .btn{margin-top:26px}
.pied h3{font:500 11.5px/1 var(--fs);letter-spacing:.26em;text-transform:uppercase;color:var(--sable);margin-bottom:20px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15.5px}
.pied a{text-decoration:none;color:rgba(247,242,234,.86)}
.pied a:hover{color:var(--chaux);text-decoration:underline;text-underline-offset:4px}
.pied address{font-style:normal;color:rgba(247,242,234,.86);font-size:15.5px;line-height:1.7}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;font-size:13px;color:rgba(247,242,234,.6)}
.pied__bas .credit a{text-transform:uppercase;text-decoration:none;letter-spacing:.16em;font-size:11.5px;color:rgba(247,242,234,.6)}
.pied__bas .credit a:hover{color:var(--chaux);text-decoration:none}
.pied__haut-lien{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.pied__haut-lien svg{width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .5s var(--ease)}
.pied__haut-lien:hover svg{transform:translateY(-4px)}
@media (max-width:900px){.pied__haut{grid-template-columns:1fr 1fr}.pied__haut>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.pied__haut{grid-template-columns:1fr}}

/* ---------------- page banner (each inner page opens on its photo) ---------------- */
.ban{position:relative;min-height:66vh;min-height:66svh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(var(--menthe),var(--menthe)) var(--vert);color:var(--chaux);isolation:isolate;
  --porte:inset(92px 56px 0 56px round calc(50vw - 56px) calc(50vw - 56px) 0 0 / 24vh 24vh 0 0)}
.ban picture{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;clip-path:var(--porte)}
.ban__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);animation:pose 16s cubic-bezier(.25,.6,.3,1) both}
.ban::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--porte);background:linear-gradient(90deg,rgba(14,20,17,.62),rgba(14,20,17,.18) 62%,rgba(14,20,17,0)),linear-gradient(180deg,rgba(14,20,17,.3),rgba(14,20,17,0) 40%)}
.ban::before{content:"";position:absolute;top:78px;left:42px;right:42px;bottom:0;z-index:-1;border:1px solid var(--vert);border-bottom:0;pointer-events:none;
  border-radius:calc(50vw - 42px) calc(50vw - 42px) 0 0 / calc(24vh + 14px) calc(24vh + 14px) 0 0}
@media (max-width:767px){
  .ban{--porte:inset(88px 12px 0 12px round 50% 50% 0 0 / 90px 90px 0 0)}
  .ban::before{top:78px;left:4px;right:4px;border-radius:50% 50% 0 0 / 100px 100px 0 0}
}
.ban__in{width:var(--w);margin:0 auto;padding:calc(var(--nav) + 120px) clamp(0px,3vw,40px) clamp(54px,7vw,90px)}
.ban .motif{color:var(--sable);margin-bottom:20px}
.ban .lab{color:rgba(247,242,234,.8)}
.ban h1{font-size:clamp(50px,7vw,96px);margin-top:16px;animation:monte 1.1s var(--ease) both}
.ban p{margin-top:20px;max-width:44ch;font-size:18px;animation:monte 1.1s var(--ease) .12s both}

/* ---------------- rooms page ---------------- */
.onglets{position:sticky;top:72px;z-index:40;background:var(--chaux);border-bottom:1px solid var(--rule)}
.onglets ol{list-style:none;margin:0 auto;padding:0;width:var(--w);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.onglets ol::-webkit-scrollbar{display:none}
.onglets a{display:flex;align-items:baseline;gap:10px;padding:20px 16px 18px;text-decoration:none;white-space:nowrap;font:400 18px/1 var(--fd);border-bottom:2px solid transparent;color:var(--gris);transition:color .3s,border-color .3s}
.onglets a span{font:italic 400 14px/1 var(--fd)}
.onglets a.is-on,.onglets a:hover{color:var(--encre);border-bottom-color:var(--accent)}
.ch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center;padding:clamp(70px,9vw,120px) 0;border-bottom:1px solid var(--rule);scroll-margin-top:150px}
.ch:last-of-type{border-bottom:0}
.ch--inv .ch__media{order:2}
.ch__main{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sable)}
.ch__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch__voir{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:var(--chaux);color:var(--encre);font:500 11.5px/1 var(--fs);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.ch__voir:hover{background:var(--encre);color:var(--chaux)}
.ch__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.ch__thumbs button{display:block;aspect-ratio:1;overflow:hidden;background:var(--sable);padding:0;cursor:pointer}
.ch__thumbs img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.ch__thumbs button:hover img{transform:scale(1.05)}}
.ch__n{font:italic 400 20px/1 var(--fd);color:var(--accent)}
.ch h2{font-size:clamp(38px,4.4vw,56px);margin:12px 0 0}
.ch__faits{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ch__faits li{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--rule);font-size:14px;color:var(--gris);line-height:1.35}
.ch__faits li:last-child{border-right:0;margin-right:0}
.ch__faits b{display:block;font:400 20px/1.2 var(--fd);color:var(--encre)}
.ch p.ch__txt{margin-top:24px}
.ch table{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.ch th{font:500 11px/1.3 var(--fs);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);text-align:left;padding:10px 16px 10px 0;width:38%;vertical-align:top}
.ch td{padding:10px 0;border-top:1px solid var(--rule)}
.ch th{border-top:1px solid var(--rule)}
.ch__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;padding:0}
.ch__tags li{font-size:12.5px;letter-spacing:.06em;padding:6px 12px;border:1px solid var(--rule)}
.ch__pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:30px}
.ch__prix{font:400 26px/1.1 var(--fd)}
.ch__prix small{display:block;font:300 12.5px/1.4 var(--fs);color:var(--gris);margin-top:4px}
@media (max-width:900px){.ch{grid-template-columns:1fr}.ch--inv .ch__media{order:0}}
.equip{counter-reset:e;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.equip li{counter-increment:e;display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.equip li::before{content:counter(e,decimal-leading-zero);font:italic 400 17px/1 var(--fd);color:var(--accent);min-width:26px}
@media (max-width:900px){.equip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.equip{grid-template-columns:1fr}}

/* ---------------- the house ---------------- */
.recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:center}
.recit h2{font-size:clamp(36px,4.4vw,56px);margin:18px 0 26px}
.recit p+p{margin-top:18px}
.mot{margin-top:30px;padding-left:22px;border-left:1px solid var(--laiton)}
.mot q{display:block;font:italic 400 22px/1.45 var(--fd);quotes:"« " " »"}
.mot cite{display:block;margin-top:10px;font:500 11.5px/1 var(--fs);letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:var(--gris)}
.recit .duo__a{aspect-ratio:4/5}
@media (max-width:900px){.recit{grid-template-columns:1fr}.recit .duo{max-width:560px;margin-right:6%}}
.mosa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);gap:10px}
.mosa a{display:block;overflow:hidden;background:var(--sable);position:relative}
.mosa img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.mosa a:hover img{transform:scale(1.05)}}
.mosa .l{grid-column:span 2;grid-row:span 2}.mosa .h{grid-row:span 2}.mosa .w{grid-column:span 2}
@media (max-width:760px){.mosa{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}.mosa .l{grid-column:span 2;grid-row:span 1}}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-l)}
.chiffres li{list-style:none;padding:30px 24px 10px 0}
.chiffres b{display:block;font:400 clamp(44px,5vw,66px)/1 var(--fd)}
.chiffres span{display:block;margin-top:12px;font-size:15px;color:rgba(247,242,234,.78)}
.chiffres{margin:0;padding:0}
@media (max-width:760px){.chiffres{grid-template-columns:1fr 1fr}}
.priv{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;border:1px solid var(--rule-l)}
.priv h3{font-size:clamp(26px,2.6vw,34px)}
.priv p{color:rgba(247,242,234,.8);margin-top:8px;max-width:52ch}
.autour{list-style:none;margin:0;padding:0;columns:2;column-gap:60px}
.autour li{break-inside:avoid;display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.autour b{font:400 20px/1.3 var(--fd)}
.autour span{color:var(--gris);font-size:15px;white-space:nowrap}
@media (max-width:760px){.autour{columns:1}}
.savoir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.savoir div{padding:24px 0;border-top:1px solid var(--rule)}
.savoir h3{font-size:23px;margin-bottom:10px}
.savoir p{font-size:15.5px;color:var(--gris)}
@media (max-width:900px){.savoir{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.savoir{grid-template-columns:1fr}}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px}
.services div{padding:26px 0;border-top:1px solid var(--rule)}
.services .ico{color:var(--accent);margin-bottom:16px}
.services h3{font-size:23px;margin-bottom:8px}
.services p{font-size:15px;color:var(--gris)}
@media (max-width:900px){.services{grid-template-columns:1fr 1fr}}

/* ---------------- gallery ---------------- */
.chapitres{position:sticky;top:72px;z-index:40;background:var(--chaux);border-bottom:1px solid var(--rule)}
.chapitres ol{list-style:none;margin:0 auto;padding:0;width:var(--w);display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.chapitres ol::-webkit-scrollbar{display:none}
.chapitres a{display:flex;align-items:baseline;gap:8px;padding:19px 16px 17px;white-space:nowrap;text-decoration:none;font:400 18px/1 var(--fd);color:var(--gris);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.chapitres a span{font:300 12px/1 var(--fs);letter-spacing:.08em}
.chapitres a.is-on,.chapitres a:hover{color:var(--encre);border-bottom-color:var(--accent)}
@media (max-width:760px){.chapitres ol{justify-content:flex-start}}
.chap{padding:clamp(64px,8vw,110px) 0 0;scroll-margin-top:140px}
.chap:last-of-type{padding-bottom:var(--sec)}
.chap__tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 30px;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.chap__tete h2{font-size:clamp(34px,4vw,52px)}
.chap__tete h2 span{font:italic 400 .5em/1 var(--fd);color:var(--accent);margin-right:14px;vertical-align:.35em}
.chap__tete p{color:var(--gris);max-width:46ch;font-size:16px}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.grille figure{margin:0}
.grille a{display:block;overflow:hidden;background:var(--sable);aspect-ratio:4/5}
.grille .w a{aspect-ratio:auto;height:100%}
.grille .w{grid-column:span 2}
.grille img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.grille a:hover img{transform:scale(1.05)}}
.grille figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:14px;color:var(--gris);line-height:1.4}
.grille figcaption b{font:italic 400 14px/1 var(--fd);color:var(--encre);white-space:nowrap}
.grille .w figure{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto}
@media (max-width:760px){.grille{grid-template-columns:1fr 1fr}.grille .w{grid-column:span 2}.grille .w a{aspect-ratio:3/2}}
.galerie__ig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:34px 0;border-top:1px solid var(--rule);margin-top:60px}
.galerie__ig p{font:400 clamp(24px,2.6vw,32px)/1.25 var(--fd);max-width:28ch}

/* ---------------- contact ---------------- */
.coord{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(36px,6vw,90px);align-items:stretch}
.coord__liste{list-style:none;margin:30px 0 0;padding:0}
.coord__liste li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;padding:18px 0;border-top:1px solid var(--rule)}
.coord__liste .ico{color:var(--accent)}
.coord__liste b{display:block;font:400 21px/1.3 var(--fd)}
.coord__liste span,.coord__liste a{font-size:15.5px;color:var(--gris);text-decoration:none}
.coord__liste a b{color:var(--encre)}
.coord__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.carte{position:relative;min-height:460px;background:var(--sable)}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:900px){.coord{grid-template-columns:1fr}.carte{min-height:360px}}
.trajet{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
.trajet__plan{position:relative;background:var(--creme);border:1px solid var(--rule);aspect-ratio:5/4}
.sec--creme .trajet__plan{background:var(--chaux)}
.trajet__plan svg{position:absolute;inset:0;width:100%;height:100%}
.trajet__plan .rue{fill:none;stroke:rgba(21,36,29,.13);stroke-linecap:round;stroke-linejoin:round}
.trajet__plan .rue--g{stroke:rgba(21,36,29,.2)}
.trajet__plan .rempart{fill:none;stroke:var(--laiton);stroke-width:3;stroke-dasharray:2 5;opacity:.7}
.trajet__plan .chemin{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9;}
.trajet__plan .chemin-trace{stroke-dashoffset:0}
.trajet__plan .mask-path{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--draw) .3s}
.trajet__plan.is-drawn .mask-path,html:not(.js) .trajet__plan .mask-path{stroke-dashoffset:0}
.trajet__plan text{font:500 24px var(--fs);letter-spacing:.12em;text-transform:uppercase;fill:var(--encre);paint-order:stroke;stroke:var(--chaux);stroke-width:8px;stroke-linejoin:round}
.sec--creme .trajet__plan text{stroke:var(--chaux)}
.trajet__plan .t-mins{font:italic 400 36px var(--fd);letter-spacing:0;text-transform:none;fill:var(--accent)}
.trajet__plan .t-sous{font:500 23px var(--fs);letter-spacing:.04em;text-transform:none;fill:#38423C}
.trajet__plan .pt-taxi{fill:var(--chaux);stroke:var(--encre);stroke-width:3}
.trajet__plan .pt-maison{fill:var(--accent);stroke:var(--chaux);stroke-width:3}
.etapes{list-style:none;margin:30px 0 0;padding:0;counter-reset:s}
.etapes li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--rule)}
.etapes li::before{content:counter(s,decimal-leading-zero);font:italic 400 24px/1.1 var(--fd);color:var(--accent)}
.etapes b{display:block;font:400 22px/1.25 var(--fd);margin-bottom:6px}
.etapes p{font-size:15.5px;color:var(--gris)}
@media (max-width:900px){.trajet{grid-template-columns:1fr}}
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font:400 clamp(21px,2vw,25px)/1.3 var(--fd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{padding:0 0 26px;max-width:66ch;color:var(--gris)}

/* ---------------- booking window (.rsv, booking-modal.md) ---------------- */
.rsv{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rsv[hidden]{display:none}
.rsv__backdrop{position:fixed;inset:0;background:rgba(14,20,17,.62)}
.rsv__card{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr);width:min(980px,calc(100vw - 40px));margin:auto;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;background:var(--chaux);transform:translateY(16px);transition:transform .6s var(--ease)}
.rsv.is-open .rsv__card{transform:none}
.rsv__aside{min-height:0;overflow-y:auto;position:relative;background:var(--vert);color:var(--chaux);display:flex;flex-direction:column;justify-content:flex-end}
.rsv__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rsv__aside::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,20,17,.78),rgba(14,20,17,0) 58%)}
.rsv__aside div{position:relative;z-index:1;padding:30px}
.rsv__aside .motif{color:var(--sable);margin-bottom:14px}
.rsv__aside b{display:block;font:400 32px/1.1 var(--fd)}
.rsv__aside p{margin-top:8px;font-size:14.5px;color:rgba(247,242,234,.84)}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:34px clamp(22px,3vw,40px) 30px}
.rsv__body>*{flex-shrink:0}
.rsv__x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:var(--chaux);border-radius:50%}
.rsv__x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4}
.rsv h2{font-size:clamp(30px,3vw,38px);padding-right:44px}
.rsv__sous{margin-top:6px;font-size:14.5px;color:var(--gris)}
.rsv__bloc{margin-top:26px}
.rsv__bloc>.lab{display:block;color:var(--gris);font-size:11px;margin-bottom:12px}
.rsv__dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rsv__field{display:grid;gap:6px}
.rsv__field span{font-size:13px;color:var(--gris)}
.rsv__field input[type="date"]{-webkit-appearance:none;appearance:none;min-height:48px;line-height:1.3;padding:0 14px;font:400 17px var(--fs);color:var(--encre);background:var(--creme);border:1px solid var(--rule);width:100%}
.rsv__field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.rsv__field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
#rsv-nuits{margin-top:10px;font:italic 400 18px/1 var(--fd);color:var(--accent);min-height:18px}
.rsv__pers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stp{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 6px 0 14px;background:var(--creme);border:1px solid var(--rule)}
.stp span{font-size:14.5px}
.stp div{display:flex;align-items:center;gap:4px}
.stp button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--chaux);font-size:18px;line-height:1}
.stp button:disabled{opacity:.35;cursor:default}
.stp output,.rsv__q{min-width:26px;text-align:center;font:400 19px/1 var(--fd)}
.rsv__rooms{display:grid;gap:8px}
.rsv__room{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 8px 14px 16px;border:1px solid var(--rule);background:var(--chaux);transition:border-color .3s,background .3s}
.rsv__room.is-on{border-color:var(--encre);background:var(--creme)}
.rsv__room b{font:400 20px/1.2 var(--fd)}
.rsv__room small{display:block;font-size:13px;color:var(--gris);line-height:1.4}
.rsv__room .stp-r{display:flex;align-items:center;gap:4px}
.rsv__room .stp-r button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--chaux);font-size:18px;line-height:1}
.rsv__room .stp-r button:disabled{opacity:.35;cursor:default}
#rsv-compte{margin-top:10px;font-size:13.5px;color:var(--gris)}
.rsv__paliers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rsv__palier{padding:12px 12px 13px;border:1px solid var(--rule);font-size:13px;line-height:1.35;color:var(--gris);position:relative;transition:border-color .3s,background .3s,color .3s}
.rsv__palier b{display:block;font:400 17px/1.2 var(--fd);color:var(--encre);margin-bottom:4px}
.rsv__palier::after{content:"";position:absolute;top:10px;right:10px;width:14px;height:14px;border:1px solid var(--rule);border-radius:50%}
.rsv__palier.is-on{border-color:var(--accent);background:rgba(168,76,56,.07);color:var(--encre)}
.rsv__palier.is-on::after{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--chaux)}
#rsv-geste{margin-top:12px;font:italic 400 18px/1.35 var(--fd)}
.rsv__note-f textarea{width:100%;min-height:76px;padding:12px 14px;font:300 16px/1.5 var(--fs);color:var(--encre);background:var(--creme);border:1px solid var(--rule);resize:vertical}
.rsv__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule)}
.rsv__total span{font-size:14px;color:var(--gris)}
#rsv-total{font:400 26px/1 var(--fd)}
.rsv__total small{display:block;font-size:12.5px;color:var(--gris);margin-top:6px}
#rsv-hint{font-size:13.5px;color:var(--accent);margin-top:8px;min-height:0}
.rsv__how{margin-top:22px;font:400 20px/1.3 var(--fd)}
.rsv__send{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.rsv__send .btn{flex:1 1 200px;min-width:0}
.rsv__send svg{width:18px;height:18px;fill:currentColor}
.rsv__note{margin-top:16px;font-size:13px;color:var(--gris)}
@media (max-width:1020px){.rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}.rsv__aside{display:none}}
@media (max-width:680px){
  .rsv{padding:0}
  .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);width:100vw;margin:0;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh}
  .rsv__paliers{grid-template-columns:1fr}
  .rsv__pers,.rsv__dates{grid-template-columns:1fr 1fr}
}

/* ---------------- viewer ---------------- */
.lb{position:fixed;inset:0;z-index:160;background:#0D1311;color:var(--chaux);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb[hidden]{display:none}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0 22px;font:500 12px/1 var(--fs);letter-spacing:.2em}
.lb__close{width:48px;height:48px;display:grid;place-items:center}
.lb__close svg,.lb__prev svg,.lb__next svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}
.lb__stage{position:relative;display:grid;place-items:center;padding:10px 70px;min-height:0}
.lb__img{max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);width:auto;height:auto;object-fit:contain}
.lb__prev,.lb__next{position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--rule-l);border-radius:50%}
.lb__prev{left:12px}.lb__next{right:12px}
.lb__foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;padding:14px 20px 22px;text-align:center}
.lb__cap{font:italic 400 19px/1.35 var(--fd)}
.lb__ig{font:500 11.5px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;color:var(--sable)}
@media (max-width:760px){.lb__stage{padding:6px 0}.lb__prev,.lb__next{top:auto;bottom:-62px;translate:none}.lb__prev{left:16px}.lb__next{right:16px}.lb__foot{padding:14px 80px 22px}}

/* ---------------- phone booking bar + desktop perks card ---------------- */
.barre-m{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--chaux);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .5s var(--ease)}
.barre-m.is-on{transform:none}
.barre-m p{font-size:13.5px;line-height:1.35;color:var(--gris)}
.barre-m p b{display:block;font:400 17px/1.2 var(--fd);color:var(--encre)}
.barre-m .btn{min-height:46px;padding:0 20px}
@media (min-width:768px){.barre-m{display:none}}
.carte-av{position:fixed;right:24px;bottom:24px;z-index:95;width:330px;padding:24px 24px 22px;background:var(--vert);color:var(--chaux);transform:translateY(calc(100% + 40px));transition:transform .8s var(--ease)}
.carte-av[hidden]{display:none}
.carte-av.is-on{transform:none}
.carte-av .lab{color:var(--sable);font-size:10.5px}
.carte-av b{display:block;font:400 25px/1.2 var(--fd);margin:10px 0 8px}
.carte-av p{font-size:14.5px;color:rgba(247,242,234,.84)}
.carte-av .btn{margin-top:18px;width:100%}
.carte-av__x{position:absolute;top:8px;right:8px;width:36px;height:36px;display:grid;place-items:center}
.carte-av__x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.4}
@media (max-width:767px){.carte-av{display:none}}


/* ---------------- the house's own shapes ---------------- */
picture.hero__slide{display:block}
picture.hero__slide img{width:100%;height:100%;object-fit:cover}
.arche{display:flex;flex-direction:column;pointer-events:none}
.arche svg{display:block;width:100%;height:auto;overflow:visible}
.arche path{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.arche i{position:relative;display:block;flex:1;margin-top:-1px}
.arche i::before,.arche i::after{content:"";position:absolute;top:0;bottom:0;border-left:1.2px solid currentColor;border-right:1.2px solid currentColor}
.arche i::before{left:.5%;right:.5%}
.arche i::after{left:4.5%;right:4.5%}
.arc-cut{border-radius:50% 50% 0 0 / 40% 40% 0 0}
.balus{color:var(--menthe);opacity:.5;clip-path:inset(0 100% 0 0);transition:clip-path 2.8s var(--draw)}
.balus.is-drawn,html:not(.js) .balus{clip-path:inset(0)}
.balus svg{display:block}
.balus path,.balus line{fill:none;stroke:currentColor;stroke-width:1.2}
.moment{padding-top:0}
.moment__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center;padding-top:clamp(70px,9vw,120px)}
.moment__photos{position:relative;padding-bottom:16%;margin-right:5%}
.moment__a{aspect-ratio:5/4;overflow:hidden}
.moment__a img{width:100%;height:100%;object-fit:cover}
.moment__b{position:absolute;right:-7%;bottom:0;width:40%;margin:0;padding:10px 10px 0;background:var(--vert)}
.moment__b img{width:100%;aspect-ratio:1;object-fit:cover}
.moment__b figcaption{padding:12px 0 2px;font:italic 400 16px/1.3 var(--fd);color:rgba(246,243,236,.82)}
.moment__txt h2{font-size:clamp(40px,5vw,64px);margin:18px 0 26px}
.moment__txt p{color:rgba(246,243,236,.86)}
.moment__txt p+p{margin-top:16px}
.moment__txt .lab{display:block;margin-top:22px}
@media (max-width:900px){.moment__in{grid-template-columns:1fr}.moment__photos{max-width:620px}}
.chiffres-sec{padding-top:0}
.chiffres-sec .wrap{padding-top:clamp(60px,8vw,110px)}
.chiffres-sec .tete{margin-bottom:40px}
.table-duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:56px}
.table-duo>div{aspect-ratio:4/5;overflow:hidden;background:var(--creme)}
.table-duo img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.table-duo{grid-template-columns:1fr 1fr}.table-duo>div:last-child{display:none}}
.coord__h{font-size:clamp(34px,4vw,52px);margin:16px 0 0}
.coord .motif,.trajet .motif,.recit .motif,.intro__txt .motif{margin-bottom:18px}
.ch__open{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.faits .ico svg,.coord__liste .ico svg{stroke-width:1.15}
.vitrine__row:focus-visible{outline-offset:-2px}


/* phone booking window: a solid bar keeps the close button clear of the rooms' + buttons */
@media (max-width:1020px){
  .rsv__card::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;background:var(--chaux);border-bottom:1px solid var(--rule);z-index:1;pointer-events:none}
  .rsv__x{z-index:2;top:10px;right:10px}
  .rsv__body{margin-top:64px;padding-top:22px}
  .rsv__card{grid-template-rows:minmax(0,1fr)}
}


/* the table: food tiles, the menu, what the house arranges */
.plats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.plats figure{margin:0}
.plats a{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.plats img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.plats a:hover img{transform:scale(1.05)}}
.plats figcaption{margin-top:12px;font:italic 400 18px/1.3 var(--fd)}
@media (max-width:760px){.plats{grid-template-columns:1fr 1fr}}
.menu{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.menu li{padding:20px 0;border-bottom:1px solid var(--rule)}
.menu__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.menu h3{font-size:26px}
.menu__h span{font:500 11.5px/1 var(--fs);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.menu p{margin-top:8px;font-size:16px;color:var(--gris)}
.exp-in{padding-top:clamp(60px,8vw,110px)}
.sec--vert:has(.exp-in){padding-top:0}
.exp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px;border-top:1px solid var(--rule-l)}
.exp li{display:grid;grid-template-columns:44px 34px minmax(0,1fr);gap:16px;align-items:start;padding:30px 0;border-bottom:1px solid var(--rule-l)}
.exp__n{font:italic 400 22px/1.2 var(--fd);color:var(--menthe)}
.exp .ico{color:var(--menthe);width:30px;height:30px}
.exp .ico svg{width:30px;height:30px}
.exp h3{font-size:27px}
.exp p{margin-top:8px;color:rgba(246,243,236,.86);font-size:16px}
.exp p.exp__cond{margin-top:12px;font:500 11.5px/1 var(--fs);letter-spacing:.22em;text-transform:uppercase;color:var(--menthe)}
@media (max-width:900px){.exp{grid-template-columns:1fr}}
.recit .menu+.btn{margin-top:30px}

/* ---------------- Instagram on the home page: mint ground, the house's loops in Instagram's 4:5 posts, all level ---------------- */
.sec--menthe{background:var(--menthe);color:var(--vert)}
.insta__tete{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px 60px;align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.insta__profil{display:inline-flex;align-items:center;gap:14px;text-decoration:none;margin-bottom:24px}
.insta__av{flex:none;width:58px;height:58px;border-radius:50%;background:var(--vert);color:var(--menthe);display:grid;place-items:center;box-shadow:0 0 0 3px var(--menthe),0 0 0 4.5px var(--vert)}
.insta__av svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2}
.insta__profil b{display:block;font:500 16px/1.25 var(--fs);letter-spacing:.02em}
.insta__profil small{display:block;font-size:13px;line-height:1.3;color:#2E5546}
.insta__tete h2{font-size:clamp(40px,5.2vw,72px)}
.insta__tete p{font-size:18px;max-width:44ch;margin-bottom:26px}
.insta__fil{list-style:none;margin:0;padding:0 0 44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);align-items:start}
.insta__fil a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--vert);color:var(--chaux);text-decoration:none}
.insta__fil video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.insta__fil a::after{content:"";position:absolute;inset:0 0 auto;height:34%;background:linear-gradient(180deg,rgba(12,26,20,.32),rgba(12,26,20,0));pointer-events:none}
.insta__ico{position:absolute;top:12px;right:12px;z-index:1;width:22px;height:22px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.insta__ico svg{width:22px;height:22px;stroke-width:1.5}
.insta .ig__pied{margin-top:0}
@media (hover:hover){.insta__fil a:hover video{transform:scale(1.05)}}
@media (max-width:900px){
  .insta__tete{grid-template-columns:1fr}
  .insta__fil{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--g));padding:0 var(--g) 34px;scrollbar-width:none}
  .insta__fil::-webkit-scrollbar{display:none}
  .insta__fil li{flex:0 0 62vw;max-width:300px;scroll-snap-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero__slide:not(.is-first){display:none}
  .hero__ctrl{display:none}
  .hero__media{clip-path:inset(92px 56px 116px 56px round calc(50vw - 56px) calc(50vw - 56px) 0 0 / 38vh 38vh 0 0)}
  .hero__lis{clip-path:none}
  .hero__sig-logo{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){.hero__media{clip-path:inset(92px 16px 210px 16px round 172px 172px 0 0 / 172px 172px 0 0)}}