/* Riad Lalla Zineb. Kit: Or Marocain #D4A017, Ocre #A36A1E, Brun Terre #6B3F1E, Sable #EADBC8, Ivoire #F8F5EE.
   Cinzel (titres, nav, prix), Allura (script), Raleway in place of Montserrat (Jad: Montserrat off by default),
   Playfair Display italic for the guests' words. Square corners: the zellige of the logo has none. */
@font-face{font-family:"Cinzel";src:url(assets/fonts/cinzel.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Allura";src:url(assets/fonts/allura.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Raleway";src:url(assets/fonts/raleway.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-italique.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --or:#D4A017; --ocre:#A36A1E; --brun:#6B3F1E; --sable:#EADBC8; --ivoire:#F8F5EE;
  --nuit:#4A2B14;            /* Brun Terre deepened: the darkest band */
  --encre:#3A2414;           /* Brun Terre deepened: running text */
  --gris:#7A5A3E;            /* warm grey for labels on light grounds (5.7:1 on ivoire) */
  --creme:#F2EADD;           /* Sable lightened: alternate sections */
  --ocre-f:#8A5A22;          /* the rosette's outline tone: small ocre numerals on light grounds (5.4:1 on ivoire) */
  --filet:rgba(107,63,30,.2); --filet-c:rgba(234,219,200,.24);
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --script:"Allura","Snell Roundhand",cursive;
  --sans:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mots:"Playfair Display",Georgia,serif;
  --doux:cubic-bezier(.2,.7,.2,1); --trace:cubic-bezier(.6,.1,.2,1);
  --g:clamp(20px,5vw,64px); --max:1240px; --nav:88px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--ivoire);color:var(--encre);font-family:var(--sans);font-weight:450;font-size:1.0625rem;line-height:1.75;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--brun);margin:0;letter-spacing:.03em;line-height:1.15}
.exp{font-family:var(--sans);font-weight:500;font-size:.48em;letter-spacing:0;text-transform:none;vertical-align:.95em;margin-left:.06em}
.arobase{font-family:var(--sans);font-weight:300;letter-spacing:0;margin-right:.04em}
h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
h3{font-size:1.3rem;letter-spacing:.04em}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:12px;top:-60px;z-index:300;background:var(--brun);color:var(--ivoire);padding:10px 16px;text-decoration:none}
.saut:focus{top:12px}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.enveloppe{width:min(var(--max),100% - 2*var(--g));margin-inline:auto}
.section{padding-block:clamp(84px,10vw,148px)}
.section--creme{background:var(--creme)}
.section--sable{background:var(--sable)}
.section--brun{background:var(--brun);color:var(--sable)}
.section--nuit{background:var(--nuit);color:var(--sable)}
.section--brun h2,.section--nuit h2,.section--brun h3,.section--nuit h3{color:var(--ivoire)}

/* -------- titles: the rosette, the script line, the title, a real gap before the text -------- */
.tete{margin-bottom:clamp(30px,3.6vw,48px)}
.tete--centre{text-align:center}
.tete--centre .motif-mini{margin-inline:auto}
.surtitre{display:block;font-family:var(--script);font-size:clamp(1.75rem,2.5vw,2.25rem);line-height:1;color:var(--ocre);margin:14px 0 10px;font-weight:400}
.section--brun .surtitre,.section--nuit .surtitre,.bandeau .surtitre,.hero .surtitre{color:var(--or)}
.tete p{margin-top:22px;max-width:56ch}
.tete--centre p{margin-inline:auto}
.etiquette{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gris)}
.section--brun .etiquette,.section--nuit .etiquette{color:var(--sable)}

/* the kit's symbol, laid tile by tile */
.rosace .h{fill:none;stroke:var(--sable);stroke-width:5;stroke-linejoin:miter}
.rosace .f polygon{fill:var(--ocre);stroke:#8A5A22;stroke-width:15;stroke-linejoin:round}
.rosace .s polygon{fill:var(--ivoire);stroke:var(--ivoire);stroke-width:8;stroke-linejoin:round}
.rosace .c{fill:var(--brun)}
.rosace .k{fill:var(--or);opacity:.7}
.rosace .o{fill:var(--or)}
.rosace .b{fill:var(--brun)}
.rosace .p,.rosace .k{transform-box:fill-box;transform-origin:50% 50%}
.motif-mini{display:block;width:58px;height:auto;overflow:visible}
.motif-mini .f polygon{stroke-width:12}
.motif-mini .s polygon{stroke-width:7}
.section--brun .motif-mini .s polygon,.section--nuit .motif-mini .s polygon{fill:var(--brun);stroke:var(--brun)}
.section--nuit .motif-mini .s polygon{fill:var(--nuit);stroke:var(--nuit)}
/* laying the tiles: transform only, the drawing is complete without JS */
.js .pose .p,.js .pose .k{transform:scale(.15) rotate(-24deg)}
.js .pose.vu .p,.js .pose.vu .k{transform:none;transition:transform .7s var(--doux);transition-delay:calc(.12s + var(--i,0) * .085s)}
.js .pose.vu .k{transition-delay:calc(.5s + var(--i,0) * .07s)}

/* -------------------------------------------------------------------------------- buttons -- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 28px;border:1px solid var(--brun);
  background:var(--brun);color:var(--ivoire);font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.bouton:hover{background:var(--ocre);border-color:var(--ocre)}
.bouton--clair{background:transparent;color:var(--ivoire);border-color:rgba(248,245,238,.7)}
.bouton--clair:hover{background:var(--ivoire);color:var(--brun);border-color:var(--ivoire)}
.bouton--ivoire{background:var(--ivoire);color:var(--brun);border-color:var(--ivoire)}
.bouton--ivoire:hover{background:var(--or);border-color:var(--or);color:var(--nuit)}
.bouton--trait{background:transparent;color:var(--brun)}
.bouton--trait:hover{background:var(--brun);color:var(--ivoire)}
.bouton svg{width:18px;height:18px;flex:none}
.lien{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  color:var(--brun);padding-bottom:6px;border-bottom:1px solid var(--filet);transition:border-color .3s}
.lien::after{content:"";width:22px;height:9px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20.5 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20.5 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s var(--doux)}
.lien:hover{border-color:var(--ocre)}
.lien:hover::after{transform:translateX(5px)}
.section--brun .lien,.section--nuit .lien{color:var(--ivoire);border-color:var(--filet-c)}

/* ------------------------------------------------------------------------------------ nav -- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);transition:background .4s,height .4s,border-color .4s;border-bottom:1px solid transparent}
.nav::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(30,16,6,.5),rgba(30,16,6,0));pointer-events:none;transition:opacity .4s}
.nav.est-solide{background:var(--ivoire);height:74px;border-color:var(--filet)}
.nav.est-solide::before,.nav.menu-open::before{opacity:0}
.nav__in{position:relative;height:100%;width:min(1360px,100% - 2*var(--g));margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivoire);justify-self:start;position:relative;z-index:2}
.logo svg{width:52px;height:auto;flex:none;transition:width .4s}
.logo__nom{display:flex;flex-direction:column;line-height:1.1}
.logo__nom b{font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.15em;white-space:nowrap}
.logo__nom small{font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;margin-top:5px;opacity:.88}
.nav.est-solide .logo{color:var(--brun)}
.nav.est-solide .logo svg{width:44px}
.nav .rosace .s polygon{fill:rgba(248,245,238,.94);stroke:rgba(248,245,238,.94)}
.nav__links{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--display);font-size:.84rem;letter-spacing:.14em;text-decoration:none;color:var(--ivoire);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 .45s var(--doux)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav.est-solide .nav__links a{color:var(--brun)}
.nav__droite{justify-self:end;display:flex;align-items:center;gap:22px;position:relative;z-index:2}
.nav__langue{font-weight:600;font-size:.72rem;letter-spacing:.22em;text-decoration:none;color:var(--ivoire)}
.nav.est-solide .nav__langue{color:var(--brun)}
.nav__cta{min-height:44px;padding:0 22px;background:transparent;border-color:rgba(248,245,238,.75)}
.nav.est-solide .nav__cta{background:var(--brun);border-color:var(--brun);color:var(--ivoire)}
.nav.est-solide .nav__cta:hover{background:var(--ocre);border-color:var(--ocre)}
.nav__burger{display:none;width:46px;height:46px;border:0;background:transparent;position:relative;padding:0}
.nav__burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ivoire);transition:transform .35s var(--doux),top .35s,background .3s}
.nav__burger span:nth-child(1){top:18px}.nav__burger span:nth-child(2){top:27px}
.nav.est-solide .nav__burger span,.nav.menu-open .nav__burger span{background:var(--brun)}
.nav.menu-open .nav__burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav.menu-open .nav__burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
.nav__menu-cta{display:none}
.nav.menu-open .logo{color:var(--brun)}
.nav.menu-open .nav__langue{color:var(--brun)}
@media (max-width:1020px){
  .nav__in{grid-template-columns:1fr auto}
  .nav__burger{display:block}
  .nav__droite .nav__cta{display:none}
  .nav__links{position:fixed;inset:0;justify-self:stretch;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:var(--ivoire);
    transform:translateY(-100%);visibility:hidden;transition:transform .36s var(--doux),visibility 0s linear .36s;z-index:1}
  .nav__links.nav-open{transform:none;visibility:visible;transition:transform .36s var(--doux)}
  .nav .nav__links a,.nav.est-solide .nav__links a{color:var(--brun);font-size:1.25rem;padding:10px 0}
  .nav__menu-cta{display:block;margin-top:22px}
  .nav__menu-cta .bouton{color:var(--ivoire)}
}
@media (max-width:560px){
  :root{--nav:76px}
  .logo svg{width:42px}
  .logo__nom b{font-size:.86rem;letter-spacing:.12em}
  .logo__nom small{font-size:.5rem}
  .nav__droite{gap:8px}
}

/* ----------------------------------------------------------------------------------- hero -- */
.hero{position:relative;min-height:640px;height:100vh;height:100svh;overflow:hidden;background:var(--nuit);color:var(--ivoire);isolation:isolate}
.hero__diapo{position:absolute;inset:0;margin:0;transition:opacity 1.8s ease;z-index:0}
.hero__diapo:not(.est-active){opacity:0}
.hero__diapo img{width:100%;height:100%;object-fit:cover}
.hero__diapo.est-active img{animation:pose 9s var(--doux) both}
@keyframes pose{from{transform:scale(1.03)}to{transform:none}}
.hero__voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 46%,rgba(36,20,8,.5),rgba(36,20,8,0) 72%),linear-gradient(rgba(36,20,8,0) 58%,rgba(36,20,8,.55))}
@media (max-width:700px){.hero__voile{background:radial-gradient(100% 42% at 50% 44%,rgba(36,20,8,.6),rgba(36,20,8,0) 80%),linear-gradient(rgba(36,20,8,.34),rgba(36,20,8,.22) 50%,rgba(36,20,8,.62))}}
.hero__centre{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav) + 10px) var(--g) 150px}
.hero__rosace{width:clamp(110px,11vw,150px);height:auto;margin-bottom:22px;filter:drop-shadow(0 2px 10px rgba(30,16,6,.35))}
.hero h1{color:var(--ivoire);font-size:clamp(2.5rem,5.4vw,5rem);letter-spacing:.07em;line-height:1.05;text-shadow:0 2px 24px rgba(30,16,6,.35)}
.hero .surtitre{font-size:clamp(2rem,3.2vw,2.9rem);margin:8px 0 0;color:#F0D27A}
.hero__filet{display:block;width:120px;height:1px;background:var(--or);margin:22px auto 20px;transform-origin:center}
.hero__phrase{max-width:34ch;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.6;margin:0 0 30px;text-shadow:0 1px 14px rgba(30,16,6,.5)}
.js .hero .monte{transform:translateY(18px);animation:monte 1s var(--doux) forwards}
.js .hero .monte--2{animation-delay:.14s}.js .hero .monte--3{animation-delay:.28s}.js .hero .monte--4{animation-delay:.42s}
@keyframes monte{to{transform:none}}
.js .hero__filet{transform:scaleX(0);animation:filet 1.4s var(--trace) .5s forwards}
@keyframes filet{to{transform:scaleX(1)}}
.hero__pastille{position:absolute;z-index:3;right:var(--g);bottom:150px;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 16px;
  background:rgba(36,20,8,.42);border:1px solid rgba(248,245,238,.22);font-weight:600;font-size:.72rem;letter-spacing:.2em}
.hero__pastille button{width:34px;height:34px;border:0;background:transparent;display:grid;place-items:center;color:var(--ivoire)}
.hero__pastille svg{width:15px;height:15px}
.hero__compte{margin-right:6px;font-variant-numeric:tabular-nums}

/* the date bar, docked in the first screen */
.barre{position:absolute;z-index:3;left:50%;bottom:34px;transform:translateX(-50%);width:min(1080px,100% - 2*var(--g));display:grid;
  grid-template-columns:1fr 1fr 1fr auto;background:var(--ivoire);color:var(--encre);border:1px solid rgba(248,245,238,.4)}
.barre label{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:14px 22px;border-right:1px solid var(--filet);min-width:0}
.barre label span{font-weight:600;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.barre input,.barre select{font:inherit;font-family:var(--display);font-size:1.02rem;color:var(--brun);border:0;background:transparent;padding:4px 0;min-height:36px;
  -webkit-appearance:none;appearance:none;width:100%;min-width:0}
.barre select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B3F1E' stroke-width='1.4'/%3E%3C/svg%3E") right center/12px no-repeat;padding-right:20px}
.barre input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.barre .bouton{min-height:100%;padding:0 34px}
@media (max-width:760px){
  .hero{min-height:600px}
  .hero__centre{justify-content:flex-start;padding-top:calc(var(--nav) + 6vh);padding-bottom:200px}
  .hero__rosace{width:96px;margin-bottom:16px}
  .hero__phrase{margin-bottom:22px}
  .hero__pastille{bottom:auto;top:calc(var(--nav) + 4px);right:12px;padding-left:12px}
  .barre{grid-template-columns:1fr 1fr;bottom:14px;width:calc(100% - 28px)}
  .barre label{padding:10px 14px}
  .barre label:nth-child(2){border-right:0}
  .barre label:nth-child(1),.barre label:nth-child(2){border-bottom:1px solid var(--filet)}
  .barre .bouton{min-height:54px;padding:0 16px}
}
@media (max-height:700px) and (max-width:760px){
  .hero__centre{padding-top:calc(var(--nav) + 2vh)}
  .hero__rosace{width:76px;margin-bottom:10px}
  .hero .surtitre{font-size:1.8rem}
  .hero__filet{margin:14px auto 12px}
  .hero__phrase{font-size:.98rem;margin-bottom:16px}
}

/* ----------------------------------------------------------------------------- facts band -- */
.faits{background:var(--ivoire);border-bottom:1px solid var(--filet)}
.faits ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.faits li{display:flex;align-items:center;gap:16px;padding:26px 24px;border-right:1px solid var(--filet)}
.faits li:last-child{border-right:0}
.faits svg{width:26px;height:26px;flex:none;stroke:var(--ocre);fill:none;stroke-width:1.2}
.faits b{display:block;font-family:var(--display);font-weight:400;font-size:1.02rem;color:var(--brun);letter-spacing:.03em;line-height:1.3}
.faits a{text-decoration:none}
@media (max-width:900px){.faits ul{grid-template-columns:1fr 1fr}.faits li:nth-child(2){border-right:0}.faits li:nth-child(-n+2){border-bottom:1px solid var(--filet)}}
@media (max-width:480px){.faits li{flex-direction:column;align-items:flex-start;padding:20px 16px;gap:10px}.faits .etiquette{letter-spacing:.18em}.faits b{font-size:.95rem}}

/* ------------------------------------------------------------------ photo cut in the arch -- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.duo--inverse .duo__media{order:2}
.arche{position:relative;width:min(100%,470px);margin-inline:auto}
.arche__cadre{position:relative;aspect-ratio:4/5;overflow:hidden;-webkit-mask:url(assets/arc.svg) center/100% 100% no-repeat;mask:url(assets/arc.svg) center/100% 100% no-repeat}
.arche__cadre img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--doux)}
.arche__fil{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none}
.arche__fil path{fill:none;stroke:var(--or);stroke-width:1;vector-effect:non-scaling-stroke}
.js .trace path,.js .trace line,.js .trace polygon,.js .trace circle{stroke-dasharray:var(--l,1600);stroke-dashoffset:var(--l,1600)}
.js .trace.vu path,.js .trace.vu line,.js .trace.vu polygon,.js .trace.vu circle{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--trace)}
.incrust{position:absolute;right:-12%;bottom:-8%;width:46%;border:9px solid var(--ivoire);background:var(--ivoire);overflow:hidden;margin:0}
.section--creme .incrust{border-color:var(--creme)}
.incrust img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--doux)}
@media (hover:hover){.arche:hover .arche__cadre img,.incrust:hover img{transform:scale(1.05)}}
.citation-courte{margin:30px 0 34px;padding-left:22px;border-left:1px solid var(--or);font-family:var(--mots);font-style:italic;font-size:1.22rem;line-height:1.5;color:var(--brun)}
.citation-courte cite{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo--inverse .duo__media{order:0}
  .arche{width:min(78%,400px);margin-bottom:40px}
}

/* -------------------------------------------------------------------- the rooms showcase -- */
.vitrine{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,6vw,90px);align-items:stretch}
.vitrine__photos{position:sticky;top:112px;align-self:start;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--brun)}
.vitrine__photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease,transform 1.2s var(--doux)}
.vitrine__photos img:not(.est-active){opacity:0}
.vitrine__photos figcaption{position:absolute;left:0;bottom:0;padding:14px 20px;background:var(--ivoire);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
@media (hover:hover){.vitrine__photos:hover img.est-active{transform:scale(1.04)}}
.vitrine__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.vitrine__ligne{border-bottom:1px solid var(--filet)}
.vitrine__ligne{border-left:2px solid transparent;transition:border-color .4s,background .4s}
.vitrine__ligne:has(> [aria-pressed="true"]){border-left-color:var(--ocre);background:rgba(248,245,238,.5)}
.vitrine__choix{display:grid;grid-template-columns:36px 1fr;gap:6px 22px;align-items:baseline;width:100%;padding:26px 18px 18px 18px;border:0;
  background:transparent;text-align:left}
.vitrine__no{font-family:var(--display);color:var(--brun);font-size:.9rem;letter-spacing:.1em}
.vitrine__nom{font-family:var(--display);font-size:1.38rem;color:var(--brun);letter-spacing:.04em;line-height:1.2}
.vitrine__prix{grid-column:2;grid-row:3;margin-top:8px;word-spacing:.14em;font-family:var(--display);color:var(--brun);font-size:1.05rem;white-space:nowrap}
.vitrine__prix small{display:inline;margin-left:12px;font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.vitrine__fait{grid-column:2;font-size:.95rem;color:var(--gris)}
.vitrine__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:0 0 26px 76px}
.vitrine__actions .lien{min-height:32px;font-size:.7rem;letter-spacing:.2em;font-family:var(--sans);line-height:1.2;background:none;border-width:0 0 1px;border-style:solid;padding:6px 0;cursor:pointer}
.lien--nu{border-bottom-color:transparent}
.vitrine__note{margin-top:28px;font-size:.92rem;color:var(--gris);max-width:52ch}
.equip{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.equip li{display:flex;gap:12px;align-items:center;font-size:.95rem}
.equip svg{width:22px;height:22px;flex:none;stroke:var(--ocre);fill:none;stroke-width:1.2}
@media (max-width:900px){
  .vitrine{grid-template-columns:1fr}
  .vitrine__photos{position:relative;top:auto}
  .vitrine__actions{padding-left:76px}
}
@media (max-width:480px){.vitrine__choix{grid-template-columns:28px 1fr;gap:6px 14px;padding-left:12px}.vitrine__actions{padding-left:54px}.vitrine__prix small{display:block;margin:4px 0 0}.equip{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- the moment: verrière -- */
.moment{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,110px);align-items:center}
.moment__texte p{color:var(--sable)}
.verriere{display:block;width:clamp(170px,19vw,240px);height:auto;margin:0 0 36px;overflow:visible}
.verriere *{fill:none;stroke:var(--or);vector-effect:non-scaling-stroke}
.verriere .v1{stroke-width:1.2}.verriere .v2{stroke-width:1}.verriere .v3{stroke-width:1;stroke:#F0D27A}.verriere .v4{stroke-width:1;opacity:.7}
.moment__photos{position:relative;margin:0 0 60px}
.moment__grande{overflow:hidden;aspect-ratio:4/5;width:78%}
.moment__grande img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.moment__petite{position:absolute;right:0;bottom:-60px;width:42%;margin:0;border:9px solid var(--brun);background:var(--brun);overflow:hidden}
.moment__petite img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--doux)}
.moment__petite figcaption{padding:12px 4px 2px;font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sable)}
@media (hover:hover){.moment__grande:hover img,.moment__petite:hover img{transform:scale(1.05)}}
.dejeuner{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;gap:10px}
.dejeuner li{padding:7px 14px;border:1px solid var(--filet-c);font-size:.88rem;color:var(--ivoire)}
.moment .citation-courte{color:var(--ivoire);border-color:var(--or)}
.moment .citation-courte cite{color:var(--sable)}
@media (max-width:900px){.moment{grid-template-columns:1fr}.moment__photos{margin-top:10px}}

/* --------------------------------------------------------------------------------- reviews -- */
.avis{text-align:center}
.avis__guillemet{display:block;width:44px;height:auto;margin:0 auto 26px;fill:var(--or)}
.avis__fil{position:relative;max-width:900px;margin:0 auto;min-height:220px;display:grid}
.avis__fil blockquote{grid-area:1/1;margin:0;transition:opacity .9s ease,transform .9s var(--doux)}
.js .avis__fil blockquote:not(.est-active){opacity:0;transform:translateY(12px);pointer-events:none}
.avis__fil p{font-family:var(--mots);font-style:italic;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.45;color:var(--ivoire);margin:0 0 22px}
.avis__fil cite{font-style:normal;font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sable)}
.avis__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px}
.avis__nav button.fleche{width:46px;height:46px;border:1px solid var(--filet-c);background:transparent;display:grid;place-items:center;color:var(--ivoire);transition:background .3s}
.avis__nav button.fleche:hover{background:rgba(248,245,238,.08)}
.avis__nav svg{width:16px;height:16px}
.avis__points{display:flex;gap:4px}
.avis__points button{width:26px;height:26px;border:0;background:transparent;display:grid;place-items:center;padding:0}
.avis__points button::before{content:"";width:6px;height:6px;border:1px solid var(--sable);transform:rotate(45deg);transition:background .3s}
.avis__points button[aria-current="true"]::before{background:var(--or);border-color:var(--or)}
.no-js .avis__nav{display:none}

/* ------------------------------------------------------------------------------- instagram -- */
.insta__tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.insta__grille{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.insta__grille a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.insta__grille img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--doux)}
.insta__grille a::after{content:"";position:absolute;right:10px;top:10px;width:18px;height:18px;background:var(--ivoire);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='.9' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='.9' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.insta__grille a:hover img{transform:scale(1.05)}}
@media (max-width:900px){.insta__grille{grid-template-columns:repeat(3,1fr)}}

/* -------------------------------------------------- direct booking perks, in the patio arch -- */
.avantages{position:relative;overflow:hidden;background:var(--brun);color:var(--sable);text-align:center;padding-block:clamp(96px,11vw,150px)}
.avantages__arc{position:absolute;left:50%;top:clamp(40px,5vw,64px);bottom:-2px;transform:translateX(-50%);width:min(900px,100% - 2*var(--g));pointer-events:none}
.avantages__arc svg{width:100%;height:100%;overflow:visible}
.avantages__arc path{fill:none;stroke:var(--or);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.85}
.avantages__in{position:relative;width:min(780px,100% - 2*var(--g) - 40px);margin:0 auto;padding-top:clamp(60px,8vw,110px)}
.avantages h2{color:var(--ivoire)}
.avantages .motif-mini .s polygon{fill:var(--brun);stroke:var(--brun)}
.avantages .tete p{color:var(--sable)}
.paliers{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet-c);border-bottom:1px solid var(--filet-c)}
.paliers li{padding:26px 16px;border-right:1px solid var(--filet-c);text-align:center}
.paliers li:last-child{border-right:0}
.paliers b{display:block;font-family:var(--display);font-weight:400;color:var(--or);font-size:1.05rem;letter-spacing:.08em;margin-bottom:8px}
.paliers span{font-size:.92rem;line-height:1.5;color:var(--ivoire)}
.avantages__cond{font-size:.86rem;color:var(--sable);margin:0 auto 36px;max-width:52ch}
.avantages__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
@media (max-width:760px){
  .paliers{grid-template-columns:1fr 1fr}
  .paliers li:nth-child(2){border-right:0}
  .paliers li:nth-child(-n+2){border-bottom:1px solid var(--filet-c)}
  .avantages__in{width:calc(100% - 2*var(--g) - 24px)}
}

/* ---------------------------------------------------------------------------------- footer -- */
.pied{background:var(--creme);color:var(--encre);padding:clamp(70px,8vw,110px) 0 28px;border-top:1px solid var(--filet)}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.pied__logo{display:block;width:230px;max-width:100%;height:auto;margin-bottom:22px}
.pied__marque p{max-width:34ch;color:var(--gris);font-size:.96rem}
.pied h3{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gris);margin-bottom:18px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied a{text-decoration:none}
.pied ul a:hover{color:var(--ocre)}
.pied address{font-style:normal}
.pied__bas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--filet);font-size:.8rem;color:var(--gris)}
.pied__credit a{text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;text-decoration:none;font-weight:600}
.haut-de-page{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brun)}
.haut-de-page svg{width:14px;height:14px}
@media (max-width:900px){.pied__haut{grid-template-columns:1fr 1fr}.pied__marque{grid-column:1/-1}}
@media (max-width:480px){.pied__haut{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------- page banners -- */
.bandeau{position:relative;min-height:62vh;min-height:62svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--nuit);color:var(--ivoire);isolation:isolate}
.bandeau picture,.bandeau>img{position:absolute;inset:0;z-index:-2}
.bandeau img{width:100%;height:100%;object-fit:cover;animation:pose 16s var(--doux) both}
.bandeau::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(36,20,8,.66),rgba(36,20,8,.18) 62%,rgba(36,20,8,0)),linear-gradient(rgba(36,20,8,0) 50%,rgba(36,20,8,.42))}
.bandeau__in{padding-block:calc(var(--nav) + 40px) clamp(48px,6vw,80px)}
.bandeau h1{color:var(--ivoire);font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:.06em}
.bandeau .surtitre{margin:6px 0 0;font-size:clamp(1.9rem,2.8vw,2.6rem);color:#F0D27A}
.bandeau p{max-width:46ch;margin:18px 0 0;font-size:1.08rem;text-shadow:0 1px 12px rgba(30,16,6,.5)}
.bandeau .motif-mini{width:64px;margin-bottom:16px}
.bandeau .rosace .s polygon{fill:rgba(248,245,238,.94);stroke:rgba(248,245,238,.94)}
.js .bandeau .monte{transform:translateY(18px);animation:monte 1s var(--doux) forwards}
.js .bandeau .monte--2{animation-delay:.12s}.js .bandeau .monte--3{animation-delay:.24s}

/* ----------------------------------------------------------------------------------- rooms -- */
.onglets{position:sticky;top:73px;z-index:40;background:var(--ivoire);border-bottom:1px solid var(--filet)}
.onglets ol{list-style:none;margin:0 auto;padding:0;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;border-bottom:2px solid transparent;
  font-family:var(--display);font-size:.9rem;letter-spacing:.08em;color:var(--gris);transition:color .3s,border-color .3s}
.onglets a span{font-size:.78rem;color:var(--ocre-f)}
.onglets a[aria-current="true"]{color:var(--brun);border-bottom-color:var(--ocre)}
.chambre{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,6vw,90px);align-items:start;padding-block:clamp(72px,9vw,120px);border-bottom:1px solid var(--filet)}
.chambre:nth-of-type(even) .chambre__media{order:2}
.chambre__grande{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.chambre__grande img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
@media (hover:hover){.chambre__grande:hover img{transform:scale(1.04)}}
.voir-photos{position:absolute;left:16px;bottom:16px;display:inline-flex;gap:10px;align-items:center;min-height:42px;padding:0 16px;border:0;background:var(--ivoire);
  font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brun)}
.voir-photos svg{width:16px;height:16px}
.vignettes{display:flex;gap:10px;margin-top:10px}
.vignettes button{width:84px;height:84px;padding:0;border:1px solid transparent;background:none;overflow:hidden}
.vignettes button[aria-pressed="true"]{border-color:var(--ocre)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.chambre__no{font-family:var(--display);color:var(--ocre-f);letter-spacing:.12em}
.chambre h2{margin:8px 0 6px}
.chambre__faits{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chambre__faits div{padding:16px 12px 14px 0}
.chambre__faits dt{font-weight:600;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.chambre__faits dd{margin:4px 0 0;font-family:var(--display);color:var(--brun);font-size:1.05rem}
.tableau{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.96rem}
.tableau th{text-align:left;font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);padding:12px 18px 12px 0;width:38%;vertical-align:top}
.tableau td{padding:12px 0}
.tableau tr{border-bottom:1px solid var(--filet)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 28px}
.tags li{padding:6px 12px;border:1px solid var(--filet);font-size:.84rem;color:var(--gris)}
.prix-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--filet);margin-bottom:24px}
.prix-ligne b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--brun)}
.prix-ligne small{font-size:.86rem;color:var(--gris)}
.chaque{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.chaque li{counter-increment:n;display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--filet)}
.chaque li::before{content:counter(n,decimal-leading-zero);font-family:var(--display);color:var(--ocre-f);font-size:.9rem;min-width:24px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.trio figure{margin:0}
.trio .cadre{overflow:hidden;aspect-ratio:4/5;background:var(--sable)}
.trio img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--doux)}
@media (hover:hover){.trio .cadre:hover img{transform:scale(1.05)}}
.trio figcaption{margin-top:12px;font-size:.88rem;color:var(--gris)}
@media (max-width:900px){
  .chambre{grid-template-columns:1fr}
  .chambre:nth-of-type(even) .chambre__media{order:0}
  .chambre__faits{grid-template-columns:1fr 1fr}
  .chaque{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr}
  .onglets{top:75px}
}
@media (max-width:560px){.onglets{top:63px}.vignettes button{width:64px;height:64px}}

/* ------------------------------------------------------------------------------ the house -- */
.chiffres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chiffres li{padding:34px 20px;border-right:1px solid var(--filet);text-align:center}
.chiffres li:last-child{border-right:0}
.chiffres b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--brun);line-height:1.1;margin-bottom:8px}
.chiffres span{font-size:.92rem;color:var(--gris)}
.chiffres__ligne{text-align:center;margin:26px auto 0;max-width:60ch;color:var(--gris)}
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:12px}
.mosaique figure{margin:0;overflow:hidden;background:var(--sable)}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--doux)}
@media (hover:hover){.mosaique figure:hover img{transform:scale(1.05)}}
.mosaique .h2{grid-row:span 2}.mosaique .l2{grid-column:span 2}
.organise{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;list-style:none;margin:0;padding:0}
.organise li{padding:26px 0;border-top:1px solid var(--filet-c)}
.organise h3{font-size:1.08rem;margin-bottom:8px}
.organise p{margin:0;font-size:.96rem;color:var(--sable)}
.autour{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.autour li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--filet)}
.autour b{font-family:var(--display);font-weight:400;color:var(--brun);white-space:nowrap}
.savoir{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin:0}
.savoir div{padding:18px 0;border-bottom:1px solid var(--filet)}
.savoir dt{font-family:var(--display);color:var(--brun);font-size:1.02rem;margin-bottom:4px}
.savoir dd{margin:0;color:var(--encre);font-size:.98rem}
@media (max-width:900px){
  .chiffres{grid-template-columns:1fr 1fr}.chiffres li:nth-child(2){border-right:0}.chiffres li:nth-child(-n+2){border-bottom:1px solid var(--filet)}
  .mosaique{grid-template-columns:1fr 1fr}
  .organise{grid-template-columns:1fr}
  .savoir{grid-template-columns:1fr}
}
.cv{content-visibility:auto;contain-intrinsic-size:auto 1400px}
.tout .cv,.cv-off .cv{content-visibility:visible}

/* --------------------------------------------------------------------------------- gallery -- */
.chapitres{position:sticky;top:73px;z-index:40;background:var(--ivoire);border-bottom:1px solid var(--filet)}
.chapitre{padding-block:clamp(64px,8vw,104px) 0}
.chapitre .tete{display:flex;align-items:baseline;gap:20px}
.chapitre .tete span{font-family:var(--display);color:var(--ocre-f)}
.galerie{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,13vw,190px);gap:12px}
.galerie figure{margin:0;display:flex;flex-direction:column}
.galerie button{flex:1;min-height:0;width:100%;padding:0;border:0;overflow:hidden;background:var(--sable)}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--doux)}
@media (hover:hover){.galerie button:hover img{transform:scale(1.05)}}
.galerie figcaption{display:flex;gap:10px;padding-top:9px;font-size:.84rem;color:var(--gris);line-height:1.35}
.galerie figcaption b{font-family:var(--display);font-weight:400;color:var(--ocre-f);white-space:nowrap}
.g-p{grid-column:span 3;grid-row:span 3}.g-l{grid-column:span 6;grid-row:span 3}.g-c{grid-column:span 4;grid-row:span 3}
@media (max-width:900px){.galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,30vw,200px)}.g-p,.g-c{grid-column:span 1;grid-row:span 2}.g-l{grid-column:span 2;grid-row:span 2}}

/* --------------------------------------------------------------------------------- contact -- */
.coord{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px);align-items:start}
.coord dl{margin:0 0 30px}
.coord dl div{padding:16px 0;border-bottom:1px solid var(--filet)}
.coord dt{font-weight:600;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.coord dd{margin:0;font-family:var(--display);color:var(--brun);font-size:1.1rem}
.coord dd a{text-decoration:none}
.coord dd.brut{font-family:var(--sans);font-size:1.02rem;letter-spacing:.01em}
.coord dd a:hover{color:var(--ocre)}
.coord__actions{display:flex;flex-wrap:wrap;gap:12px}
.carte{position:relative;border:1px solid var(--filet);background:var(--sable)}
.carte iframe{display:block;width:100%;height:440px;border:0;filter:sepia(.18) saturate(.9)}
.trajet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,90px);align-items:center}
.trajet__plan{margin:0;background:var(--ivoire);border:1px solid var(--filet);padding:16px}
.trajet__plan svg{display:block;width:100%;height:auto}
.trajet__plan figcaption{padding:12px 4px 0;font-size:.84rem;color:var(--gris)}
.plan-rue{fill:var(--sable)}
.plan-bati{fill:var(--creme);stroke:var(--filet);stroke-width:1}
.plan-chemin{fill:none;stroke:var(--ocre);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.js .plan-chemin.a-tracer{stroke-dasharray:0 9999}
.js .plan-chemin.a-tracer.vu{animation:pas 3s var(--trace) .3s forwards}
@keyframes pas{to{stroke-dasharray:2 9}}
.plan-texte{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;fill:var(--brun);text-transform:uppercase}
.plan-texte--g{font-family:var(--display);font-weight:400;letter-spacing:.06em;font-size:15px;text-transform:none}
.plan-mesure{font-family:var(--display);font-size:16px;fill:var(--brun)}
.etapes{counter-reset:e;list-style:none;margin:0 0 30px;padding:0}
.etapes li{counter-increment:e;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--filet)}
.etapes li::before{content:counter(e,decimal-leading-zero);grid-row:span 2;font-family:var(--display);color:var(--ocre-f);font-size:1.1rem}
.etapes b{font-family:var(--display);font-weight:400;color:var(--brun);font-size:1.08rem}
.etapes span{color:var(--encre);font-size:.96rem}
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font-family:var(--display);font-size:1.1rem;color:var(--brun)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:1px solid var(--ocre);border-bottom:1px solid var(--ocre);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--doux)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{margin:0 0 22px;max-width:64ch}
@media (max-width:900px){.coord,.trajet{grid-template-columns:1fr}.carte iframe{height:340px}}

/* -------------------------------------------------------------------------- photo viewer -- */
.visio{position:fixed;inset:0;z-index:160;background:rgba(30,16,6,.96);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--sable)}
.visio[hidden]{display:none}
.visio__haut{display:flex;justify-content:space-between;align-items:center;padding:14px var(--g)}
.visio__compte{font-family:var(--display);letter-spacing:.1em}
.visio__scene{position:relative;display:grid;place-items:center;padding:0 72px;min-height:0}
.visio__scene img{max-width:100%;max-height:100%;object-fit:contain}
.visio button{width:48px;height:48px;border:1px solid rgba(234,219,200,.3);background:rgba(30,16,6,.4);color:var(--ivoire);display:grid;place-items:center}
.visio button svg{width:18px;height:18px}
.visio__prec,.visio__suiv{position:absolute;top:50%;transform:translateY(-50%)}
.visio__prec{left:14px}.visio__suiv{right:14px}
.visio__legende{padding:16px var(--g) 22px;text-align:center;font-size:.95rem}
@media (max-width:600px){.visio__scene{padding:0 8px}.visio__prec,.visio__suiv{top:auto;bottom:-62px;transform:none}.visio__legende{padding-bottom:76px}}

/* ------------------------------------------- phone booking bar + the desktop perk card -- */
.barre-mob{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;gap:14px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--ivoire);border-top:1px solid var(--filet);transform:translateY(110%);transition:transform .45s var(--doux)}
.barre-mob.vue{transform:none}
.barre-mob p{margin:0;flex:1;font-size:.84rem;line-height:1.35;color:var(--gris)}
.barre-mob p b{display:block;font-family:var(--display);font-weight:400;color:var(--brun);font-size:.98rem}
.barre-mob .bouton{min-height:46px;padding:0 18px;flex:none}
@media (max-width:767px){.barre-mob{display:flex}body.a-barre{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
.carte-avantage{position:fixed;right:24px;bottom:24px;z-index:95;width:330px;padding:24px 24px 22px;background:var(--ivoire);border:1px solid var(--filet);
  transform:translateX(calc(100% + 40px));transition:transform .7s var(--doux)}
.carte-avantage.vue{transform:none}
.carte-avantage .motif-mini{width:44px;margin-bottom:10px}
.carte-avantage h3{font-size:1.06rem;margin-bottom:8px}
.carte-avantage p{font-size:.92rem;margin-bottom:16px;color:var(--encre)}
.carte-avantage .fermer{position:absolute;right:8px;top:8px;width:38px;height:38px;border:0;background:none;display:grid;place-items:center;color:var(--gris)}
.carte-avantage .fermer svg{width:14px;height:14px}
@media (max-width:767px){.carte-avantage{display:none}}

/* --------------------------------------------------------- booking window (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(30,16,6,.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(--ivoire)}
.rsv__aside{min-height:0;overflow-y:auto;position:relative;background:var(--brun);color:var(--sable);display:flex;flex-direction:column;justify-content:flex-end}
.rsv__photo{position:absolute;inset:0;margin:0}
.rsv__photo img{width:100%;height:100%;object-fit:cover}
.rsv__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(36,20,8,.1),rgba(36,20,8,.82))}
.rsv__aside-texte{position:relative;padding:32px}
.rsv__aside-texte .motif-mini{width:52px;margin-bottom:14px}
.rsv__aside-texte .rosace .s polygon{fill:rgba(248,245,238,.94);stroke:rgba(248,245,238,.94)}
.rsv__aside-texte b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.08em;color:var(--ivoire)}
.rsv__aside-texte p{margin:8px 0 0;font-size:.92rem;line-height:1.55}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:34px 36px 30px}
.rsv__body > *{flex-shrink:0}
.rsv__titre{font-family:var(--script);font-size:2.4rem;color:var(--ocre);line-height:1;margin:0 0 4px}
.rsv__sous{font-size:.92rem;color:var(--gris);margin:0 0 22px}
.rsv__close{position:absolute;right:10px;top:10px;z-index:3;width:44px;height:44px;border:0;background:var(--ivoire);display:grid;place-items:center;color:var(--brun)}
.rsv__close svg{width:16px;height:16px}
.rsv__grille{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:22px}
.rsv__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rsv__field span{font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.rsv__field input[type="date"],.rsv__field select{-webkit-appearance:none;appearance:none;min-height:48px;line-height:1.3;padding:0 14px;background:var(--creme);border:1px solid var(--filet);
  font:inherit;font-size:16px;color:var(--brun);width:100%;min-width:0;border-radius:0}
.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__field select{background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B3F1E' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center/12px no-repeat;padding-right:34px}
.rsv__label{font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin:0 0 10px}
.rsv__packs{border-top:1px solid var(--filet);margin-bottom:8px}
.rsv__pack{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--filet)}
.rsv__pack img{width:64px;height:64px;object-fit:cover}
.rsv__pack b{display:block;font-family:var(--display);font-weight:400;color:var(--brun);font-size:1rem}
.rsv__pack small{display:block;color:var(--gris);font-size:.82rem;line-height:1.4}
.rsv__qte{display:flex;align-items:center;border:1px solid var(--filet)}
.rsv__qte button{width:38px;height:40px;border:0;background:transparent;font-size:1.1rem;color:var(--brun)}
.rsv__qte button:disabled{opacity:.3;cursor:default}
.rsv__qte output{min-width:26px;text-align:center;font-family:var(--display);color:var(--brun)}
.rsv__compte{font-size:.84rem;color:var(--gris);margin:4px 0 20px}
.rsv__paliers{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rsv__paliers li{position:relative;padding:12px 10px 10px;border:1px solid var(--filet);font-size:.78rem;line-height:1.35;color:var(--gris);transition:border-color .3s,background .3s,color .3s}
.rsv__paliers li b{display:block;font-family:var(--display);font-weight:400;color:var(--brun);font-size:.86rem;margin-bottom:4px}
.rsv__paliers li.est-acquis{border-color:var(--ocre);background:rgba(212,160,23,.1);color:var(--encre)}
.rsv__paliers li.est-acquis::after{content:"";position:absolute;right:8px;top:9px;width:10px;height:5px;border-left:1.5px solid var(--ocre);border-bottom:1.5px solid var(--ocre);transform:rotate(-45deg)}
.rsv__sejour{font-family:var(--mots);font-style:italic;color:var(--brun);font-size:1.02rem;margin:6px 0 20px;min-height:1.5em}
.rsv__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);margin-bottom:20px}
.rsv__total b{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--brun)}
.rsv__total small{font-size:.8rem;color:var(--gris)}
.rsv__envoi{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.rsv__envoi .bouton{flex:1 1 200px;min-width:0}
.rsv__envoi .bouton[aria-disabled="true"]{opacity:.45;pointer-events:none}
.rsv__hint{font-size:.84rem;color:var(--ocre-f);margin:0 0 8px;min-height:1.3em}
.rsv__note{font-size:.8rem;color:var(--gris);margin:6px 0 0}
@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{min-height:150px;max-height:32dvh}
}
@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__aside{min-height:0;max-height:none}
  .rsv__photo{display:none}
  .rsv__aside-texte{padding:16px 64px 14px 20px;display:flex;align-items:center;gap:14px}
  .rsv__aside-texte .motif-mini{width:40px;margin:0;flex:none}
  .rsv__aside-texte p{display:none}
  .rsv__aside-texte b{font-size:1rem}
  .rsv__packs{max-height:none}
  .rsv__body{padding:22px 20px 26px}
  .rsv__grille{grid-template-columns:1fr 1fr}
  .rsv__grille .rsv__field:last-child{grid-column:1/-1}
  .rsv__paliers{grid-template-columns:1fr 1fr}
  .rsv__envoi{flex-direction:column}
  .rsv__envoi .bouton{flex:0 0 auto}
}

/* ----------------------------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .pose .p,.js .pose .k,.js .hero .monte,.js .bandeau .monte,.js .hero__filet{transform:none}
  .js .trace path,.js .trace line,.js .trace polygon,.js .trace circle{stroke-dashoffset:0}
  .js .plan-chemin.a-tracer{stroke-dasharray:2 9}
  .hero__diapo:not(:first-child){display:none}
  .hero__pastille{display:none}
}
.g-8{grid-column:span 8;grid-row:span 3}.g-12{grid-column:span 12;grid-row:span 3}
/* a g-8 always shares its row with a g-c: on a phone the pair sits side by side, no empty cell */
@media (max-width:900px){.g-12{grid-column:span 2;grid-row:span 2}.g-8{grid-column:span 1;grid-row:span 2}}
@media (max-width:900px){.g-l.g-pt{grid-column:span 1}}