@font-face{font-family:'Caveat Brush';src:url(caveat-brush-latin-400-normal.woff2)}
@font-face{font-family:'Jost';font-weight:400;src:url(jost-latin-400-normal.woff2)}
@font-face{font-family:'Jost';font-weight:500;src:url(jost-latin-500-normal.woff2)}
@font-face{font-family:'Jost';font-weight:600;src:url(jost-latin-600-normal.woff2)}
@font-face{font-family:'Carlito';font-weight:400;src:url(carlito-latin-400-normal.woff2)}
@font-face{font-family:'Carlito';font-weight:400;font-style:italic;src:url(carlito-latin-400-italic.woff2)}
@font-face{font-family:'Carlito';font-weight:700;src:url(carlito-latin-700-normal.woff2)}


/* Layout: ochre hero and footer bookend paper and charcoal bands joined by organic waves; photos in rock shapes alternate left/right */
:root{
  --paper:#efeeea; --ochre:#7f530d; --char:#2d2a26; --char2:#38342f; --gold:#d6b863; --terra:#c4652f;
  --ink:#2d2a26; --ink2:#6a645a; --cream:#f4efe4; --sand:#ead9b6; --ondark:#d3ccbf; --mute:#a59d8f; --line:#d9d2c3;
  --f-title:'Caveat Brush','Segoe Print',cursive;
  --f-ui:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --f-text:'Carlito','Calibri','Segoe UI',system-ui,sans-serif;
  --tight:14px; --el:24px; --block:64px; --sec:112px; --wave:100px; --gap-col:112px;
  --gutter:max(24px, env(safe-area-inset-left, 0px));
  color-scheme:only light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper) url("papier.jpg");background-size:640px;color:var(--ink);font:400 17px/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
body:not(.en) [data-l="en"],body.en [data-l="fr"],body.de [data-l="fr"],body:not(.de) [data-l="de"]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
h2,h3{margin:0;text-wrap:balance}
h2{font:400 46px/1.05 var(--f-title);letter-spacing:.01em}
h3{font:500 19px/1.3 var(--f-ui);letter-spacing:.02em}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));position:relative}
.label{font:500 12px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase}
.stack{display:flex;flex-direction:column;gap:var(--el);min-width:0}
.lead{color:var(--ink2);max-width:52ch}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}
.nw{white-space:nowrap}

/* buttons: one organic style everywhere */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 22px;font:500 15px/1 var(--f-ui);letter-spacing:.04em;color:var(--ink);background:transparent;border:1.5px solid var(--ink);
  border-radius:26px 18px 24px 16px/18px 24px 16px 22px;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn{white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover,.btn:focus-visible,.btn.solid{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.btn:hover{transform:translateY(-1px)}
.dark .btn,.foot .btn{color:var(--cream);border-color:#8a8274}
.foot .btn{border-color:#e8d6b0}
.foot .btn.solid,.foot .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--char)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper) url("papier.jpg");background-size:640px;transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 6px 20px -14px rgba(40,30,10,.5)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav .l{display:flex;align-items:center;gap:40px}
.nav .l>a:first-child img{width:34px}
.nav .links{display:flex;gap:8px}
.nav .links a{color:var(--ink2);text-decoration:none;padding:10px 14px;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;transition:color .25s,background .25s}
.nav .links a.on{color:var(--ink)}
.nav .links a:hover{color:#fff;background:var(--terra)}
.nav .r{display:flex;align-items:center;gap:14px}
/* local time + weather: a quiet organic pill beside the languages, opens the forecast */
.lt{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;font:500 13px/1 var(--f-ui);letter-spacing:.04em;color:var(--ink2);text-decoration:none;white-space:nowrap;
  border:1.5px solid var(--line);border-radius:26px 18px 24px 16px/18px 24px 16px 22px;transition:background .25s,color .25s,border-color .25s}
.lt .sun,.lt .wx svg{width:19px;height:19px;flex:none;color:var(--terra);display:block}
.wx{display:grid;place-items:center}
.lt-c{color:var(--ink);font-variant-numeric:tabular-nums}
.lt-c:not([hidden])+.lt-h{padding-left:9px;border-left:1px solid var(--line)}
.wx .wcl{fill:var(--paper);stroke:currentColor}
.wx .drift{animation:drift 6s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px)}}
.wx .bolt{animation:bolt 3s steps(1) infinite}
@keyframes bolt{0%,70%,100%{opacity:1}75%,85%{opacity:.2}}
.lt .sun .rays{transform-origin:12px 12px;transform-box:view-box;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lt-h{color:var(--ink);font-variant-numeric:tabular-nums}
.lt-w{padding-left:9px;border-left:1px solid var(--line)}
.lt .ar{width:11px;height:11px;margin-left:-2px}
.lt:hover{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.lt:hover .lt-h,.lt:hover .lt-c,.lt:hover .wx svg{color:var(--cream)}
.lt:hover .wx .wcl{fill:var(--terra)}
.lt:hover .lt-c:not([hidden])+.lt-h{border-color:rgba(244,239,228,.4)}
.lt:hover .lt-w{border-color:rgba(244,239,228,.4)}
.lang{--p:0;position:relative;display:flex;padding:3px}
.lang i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(33.333% - 2px);background:var(--ink);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transform:translateX(calc(var(--p)*100%))}
.lang button{all:unset;position:relative;width:38px;text-align:center;padding:9px 0;cursor:pointer;color:var(--ink2);transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--cream)}
.lang button:focus-visible{outline:2px solid var(--terra)}
.burger{all:unset;display:none;place-items:center;width:46px;height:46px;cursor:pointer}
.burger img{width:30px;transform:rotate(-28deg) translateY(1px)}

/* menu (phone) */
.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--char);color:var(--cream);overflow:hidden;
  padding:calc(15px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);visibility:hidden}
body.menu-open .menu{transform:none;visibility:visible}
.mtop{display:flex;justify-content:space-between;align-items:center;height:46px}
.mtop img{width:34px}
.mclose{all:unset;display:grid;place-items:center;width:46px;height:46px;border:1px solid #5d564c;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;cursor:pointer}
.mclose svg{width:26px;height:26px}
.menu ol{list-style:none;margin:56px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;position:relative;z-index:1}
.menu ol a{font:400 40px/1.1 var(--f-title);color:#d8d0c0;text-decoration:none}
.menu ol a.on{color:var(--gold)}
/* shapes live in their own band between the links and the contacts, so they never cover text */
.mdeco{flex:1;min-height:0;position:relative;margin:24px calc(-1*max(24px,env(safe-area-inset-right,0px))) 24px calc(-1*max(24px,env(safe-area-inset-left,0px)));overflow:hidden;pointer-events:none}
.mrose{position:absolute;right:-70px;top:4%;height:min(200px,58%);width:auto;opacity:.85;transform:rotate(18deg)}
.msand{position:absolute;left:-110px;bottom:2%;height:min(190px,52%);width:auto;opacity:.85;transform:rotate(-12deg)}
.mfoot{position:relative;z-index:1;color:#a59d8f;font-size:11px;line-height:1.9;display:flex;flex-direction:column;gap:12px}
.mfoot .cl{font:500 15px/1.3 var(--f-ui);letter-spacing:.02em;text-transform:none;color:var(--cream)}

/* hero */
.hero{background:var(--ochre);color:var(--cream)}
.hero-in{max-width:1040px;display:grid;grid-template-columns:1fr 470px;gap:var(--block);align-items:center;padding-block:96px 10px}
.hero .txt{display:flex;flex-direction:column;gap:var(--tight)}
.hero .wm{width:400px;animation:rise 1s .1s both}
.hero .txt .label{color:var(--gold)}
/* arrival hours next to the section title: same handwritten face, smaller, on the title's baseline */
h2 .hh{font:400 .62em/1 var(--f-title);letter-spacing:.01em;white-space:nowrap;vertical-align:baseline}
/* a warm thank-you after the check-out list, in the colour of the plant beside the photo; space above mirrors the space between "Avant de partir" and the list */
.thanks{font:400 34px/1 var(--f-title);color:#8c675d;margin-top:20px}
/* "Livret d'accueil" sits above the wordmark, spread to exactly its width (letter-spacing set by script) */
.hero .txt .kick{width:400px;font-size:22px;line-height:1;white-space:nowrap;animation:rise 1s .1s both}
.hero .txt .kick>span{display:inline-block}
.hero .place,.hero .hours{font:500 16px/1.4 var(--f-ui);letter-spacing:.02em;color:var(--sand)}
.hero .hours{margin-top:-8px}
.hero .photo{position:relative;height:400px;animation:rise 1.1s .25s both}
.hero .photo .clip{filter:drop-shadow(0 24px 40px rgba(40,25,5,.35))}
.hero .squig{position:absolute;left:-62px;top:-34px;width:190px;z-index:3;transform:rotate(-6deg);filter:drop-shadow(0 6px 10px rgba(30,20,5,.25))}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
.wv{display:block;width:100%;height:var(--wave)}
.hero-wave{height:clamp(70px,11vw,170px);margin-top:-1px}

/* photo clips */
@property --s{syntax:'<number>';inherits:false;initial-value:1}
.clip{position:relative;width:100%;height:100%;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.clip .in{position:absolute;inset:0}
.clip img.ph{position:absolute;left:-7%;top:-12%;width:114%;max-width:none;height:124%;object-fit:cover;will-change:transform;transform:translateY(var(--py,0%)) scale(var(--s));transition:--s 1s cubic-bezier(.2,.75,.2,1)}
/* photo reveal: the photo never moves; only the rock-shaped mask around it opens on hover, and never beyond its own box */
@media (hover:hover) and (pointer:fine){
  .zm{cursor:none}
  /* the masked layer is 10% larger than the photo box: at rest the mask (90.91%) draws exactly the original shape, on hover it opens to 100% over photo that already extends past it */
  .zm .clip .in{inset:-5%;-webkit-mask-size:90.91% 90.91%;mask-size:90.91% 90.91%;transition:-webkit-mask-size .7s cubic-bezier(.2,.75,.2,1),mask-size .7s cubic-bezier(.2,.75,.2,1)}
  .zm:hover .clip .in{-webkit-mask-size:100% 100%;mask-size:100% 100%}
  .zm .clip img.ph{left:-1.818%;top:-6.364%;width:103.64%;height:112.73%}
  .house .duo{column-gap:40px}
  .cur{position:fixed;left:0;top:0;z-index:90;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;pointer-events:none;
    border:2px solid #fff;background:rgba(255,255,255,.16);box-shadow:0 6px 20px -6px rgba(0,0,0,.35);
    display:grid;place-items:center;transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .25s}
  .cur::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
  .cur.on{transform:scale(1);opacity:1}
}
.cur{display:none}
/* photo viewer: the photo comes forward over the page, close with the drawn cross */

.lb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(29,24,18,.86);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.lb.on{opacity:1;visibility:visible;transition:opacity .4s ease}
.lbf{position:relative;margin:0;display:inline-block;max-width:min(1200px,100%);transform:scale(.96);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lb.on .lbf{transform:none}
.lb img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:34px 52px 30px 46px/44px 30px 50px 34px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb .lbx{position:absolute;top:14px;right:14px;background:rgba(29,24,18,.55);border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.lb .lbx:hover{background:var(--terra);border-color:var(--terra)}
.lb .lbx:hover path{fill:#fff}
.lbn{all:unset;cursor:pointer;position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;display:none;place-items:center;color:#fff;background:rgba(29,24,18,.5);border:1.5px solid rgba(255,255,255,.45);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;backdrop-filter:blur(4px);transition:background .25s,border-color .25s}
.lbn svg{width:22px;height:22px}.lbn.prev{left:14px}.lbn.next{right:14px}
.lbn:hover{background:var(--terra);border-color:var(--terra)}
.lbn:focus-visible,.lbx:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lb.multi .lbn{display:grid}
@media (hover:hover) and (pointer:fine){.cur{display:grid}}
.r1{--rk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.12 .10C.24 .02 .44 .00 .62 .03C.80 .06 .95 .14 .98 .32C1 .48 .97 .60 .99 .74C1 .88 .90 .98 .72 .99C.54 1 .36 .97 .20 .93C.06 .89 .00 .76 .01 .58C.02 .42 .00 .30 .03 .22C.05 .16 .08 .12 .12 .10Z'/%3E%3C/svg%3E")} .r2{--rk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.20 .04C.36 -.01 .58 .02 .76 .06C.90 .10 .99 .22 .97 .40C.95 .56 .99 .72 .93 .86C.87 .97 .70 1 .50 .98C.32 .96 .14 .98 .05 .84C-.02 .72 .02 .56 .01 .42C0 .26 .06 .09 .20 .04Z'/%3E%3C/svg%3E")}
.r1 .in,.r2 .in{-webkit-mask-image:var(--rk);mask-image:var(--rk);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.deco{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.edge{position:absolute;pointer-events:none;z-index:0}

/* section grids */
.sec{display:grid;gap:var(--gap-col);align-items:center;padding-block:var(--sec)}
.sec.pl{grid-template-columns:480px 1fr}
.sec.pr{grid-template-columns:1fr 480px}
.photo-box{position:relative;height:480px}
.note{display:flex;gap:16px;padding:24px;background:rgba(214,184,99,.16);border-radius:28px 60px 34px 22px/30px 26px 52px 30px;max-width:540px}
.note p{color:var(--ink2)}
.note b{display:block;font:500 17px/1.3 var(--f-ui);color:var(--ink);margin-bottom:4px}
.note a:not(.btn){color:var(--terra);font-weight:700}
.ico{width:52px;height:52px;flex:none;display:grid;place-items:center;border:1.5px solid #d3b9a5;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;color:var(--terra)}
.ico svg{width:24px;height:24px}
.note .ico{width:44px;height:44px;border-color:#d8c48a;color:#a8862c}

/* dark bands */
.dark{background:var(--char);color:var(--cream)}
.dark .lead,.dark .item p{color:var(--ondark)}
.dark .ico{border-color:rgba(214,184,99,.5);color:var(--gold)}
.house{display:flex;flex-direction:column;gap:var(--block);padding-block:var(--sec)}
.hhead{max-width:620px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.duo>div{position:relative;height:400px}
.duo .rose{width:150px;right:-50px;bottom:-30px}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 64px}
.item,.rules li{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.item h3,.rules h3{margin-bottom:10px}
.item p,.rules p{color:var(--ink2);line-height:1.65}
.ask{font:500 17px/1.4 var(--f-ui);letter-spacing:.02em;color:var(--sand)}
.ask a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:4px}
/* LED icon: brightness rises and falls */
.a-led .rays{transform-origin:12px 12px;animation:led 3.2s ease-in-out infinite}
.a-led .core{animation:ledc 3.2s ease-in-out infinite}
/* living icons: each one acts out its subject, slowly */
.ico svg *{transform-box:fill-box}
.a-dots .dg{transform-origin:center;animation:dotOn 3.6s ease-in-out infinite}
.a-dots .dr{transform-origin:center;animation:dotOn 3.6s ease-in-out infinite 1.8s}
@keyframes dotOn{0%,100%{transform:scale(.8);opacity:.45}20%,40%{transform:scale(1.18);opacity:1}55%{transform:scale(.8);opacity:.45}}
.a-drop .dp{transform-origin:50% 100%;animation:dropB 3s cubic-bezier(.5,0,.5,1) infinite}
.a-drop .rp{transform-origin:center;animation:ripple 3s ease-out infinite}
@keyframes dropB{0%{transform:translateY(-3px) scale(.92,1.06)}38%{transform:translateY(0) scale(1)}46%{transform:translateY(0) scale(1.08,.9)}56%,100%{transform:none}}
@keyframes ripple{0%,38%{transform:scaleX(.3);opacity:0}48%{opacity:1}85%,100%{transform:scaleX(1.25);opacity:0}}
.a-micro .win{fill:currentColor;animation:heat 3.4s ease-in-out infinite}
@keyframes heat{0%,100%{fill-opacity:0}50%{fill-opacity:.32}}
.st{animation:steam 2.8s ease-out infinite}.st.s2{animation-delay:1.4s}
@keyframes steam{0%{transform:translateY(2px);opacity:0}35%{opacity:1}100%{transform:translateY(-2.5px);opacity:0}}
.a-iron .glide{animation:glide 3.2s ease-in-out infinite}
@keyframes glide{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1.2px)}}
.a-lock .shk{animation:unlock 4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes unlock{0%,30%,85%,100%{transform:none}45%,70%{transform:translateY(-2.4px)}}
.fall{animation:fall 1.6s linear infinite}.fall.f2{animation-delay:.55s}.fall.f3{animation-delay:1.1s}
@keyframes fall{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}100%{transform:translateY(3px);opacity:0}}
.a-gate .lf{transform-origin:0% 50%;animation:gateL 4.4s cubic-bezier(.5,0,.3,1) infinite}
.a-gate .rt{transform-origin:100% 50%;animation:gateL 4.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes gateL{0%,15%{transform:scaleX(.25)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.25)}}
.sm{animation:smoke 3.2s ease-out infinite}.sm.s2{animation-delay:1.6s}
@keyframes smoke{0%{transform:translateY(2px) scaleY(.7);opacity:0}30%{opacity:1}100%{transform:translate(1px,-3px) scaleY(1.1);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes led{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ledc{0%,100%{fill:transparent}50%{fill:currentColor}}

/* pool */
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--el)}
.rules p{max-width:430px}
.pool-box{height:560px}
.pool-box .plant{width:170px;left:-70px;bottom:-40px;transform:rotate(-14deg)}
.edge.jaune{right:-300px;top:150px;width:310px}

/* map */
.map-head{max-width:620px;padding-block:var(--sec) var(--block)}
.atlas{display:grid;grid-template-columns:minmax(0,780px) minmax(0,1fr);gap:var(--block);align-items:start}
.mwrap{position:relative;min-width:0}
.mshape{position:absolute;left:-92px;bottom:-34px;width:190px;z-index:3;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.mframe{position:relative;z-index:1;height:690px;overflow:hidden;border-radius:96px 40px 110px 56px/64px 70px 56px 92px;background:#a6c1bc;touch-action:pan-x pan-y;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate}
.mframe.drag{cursor:grabbing}
.mframe svg.vmap{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.mframe::after{content:"";position:absolute;inset:0;background:url("papier.jpg");background-size:520px;mix-blend-mode:multiply;opacity:.4;pointer-events:none;z-index:1}
.mover{position:absolute;inset:0;z-index:2;pointer-events:none}
.mhint{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:none;background:rgba(29,24,18,.45);opacity:0;transition:opacity .35s}
.mhint span{font:500 16px/1.4 var(--f-ui);letter-spacing:.02em;color:#fff;background:rgba(29,24,18,.75);padding:14px 20px;border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
.mhint.on{opacity:1}
.mlbl{position:absolute;transform:translate(-50%,-50%);font:500 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#2f3a26;white-space:nowrap;text-shadow:0 0 6px rgba(239,238,234,.7)}
.mlbl.isl{font:italic 17px/1 var(--f-text);letter-spacing:.04em;text-transform:none}
.mlbl.sea{font:italic 14px/1 var(--f-text);letter-spacing:.32em;color:#55706b;text-shadow:none}
.mlbl.peak{font:500 10px/1 var(--f-ui);letter-spacing:.12em;color:#eef0e4;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pin{all:unset;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:40px;height:40px;display:grid;place-items:center;background:var(--cream);color:var(--terra);cursor:pointer;
  border-radius:58% 42% 52% 48%/48% 56% 44% 52%;box-shadow:0 6px 14px -4px rgba(30,25,10,.45);transition:transform .2s,background .2s,color .2s}
.pin svg{width:20px;height:20px}
.pin:hover,.pin.on{background:var(--terra);color:var(--cream);transform:translate(-50%,-50%) scale(1.1);z-index:3}
.pin:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.pin.home{width:54px;height:54px;background:var(--cream)}
.pin.home img{width:42px}
.pin i{position:absolute;right:-12px;top:-8px;font:500 11px/20px var(--f-ui);font-style:normal;padding:0 7px;border-radius:99px;background:var(--terra);color:var(--cream)}
.pin.on i,.pin:hover i{background:var(--char)}
.mctrl{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;gap:8px;z-index:4}
.mctrl button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;background:var(--cream);color:var(--ink);font:500 20px/1 var(--f-ui);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.mctrl button:hover{background:#fff}
.mctrl button:focus-visible{outline:2px solid var(--terra)}
.gcard{position:absolute;z-index:6;width:300px;background:var(--cream);color:var(--ink);padding:22px 22px 20px;border-radius:30px 44px 28px 40px/40px 28px 44px 30px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;pointer-events:auto;cursor:auto}
.gcard .label{color:var(--terra);font-size:11px;line-height:1.4}
.gcard h3{margin:2px 0 0;font-size:20px}
.gcard p{font-size:15px;line-height:1.5;color:var(--ink2)}
.gcard .hrs{font:500 13px/1.4 var(--f-ui);color:var(--ink)}
.gcard .glinks{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gcard .btn{min-height:36px;padding:8px 14px;font-size:13px;color:var(--ink);border-color:var(--ink)}
.gcard .btn.solid,.gcard .btn:hover{color:var(--cream);border-color:var(--terra)}
.gcard ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.gcard li button{all:unset;cursor:pointer;display:block;padding:9px 0;border-bottom:1px solid var(--line);font:500 15px/1.3 var(--f-ui);width:100%}
.gcard li button:hover{color:var(--terra)}
.gx{all:unset;position:absolute;right:12px;top:12px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;color:var(--ink2);border-radius:50%}
.gx:hover{background:var(--line)}
.side{display:flex;flex-direction:column;gap:var(--el);min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{all:unset;cursor:pointer;padding:9px 16px;font:500 13px/1 var(--f-ui);letter-spacing:.04em;color:#cfc7b8;border:1.5px solid #5d564c;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;transition:all .2s}
.chip:hover{border-color:var(--cream);color:var(--cream)}
.chip[aria-pressed="true"]{background:var(--cream);color:var(--char);border-color:var(--cream)}
.chip:focus-visible{outline:2px solid var(--gold)}
.chip .cnt{font-variant-numeric:tabular-nums;opacity:.75}
.plist{list-style:none;margin:-8px 0 0 -10px;padding:8px 10px 0 10px;display:flex;flex-direction:column;max-height:430px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(214,184,99,.55) transparent}
.plist::-webkit-scrollbar{width:6px}.plist::-webkit-scrollbar-thumb{background:rgba(214,184,99,.55);border-radius:6px}.plist::-webkit-scrollbar-track{background:transparent}
.plist.fade{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.plist li{flex:none}
.plist button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:14px 0;border-bottom:1px solid #45403a}
.plist b{display:block;font:500 17px/1.3 var(--f-ui);color:var(--cream);transition:color .2s}
.plist span{display:block;font-size:16px;color:#b3ab9d;margin-top:4px}
.plist button:hover b,.plist button.on b{color:var(--gold)}
.plist button:focus-visible{outline:2px solid var(--gold)}
.side .more{align-self:flex-start}
.nearwrap{display:flex;flex-direction:column;gap:var(--el);padding-block:var(--block) var(--sec)}
.nearlabel{color:var(--gold)}
.near{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--block)}
.near h3{color:var(--cream);margin-bottom:10px;transition:color .25s}
.nl{display:block;text-decoration:none;color:inherit}
.nl h3{transition:color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.nl:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:12px}
.nt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tight);min-width:0}
.note .cl{color:var(--terra);font-size:15px;font-weight:600}
.note .cl svg{width:28px;height:28px;background:var(--terra);color:var(--cream)}
.note a.cl>span::after{background:var(--terra)}
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.ask a.cl{color:var(--cream)}
.near p{color:var(--ondark)}
/* "explore further": italic invitation and its button share one tinted card, like the arrival note */
.explore{margin-top:40px;max-width:520px;background:rgba(214,184,99,.12)}
.explore .xs{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--tight);padding-top:4px}
.explore .further{color:var(--ondark);font-style:italic}
.xbtn{font-weight:500!important;white-space:normal;text-align:left;font-style:italic;color:var(--gold)!important;border-color:rgba(214,184,99,.6)!important}
.xbtn:hover{color:var(--char)!important;background:var(--gold)!important;border-color:var(--gold)!important}

/* departure */
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:400px}
.check label{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--ink2);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.check input:checked{background:var(--terra);border-color:var(--terra)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input:checked+span{text-decoration:line-through;text-decoration-color:#b5ad9c}
.dep-box{height:600px}
.dep-box .plant{width:170px;left:-80px;bottom:-30px;transform:rotate(8deg)}

/* footer */
.foot{background:var(--ochre);color:var(--cream)}
.foot .sec{padding-block:var(--sec) var(--block)}
.foot .wm{width:260px}
.fstack{gap:40px}
.lines{display:flex;flex-direction:column;gap:14px}
.lines>span{font:500 16px/1.4 var(--f-ui);letter-spacing:.02em;color:var(--sand)}
.lines>span.label{font:500 12px/1 var(--f-ui)}

.lines .label{font:500 12px/1 var(--f-ui);letter-spacing:.22em;color:var(--gold)}
.foot-box{height:520px}
.edge.rose{right:-330px;top:120px;width:300px}
.fbar{display:flex;justify-content:space-between;gap:24px;padding-block:24px 64px;border-top:1px solid rgba(234,217,182,.25);font:500 13px/1.4 var(--f-ui);letter-spacing:.04em;color:#d8c49c}

/* reveal on scroll: transform only, so content is always readable */
.rv{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.pre{transform:translateY(34px)}

/* ---- clickable cues: no underline; accent colour + icon or arrow says "tap me"; on desktop an organic line draws in on hover ---- */
.note a:not(.btn),.ask a{text-decoration:none}
a.cl>span::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.35em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.3%2017.7C9.2%2014.9%2012.9%2010.9%2017.2%206.7%22/%3E%3Cpath%20d%3D%22M9.9%206.6C12.4%206.2%2014.9%206.3%2017.5%206.4C17.8%209%2017.6%2011.4%2017.3%2013.9%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.3%2017.7C9.2%2014.9%2012.9%2010.9%2017.2%206.7%22/%3E%3Cpath%20d%3D%22M9.9%206.6C12.4%206.2%2014.9%206.3%2017.5%206.4C17.8%209%2017.6%2011.4%2017.3%2013.9%22/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.cl{all:unset;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:500 16px/1.4 var(--f-ui);letter-spacing:.02em;color:var(--cream);position:relative;width:fit-content}
.cl svg{width:30px;height:30px;padding:6px;flex:none;color:var(--char);background:var(--gold);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
a.cl>span::after{background:var(--gold)}
.btn svg.ar{width:13px;height:13px;margin-left:-2px;stroke-width:1.9}
.cl:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.copy .addr{white-space:nowrap}
.copy .tip{display:inline-grid;place-items:center;color:var(--sand);transition:transform .25s}
.copy .tip svg{width:20px;height:20px;padding:0;background:none;color:inherit;border-radius:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.copy .tip.done,.copy.ok .tip:not(.done){display:none}
.copy.ok .tip.done{display:inline-grid;color:var(--gold)}
@media (hover:hover){.copy:hover .tip{transform:translateY(-2px)}}
.mfoot .cl svg{width:28px;height:28px}
@media (hover:hover){
  a.cl:hover>span::after{transform:translate(3px,-3px)}
  .cl:hover>svg{transform:rotate(-10deg) scale(1.1)}
  .plist b{transition:color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
  .plist button:hover b{transform:translateX(6px)}
  .nl:hover h3{color:var(--gold);transform:translateX(6px)}
}
/* Kalinao = "you are here", always in gold */
.pin.home{width:58px;height:58px;background:var(--gold);box-shadow:0 0 0 6px rgba(214,184,99,.35),0 8px 18px -4px rgba(30,25,10,.5);z-index:4}
.pin.home img{width:40px}
.pin.home:hover,.pin.home.on{background:var(--gold);color:var(--char)}
.pin.home::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);z-index:-1;animation:pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
.pin .here{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font:600 12px/1 var(--f-ui);letter-spacing:.02em;text-transform:none;color:var(--char);background:var(--gold);padding:7px 10px;border-radius:14px 10px 12px 9px/10px 13px 9px 12px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.plist button.here b{color:var(--gold)}
.plist button.here span{color:var(--gold);opacity:.9}
.plist button.here b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;background:var(--gold);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;box-shadow:0 0 0 4px rgba(214,184,99,.25);vertical-align:2px}
/* back to top, always reachable at bottom right */
.totop{position:fixed;z-index:70;right:max(20px,calc(env(safe-area-inset-right,0px) + 12px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:52px;height:52px;display:grid;place-items:center;color:var(--cream);background:var(--terra);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;box-shadow:0 10px 22px -8px rgba(30,20,5,.55);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.3,1.4,.5,1),background .2s}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:none;pointer-events:auto}
body.menu-open .totop{opacity:0;pointer-events:none}
.totop:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (hover:hover){.totop:hover{background:var(--gold);color:var(--char);transform:translateY(-3px) rotate(-8deg)}}

/* ---------- tablet & phone ---------- */
@media (max-width:860px){
  :root{--tight:19px;--el:46px;--block:46px;--sec:100px;--wave:60px;--gap-col:46px}
  h2,.lead,.note p,h3,.item p,.rules p,.near p,.check span,.thanks,.hero .label,.hero .place,.hero .hours,.lines>span,.ask{text-box:trim-both cap alphabetic}
  h2{font-size:40px}
  .nav .wrap{height:64px}
  .nav .r{gap:6px}
  .lt{height:36px;padding:0 10px 0 8px;gap:6px;font-size:12px}
  .lang button{width:32px}
  .lt .ar{width:10px;height:10px}
  .lt-c:not([hidden])+.lt-h{padding-left:6px}
  .nav .links{display:none}
  .burger{display:grid}
  .hero-in{grid-template-columns:1fr;gap:var(--el);padding-block:40px 0}
  .hero .wm{width:230px}
  .hero .txt .kick{width:230px;font-size:14px}
  .thanks{margin-top:var(--tight)}
  .hero .place,.hero .hours{font-size:15px}
  .hero .hours{margin-top:0}
  .hero .photo{height:300px}
  .hero .squig{left:auto;right:-14px;top:auto;bottom:-46px;width:130px}
  .hero-wave{margin-top:24px}
  .sec,.sec.pl,.sec.pr{display:flex;flex-direction:column;align-items:stretch}
  .sec .stack{display:contents}
  .sec h2{order:-3}.sec .lead{order:-2}.photo-box{order:-1}
  .photo-box,.pool-box,.dep-box,.foot-box{height:300px}
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--tight)}
  .btns .btn{padding:0 12px;min-height:46px;font-size:14px}
  .btns .btn:nth-child(3){grid-column:1/-1}
  .btns .btn{white-space:normal;text-align:center;line-height:1.2}
  .foot .btns{grid-template-columns:1fr}
  .cl{font-size:15px;gap:10px}
  .btns.one{grid-template-columns:1fr}
  .house{gap:var(--el)}
  .duo{gap:var(--tight)}.duo>div{height:230px}.duo .rose{width:80px;right:-20px;bottom:-18px}
  .items{grid-template-columns:1fr;gap:var(--el)}
  .item,.rules li{grid-template-columns:44px 1fr;gap:var(--tight)}
  .item .ico,.rules .ico{width:44px;height:44px}
  .item h3,.rules h3,.near h3{margin-bottom:var(--tight)}
  .ask{font-size:15px;line-height:1.6}
  .rules{gap:var(--el)}
  .pool-box .plant{width:96px;left:-28px;bottom:-26px}
  .edge.jaune{width:180px;right:-110px;top:auto;bottom:40px}
  .map-head{padding-block:var(--sec) var(--el)}
  .atlas{grid-template-columns:1fr;gap:var(--el)}
  .mframe{height:440px;border-radius:60px 28px 70px 36px/40px 44px 34px 56px}
  .mshape{width:96px;left:-34px;bottom:-22px}
  .mctrl{top:16px;right:16px}
  .gcard{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
  .plist button{padding:var(--tight) 0}
  .plist{max-height:380px}
  .plist span{margin-top:10px}
  .nearwrap{gap:var(--el);padding-block:var(--el) var(--sec)}
  .near{grid-template-columns:1fr;gap:var(--el)}
  .explore{margin-top:0;padding:20px}
  .explore .ico{width:44px;height:44px}
  .xbtn{min-height:44px;padding:0 18px;font-size:14px}
  .check{max-width:none}
  .check label{padding:var(--tight) 0}
  .dep-box .plant{width:96px;left:-30px;bottom:-24px}
  .foot .sec{padding-block:var(--sec) var(--el)}
  .foot .wm{width:200px}
  .fstack{gap:var(--el)}
  .lines{gap:var(--tight)}
  .edge.rose{display:none}
  .fbar{flex-direction:column;gap:var(--tight);padding-block:var(--el) var(--sec)}
}
@media (max-width:380px){
  .lt{padding:0 7px 0 5px;gap:4px;font-size:11.5px;letter-spacing:.02em}
  .lt .wx svg{width:17px;height:17px}
  .lt-c:not([hidden])+.lt-h{padding-left:4px}
  .lang button{width:28px}
  .nav .r{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv.pre{transform:none}
}

/* footer legal line + document sheets (same as the site) */
.foot .fbar{align-items:center;flex-wrap:wrap}
.foot .legal{display:flex;gap:22px;flex-wrap:wrap}
.foot .legal button{all:unset;cursor:pointer;color:inherit;transition:color .2s}
.foot .legal button:hover{color:var(--cream)}
.foot .legal button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
@media (max-width:860px){.foot .fbar{align-items:flex-start}.foot .legal{flex-direction:column;gap:12px}}
.doc{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.doc.on{opacity:1;visibility:visible;transition:opacity .35s}
.doc .dsheet{transform:translateY(16px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.doc.on .dsheet{transform:none}
.dsheet[hidden]{display:none!important}
.dx{all:unset;box-sizing:border-box;cursor:pointer}.dx:hover{background:var(--gold)}.dx:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dsheet .dk a{color:var(--gold)}
@media (max-width:860px){.dsheet{padding-top:calc(84px + env(safe-area-inset-top,0px));padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}.dx{top:calc(16px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}}

.doc{position:fixed;inset:0;z-index:300;background:rgba(32,28,24,.72);display:flex;align-items:center;justify-content:center;padding:32px}
.dsheet{position:relative;width:min(780px,100%);max-height:calc(100vh - 64px);overflow:auto;background:var(--char);color:var(--cream);
  border-radius:44px 30px 48px 34px/34px 48px 30px 44px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);padding:64px 64px 56px}
.dsheet .shape{position:absolute;right:-30px;top:-26px;width:170px;opacity:.95;transform:rotate(12deg);pointer-events:none}
.dx{position:sticky;top:0;float:right;margin:-34px -34px 0 0;z-index:3;width:52px;height:52px;display:grid;place-items:center;background:var(--cream);color:var(--char);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.dx svg{width:24px;height:24px}
.dk{display:flex;flex-direction:column;gap:28px;position:relative;z-index:1}
.dk .label{color:var(--gold)}
.dk h3{font:400 50px/1 var(--f-title);color:var(--cream);margin:0;padding-right:70px}
.dk .lead{font:italic 400 21px/1.6 var(--f-text);color:var(--sand);max-width:none}
.dk h4{margin:12px 0 0;font:500 13px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.dk p{font:400 17px/1.7 var(--f-text);color:var(--ondark);margin:0}
.fm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.fm li{display:grid;grid-template-columns:34px 1fr;gap:16px}
.fm .n{width:34px;height:34px;display:grid;place-items:center;font:600 14px/1 var(--f-ui);color:var(--char);background:var(--gold);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.fm b{display:block;font:500 18px/1.3 var(--f-ui);color:var(--cream);margin-bottom:6px}
.fm p{font-size:16px}
.fm .ex{display:block;margin-top:8px;font:400 15px/1.55 var(--f-text);color:#b9b0a1;padding-left:14px;border-left:1.5px solid rgba(214,184,99,.4)}
.nl2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nl2 li{position:relative;padding-left:22px;font:400 16px/1.6 var(--f-text);color:var(--ondark)}
.nl2 li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--terra);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.dnote{padding:20px 22px;background:rgba(214,184,99,.12);border-radius:26px 18px 24px 16px/18px 24px 16px 22px;font:500 16px/1.55 var(--f-ui)!important;color:var(--cream)!important}
.pol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pol li{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1.3px solid rgba(214,184,99,.4);border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
.pol span{font:500 12px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pol b{font:500 17px/1.4 var(--f-ui);color:var(--cream)}
.pol em{font:italic 400 15px/1.5 var(--f-text);color:#b9b0a1}
.fee{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fee li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 2px;border-bottom:1.3px solid rgba(234,217,182,.18)}
.fee li span{font:500 18px/1.35 var(--f-ui);color:var(--cream)}
.fee li b{font:400 34px/1 var(--f-title);color:var(--gold);white-space:nowrap}
.fee li b.fs{font:500 16px/1.35 var(--f-ui);text-align:right;white-space:nowrap}
.wa{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;padding:14px 22px 14px 16px;background:var(--gold);color:var(--char);text-decoration:none;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;transition:transform .25s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:26px;height:26px}
.wa span{font:600 16px/1 var(--f-ui)}
.wa small{font:500 14px/1 var(--f-ui);opacity:.75}
.dk .wa2{color:var(--gold);font-weight:600;font-size:16px}
.dk .wa2 svg{background:var(--gold);color:var(--char)}
.lg{display:flex;flex-direction:column;gap:26px}
.lg h4{margin:0 0 10px}
.lg a{color:var(--gold)}
.lg .todo{color:var(--terra);font-style:italic}
.pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:10px 16px;font:500 15px/1 var(--f-ui);color:var(--char);background:var(--sand);border-radius:20px 14px 18px 12px/14px 18px 12px 17px}
@media (max-width:860px){
  .doc{padding:0;align-items:stretch}
  .dsheet{max-height:none;height:100%;border-radius:0;padding:84px 24px 64px}
  .dx{position:fixed;top:16px;right:16px;margin:0;float:none}
  .dsheet .shape{width:110px;right:-24px;top:40px;opacity:.9}
  .dk h3{font-size:34px;padding-right:56px}.dk .lead{font-size:19px}
  .fee li b{font-size:28px}
  .wa{flex-wrap:wrap;gap:8px 12px}
  .dk .wa2{font:400 17px/1.5 var(--f-text);letter-spacing:0}
  .pol{grid-template-columns:1fr}
  .fee li b.fs{white-space:normal;max-width:18ch}
}


.nav{position:absolute;left:0;right:0;top:0;background:transparent;z-index:20}
.nav .links a,.nav .lang button{color:rgba(255,255,255,.9)}
.nav .lang i{background:rgba(255,255,255,.92)}.nav .lang button[aria-pressed="true"]{color:var(--ink)}
.lang i{width:calc(33.333% - 2px)}.lang button{width:38px}
.burger img{filter:brightness(0) invert(1)}
.nav .r .btn{min-height:40px;padding:8px 18px;font-size:14px}
/* hero: blurred-dark photo behind, the same family of rock shape as the booklet in front */
.h4{position:relative;color:#fff;background:var(--ochre);overflow-x:clip}
.bgw{position:absolute;inset:0;overflow:hidden}
.h4 .shade2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(127,83,13,0) 48%,rgba(127,83,13,.7) 74%,rgba(127,83,13,.9) 100%)}
.bk-d{margin:0 auto!important;padding-bottom:236px}
.bk-d .bar{box-shadow:none}
.bk-m{display:none}
.h4 .bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(2px);transform:scale(1.04)}
.h4 .shade{position:absolute;inset:0;background:linear-gradient(95deg,rgba(127,83,13,.95) 0%,rgba(127,83,13,.9) 34%,rgba(127,83,13,.55) 56%,rgba(127,83,13,.18) 80%,rgba(127,83,13,.1) 100%)}
.h4 .in{position:relative;z-index:2;max-width:1280px;margin:0 auto;height:100%;display:grid;grid-template-columns:1fr 680px;gap:56px;align-items:center;
  padding:124px max(24px,env(safe-area-inset-right)) 104px max(24px,env(safe-area-inset-left))}
.h4 .txt{display:flex;flex-direction:column;gap:var(--el)}
.h4 .label{color:#f5e6bd;font-weight:600;font-size:16px;letter-spacing:.2em;white-space:nowrap;align-self:flex-start;text-shadow:0 1px 10px rgba(70,40,0,.45)}
.h4 .tagl{color:var(--sand)!important}
.h4 .wm{width:420px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
.h4 .tagl{font:italic 400 21px/1.5 var(--f-text);max-width:none;white-space:nowrap;color:#f4efe4}
.front{position:relative;height:560px}
.front .clip{filter:drop-shadow(0 34px 44px rgba(90,60,20,.28))}
.front .squig{position:absolute;left:-58px;top:-38px;width:180px;z-index:3;transform:rotate(-6deg)}
.fctl{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 18px;pointer-events:none}.fctl .cbtn{pointer-events:auto}
.cbtn{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:background .3s,border-color .3s}
.dots{position:absolute;left:0;right:0;bottom:30px;z-index:4;display:flex;justify-content:center;gap:9px}
.dots i{width:10px;height:10px;border:1.4px solid rgba(255,255,255,.9);background:transparent;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dots i:nth-child(1){border-radius:58% 42% 52% 48%/48% 56% 44% 52%}.dots i:nth-child(2){border-radius:46% 54% 40% 60%/55% 45% 58% 42%}.dots i:nth-child(3){border-radius:62% 38% 55% 45%/42% 60% 40% 58%}.dots i:nth-child(4){border-radius:40% 60% 48% 52%/60% 40% 55% 45%}.dots i:nth-child(5){border-radius:55% 45% 62% 38%/45% 52% 48% 55%}.dots i:nth-child(6){border-radius:48% 52% 42% 58%/58% 44% 56% 42%}
.dots i.on{background:#fff;width:13px;height:13px;margin-top:-1.5px}
.mcur{position:absolute;z-index:5;width:22px;height:22px;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.25);pointer-events:none}
.cbtn:hover{background:rgba(255,255,255,.25);border-color:#fff}
.cbtn svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}.cbtn.solid{background:var(--terra);border-color:var(--terra)}
.count{font:500 14px/1 var(--f-ui);letter-spacing:.18em;color:#fff;padding:0 6px}.count b{font-weight:600;color:var(--gold)}
.wave4{position:absolute;left:0;right:0;bottom:-1px;height:150px;z-index:3}
/* booking bar, Shangri-La-like: two dates + nights, guests, one button */
.bk{position:relative;z-index:10;max-width:1060px;margin:-56px auto 0;padding-inline:max(24px,env(safe-area-inset-left))}
.bar{position:relative;display:flex;align-items:center;gap:10px;color:var(--ink);padding:12px;background:var(--cream);border-radius:34px 52px 30px 46px/44px 30px 50px 34px;box-shadow:0 26px 50px -26px rgba(70,45,10,.45),0 2px 0 rgba(255,255,255,.6) inset}
.bar .seg{flex:1 1 0}.bar .seg.gseg{flex:.9 1 0}
.ptag{position:absolute;right:12px;top:calc(100% + 12px);display:flex;align-items:baseline;gap:5px;padding:9px 16px;font:500 13px/1 var(--f-ui);color:var(--ink2);background:var(--cream);border-radius:20px 14px 18px 12px/14px 18px 12px 17px;box-shadow:0 12px 26px -16px rgba(70,45,10,.5)}
.ptag b{font:600 16px/1 var(--f-ui);color:var(--ink)}
.seg{position:relative;display:flex;align-items:center;gap:14px;padding:13px 20px;border:1.3px solid #cdbfa8;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;cursor:pointer;background:transparent}
.seg{transition:border-color .3s}.seg svg{transition:color .3s}
.seg:hover,.seg.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.seg:hover svg,.seg.on svg{color:var(--gold)}
.sep{width:14px;height:44px;color:#b9ae9b}
.seg svg{width:24px;height:24px;color:var(--ink2);flex:none}
.seg small{display:block;font:500 11px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.seg b{display:block;font:500 18px/1.1 var(--f-ui);color:var(--ink);white-space:nowrap}
.dates{display:flex;align-items:center;gap:16px}
.nights{font:500 12px/1 var(--f-ui);color:var(--ink2);letter-spacing:.04em;padding:6px 10px;border:1px solid #cbbfa9;border-radius:14px 10px 12px 9px/10px 13px 9px 12px;white-space:nowrap;transition:padding .3s}
.bar .btn.gold,.nav .btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700}
.bar .btn{min-height:68px;padding:0 36px;font-size:16px;border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
.bmeta{display:flex;justify-content:center;gap:26px;margin-top:14px;font:500 14px/1.4 var(--f-ui);color:var(--ink2)}
.bmeta b{color:var(--terra);font-weight:600}
/* calendar */
.calp{position:absolute;left:max(24px,env(safe-area-inset-left));top:calc(100% + 4px);z-index:12;width:820px;background:var(--cream);color:var(--ink);border-radius:30px 44px 28px 40px/40px 28px 44px 30px;box-shadow:0 40px 80px -30px rgba(45,30,10,.6);padding:26px 30px 22px}
.calhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.calhd .sum{font:500 16px/1.3 var(--f-ui)}.calhd .sum b{color:var(--terra)}
.calhd .navb{display:flex;gap:8px}.calhd .navb button{all:unset;width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;color:var(--ink)}
.calhd .navb svg{width:18px;height:18px}
.months{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.mo h4{margin:0 0 12px;font:400 26px/1 var(--f-title);text-align:center}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.grid7 span{height:42px;display:grid;place-items:center;font:500 15px/1 var(--f-ui);color:var(--ink)}
.grid7 .dow{height:26px;font-size:11px;letter-spacing:.14em;color:var(--mute)}
.grid7 .past{color:#cdc6b9;text-decoration:line-through;text-decoration-color:#cdc6b9}
.grid7 .rs{color:#b8ad9c;text-decoration:line-through;text-decoration-color:var(--terra);text-decoration-thickness:1.5px}
.legend{display:flex;gap:18px;align-items:center}.legend span{display:inline-flex;align-items:center;gap:8px}.legend i{width:14px;height:14px;display:inline-block;border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.grid7 .in{background:rgba(196,101,47,.12)}
.grid7 .d1,.grid7 .en{background:var(--terra);color:#fff;border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.grid7 .d1{box-shadow:none;position:relative}.grid7 .en{box-shadow:-21px 0 0 rgba(196,101,47,.12)}
.calft{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font:500 14px/1.4 var(--f-ui);color:var(--ink2)}
.calft .btn{min-height:44px;padding:0 24px}
.qchips{display:flex;gap:8px;flex-wrap:wrap}.qchip{all:unset;cursor:pointer;font:500 14px/1 var(--f-ui);padding:11px 16px;border:1.3px solid #cdbfa8;border-radius:22px 15px 20px 14px/15px 20px 14px 19px;color:var(--ink)}
.qchip.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:rgba(214,184,99,.18);color:var(--ink)}.qchip.off{color:#c3b9a8;border-color:#e2dacb;text-decoration:line-through}
.csum{display:flex;align-items:center;gap:16px;color:var(--ink2);white-space:nowrap}.csum b{color:var(--ink)}
.calhd .minn{font:600 15px/1 var(--f-ui);letter-spacing:.02em;color:var(--ink);padding:10px 16px;background:rgba(214,184,99,.22);border-radius:20px 14px 18px 12px/14px 18px 12px 17px}
/* guests popover */
.gp{position:absolute;right:calc(max(24px,env(safe-area-inset-left)) + 180px);top:calc(100% + 4px);z-index:12;width:330px;background:var(--cream);color:var(--ink);border-radius:30px 44px 28px 40px/40px 28px 44px 30px;box-shadow:0 40px 80px -30px rgba(45,30,10,.6);padding:22px 26px}
.gr{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.gr:last-of-type{border:0}
.gr b{display:block;font:500 16px/1.2 var(--f-ui)}.gr small{font:400 14px/1.3 var(--f-text);color:var(--ink2)}
.step{display:flex;align-items:center;gap:14px;font:500 16px/1 var(--f-ui)}
.step i{font-style:normal;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%}
.step i.off{color:#cfc8bb}
.gnote{font:400 13px/1.45 var(--f-text);color:var(--ink2);margin-top:8px}
@media (max-width:860px){
  .mcur{display:none}
  .nav .links,.nav .r .btn{display:none}.burger{display:grid}
  .h4{min-height:760px}
  .h4 .in{grid-template-columns:1fr;gap:28px;align-content:start;padding-top:96px;padding-bottom:150px}
  .h4 .wm{width:270px}.h4 .label{font-size:12px}.h4 .tagl{font-size:18px;white-space:normal;max-width:270px;text-wrap:pretty}.h4 .tagl .dk{display:none}
  .h4 .txt{gap:14px}
  .front{height:340px;order:2}
  .front .squig{left:auto;right:16px;top:-8px;bottom:auto;width:100px}
  .fctl{padding:0 10px}
  .cbtn{width:44px;height:44px}
  .wave4{height:80px}
  .bk{margin-top:-20px}
  .bk-d{display:none}.bk-m{display:block}.h4 .shade2{display:none}
  .h4 .in{padding-bottom:150px!important}
  .bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .bar .seg{padding:12px 14px;min-width:0}
  .ptag{right:50%;transform:translateX(50%)}
  .bar .nights{padding:5px 8px}
  .h4{height:auto;max-height:none;min-height:0}
  .h4 .shade{background:linear-gradient(180deg,rgba(127,83,13,.95) 0%,rgba(127,83,13,.9) 32%,rgba(127,83,13,.5) 48%,rgba(127,83,13,.15) 75%,rgba(127,83,13,.1) 100%)}
  .bar .sep{display:none}
  .bar .gseg,.bar .btn{grid-column:1/-1}
  .seg>svg{display:none}
  .seg{padding:12px 14px}.seg b{font-size:16px}

  .bar .btn{min-height:54px}
  .bmeta{flex-wrap:wrap;gap:8px 18px}
}


/* top bar: transparent over the hero photo, then a fixed paper bar once the page scrolls */
.snav{position:absolute;left:0;right:0;top:0;z-index:50;background:transparent;transition:background .35s,box-shadow .35s}
.snav .wrap{max-width:1280px}
.snav .lang i,.menu .lang i{width:calc(33.333% - 2px)}.snav .lang button,.menu .lang button{width:38px}
.snav.stuck{position:fixed;top:env(safe-area-inset-top,0px);background:var(--paper) url("papier.jpg");background-size:640px;box-shadow:0 8px 24px -16px rgba(40,30,10,.55)}
.snav.stuck .wrap{height:68px}
.snav.stuck .links a{color:var(--ink2)}
.snav.stuck .links a.on{color:var(--ink)}
.snav .links a:hover{color:var(--char)!important;background:var(--gold)!important}
.snav.stuck .lang button{color:var(--ink2)}.snav.stuck .lang i{background:var(--ink)}.snav.stuck .lang button[aria-pressed="true"]{color:var(--cream)}
.snav.stuck .burger img{filter:none}
.snav .rsv{background:var(--gold);border-color:var(--gold);color:var(--char);font-weight:700}
.snav .rsv:hover{background:var(--cream);border-color:var(--cream);color:var(--char)}
.snav.stuck .rsv:hover{background:var(--char);border-color:var(--char);color:var(--cream)}
.menu .mr{display:flex;align-items:center;gap:14px}
.menu .lang button{color:#a59d8f}.menu .lang i{background:var(--cream)}.menu .lang button[aria-pressed="true"]{color:var(--char)}
.menu .mbook{position:relative;z-index:1;align-self:flex-start;margin-top:36px;background:var(--gold);border-color:var(--gold);color:var(--char);font-weight:700}
@media (max-width:860px){
  .snav .wrap{height:64px}
  .snav.stuck .wrap{height:60px}
  .snav .rsv{display:none}
  .snav.stuck .rsv{display:inline-flex;min-height:38px;padding:8px 16px;font-size:14px}
  .snav.stuck .lang{display:none}
  .snav .r{gap:8px}
  .menu ol{margin-top:44px}
}


.phil{position:relative;max-width:1200px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left));padding-block:112px 112px;display:grid;grid-template-columns:480px 1fr;gap:112px;align-items:center}
.phil .stack{display:flex;flex-direction:column;gap:24px;min-width:0;position:relative;z-index:2}
.phil .label{color:var(--terra)}
.phil h2{font:400 52px/1.05 var(--f-title);color:var(--ink)}
.phil p{font:400 20px/1.7 var(--f-text);color:var(--ink2);max-width:46ch}
.phil p b{color:var(--ink);font-weight:600}
.phil .pbox{position:relative;height:580px}
.phil .pbox .ph{transition:opacity 1.1s ease}.phil .pbox .ph.b{position:absolute;opacity:0}.phil .pbox:hover .ph.b,.phil .pbox.hov .ph.b{opacity:1}
.phil .pbox .clip{filter:drop-shadow(0 30px 40px rgba(70,45,10,.22))}
.phil .pbox .plant{position:absolute;z-index:3;width:170px;right:-80px;bottom:-30px;transform:scaleX(-1) rotate(8deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));pointer-events:none}


.phil .bird{position:absolute;z-index:5;width:200px;left:38%;top:34px;transform:rotate(-8deg);filter:drop-shadow(0 10px 12px rgba(70,45,10,.25))}
.phil .trail{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@media (max-width:860px){
  .phil{grid-template-columns:1fr;gap:46px;padding-block:100px 100px}
  .phil h2{font-size:40px}.phil p{font-size:18px}
  .phil .pbox{height:380px}
  .phil .pbox .plant{width:96px;right:-12px;bottom:-24px}
  .phil{overflow-x:clip}
  .phil .bird{width:120px;left:auto;right:6px;top:30px}
  
}


.ctx{height:90px;background:var(--paper) url(papier.jpg);background-size:640px}
.wv2{display:block;width:100%;height:110px;margin-top:-1px;background:var(--paper) url(papier.jpg);background-size:640px}
.eq{background:var(--char);color:var(--cream);overflow:hidden;padding-block:64px 112px}
.eq .in{max-width:1280px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left));display:grid;grid-template-columns:470px 1fr;gap:44px;align-items:start}
.eq .txt{display:flex;flex-direction:column;gap:24px;min-width:0}
.eq .label{color:var(--gold)}
.eq h2{font:400 58px/1 var(--f-title);color:var(--cream)}
.eq .lead{color:var(--ondark);font-size:18px;max-width:34ch}
.eql{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.eql.one{grid-template-columns:1fr}
.eql li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;font:500 17px/1.35 var(--f-ui);letter-spacing:.01em;color:var(--cream)}
.eqi{width:52px;height:52px;display:grid;place-items:center;border:1.5px solid rgba(214,184,99,.55);color:var(--gold);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.eql li:nth-child(3n+2) .eqi{border-radius:46% 54% 40% 60%/55% 45% 58% 42%}.eql li:nth-child(3n) .eqi{border-radius:62% 38% 55% 45%/42% 60% 40% 58%}
.eqi svg{width:25px;height:25px}
.track{position:relative;height:620px}
.card{position:absolute;top:0;display:flex;flex-direction:column;gap:18px;transition:all .7s cubic-bezier(.6,0,.2,1)}
.card .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.card .ov{position:absolute;inset:0;background:rgba(127,83,13,.7)}
.card .ov2{position:absolute;inset:0;background:rgba(45,42,38,.18)}
.card.on{left:0;width:440px}.card.on .shape{height:600px}
.card.on .ov,.card.on .ov2{opacity:0}
.card.n1{left:470px;width:270px;top:50px}.card.n1 .shape,.card.n2 .shape{height:430px}
.card.n2{left:770px;width:270px;top:50px}
.card .shape{position:relative;clip-path:url(#rk1)}
.card.n1 .shape{clip-path:url(#rk2)}.card.n2 .shape{clip-path:url(#rk3)}
.card .soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:500 13px/1.5 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--sand);background:#4a3a25}
.card .cap{display:flex;flex-direction:column;gap:8px;padding-left:6px;max-width:270px}
.card .cap b{font:500 13px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.card .cap span{font:400 15px/1.5 var(--f-text);color:var(--ondark)}
.card.on .cap{display:none}
.card .deco{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.card.on .deco{left:-46px;bottom:-30px;width:150px;transform:rotate(-8deg)}
.card.on .deco.flat{transform:rotate(1deg);bottom:-24px}
.eq .head{max-width:1280px;margin:0 auto 48px;padding-inline:max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}
.eq .head h2{font:400 64px/.95 var(--f-title);color:var(--cream)}
.eq .head p{font:italic 400 21px/1.5 var(--f-text);color:var(--ondark);white-space:nowrap}
.eq h3{font:400 52px/1 var(--f-title);color:var(--gold);margin:0}
.eq .txt{gap:48px;padding-top:6px;height:600px}
.eql{row-gap:var(--rg)}
.more{display:none}
.eql{align-content:start}
.arr{position:absolute;right:calc(32px - max(0px,(100vw - 1280px)/2) - 24px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:14px}
.arr button{all:unset;cursor:pointer;width:62px;height:62px;display:grid;place-items:center;color:var(--cream);border:1.5px solid rgba(244,239,228,.8);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:background .3s,color .3s,border-color .3s}
.arr button:nth-child(2){border-radius:46% 54% 40% 60%/55% 45% 58% 42%}
.arr button svg{width:24px;height:24px}
.arr button.hov,.arr button:hover{background:var(--gold);border-color:var(--gold);color:var(--char)}
.eq .squig{position:absolute;left:350px;top:-4px;width:150px;z-index:4;transform:rotate(8deg)}
@media (max-width:860px){
  .eq{padding-block:46px 100px}
  .eq .in{grid-template-columns:1fr;gap:28px}
  .eq .txt{display:contents}
  .track{order:1}.eq h3{order:2;font-size:40px;margin-top:8px!important}.eql{order:3}
  .eq h3,.eq .lead{margin:0}
  .eq .head{display:block;margin-bottom:28px}.eq .head h2{font-size:48px}.eq .head p{margin-top:14px;font-size:17px;padding:0}
  .cur{display:none}
  .card.on .deco{left:-20px;bottom:-24px;width:96px}
  .card.on .shape{height:400px}.card.n1 .shape{height:340px}.card.n1{top:30px}
  .card .cap span{display:none}
  .track{height:470px}
  .track{height:440px}
  .card.on{width:280px;height:400px}
  .card.n1{left:296px;width:200px;height:340px}
  .card.n2{display:none}
  .arr{right:0;top:auto;bottom:-62px;transform:none;flex-direction:row-reverse}
  .track{margin-bottom:60px}
  .arr button{width:52px;height:52px}
  .eq .squig{left:auto;right:96px;top:6px;width:96px}
  .eql{grid-template-columns:1fr;row-gap:12px!important;margin-top:14px!important}
  .eq h3{margin-bottom:8px!important}
  /* long lists scroll inside their box, like the map list: a soft fade at the bottom says there is more */
  .eql{max-height:254px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(214,184,99,.55) transparent}
  .eql::-webkit-scrollbar{width:6px}.eql::-webkit-scrollbar-thumb{background:rgba(214,184,99,.55);border-radius:6px}
  .eql.fade{-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
  .eql li{flex:none}
  .eql li{grid-template-columns:44px 1fr;font-size:16px}.eqi{width:44px;height:44px}.eqi svg{width:22px;height:22px}
  .eq .head p{white-space:normal}
  .eq .lead{font-size:17px}
}

/* site mockup: only the map band, on the footer ochre */
.ochre-band .dark{background:var(--ochre);color:var(--cream)}
.ochre-band h2{color:var(--cream);font-size:64px}
@media (max-width:860px){.ochre-band h2{font-size:48px}}
.ochre-band .wrap{max-width:1280px}
.ochre-band .map-head{max-width:780px;gap:20px;position:relative}
.ochre-band .bfly.mfly{width:136px;left:880px;top:-10px;opacity:.95;--tilt:rotateX(42deg) rotateZ(-18deg);--fold:34deg}
@media (max-width:860px){.ochre-band .bfly.mfly{width:92px;left:auto;right:4px;top:-34px}}
.ochre-band .pitch{font:italic 400 24px/1.55 var(--f-text);color:var(--cream);max-width:none;text-wrap:pretty}
.ochre-band .tip{display:flex;align-items:center;gap:12px;margin-top:20px;font:500 14px/1.5 var(--f-ui);letter-spacing:.02em;color:var(--sand);opacity:.9}
.ochre-band .tip svg{width:22px;height:22px;flex:none;color:#f5e6bd}
@media (max-width:860px){.ochre-band .pitch{font-size:20px}.ochre-band .tip{align-items:flex-start;margin-top:4px}}
.ochre-band .dark>.wrap{padding-bottom:112px}
@media (max-width:860px){.ochre-band .dark>.wrap{padding-bottom:100px}}
.ochre-band .chip{color:var(--sand);border-color:rgba(234,217,182,.45)}
.ochre-band .chip:hover{border-color:var(--cream);color:var(--cream)}
.ochre-band .chip[aria-pressed="true"]{background:var(--cream);color:var(--char);border-color:var(--cream)}
.ochre-band .plist button{border-bottom-color:rgba(234,217,182,.28)}
.ochre-band .plist b{color:var(--cream)}
.ochre-band .plist span{color:#e2cfa6}
.ochre-band .plist button:hover b,.ochre-band .plist button.on b{color:#f5e6bd}
.ochre-band .plist button.here b,.ochre-band .plist button.here span{color:#f5e6bd}
.ochre-band .plist button.here b::before{background:#f5e6bd;box-shadow:0 0 0 4px rgba(245,230,189,.25)}
.ochre-band .btn{color:var(--cream);border-color:#e8d6b0}
.ochre-band .btn:hover,.ochre-band .btn.solid{background:var(--gold);border-color:var(--gold);color:var(--char)}
.ochre-band .nearlabel{color:#f5e6bd}
.ochre-band .near h3{color:var(--cream)}
.ochre-band .near p{color:var(--sand)}
@media (hover:hover){.ochre-band .nl:hover h3{color:#f5e6bd}}
.ochre-band .gcard .btn{color:var(--ink);border-color:var(--ink)}
.ochre-band .gcard .btn:hover,.ochre-band .gcard .btn.solid{background:var(--terra);color:var(--cream);border-color:var(--terra)}
.ochre-band .mframe{box-shadow:0 30px 60px -30px rgba(40,25,5,.55)}
.ochre-band .plist{scrollbar-color:rgba(245,230,189,.6) transparent}.ochre-band .plist::-webkit-scrollbar-thumb{background:rgba(245,230,189,.6)}


.ctxo{height:110px;background:var(--ochre)}
.wvh{display:block;width:100%;height:100px;margin-top:-1px;background:var(--ochre)}
.wvb{display:block;width:100%;height:100px;margin-top:-1px;background:var(--paper) url(papier.jpg);background-size:640px}
.host{background:var(--char);color:var(--cream)}
.host .in{max-width:1280px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left));padding-block:112px 112px;display:flex;flex-direction:column;gap:96px}
.host .top{display:grid;grid-template-columns:440px 360px;gap:96px;align-items:center;justify-content:center;padding-left:98px}
.hbox{position:relative;height:560px}
.hbox .clip{filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}
.hbox .medal{position:absolute;right:-34px;bottom:-44px;width:94px;z-index:4;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));transform-origin:50% 0;animation:sway2 5s ease-in-out infinite}
@keyframes sway2{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hbox .deco{position:absolute;z-index:3;width:140px;left:-62px;top:-34px;transform:rotate(-10deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}


.host .txt{display:flex;flex-direction:column;gap:24px;min-width:0}
.host .label{color:var(--gold)}
.host h2.hh{font:400 64px/1 var(--f-title);color:var(--gold)}
.host .tq{display:flex;flex-direction:column;gap:24px}
.host .quote{font:italic 400 24px/1.55 var(--f-text);color:var(--sand);max-width:32ch}
.sigw{display:flex;align-items:center;gap:18px;margin-top:4px;text-decoration:none;color:inherit;width:fit-content}
.sig{font:400 36px/1 var(--f-title);color:var(--gold);transition:color .25s}
.sigw .go{display:grid;place-items:center;color:var(--gold);transition:transform .3s,color .3s}
.sigw .go svg{width:20px;height:20px}
.sigw:hover .sig,.sigw.hov .sig{color:#f5e6bd}.sigw:hover .go,.sigw.hov .go{color:#f5e6bd;transform:translate(3px,-3px)}
.shl{display:flex;flex-direction:column;gap:7px;padding-left:18px;border-left:1.5px solid rgba(214,184,99,.45)}
.shl b{font:600 16px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.shl span{font:500 15px/1.3 var(--f-ui);color:var(--ondark)}
.rev{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.stars{display:flex;gap:10px}
.hst{width:46px;height:46px;display:grid;place-items:center}
.hst svg{width:46px;height:46px;fill:var(--gold);filter:drop-shadow(0 4px 10px rgba(214,184,99,.35));animation:pop .7s cubic-bezier(.3,1.6,.5,1) var(--d) both}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.rev h3{font:400 44px/1.05 var(--f-title);color:var(--cream)}
.rev p{font:400 18px/1.6 var(--f-text);color:var(--ondark);max-width:52ch}
.elf{width:100%;min-height:300px;display:grid;place-items:center;border:1.5px dashed rgba(214,184,99,.45);border-radius:40px 28px 44px 30px/30px 44px 28px 40px;color:var(--ondark);font:500 14px/1.6 var(--f-ui);letter-spacing:.04em;padding:32px}
.elf .ghost{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;margin-bottom:20px;opacity:.5}
.elf .ghost i{display:block;height:150px;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;background:rgba(244,239,228,.06);border:1px solid rgba(244,239,228,.12)}
.cta{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.cta p{font:italic 400 24px/1.5 var(--f-text);color:var(--sand)}
.cta .btn{min-height:64px;padding:0 44px;font-size:17px;font-weight:700;background:var(--gold);border-color:var(--gold);color:var(--char);border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
.cta .btn svg{width:16px;height:16px}
.btn.pulse{position:relative;isolation:isolate}
.btn.pulse::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);z-index:-1;animation:bpulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.btn.pulse.freeze::before{animation:none;transform:scale(1.1,1.32);opacity:.2}
@keyframes bpulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.35,1.9);opacity:0}}
@media (max-width:860px){
  .host .in{padding-block:100px;gap:72px}
  .host .top{grid-template-columns:1fr;gap:40px;padding-left:0}
  .host .txt{display:contents}
  .host .tq{order:-2}
  .sigw{order:-1;margin-top:-12px}
  .hbox{order:0;margin-top:36px;margin-bottom:24px}
  .host h2.hh{font-size:48px}
  .sig{font-size:32px}
  .hbox{height:380px;margin-right:30px}
  .hbox .medal{width:64px;right:-20px;bottom:-32px}
  .hbox .deco{width:90px;left:-20px;top:-26px}
  
  .host h2{font-size:46px}.host .quote{font-size:20px}

  .sigw{flex-wrap:wrap}
  .hst,.hst svg{width:38px;height:38px}
  .rev h3{font-size:36px}.rev p{font-size:17px}
  .elf .ghost{grid-template-columns:1fr}.elf .ghost i:nth-child(n+2){display:none}
  .cta p{font-size:20px}
  .cta .btn{width:100%}
  .host{overflow-x:clip}
}


.ctxc{height:120px;background:var(--char)}
.wvb{display:block;width:100%;height:100px;margin-top:-1px;background:var(--paper) url(papier.jpg);background-size:640px}
.faq{max-width:900px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left));padding-block:112px 112px;display:flex;flex-direction:column;gap:40px}
.fhead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.fhead h2{font:400 64px/1 var(--f-title);color:var(--ink)}
.fsearch{display:flex;align-items:center;gap:12px;width:320px;max-width:100%;padding:13px 18px;border:1.4px solid #cdbfa8;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;font:500 15px/1 var(--f-ui);color:var(--mute);background:transparent}
.fsearch svg{width:20px;height:20px;color:var(--ink2);flex:none}
.ftabs{display:flex;gap:10px;flex-wrap:wrap}
.ftab{font:500 14px/1 var(--f-ui);letter-spacing:.03em;padding:12px 18px;border:1.3px solid #cdbfa8;color:var(--ink2);border-radius:22px 15px 20px 14px/15px 20px 14px 19px}
.ftab.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:rgba(214,184,99,.18);color:var(--ink)}
.qa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.qa li{border-bottom:1.3px solid #ddd3c2}
.qa .q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font:500 18px/1.35 var(--f-ui);color:var(--ink)}
.qa .q svg{width:22px;height:22px;color:var(--terra);flex:none;transition:transform .3s}
.qa li.open .q svg{transform:rotate(180deg)}
.qa .a .dl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 15px/1 var(--f-ui);color:var(--terra);text-decoration:none;padding:10px 14px;border:1.3px solid rgba(196,101,47,.45);border-radius:20px 14px 18px 12px/14px 18px 12px 17px}
.qa .a .dl svg{width:18px;height:18px}
.qa .a{display:flex;flex-direction:column;align-items:flex-start;padding:0 4px 26px;font:400 18px/1.65 var(--f-text);color:var(--ink2);max-width:62ch}
.fnote{display:flex;align-items:center;gap:18px;padding:24px 26px;background:rgba(214,184,99,.16);border-radius:28px 60px 34px 22px/30px 26px 52px 30px}
.fnote .ico{width:48px;height:48px;flex:none;display:grid;place-items:center;border:1.5px solid #d8c48a;color:#a8862c;border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.fnote .ico svg{width:24px;height:24px}
.fnote p{font:400 17px/1.55 var(--f-text);color:var(--ink2)}
.fnote p b{color:var(--ink);font-weight:600}
.fnote .btn{margin-left:auto}
footer{overflow-x:clip}
.foot .wrap{max-width:1280px}
.foot .fbar{align-items:center;flex-wrap:wrap}
.foot .fbar a{color:inherit;text-decoration:none;transition:color .2s}
.foot .fbar a:hover{color:var(--cream)}
.foot .legal{display:flex;gap:22px;flex-wrap:wrap}
@media (max-width:860px){.foot .fbar{flex-direction:column;align-items:flex-start;text-align:left;gap:18px}.foot .legal{flex-direction:column;gap:12px}}
/* footer photo opens the gallery */
.foot .foot-box{cursor:pointer}


/* gallery */
.gal{position:fixed;inset:0;z-index:200;background:rgba(32,28,24,.985);display:flex;align-items:center;justify-content:center;padding:40px}
.gal .fr{position:relative;width:min(1100px,92vw);height:min(720px,78vh)}
.gal .fr img{width:100%;height:100%;object-fit:cover;border-radius:40px 28px 44px 30px/30px 44px 28px 40px}
.gal .x{position:absolute;right:-18px;top:-18px;width:52px;height:52px;display:grid;place-items:center;background:var(--cream);color:var(--char);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.gal .x svg,.gal .nv svg{width:24px;height:24px}
.gal .nv{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:grid;place-items:center;color:var(--cream);border:1.5px solid rgba(244,239,228,.7);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.gal .nv.p{left:-84px}.gal .nv.n{right:-84px}
.gal .thumbs{position:absolute;left:0;right:0;bottom:-74px;display:flex;justify-content:center;gap:10px}
.gal .thumbs i{width:56px;height:40px;border-radius:12px 9px 11px 8px;background-size:cover;background-position:center;opacity:.45}
.gal .thumbs i.on{opacity:1;box-shadow:0 0 0 2px var(--gold)}
@media (max-width:860px){
  .faq{padding-block:100px;gap:32px}
  .fhead h2{font-size:48px}
  .fsearch{width:100%}
  .ftabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*max(24px,env(safe-area-inset-left)));padding-inline:max(24px,env(safe-area-inset-left));scrollbar-width:none}
  .ftab{white-space:nowrap}
  .qa .q{font-size:17px}.qa .a{font-size:17px}
  .fnote{flex-direction:column;align-items:flex-start}.fnote .btn{margin-left:0}
  
  .gal{padding:16px}.gal .fr{width:100%;height:60vh}.gal .nv{top:auto;bottom:-76px;transform:none}.gal .nv.p{left:calc(50% - 70px)}.gal .nv.n{right:calc(50% - 70px)}
  .gal .thumbs{display:none}.gal .x{right:8px;top:-62px}
}


.doc{position:fixed;inset:0;z-index:300;background:rgba(32,28,24,.72);display:flex;align-items:center;justify-content:center;padding:32px}
.dsheet{position:relative;width:min(780px,100%);max-height:calc(100vh - 64px);overflow:auto;background:var(--char);color:var(--cream);
  border-radius:44px 30px 48px 34px/34px 48px 30px 44px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);padding:64px 64px 56px}
.dsheet .shape{position:absolute;right:-30px;top:-26px;width:170px;opacity:.95;transform:rotate(12deg);pointer-events:none}
.dx{position:sticky;top:0;float:right;margin:-34px -34px 0 0;z-index:3;width:52px;height:52px;display:grid;place-items:center;background:var(--cream);color:var(--char);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.dx svg{width:24px;height:24px}
.dk{display:flex;flex-direction:column;gap:28px;position:relative;z-index:1}
.dk .label{color:var(--gold)}
.dk h3{font:400 50px/1 var(--f-title);color:var(--cream);margin:0;padding-right:70px}
.dk .lead{font:italic 400 21px/1.6 var(--f-text);color:var(--sand);max-width:none}
.dk h4{margin:12px 0 0;font:500 13px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.dk p{font:400 17px/1.7 var(--f-text);color:var(--ondark);margin:0}
.fm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.fm li{display:grid;grid-template-columns:34px 1fr;gap:16px}
.fm .n{width:34px;height:34px;display:grid;place-items:center;font:600 14px/1 var(--f-ui);color:var(--char);background:var(--gold);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.fm b{display:block;font:500 18px/1.3 var(--f-ui);color:var(--cream);margin-bottom:6px}
.fm p{font-size:16px}
.fm .ex{display:block;margin-top:8px;font:400 15px/1.55 var(--f-text);color:#b9b0a1;padding-left:14px;border-left:1.5px solid rgba(214,184,99,.4)}
.nl2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nl2 li{position:relative;padding-left:22px;font:400 16px/1.6 var(--f-text);color:var(--ondark)}
.nl2 li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--terra);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.dnote{padding:20px 22px;background:rgba(214,184,99,.12);border-radius:26px 18px 24px 16px/18px 24px 16px 22px;font:500 16px/1.55 var(--f-ui)!important;color:var(--cream)!important}
.pol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pol li{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1.3px solid rgba(214,184,99,.4);border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
.pol span{font:500 12px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pol b{font:500 17px/1.4 var(--f-ui);color:var(--cream)}
.pol em{font:italic 400 15px/1.5 var(--f-text);color:#b9b0a1}
.fee{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fee li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 2px;border-bottom:1.3px solid rgba(234,217,182,.18)}
.fee li span{font:500 18px/1.35 var(--f-ui);color:var(--cream)}
.fee li b{font:400 34px/1 var(--f-title);color:var(--gold);white-space:nowrap}
.fee li b.fs{font:500 16px/1.35 var(--f-ui);text-align:right;white-space:nowrap}
.wa{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;padding:14px 22px 14px 16px;background:var(--gold);color:var(--char);text-decoration:none;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;transition:transform .25s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:26px;height:26px}
.wa span{font:600 16px/1 var(--f-ui)}
.wa small{font:500 14px/1 var(--f-ui);opacity:.75}
.dk .wa2{color:var(--gold);font-weight:600;font-size:16px}
.dk .wa2 svg{background:var(--gold);color:var(--char)}
.lg{display:flex;flex-direction:column;gap:26px}
.lg h4{margin:0 0 10px}
.lg a{color:var(--gold)}
.lg .todo{color:var(--terra);font-style:italic}
.pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:10px 16px;font:500 15px/1 var(--f-ui);color:var(--char);background:var(--sand);border-radius:20px 14px 18px 12px/14px 18px 12px 17px}
@media (max-width:860px){
  .doc{padding:0;align-items:stretch}
  .dsheet{max-height:none;height:100%;border-radius:0;padding:84px 24px 64px}
  .dx{position:fixed;top:16px;right:16px;margin:0;float:none}
  .dsheet .shape{width:110px;right:-24px;top:40px;opacity:.9}
  .dk h3{font-size:34px;padding-right:56px}.dk .lead{font-size:19px}
  .fee li b{font-size:28px}
  .wa{flex-wrap:wrap;gap:8px 12px}
  .dk .wa2{font:400 17px/1.5 var(--f-text);letter-spacing:0}
  .pol{grid-template-columns:1fr}
  .fee li b.fs{white-space:normal;max-width:18ch}
}


.bfly{position:absolute;width:96px;aspect-ratio:240/200;perspective:520px;pointer-events:none;z-index:5}
.bfly .b3{position:absolute;inset:0;transform-style:preserve-3d;transform:var(--tilt,rotateX(48deg) rotateZ(-24deg))}
.bfly .h{position:absolute;inset:0;transform-style:preserve-3d}
.bfly .h svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bfly .h.l{clip-path:inset(0 50% 0 0);transform-origin:50% 50%;transform:rotateY(var(--fold,52deg))}
.bfly .h.r{clip-path:inset(0 0 0 50%);transform-origin:50% 50%;transform:rotateY(calc(-1*var(--fold,52deg)))}
.bfly .h.r svg{filter:brightness(.86)}
.bfly .sh{position:absolute;left:18%;right:18%;bottom:-14%;height:16%;border-radius:50%;background:rgba(40,25,5,.22);filter:blur(6px);transform:translateZ(-30px)}


body.contact{padding-top:68px}
.ct2{position:relative;max-width:860px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px));padding-block:88px 150px;display:flex;flex-direction:column;gap:44px}
.ct2-hd{position:relative;display:flex;flex-direction:column;gap:14px}
.ct2-hd .label{color:var(--terra)}
.ct2 h1{margin:0;font:400 64px/1 var(--f-title);color:var(--ink)}
.ct2-req{font:400 15px/1.4 var(--f-text);color:var(--ink2)}
.ct2-rock{position:absolute;right:-20px;top:-10px;width:170px;transform:rotate(-8deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));pointer-events:none}
.ct2 .bfly.rest{right:30px;top:-70px;width:136px;--tilt:rotateX(50deg) rotateZ(18deg);--fold:32deg}
.ct2-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.fld{display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}
.fld.full{grid-column:1/-1}
.fld label{font:500 12px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.inp{box-sizing:border-box;width:100%;padding:17px 20px;font:400 16px/1.4 var(--f-ui);letter-spacing:.01em;color:var(--cream);background:var(--char);border:1.5px solid var(--char);border-radius:18px 14px 16px 12px/14px 16px 12px 15px;transition:border-color .2s,box-shadow .2s}
.inp.ph{color:#9a9284}
.inp.focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,184,99,.22)}
.inp.ta{min-height:190px}
.sel{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.sel svg{width:18px;height:18px;color:var(--gold);transition:transform .25s}
.sel.open svg{transform:rotate(180deg)}
.opts{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:6;list-style:none;margin:0;padding:8px;background:var(--char);color:var(--cream);border:1.5px solid rgba(214,184,99,.35);border-radius:22px 16px 20px 14px/16px 20px 14px 19px;box-shadow:0 24px 40px -18px rgba(0,0,0,.55)}
.opts li{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;font:500 15px/1.3 var(--f-ui);border-radius:14px 10px 12px 9px/10px 13px 9px 12px}
.opts li.hv{background:rgba(214,184,99,.18);color:var(--gold)}
.opts li svg{width:18px;height:18px;color:var(--gold)}
.ct2-foot{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ct2-note{font:400 13px/1.5 var(--f-text);color:var(--ink2)}
.ct2-note a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.ct2-send{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:17px 28px;font:700 16px/1 var(--f-ui);letter-spacing:.03em;color:var(--char);background:var(--gold);border-radius:26px 18px 24px 16px/18px 24px 16px 22px;white-space:nowrap;transition:transform .25s,background .25s}
.ct2-send svg{width:20px;height:20px}
.ct2-send:hover{background:var(--char);color:var(--cream);transform:translateY(-2px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* sent: a discreet line; the butterfly leaves the page, a dotted trail behind it */
.ct2-done{position:relative;display:flex;flex-direction:column;gap:12px;padding:8px 0 40px;min-height:300px}
.ct2-done .ok{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--terra)}
.ct2-done .ok svg{width:18px;height:18px}
.ct2-done p{font:italic 400 20px/1.6 var(--f-text);color:var(--ink2);max-width:36ch}
.ct2-done p b{font-style:normal;font-weight:600;color:var(--ink)}
.ct2w{overflow-x:clip}
.ct2-trail{position:absolute;left:440px;right:-290px;top:-100px;height:280px;pointer-events:none;z-index:4}
.ct2 .bfly.away{left:auto;right:-345px;top:-140px;width:110px;--tilt:rotateX(42deg) rotateY(-18deg) rotateZ(-34deg);--fold:58deg}
@media (max-width:860px){
  body.contact{padding-top:60px}
  .ct2{padding-block:56px 100px;gap:34px}
  .ct2 h1{font-size:48px}
  .ct2-rock{width:116px;right:-10px;top:-4px}
  .ct2 .bfly.rest{right:14px;top:-50px;width:96px}
  .ct2-grid{grid-template-columns:1fr;gap:22px}
  .ct2-foot{flex-direction:column-reverse;align-items:stretch;gap:16px}
  .ct2-send{justify-content:center}
  .ct2-trail{left:20px;right:-24px;top:150px;height:120px}
  .ct2 .bfly.away{right:-40px;top:118px;width:84px}
}

/* ================= production layer: turns the validated mockups into a working site ================= */
html{scroll-padding-top:84px}
body.site{background:var(--paper) url("papier.jpg");background-size:640px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- top bar ---------- */
.snav{position:fixed;top:env(safe-area-inset-top,0px)}
.snav .lang button{cursor:pointer}
.snav .links a.on{color:#fff}
.snav.stuck .links a.on{color:var(--ink)}
.toast{position:fixed;left:50%;top:calc(84px + env(safe-area-inset-top,0px));z-index:120;transform:translate(-50%,-10px);opacity:0;pointer-events:none;
  padding:12px 18px;font:500 14px/1.3 var(--f-ui);color:var(--cream);background:var(--char);border-radius:20px 14px 18px 12px/14px 18px 12px 17px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- hero ---------- */
.h4 .in{padding-bottom:420px}
.host .clip .in{padding:0;max-width:none;margin:0;display:block}
.front .clip .in{overflow:hidden}
.front .clip .hs{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.1s ease,transform 6s ease}
.front .clip .hs.on{opacity:1;transform:none}
.front{cursor:none}
.mcur{display:none;align-items:center;justify-content:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid #fff;box-shadow:0 6px 20px -6px rgba(0,0,0,.35);transition:transform .25s}
.mcur::after{content:"";width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);margin-left:-5px}
.mcur.l::after{transform:rotate(-135deg);margin-left:5px}
.front.hv .mcur{display:flex}
.dots{pointer-events:auto}
.dots button{all:unset;cursor:pointer;padding:5px}
.dots button i{display:block;width:10px;height:10px;border:1.4px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.2);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:background .3s,transform .3s}
.dots button.on i{background:#fff;transform:scale(1.3)}
.dots button:focus-visible{outline:2px solid #fff;border-radius:50%}
@media (hover:none),(pointer:coarse){.front{cursor:auto}.mcur{display:none!important}}

/* booking: one widget, pulled into the header on a computer, under it on a phone */
.bk{position:relative;z-index:20;max-width:1060px;margin:-330px auto 0;padding-inline:max(24px,env(safe-area-inset-left))}
.bk+main{margin-top:110px}
.bar .seg{all:unset;box-sizing:border-box;flex:1 1 0;position:relative;display:flex;align-items:center;gap:14px;padding:13px 20px;border:1.3px solid #cdbfa8;border-radius:26px 18px 24px 16px/18px 24px 16px 22px;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.bar .seg.gseg{flex:.9 1 0}
.bar .seg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bar .seg b.ph{color:var(--ink2);font-weight:400}
.calp{left:max(24px,env(safe-area-inset-left))}
.grid7 button{all:unset;box-sizing:border-box;height:42px;display:grid;place-items:center;font:500 15px/1 var(--f-ui);color:var(--ink);cursor:pointer;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:background .2s}
.grid7 button:hover:not(:disabled){background:rgba(214,184,99,.3)}
.grid7 button:disabled{cursor:default;color:#cdc6b9;text-decoration:line-through;text-decoration-color:#cdc6b9}
.grid7 button.in{background:rgba(196,101,47,.12);border-radius:0}
.grid7 button.d1,.grid7 button.en{background:var(--terra);color:#fff}
.grid7 button.short{background:rgba(196,101,47,.08);color:var(--ink2)}
.grid7 button:focus-visible{outline:2px solid var(--gold)}
.qchip{transition:border-color .2s,background .2s}
.qchip:disabled{color:#c3b9a8;border-color:#e2dacb;text-decoration:line-through;cursor:default}
.calft .btn:disabled{opacity:.45;cursor:default;transform:none}
.step button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%;font:500 17px/1 var(--f-ui)}
.step button:disabled{color:#cfc8bb;cursor:default}
.step span{min-width:12px;text-align:center}
.gp{right:calc(max(24px,env(safe-area-inset-left)) + 180px)}
.sheetx{display:none}
.calp,.gp{animation:pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- philosophy: the hummingbird crosses in, then hovers ---------- */
.phil{overflow-x:clip}
.phil .pbox{cursor:none}
.phil .bird{transition:none}
.phil .bird.go{animation:birdIn 3.2s cubic-bezier(.35,.1,.25,1) both,birdHover 2.4s ease-in-out 3.2s infinite}
.phil .bird.wait{opacity:0}
@keyframes birdIn{0%{opacity:0;transform:translate(-70vw,140px) rotate(-14deg)}10%{opacity:1}45%{transform:translate(-30vw,-40px) rotate(6deg)}75%{transform:translate(-6vw,40px) rotate(-12deg)}100%{opacity:1;transform:rotate(-8deg)}}
@keyframes birdHover{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-8px)}}

/* ---------- les atouts: carousel ---------- */
.eq .head h2{white-space:nowrap}
.eq .txt{transition:opacity .35s}
.eq .txt.swap{opacity:0}
.card{cursor:pointer}
.card.on{cursor:none}
.card.out{left:1060px;width:270px;top:50px;opacity:0;pointer-events:none}
.card.out .shape{height:430px}
.card.prev{left:-480px;width:440px;opacity:0;pointer-events:none}
.card.prev .shape{height:600px}
.card .deco{opacity:0;transition:opacity .5s}
.card.on .deco{opacity:1;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -8px;rotate:3deg}}
.card .ov{transition:opacity .6s}
.arr button{cursor:pointer}
@media (max-width:860px){
  .card.out{left:520px;width:200px;height:340px;top:30px}
  .card.prev{left:-320px;width:280px}
  .card.out .shape{height:340px}.card.prev .shape{height:400px}
  .eq .txt{display:flex;flex-direction:column;height:auto}
  .eq .txt h3{margin-top:8px}
  .eq .in{display:flex;flex-direction:column}
  .eq .track{order:1;align-self:stretch}.eq .txt{order:2;align-self:stretch}
}

/* ---------- autour: the butterfly flutters in ---------- */
.ochre-band .bfly.mfly.go{animation:flyIn 3.4s cubic-bezier(.35,.1,.25,1) both}
.ochre-band .bfly.mfly.wait{opacity:0}
.bfly.go .h.l{animation:flapL .5s ease-in-out 7 alternate}
.bfly.go .h.r{animation:flapR .5s ease-in-out 7 alternate}
.bfly.idle .h.l{animation:flapL 1.6s ease-in-out infinite alternate}
.bfly.idle .h.r{animation:flapR 1.6s ease-in-out infinite alternate}
@keyframes flapL{from{transform:rotateY(var(--fold,52deg))}to{transform:rotateY(14deg)}}
@keyframes flapR{from{transform:rotateY(calc(-1*var(--fold,52deg)))}to{transform:rotateY(-14deg)}}
@keyframes flyIn{0%{opacity:0;translate:-80vw 160px}12%{opacity:.95}40%{translate:-45vw -30px}70%{translate:-14vw 60px}100%{opacity:.95;translate:0 0}}
.ochre-band .plist{scrollbar-color:rgba(245,230,189,.6) transparent}

/* ---------- votre hôte ---------- */
.hst{opacity:0;transform:scale(.4) rotate(-20deg)}
.stars.go .hst{animation:starIn .55s cubic-bezier(.3,1.6,.5,1) var(--d) both}
@keyframes starIn{to{opacity:1;transform:none}}
.elf{position:relative;min-height:220px}
.elf .elfsight-app-f143912e-9b36-49f7-9872-3ab5dfa5821e{position:relative;z-index:1;width:100%}
.elf.ready .elf-wait{display:none}
.elf-wait{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;font:500 14px/1.4 var(--f-ui);color:var(--mute)}
.elf-wait .ghost{width:100%}
.hbox .clip{cursor:default}

/* ---------- FAQ ---------- */
.fsearch{cursor:text}
.fsearch input{all:unset;flex:1;min-width:0;font:500 15px/1.2 var(--f-ui);color:var(--ink)}
.fsearch input::placeholder{color:var(--mute)}
.fsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ftab{all:unset;cursor:pointer;white-space:nowrap;font:500 14px/1 var(--f-ui);letter-spacing:.03em;padding:12px 18px;border:1.3px solid #cdbfa8;color:var(--ink2);border-radius:22px 15px 20px 14px/15px 20px 14px 19px;transition:border-color .2s,background .2s}
.ftab:hover{border-color:var(--gold)}
.ftab:focus-visible,.qa .q:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ftabs.off .ftab{opacity:.45}
.qa .q{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font:500 18px/1.35 var(--f-ui);color:var(--ink)}
.qa li.open .q svg{transform:rotate(180deg)}
.qa .a{animation:pop .3s ease}
.qa .a .dl{background:transparent;cursor:pointer;transition:background .2s,color .2s}
.qa .a .dl:hover{background:var(--terra);color:var(--cream)}
.qa mark{background:rgba(214,184,99,.45);color:inherit;border-radius:3px}
.qnone{font:400 18px/1.6 var(--f-text);color:var(--ink2)}
.qnone a{color:var(--terra)}
@media (max-width:860px){.qa .q{font-size:17px}}

/* ---------- documents ---------- */
.doc{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.doc.on{opacity:1;visibility:visible;transition:opacity .35s}
.doc .dsheet{transform:translateY(16px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.doc.on .dsheet{transform:none}
.dx{cursor:pointer;border:0;padding:0;font:inherit}
.dx:hover{background:var(--gold)}
.dsheet .dk a{color:var(--gold)}
@media (max-width:860px){
  .dsheet{padding-top:calc(84px + env(safe-area-inset-top,0px));padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .dx{top:calc(16px + env(safe-area-inset-top,0px))}
}

/* ---------- footer: the photo changes on its own; only the cursor hints it opens ---------- */
.foot .legal button{all:unset;cursor:pointer;color:inherit;transition:color .2s}
.foot .legal button:hover{color:var(--cream)}
.foot .legal button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.foot-box .clip .in img.fr{opacity:0;transition:opacity 1s ease}
.foot-box .clip .in img.fr.on{opacity:1}
.foot-box{cursor:pointer}
@media (hover:hover) and (pointer:fine){.foot-box{cursor:none}}

/* ---------- gallery ---------- */
.gal{opacity:0;transition:opacity .35s}
.gal.on{opacity:1}
.gal .fr img{transition:opacity .35s}
.gal .x,.gal .nv{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;display:grid;place-items:center}
.gal .x{right:-18px;top:-18px;width:52px;height:52px;background:var(--cream);color:var(--char);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.gal .nv{top:50%;transform:translateY(-50%);width:56px;height:56px;color:var(--cream);border:1.5px solid rgba(244,239,228,.7);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transition:background .2s,color .2s}
.gal .nv:hover{background:var(--gold);border-color:var(--gold);color:var(--char)}
.gal .nv.p{left:-84px}.gal .nv.n{right:-84px}
.gal .gcap{position:absolute;left:24px;bottom:20px;margin:0;padding:8px 14px;font:500 13px/1 var(--f-ui);letter-spacing:.06em;color:var(--cream);background:rgba(29,24,18,.55);border-radius:14px 10px 12px 9px/10px 13px 9px 12px;backdrop-filter:blur(4px)}
.gal .thumbs{overflow-x:auto;justify-content:flex-start;padding:6px 4px;scrollbar-width:none}
.gal .thumbs button{all:unset;flex:none;cursor:pointer;width:64px;height:46px;border-radius:12px 9px 11px 8px;background-size:cover;background-position:center;opacity:.45;transition:opacity .2s}
.gal .thumbs button.on{opacity:1;box-shadow:0 0 0 2px var(--gold)}
.gal .thumbs button:hover{opacity:.85}
@media (max-width:860px){
  .gal .fr{height:62vh}
  .gal .nv{top:auto;bottom:-76px;transform:none}
  .gal .x{right:8px;top:-62px}
  .gal .gcap{left:12px;bottom:12px}
  .gal .nv.p{left:calc(50% - 70px)}.gal .nv.n{right:calc(50% - 70px)}
}

/* ---------- contact page ---------- */
body.contact .ct2{padding-top:120px}
.ct2-form{display:flex;flex-direction:column;gap:34px}
.inp{display:block;font:400 16px/1.4 var(--f-ui);outline:none;appearance:none;-webkit-appearance:none}
.inp::placeholder{color:#9a9284;opacity:1}
.inp:focus,.inp.focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,184,99,.22)}
textarea.inp{resize:vertical}
button.inp{all:unset;box-sizing:border-box;width:100%;padding:17px 20px;font:400 16px/1.4 var(--f-ui);color:var(--cream);background:var(--char);border:1.5px solid var(--char);border-radius:18px 14px 16px 12px/14px 18px 12px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
button.inp.ph span{color:#9a9284}
.opts li{cursor:pointer}
.opts li svg{opacity:0}
.opts li[aria-selected="true"]{color:var(--gold)}
.opts li[aria-selected="true"] svg{opacity:1}
.opts li:hover,.opts li.hv{background:rgba(214,184,99,.18)}
.fld.bad .inp{border-color:var(--terra)}
.err{font:500 13px/1.3 var(--f-ui);color:var(--terra)}
.lnk{all:unset;cursor:pointer;border-bottom:1px solid var(--line)}
.ct2-send:disabled{opacity:.6;cursor:default}
.ct2 .bfly.rest .h.l{animation:flapL 2.4s ease-in-out infinite alternate}
.ct2 .bfly.rest .h.r{animation:flapR 2.4s ease-in-out infinite alternate}
.ct2 .bfly.rest.away{animation:flyAway 1.9s cubic-bezier(.5,0,.6,1) forwards}
.ct2 .bfly.rest.away .h.l{animation:flapL .22s ease-in-out infinite alternate}
.ct2 .bfly.rest.away .h.r{animation:flapR .22s ease-in-out infinite alternate}
@keyframes flyAway{0%{translate:0 0}25%{translate:-120px -40px}55%{translate:120px 30px}100%{translate:95vw -95vh;opacity:.9}}
.ct2-done{animation:pop .5s ease both}
.ct2-done .ct2-trail{clip-path:inset(0 100% 0 0);animation:trail 1.6s .2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes trail{to{clip-path:inset(0 0 0 0)}}
.ct2-done .ct2-trail{left:440px;right:-290px;top:-100px;height:280px}
@media (max-width:860px){.ct2-done .ct2-trail{left:20px;right:-24px;top:150px;height:120px}}

@media (prefers-reduced-motion:reduce){
  .phil .bird.wait,.ochre-band .bfly.mfly.wait{opacity:1}
  .hst{opacity:1;transform:none}
}

/* ---------- phone ---------- */
@media (max-width:860px){
  .h4 .in{padding-bottom:150px}
  .bk{margin-top:-20px}
  .bk+main{margin-top:40px}
  .calp,.gp{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:86vh;overflow:auto;z-index:150;border-radius:30px 30px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom,0px));animation:sheet .35s cubic-bezier(.2,.8,.2,1)}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .months{grid-template-columns:1fr;gap:20px}
  .calhd{padding-right:52px}
  .calft{flex-direction:column;align-items:stretch;gap:14px}
  .csum{justify-content:space-between;white-space:normal}
  .sheetx{all:unset;position:absolute;right:16px;top:18px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--ink);border:1.3px solid var(--line);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
  .sheetx svg{width:20px;height:20px}
  .gp .gr:first-child{padding-right:48px}
  body.sheet-open .bk{z-index:160}
  body.sheet-open::after{content:"";position:fixed;inset:0;z-index:140;background:rgba(29,24,18,.45)}
}

/* ===================================== v2 corrections ===================================== */
/* cursor: one round cursor for the whole site; arrow variants for carousels */
body>.cur{position:fixed!important;left:0;top:0;z-index:300}
.cur.al::after,.cur.ar::after{width:13px;height:13px;border-radius:0;background:none;border-top:2px solid #fff;border-right:2px solid #fff}
.cur.ar::after{transform:rotate(45deg);margin-left:-5px}
.cur.al::after{transform:rotate(-135deg);margin-left:5px}

/* hero: the wave spans the whole width; mask-based shape so the photo never shows square corners */
.wave4{width:100%}
.front .clip{filter:none}
.front .clip .in{clip-path:none!important;overflow:visible;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.08 .10C.20 .02 .42 .00 .62 .02C.82 .04 .95 .10 .98 .30C1 .46 .99 .62 .99 .76C.98 .90 .88 .98 .70 .99C.50 1 .30 .99 .14 .95C.03 .91 0 .78 .01 .60C.01 .44 0 .30 .02 .22C.03 .16 .05 .12 .08 .10Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.08 .10C.20 .02 .42 .00 .62 .02C.82 .04 .95 .10 .98 .30C1 .46 .99 .62 .99 .76C.98 .90 .88 .98 .70 .99C.50 1 .30 .99 .14 .95C.03 .91 0 .78 .01 .60C.01 .44 0 .30 .02 .22C.03 .16 .05 .12 .08 .10Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.front .clip .hs{will-change:auto;transform:none!important;transition:opacity 1.2s ease}
.front::before{content:"";position:absolute;inset:6% 4% -2%;border-radius:40%;background:rgba(60,35,5,.35);filter:blur(34px);transform:translateY(26px);z-index:-1}
.front{z-index:1}
/* background = the next photo, crossfading */
.h4 .bg{opacity:0;transition:opacity 1.6s ease}
.h4 .bg.on{opacity:1}

/* philosophy: a small nature gallery inside the rock shape */
.phil .pbox .pg{opacity:0;transition:opacity 1.4s ease}
.phil .pbox .pg.on{opacity:1}
.phil .bird .wg{transform-box:fill-box;transform-origin:50% 100%}
.phil .bird.go .wg,.phil .bird.hover .wg{animation:hum .055s linear infinite alternate}
.phil .bird .w1{animation-delay:-.02s!important}
@keyframes hum{from{transform:scaleY(1) skewX(0)}to{transform:scaleY(.18) skewX(-18deg)}}

/* les atouts: linear, no arrows on a computer (cursor does it), arrows on a phone */
@media (min-width:861px){.eq .arr{display:none}}
.card .deco{width:150px;opacity:0;transition:opacity .35s}
.card.on .deco{opacity:1;transition:opacity .6s .55s}
.card:not(.on) .deco{animation:none}
.card.out{left:1060px;opacity:0}
.card.prev{left:-480px;opacity:0}
.eq .track{cursor:none}
@media (hover:none),(pointer:coarse){.eq .track{cursor:auto}}

/* butterfly: natural flight, fast wingbeats in the air, slow when resting */
.bfly .b3{transform:var(--tilt)}
@keyframes flapFast{from{transform:rotateY(70deg)}to{transform:rotateY(8deg)}}
@keyframes flapFastR{from{transform:rotateY(-70deg)}to{transform:rotateY(-8deg)}}
.bfly.fl .h.l{animation:flapFast .11s ease-in-out infinite alternate!important}
.bfly.fl .h.r{animation:flapFastR .11s ease-in-out infinite alternate!important}
.bfly.idle .h.l{animation:flapL 1.9s ease-in-out infinite alternate}
.bfly.idle .h.r{animation:flapR 1.9s ease-in-out infinite alternate}
.ochre-band .bfly.mfly.fl .b3{animation:tiltIn 3.2s ease-in-out both}
@keyframes tiltIn{0%{transform:rotateX(20deg) rotateY(-30deg) rotateZ(30deg)}30%{transform:rotateX(55deg) rotateY(15deg) rotateZ(-10deg)}60%{transform:rotateX(30deg) rotateY(-20deg) rotateZ(20deg)}100%{transform:var(--tilt)}}
.ct2 .bfly.rest.away .b3{animation:tiltOut 1.8s ease-in forwards}
@keyframes tiltOut{0%{transform:var(--tilt)}40%{transform:rotateX(30deg) rotateY(-25deg) rotateZ(-20deg)}100%{transform:rotateX(60deg) rotateY(20deg) rotateZ(25deg)}}

/* votre hôte */
.hst svg{animation:none}
.stars.go .hst{animation:starIn .55s cubic-bezier(.3,1.6,.5,1) var(--d) both,starTw 2.8s ease-in-out calc(1.4s + var(--d)) infinite}
@keyframes starTw{0%,72%,100%{transform:none;filter:none}80%{transform:scale(1.2) rotate(-8deg);filter:brightness(1.2) drop-shadow(0 0 8px rgba(214,184,99,.8))}88%{transform:scale(.96)}}
.medal .shg{animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-70px)}55%,100%{transform:translateX(120px)}}
.hbox .clip,.hbox .deco{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hbox .clip{cursor:default}
.sigw:hover .shl b,.sigw.hov .shl b{color:#f5e6bd}
.shl b{transition:color .25s}

/* gallery: vertical photos shown whole */
.gal .fr{display:flex;align-items:center;justify-content:center}
.gal .fr img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.gal .fr .gwrap{position:relative;display:flex;max-width:100%;max-height:100%}

/* more air between sections */
.phil{padding-block:150px}
.eq{padding-block:96px 150px}
.eq .head{margin-bottom:64px}
.ochre-band .map-head{padding-top:140px}
.ochre-band .dark>.wrap{padding-bottom:150px}
.host .in{padding-block:150px}
.faq{padding-block:150px}
body.contact .ct2{padding-block:150px 170px}
@media (max-width:860px){
  .phil{padding-block:120px}
  .eq{padding-block:72px 120px}
  .ochre-band .map-head{padding-top:110px}
  .ochre-band .dark>.wrap{padding-bottom:120px}
  .host .in{padding-block:120px}
  .faq{padding-block:120px}
  body.contact .ct2{padding-block:110px 130px}
  /* map list: no inner scroll on a phone, Voir plus / Réduire */
  .plist{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
  #autour .side .more{display:inline-flex}
}
#autour .side .more[hidden]{display:none!important}
#autour .side .more{color:var(--cream);border-color:#e8d6b0}
@media (min-width:861px){#autour .side .more{display:none!important}}
/* a filter on a masked photo paints its rectangular box: no filter on rock photos */
.zm .clip,.phil .pbox .clip,.foot-box .clip{filter:none!important}
.eq .arr button:disabled{opacity:.28;cursor:default;pointer-events:none}

/* ===================================== v3 ===================================== */
/* votre hôte: smaller photo, compact section */
.host .in{gap:56px;padding-block:120px}
.host .top{grid-template-columns:260px 440px;gap:72px;padding-left:0}
.hbox{height:330px}
.hbox .medal{width:60px;right:-22px;bottom:-26px}
.hbox .deco{width:86px;left:-34px;top:-22px}
.hbox .clip,.hbox .deco{transition:none}
.rev{gap:22px}
.cta .btn.pulse:hover::before{animation:none;opacity:0}
.cta .btn{transition:background .3s,border-color .3s,color .3s,transform .3s}
.cta .btn:hover{background:var(--terra)!important;border-color:var(--terra)!important;color:var(--cream)!important;transform:translateY(-3px)}
.cta .btn svg{transition:transform .3s}.cta .btn:hover svg{transform:translate(3px,-3px)}
@media (max-width:860px){
  .host .in{padding-block:100px;gap:46px}
  .host .top{grid-template-columns:1fr;gap:36px}
  .hbox{height:260px;width:210px;margin:0 auto}
  .hbox .medal{width:50px}
}
/* map: a little narrower, Le Gosier still visible */
.atlas{grid-template-columns:minmax(0,700px) minmax(0,1fr)}
.mframe{height:640px}
.ochre-band .map-head{max-width:700px}
/* hummingbird closer to the photo */
.phil .bird{left:30%;top:58px}
@media (max-width:860px){.phil .bird{top:74px;right:10px}}
/* smaller cursor in the atouts carousel */
.cur.csm{width:52px;height:52px;margin:-26px 0 0 -26px}
.cur.csm.al::after,.cur.csm.ar::after{width:10px;height:10px}
/* atouts on a phone: whole list, Voir la suite / Réduire */
.eqmore{display:none}
@media (max-width:860px){
  .eq .eql{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
  .eq .eql li:nth-child(n+5){display:none}
  .eq .eql.open li:nth-child(n+5){display:grid}
  .eqmore{all:unset;order:4;cursor:pointer;display:inline-flex;align-self:flex-start;margin-top:22px;padding:12px 20px;font:500 15px/1 var(--f-ui);letter-spacing:.04em;color:var(--gold);border:1.5px solid rgba(214,184,99,.6);border-radius:26px 18px 24px 16px/18px 24px 16px 22px}
  .eqmore[hidden]{display:none}
}
/* contact butterfly: flutters, rises a little, shrinks into the distance and fades */
.ct2 .bfly.rest.away{animation:flyAwayS 1.3s cubic-bezier(.45,0,.7,1) forwards}
.ct2 .bfly.rest.away .b3{animation:none}
@keyframes flyAwayS{0%{translate:0 0;scale:1;opacity:1}100%{translate:40px -90px;scale:.25;opacity:0}}
/* one text scale: intros 20 px italic, body 18 px */
.eq .head p,.ochre-band .pitch,.host .quote{font:italic 400 20px/1.6 var(--f-text)}
.phil p{font-size:19px}
@media (max-width:860px){.eq .head p,.ochre-band .pitch,.host .quote{font-size:18px}.phil p{font-size:17px}}

/* ===================================== v4 ===================================== */
/* local time + weather pill in the top bar (same as the booklet) */
.snav .lt{height:38px}
.snav:not(.stuck) .lt{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.45)}
.snav:not(.stuck) .lt-h,.snav:not(.stuck) .lt-c{color:#fff}
.snav:not(.stuck) .lt .wx svg{color:#f5e6bd}
.snav:not(.stuck) .wx .wcl{fill:transparent}
.snav:not(.stuck) .lt-c:not([hidden])+.lt-h,.snav:not(.stuck) .lt-w{border-color:rgba(255,255,255,.35)}
@media (max-width:860px){.snav .lt{height:34px}.snav.stuck .lt{display:none}}
/* atouts cursor: one size, only the icon changes */
.cur.csm{transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1)!important}
.cur.csm::after{transition:none}
/* calendar: one continuous shape from arrival to departure */
.grid7 button{position:relative;isolation:isolate;border-radius:0}
.grid7 button.in{background:rgba(196,101,47,.16)}
.grid7 button.d1,.grid7 button.en{background:transparent;color:#fff}
.grid7 button.d1.has{background:linear-gradient(90deg,transparent 50%,rgba(196,101,47,.16) 50%)}
.grid7 button.en.has{background:linear-gradient(90deg,rgba(196,101,47,.16) 50%,transparent 50%)}
.grid7 button.d1::before,.grid7 button.en::before{content:"";position:absolute;inset:0 2px;z-index:-1;background:var(--terra);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.grid7 button.has{cursor:grab;touch-action:none}
.months.dragging,.months.dragging button{cursor:grabbing}
.grid7 button:hover:not(:disabled):not(.d1):not(.en):not(.in){background:rgba(214,184,99,.3);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
/* tip */
.calinfo{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border:1.3px solid var(--line);border-radius:50%;cursor:help;color:var(--ink2)}
.calinfo b{font:600 12px/1 var(--f-ui)}
.calinfo .tip{position:absolute;bottom:calc(100% + 10px);right:-10px;width:250px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;font:400 13px/1.45 var(--f-text);color:var(--cream);background:var(--char);border-radius:16px 12px 14px 10px/12px 14px 10px 13px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s;white-space:normal;z-index:5}
.calinfo .tip svg{width:22px;height:22px;flex:none;color:var(--gold)}
.calinfo:hover .tip,.calinfo:focus .tip{opacity:1;visibility:visible;transform:none}
.csum{gap:12px}
@media (max-width:860px){.calinfo .tip{right:auto;left:-6px}}

/* ===================================== v5 ===================================== */
/* calendar: no leftover half-round, caps sit exactly on the band */
.grid7 button.en,.grid7 button.d1{box-shadow:none!important}
.grid7 button.d1::before,.grid7 button.en::before{inset:0}
.grid7{column-gap:0}
/* booking bar buttons */
.bar .btn.gold{transition:background .25s,border-color .25s,color .25s,transform .25s}
.bar .btn.gold:hover{background:var(--char);border-color:var(--char);color:var(--cream);transform:translateY(-2px)}
#calOk{transition:background .25s,border-color .25s,color .25s,transform .25s}
#calOk:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--char);transform:translateY(-2px)}

/* ===================================== v6 ===================================== */
/* calendar: the pale band runs under the orange caps, its ends are never visible */
.grid7 button.in,.grid7 button.d1.has,.grid7 button.en.has{background:transparent!important}
.grid7 button.in::after,.grid7 button.d1.has::after,.grid7 button.en.has::after{content:"";position:absolute;top:0;bottom:0;z-index:-2;background:rgba(196,101,47,.16)}
.grid7 button.in::after{left:0;right:0}
.grid7 button.d1.has::after{left:50%;right:0}
.grid7 button.en.has::after{left:0;right:50%}
/* booking bar "Réserver": orange, gold on hover (like Valider) */
.bar .btn.gold{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.bar .btn.gold:hover{background:var(--gold);border-color:var(--gold);color:var(--char);transform:translateY(-2px)}

/* ===================================== v7 ===================================== */
/* booking bar "Réserver": gold, black on hover */
.bar .btn.gold{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--char)!important}
.bar .btn.gold:hover{background:var(--char)!important;border-color:var(--char)!important;color:var(--cream)!important;transform:translateY(-2px)}
/* votre hôte: smaller stars, more air before the reviews */
.hst,.hst svg{width:30px;height:30px}
.stars{gap:8px}
.host .in{gap:96px}
@media (max-width:860px){.hst,.hst svg{width:28px;height:28px}.host .in{gap:72px}}
/* calendar: clear dates, month arrows hover */
.calclear{all:unset;cursor:pointer;align-self:center;margin-left:6px;font:500 14px/1 var(--f-ui);color:var(--ink);border-bottom:1px solid var(--ink2);padding-bottom:2px}
.calclear:hover{color:var(--terra);border-color:var(--terra)}
.calclear[hidden]{display:none}
.calhd .navb button{cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.calhd .navb button:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--char);transform:translateY(-2px)}
.calhd .navb button:disabled{opacity:.35;cursor:default}

/* ===================================== v8 ===================================== */
/* type scale (desktop / tablet / phone), in line with usual web sizes */
.eq .head h2,.ochre-band h2,.host h2.hh,.fhead h2{font-size:52px}
.phil h2{font-size:48px}
.eq h3{font-size:38px}
.sig{font-size:28px}
.shl b{font-size:14px}.shl span{font-size:14px}.shl{gap:6px;padding-left:16px}.sigw{gap:16px}
.eq .head p,.ochre-band .pitch,.host .quote{font-size:18px}
.phil p{font-size:18px}
.rev h3{font-size:30px}
@media (max-width:1180px) and (min-width:861px){
  .eq .head h2,.ochre-band h2,.host h2.hh,.fhead h2{font-size:44px}
  .phil h2{font-size:40px}
  .eq h3{font-size:32px}
  .sig{font-size:26px}
  .eq .head p,.ochre-band .pitch,.host .quote,.phil p{font-size:17px}
  .rev h3{font-size:28px}
}
@media (max-width:860px){
  .eq .head h2,.ochre-band h2,.host h2.hh,.fhead h2{font-size:34px}
  .phil h2{font-size:30px}
  .eq h3{font-size:28px}
  .sig{font-size:24px}
  .shl b{font-size:13px}.shl span{font-size:13px}
  .eq .head p,.ochre-band .pitch,.host .quote,.phil p{font-size:16px}
  .eql li,.plist li b{font-size:16px}
  .faq .q{font-size:16px}
  .rev h3{font-size:26px}
  .dk h3{font-size:28px}
  .fee li b{font-size:24px}
  .cta p{font-size:17px}
}

/* waves: they overlap the next band by 2 px, so no hairline shows at the seam on a phone */
/* waves (v8.3): no colour or texture layer reaches the edge that touches the next band: only that band's colour does */
svg.wv,svg.wv2,svg.wvb,svg.wvh{margin-top:-2px!important;margin-bottom:-2px!important;background-color:transparent!important;background-image:linear-gradient(to bottom,var(--pv,transparent) 90%,var(--nx) 90%)!important;background-size:100% calc(100% + 6px)!important;background-position:0 0!important;background-repeat:no-repeat!important}
svg.wv2{background-image:linear-gradient(to bottom,transparent 90%,var(--nx) 90%),url(papier.jpg)!important;background-size:100% calc(100% + 6px),640px auto!important;background-position:0 0,0 calc(100% - 6px)!important;background-repeat:no-repeat,repeat-x!important}
svg.wvb.flip{background-image:linear-gradient(to top,transparent 90%,var(--nx) 90%),url(papier.jpg)!important;background-size:100% calc(100% + 6px),640px auto!important;background-position:0 100%,0 6px!important;background-repeat:no-repeat,repeat-x!important}

/* calendar footer: chips + tip on the first line, the dates, then Effacer + Valider */
.calft{align-items:flex-end;gap:16px}
.qchips{align-items:center}
.qchips .calinfo{margin-left:4px}
.calinfo .tip{right:auto;left:-10px}
.calinfo .tip .tch{display:none}
.csum{flex-direction:column;align-items:flex-end;gap:10px;white-space:normal;text-align:right}
.cact{display:flex;align-items:center;gap:18px}
.calclear{margin-left:0}
@media (max-width:860px){
  .calft{flex-direction:column;align-items:stretch;gap:14px}
  .csum{align-items:stretch;text-align:left;gap:12px}
  .cact{justify-content:space-between}
  .cact #calOk{margin-left:auto}
}
/* touch screens: a finger pressing (pulsing ring) instead of the mouse */
@media (hover:none),(pointer:coarse){
  .calinfo .tip .ms{display:none}
  .calinfo .tip .tch{display:block;width:26px;height:26px}
  .calinfo .tip .pr{transform-box:fill-box;transform-origin:center;animation:press 1.6s ease-out infinite}
}
@keyframes press{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}

/* atouts: every card slides left together, the active one always on top; the shape never ghosts */
.card.on{z-index:3}.card.n1{z-index:2}.card.n2{z-index:1}.card.out{z-index:0}.card.prev{z-index:2}
.card:not(.on) .deco{opacity:0!important;visibility:hidden;transition:none!important;animation:none!important}
.card.on .deco{visibility:visible;transition:opacity .5s .75s!important}
@media (max-width:860px){
  .card.n2{display:flex!important;left:512px;width:200px;height:340px;top:30px;opacity:1}
  .card.n2 .shape{height:340px}
  .card.out{left:728px}
}

/* Autour on a phone: square map, the list underneath */
@media (max-width:860px){
  .atlas{grid-template-columns:1fr!important}
  .mframe{height:auto!important;aspect-ratio:1/1;width:100%}
  .ochre-band .mframe{box-shadow:0 22px 40px -26px rgba(40,25,5,.5)}
}

/* votre hôte on a phone: title, quote and signature centred on the photo; compact button */
@media (max-width:860px){
  .host .tq{align-items:center;text-align:center;justify-self:center}
  .host .quote{max-width:28ch}
  .sigw{justify-self:center;align-self:center}
  .cta .btn{width:auto;min-height:54px;padding:0 30px;font-size:16px}
}

/* stars: hover / touch */
.stars{touch-action:pan-y;cursor:default}
.stars.res:not(.int) .hst{animation:starTw 2.8s ease-in-out var(--d) infinite!important;opacity:1}
.stars.int .hst{animation:none!important;opacity:1;transform:none}
.stars.int .hst.pk{animation:starPk .6s cubic-bezier(.3,1.6,.5,1)!important}
@keyframes starPk{0%{transform:none}40%{transform:translateY(-8px) scale(1.3) rotate(-10deg);filter:brightness(1.25) drop-shadow(0 0 10px rgba(214,184,99,.9))}100%{transform:none}}

/* hero: the new photo fades in above the old one, which stays put underneath */
.front .clip .hs{z-index:0}
.front .clip .hs.was{opacity:1!important;z-index:1;transition:none!important}
.front .clip .hs.on{z-index:2}
.h4 .bg{z-index:0;transition:opacity 0s 1.7s}
.h4 .bg.on{z-index:1;transition:opacity 1.6s ease}
/* phone top bar: the time/weather pill sits in the middle between the K and the languages */
@media (max-width:860px){
  .snav:not(.stuck) .wrap>.r{flex:1;margin-left:12px}
  .snav:not(.stuck) .r>.lt{margin-inline:auto}
}
@media (max-width:860px){.calinfo .tip{left:auto!important;right:-10px!important}}
/* v8.1: the orange shade always stays above the background photos */
.h4 .bgw{isolation:isolate}
.h4 .bgw .shade,.h4 .bgw .shade2{z-index:3}
/* stars: after the hover, the loop resumes at full size (no shrink) */
.stars.res:not(.int) .hst{transform:none;animation-fill-mode:both!important}

/* ===================================== v9 ===================================== */
/* atouts, last card (computer/tablet): the previous card waits in the background on the left, faded towards the text */
@media (min-width:861px){
  .card.p1{left:-240px;width:270px;top:50px;z-index:0;opacity:.55;pointer-events:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 80%);mask-image:linear-gradient(to right,transparent 0,#000 80%)}
  .card.p1 .shape{height:430px;clip-path:url(#rk2)}
  .card.p1 .cap{display:none}
}

/* ===================================== v10 ===================================== */
/* tablet widths where the 5 links no longer fit on one line: burger menu (same panel as on the phone) */
@media (min-width:861px) and (max-width:1100px){
  .nav .links{display:none}
  .burger{display:grid}
}
/* menu panel: links at 30 px (usual size for a full-screen menu), each still a 44 px tap target */
.menu ol{gap:12px}
.menu ol a{display:inline-block;font-size:30px;line-height:36px;padding-block:4px}
/* phone layout: the room name sits on the arrows' line (vertically centred on them), the list follows right under */
@media (max-width:860px){
  #atouts .txt{margin-top:-76px}
  #atouts .txt h3{max-width:calc(100% - 140px);white-space:nowrap}
}

/* booking bar on phones: travellers field takes the full width, like the Book button */
@media (max-width:860px){.bar .seg.gseg{grid-column:1/-1}}
/* ===== itinéraire ===== */
.itnw{overflow-x:clip}
html:has(body.itin){scroll-behavior:auto}
body.itin .itnw{animation:itnIn .6s ease both}
@keyframes itnIn{from{opacity:0}to{opacity:1}}
.itn{position:relative;max-width:1400px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px));padding-block:150px;display:flex;flex-direction:column;gap:112px}
.itn .btn{white-space:nowrap}
/* en-tête */
.itn-hd{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:640px}
.itn-hd .label{color:var(--terra)}
.itn h1{margin:-10px 0 0;font:400 64px/1 var(--f-title);color:var(--ink)}
.itn-hd p{margin:0;max-width:46ch;color:var(--ink2)}
.itn-hd .btns{margin-top:4px}
.itn-rock{position:absolute;left:calc(100% + 120px);top:6px;width:250px;transform:rotate(-6deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.16));pointer-events:none}
/* étapes */
.itn-steps{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:112px}
.itn-steps>.stp{position:relative;z-index:1}
.trail{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.trp{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 9}
.stp{display:grid;grid-template-columns:4fr 9fr;align-items:center;gap:56px}
.stp:nth-of-type(even){grid-template-columns:9fr 4fr}
.stp:nth-of-type(even) .tx{order:2}
.stp .tx{display:flex;align-items:flex-start;gap:22px}
.stp .tx>div{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.stp .no{font:400 104px/.8 var(--f-title);color:var(--terra);min-width:.62em}
.stp .label{color:var(--ink2)}
.stp h2{margin:0;font:400 42px/1.08 var(--f-title);color:var(--ink);max-width:14ch}
.stp .sub{margin:0;font-style:italic;color:var(--ink2);max-width:30ch}
/* photos : s'ouvrent (--o) et glissent (--py) au défilement */
.stp .ph{position:relative;margin:0;aspect-ratio:3/2;cursor:pointer;filter:drop-shadow(0 22px 34px rgba(40,25,5,.28))}
.stp .ph .in{position:absolute;inset:0;overflow:hidden;transform:scale(var(--o,1))}
.stp .ph .mv{position:absolute;inset:0;transform:translateY(var(--py,0%)) scale(calc(1.08 + (1 - var(--o,1)) * 1.1))}
.stp .ph .mv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dc{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.16))}
.dc.d1{width:120px;left:-46px;bottom:-40px;transform:rotate(-8deg)}
.dc.d3{width:150px;right:-60px;top:-44px;transform:rotate(12deg)}
.dc.d5{width:140px;right:-54px;bottom:-46px;transform:rotate(-10deg)}
/* flèches (épaisseur et animation réglées par itineraire.js) */
.arw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.arw path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* fin de page */
.itn-end{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.itn-end .wl{margin:0;font:400 40px/1.1 var(--f-title);color:var(--ink)}
.itn-end .btn.pulse:hover::before{animation:none;opacity:0}
/* photo en grand */
.itlb{position:fixed;inset:0;z-index:250;display:grid;place-items:center;background:rgba(28,22,16,.92);cursor:pointer;padding:max(16px,env(safe-area-inset-top,0px)) 16px}
.itlb[hidden]{display:none}
.itlb .w{position:relative;line-height:0;max-width:min(94vw,1600px)}
.itlb img{max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.itlb .lbx{position:absolute;top:14px;right:14px;width:44px;height:44px;line-height:1;background:none;border:0;cursor:pointer;z-index:2}
.itlb .lbx svg{width:100%;height:100%}
@media (max-width:860px){
  .itn{padding-block:110px;gap:64px}
  .itn-hd{gap:19px;max-width:none}
  .itn h1{font-size:44px;white-space:nowrap}
  .itn-hd p{font-size:16px}
  .itn-hd .btns{width:100%;flex-wrap:nowrap}
  .itn-hd .btns .btn{flex:1}
  .itn-rock{left:auto;right:-30px;top:-74px;width:104px}
  .itn-steps{gap:64px}
  .stp,.stp:nth-of-type(even){grid-template-columns:1fr;gap:24px}
  .stp:nth-of-type(even) .tx{order:0}
  .stp .tx>div{gap:10px;padding-top:2px}
  .stp .no{font-size:72px}
  .stp h2{font-size:34px;max-width:none}
  .stp .ph{margin-inline:-12px}
  .dc.d1{width:84px;left:-22px;bottom:-30px}
  .dc.d3{width:100px;right:-28px;top:-30px}
  .dc.d5{width:96px;right:-26px;bottom:-32px}
  .itn-end .wl{font-size:30px}
}
@media (prefers-reduced-motion:reduce){body.itin .itnw{animation:none}}

/* weather credit (MET Norway) */
.fbar .wxsrc{display:block;margin-top:2px;opacity:.72;white-space:nowrap}