/* Riad Dar Shaeir, Maison de la Poésie. One stylesheet for the ten pages.
   The house's kit, exactly: Vert Olive #4B5E43, Vert Sauge #DDE8D3, Ivoire #F7F3E9, Sable #D7C9B3, Terre #8C6F57;
   the logo's dark brown #402609 for the name and the titles. Type: Playfair Display (logo, titles, values),
   Allura (the logo's script line, « Maison de la Poésie », and the script accents), and Commissioner for text in
   place of the kit's Montserrat (Jad: Montserrat avoided by default). */

@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:"Allura";src:url(assets/fonts/allura.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Commissioner";src:url(assets/fonts/commissioner.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --chaux:#F7F3E9; --lin:#DDE8D3; --papier:#FBF8F1; --sable:#D7C9B3; --sable-c:#EDE6D8;
  --encre:#402609; --texte:#423F39; --gris:#675E52;
  --sauge:#7D8B6A; --sauge-f:#4B5E43; --sauge-c:#DDE8D3;
  --nuit:#4B5E43; --nuit-2:#556a4c; --pied:#414732;
  --cedre:#8C6F57; --cobalt:#8C6F57; --terre:#8C6F57; --terre-f:#6A4F38; --tige:#5A4230;
  --filet:rgba(64,38,9,.16); --filet-c:rgba(247,243,233,.22);
  --display:"Playfair Display",Georgia,serif;
  --script:"Allura","Snell Roundhand",cursive;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --trace:cubic-bezier(.6,.1,.2,1);
  --gout:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--chaux);color:var(--texte);font:400 16.5px/1.72 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}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.wrap{width:min(1240px,calc(100% - 2 * var(--gout)));margin-inline:auto}
.saut{position:absolute;left:12px;top:-60px;z-index:300;background:var(--encre);color:#fff;padding:10px 16px;text-decoration:none}
.saut:focus{top:12px}

/* ---------------------------------------------------------------- type */
.h1,.h2{font-family:var(--display);font-weight:400;margin:0;color:var(--encre)}
.h2{font-size:clamp(32px,3.8vw,54px);line-height:1.07;letter-spacing:-.005em}
.h2 em,.h1 em{font-style:italic;color:var(--sauge-f)}
.section--nuit .h2,.resa .h2{color:#F3F0E6}
.section--nuit .h2 em,.resa .h2 em{color:var(--sauge-c)}
.lbl{font:500 11.5px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-f);margin:0}
.lbl--clair{color:var(--sauge-c)}
.script{font-family:var(--script);font-weight:400;line-height:1.1;margin:0}
.p{margin:0 0 1em;max-width:58ch}
.section--nuit{background:var(--nuit);color:#D7DCCD}

/* the quills of the logo: drawn once when they reach the screen (app.js adds .vu) */
.plume{display:block;width:24px;height:37px;color:#6E7A5C;margin:0 0 16px;overflow:visible}
.plume--clair{color:#EDE9DC}
.js .plume--trace{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;transition:stroke-dashoffset 2s var(--trace)}
.js .plume--trace.vu{stroke-dashoffset:0}

/* ---------------------------------------------------------------- buttons, links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;font:500 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:var(--sauge-f);color:#F7F3E9;border:1px solid var(--sauge-f);border-radius:0;cursor:pointer;text-decoration:none;transition:background .35s,color .35s,border-color .35s}
.btn:hover{background:var(--encre);border-color:var(--encre)}
.btn--petit{min-height:40px;padding:0 18px;font-size:11.5px}
.btn--ligne{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn--ligne:hover{background:var(--encre);color:#F7F3E9}
.btn--ligne-clair{background:transparent;color:#F7F3E9;border-color:rgba(247,243,233,.82)}
.btn--ligne-clair:hover{background:#F7F3E9;color:var(--encre);border-color:#F7F3E9}
.btn--clair{background:#F4F0E4;color:var(--encre);border-color:#F4F0E4}
.btn--clair:hover{background:transparent;color:#F4F0E4;border-color:#F4F0E4}
.lienfleche{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--encre);text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer}
.lienfleche svg{width:18px;height:18px;flex:none;transition:transform .5s var(--ease)}
.lienfleche:hover svg{transform:translateX(5px)}
.fait svg,.lienfleche svg,.contact__liste svg,.avis__fl svg,.tuile__ig svg,.rsv svg.ico{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px;padding:0 var(--gout);color:#F7F3E9;border-bottom:1px solid transparent;transition:background .45s,color .45s,height .45s,border-color .45s}
.nav.plein{background:var(--chaux);color:var(--encre);height:66px;border-bottom-color:var(--filet)}
.nav__marque{position:relative;z-index:2;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.nav__plume{width:17px;height:27px;flex:none}
.nav__nom{font:400 16px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav__liens{display:flex;align-items:center;gap:30px}
.nav__liens a{font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.nav__liens a:hover,.nav__liens a.active{border-bottom-color:currentColor}
.nav__fin{position:relative;z-index:2;display:flex;align-items:center;gap:18px}
.nav__langue{font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-decoration:none}
.nav__langue--menu,.nav__cta--menu{display:none}
.nav:not(.plein):not(.menu-open) .nav__cta{background:transparent;border-color:rgba(247,243,233,.78);color:#F7F3E9}
.nav:not(.plein):not(.menu-open) .nav__cta:hover{background:#F7F3E9;color:var(--encre)}
.nav__burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative;color:inherit}
.nav__burger span{position:absolute;left:11px;right:11px;height:1px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.nav__burger span:nth-child(1){top:15px}.nav__burger span:nth-child(2){top:21px}.nav__burger span:nth-child(3){top:27px}
.nav.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1020px){
  .nav__burger{display:block}
  .nav__liens{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:22px;background:var(--nuit);color:#F3F0E6;transform:translateY(-100%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
  .nav__liens.nav-open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
  .nav__liens a{font:400 30px/1.2 var(--display);letter-spacing:.02em;text-transform:none}
  .nav__liens .nav__langue--menu{display:block;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
  .nav__liens .nav__cta--menu{display:inline-flex;margin-top:14px;background:#F4F0E4;color:var(--encre);border-color:#F4F0E4}
  .nav.menu-open{color:#F3F0E6;background:transparent;border-bottom-color:transparent}
  .nav__fin .nav__langue{display:none}
}
@media (max-width:440px){.nav__fin .nav__cta{display:none}.nav__nom{font-size:16px}}

/* ---------------------------------------------------------------- motion */
@keyframes pose{from{transform:scale(1.03)}to{transform:none}}
@keyframes monte{from{transform:translateY(18px)}to{transform:none}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes filet{to{transform:scaleX(1)}}
.monte{animation:monte 1s var(--ease) both}
.monte--2{animation-delay:.14s}.monte--3{animation-delay:.28s}.monte--4{animation-delay:.42s}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1200px;display:flex;align-items:center;justify-content:center;color:#F7F3E9;overflow:hidden;background:#3a3b32}
.hero__media,.hero__diapo picture{position:absolute;inset:0}
.hero__media img,.hero__diapo img{width:100%;height:100%;object-fit:cover}
.hero__media img{animation:pose 14s var(--ease) both}
.hero__diapo picture{opacity:0;transition:opacity 2.4s ease}
.hero__diapo picture.on{opacity:1}
.hero__diapo picture.on img{animation:pose 14s var(--ease) both}
.hero__voile{position:absolute;inset:0;background:
  radial-gradient(ellipse 44% 40% at 50% 44%,rgba(20,24,17,.58),rgba(20,24,17,.3) 58%,rgba(20,24,17,0) 100%),
  linear-gradient(to bottom,rgba(20,24,17,.5),rgba(20,24,17,0) 20%),
  linear-gradient(to top,rgba(20,24,17,.55),rgba(20,24,17,0) 34%)}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:84px 20px 150px}
.hero__plume{width:62px;height:95px;color:#F3EFE4;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));overflow:visible}
.hero__plume path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;animation:trace 2.2s var(--trace) .2s forwards}
.hero__plume .tige path{animation-duration:1.6s;animation-delay:.1s}
.hero__plume .feuilles path{animation-delay:.55s}
/* the kit's stem is brown on paper; on a photo or an olive band the whole symbol takes the light colour */
.hero__plume,.plume--clair,.pied__plume,.resa__plume,.rsv__aside .plume,.bandeau .plume,.moment .plume{--tige:currentColor}
.hero__nom{font:400 clamp(27px,5vw,76px)/1.05 var(--display);letter-spacing:.13em;padding-left:.13em;text-transform:uppercase;margin:22px 0 0;text-shadow:0 2px 28px rgba(0,0,0,.3)}
.hero__script{font-size:clamp(36px,4vw,60px);color:#F1EBDC;margin-top:8px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero__filet{display:block;width:110px;height:1px;background:rgba(243,239,228,.75);margin:22px 0 20px;transform:scaleX(0);animation:filet 1.6s var(--trace) .9s forwards}
.hero__sous{font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:34ch;margin:0 0 28px;color:#F4F1E9;text-shadow:0 1px 14px rgba(0,0,0,.35)}

/* the date bar: anchored in the first screen */
.barre{position:absolute;left:0;right:0;bottom:clamp(22px,4.5vh,44px);z-index:3;display:flex;justify-content:center;padding:0 var(--gout)}
.barre__form{display:grid;grid-template-columns:1fr 1fr 1fr auto;width:min(980px,100%);background:var(--chaux);color:var(--encre)}
.barre__champ{display:flex;flex-direction:column;justify-content:center;padding:12px 22px;border-right:1px solid var(--filet);min-width:0}
.barre__champ label{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f);margin-bottom:6px}
.barre__champ input,.barre__champ select{-webkit-appearance:none;appearance:none;border:0;background:transparent;font:400 18px/1.2 var(--display);color:var(--encre);padding:2px 0;min-height:30px;width:100%;min-width:0;border-radius:0}
.barre__champ input::-webkit-date-and-time-value{text-align:left;margin:0}
.barre__champ input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.barre__btn{min-height:68px;padding:0 36px}
@media (max-width:680px){
  .hero{min-height:600px}
  .hero__in{padding:70px 18px 176px}
  .hero__voile{background:radial-gradient(ellipse 90% 34% at 50% 46%,rgba(20,24,17,.62),rgba(20,24,17,.34) 62%,rgba(20,24,17,0) 100%),linear-gradient(to bottom,rgba(20,24,17,.5),rgba(20,24,17,0) 20%),linear-gradient(to top,rgba(20,24,17,.55),rgba(20,24,17,0) 34%)}
  .hero__plume{width:46px;height:71px}
  .hero__nom{margin-top:16px}
  .hero__filet{margin:16px 0 14px}
  .hero__sous{margin-bottom:20px;font-size:15px}
  .barre{bottom:14px;padding:0 14px}
  .barre__form{grid-template-columns:1fr 1fr}
  .barre__champ{padding:9px 14px;border-bottom:1px solid var(--filet)}
  .barre__champ:nth-child(2){border-right:0}
  .barre__champ input,.barre__champ select{font-size:16.5px}
  .barre__btn{min-height:56px;padding:0 16px}
}
@media (max-width:680px) and (max-height:700px){
  .hero__in{padding-top:64px;padding-bottom:166px}
  .hero__plume{width:32px;height:49px}
  .hero__script{font-size:34px}
  .hero__sous{margin-bottom:16px}
  .hero__in .btn{min-height:44px}
}

/* ---------------------------------------------------------------- inner page banner */
.bandeau{position:relative;height:clamp(440px,72vh,760px);height:clamp(440px,72svh,760px);display:flex;align-items:flex-end;color:#F7F3E9;overflow:hidden;background:#3a3b32}
.bandeau__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pose 16s var(--ease) both}
.bandeau__voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,17,.7),rgba(20,24,17,.12) 58%,rgba(20,24,17,.42))}
.bandeau__in{position:relative;padding-bottom:clamp(48px,7vw,92px)}
.bandeau .h1{font-size:clamp(46px,6.4vw,92px);line-height:1;color:#F7F3E9;margin-top:6px}
.bandeau__sous{font-size:17px;line-height:1.6;max-width:46ch;margin:16px 0 0;color:#EEEBE2}
.bandeau .plume{margin-bottom:14px;width:26px;height:40px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(76px,10vw,140px) 0}
.section--lin{background:var(--lin)}
.tete{max-width:660px;margin-bottom:clamp(36px,5vw,58px)}
.tete .h2{margin-top:12px}
.tete__sous{margin:20px 0 0;color:var(--gris);max-width:52ch}
.section--nuit .tete__sous{color:#BFC6B3}

/* practical facts under the bar */
.faits{background:var(--sable-c);border-bottom:1px solid var(--filet)}
.faits__rang{display:grid;grid-template-columns:repeat(4,1fr)}
.fait{display:flex;align-items:center;gap:15px;padding:28px 24px;border-left:1px solid var(--filet)}
.fait:first-child{border-left:0;padding-left:0}
.fait svg{width:26px;height:26px;flex:none;color:var(--sauge-f)}
.fait__k{font:500 10.5px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f);margin:0}
.fait__v{font:400 19px/1.3 var(--display);color:var(--encre);margin:4px 0 0}
.fait__v a{text-decoration:none;border-bottom:1px solid var(--filet)}
@media (max-width:900px){
  .faits__rang{grid-template-columns:1fr 1fr}
  .fait{padding:20px 14px}
  .fait:nth-child(odd){border-left:0;padding-left:0}
  .fait:nth-child(-n+2){border-bottom:1px solid var(--filet)}
}

/* quotes placed next to the text */
.citation{margin:30px 0;padding-left:22px;border-left:1px solid var(--sauge)}
.citation p{font:italic 400 20px/1.5 var(--display);color:var(--encre);margin:0;max-width:44ch}
.citation footer{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris);margin-top:12px}
.citation--clair{border-left-color:var(--sauge-c)}
.citation--clair p{color:#EEF0E6}
.citation--clair footer{color:var(--sauge-c)}

/* the house's arch: the photo shows through it, the outline is traced around it */
.histoire__texte .tete{margin-bottom:28px}
.histoire__grille{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(48px,7vw,112px);align-items:center}
.arche-photo{position:relative;margin:0 0 0 14px;width:min(100% - 28px,480px);justify-self:center}
.arche-photo__cadre{aspect-ratio:4/5;overflow:hidden;-webkit-mask:url(assets/arche.svg) center/100% 100% no-repeat;mask:url(assets/arche.svg) center/100% 100% no-repeat;background:#d9d6cc}
.arche-photo__cadre img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.arche-photo__trait{position:absolute;left:-14px;top:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none}
.arche-photo__trait path{fill:none;stroke:var(--cobalt);stroke-opacity:.85;stroke-width:.42}
.js .arche-photo__trait path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;transition:stroke-dashoffset 2.2s var(--trace) .15s}
.js .arche-photo.vu .arche-photo__trait path{stroke-dashoffset:0}
.arche-photo__petite{position:absolute;right:-12%;bottom:-7%;width:38%;aspect-ratio:3/4;overflow:hidden;border:8px solid var(--papier)}
.arche-photo__petite img{width:100%;height:100%;object-fit:cover}
.section--lin .arche-photo__petite{border-color:var(--lin)}
@media (hover:hover){.arche-photo:hover .arche-photo__cadre img{transform:scale(1.05)}}
@media (max-width:900px){
  .histoire__grille{grid-template-columns:1fr}
  .arche-photo{width:min(80%,420px);margin:0 auto 30px}
  .arche-photo__petite{right:-14%}
}

/* ---------------------------------------------------------------- room showcase */
.vitrine__grille{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:start}
.vitrine__photos{position:sticky;top:96px;aspect-ratio:15/16;overflow:hidden;background:#d9d6cc}
.vitrine__photo{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.vitrine__photo.is-on{opacity:1}
.vitrine__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.6s var(--ease)}
.vitrine__photo.is-on img{transform:none}
.vitrine__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.vitrine__ligne{position:relative;border-bottom:1px solid var(--filet);padding:20px 0 18px 0}
.vitrine__ligne::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--sauge-f);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.vitrine__ligne.is-on::before{transform:scaleX(1)}
.vitrine__choix{display:grid;grid-template-columns:46px 1fr;width:100%;padding:0;margin:0;background:none;border:0;text-align:left;cursor:pointer;color:inherit}
.vitrine__num{grid-row:span 2;font:italic 400 16px/1.9 var(--display);color:var(--sauge-f)}
.vitrine__nom{font:400 clamp(22px,2vw,28px)/1.15 var(--display);color:var(--encre);transition:color .4s}
.vitrine__ligne.is-on .vitrine__nom{color:var(--sauge-f)}
.vitrine__meta{font-size:14.5px;line-height:1.5;color:var(--gris);margin-top:5px}
.vitrine__bas{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0 46px}
.vitrine__bas .prix{margin-right:auto}
.vitrine__voir,.vitrine__demande{font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--encre);background:none;border:0;padding:6px 0;border-bottom:1px solid var(--filet);text-decoration:none;cursor:pointer}
.vitrine__demande{color:#6A4F38;border-bottom-color:currentColor}
.vitrine__tout{margin-top:34px}
.prix{margin:0;font:400 13.5px/1.3 var(--sans);color:var(--gris)}
.prix__de{font:500 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sauge-f)}
.prix b{font:400 22px/1 var(--display);color:var(--encre)}
.prix--grand b{font-size:31px}
@media (max-width:900px){
  .vitrine__grille{grid-template-columns:1fr}
  .vitrine__photos{position:relative;top:auto;aspect-ratio:4/3}
  .vitrine__bas{margin-left:46px}
}

/* ---------------------------------------------------------------- the moment: breakfast in the patio */
.moment__grille{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(44px,6vw,100px);align-items:center}
.moment__grille--inverse{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.moment__grille--inverse .moment__texte{order:2}
.moment .h2{margin:12px 0 22px}
.moment__rosace{display:block;width:clamp(118px,13vw,168px);height:auto;color:var(--sauge-c);margin:0 0 30px;overflow:visible}
.js .rosace path,.js .rosace circle{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;transition:stroke-dashoffset 1.5s var(--trace);transition-delay:calc(var(--i) * 55ms)}
.js .rosace.vu path,.js .rosace.vu circle{stroke-dashoffset:0}
.moment__photos{position:relative;margin:0;padding:0 0 13% 9%}
.moment__grande{aspect-ratio:4/3;overflow:hidden}
.moment__grande img,.moment__petite img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.moment__petite{position:absolute;left:0;bottom:0;width:40%;aspect-ratio:1;overflow:hidden;border:8px solid var(--papier)}
.moment__legende{position:absolute;left:calc(40% + 22px);bottom:2%;max-width:40%;text-align:left;font:italic 400 16px/1.4 var(--display);color:var(--sauge-c)}
@media (hover:hover){.moment__grande:hover img,.moment__petite:hover img{transform:scale(1.05)}}
@media (max-width:900px){
  .moment__grille,.moment__grille--inverse{grid-template-columns:1fr}
  .moment__grille--inverse .moment__texte{order:0}
  .moment__photos{padding:0 0 22% 0}
  .moment__petite{width:46%;left:-2%}
  .moment__legende{left:calc(44% + 14px);bottom:4%;max-width:50%;font-size:15px}
}

/* ---------------------------------------------------------------- on foot */
.autour__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.autour__photo{margin:0}
.autour__photo{overflow:hidden}
.autour__photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 40%;transition:transform 1.1s var(--ease)}
.autour__photo figcaption{font:italic 400 16px/1.4 var(--display);color:var(--gris);margin-top:12px}
.distances{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--filet)}
.distances li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--filet)}
.distances b{font:400 20px/1 var(--display);color:var(--encre);white-space:nowrap}
.distances--long{columns:2;column-gap:48px;border-top:0}
.distances--long li{break-inside:avoid}
.autour__deux{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:start}
@media (max-width:900px){
  .autour__grille,.autour__deux{grid-template-columns:1fr}
  .distances--long{columns:1;border-top:1px solid var(--filet)}
}

/* ---------------------------------------------------------------- reviews, one at a time */
.avis{max-width:920px;margin:0 auto;text-align:center}
.avis .plume{margin:0 auto 18px}
.avis__titre{margin-bottom:38px}
.avis__item{margin:0 0 40px}
.js .avis__liste{display:grid}
.js .avis__item{grid-area:1/1;margin:0;transition:opacity .9s ease,transform .9s var(--ease),visibility 0s}
.js .avis__item.cache{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.avis blockquote{margin:0;font:italic 400 clamp(23px,2.9vw,38px)/1.38 var(--display);color:#F3F0E6}
.avis figcaption{font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sauge-c);margin-top:26px}
.avis__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:44px}
.avis__fl{width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid var(--filet-c);color:#EEF0E6;cursor:pointer;transition:border-color .3s}
.avis__fl:hover{border-color:var(--sauge-c)}
.avis__fl svg{width:18px;height:18px}
.avis__points{display:flex;gap:8px}
.avis__points button{width:24px;height:24px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.avis__points button::after{content:"";position:absolute;left:2px;right:2px;top:11px;height:1px;background:var(--filet-c);transition:background .3s}
.avis__points button[aria-current="true"]::after{background:var(--sauge-c);height:2px;top:10px}

/* ---------------------------------------------------------------- instagram */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px)}
.tuile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#d9d6cc}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tuile__ig{position:absolute;right:12px;bottom:12px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.tuile__ig svg{width:100%;height:100%}
.insta__lien{margin-top:30px}
@media (hover:hover){.tuile:hover img,.galerie__tuile:hover img,.mosaique__p:hover img,.terrasse__photo:hover img,.autour__photo:hover img{transform:scale(1.05)}}
@media (max-width:680px){.tuiles{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- « Réservez en direct »: the arch as a frame */
.resa{position:relative;overflow:hidden;background:var(--nuit-2);color:#DCE0D2;text-align:center;padding:clamp(150px,15vw,190px) var(--gout) clamp(84px,10vw,124px)}
.resa__arche{position:absolute;left:50%;top:clamp(44px,6vw,64px);width:min(580px,88vw);height:auto;transform:translateX(-50%);overflow:visible;pointer-events:none}
.resa__arche path{fill:none;stroke:var(--sauge-c);stroke-opacity:.6;stroke-width:.42}
@media (max-width:680px){.resa__arche path{stroke-width:.62}}
.js .resa__arche path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;transition:stroke-dashoffset 2.6s var(--trace)}
.js .resa__arche.vu path{stroke-dashoffset:0}
.resa__in{position:relative;max-width:500px;margin:0 auto}
.resa__plume{width:26px;height:40px;margin:0 auto 14px;color:var(--sauge-c)}
.resa__script{font-size:clamp(34px,3.4vw,44px);color:#E9E4D6}
.resa__titre{margin:6px 0 20px;font-size:clamp(32px,3.4vw,48px)}
.resa__texte{color:#C6CDBB;margin:0 auto 32px;max-width:40ch}
@media (max-width:680px){.resa__in{max-width:min(300px,74vw)}}

/* ---------------------------------------------------------------- rooms page */
.chambre{padding:clamp(70px,9vw,128px) 0;scroll-margin-top:60px}
.chambre__grille{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(36px,6vw,92px);align-items:center}
.chambre--inverse .chambre__media{order:2}
.chambre__grande{aspect-ratio:3/2;overflow:hidden;background:#d9d6cc}
.chambre__grande img{width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform 1.1s var(--ease)}
.chambre__grande img.change{opacity:.15}
@media (hover:hover){.chambre__grande:hover img{transform:scale(1.05)}}
.chambre__vignettes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vignette{width:78px;aspect-ratio:4/3;padding:0;border:1px solid transparent;background:none;cursor:pointer;overflow:hidden;opacity:.62;transition:opacity .3s,border-color .3s}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette:hover,.vignette[aria-pressed="true"]{opacity:1}
.vignette[aria-pressed="true"]{border-color:var(--sauge-f)}
.chambre__texte .h2{margin-top:12px}
.chambre__faits{margin:26px 0 20px;border-top:1px solid var(--filet)}
.chambre__faits div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--filet)}
.chambre__faits dt{font:500 10.5px/1.9 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f)}
.chambre__faits dd{margin:0;font:400 18px/1.4 var(--display);color:var(--encre)}
.chambre__note{font:italic 400 17px/1.5 var(--display);color:var(--gris);margin:0 0 18px}
.chambre__pdj{margin:6px 0 24px;font-size:14px;color:var(--gris)}
.chambre__actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
.chambre__actions .lienfleche svg{width:20px;height:20px}
.note-prix{font-size:14px;color:var(--gris);margin-top:0;padding:0 0 clamp(56px,7vw,90px)}
@media (max-width:900px){
  .chambre__grille{grid-template-columns:1fr}
  .chambre--inverse .chambre__media{order:0}
  .chambre__faits div{grid-template-columns:110px 1fr}
  .vignette{width:66px}
}

/* ---------------------------------------------------------------- the house page */
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,16vw,232px);gap:clamp(8px,1vw,14px)}
.mosaique__p{overflow:hidden;background:#d9d6cc}
.mosaique__p img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mosaique__p--1{grid-column:1/3;grid-row:1/3}
.mosaique__p--2{grid-column:3;grid-row:1}
.mosaique__p--3{grid-column:4;grid-row:1}
.mosaique__p--4{grid-column:3/5;grid-row:2}
.mosaique__p--5{grid-column:1;grid-row:3}
.mosaique__p--6{grid-column:2;grid-row:3/5}
.mosaique__p--7{grid-column:3/5;grid-row:3/5}
.mosaique__citation{grid-column:1;grid-row:4;margin:0;padding:22px;background:var(--nuit);display:flex;flex-direction:column;justify-content:center}
.mosaique__citation p{font:italic 400 18px/1.45 var(--display);color:#EEF0E6;margin:0}
.mosaique__citation footer{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-c);margin-top:12px}
@media (max-width:680px){
  .mosaique{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .mosaique__p--1{grid-column:1/3;grid-row:auto/span 2}
  .mosaique__p--2,.mosaique__p--3,.mosaique__p--5,.mosaique__p--6{grid-column:auto;grid-row:auto}
  .mosaique__p--4,.mosaique__p--7{grid-column:1/3;grid-row:auto}
  .mosaique__citation{grid-column:1/3;grid-row:auto}
}
.terrasse__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.terrasse__photo{overflow:hidden;aspect-ratio:3/2}
.terrasse__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.savoir__liste{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin:0;border-top:1px solid var(--filet)}
.savoir__liste div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--filet)}
.savoir__liste dt{font:500 10.5px/1.9 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f)}
.savoir__liste dd{margin:0;font:400 18px/1.4 var(--display);color:var(--encre)}
@media (max-width:900px){
  .terrasse__grille{grid-template-columns:1fr}
  .savoir__liste{grid-template-columns:1fr}
  .savoir__liste div{grid-template-columns:120px 1fr}
}

/* ---------------------------------------------------------------- gallery */
/* chapters after the first are laid out only when the visitor nears them, so their thumbnails do not compete with the banner */
[data-galerie]>section.galerie:not(:first-child),section.insta,section.mosaique-sec{content-visibility:auto;contain-intrinsic-size:auto 1100px}
[data-galerie].tout>section.galerie,.cv-off main section{content-visibility:visible}
/* justified rows, read left to right: each figure grows with its own ratio, so a row shares one height */
.galerie__grille{display:flex;flex-wrap:wrap;gap:26px 12px;margin-bottom:30px}
.galerie__grille::after{content:"";flex:999 1 0}
.galerie__tuile{display:block;width:100%;aspect-ratio:var(--r);padding:0;border:0;background:#d9d6cc;cursor:zoom-in;overflow:hidden}
.galerie__tuile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}

/* the viewer (gallery, rooms) */
.visio{position:fixed;inset:0;z-index:150;background:rgba(17,21,15,.96);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:#EEF0E6}
.visio[hidden]{display:none}
.visio__haut{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gout)}
.visio__compte{font:500 11.5px/1 var(--sans);letter-spacing:.22em}
.visio__fermer,.visio__fl{width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid var(--filet-c);color:inherit;cursor:pointer}
.visio__fermer svg,.visio__fl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.visio__scene{position:relative;display:flex;align-items:center;justify-content:center;padding:0 76px;min-height:0}
.visio__scene img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.visio__fl{position:absolute;top:50%;transform:translateY(-50%)}
.visio__fl--prec{left:var(--gout)}.visio__fl--suiv{right:var(--gout)}
.visio__legende{text-align:center;padding:14px var(--gout) 22px;font:italic 400 17px/1.4 var(--display);color:#D9DECF}
@media (max-width:680px){.visio__scene{padding:0 8px}.visio__fl{top:auto;bottom:-62px;transform:none}.visio__legende{padding-bottom:78px}}

/* ---------------------------------------------------------------- contact */
.contact__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:start}
.contact__liste{margin:0;border-top:1px solid var(--filet)}
.contact__liste div{display:grid;grid-template-columns:24px 1fr;column-gap:16px;padding:15px 0;border-bottom:1px solid var(--filet)}
.contact__liste svg{grid-row:span 2;width:22px;height:22px;color:var(--sauge-f);margin-top:2px}
.contact__liste dt{font:500 10.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f)}
.contact__liste dd{margin:2px 0 0;font:400 19px/1.4 var(--display);color:var(--encre)}
.contact__liste a{text-decoration:none;border-bottom:1px solid var(--filet)}
.contact__actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 16px}
.contact__carte iframe{display:block;width:100%;height:clamp(320px,38vw,480px);border:0}
.contact__carte .lienfleche{margin-top:10px}
@media (max-width:900px){.contact__grille{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- footer: large logo, one line, the button, three columns */
.pied{background:var(--pied);color:#B7BEAC;padding:clamp(70px,9vw,110px) 0 28px;font-size:14.5px}
.pied__haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(40px,7vw,110px)}
.pied__plume{width:34px;height:52px;color:var(--sauge-c)}
.pied__nom{font:400 clamp(26px,3vw,40px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#F4F0E4;margin:18px 0 8px}
.pied__script{font-size:clamp(30px,2.8vw,40px);color:var(--sauge-c)}
.pied__phrase{margin:22px 0 26px;max-width:40ch;color:#C3C9B8;line-height:1.65}
.pied__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:12px}
.pied__titre{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-c);margin:4px 0 18px}
.pied__ligne{margin:0 0 14px;line-height:1.6}
.pied__ligne a{display:inline-block;padding:3px 0}
.pied a{color:#E6E9DE;text-decoration:none}
.pied a:hover{text-decoration:underline;text-underline-offset:3px}
.pied__liens{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied__bas{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:64px;padding-top:22px;border-top:1px solid var(--filet-c);font-size:12.5px}
.pied__haut-lien{font:500 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.credit{margin:0}
.credit a{color:#C9CDBA;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px}
@media (max-width:900px){.pied__haut{grid-template-columns:1fr}}
@media (max-width:560px){.pied__cols{grid-template-columns:1fr 1fr}.pied__bas{flex-direction:column;align-items:flex-start}}

/* ---------------------------------------------------------------- hero controls: counter, arrows, pause */
.hero__ctrl{position:absolute;z-index:3;right:var(--gout);bottom:calc(clamp(22px,4.5vh,44px) + 96px);display:flex;align-items:center;gap:2px;padding:4px;background:rgba(20,24,17,.42);border:1px solid rgba(247,243,233,.22);color:#F3F0E6}
.hero__ctrl button{width:36px;height:36px;display:grid;place-items:center;background:none;border:0;color:inherit;cursor:pointer}
.hero__ctrl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hero__ctrl .ico-play{display:none}
.hero__ctrl [aria-pressed="true"] .ico-pause{display:none}
.hero__ctrl [aria-pressed="true"] .ico-play{display:inline}
.hero__compte{margin:0 8px;font:500 11px/1 var(--sans);letter-spacing:.16em}
.hero__compte b{font-weight:500;color:#fff}
@media (max-width:680px){.hero__ctrl{top:84px;bottom:auto;right:12px;padding:2px}.hero__ctrl button{width:32px;height:32px}}

/* ---------------------------------------------------------------- perks for booking direct, inside the arch */
.resa__offert{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-c);margin:0 0 14px}
.resa__paliers{list-style:none;margin:0 auto 14px;padding:0;max-width:440px;text-align:left;border-top:1px solid var(--filet-c)}
.resa__paliers li{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--filet-c);color:#E3E7DA;font-size:15px;line-height:1.5}
.resa__nuits{font:italic 400 19px/1 var(--display);color:#F1EBDC}
.resa__cond{font-size:12.5px;line-height:1.55;color:#A9B19E;margin:0 auto 30px;max-width:44ch}

/* ---------------------------------------------------------------- phone booking bar */
.barre-mob{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:12px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--chaux);border-top:1px solid var(--filet);transform:translateY(110%);transition:transform .45s var(--ease)}
.barre-mob.on{transform:none}
.barre-mob[hidden]{display:none}
.barre-mob__ligne{flex:1;min-width:0;margin:0;font:italic 400 15.5px/1.3 var(--display);color:var(--encre)}
.barre-mob__btn{min-height:46px;padding:0 20px;flex:none}
@media (min-width:768px){.barre-mob{display:none!important}}
@media (max-width:767px){body.a-barre{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}

/* ---------------------------------------------------------------- desktop perks card */
.carte-av{position:fixed;right:24px;bottom:24px;z-index:95;width:330px;padding:24px 24px 22px;background:var(--chaux);border:1px solid var(--filet);color:var(--texte);transform:translateY(calc(100% + 40px));transition:transform .7s var(--ease)}
.carte-av.on{transform:none}
.carte-av[hidden]{display:none}
.carte-av__fermer{position:absolute;top:8px;right:8px;width:36px;height:36px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.carte-av__fermer svg{width:16px;height:16px;fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linecap:round}
.carte-av__plume{width:18px;height:28px;margin-bottom:10px}
.carte-av__titre{font:400 22px/1.2 var(--display);color:var(--encre);margin:0 0 12px}
.carte-av__liste{list-style:none;margin:0 0 18px;padding:0;font-size:13.5px;line-height:1.5}
.carte-av__liste li{padding:7px 0;border-top:1px solid var(--filet)}
.carte-av__liste b{font:italic 400 15px var(--display);color:var(--sauge-f);margin-right:4px}
@media (max-width:767px){.carte-av{display:none!important}}

/* ---------------------------------------------------------------- sticky tabs (rooms, gallery chapters) */
.onglets{position:sticky;top:65px;z-index:60;background:var(--chaux);border-bottom:1px solid var(--filet)}
.onglets__in{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.onglets__in::-webkit-scrollbar{display:none}
.onglet{flex:none;display:flex;align-items:baseline;gap:9px;padding:18px 0 16px;font:400 16px/1 var(--display);color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .3s,border-color .3s}
.onglet span{font:500 10px/1 var(--sans);letter-spacing:.14em;color:var(--sauge-f)}
.onglet:hover,.onglet.on{color:var(--encre);border-bottom-color:var(--encre)}
@media (max-width:680px){.onglets{top:65px}.onglets__in{gap:22px}.onglet{font-size:15px;padding:15px 0 13px}}

/* ---------------------------------------------------------------- room: photos button, facts strip, beds table, tags */
.chambre{scroll-margin-top:122px}
.chambre__grande{position:relative}
.chambre__voir{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(247,243,233,.94);border:0;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--encre);cursor:pointer}
.chambre__voir svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}
.ch-faits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.ch-faits div{padding:12px 12px 12px 0}
.ch-faits div + div{padding-left:14px;border-left:1px solid var(--filet)}
.ch-faits dt{font:500 10px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sauge-f)}
.ch-faits dd{margin:6px 0 0;font:400 17px/1.25 var(--display);color:var(--encre)}
.ch-table{width:100%;border-collapse:collapse;margin:0 0 18px}
.ch-table th,.ch-table td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--filet)}
.ch-table th{width:130px;font:500 10px/1.9 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sauge-f)}
.ch-table td{font:400 17px/1.4 var(--display);color:var(--encre)}
.ch-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.ch-tags li{padding:6px 12px;border:1px solid var(--filet);font-size:12.5px;color:var(--texte)}
@media (max-width:560px){.ch-faits{grid-template-columns:1fr 1fr}.ch-faits div:nth-child(3){padding-left:0;border-left:0}.ch-faits div:nth-child(-n+2){border-bottom:1px solid var(--filet)}.ch-table th{width:110px}}
.chaque__grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.chaque__liste{list-style:none;margin:0;padding:0;columns:2;column-gap:44px;border-top:1px solid var(--filet)}
.chaque__liste li{break-inside:avoid;display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--filet);font:400 17px/1.4 var(--display);color:var(--encre)}
.chaque__liste span{font:500 10px/1 var(--sans);letter-spacing:.14em;color:var(--sauge-f)}
@media (max-width:900px){.chaque__grille{grid-template-columns:1fr}.chaque__liste{columns:1}}

/* ---------------------------------------------------------------- the house in figures, services */
.chiffres__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chiffres__grille div{padding:30px 22px 28px}
.chiffres__grille div + div{border-left:1px solid var(--filet)}
.chiffres__grille dt{font:400 clamp(44px,5vw,68px)/1 var(--display);color:var(--encre)}
.chiffres__grille dd{margin:10px 0 0;font-size:14.5px;color:var(--gris)}
.chiffres__lieux{font:italic 400 20px/1.5 var(--display);color:var(--sauge-f);margin:26px 0 0}
@media (max-width:760px){.chiffres__grille{grid-template-columns:1fr 1fr}.chiffres__grille div:nth-child(3){border-left:0}.chiffres__grille div:nth-child(-n+2){border-bottom:1px solid var(--filet)}.chiffres__grille div{padding:22px 14px}}
.services__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--filet)}
.services__liste li{padding:22px 22px 22px 0}
.services__liste li + li{padding-left:22px;border-left:1px solid var(--filet)}
.services__liste p{margin:0;font-size:15px;line-height:1.6}
.services__nom{font:400 21px/1.2 var(--display)!important;color:var(--encre);margin:0 0 10px!important}
@media (max-width:900px){.services__liste{grid-template-columns:1fr 1fr}.services__liste li:nth-child(3){padding-left:0;border-left:0}.services__liste li{border-bottom:1px solid var(--filet)}}
@media (max-width:560px){.services__liste{grid-template-columns:1fr}.services__liste li,.services__liste li + li{padding-left:0;border-left:0}}

/* ---------------------------------------------------------------- gallery chapters */
.galerie{scroll-margin-top:122px}
.galerie__tete{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(28px,4vw,44px)}
.galerie__chap{font:italic 400 22px/1 var(--display);color:var(--sauge-f);margin:0}
.galerie__fig{flex:var(--r) 1 calc(var(--r) * 210px);min-width:0;margin:0}
.galerie__fig figcaption{font-size:13px;line-height:1.45;color:var(--gris);margin-top:8px}
@media (max-width:680px){.galerie__grille{gap:18px 8px}.galerie__fig{flex-basis:calc(var(--r) * 112px)}.galerie__fig figcaption{font-size:12px;margin-top:6px}}
.galerie__num{font:500 10px/1 var(--sans);letter-spacing:.14em;color:var(--sauge-f);margin-right:6px}

/* ---------------------------------------------------------------- contact: the last stretch, drawn */
.trajet__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.trajet__plan{margin:0;background:var(--papier);border:1px solid var(--filet)}
.trajet__svg{display:block;width:100%;height:auto;overflow:visible}
.trajet__avenue{fill:none;stroke:var(--encre);stroke-opacity:.55;stroke-width:1.2}
.trajet__rue{font:italic 400 15px var(--display);fill:var(--gris)}
.trajet__pointilles{fill:none;stroke:var(--cobalt);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 9}
.js .trajet__revele{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;transition:stroke-dashoffset 2.4s var(--trace) .2s}
.js [data-trajet].vu .trajet__revele{stroke-dashoffset:0}
.trajet__taxi circle{fill:var(--chaux);stroke:var(--encre);stroke-width:1}
.trajet__taxi path,.trajet__pieton path{fill:none;stroke:var(--encre);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.trajet__pieton circle{fill:var(--encre)}
.trajet__porte path{fill:var(--cobalt)}
.trajet__lab{font:400 13px var(--sans);fill:var(--gris)}
.trajet__lab--fort{font:400 17px var(--display);fill:var(--encre)}
.trajet__nord path{fill:var(--sauge-f)}
.trajet__nord text{font:500 10px var(--sans);fill:var(--sauge-f);letter-spacing:.1em}
.trajet__etapes{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.trajet__etapes li{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--filet)}
.trajet__n{font:italic 400 18px/1.4 var(--display);color:var(--sauge-f)}
.trajet__t{font:400 20px/1.3 var(--display)!important;color:var(--encre);margin:0 0 4px!important}
.trajet__etapes p{margin:0;font-size:15px;line-height:1.6}
.faq{margin-top:clamp(48px,6vw,80px)}
.faq__titre,.faq details{max-width:860px}
.faq__titre{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f);margin:0 0 14px}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-child{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font:400 20px/1.3 var(--display);color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px/1 var(--sans);color:var(--sauge-f);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;max-width:62ch}
@media (max-width:900px){.trajet__grille{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- booking window (.rsv), booking-modal.md */
.rsv{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rsv[hidden]{display:none}
.rsv__backdrop{position:fixed;inset:0;background:rgba(17,21,15,.72)}
.rsv__card{position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr);
  width:min(980px,calc(100vw - 40px));margin:auto;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow:hidden;background:var(--chaux);color:var(--texte)}
.rsv__aside{min-height:0;overflow-y:auto;position:relative;background:var(--nuit);color:#DCE0D2;display:flex;flex-direction:column}
.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__photo{height:46%;min-height:180px;overflow:hidden;-webkit-mask:url(assets/arche.svg) center top/100% auto no-repeat;mask:url(assets/arche.svg) center top/100% auto no-repeat;margin:28px 28px 0}
.rsv__photo img{width:100%;height:100%;object-fit:cover}
.rsv__aside-in{padding:24px 32px 32px}
.rsv__aside .plume{color:var(--sauge-c);margin-bottom:10px}
.rsv__script{font-size:52px;color:#EFEADC}
.rsv__intro{font-size:14.5px;line-height:1.65;color:#C6CDBB;margin:12px 0 0}
.rsv__fermer{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:var(--chaux);border:1px solid var(--filet);cursor:pointer}
.rsv__fermer svg{width:18px;height:18px;fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linecap:round}
.rsv__titre{font:400 30px/1.1 var(--display);color:var(--encre);margin:0 48px 24px 0}
.rsv__etape{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f);margin:0 0 12px;display:flex;justify-content:space-between;gap:12px}
.rsv__etape span{letter-spacing:.06em;text-transform:none;color:var(--gris);font-weight:400;font-size:12.5px}
.rsv__bloc{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--filet)}
.rsv__deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rsv__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rsv__field label{font-size:13px;color:var(--gris)}
.rsv__field input[type="date"]{-webkit-appearance:none;appearance:none;min-height:48px;line-height:1.3;padding:0 14px;background:var(--papier);border:1px solid var(--filet);border-radius:0;font:400 17px var(--display);color:var(--encre);width:100%;min-width: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__nuits{font:italic 400 16px var(--display);color:var(--sauge-f);margin:10px 0 0;min-height:1.4em}
.rsv__nuits + .rsv__etape{margin-top:20px}
.rsv__voy{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.rsv__voy + .rsv__voy{border-top:1px solid var(--filet)}
.rsv__voy-nom{font-size:15px;color:var(--encre)}
.qte{display:inline-flex;align-items:center;border:1px solid var(--filet);background:var(--papier)}
.qte button{width:42px;height:42px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--encre);font:400 20px/1 var(--display)}
.qte button:disabled{color:#b9bdb1;cursor:default}
.qte output{min-width:30px;text-align:center;font:400 18px/1 var(--display);color:var(--encre)}
.rsv__chambres{display:grid;gap:0;border-top:1px solid var(--filet)}
.rsv__ch{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--filet)}
.rsv__ch img{width:64px;height:48px;object-fit:cover}
.rsv__ch-nom{font:400 17px/1.2 var(--display);color:var(--encre);margin:0}
.rsv__ch-det{font-size:12.5px;line-height:1.4;color:var(--gris);margin:3px 0 0}
.rsv__ch-det b{font-weight:500;color:var(--encre)}
.rsv__ch.on{background:linear-gradient(to right,rgba(75,94,67,.08),transparent)}
.rsv__egal{display:flex;align-items:center;gap:12px;padding:14px 0 0;font-size:14.5px;cursor:pointer}
.rsv__egal input{width:20px;height:20px;accent-color:var(--sauge-f)}
.rsv__compte{font-size:13px;color:var(--gris);margin:10px 0 0;min-height:1.3em}
.rsv__navette{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;cursor:pointer;margin:0 0 14px}
.rsv__navette input{width:20px;height:20px;margin-top:2px;accent-color:var(--sauge-f)}
.rsv__msg{width:100%;min-height:84px;padding:12px 14px;border:1px solid var(--filet);background:var(--papier);font-size:16px;resize:vertical;border-radius:0}
.rsv__av{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.rsv__av li{display:grid;grid-template-columns:22px 70px 1fr;gap:8px;align-items:baseline;padding:9px 12px;border:1px solid var(--filet);font-size:13.5px;line-height:1.45;color:var(--gris);transition:background .3s,border-color .3s,color .3s}
.rsv__av li::before{content:"";width:12px;height:12px;border:1px solid var(--sauge);align-self:center}
.rsv__av li b{font:italic 400 15px var(--display);color:var(--sauge-f)}
.rsv__av li.on{background:rgba(75,94,67,.08);border-color:var(--sauge-f);color:var(--encre)}
.rsv__av li.on::before{background:var(--sauge-f);border-color:var(--sauge-f)}
.rsv__av-phrase{font:italic 400 16px/1.45 var(--display);color:var(--sauge-f);margin:0;min-height:1.4em}
.rsv__nom{font:400 13px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-c);margin:0 0 6px}
.rsv__estim{font:400 19px/1.4 var(--display);color:var(--encre);margin:0 0 16px}
.rsv__estim small{display:block;font:400 13px/1.5 var(--sans);color:var(--gris)}
.rsv__comment{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-f);margin:0 0 12px}
.rsv__envoi{display:flex;flex-wrap:wrap;gap:10px}
.rsv__envoi .btn{flex:1 1 200px;min-width:0}
.rsv__envoi .btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.rsv__hint{font-size:13.5px;color:#6A4F38;margin:12px 0 0;min-height:1.3em}
.rsv__hint.ok{color:var(--sauge-f)}
.rsv__note{font-size:12.5px;line-height:1.6;color:var(--gris);margin:16px 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{flex-direction:row;align-items:center}
  .rsv__photo{display:none}
  .rsv__aside-in{padding:18px 24px}
  .rsv__aside .plume{display:none}
  .rsv__script{font-size:40px}
  .rsv__intro{display:none}
}
@media (max-width:680px){
  .rsv{padding:0}
  .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);width:100vw;margin:0;
    height:100vh;max-height:100vh;height:100dvh;max-height:100dvh}
  .rsv__body{padding:24px 18px 28px}
  .rsv__titre{font-size:25px}
  .rsv__ch{grid-template-columns:52px 1fr auto;gap:10px}
  .rsv__ch img{width:52px;height:40px}
  .qte button{width:38px;height:40px}
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__diapo{display:none}
  .hero__plume path,.js .plume--trace,.js .rosace path,.js .rosace circle,.js .arche-photo__trait path,.js .resa__arche path{stroke-dashoffset:0!important}
  .hero__filet{transform:none}
}