/* Riad El Wazania, maison d'hôtes, médina de Rabat
   Every colour is taken from the house: Lin #F4EDE4 is its carved plaster, Fumée #2F2A26 the dark cedar of its
   galleries, Bronze #8C6A3A the brass of the patio chandelier, Henné #6E3219 the painted doors and the terracotta
   of the roof. Playfair Display is the face of the house's own Instagram visuals (a line upright, the next in
   italics); Work Sans carries the text, the labels and the buttons.
   Three motifs, all redrawn from the house: its arch (the carved headboard of the Double Deluxe, the frame of the
   engraved plaque), its emblem (the half-medallion above its name on Instagram), the wall of painted plates of
   the salon on the roof.
   Nothing on this site is hidden on load: no opacity:0 on content, no scroll reveal. The drawings are finished
   at rest; a class added once, on arrival in view, plays them from the start.                                   */

/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-italique.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Work Sans";src:url(assets/fonts/work-sans.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  --lin:#F4EDE4;          /* the plaster: main paper */
  --ivoire:#FBF8F3;       /* the booking window, the date bar */
  --sable:#ECE3D6;        /* offset bands */
  --fumee:#2F2A26;        /* text: 12.4:1 on lin */
  --gris:#6B5F56;         /* small text: 5.3:1 on lin */
  --bronze:#8C6A3A;       /* drawings and large italics */
  --bronze-f:#76582E;     /* small bronze text: 5.6:1 on lin */
  --bronze-c:#D4B47E;     /* bronze on dark: 5.0:1 on henné, 7.2:1 on fumée */
  --henne:#6E3219;
  --henne-2:#5E2914;
  --creme:#F7F1E8;        /* text on dark and on photos */
  --creme-d:rgba(247,241,232,.86);
  --filet:rgba(47,42,38,.16);
  --filet-f:rgba(47,42,38,.5);
  --filet-c:rgba(247,241,232,.26);
  --display:"Playfair Display","Iowan Old Style",Georgia,serif;
  --sans:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
  --gout:clamp(20px,5vw,60px);
  --section:clamp(84px,9vw,140px);
  --t:.35s cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lin);color:var(--fumee);font:300 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--fumee);color:var(--creme);text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gout)}

/* ------------------------------------------------------------ typography -- */
.h2{font-size:clamp(34px,3.7vw,54px);line-height:1.1;letter-spacing:-.005em;color:var(--fumee);text-wrap:balance}
.h2 em{display:block;font-style:italic;color:var(--bronze)}
.h2--clair{color:var(--creme)}
.h2--clair em{color:var(--bronze-c)}
.lbl{display:inline-flex;align-items:center;gap:14px;margin:0 0 20px;font:500 11.5px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-f)}
.lbl::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.lbl--clair{color:var(--bronze-c)}
.lead{margin-top:24px;font-size:1.1rem;line-height:1.7;max-width:34em}
.lead+p,p+p{margin-top:14px}
.tete-sec{max-width:760px;margin:0 0 clamp(40px,5vw,64px)}

/* --------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 28px;border:1px solid var(--fumee);border-radius:0;background:var(--fumee);color:var(--creme);font:500 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--t),color var(--t),border-color var(--t)}
.btn:hover{background:var(--henne);border-color:var(--henne)}
.btn--clair{background:var(--creme);border-color:var(--creme);color:var(--fumee)}
.btn--clair:hover{background:var(--sable);border-color:var(--sable);color:var(--fumee)}
.btn--ligne{background:transparent;border-color:var(--filet-f);color:var(--fumee)}
.btn--ligne:hover{background:var(--fumee);border-color:var(--fumee);color:var(--creme)}
.btn--ligne-clair{background:transparent;border-color:rgba(247,241,232,.72);color:var(--creme)}
.btn--ligne-clair:hover{background:var(--creme);border-color:var(--creme);color:var(--fumee)}
.btn--nav{min-height:44px;padding:10px 22px;font-size:11px}
.lien{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding-bottom:5px;border-bottom:1px solid var(--filet-f);font:500 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--fumee);transition:border-color var(--t)}
.lien svg{width:22px;height:11px;flex:none;transition:transform var(--t)}
.lien:hover{border-color:var(--bronze)}
.lien:hover svg{transform:translateX(6px)}
.lien--clair{color:var(--creme);border-color:var(--filet-c)}
.lien--clair:hover{border-color:var(--bronze-c)}
.ico{display:inline-flex;flex:none;width:26px;height:26px;color:var(--bronze)}
.ico svg{display:block;width:100%;height:100%}
.ico--btn{width:18px;height:18px;color:currentColor}

/* ------------------------------------------------------------ the emblem -- */
/* the half-medallion of the house: drawn at rest; .dessine (added once, in view) traces it from nothing */
.emb{display:block;width:64px;color:var(--bronze);--sw:1.8}
.emb svg{display:block;width:100%;height:auto;overflow:visible}
.emb__t{fill:none;stroke:currentColor;stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round}
.emb__t path{stroke-dasharray:1;stroke-dashoffset:0}
.emb__p{fill:currentColor}
.emb__p circle{transform-box:fill-box;transform-origin:center}
.emb.dessine .emb__t path{animation:emb-trace 2s cubic-bezier(.55,.1,.25,1)}
.emb.dessine svg{animation:emb-ouvre 2.4s cubic-bezier(.3,.6,.2,1)}
.emb.dessine .emb__p circle{animation:pt-pose .6s 1.5s cubic-bezier(.3,.6,.2,1) both}
@keyframes emb-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes emb-ouvre{from{transform:translateY(5px) scale(.92)}to{transform:none}}
@keyframes pt-pose{from{transform:scale(0)}to{transform:none}}
.emb--titre{margin:0 0 18px}
.emb--marque{width:44px;color:currentColor;--sw:2.4}
.emb--bandeau{width:72px;margin:0 auto 18px;color:var(--creme);--sw:1.7;filter:drop-shadow(0 1px 8px rgba(0,0,0,.4))}
.emb--direct{width:52%;margin:0 auto 18%;color:var(--bronze-c);--sw:.85}
.emb--pied{width:92px;color:var(--bronze);--sw:1.35}

/* -------------------------------------------------------------- the arch -- */
/* the head keeps its real proportions (xMidYMin meet), the legs run long and the clip cuts them at the box.
   Traced top to bottom on the <svg> itself: a clip on the path is dropped by Chrome. */
.arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(0);pointer-events:none}
.arc path,.arc-cadre path{fill:none;stroke:currentColor;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
@keyframes arc{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.arc.trace,.arc-cadre.trace{animation:arc 2.2s cubic-bezier(.6,.1,.2,1)}

/* ------------------------------------------------------------------- nav -- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;color:var(--creme);transition:background-color var(--t),box-shadow var(--t),color var(--t)}
/* its own shade, so the light links read on any photo */
.nav::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(28,22,18,.64),rgba(28,22,18,.24) 62%,rgba(28,22,18,0));transition:opacity var(--t)}
.nav.scrolled{background:var(--lin);color:var(--fumee);box-shadow:0 1px 0 var(--filet)}
.nav.scrolled::before,.nav.menu-open::before{opacity:0}
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:18px var(--gout);transition:padding var(--t)}
.nav.scrolled .nav__in{padding-top:12px;padding-bottom:12px}
.marque{position:relative;z-index:120;justify-self:start;display:inline-flex;align-items:center;gap:13px;color:inherit;text-decoration:none}
.marque__nom{font:500 15px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.nav__links ul{display:flex;align-items:center;gap:clamp(22px,2.4vw,40px);margin:0;padding:0;list-style:none}
.nav__links a{display:inline-block;padding:3px 0;border-bottom:1px solid transparent;font:400 17px/1.3 var(--display);color:inherit;text-decoration:none;transition:border-color var(--t)}
.nav__links a:hover,.nav__links a.active{border-bottom-color:currentColor}
.nav.scrolled .nav__links a:hover,.nav.scrolled .nav__links a.active{border-bottom-color:var(--bronze)}
.nav__menu-pied{display:none}
.nav__actions{position:relative;z-index:120;justify-self:end;display:flex;align-items:center;gap:20px}
.nav__lang{padding:4px 0;border-bottom:1px solid transparent;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:inherit;transition:border-color var(--t)}
.nav__lang:hover{border-bottom-color:currentColor}
.nav:not(.scrolled) .btn--nav{background:var(--creme);border-color:var(--creme);color:var(--fumee)}
.nav:not(.scrolled) .btn--nav:hover{background:var(--sable);border-color:var(--sable)}
.nav__burger{position:relative;z-index:120;display:none;place-content:center;gap:7px;width:46px;height:46px;padding:0;border:1px solid rgba(247,241,232,.65);border-radius:0;background:transparent;cursor:pointer}
.nav__burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform var(--t)}
.nav.scrolled .nav__burger,.nav.menu-open .nav__burger{border-color:var(--filet-f)}
.nav.menu-open .nav__burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav.menu-open .nav__burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

@media (max-width:1080px){
  /* two tracks once the links leave the flow, or the burger lands mid-bar */
  .nav__in{grid-template-columns:1fr auto}
  .nav::before{inset:0 0 -30px}
  .nav__actions{display:none}
  .nav__burger{display:grid}
  .nav__links{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;padding:100px var(--gout) 40px;background:var(--lin);color:var(--fumee);transform:translateX(100%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
  .nav__links.nav-open{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
  .nav__links ul{flex-direction:column;align-items:flex-start;gap:6px}
  .nav__links a{padding:8px 0;font-size:30px}
  .nav__links a.active{border-bottom-color:var(--bronze)}
  .nav__menu-pied{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:38px}
  .nav__menu-pied .btn{background:var(--fumee);border-color:var(--fumee);color:var(--creme)}
  .nav.menu-open{background:var(--lin);color:var(--fumee);box-shadow:none}
}
@media (max-width:420px){.marque__nom{font-size:13px;letter-spacing:.16em}.marque{gap:10px}.emb--marque{width:38px}}

/* ------------------------------------------------------------------ hero -- */
/* The classic hero (Jad, 2026-10-13, after the window: « too white », « the arc is too forced »): one photo across
   the whole screen, kept bright, settling from 1.03 in a slow crossfade; the shade sits only behind the words (a soft
   radial at the centre, the nav's own band, one at the foot under the dates). The name rising in the house's formula,
   centred, a bronze hairline drawn under it (never the emblem on a busy photo), the dates docked at the foot, the photo's name and its count at the corner.
   A computer shows the two landscape originals at their native 3000 px, a phone three portraits: nothing upscaled. */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--fumee);color:var(--creme)}
.hero__ph{position:absolute;inset:0}
.hero__ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 52% 50% at 50% 50%,rgba(24,19,16,.64),rgba(24,19,16,.38) 55%,rgba(24,19,16,0)),linear-gradient(to top,rgba(24,19,16,.62),rgba(24,19,16,0) 30%),rgba(24,19,16,.16)}
.hsl{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hsl.on{opacity:1}
.hsl img{width:100%;height:100%;object-fit:cover}
.hsl.on img{animation:pose 12s cubic-bezier(.2,.6,.3,1) both}
@keyframes pose{from{transform:scale(1.03)}to{transform:none}}
.hero__in{position:relative;z-index:1;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;height:100%;padding:104px var(--gout) clamp(28px,4.4vh,48px)}
.hero__txt{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 1px 3px rgba(20,16,13,.35),0 2px 28px rgba(20,16,13,.5)}
.hero__titre{font-size:clamp(58px,7.2vw,120px);line-height:.98;color:var(--creme)}
.hero__titre em{display:block;font-style:italic;color:var(--bronze-c)}
.hero__filet{display:block;width:88px;height:1px;margin-top:30px;background:var(--bronze-c);animation:filet 1.6s .5s cubic-bezier(.6,.1,.2,1) both}
@keyframes filet{from{transform:scaleX(0)}to{transform:none}}
.hero__sous{max-width:30em;margin-top:24px;font-size:18px;font-weight:400;line-height:1.6;color:var(--creme)}
.hero__lien{margin-top:30px}
.hero .barre{width:min(780px,100%);grid-template-columns:repeat(3,minmax(0,1fr)) auto}
/* the photo's name and count, at the corner of the foot: the hairline fills while the photo is shown */
.hero__suivi{position:absolute;z-index:1;left:var(--gout);bottom:clamp(28px,4.4vh,48px);display:grid;grid-template-columns:auto 56px auto;align-items:center;gap:10px 14px;font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--creme);text-shadow:0 1px 12px rgba(20,16,13,.5)}
.hero__fil{height:1px;overflow:hidden;background:var(--filet-c)}
.hero__fil i{display:block;height:100%;background:var(--creme);transform:scaleX(0);transform-origin:left}
.hero__suivi.joue .hero__fil i{animation:fil 7s linear both}
@keyframes fil{to{transform:none}}
.hero__leg{grid-column:1/-1;font:italic 400 16px/1.3 var(--display);letter-spacing:0}
@media (max-width:1279px),(prefers-reduced-motion:reduce){.hero__suivi{display:none}}
/* a phone, or a tablet held upright: the portraits, the name a little lower than the middle, the dates as a card */
@media (max-width:767px),(max-width:1023px) and (orientation:portrait){
  .hero__ph::after{background:radial-gradient(ellipse 70% 34% at 50% 44%,rgba(24,19,16,.5),rgba(24,19,16,.2) 60%,rgba(24,19,16,0)),linear-gradient(to top,rgba(24,19,16,.55),rgba(24,19,16,0) 36%),rgba(24,19,16,.1)}
  .hero__titre{font-size:clamp(46px,13vw,76px)}
  .hero__filet{width:64px;margin-top:20px}
  .hero__sous{max-width:21em;margin-top:18px;font-size:16px;line-height:1.55}
  .hero__lien{margin-top:22px}
  .hero .barre{width:min(560px,100%)}
}
@media (max-width:767px){.hero .barre{grid-template-columns:1fr 1fr}}
@media (max-width:767px) and (max-height:640px){.hero__lien{display:none}}
.monte{animation:monte 1s cubic-bezier(.2,.7,.2,1) both}
.monte--2{animation-delay:.14s}
.monte--3{animation-delay:.28s}
@keyframes monte{from{transform:translateY(18px)}to{transform:none}}

/* the date bar: in the first screen, always (check-riad measures it) */
.barre{position:relative;display:grid;grid-template-columns:repeat(3,176px) auto;background:rgba(251,248,243,.97);color:var(--fumee);text-align:left}
.barre__f{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:12px 20px;border-right:1px solid var(--filet)}
.barre__f label{font:500 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.barre__f input,.barre__f select{-webkit-appearance:none;appearance:none;width:100%;min-height:30px;margin:0;padding:3px 0 0;border:0;border-radius:0;background:none;font:400 16px/1.3 var(--sans);color:var(--fumee);cursor:pointer}
.barre__f input::-webkit-date-and-time-value{text-align:left;margin:0}
.barre__f input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.barre__f select{padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--fumee) 50%),linear-gradient(135deg,var(--fumee) 50%,transparent 50%);background-position:calc(100% - 10px) 60%,calc(100% - 5px) 60%;background-size:5px 5px;background-repeat:no-repeat}
.barre__btn{min-height:64px;padding:0 32px;border:0}

@media (max-width:767px){
  .hero__in{padding:88px 16px 16px}
  .barre{grid-template-columns:1fr 1fr;width:100%}
  .barre__f{padding:10px 14px;border-bottom:1px solid var(--filet)}
  .barre__f:nth-child(2){border-right:0}
  .barre__f:nth-child(3){border-bottom:0}
  .barre__btn{min-height:56px;padding:0 16px}
}

/* ------------------------------------------------------------ facts row --- */
.faits{padding:clamp(36px,4vw,56px) 0 0}
.faits__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto;list-style:none}
.faits__in li{display:flex;align-items:flex-start;gap:16px;padding:24px 22px 22px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.faits__in li:first-child{padding-left:0}
.faits__in li+li{border-left:1px solid var(--filet)}
.faits__in .ico{margin-top:2px}
.faits__k{display:block;font:500 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.faits__v{display:block;margin-top:4px;font:400 19px/1.3 var(--display);color:var(--fumee)}
.faits__v a{text-decoration:none;border-bottom:1px solid var(--filet-f)}
@media (max-width:1023px){
  .faits__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits__in li:nth-child(3){padding-left:0;border-left:0}
  .faits__in li:nth-child(n+3){border-top:0}
}
@media (max-width:480px){
  .faits__in li{gap:10px;padding:18px 12px 16px}
  .faits__in li:nth-child(odd){padding-left:0}
  .faits__in .ico{width:22px;height:22px}
  .faits__v{font-size:16.5px}
}

/* ------------------------------------- the patio: a photo cut in the arch -- */
.maison,.intro{padding:var(--section) 0}
.maison__in,.intro__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:center}
.maison__media,.intro__media{position:relative;padding:16px 0 56px 16px}
.maison__fen{position:relative;width:min(100%,440px)}
.maison__arc{aspect-ratio:100/133;overflow:hidden;background:var(--sable);-webkit-mask:url(assets/motifs/arc-masque.svg) center/100% 100% no-repeat;mask:url(assets/motifs/arc-masque.svg) center/100% 100% no-repeat}
.maison__arc img{width:100%;height:100%;object-fit:cover}
/* the arch a second time, a hairline 14 px outside the photo */
.arc-cadre{position:absolute;top:-14px;left:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;color:var(--bronze);pointer-events:none}
.maison__incrust{position:absolute;right:0;bottom:0;width:42%;margin:0;padding:8px 8px 0;background:var(--lin)}
.maison__incrust img{width:100%;aspect-ratio:680/829;object-fit:cover}
.maison__incrust figcaption,.toit__incrust figcaption{padding:8px 2px 6px;font:italic 400 14px/1.4 var(--display);color:var(--gris)}
.intro .maison__incrust img{aspect-ratio:1}

/* ---------------------------------------------------- the room showcase -- */
.vitrine{padding:var(--section) 0;background:var(--sable)}
.vitrine__tete{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.vitrine__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start}
.vitrine__photo{position:sticky;top:100px;aspect-ratio:4/5;overflow:hidden;background:var(--fumee)}
.vitrine__ph{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.vitrine__ph.on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.vitrine__ph img{width:100%;height:100%;object-fit:cover}
.vitrine__ph.on img{animation:pose 9s cubic-bezier(.2,.6,.3,1) both}
.vitrine__ph figcaption{position:absolute;top:14px;left:14px;padding:5px 11px;background:rgba(28,22,18,.66);font:400 12.5px/1.3 var(--sans);color:var(--creme)}
.vitrine__ph-pied{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;padding:90px 26px 24px;background:linear-gradient(to top,rgba(28,22,18,.82),rgba(28,22,18,.4) 55%,rgba(28,22,18,0));color:var(--creme)}
.vitrine__ph-pied strong{display:block;font:400 24px/1.2 var(--display)}
.vitrine__ph-pied p span{display:block;margin-top:4px;font-size:14.5px;color:var(--creme-d)}
.vitrine__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.vitrine__btns .btn{background:var(--creme);border-color:var(--creme);color:var(--fumee);min-height:46px;padding:12px 20px;font-size:11px}
.vitrine__btns .btn:hover{background:var(--sable);border-color:var(--sable)}
.vitrine__btns .lien{margin-top:0;color:var(--creme);border-color:var(--filet-c);font-size:11px}
.vitrine__liste ul{margin:0;padding:0;list-style:none}
.vitrine__groupe{padding:26px 0 8px;border-bottom:1px solid var(--filet);font:italic 400 21px/1.3 var(--display);color:var(--bronze-f)}
.vitrine__groupe:first-child{padding-top:0}
.vitrine__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;border-bottom:1px solid var(--filet)}
.vitrine__row::before{content:"";position:absolute;left:0;top:50%;width:20px;height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vitrine__choix{display:block;width:100%;padding:15px 0;border:0;background:none;text-align:left;cursor:pointer}
.vitrine__nom{display:block;font:400 19px/1.3 var(--display);color:var(--fumee);transition:transform .5s cubic-bezier(.2,.7,.2,1),color var(--t)}
.vitrine__det{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--gris);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vitrine__prix{font-size:14.5px;white-space:nowrap;color:var(--fumee)}
.vitrine__row.on::before{transform:none}
.vitrine__row.on .vitrine__nom,.vitrine__row.on .vitrine__det{transform:translateX(32px)}
.vitrine__row.on .vitrine__nom{color:var(--henne)}
.vitrine__note{margin-top:22px;font-size:14px;line-height:1.6;color:var(--gris)}

/* ---------------------------------------- the moment: the roof and its plates -- */
.toit{position:relative;overflow:hidden;padding:var(--section) 0;background:var(--henne);color:var(--creme)}
.toit__in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,7vw,110px);align-items:center}
.toit__txt p:not(.lbl){max-width:30em;margin-top:18px;color:var(--creme-d)}
.toit__txt .h2+p{margin-top:26px}
.toit__photos{position:relative;z-index:1;padding:0 0 70px}
.toit__grand{width:76%;margin:0 0 0 auto;aspect-ratio:4/5;overflow:hidden}
.toit__grand img{width:100%;height:100%;object-fit:cover}
.toit__incrust{position:absolute;left:0;bottom:0;width:40%;margin:0;padding:8px 8px 0;background:var(--creme)}
.toit__incrust img{width:100%;aspect-ratio:680/829;object-fit:cover}
.toit--maison .toit__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.toit--maison .toit__photos{order:-1}
.toit--maison .toit__grand{margin:0 auto 0 0}
.toit--maison .toit__incrust{left:auto;right:0}
/* the wall of painted plates, redrawn: each plate hung after the one before, on arrival in view */
.assiettes{position:absolute;right:-150px;top:-70px;width:min(780px,60vw);color:rgba(212,180,126,.36);pointer-events:none}
.toit--maison .assiettes{top:auto;bottom:-110px;right:-150px}
.assiettes svg{display:block;width:100%;height:auto;overflow:visible}
.assiettes [pathLength]{fill:none;stroke:currentColor;stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0}
.assiettes .pt{fill:currentColor;transform-box:fill-box;transform-origin:center}
.assiettes.pose [pathLength]{animation-name:trait;animation-duration:1.5s;animation-timing-function:cubic-bezier(.5,.1,.25,1);animation-fill-mode:both;animation-delay:calc(var(--i) * 90ms)}
.assiettes.pose .pt{animation-name:pt-pose;animation-duration:.5s;animation-timing-function:cubic-bezier(.3,.6,.2,1);animation-fill-mode:both;animation-delay:calc(var(--i) * 90ms + .9s)}
@keyframes trait{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* --------------------------------------------------------------- reviews -- */
.avis{padding:var(--section) 0;background:var(--fumee);color:var(--creme);text-align:center}
.avis__in{max-width:960px}
.avis .lbl{justify-content:center;margin-bottom:34px}
.avis .lbl::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.avis__liste{display:grid;margin:0;padding:0;list-style:none}
.avis__item{margin:0}
.avis__item blockquote{margin:0}
.avis__item p{font:italic 400 clamp(23px,2.6vw,34px)/1.45 var(--display);color:var(--creme);text-wrap:balance}
.avis__item cite{display:block;margin-top:26px;font:500 12px/1.3 var(--sans);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-c)}
/* one quote at a time once app.js runs; every quote stays listed without it */
.js .avis__item{grid-area:1/1;visibility:hidden}
.js .avis__item.on{visibility:visible;animation:avis-in 1s cubic-bezier(.2,.7,.2,1)}
@keyframes avis-in{from{transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 -20% 0)}}
html:not(.js) .avis__liste{gap:48px}
html:not(.js) .avis__nav{display:none}
.avis__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:42px}
.avis__fl{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--filet-c);background:transparent;color:var(--creme);cursor:pointer;transition:border-color var(--t)}
.avis__fl:hover{border-color:var(--bronze-c)}
.avis__fl svg{width:20px;height:10px}
.avis__compte{min-width:4.5ch;font-size:13px;letter-spacing:.14em;color:var(--creme-d)}

/* ------------------------------------------------------------- instagram -- */
.insta{padding:var(--section) 0}
.insta__tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(30px,4vw,44px)}
.insta__tete .lien{margin-top:0}
.insta__grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tuile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--sable)}
.tuile img{width:100%;height:100%;object-fit:cover}
.tuile::after{content:"";position:absolute;inset:0;background:rgba(28,22,18,0);transition:background-color var(--t)}
.tuile:hover::after{background:rgba(28,22,18,.18)}
.tuile__ig{position:absolute;top:10px;right:10px;z-index:1;display:block;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.tuile__ig svg{display:block;width:100%;height:100%}

/* ------------------------------------- book direct: the arch traced again -- */
.direct{padding:var(--section) 0;background:var(--fumee);color:var(--creme)}
/* the emblem large in the head of the door, like the carved fan over the house's own doors; the words below its
   springing (at ~98 % of its width), where the door is full width */
/* padding in % would follow the wrap's width, not the door's: min(400px,100%) IS the door's width */
.direct__in{--w:min(400px,100%);position:relative;width:var(--w);margin:0 auto;padding:calc(var(--w) * .58) calc(var(--w) * .07) calc(var(--w) * .09);text-align:center}
.arc--direct{color:rgba(212,180,126,.8)}
.direct h2{position:relative;font-size:clamp(30px,2.6vw,38px);line-height:1.1;color:var(--creme)}
.direct p{position:relative;max-width:30ch;margin:16px auto 0;font-size:16px;line-height:1.65;color:var(--creme-d)}
.direct__btns{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.direct__btns .btn{white-space:nowrap}
.direct .emb{position:relative}

/* ---------------------------------------------------------------- footer -- */
.pied{padding:clamp(64px,7vw,96px) 0 28px;background:var(--sable);color:var(--fumee)}
.pied__in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.pied__lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--fumee);text-decoration:none}
.pied__nom{font:500 19px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase}
.pied__ville{margin-top:-6px;font:500 11.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gris)}
.pied__h{margin:0 0 14px;font:500 11.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-f)}
.pied__col p,.pied__col li{font-size:15px;line-height:1.75}
.pied__col p+p{margin-top:10px}
.pied__col ul{margin:0;padding:0;list-style:none}
.pied__col a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t)}
.pied__col a:hover{border-bottom-color:var(--bronze)}
.pied__bas{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 30px;margin-top:56px;padding-top:22px;font-size:13px;color:var(--gris)}
.pied__bas::before{content:"";position:absolute;top:0;left:var(--gout);right:var(--gout);height:1px;background:var(--filet)}
.pied__bas a{text-decoration:none}
.credit a{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.credit a:hover{color:var(--fumee)}

/* ------------------------------------------------------------ page banner -- */
/* ONE photo per page, behind the title, settling over 16 s */
.bandeau{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(440px,66vh,640px);overflow:hidden;background:var(--fumee);color:var(--creme);text-align:center}
.bandeau picture{position:absolute;inset:0;z-index:-2}
.bandeau img{width:100%;height:100%;object-fit:cover;animation:pose 16s cubic-bezier(.2,.6,.3,1) both}
.bandeau::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(28,22,18,.62),rgba(28,22,18,.14) 58%,rgba(28,22,18,.36))}
.bandeau__in{padding-top:140px;padding-bottom:clamp(48px,6vw,82px)}
.bandeau h1{font-size:clamp(46px,6vw,84px);line-height:1.02;color:var(--creme);text-shadow:0 2px 24px rgba(0,0,0,.3)}
.bandeau p{max-width:36em;margin:16px auto 0;font-size:17px;font-weight:400;line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ------------------------------------------------------- the room sheets -- */
.fiches{padding:var(--section) 0}
.fiches__groupe{display:flex;align-items:center;gap:22px;margin:0 0 clamp(36px,4vw,52px);font:italic 400 clamp(27px,2.6vw,36px)/1.2 var(--display);color:var(--bronze)}
.fiches__groupe::after{content:"";flex:1;height:1px;background:var(--filet)}
.fiche+.fiches__groupe{margin-top:clamp(72px,8vw,120px)}
.fiche{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center;scroll-margin-top:100px}
.fiche+.fiche{margin-top:clamp(56px,6vw,90px);padding-top:clamp(56px,6vw,90px);border-top:1px solid var(--filet)}
.fiche--inv{grid-template-columns:minmax(0,1fr) minmax(0,500px)}
.fiche--inv .fiche__photo{order:2}
.fiche__cadre{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.fiche__grand{width:100%;height:100%;object-fit:cover}
.fiche__voir{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:0;background:rgba(251,248,243,.95);color:var(--fumee);font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.fiche__voir .ico{width:18px;height:18px;color:var(--fumee)}
.fiche__vign{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fiche__vign button{width:84px;height:63px;padding:0;border:1px solid transparent;background:none;opacity:.6;cursor:pointer;transition:opacity var(--t),border-color var(--t)}
.fiche__vign button:hover{opacity:.9}
.fiche__vign button[aria-pressed="true"]{opacity:1;border-color:var(--bronze)}
.fiche__vign img{width:100%;height:100%;object-fit:cover}
.fiche__sembl{margin-top:10px;font:italic 400 14.5px/1.4 var(--display);color:var(--gris)}
.fiche__txt h3{font-size:clamp(28px,2.6vw,38px);line-height:1.15}
.fiche__dl{margin:24px 0 0;border-top:1px solid var(--filet)}
.fiche__dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--filet)}
.fiche__dl dt{padding-top:3px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.fiche__dl dd{margin:0;font-size:15.5px;line-height:1.55}
.fiche__prix{margin:26px 0 22px;font:400 27px/1.2 var(--display)}
.fiche__prix span{display:block;margin-top:4px;font:300 14.5px/1.5 var(--sans);color:var(--gris)}
.fiches__note{margin-top:clamp(56px,6vw,90px);padding-top:24px;border-top:1px solid var(--filet);font-size:14px;line-height:1.6;color:var(--gris);max-width:62em}

/* -------------------------------------------------------- la maison page -- */
.plaque{margin:30px 0 0;padding:26px 28px 22px;border:1px solid var(--bronze);text-align:center}
.plaque p{font:italic 400 20px/1.5 var(--display);color:var(--fumee)}
.plaque footer{margin-top:12px;font:500 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.phrases{display:grid;gap:20px;margin-top:30px}
.phrase{margin:0;padding-left:20px;border-left:1px solid var(--bronze)}
.phrase blockquote{margin:0}
.phrase p{font:italic 400 18px/1.5 var(--display)}
.phrase figcaption{margin-top:6px;font:500 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}

.details{padding:var(--section) 0 calc(var(--section) + 40px);background:var(--sable)}
/* six details in three staggered columns: every photo keeps its upright frame */
.mos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,30px);align-items:start}
.mos__f{margin:0}
.mos__f:nth-child(3n+2){transform:translateY(60px)}
.mos__f>img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mos__f figcaption{margin-top:10px;font:italic 400 16px/1.4 var(--display);color:var(--fumee)}

.repas{padding:var(--section) 0}
.repas__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,7vw,110px);align-items:center}
.repas__photos{position:relative;padding-bottom:90px}
.repas__a{width:84%;margin:0;aspect-ratio:5/4;overflow:hidden}
.repas__a img,.repas__b img{width:100%;height:100%;object-fit:cover}
.repas__b{position:absolute;right:0;bottom:0;width:44%;margin:0;aspect-ratio:4/3;overflow:hidden;outline:8px solid var(--lin)}
.repas__txt h3{margin:30px 0 8px;font-size:23px;line-height:1.25}
.repas__txt .h2+h3{margin-top:30px}
.repas__txt h3+p{margin-top:0}

.autour{padding:var(--section) 0;background:var(--sable)}
.autour__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px)}
.autour__lead{margin-top:20px;color:var(--gris)}
.autour__liste{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--filet)}
.autour__liste li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--filet)}
.autour__liste li span:first-child{font:400 19px/1.3 var(--display)}
.autour__liste li span:last-child{font-size:14.5px;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.savoir{margin:30px 0 0;border-top:1px solid var(--filet)}
.savoir div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--filet)}
.savoir dt{padding-top:3px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-f)}
.savoir dd{margin:0;font-size:15.5px;line-height:1.55}

/* ---------------------------------------------------------------- gallery -- */
.galerie{padding:clamp(56px,6vw,90px) 0 var(--section)}
.filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-bottom:clamp(30px,4vw,48px)}
.filtre{min-height:44px;padding:10px 20px;border:1px solid var(--filet-f);border-radius:0;background:transparent;font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fumee);cursor:pointer;transition:background-color var(--t),color var(--t),border-color var(--t)}
.filtre:hover{border-color:var(--fumee)}
.filtre[aria-pressed="true"]{background:var(--fumee);border-color:var(--fumee);color:var(--creme)}
.galerie__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(200px,25vw,350px);grid-auto-flow:dense;gap:10px;margin:0;padding:0;list-style:none}
.galerie__grille .grande{grid-row:span 2}
.galerie__grille .grande--g{grid-column:1/span 2}
.galerie__grille .grande--d{grid-column:2/span 2}
.tuile-g{display:block;width:100%;height:100%;padding:0;border:0;overflow:hidden;background:var(--sable);cursor:zoom-in}
.tuile-g img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- contact -- */
.coord{padding:var(--section) 0}
.coord__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:stretch}
.coord__dl{margin:28px 0 0;border-top:1px solid var(--filet)}
.coord__dl div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--filet)}
.coord__dl dt{padding-top:3px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-f)}
.coord__dl dd{margin:0;font-size:15.5px;line-height:1.6}
.coord__dl a{text-decoration:none;border-bottom:1px solid var(--filet-f)}
.coord__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.coord__carte{min-height:460px;background:var(--sable)}
.coord__carte iframe{display:block;width:100%;height:100%;min-height:460px;border:0}
.venir{padding:var(--section) 0;background:var(--sable)}
.venir__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.venir__c{padding-top:20px;border-top:1px solid var(--bronze)}
.venir__c h3{margin-bottom:10px;font-size:22px;line-height:1.25}
.venir__c p{font-size:15.5px;line-height:1.65}

/* ------------------------------------------------- hover: the photo leans in -- */
@media (hover:hover){
  .maison__arc img,.toit__grand img,.toit__incrust img,.maison__incrust img,.fiche__grand,.mos__f>img,.tuile img,.tuile-g img,.repas__a img,.repas__b img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .maison__arc:hover img,.toit__grand:hover img,.toit__incrust:hover img,.maison__incrust:hover img,.fiche__cadre:hover .fiche__grand,.mos__f:hover>img,.tuile:hover img,.tuile-g:hover img,.repas__a:hover img,.repas__b:hover img{transform:scale(1.05)}
  .mos__f,.maison__incrust,.toit__incrust{overflow:hidden}
}

/* ---------------------------------------------------------------- layouts -- */
@media (max-width:1023px){
  .maison__in,.intro__in,.toit__in,.toit--maison .toit__in,.repas__in,.coord__in,.autour__in{grid-template-columns:1fr}
  .maison__media,.intro__media{max-width:560px}
  .toit--maison .toit__photos{order:0}
  .toit__photos{max-width:620px}
  .vitrine__in{grid-template-columns:1fr;gap:28px}
  .vitrine__photo{top:78px;z-index:2;aspect-ratio:4/3}
  .fiche,.fiche--inv{grid-template-columns:1fr;gap:28px}
  .fiche--inv .fiche__photo{order:0}
  .fiche__photo{max-width:560px}
  .pied__in{grid-template-columns:1fr 1fr}
  .pied__marque{grid-column:1/-1}
  .venir__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assiettes,.toit--maison .assiettes{top:auto;bottom:-30px;left:auto;right:-60px;width:min(640px,118vw);margin-top:0}
}
@media (max-width:767px){
  body{font-size:16px}
  .maison__fen{width:82%}
  .maison__incrust{width:46%}
  .vitrine__ph-pied{padding:70px 16px 14px;gap:10px 14px}
  .vitrine__ph-pied strong{font-size:20px}
  .vitrine__ph-pied p span{font-size:13.5px}
  .vitrine__btns .btn{min-height:42px;padding:10px 14px}
  .vitrine__btns .lien{display:none}
  .vitrine__row.on .vitrine__nom,.vitrine__row.on .vitrine__det{transform:translateX(26px)}
  .vitrine__prix{font-size:13.5px}
  .toit__grand{width:82%}
  .toit__incrust{width:44%}
  .insta__grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mos__f:nth-child(3n+2){transform:none}
  .mos__f:nth-child(2n){transform:translateY(40px)}
  .repas__a{width:88%}
  .repas__b{width:50%}
  .filtres{gap:6px}
  .filtre{min-height:40px;padding:8px 13px;font-size:10.5px;letter-spacing:.14em}
  .galerie__grille{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:46vw;gap:6px}
  .galerie__grille .grande,.galerie__grille .grande--g,.galerie__grille .grande--d,.galerie__grille .fin2{grid-column:1/-1;grid-row:span 1}
  .fiche__dl div,.savoir div,.coord__dl div{grid-template-columns:118px minmax(0,1fr);gap:12px}
  .coord__carte,.coord__carte iframe{min-height:360px}
  .venir__g{grid-template-columns:1fr;gap:26px}
  .bandeau{min-height:clamp(420px,74svh,560px)}
}
@media (max-width:480px){
  .pied__in{grid-template-columns:1fr}
  .avis .lbl::before,.avis .lbl::after{display:none}
  .fiche__vign button{width:72px;height:54px}
}

/* ---------------------------------------------------------- photo viewer -- */
.vis{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;background:#1E1A17;color:var(--creme)}
.vis.is-open{display:flex}
.vis__fig{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:0;padding:64px 80px 10px}
.vis__fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vis__cap{padding:4px 20px 10px;text-align:center;font:italic 400 16px/1.4 var(--display);color:var(--creme-d)}
.vis__compte{position:absolute;top:24px;left:24px;font:400 13px/1 var(--sans);letter-spacing:.14em}
.vis__close{position:absolute;top:10px;right:12px;width:48px;height:48px;padding:0;border:0;background:none;color:var(--creme);font-size:2.2rem;line-height:1;cursor:pointer}
.vis__prev,.vis__next{position:absolute;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;padding:0;border:1px solid var(--filet-c);background:rgba(30,26,23,.4);color:var(--creme);cursor:pointer}
.vis__prev{left:14px}
.vis__next{right:14px}
.vis__prev svg,.vis__next svg{width:22px;height:11px}
.vis__bande{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 18px;justify-content:safe center}
.vis__bande button{flex:none;width:72px;height:48px;padding:0;border:1px solid transparent;background:none;opacity:.5;cursor:pointer}
.vis__bande button[aria-pressed="true"]{opacity:1;border-color:var(--bronze-c)}
.vis__bande img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.vis__fig{padding:60px 8px 8px}.vis__prev,.vis__next{top:auto;bottom:86px;margin:0}.vis__bande{justify-content:flex-start}}

/* ------------------------------------------------------- booking window -- */
/* 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(28,22,18,.66)}
.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(--ivoire);color:var(--fumee);box-shadow:0 30px 80px rgba(20,16,12,.4)}
.rsv__aside{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:38px 34px;background:var(--fumee);color:var(--creme-d)}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:40px 38px 30px}
.rsv__body > *{flex-shrink:0}
.rsv__close{position:absolute;top:8px;right:10px;z-index:3;width:46px;height:46px;padding:0;border:0;background:none;color:var(--fumee);font-size:2rem;line-height:1;cursor:pointer}
.rsv__aside .emb{width:58px;color:var(--bronze-c);--sw:2.1}
.rsv__h{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--creme)}
.rsv__intro{margin-top:12px;font-size:.95rem;line-height:1.6}
.rsv__photo{margin-top:auto;aspect-ratio:3/4;overflow:hidden;background:#3a332d;-webkit-mask:url(assets/motifs/arc-masque.svg) center/100% 100% no-repeat;mask:url(assets/motifs/arc-masque.svg) center/100% 100% no-repeat}
.rsv__photo img{width:100%;height:100%;object-fit:cover}
.rsv__steps{display:flex;gap:6px}
.rsv__steps i{flex:1;height:2px;background:rgba(247,241,232,.2);transition:background .3s}
.rsv__steps i.on{background:var(--bronze-c)}
.rsv__bloc+.rsv__bloc{margin-top:26px}
.rsv__lbl{margin-bottom:12px;font:500 .72rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.rsv__lbl b{font-weight:400;letter-spacing:.04em;text-transform:none;font-family:var(--display);font-style:italic}
.rsv__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.rsv__field{min-width:0}
.rsv__field label{display:block;margin-bottom:6px;font-size:.88rem;color:var(--gris)}
.rsv__field input[type="date"]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;min-height:48px;line-height:1.3;padding:0 14px;border:1px solid var(--filet);border-radius:0;background:#fff;color:var(--fumee);font:400 16px/1.3 var(--sans)}
.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:8px;min-height:1.4em;font:italic 400 .95rem/1.4 var(--display);color:var(--henne)}
.rsv__cpt{display:flex;align-items:center;justify-content:space-between;min-height:48px;border:1px solid var(--filet);background:#fff}
.rsv__cpt button,.rsv__qte button{width:46px;height:46px;padding:0;border:0;background:none;color:var(--henne);font-size:1.3rem;line-height:1;cursor:pointer}
.rsv__cpt button:disabled,.rsv__qte button:disabled{color:rgba(47,42,38,.25);cursor:default}
.rsv__cpt output,.rsv__qte output{min-width:2ch;text-align:center;font-weight:600}
.rsv__packs{border-top:1px solid var(--filet)}
.rsv__groupe{padding:14px 0 4px;font:italic 400 1rem/1.3 var(--display);color:var(--bronze-f)}
.rsv__room{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--filet)}
.rsv__pack{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;width:100%;padding:4px 0;border:0;background:none;color:var(--fumee);text-align:left;cursor:pointer}
.rsv__pack img{width:64px;height:48px;object-fit:cover}
.rsv__pack--libre{grid-template-columns:64px minmax(0,1fr)}
.rsv__vide{display:grid;place-items:center;width:64px;height:48px;border:1px dashed rgba(47,42,38,.25);color:var(--bronze)}
.rsv__vide .emb{width:38px;color:var(--bronze);--sw:2.8}
.rsv__pack-n{display:block;font:400 1.05rem/1.25 var(--display)}
.rsv__pack-n small{display:block;margin-top:3px;font:300 .84rem/1.4 var(--sans);color:var(--gris)}
.rsv__pack-n .rsv__pack-prix{color:var(--fumee);font-weight:500}
.rsv__pack[aria-pressed="true"] .rsv__pack-n{color:var(--henne)}
.rsv__qte{display:flex;align-items:center;border:1px solid var(--filet);background:#fff}
.rsv__check{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--filet);background:#fff;color:transparent}
.rsv__pack[aria-pressed="true"]+.rsv__check,.rsv__room--libre.on .rsv__check{background:var(--henne);border-color:var(--henne);color:var(--creme)}
.rsv__check svg{width:14px;height:14px}
.rsv__compte{margin-top:8px;min-height:1.4em;font:italic 400 .95rem/1.4 var(--display);color:var(--henne)}
.rsv__opt{display:flex;align-items:flex-start;gap:12px;margin-top:12px;cursor:pointer;font-size:.95rem;line-height:1.4}
.rsv__opt input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--henne)}
.rsv__opt small{display:block;font-size:.84rem;color:var(--gris)}
.rsv__msg{display:block;width:100%;min-height:84px;padding:12px 14px;border:1px solid var(--filet);border-radius:0;background:#fff;color:var(--fumee);font:400 16px/1.5 var(--sans);resize:vertical}
.rsv__recap{margin-top:24px;padding:16px 18px;background:var(--sable);font-size:.95rem;line-height:1.5}
.rsv__recap p+p{margin-top:4px}
.rsv__estim{font-weight:500}
.rsv__hint{margin-top:14px;min-height:1.4em;font-size:.9rem;font-style:italic;color:var(--gris)}
.rsv__lbl--envoi{margin-top:20px}
.rsv__actions{display:flex;flex-wrap:wrap;gap:10px}
.rsv__actions .btn{flex:1 1 200px;min-width:0}
.rsv__note{margin-top:18px;font-size:.84rem;line-height:1.55;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{flex-direction:row;align-items:center;gap:14px;padding:16px 64px 16px 22px;overflow:visible}
  .rsv__aside .emb{width:44px;flex:none}
  .rsv__intro,.rsv__photo{display:none}
  .rsv__steps{display:none}
  .rsv__h{font-size:1.5rem}
  .rsv__close{color:var(--creme);top:7px}
  .rsv__body{padding:26px 22px 26px}
}
@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__grid{gap:10px}
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}