: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)}
/* The phone's language switch: the current language alone, in gold, with a
   hairline chevron, no box; the others fall in a column beneath it. Nothing
   native, since a native list cannot be dressed. */
.lang-menu{position:relative;display:flex;align-items:center}
.lang-cur{display:none;align-items:center;gap:7px;background:none;border:0;padding:8px 2px;
  color:var(--gold);font:inherit;font-size:11px;letter-spacing:.24em;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.lang-cur svg{transition:transform .3s}
.lang-menu.open .lang-cur svg{transform:rotate(180deg)}
@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}
/* Hidden on anything wide enough to read the chart's own labels. */
.qtr-phone{display:none}

@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}}
/* Stacked in one column, the four blocks made the footer as tall as a page.
   The two short link lists now sit side by side, the information block runs
   the full width underneath, and the padding comes in. */
@media(max-width:560px){
  .bf-grid{grid-template-columns:1fr 1fr;gap:28px 18px;padding:48px 20px 34px;text-align:center}
  .bf-brand,.bf-info{grid-column:1/-1}
  .bf-col{font-size:13px;gap:9px;align-items:center}
  .bf-h{margin-bottom:13px}
  .bf-tag{margin:0 auto 14px;max-width:30ch}
  .bf-info{gap:7px}
  /* The mark is built left aligned further down the sheet, so its own
     rules are answered here with a stronger selector, not by order. */
  .bigfoot .bf-mark .vgp,.bigfoot .bf-mark .vgp-nom{align-items:center}
  .bigfoot .bf-mark .vgp-chiffre{align-self:center}
  .bf-bottom{justify-content:center;text-align:center;gap:10px;padding:20px}
}
@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){
  /* Sat at 40 per cent, which on a tall phone leaves a third of the picture
     empty underneath and pushes the mark up under the bar. */
  .hero .mid{top:50%}
  .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}
  /* The chart fits whole and centred instead of scrolling sideways with the
     villa, its own centre, parked off the right edge. */
  .qtr-inst{overflow:visible;max-width:100%;width:100%}
  .qtr-inst svg{min-width:0;width:100%;height:auto;display:block}
  .qtr-desk{display:none}
  .qtr-phone{display:block}
  /* The current language alone; the others drop beneath it on a tap. */
  .lang-cur{display:inline-flex}
  .langs{display:none;position:absolute;top:calc(100% + 10px);right:-6px;flex-direction:column;gap:0;
    min-width:74px;padding:6px 0;background:rgba(12,11,9,.56);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.25);opacity:1}
  .langs::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--gold);opacity:.7}
  .langs a,.langs b{display:block;padding:12px 18px;font-size:11px;letter-spacing:.24em;text-align:center;
    color:rgba(242,238,230,.78)}
  .langs b{color:var(--gold)}
  .langs a:hover{color:var(--gold)}
  .lang-menu.open .langs{display:flex}
  /* Tap targets. The calendar arrows were well under the 44 pixels a finger
     needs. The padding grows, the type does not. */
  .cal-arrow{min-width:44px;min-height:44px}
  .dp-clear{min-height:44px;padding:0 12px}
  /* 9.5px is a squint on a phone. */
  .ap-facts span{font-size:11px;letter-spacing:.12em}
  .facts .l{font-size:11px}
  .bkg-f>span{font-size:11.5px}

  .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}}
/* On the narrowest phones RÉSERVER ran off the screen; here it tightens. */
@media(max-width:400px){
  header .cta{padding:11px 15px;letter-spacing:.16em}
  header{padding-left:14px;padding-right:14px}
}


/* ============ 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}
}

/* ============ second phone pass, measured 2026-09-07 ============
   Things the first pass missed at 320 to 390 pixels: labels under 11px,
   taps under 40px, a month name running under its arrows, six space names
   wrapping 2-1-2-1, and the gallery cue touching both edges. */
@media(max-width:720px){
  /* The month name gave way to the arrows; now it is set smaller between
     them and never wraps, and the nights stand 42 pixels tall. */
  .cal-name{font-size:17px;letter-spacing:.08em;padding:0 46px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cal-d{aspect-ratio:auto;height:42px}
  .cal-dow span{font-size:11px}
}
@media(max-width:700px){
  .lang-cur{min-height:44px}
  /* Six names, one under the other, evenly spaced. */
  .dest-names{gap:6px;align-items:center;text-align:center}
  .dest-row{flex-direction:column;gap:6px;align-items:center}
  /* The cue under the walk wraps inside the screen instead of touching it. */
  .walk .cue{font-size:10.5px;letter-spacing:.2em;padding:0 18px 3px;white-space:normal;max-width:100%}
  #galBadge span{font-size:10.5px}
  /* Labels that were 9.5 to 10.5px. */
  .lv-k,.lv-by,.qtr-note,.bf-co,.bf-h,#popA .piece{font-size:11px}
  .qtr-note{letter-spacing:.14em}
  #popA .piece .ct{font-size:10px}
  .x-close{padding:12px 18px}
  /* The fifth fact no longer sits alone in a half row, and the right column
     loses the rule that ran to nothing. */
  .ap-facts div:nth-child(2n){border-right:0}
  .ap-facts div:last-child{flex-basis:100%}
}
/* The guest book dots are seven pixels wide by design; the thumb gets an
   invisible 35 pixel square around each. */
.lv-dots span{position:relative}
.lv-dots span::after{content:"";position:absolute;inset:-14px}
@media(max-width:560px){
  /* Footer taps: same look, more to press. */
  .bf-col{gap:0}
  .bf-col a{padding:6px 0}
  .bf-langs{gap:2px}
  .bf-langs a,.bf-langs b{padding:10px 8px}
}
/* On the narrowest phones "Septembre 2026" still wanted 150 pixels between
   two 44 pixel arrows in a 236 pixel card. The arrows keep their height and
   give up six pixels of width, the name sets a size smaller. */
@media(max-width:360px){
  .cal-name{font-size:15.5px;letter-spacing:.05em;padding:0 40px}
  .cal-arrow{min-width:38px;width:38px}
}