:root{
  --cream:#F6F2EA; --ink:#201C15; --ink2:#4C463B; --muted:#7A7263;
  --line:#D9D2C4; --green:#17564F; --gold:#C9A96A; --night:#14110C;
  --serif:'Marcellus',Georgia,serif; --sans:'Mulish','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}

/* ============ L'ENTRÉE : l'arche ============ */
#loader{position:fixed;inset:0;z-index:100;background:var(--cream);display:flex;align-items:center;justify-content:center;transition:opacity 1s ease .45s}
#loader.done{opacity:0;pointer-events:none}
.ld-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.ld-marque{position:absolute;left:0;right:0;top:7%;text-align:center;color:var(--ink);z-index:3;pointer-events:none}
.ld-marque .k{font-size:10px;letter-spacing:.5em;padding-left:.5em;color:var(--green)}
.ld-marque .t{font-family:'Italiana',Georgia,serif;font-size:clamp(20px,3vw,34px);letter-spacing:.22em;margin-top:10px}
.ld-arc{position:relative;width:min(290px,56vw);margin-top:5%}
.ld-arc svg{width:100%;height:auto;overflow:visible;display:block}
.ld-arc #phL{clip-path:inset(100% 0 0 0)}
#trL,#trL2{stroke-dasharray:1;stroke-dashoffset:1}
.ld-sol{position:absolute;left:50%;bottom:-2px;height:1px;background:rgba(176,141,69,.55);width:0;transform:translateX(-50%)}
@keyframes archgrowV{to{transform:scale(8);opacity:0}}
#loader.full .ld-arc{animation:archgrowV 1.6s cubic-bezier(.6,0,.2,1) .45s forwards}
.ld-chiffre{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(20px,5vh,54px);font-family:'Italiana',Georgia,serif;font-size:clamp(36px,4.4vw,68px);line-height:1;color:#A8823F;font-variant-numeric:tabular-nums;text-align:right;transition:opacity .5s ease}
.ld-chiffre::before{content:"";display:block;width:44px;height:1px;background:rgba(168,130,63,.45);margin:0 0 12px auto}
.ld-chiffre small{font-size:10px;letter-spacing:.34em;color:var(--muted);display:block;margin-top:8px}
#loader.full .ld-chiffre{opacity:0}
/* ============ NAV ============ */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:26px clamp(20px,4vw,60px);font-size:11.5px;letter-spacing:.22em;color:rgba(242,238,230,.85);transition:background .5s,box-shadow .5s,padding .5s}
header.solid{background:rgba(12,11,9,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(242,238,230,.07);padding-top:18px;padding-bottom:18px}
.hd-left,.hd-right{display:flex;gap:clamp(18px,2.6vw,36px);align-items:center}
header a:hover{color:var(--gold)}
header .cta{border:1px solid var(--gold);color:var(--gold);padding:11px 26px;transition:all .35s}
header .cta:hover{background:var(--gold);color:var(--night)}
.langs{display:flex;gap:11px;font-size:11px;opacity:.9}
.langs b{font-weight:400;color:var(--gold)}
@media(max-width:960px){header .lnk{display:none}}
/* ============ HERO ============ */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;background:var(--night)}
.hero img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;object-position:50% 60%;filter:brightness(.5) saturate(.78) contrast(1.14);transform:scale(1.06);transition:transform 2.6s cubic-bezier(.22,1,.36,1);will-change:transform}
.hero.go img{transform:scale(1)}
.hero .grad{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(20,17,12,.15),rgba(20,17,12,.82) 92%),linear-gradient(180deg,rgba(20,17,12,.45),rgba(20,17,12,0) 30%)}
.hero .mid{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;color:#F2EEE6;padding:0 20px}
.h-kick{font-size:12px;letter-spacing:.55em;padding-left:.55em;color:var(--gold);margin-bottom:26px}
.h-t{font-family:'Italiana',Georgia,serif;font-weight:400;font-size:clamp(46px,8.4vw,104px);line-height:1;letter-spacing:.06em;margin:0}
.h-t2{font-family:'Italiana',Georgia,serif;font-size:clamp(22px,4vw,50px);letter-spacing:.42em;padding-left:.42em;margin-top:8px}
.h-rule{width:1px;height:58px;background:var(--gold);margin:30px auto 0}
.h-sub{font-size:12.5px;letter-spacing:.22em;color:rgba(242,238,230,.75);margin-top:20px}
.hbar{position:absolute;left:clamp(16px,3.4vw,60px);right:clamp(16px,3.4vw,60px);bottom:36px;display:flex;gap:1px;background:rgba(242,238,230,.14);backdrop-filter:blur(8px)}
.hbar>div{flex:1;padding:16px 24px;background:rgba(20,17,12,.55);color:#F2EEE6}
.hbar .lab{font-size:9.5px;letter-spacing:.22em;color:var(--gold)}
.hbar .val{font-size:15px;margin-top:3px}
.hbar .go{flex:0 0 260px;background:var(--gold);color:var(--night);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;letter-spacing:.2em;font-weight:600;transition:background .3s}
.hbar .go:hover{background:#D8BC85}
@media(max-width:900px){.hbar{flex-direction:column}.hbar .go{flex:auto;padding:16px}}
/* ============ INTRO ============ */
section{padding:0 clamp(20px,6vw,120px)}
.intro{display:flex;gap:70px;padding-top:110px;padding-bottom:110px;align-items:flex-start}
.eyebrow{font-size:12px;letter-spacing:.3em;color:var(--green);border-top:1px solid var(--green);padding-top:14px;flex:0 0 240px}
.intro p{font-family:var(--serif);font-size:clamp(21px,2.4vw,32px);line-height:1.4;margin:0;text-wrap:pretty}
.facts{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:52px}
.facts div{flex:1;padding:24px 6px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts .n{font-family:var(--serif);font-size:26px}
.facts .l{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-top:3px}
@media(max-width:900px){.intro{flex-direction:column;gap:30px}.facts{flex-wrap:wrap}.facts div{flex:1 1 45%}}

/* ============ À PROPOS ============ */
.apropos{position:relative;background:#EFE7D8;overflow:hidden}
.apropos .ghost{position:absolute;right:-6%;top:-12%;height:130%;width:auto;color:var(--ink);opacity:.05;pointer-events:none}
.ap-in{display:flex;gap:clamp(36px,5vw,84px);padding:110px 0;align-items:center;position:relative}
.ap-tx{flex:1;min-width:0}
.ap-p{color:var(--ink2);font-size:15.5px;max-width:56ch;margin:0 0 18px}
.ap-facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid #D9CFBB;border-bottom:1px solid #D9CFBB;margin-top:34px}
.ap-facts div{flex:1 1 20%;min-width:120px;padding:20px 8px 20px 0;border-right:1px solid #D9CFBB;display:flex;flex-direction:column;gap:4px}
.ap-facts div:last-child{border-right:0}
.ap-facts b{font-family:var(--serif);font-weight:400;font-size:20px}
.ap-facts span{font-size:9.5px;letter-spacing:.16em;color:var(--muted)}
.ap-media{flex:0 0 min(430px,40%);position:relative;padding:0 0 56px 46px}
.ap-cadre{position:relative;overflow:hidden;box-shadow:0 26px 60px -26px rgba(32,28,21,.4)}
.ap-cadre img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)}
.ap-petit{position:absolute;left:0;bottom:0;width:52%;border:6px solid var(--cream);box-shadow:0 20px 44px -20px rgba(32,28,21,.45);overflow:hidden}
.ap-petit img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
.ap-ligne{position:absolute;right:-18px;top:-18px;width:120px;height:120px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
@media(max-width:900px){.ap-in{flex-direction:column}.ap-media{flex:auto;width:100%;max-width:430px}}

/* ============ LE LIVRE D'OR ============ */
.livre{background:#0E2B26;color:#F2EEE6;padding-top:100px;padding-bottom:100px;position:relative;overflow:hidden}
.lv-frame{position:relative;max-width:1060px;margin:0 auto;border:1px solid rgba(201,169,106,.4);padding:8px}
.lv-frame::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,169,106,.22);pointer-events:none}
.lv-orn{position:absolute;top:-17px;left:50%;transform:translateX(-50%);background:#0E2B26;padding:0 18px}
.lv-in{display:flex;gap:clamp(30px,4vw,70px);padding:clamp(34px,5vw,64px);align-items:center}
.lv-left{flex:0 0 min(300px,36%)}
.lv-k{font-size:10.5px;letter-spacing:.4em;color:var(--gold)}
.lv-titre{font-family:'Italiana',Georgia,serif;font-size:clamp(30px,3.4vw,44px);line-height:1.15;margin-top:16px}
.lv-sous{font-family:'Lora',Georgia,serif;font-style:italic;font-size:14px;color:rgba(242,238,230,.6);margin-top:14px}
.lv-dots{display:flex;gap:10px;margin-top:34px}
.lv-dots span{width:7px;height:7px;border-radius:50%;border:1px solid rgba(201,169,106,.6);cursor:pointer;transition:background .3s}
.lv-dots span.on{background:var(--gold)}
.lv-right{flex:1;min-width:0}
.lv-stage{position:relative;min-height:210px}
.lv-quote{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.lv-quote.on{opacity:1;transform:none}
.lv-mark{font-family:'Italiana',Georgia,serif;font-size:72px;line-height:.6;color:rgba(201,169,106,.55);margin-bottom:16px}
.lv-tx{font-family:'Lora',Georgia,serif;font-style:italic;font-size:clamp(21px,2.6vw,30px);line-height:1.45;max-width:26ch}
.lv-by{font-size:10px;letter-spacing:.26em;color:rgba(242,238,230,.55);margin-top:20px}
@media(max-width:860px){.lv-in{flex-direction:column;align-items:flex-start}.lv-stage{min-height:250px}}

/* ============ FAQ ============ */
.faq{background:var(--cream);padding-top:100px;padding-bottom:110px}
.faq-in{display:flex;gap:clamp(34px,5vw,90px);align-items:flex-start}
.faq-left{flex:0 0 min(300px,32%);position:sticky;top:110px}
.faq-note{font-family:'Lora',Georgia,serif;font-style:italic;font-size:14px;color:var(--muted);margin-top:22px;max-width:26ch}
.faq-list{flex:1;min-width:0}
.fq{border:1px solid var(--line);border-bottom:0;background:#FBF8F1;transition:background .3s}
.fq:last-child{border-bottom:1px solid var(--line)}
.fq:hover{background:#F3EDE0}
.fq.on{background:#F3EDE0}
.fq-q{width:100%;display:flex;align-items:baseline;gap:20px;background:none;border:0;padding:24px 26px;cursor:pointer;text-align:left;font-family:var(--sans);color:var(--ink)}
.fq-q .no{font-family:'Italiana',Georgia,serif;font-size:20px;color:var(--gold);flex:none}
.fq-q .qq{font-family:var(--serif);font-size:clamp(16px,1.8vw,20px);flex:1;letter-spacing:.02em}
.fq-q .pl{font-family:'Italiana',Georgia,serif;font-size:24px;color:var(--green);transition:transform .4s ease;flex:none}
.fq.on .pl{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .5s ease}
.fq-a p{margin:0 0 24px 66px;max-width:54ch;color:var(--ink2);font-size:14.5px;padding-right:26px}
@media(max-width:860px){.faq-in{flex-direction:column}.faq-left{position:static;flex:auto}}
/* ============ LE QUARTIER, l'astrolabe ============ */
.qtr{display:flex;gap:clamp(30px,5vw,90px);align-items:center;padding:110px clamp(20px,6vw,110px) 120px}
.qtr-tx{flex:0 0 min(430px,44%)}
.d-script{font-family:'Mrs Saint Delafield',cursive;font-size:clamp(64px,7vw,104px);line-height:1;color:var(--ink);margin:14px 0 6px}
.d-eyebrow{font-size:12px;letter-spacing:.3em;color:var(--green)}
.d-body{color:var(--ink2);font-size:15.5px;max-width:46ch;margin-bottom:30px}
.mapbtns{display:flex;gap:14px;flex-wrap:wrap}
.mapbtns a{border:1px solid var(--ink);padding:12px 22px;font-size:11.5px;letter-spacing:.14em;font-weight:600;transition:all .3s}
.mapbtns a:hover{background:var(--ink);color:var(--cream)}
.qtr-note{font-size:10.5px;letter-spacing:.2em;color:var(--muted);margin-top:26px}
.qtr-inst{flex:1;max-width:660px}
.qtr-inst svg{width:100%;height:auto}
.qtr-inst svg a text:hover,.qtr-inst svg a:hover text{fill:var(--gold)}
.qtr-inst svg a{cursor:pointer}
@media(max-width:880px){.qtr{flex-direction:column}.qtr-tx{flex:auto}}
/* ============ ESPACES, plein écran ============ */
.dest{position:relative;height:100vh;min-height:640px;overflow:hidden;padding:0;background:var(--night)}
.dest-bgs{position:absolute;inset:0;pointer-events:none}
.dest-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:saturate(.75) brightness(.72) contrast(1.06)}
.dest-bg.on{opacity:1}
.dest-pend{background:#1D1913;display:flex;align-items:center;justify-content:center;z-index:2}
.dp-in{color:rgba(246,242,234,.34);font-size:clamp(11px,1.3vw,14px);letter-spacing:.4em;text-align:center;padding:0 20px}
.dest-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,17,12,.6),rgba(20,17,12,.3) 30%,rgba(20,17,12,.3) 70%,rgba(20,17,12,.66)),radial-gradient(ellipse 90% 55% at 50% 52%,rgba(20,17,12,.42),transparent 75%)}
.dest-top{pointer-events:none;position:absolute;top:110px;left:0;right:0;text-align:center;color:rgba(246,242,234,.85);font-size:13px;letter-spacing:.34em;padding-left:.34em}
.dest-names{z-index:5;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(14px,3.4vh,34px);padding:0 30px}
.dest-row{display:flex;justify-content:center;gap:clamp(30px,6.5vw,110px);flex-wrap:wrap}
.dname{font-family:var(--serif);font-size:clamp(22px,2.6vw,40px);line-height:1.2;color:#EFE59F;cursor:pointer;letter-spacing:.1em;transition:color .35s ease,opacity .35s ease;text-shadow:0 2px 26px rgba(20,17,12,.5);white-space:nowrap}
.dest-names:hover .dname{opacity:.45}
.dname:hover{color:#FFFFFF;opacity:1}
.dest-cta{pointer-events:none;position:absolute;bottom:56px;left:0;right:0;text-align:center;color:rgba(246,242,234,.65);font-size:11px;letter-spacing:.26em}
@media(max-width:700px){.dest-row{gap:14px}.dname{font-size:clamp(20px,6vw,32px)}}
/* ============ LIGHTBOX ============ */
#lb{position:fixed;inset:0;z-index:90;background:rgba(15,12,8,.97);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s ease}
#lb.open{opacity:1;pointer-events:auto}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:26px clamp(20px,4vw,56px);color:var(--cream)}
.lb-name{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px)}
.lb-count{color:var(--gold);font-size:12px;letter-spacing:.22em;font-variant-numeric:tabular-nums}
.lb-close{cursor:pointer;font-size:12px;letter-spacing:.2em;color:rgba(246,242,234,.7);border:1px solid rgba(246,242,234,.3);padding:9px 18px;transition:all .3s}
.lb-close:hover{color:var(--ink);background:var(--cream)}
.lb-main{flex:1;display:flex;align-items:center;gap:clamp(8px,2vw,26px);padding:0 clamp(12px,3vw,48px);min-height:0}
.lb-arrow{flex:none;width:52px;height:52px;border:1px solid rgba(201,169,106,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);transition:all .3s;user-select:none}
.lb-arrow:hover{background:var(--gold);color:var(--night)}
.lb-frame{flex:1;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.lb-frame img{max-width:100%;max-height:92%;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .5s,transform .5s}
.lb-frame img.on{opacity:1;transform:scale(1)}
.lb-empty{color:rgba(246,242,234,.55);text-align:center;font-size:14px}
.lb-empty .t{font-family:var(--serif);font-size:22px;color:var(--cream);margin-bottom:10px}
.lb-bottom{display:flex;justify-content:space-between;padding:20px clamp(20px,4vw,56px) 30px;color:rgba(246,242,234,.6);font-size:11.5px;letter-spacing:.18em}
.lb-jump{cursor:pointer;transition:color .3s}.lb-jump:hover{color:var(--gold)}

/* ============ LA GALERIE : la promenade ============ */
.walk{height:440vh;position:relative;background:#0E0B08;padding:0}
.walk .stick{position:sticky;top:0;height:100vh;overflow:hidden}
.walk .step{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.walk .step img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82)}
.walk .voile{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(10,8,5,.72) 100%);pointer-events:none}
.walk .wcap{position:absolute;left:0;right:0;bottom:64px;text-align:center;color:#F2EEE6;z-index:4}
.walk .pas{font-family:'Italiana',Georgia,serif;font-size:22px;color:var(--gold);letter-spacing:.2em;font-variant-numeric:tabular-nums}
.walk .ou{font-family:var(--serif);font-size:clamp(22px,3vw,36px);letter-spacing:.08em;margin-top:8px}
.walk .cue{font-size:10px;letter-spacing:.3em;color:rgba(242,238,230,.55);margin-top:16px;cursor:pointer;transition:color .3s;display:inline-block;border-bottom:1px solid transparent;padding-bottom:3px}
.walk .cue:hover{color:var(--gold);border-bottom-color:rgba(201,169,106,.5)}

/* ============ le badge galerie ============ */
#galBadge{display:inline-flex;align-items:center;gap:12px;background:rgba(12,10,7,.55);color:var(--gold);border:1px solid rgba(201,169,106,.55);padding:14px 22px;cursor:pointer;margin-top:26px;transition:background .3s,border-color .3s;backdrop-filter:blur(4px)}
#galBadge:hover{background:rgba(30,24,17,.8);border-color:var(--gold)}
#galBadge span{font-size:9.5px;letter-spacing:.22em;line-height:1.7;color:#F2EEE6;text-align:left}
#galBadge span b{font-weight:400;color:var(--gold)}

/* ============ L'ÉCRIN : la visite privée ============ */
.ecran{position:fixed;inset:0;z-index:95;background:#0B0906;opacity:0;pointer-events:none;transition:opacity .55s ease;color:#F2EEE6}
.ecran.open{opacity:1;pointer-events:auto}
.x-close{cursor:pointer;font-size:11px;letter-spacing:.2em;color:rgba(242,238,230,.75);border:1px solid rgba(242,238,230,.3);padding:9px 18px;transition:all .3s;background:none;font-family:var(--sans)}
.x-close:hover{background:var(--cream);color:var(--ink)}
#popA .fond{position:absolute;inset:0}
#popA .fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.1s ease,transform 9s linear;filter:saturate(.85) brightness(.74)}
#popA .fond img.on{opacity:1;transform:scale(1.11)}
.grainA{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
#popA .voA{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,4,.85),rgba(8,6,4,.16) 42%,rgba(8,6,4,.1) 68%,rgba(8,6,4,.66));pointer-events:none}
#popA .zone{position:absolute;top:110px;bottom:150px;width:26%;z-index:4;cursor:pointer}
#popA .zg{left:0}
#popA .zd{right:0}
#popA .hautA{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(18px,4vw,50px);z-index:6}
#popA .titreA{font-family:var(--serif);letter-spacing:.16em;font-size:14px;color:rgba(242,238,230,.85)}
#popA .marqueA{font-family:var(--serif);letter-spacing:.3em;font-size:13px;color:var(--gold)}
#popA .pieces{position:absolute;left:clamp(18px,4vw,54px);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:13px}
#popA .piece{cursor:pointer;font-size:11px;letter-spacing:.24em;color:rgba(242,238,230,.52);transition:color .3s;display:flex;gap:10px;align-items:baseline;position:relative;padding-left:0}
#popA .piece::before{content:"";position:absolute;left:-2px;top:50%;width:0;height:1px;background:var(--gold);transition:width .35s ease}
#popA .piece:hover{color:#F2EEE6}
#popA .piece.act{color:var(--gold);padding-left:26px}
#popA .piece.act::before{width:18px}
#popA .piece .ct{font-size:9px;color:rgba(242,238,230,.4)}
#popA .basA{position:absolute;right:clamp(18px,4vw,54px);bottom:44px;z-index:6;text-align:right;max-width:min(400px,80vw)}
#popA .filA{width:150px;height:1px;background:rgba(242,238,230,.22);margin:0 0 14px auto;position:relative;overflow:hidden}
#popA .filA i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
#popA .cptA{font-family:'Italiana',Georgia,serif;font-size:clamp(38px,4.8vw,62px);color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
#popA .nomA{font-family:var(--serif);font-size:16px;letter-spacing:.12em;margin-top:8px}
#popA .capA{font-family:'Lora',Georgia,serif;font-style:italic;font-size:13.5px;color:rgba(242,238,230,.66);margin-top:5px}
#popA .flA{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
#popA .fl{width:46px;height:46px;border:1px solid rgba(201,169,106,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);transition:all .3s;user-select:none}
#popA .fl:hover{background:var(--gold);color:var(--night)}
@media(max-width:760px){#popA .pieces{top:auto;bottom:170px;transform:none;flex-direction:row;flex-wrap:wrap;gap:9px 14px;right:clamp(18px,4vw,54px)}#popA .basA{bottom:36px}}
.bigfoot{background:var(--night);color:#A79C86}
.bf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,70px);padding:74px clamp(20px,6vw,120px) 50px}
.bf-mark{font-family:var(--serif);font-size:17px;letter-spacing:.24em;color:var(--cream);margin-bottom:16px}
.bf-tag{font-size:13.5px;line-height:1.7;color:#8F8672;max-width:34ch;margin-bottom:18px}
.bf-co{font-size:10.5px;letter-spacing:.18em;color:#6E6656}
.bf-h{font-size:10.5px;letter-spacing:.26em;color:var(--gold);margin-bottom:16px}
.bf-col{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.bf-col a{color:#A79C86;transition:color .3s}
.bf-col a:hover{color:var(--cream)}
.bf-mut{color:#6E6656}
.bf-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(246,242,234,.08);padding:24px clamp(20px,6vw,120px);font-size:11px;letter-spacing:.12em;color:#6E6656}
.bf-langs{display:flex;gap:12px}
.bf-langs b{font-weight:400;color:var(--gold)}
@media(max-width:900px){.bf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bf-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}#loader{display:none}}

/* ============ VSF signature ============ */
.footer-credit{display:inline-flex;align-items:center;gap:9px;font-family:"League Spartan",sans-serif}
.footer-credit .credit-text{font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:none;color:rgba(246,242,234,.55)}
.footer-credit .credit-heart{width:19px;height:19px;fill:var(--gold);animation:heartBeat 1.5s ease-in-out infinite}
.footer-credit .credit-agency{font-weight:700;font-size:15px;letter-spacing:.14em;color:rgba(246,242,234,.9);text-decoration:none}
.footer-credit .credit-agency:hover{color:var(--gold)}
@keyframes heartBeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(1.2)}20%,40%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.footer-credit .credit-heart{animation:none}}

/* ============ mobile ============ */
.hd-brand{display:none;font-family:'Italiana',Georgia,serif;font-size:21px;letter-spacing:.2em;color:#F2EEE6}
@media(max-width:960px){.hd-brand{display:block}}
@media(max-width:700px){
  .hero .mid{top:40%}
  .h-rule{display:none}
  .h-sub{font-size:11px;letter-spacing:.16em;padding:0 16px;margin-top:16px}
  .hbar{background:none;backdrop-filter:none;gap:0;left:16px;right:16px;bottom:22px}
  .hbar>div{display:none}
  .hbar .go{flex:1 1 auto;padding:17px;font-size:11.5px}
  .qtr-inst{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .qtr-inst svg{min-width:560px}
  .ap-media{padding:0 0 46px 0}
  .fq-q{padding:20px 18px;gap:14px}
  .fq-a p{margin-left:18px;padding-right:18px;margin-bottom:20px}
  .dest-cta{bottom:34px;padding:0 20px}
  .basA{max-width:calc(100vw - 36px)}
}
@media(max-width:860px){
  .lv-left{width:100%;flex:0 0 auto}
  .lv-right{width:100%;flex:0 0 auto}
  .lv-stage{width:100%;min-height:300px}
}

/* ============ la visite privée, mobile ============ */
@media(max-width:760px){
  #popA .hautA{padding:16px 16px;gap:10px}
  #popA .titreA{font-size:11px;letter-spacing:.14em;white-space:nowrap}
  #popA .marqueA{display:none}
  #popA .pieces{position:absolute;top:56px;left:0;right:0;bottom:auto;transform:none;
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:18px;padding:10px 16px 14px;scrollbar-width:none;
    background:linear-gradient(180deg,rgba(8,6,4,.6),transparent)}
  #popA .pieces::-webkit-scrollbar{display:none}
  #popA .piece{white-space:nowrap;font-size:10px;letter-spacing:.18em}
  #popA .piece.act{padding-left:0}
  #popA .piece::before{display:none}
  #popA .zone{top:120px;bottom:170px}
  #popA .basA{right:16px;left:16px;bottom:20px;max-width:none;text-align:right}
  #popA .filA{width:110px;margin-bottom:10px}
  #popA .cptA{font-size:30px}
  #popA .nomA{font-size:13px;margin-top:5px}
  #popA .capA{font-size:11.5px;margin-top:3px}
  #popA .flA{margin-top:10px}
  #popA .fl{width:40px;height:40px}
}

/* ============ DISPONIBILITÉS ============ */
.dispo{background:var(--cream);position:relative}
.dispo-in{display:flex;gap:clamp(36px,5vw,86px);padding:clamp(70px,9vw,118px) 0;align-items:flex-start}
.dispo-say{flex:0 0 34%;min-width:0}
.dispo-t{font-family:'Italiana',Georgia,serif;font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1.05;margin:22px 0 0}
.dispo-p{font-family:var(--serif);font-size:16.5px;line-height:1.65;color:var(--ink2);margin:14px 0 0;max-width:38ch;text-wrap:pretty}

.dispo-key{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:26px 0 0;padding:0;font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.dispo-key li{display:flex;align-items:center;gap:8px}
.dispo-key i{width:13px;height:13px;flex:none;border:1px solid var(--line);background:#fff}
.dispo-key .k-taken{background:#E2DACB;border-color:#CFC6B4;position:relative;overflow:hidden}
.dispo-key .k-taken::after{content:"";position:absolute;inset:-2px;border-top:1px solid #A79C86;transform:rotate(-45deg);transform-origin:center}
.dispo-key .k-pick{background:var(--gold);border-color:var(--gold)}

.dispo-panel{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.dp-line{font-size:11.5px;letter-spacing:.2em;color:var(--green);text-transform:uppercase}
.dp-say{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink);margin-top:10px;min-height:2.6em}
.dp-say .dp-no{color:#8A4B3C}
.dp-say .dp-span{display:block;font-family:'Italiana',Georgia,serif;font-size:26px;letter-spacing:.02em;margin-bottom:4px;color:var(--ink)}
.dp-act{display:flex;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap}
.dp-go{background:var(--gold);color:var(--night);padding:15px 30px;font-size:11.5px;letter-spacing:.2em;font-weight:600;transition:background .3s,opacity .3s}
.dp-go:hover{background:#D8BC85}
.dp-go.is-off{opacity:.32;pointer-events:none}
.dp-clear{background:none;border:0;font-family:inherit;font-size:11.5px;letter-spacing:.14em;color:var(--muted);cursor:pointer;padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.dp-clear:hover{color:var(--ink);border-color:var(--line)}

/* the dark card */
.dispo-cal{flex:1;min-width:0;background:var(--night);padding:clamp(22px,2.4vw,38px);position:relative}
.dispo-off{color:#CFC6B4;font-family:var(--serif);font-size:17px;line-height:1.6;margin:0;max-width:44ch}
.cal-bar{position:absolute;top:clamp(22px,2.4vw,38px);left:clamp(22px,2.4vw,38px);right:clamp(22px,2.4vw,38px);display:flex;justify-content:space-between;pointer-events:none}
.cal-arrow{pointer-events:auto;background:none;border:1px solid rgba(201,169,106,.4);color:var(--gold);width:34px;height:34px;font-size:19px;line-height:1;cursor:pointer;transition:background .3s,border-color .3s;font-family:inherit}
.cal-arrow:hover{background:rgba(201,169,106,.14);border-color:var(--gold)}
.cal-arrow:disabled{opacity:.25;cursor:default}
.cal-months{display:flex;gap:clamp(24px,3vw,48px)}
.cal-m{flex:1;min-width:0}
.cal-name{font-family:'Italiana',Georgia,serif;font-size:20px;letter-spacing:.14em;color:#F2EEE6;text-align:center;margin-bottom:16px;height:34px;line-height:34px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:10px;letter-spacing:.1em;color:rgba(201,169,106,.75);padding-bottom:6px;border-bottom:1px solid rgba(242,238,230,.1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14.5px;background:none;border:0;padding:0;color:#EFE9DC;position:relative}
.cal-d.is-void{visibility:hidden}
.cal-d.is-free{cursor:pointer;transition:background .25s,color .25s}
.cal-d.is-free:hover{background:rgba(201,169,106,.18)}
.cal-d.is-free:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
.cal-d.is-taken,.cal-d.is-gone{color:rgba(239,233,220,.26)}
.cal-d.is-taken::after{content:"";position:absolute;left:26%;right:26%;top:50%;height:1px;background:rgba(201,169,106,.45);transform:rotate(-28deg)}
.cal-d.is-gone{color:rgba(239,233,220,.14)}
/* a chosen stay */
.cal-d.in-range{background:rgba(201,169,106,.2)}
.cal-d.is-edge{background:var(--gold);color:var(--night)}
.cal-d.is-hint{background:rgba(201,169,106,.12)}

@media(max-width:1080px){
  .dispo-in{flex-direction:column;gap:34px}
  .dispo-say{flex:auto;width:100%}
  .dispo-cal{width:100%}
  .dispo-p{max-width:none}
}
@media(max-width:720px){
  .cal-months{gap:0}
  .cal-m:nth-child(2){display:none}
  .cal-d{font-size:13.5px}
  .dp-act{gap:12px}
  .dp-go{flex:1;text-align:center;padding:15px 12px}
}

/* The one taken night a guest may still leave on. It stays crossed out, because
   the night really is sold, but it becomes reachable and says so on hover. */
.cal-d.is-taken{cursor:default}
.cal-d.is-taken.can-leave{cursor:pointer;color:rgba(239,233,220,.62)}
.cal-d.is-taken.can-leave:hover{background:rgba(201,169,106,.18)}
.cal-d.is-taken.can-leave::after{background:rgba(201,169,106,.7)}
.cal-d.is-taken.can-leave:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
/* Once chosen it is an endpoint of the stay, so the strike gets out of the way. */
.cal-d.is-edge::after{display:none}

/* ============ LA DEMANDE ============ */
.bkg{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.bkg[hidden]{display:none}
.bkg-veil{position:absolute;inset:0;background:rgba(20,17,12,.72);backdrop-filter:blur(3px);animation:bkgFade .4s ease}
@keyframes bkgFade{from{opacity:0}to{opacity:1}}
@keyframes bkgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bkg-card{position:relative;display:flex;width:min(980px,100%);max-height:92vh;overflow:auto;background:var(--cream);animation:bkgRise .45s cubic-bezier(.2,.7,.3,1)}
.bkg-x{position:absolute;top:14px;right:16px;z-index:2;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;font-family:inherit;transition:color .3s}
.bkg-x:hover{color:var(--ink)}

.bkg-side{flex:0 0 36%;background:var(--night);color:#EFE9DC;padding:clamp(26px,3vw,44px)}
.bkg-side .eyebrow{color:var(--gold);border-color:rgba(201,169,106,.45);flex:auto}
.bkg-t{font-family:'Italiana',Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,38px);margin:18px 0 0;line-height:1.1}
.bkg-stay{font-family:var(--serif);font-size:17px;line-height:1.5;margin-top:20px;padding-top:18px;border-top:1px solid rgba(242,238,230,.16);color:var(--gold)}
.bkg-sub{font-size:13.5px;line-height:1.6;color:rgba(239,233,220,.62);margin-top:16px}

.bkg-form{flex:1;min-width:0;padding:clamp(26px,3vw,44px)}
.bkg-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bkg-row{margin-bottom:16px}
.bkg-two{display:flex;gap:16px}
.bkg-two .bkg-f{flex:1;min-width:0}
.bkg-f{display:block}
.bkg-f>span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bkg-f>span i{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.7}
.bkg-f input,.bkg-f select,.bkg-f textarea{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);background:#FBF8F2;border:1px solid var(--line);padding:12px 14px;transition:border-color .3s;border-radius:0;-webkit-appearance:none;appearance:none}
.bkg-f select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bkg-f input:focus,.bkg-f select:focus,.bkg-f textarea:focus{outline:0;border-color:var(--gold)}
.bkg-f textarea{resize:vertical;min-height:76px;line-height:1.5}
.bkg-f.is-bad input,.bkg-f.is-bad select,.bkg-f.is-bad textarea{border-color:#A9603F}
.bkg-e{display:block;font-size:12.5px;color:#8A4B3C;margin-top:5px;font-style:normal;min-height:0}
.bkg-e:empty{display:none}
.bkg-top{margin:0 0 14px;font-size:13.5px}

.bkg-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.bkg-go{background:var(--gold);color:var(--night);border:0;padding:15px 32px;font-family:inherit;font-size:11.5px;letter-spacing:.2em;font-weight:600;cursor:pointer;transition:background .3s,opacity .3s}
.bkg-go:hover{background:#D8BC85}
.bkg-go[disabled]{opacity:.45;cursor:default}
.bkg-back{background:none;border:0;font-family:inherit;font-size:11.5px;letter-spacing:.14em;color:var(--muted);cursor:pointer;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.bkg-back:hover{color:var(--ink);border-color:var(--line)}
.bkg-legal{font-size:11.5px;line-height:1.6;color:var(--muted);margin:18px 0 0}

.bkg-done{flex:1;min-width:0;padding:clamp(30px,4vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bkg-done[hidden]{display:none}
.bkg-done p{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--ink2);margin:8px 0 0;max-width:40ch}
.bkg-ref{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.bkg-ref b{font-family:'Italiana',Georgia,serif;font-size:19px;letter-spacing:.1em;color:var(--gold)}
.bkg-done .bkg-go{margin-top:26px}

@media(max-width:860px){
  .bkg{padding:0;align-items:flex-end}
  .bkg-card{flex-direction:column;width:100%;max-height:96vh}
  .bkg-side{flex:none;padding:22px 22px 20px}
  .bkg-side .bkg-sub{display:none}
  .bkg-t{margin-top:12px}
  .bkg-stay{margin-top:12px;padding-top:12px;font-size:16px}
  .bkg-form{padding:22px}
  .bkg-two{flex-direction:column;gap:16px}
  .bkg-act{gap:12px}
  .bkg-go{flex:1;text-align:center;padding:15px 12px}
}
.bkg-side{position:relative;overflow:hidden}
.bkg-ghost{position:absolute;right:-18%;bottom:-14%;height:66%;width:auto;color:var(--gold);opacity:.16;pointer-events:none}
@media(max-width:860px){.bkg-ghost{display:none}}

/* The price, which stays out of the way entirely until there is one to show. */
.dp-price:empty,.bkg-bill:empty{display:none}
.dp-price{font-family:'Italiana',Georgia,serif;font-size:30px;color:var(--ink);margin-top:6px;line-height:1.2}
.dp-price small{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--muted);display:block;margin-top:2px}
.bkg-bill{margin-top:22px;padding-top:18px;border-top:1px solid rgba(242,238,230,.16);font-size:13.5px}
.bkg-bill dl{display:flex;flex-wrap:wrap;margin:0}
.bkg-bill dt{flex:1 1 62%;color:rgba(239,233,220,.66);padding:5px 0}
.bkg-bill dd{flex:0 0 38%;margin:0;text-align:right;padding:5px 0;color:#EFE9DC;font-variant-numeric:tabular-nums}
.bkg-bill .is-off dd,.bkg-bill .is-off dt{color:var(--gold)}
.bkg-bill .is-sum{border-top:1px solid rgba(242,238,230,.16);margin-top:6px;padding-top:4px}
.bkg-bill .is-sum dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);align-self:center}
.bkg-bill .is-sum dd{font-family:'Italiana',Georgia,serif;font-size:26px;color:#F2EEE6}
.bkg-bill .is-per{font-size:11.5px;color:rgba(239,233,220,.5);text-align:right;margin-top:2px}

/* The bill sits above the decoration, and a total never breaks across lines. */
.bkg-bill{position:relative;z-index:1}
.bkg-bill .is-sum dt{flex:1 1 42%}
.bkg-bill .is-sum dd{flex:0 0 58%;white-space:nowrap;font-size:24px}
.bkg-side .bkg-ghost{opacity:.08;right:-26%;bottom:-20%;height:58%}
.bkg-bill .is-sum dd{line-height:1.15}

/* ============ LA MARQUE ============
   Le Chiffre gravé, Bodoni Moda. Every measurement is a multiple of --s, whose
   1 is the reference drawing: V and P at 108px, G at 138px, the name at 21px.
   Nothing here is retyped anywhere else. */
.vgp{--s:1;--gold:#C9A96A;--cream:#F6F2EA;--ink:#201C15;--green:#17564F;
     font-family:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;display:inline-flex;
     flex-direction:column;align-items:center;line-height:1;font-synthesis-weight:none}
.vgp.is-gold{color:var(--gold)}
.vgp.is-cream{color:var(--cream)}
.vgp.is-ink{color:var(--ink)}
.vgp.is-green{color:var(--green)}

/* the chiffre, its roof and its floor */
.vgp-chiffre{position:relative;display:inline-block;padding-top:calc(30px * var(--s))}
.vgp-toit{position:absolute;top:0;left:0;width:100%;height:calc(30px * var(--s));opacity:.55}
.vgp-lettres{display:flex;align-items:baseline;justify-content:center;gap:calc(4px * var(--s));
             padding:calc(18px * var(--s)) 0;border-bottom:1px solid currentColor}
.vgp-mark .vgp-lettres{border-bottom-color:color-mix(in srgb, currentColor 50%, transparent)}
.vgp-lettres b{font-weight:400;font-size:calc(108px * var(--s));line-height:.9;letter-spacing:.04em}
.vgp-lettres strong{font-weight:500;font-size:calc(138px * var(--s));line-height:.9;letter-spacing:.04em;margin:0 -.02em}

/* the two lines of the name, tracked to fall to the same width */
.vgp-nom{display:flex;flex-direction:column;align-items:center;gap:calc(9px * var(--s));margin-top:calc(26px * var(--s))}
.vgp-nom1{font-size:calc(21px * var(--s));letter-spacing:.40em;padding-left:.40em;color:var(--cream)}
.vgp-nom2{font-size:calc(21px * var(--s));letter-spacing:.82em;padding-left:.82em;color:color-mix(in srgb, var(--cream) 70%, transparent)}
.vgp.is-ink .vgp-nom1{color:var(--ink)}
.vgp.is-ink .vgp-nom2{color:color-mix(in srgb, var(--ink) 66%, transparent)}

/* the header bar: the chiffre first, then the name, divided by a rule */
.vgp-bar{flex-direction:row;align-items:baseline;gap:calc(14px * var(--s))}
.vgp-bar b{font-weight:500;font-size:calc(26px * var(--s));letter-spacing:.03em;color:var(--gold)}
.vgp-bar i{width:1px;height:calc(20px * var(--s));background:currentColor;opacity:.35;display:block;align-self:center}
.vgp-bar em{font-style:normal;font-weight:500;font-size:calc(21px * var(--s));letter-spacing:.16em;padding-left:.16em;white-space:nowrap}

/* one line, for a footer or a signature */
.vgp-line{font-weight:400;font-size:calc(20px * var(--s));letter-spacing:.30em;padding-left:.30em}

/* the sigle, for a tile */
.vgp-sigle{font-weight:500;font-size:calc(62px * var(--s));letter-spacing:.02em}

@media(max-width:640px){
  .vgp-bar em{letter-spacing:.10em;padding-left:.10em}
}

/* where the mark sits on the page */
.h-mark{margin:0;display:flex;justify-content:center}
.h-mark .vgp{--s:.78}
.ld-marque .t .vgp{--s:.9}
.hd-brand .vgp{--s:.72}
.bf-mark .vgp{--s:.30;align-items:flex-start}
.bf-mark .vgp-chiffre{align-self:flex-start}
.bf-mark .vgp-nom{align-items:flex-start}
@media(max-width:1100px){.h-mark .vgp{--s:.60}}
@media(max-width:760px){.h-mark .vgp{--s:.44}.hd-brand .vgp{--s:.62}}
@media(max-width:420px){.h-mark .vgp{--s:.34}.hd-brand .vgp em{display:none}.hd-brand .vgp i{display:none}}
/* The skip link. It has to stay in the tab order, so it is moved off the
   top of the page rather than hidden: display:none would take it out of
   the order entirely and there would be nothing to skip with. It lived in
   base.css, which the public page never loads, so it arrived unstyled and
   simply sat there in the corner reading "Naar de hoofdinhoud". Above the
   loader at z-index 100, because focus can reach it before the entrance
   animation has finished. */
.skip-link{position:fixed;top:0;left:12px;z-index:200;transform:translateY(-140%);
  padding:12px 20px;background:var(--green);color:var(--cream);
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-decoration:none;
  border-radius:0 0 4px 4px;box-shadow:0 6px 20px rgba(20,17,12,.35);
  transition:transform 160ms cubic-bezier(.22,1,.36,1)}
.skip-link:focus{transform:translateY(0)}
.skip-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.bkg-mark{margin-bottom:18px}
.bkg-mark .vgp{--s:.62}
.nf-mark{position:relative;margin-bottom:6px}
.nf-mark .vgp{--s:.26}
@media(min-width:1400px){.h-mark .vgp{--s:.95}}
/* the small header wears the mark itself, not the letters alone */
.hd-brand .vgp-crest{--s:.22}
.hd-brand .vgp-crest .vgp-lettres{border-bottom-color:currentColor}
@media(max-width:420px){.hd-brand .vgp-crest{--s:.19}}

/* ============ L'ENTRÉE, LE CHIFFRE QUI SE DESSINE ============
   The mark draws itself in gold, then the villa appears inside the letters.
   Every stroke is one path with pathLength 1, so a stroke of any real length
   animates on the same scale as its neighbours. */
/* Nudged left by the distance between the mark's two centres. The letters
   run from 0 to 237.64 so their middle is the box middle, but the roof's
   ridge is drawn at 124.76, the optical plumb of the G, because the P is
   narrower than the V. The rising line is at 50% of the screen, so it was
   passing through the gap between the V and the G and missing the peak by
   2.34% of the width. Shifting the mark by exactly that puts the ridge, the
   G and the line on one axis. Transform, not margin, so the flex centring
   and the film inside the letters all move together. */
#ldMark{width:min(62vw,560px);height:auto;display:block;overflow:visible;
  transform:translateX(-2.3419%)}
.ld-draw{stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
#ldFilm{opacity:0;transition:opacity .9s ease}
#ldFilm.is-lit{opacity:1}
.ld-frame{transition:opacity 1s ease}

/* Once the villa shows through, the gold outline steps back to a hairline so
   the photograph is the thing being looked at and not the drawing. */
#ldInk{transition:stroke-width .9s ease, opacity .9s ease}
#ldInk.is-quiet{stroke-width:.7;opacity:.55}

@media(max-width:760px){#ldMark{width:82vw}}
@media(prefers-reduced-motion:reduce){
  .ld-draw{stroke-dashoffset:0}
  #ldFilm{opacity:1}
}

/* ============ L'ENTRÉE, LA LIGNE ============
   The mark alone in the middle, a line rising through it, and at the end the
   ground parts along that line. Nothing above it, nothing beside it. */
#loader{background:none}
.ld-panel{position:absolute;top:0;bottom:0;width:50.2%;background:var(--cream);
          transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.ld-panel.is-l{left:0}
.ld-panel.is-r{right:0}
#loader.cut .ld-panel.is-l{transform:translateX(-100%)}
#loader.cut .ld-panel.is-r{transform:translateX(100%)}

.ld-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          transition:opacity .5s ease, transform 1.05s cubic-bezier(.76,0,.24,1)}
#loader.cut .ld-stage{opacity:0;transform:scale(1.04)}

/* The line up the middle, exactly as tall as the villa is loaded. */
.ld-rise{position:absolute;left:50%;bottom:0;width:1px;height:0;
         background:linear-gradient(to top,rgba(176,141,69,0),#B08D45 22%,#B08D45);
         transform:translateX(-.5px);transition:opacity .5s ease}

/* And at the top, the cut: out from the middle to both corners. */
.ld-cut{position:absolute;top:0;left:50%;height:1px;width:0;background:#B08D45;
        transform:translateX(-50%);transition:width .85s cubic-bezier(.62,0,.2,1)}
#loader.arrived .ld-cut{width:100%}
#loader.cut .ld-rise,#loader.cut .ld-cut{opacity:0;transition:opacity .35s ease}

@media(prefers-reduced-motion:reduce){
  .ld-panel,.ld-stage,.ld-cut{transition:none}
}

/* The hero plays a film. It behaves exactly as the photograph did: it fills the
   frame, it is never taller than its box, and it drifts a little on scroll. */
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
           background:var(--night)}
@media(prefers-reduced-motion:reduce){
  .hero-film{display:none}
  .hero{background:var(--night) center/cover no-repeat}
}