/* Riad Dar Soufa. The palette is the patio fountain: the iron-black zellige of the spiral, the terracotta tadelakt
   behind it, the cobalt of the terrace railings, the lime of the walls. The titles take the hand painted over the
   door (Felipa), the text a plain grotesk (Albert Sans), the Arabic name Amiri. Square corners, like the tiles. */

@font-face{font-family:"Felipa";src:url(assets/fonts/felipa-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Felipa";src:url(assets/fonts/felipa-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url(assets/fonts/albert-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";src:url(assets/fonts/albert-latin-ext.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Amiri";src:url(assets/fonts/amiri-nom.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --chaux:#FAF8F3; --pierre:#EFE8DD; --pierre-f:#E5DCCD;
  --encre:#1B1B1E; --texte:#2B2926; --gris:#66625C;
  --rampe:#2B5C9C; --rampe-f:#234C83; --rampe-c:#7FA6DE;
  --terre:#A65A33; --terre-f:#8C4A28; --terre-c:#C98A5E;
  --filet:rgba(27,27,30,.13); --filet-clair:rgba(250,248,243,.18);
  --main:"Felipa",Georgia,serif; --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --ar:"Amiri",serif;
  --gout:clamp(20px,5vw,56px); --bloc:clamp(72px,10vw,136px);
  --nav-h:76px;
}
@property --spi{syntax:"<angle>";inherits:false;initial-value:360deg}
@property --trait{syntax:"<number>";inherits:true;initial-value:0}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--chaux);color:var(--texte);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--main);font-weight:400;font-synthesis:none;line-height:1.04;margin:0;color:var(--encre);letter-spacing:0}
h2{font-size:clamp(40px,5.2vw,66px)}
h3{font-size:clamp(30px,3vw,38px)}
p{margin:0}
h1+p,h2+p,h3+p,.tete+p{margin-top:22px}
p+p{margin-top:16px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gout)}
.saut{position:absolute;left:12px;top:-60px;z-index:200;background:var(--encre);color:#fff;padding:10px 16px;text-decoration:none}
.saut:focus{top:12px}
:focus-visible{outline:2px solid var(--rampe);outline-offset:3px}

/* labels set above titles: the grotesk, spaced capitals, warm grey (never gold, riad.md §5) */
.sur{font:600 12px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 14px}
.tete{max-width:640px}
.tete--centre{margin:0 auto;text-align:center}

/* --------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;background:var(--terre);color:#fff;
  font:600 13.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--terre-f)}
.btn--clair{background:var(--chaux);color:var(--encre)}
.btn--clair:hover{background:#fff}
.btn--ligne{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1px currentColor}
.btn--ligne:hover{background:rgba(27,27,30,.05)}
.btn--ligne-clair{background:transparent;color:var(--chaux);box-shadow:inset 0 0 0 1px rgba(250,248,243,.6)}
.btn--ligne-clair:hover{background:rgba(250,248,243,.1)}
.btn--petit{min-height:44px;padding:0 20px;font-size:12.5px}
.lien{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rampe);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:5px}
.lien:hover{color:var(--rampe-f)}

/* ------------------------------------------- the spiral of the fountain -- */
/* traced from Booking photo 11 (briefs/<slug>.spirale.py), drawn as a CSS mask so it takes any colour. It turns
   into place once, a sweep around the tap. Visible by default: the script only arms the sweep, so nothing stays
   hidden without JS. The mask goes on the inner <i>, never on the span the observer watches. */
.spi{display:inline-flex;width:72px;aspect-ratio:1154/748;color:var(--encre);flex:none}
.spi i{display:block;width:100%;height:100%;background:currentColor;--spi:360deg;
  -webkit-mask:url(assets/logo/spirale.svg) center/contain no-repeat,conic-gradient(from -60deg at 52% 52%,#000 var(--spi),transparent 0);
  mask:url(assets/logo/spirale.svg) center/contain no-repeat,conic-gradient(from -60deg at 52% 52%,#000 var(--spi),transparent 0);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.js .spi[data-trace]:not(.is-on) i{--spi:0deg}
.js .spi[data-trace].is-on i{animation:spi 2.2s cubic-bezier(.5,.05,.25,1) both}
@keyframes spi{from{--spi:0deg}to{--spi:360deg}}
.spi--b i{-webkit-mask:url(assets/logo/spirale-b.svg) center/contain no-repeat;mask:url(assets/logo/spirale-b.svg) center/contain no-repeat}
.spi--titre{width:84px;margin-bottom:18px}
.spi--clair{color:var(--chaux)}
.spi--terre{color:var(--terre)}

/* ------------------------------------------------------------------- nav -- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);color:var(--encre);background:rgba(250,248,243,.97);
  box-shadow:0 1px 0 var(--filet);transition:background .3s,color .3s,box-shadow .3s}
.nav--sur{background:transparent;color:#fff;box-shadow:none}
.nav--sur::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(16,16,18,.42),rgba(16,16,18,0));pointer-events:none;z-index:-1}
.nav__in{height:100%;max-width:1440px;margin:0 auto;padding:0 var(--gout);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav__logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.marque{display:inline-flex;align-items:center;gap:12px}
.marque .spi{width:44px;color:currentColor}
.marque__nom{font:400 27px/1 var(--main);white-space:nowrap}
.marque__ar{font:400 17px/1 var(--ar);opacity:.85;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav__links a:hover,.nav__links a.active{border-bottom-color:currentColor}
.nav__extra{display:none}
.nav__droite{display:flex;align-items:center;gap:18px;justify-self:end}
.nav__langue{font:600 12.5px/1 var(--sans);letter-spacing:.12em;text-decoration:none;padding:8px 2px}
.nav--sur .nav__droite .btn{background:var(--chaux);color:var(--encre)}
.nav__burger{display:none;width:46px;height:46px;border:0;background:transparent;padding:0;cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .3s,opacity .2s}
.nav__burger span:nth-child(1){top:16px}.nav__burger span:nth-child(2){top:22px}.nav__burger span:nth-child(3){top:28px}
.nav.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  .marque__ar{display:none}
  .nav__links{gap:22px}
}
@media (max-width:920px){
  :root{--nav-h:66px}
  .nav__in{grid-template-columns:1fr auto}
  .nav__burger{display:block;z-index:2}
  .nav__droite .btn,.nav__droite .nav__langue{display:none}
  .nav__links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px var(--gout) 40px;
    background:var(--chaux);color:var(--encre);transform:translateY(-100%);visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
  .nav__links.nav-open{transform:none;visibility:visible;transition:transform .35s ease}
  .nav__links a{font:400 40px/1.25 var(--main);letter-spacing:0;text-transform:none;border:0;padding:4px 0}
  .nav__links a.active{color:var(--terre)}
  .nav__extra{display:inline-flex}
  .nav__links .nav__extra.btn{margin-top:26px;font:600 13.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:0 28px}
  .nav__links .nav__langue.nav__extra{font:600 13px/1 var(--sans);letter-spacing:.12em;margin-top:14px;padding:8px 0}
  .nav.menu-open{color:var(--encre);background:var(--chaux)}
  .nav.menu-open::before{display:none}
  .marque__nom{font-size:24px}
  .marque .spi{width:38px}
}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;color:#fff;overflow:hidden;background:#3a3631}
.hero__s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
.hero__s.is-on{opacity:1}
.hero__s img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 9s linear}
.hero__s.is-on img{transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 100%,rgba(18,17,16,.66),rgba(18,17,16,.28) 55%,rgba(18,17,16,0) 78%)}
.hero__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  padding:calc(var(--nav-h) + 20px) var(--gout) clamp(22px,4vh,40px)}
.hero__ar{font:400 clamp(22px,2.2vw,30px)/1.2 var(--ar);margin:0 0 4px;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.hero__titre{font-size:clamp(58px,9.4vw,132px);line-height:.98;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero__sub{font-size:clamp(16px,1.5vw,19px);margin-top:16px;max-width:560px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero__pied{width:100%;max-width:1180px;margin-top:clamp(22px,4vh,40px);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.hero__pied .barre{grid-column:2}
.hero__leg{grid-column:3;justify-self:end;font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.86;display:flex;gap:12px;align-items:center}
.hero__leg b{font-weight:600}
.barre{display:grid;grid-template-columns:repeat(3,minmax(0,170px)) auto;background:rgba(250,248,243,.96);color:var(--encre);text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.barre__ch{display:flex;flex-direction:column;justify-content:center;padding:10px 18px 9px;border-right:1px solid var(--filet);min-width:0}
.barre label{font:600 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.barre input,.barre select{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--encre);font:500 16px/1.3 var(--sans);padding:3px 0 0;min-height:30px;width:100%;min-width:0;border-radius:0}
.barre input::-webkit-date-and-time-value{text-align:left;margin:0}
.barre input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.barre .btn{min-height:64px}
@media (max-width:1080px){
  .hero__pied{grid-template-columns:1fr;justify-items:center}
  .hero__pied .barre{grid-column:1}
  .hero__leg{display:none}
}
@media (max-width:620px){
  .hero{min-height:520px}
  .hero__in{padding-bottom:18px}
  .barre{width:100%;grid-template-columns:1fr 1fr}
  .barre__ch{padding:9px 14px 8px;border-bottom:1px solid var(--filet)}
  .barre__ch:nth-child(2){border-right:0}
  .barre .btn{min-height:auto}
  .hero__sub{max-width:330px}
}

/* --------------------------------------------------------------- the facts -- */
.faits{padding:clamp(40px,5vw,60px) 0;border-bottom:1px solid var(--filet)}
.faits__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.faits__l li{display:flex;gap:16px;align-items:flex-start}
.ico{display:inline-flex;width:34px;height:34px;flex:none;color:var(--terre)}
.ico svg{width:100%;height:100%}
.faits strong{display:block;font:600 15.5px/1.35 var(--sans);color:var(--encre)}
.faits span{display:block;font-size:14.5px;line-height:1.5;color:var(--gris);margin-top:3px}
@media (max-width:900px){.faits__l{grid-template-columns:1fr 1fr;gap:26px 22px}}
@media (max-width:480px){.faits__l{grid-template-columns:1fr}}

/* ------------------------------------------------------------- blocks -- */
.bloc{padding:var(--bloc) 0}
.bloc--pierre{background:var(--pierre)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,104px);align-items:center}
.duo--inv .duo__media{order:2}
.duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__txt{max-width:520px}
.duo__txt .lien{margin-top:30px}
.duo__txt .btn{margin-top:32px}
.legende{font:500 13px/1.5 var(--sans);color:var(--gris);margin-top:12px}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo--inv .duo__media{order:0}
  .duo__media img{aspect-ratio:4/4.4}
}

/* ------------------------------------------- the rooms on the home page -- */
.vit__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,88px);align-items:start}
.vit__liste{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--filet)}
.vit__l{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;align-items:baseline;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--filet);padding:15px 0 14px 18px;cursor:pointer;position:relative;transition:background .2s}
.vit__l::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--terre);transform:scaleY(0);transition:transform .25s}
.vit__l:hover,.vit__l.is-on{background:rgba(239,232,221,.55)}
.vit__l.is-on::before{transform:none}
.vit__n{font:400 29px/1.1 var(--main);color:var(--encre)}
.vit__p{font:600 15px/1.3 var(--sans);color:var(--encre);white-space:nowrap}
.vit__d{grid-column:1 / -1;font-size:14.5px;color:var(--gris);line-height:1.45}
.vit__note{font-size:14px;color:var(--gris);margin-top:20px;max-width:480px}
.vit__btns{display:flex;flex-wrap:wrap;align-items:center;gap:24px 30px;margin-top:30px}
.vit__media{position:sticky;top:calc(var(--nav-h) + 28px);aspect-ratio:4/5;background:var(--pierre)}
.vit__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.vit__img.is-on{opacity:1}
@media (max-width:860px){
  .vit__in{grid-template-columns:1fr}
  .vit__media{position:relative;top:0;order:-1;aspect-ratio:4/4.3}
}

/* ------------------------------------------- the moment: the terrace -- */
.ter{background:var(--encre);color:#E9E4DC;padding:clamp(48px,6vw,72px) 0 var(--bloc);overflow:hidden}
.ter h2{color:var(--chaux)}
.ter .sur{color:var(--rampe-c)}
.rampe{display:block;width:100%;height:auto;max-height:72px;color:var(--rampe-c);margin-bottom:clamp(48px,7vw,96px)}
.rampe path{fill:none;stroke:currentColor;stroke-linecap:square}
.rampe .r-main{stroke-width:2.4}
.rampe .r-bar{stroke-width:1.6}
.rampe .r-lo{stroke-width:1.5}
.js .rampe:not(.is-on) path{stroke-dasharray:1;stroke-dashoffset:1}
.js .rampe.is-on path{stroke-dasharray:1;animation:trait 1.6s cubic-bezier(.45,.05,.25,1) both}
.js .rampe.is-on .r-bar{animation-delay:.5s;animation-duration:1.3s}
.js .rampe.is-on .r-lo{animation-delay:1s;animation-duration:1.1s}
@keyframes trait{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ter__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,7vw,100px);align-items:center}
.ter__txt p{color:#D4CEC4;max-width:470px}
.ter__liste{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--filet-clair);max-width:470px}
.ter__liste li{padding:12px 0;border-bottom:1px solid var(--filet-clair);font-size:15.5px;color:#E9E4DC}
.ter__txt .btn{margin-top:34px}
.ter__scene{position:relative;padding:0 0 64px 64px}
.ter__grand{position:relative}
.ter__grand::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(127,166,222,.55);pointer-events:none}
.ter__grand img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover}
.ter__inc{position:absolute;left:0;bottom:0;width:38%;margin:0;background:var(--encre);padding:7px}
.ter__inc img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ter__inc figcaption{font:500 12.5px/1.4 var(--sans);letter-spacing:.06em;color:#CFC9BF;padding:10px 2px 3px}
@media (max-width:860px){
  .ter__in{grid-template-columns:1fr}
  .ter__scene{padding:0 0 70px 30px;margin-top:14px}
  .ter__inc{width:46%}
}

/* ------------------------------------------------------------ reviews -- */
.avis{text-align:center}
.avis__pile{display:grid;max-width:860px;margin:44px auto 0;gap:44px}
.avis figure{margin:0}
.avis blockquote{margin:0}
.avis blockquote p{font:400 clamp(27px,3vw,38px)/1.28 var(--main);color:var(--encre)}
.avis figcaption{font:600 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-top:24px}
.avis--js .avis__pile{gap:0;align-items:center}
.avis--js .avis__pile figure{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.avis--js .avis__pile figure.is-on{opacity:1;visibility:visible;transition:opacity .8s ease}
.avis__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:40px}
.avis__nav[hidden]{display:none}
.avis__fl{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--filet);background:transparent;cursor:pointer;color:var(--encre)}
.avis__fl:hover{border-color:var(--encre)}
.avis__fl svg{width:18px;height:18px}
.avis__compte{font:600 12.5px/1 var(--sans);letter-spacing:.14em;color:var(--gris);min-width:48px}

/* ---------------------------------------------------- book direct band -- */
.direct{background:var(--rampe);color:var(--chaux);padding:clamp(72px,9vw,120px) 0;text-align:center}
.direct h2{color:var(--chaux)}
.direct p{max-width:560px;margin-left:auto;margin-right:auto;color:#E8EEF7}
.direct .spi{margin:0 auto 20px}
.direct__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}

/* ------------------------------------------------------------- footer -- */
.pied{background:var(--encre);color:#CFC9BF;padding:clamp(64px,8vw,96px) 0 34px;font-size:15px}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied__haut{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:40px}
.pied__marque{display:inline-flex;flex-direction:column;gap:12px;color:var(--chaux)}
.pied__marque .spi{width:64px;color:var(--terre-c)}
.pied__marque .marque__nom{font-size:34px}
.pied__marque .marque__ar{display:block;font-size:22px}
.pied__h{font:600 11.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8F8A82;margin:0 0 14px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--filet-clair);font-size:13px;color:#8F8A82}
.credit{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;text-decoration:none}
@media (max-width:860px){.pied__haut{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied__haut{grid-template-columns:1fr}}

/* ------------------------------------------------- inner page banners -- */
.ban{position:relative;min-height:60vh;min-height:60svh;display:flex;align-items:flex-end;color:#fff;background:#3a3631;overflow:hidden}
.ban__media,.ban__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ban::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,16,.62),rgba(18,17,16,.2) 55%,rgba(18,17,16,0) 80%),linear-gradient(rgba(18,17,16,.35),rgba(18,17,16,0) 30%)}
.ban__in{position:relative;z-index:1;padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(40px,7vh,72px)}
.ban h1{font-size:clamp(54px,7.4vw,104px);color:#fff}
.ban p{max-width:520px;font-size:clamp(16px,1.4vw,18.5px);margin-top:16px;color:#F3EFE8}
@media (max-width:760px){.ban{min-height:56vh;min-height:56svh}}

/* ------------------------------------------------------- room sheets -- */
.fiches{display:grid;gap:clamp(80px,10vw,140px)}
.fiche{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(36px,6vw,90px);align-items:start;scroll-margin-top:calc(var(--nav-h) + 20px)}
.fiche--inv .fiche__media{order:2}
.fiche__grand img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fiche__vigs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.vig{width:66px;height:82px;padding:0;border:0;background:var(--pierre);cursor:pointer;position:relative}
.vig img{width:100%;height:100%;object-fit:cover}
.vig[aria-pressed="true"]{outline:2px solid var(--terre);outline-offset:2px}
.fiche__txt{padding-top:clamp(0px,3vw,40px)}
.fiche__txt h2{font-size:clamp(46px,5vw,64px)}
.fiche__dl{margin:28px 0 0;border-top:1px solid var(--filet)}
.fiche__dl div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--filet);font-size:15.5px}
.fiche__dl dt{font:600 11.5px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.fiche__dl dd{margin:0;color:var(--texte)}
.fiche__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:26px}
.fiche__prix strong{font:600 22px/1.2 var(--sans);color:var(--encre)}
.fiche__prix span{font-size:14.5px;color:var(--gris)}
.fiche__txt .btn{margin-top:26px}
@media (max-width:860px){
  .fiche{grid-template-columns:1fr}
  .fiche--inv .fiche__media{order:0}
  .fiche__grand img{aspect-ratio:4/4.4}
  .fiche__dl div{grid-template-columns:110px minmax(0,1fr)}
}

.savoir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:40px;border-top:1px solid var(--filet)}
.savoir div{padding:16px 0;border-bottom:1px solid var(--filet)}
.savoir dt{font:600 15.5px/1.4 var(--sans);color:var(--encre)}
.savoir dd{margin:4px 0 0;font-size:15px;color:var(--gris);line-height:1.55}
@media (max-width:760px){.savoir{grid-template-columns:1fr}}

.exclu{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 44px;align-items:center;background:var(--chaux);padding:clamp(32px,5vw,56px);border:1px solid var(--pierre-f)}
.exclu h2{font-size:clamp(36px,4vw,52px)}
.exclu p{margin-top:12px;color:var(--gris);max-width:560px}
.exclu .spi{width:96px;color:var(--terre)}
@media (max-width:860px){.exclu{grid-template-columns:1fr}}

/* ------------------------------------------------------- the house -- */
.salons{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;margin-top:48px}
.salons figure{margin:0}
.salons img{width:100%;height:clamp(300px,34vw,500px);object-fit:cover}
.salons figcaption{font:500 13px/1.45 var(--sans);color:var(--gris);margin-top:10px}
@media (max-width:760px){.salons{grid-template-columns:1fr 1fr}.salons figure:first-child{grid-column:1 / -1}.salons img{height:auto;aspect-ratio:3/4}.salons figure:first-child img{aspect-ratio:4/3}}

.organise{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--filet)}
.organise li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--filet)}
.organise strong{display:block;font:600 16px/1.4 var(--sans);color:var(--encre)}
.organise span{display:block;font-size:15px;color:var(--gris);margin-top:3px}
@media (max-width:760px){.organise{grid-template-columns:1fr}}

.apied{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--filet);border-left:1px solid var(--filet)}
.apied li{padding:22px 20px;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.apied b{display:block;font:400 34px/1 var(--main);color:var(--encre)}
.apied span{display:block;font-size:14.5px;color:var(--gris);margin-top:8px}
@media (max-width:860px){.apied{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------ gallery -- */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.filtre{min-height:44px;padding:0 18px;border:1px solid var(--filet);background:transparent;font:600 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--encre);color:var(--chaux);border-color:var(--encre)}
.grille{columns:3;column-gap:14px}
.tuile{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:var(--pierre);cursor:zoom-in;break-inside:avoid}
.tuile img{width:100%}
.tuile[hidden]{display:none}
@media (max-width:860px){.grille{columns:2;column-gap:10px}.tuile{margin-bottom:10px}}

/* ------------------------------------------------------------ contact -- */
.coord{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:stretch}
.coord__l{display:grid;gap:0;margin:28px 0 0;border-top:1px solid var(--filet)}
.coord__l div{padding:16px 0;border-bottom:1px solid var(--filet)}
.coord__l dt{font:600 11.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.coord__l dd{margin:4px 0 0;font-size:17px;color:var(--encre)}
.coord__l a{text-decoration:none;border-bottom:1px solid var(--filet)}
.coord__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.whatsapp-cta{background:var(--rampe)}
.whatsapp-cta:hover{background:var(--rampe-f)}
.carte{min-height:440px;background:var(--pierre)}
.carte iframe{display:block;width:100%;height:100%;min-height:440px;border:0}
@media (max-width:860px){.coord{grid-template-columns:1fr}.carte,.carte iframe{min-height:340px}}
.porte__in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(36px,6vw,90px);align-items:center}
.porte__img img{width:100%;max-width:420px;aspect-ratio:778/1257;object-fit:cover}
.chemin{list-style:none;margin:28px 0 0;padding:0;counter-reset:c;display:grid;gap:22px}
.chemin li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;counter-increment:c}
.chemin li::before{content:counter(c);font:400 34px/1 var(--main);color:var(--terre)}
.chemin strong{display:block;font:600 16px/1.4 var(--sans);color:var(--encre)}
.chemin span{display:block;font-size:15.5px;color:var(--gris);margin-top:4px}
@media (max-width:760px){.porte__in{grid-template-columns:1fr}.porte__img img{max-width:258px}}

/* ------------------------------------------------------------- viewer -- */
.vis{position:fixed;inset:0;z-index:150;background:rgba(17,17,19,.96);display:none;align-items:center;justify-content:center;padding:64px 70px}
.vis.is-open{display:flex}
.vis img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vis__fl,.vis__x{position:absolute;width:52px;height:52px;border:0;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vis__fl svg,.vis__x svg{width:26px;height:26px}
.vis__fl--g{left:10px;top:50%;margin-top:-26px}.vis__fl--d{right:10px;top:50%;margin-top:-26px}
.vis__x{top:10px;right:10px}
.vis__leg{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#CFC9BF;font-size:14px;padding:0 70px}
@media (max-width:620px){.vis{padding:60px 8px 70px}.vis__fl--g,.vis__fl--d{top:auto;bottom:6px;margin:0}.vis__leg{bottom:22px}}

/* ------------------------------------------- booking window (.rsv) -- */
/* scroll architecture copied from .claude/rules/booking-modal.md §1, reskinned only */
.rsv{position:fixed;inset:0;z-index:140;display:none;align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rsv.is-open{display:flex}
.rsv__backdrop{position:fixed;inset:0;background:rgba(17,17,19,.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);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.rsv__aside{min-height:0;overflow-y:auto;background:var(--encre);color:#DCD6CC;padding:36px 32px;display:flex;flex-direction:column;gap:20px}
.rsv__aside .spi{width:70px;color:var(--terre-c)}
.rsv__h{font:400 44px/1.02 var(--main);color:var(--chaux)}
.rsv__aside p{font-size:15px;line-height:1.6}
.rsv__photo{margin-top:auto}
.rsv__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rsv__steps{display:flex;gap:6px}
.rsv__steps i{flex:1;height:3px;background:rgba(250,248,243,.2)}
.rsv__steps i.on{background:var(--terre-c)}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:36px 36px 30px}
.rsv__body > *{flex-shrink:0}
.rsv__close{position:absolute;top:8px;right:10px;z-index:3;width:46px;height:46px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;color:var(--encre)}
.rsv__bloc{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--filet)}
.rsv__lbl{font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0 0 12px}
.rsv__lbl b{font-weight:500;letter-spacing:.04em;text-transform:none}
.rsv__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rsv__field label{display:block;font-size:13.5px;color:var(--gris);margin-bottom:6px}
.rsv__field input[type="date"]{-webkit-appearance:none;appearance:none;width:100%;
  min-height:48px;line-height:1.3;padding:0 14px;font:500 16px var(--sans);color:var(--encre);border-radius:0;
  background:var(--pierre);border:1px solid var(--filet)}
.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{font-size:14px;color:var(--gris);margin-top:8px;min-height:1em}
.rsv__cpt{display:flex;align-items:center;border:1px solid var(--filet);background:var(--pierre);min-height:48px}
.rsv__cpt button{width:48px;height:46px;border:0;background:transparent;font-size:20px;cursor:pointer}
.rsv__cpt button:disabled{opacity:.3;cursor:default}
.rsv__cpt output{flex:1;text-align:center;font:600 16px var(--sans)}
.rsv__packs{display:grid;gap:8px;max-height:360px;overflow-y:auto}
.rsv__pack{width:100%;display:grid;grid-template-columns:22px 54px minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:8px 12px 8px 12px;
  border:1px solid var(--filet);background:#fff;cursor:pointer}
.rsv__pack--libre{grid-template-columns:22px minmax(0,1fr);padding:14px 12px}
.rsv__pack[aria-pressed="true"]{border-color:var(--terre);box-shadow:inset 0 0 0 1px var(--terre)}
.rsv__box{width:20px;height:20px;border:1.5px solid var(--gris)}
.rsv__pack[aria-pressed="true"] .rsv__box{background:var(--terre);border-color:var(--terre);box-shadow:inset 0 0 0 3px #fff}
.rsv__pack img{width:54px;height:66px;object-fit:cover;background:var(--pierre)}
.rsv__pack-n{font:400 23px/1.1 var(--main);color:var(--encre)}
.rsv__pack-n small{display:block;font:400 13.5px/1.4 var(--sans);color:var(--gris);margin-top:3px}
.rsv__pack-n .rsv__pack-prix{font-weight:600;color:var(--encre)}
.rsv__compte{font-size:13.5px;color:var(--gris);margin-top:8px;min-height:1em}
.rsv__opt{display:flex;gap:12px;align-items:flex-start;margin-top:14px;cursor:pointer;font-size:15px;color:var(--encre)}
.rsv__opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--terre);flex:none}
.rsv__opt small{display:block;color:var(--gris);font-size:13.5px}
.rsv__msg{width:100%;min-height:84px;padding:12px 14px;font:16px/1.5 var(--sans);border:1px solid var(--filet);background:var(--pierre);resize:vertical;border-radius:0}
.rsv__recap{background:var(--pierre);padding:16px 18px;margin-bottom:14px;font-size:15px}
.rsv__recap p+p{margin-top:4px}
.rsv__estim{font-weight:600;color:var(--encre)}
.rsv__hint{font-size:14px;color:var(--terre-f);margin-bottom:16px;min-height:1em}
.rsv__lbl--envoi{margin-top:4px}
.rsv__actions{display:flex;flex-wrap:wrap;gap:10px}
.rsv__actions .btn{flex:1 1 200px;min-width:0}
.rsv__actions .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.rsv__note{font-size:13.5px;color:var(--gris);margin-top:18px;line-height:1.55}
@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{flex-direction:row;align-items:center;padding:20px 24px;gap:16px}
  .rsv__aside p,.rsv__photo,.rsv__steps{display:none}
  .rsv__aside .spi{width:52px}
  .rsv__h{font-size:34px}
}
@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__packs{max-height:none}
  .rsv__body{padding:24px 20px 28px}
  .rsv__aside{padding:16px 20px;padding-right:60px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important}
  .hero__s.is-on img{transform:none}
}