/* Styles propres a la page d'accueil.
   Ils vivaient dans le <style> inline de index.html ; ici ils sont charges
   uniquement quand un widget de l'accueil est present sur la page. */

/* ============ TOKENS ============ */
:root{
  --ink:#071710;--pine:#0D3A1D;--green:#18592F;--gold:#B08B3E;--gold-bright:#C9A45C;
  --ivory:#F3ECD9;--cream:#EBE2C8;--paper:#F7F2E4;
  --line:rgba(176,139,62,.32);--line-dark:rgba(176,139,62,.26);
  --serif:'Cormorant Garamond',serif;--mono:'DM Mono',monospace;--sans:'Inter',sans-serif;
  --step--1:clamp(.78rem,.74rem + .2vw,.9rem);
  --step-0:clamp(1rem,.96rem + .25vw,1.125rem);
  --step-1:clamp(1.3rem,1.2rem + .6vw,1.7rem);
  --step-2:clamp(1.8rem,1.5rem + 1.4vw,2.6rem);
  --step-3:clamp(2.4rem,1.9rem + 2.6vw,4rem);
  --step-4:clamp(3.2rem,2.2rem + 5vw,6.2rem);
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --r:4px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.display{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:.005em;text-wrap:balance}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
section[id]{scroll-margin-top:84px}

/* progress / loader / cursor / skip */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.loader{position:fixed;inset:0;z-index:400;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:clip-path .8s var(--ease)}
.loader img{height:86px;animation:lg 1s var(--ease) both}
.loader span{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.85}
@keyframes lg{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.cur{position:fixed;z-index:300;left:0;top:0;pointer-events:none;display:none}
@media (pointer:fine){.cur{display:block}}
.cur .ring{position:absolute;width:34px;height:34px;border:1px solid rgba(176,139,62,.6);border-radius:50%;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s;display:grid;place-items:center}
.cur.big .ring{width:66px;height:66px;background:rgba(176,139,62,.12);backdrop-filter:blur(2px)}
.cur .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);opacity:0;transition:opacity .25s}
.cur.lblon .lbl{opacity:1}
.skip{position:fixed;top:-60px;left:24px;z-index:300;background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:var(--r);transition:top .3s}
.skip:focus{top:18px}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:13px clamp(20px,4vw,52px);color:var(--ivory);transition:background .45s var(--ease),color .45s,box-shadow .45s,padding .45s}
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,23,16,.5),rgba(7,23,16,0));transition:opacity .5s var(--ease)}
header.solid{background:rgba(244,238,221,.92);backdrop-filter:blur(16px) saturate(1.08);color:var(--pine);box-shadow:0 1px 0 rgba(176,139,62,.3),0 12px 34px rgba(7,23,16,.07);padding-top:9px;padding-bottom:10px}
header.solid::before{opacity:0}
.h-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:16px}
.h-inner>.lang{flex:1}
.h-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
header.solid .h-center{gap:6px}
.logo{flex:0 0 auto;display:block;line-height:0}
.logo img{height:54px;width:auto;transition:height .4s var(--ease)}
.logo .lg-dark{display:none}
header.solid .logo img{height:47px}
header.solid .lg-light{display:none}
header.solid .lg-dark{display:block}
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav a{position:relative;padding:7px 0;opacity:.92;transition:opacity .3s,color .3s}
.nav a:hover{opacity:1;color:var(--gold-bright)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:50% 50%;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.h-inner>.h-right{flex:1;justify-content:flex-end}
.h-right{display:flex;align-items:center;gap:16px}
.h-sep{display:none}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang a{background:none;border:none;text-decoration:none;cursor:pointer;color:inherit;padding:5px 5px;opacity:.55;position:relative;transition:opacity .3s,color .3s}
.lang a:hover,.lang a:focus-visible{opacity:1;color:var(--gold-bright)}
.lang a[aria-current="true"]{opacity:1;color:var(--gold)}
.lang a[aria-current="true"]::after{content:"";position:absolute;left:5px;right:5px;bottom:2px;height:1.5px;background:var(--gold);border-radius:2px}
.btn{min-height:46px;text-align:center;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:14px 26px;border:none;border-radius:var(--r);transition:transform .3s var(--ease),background .3s;will-change:transform}
.btn:hover{transform:translateY(-2px);background:var(--gold-bright)}
.btn.ghost{background:transparent;color:inherit;border:1px solid var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:12px;color:inherit;align-items:center}

/* full-screen menu (lumina) */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--ivory);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,5vw,72px);padding:0 clamp(24px,7vw,110px);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-links a{font-family:var(--serif);font-size:clamp(2rem,6vw,4.4rem);line-height:1.16;display:flex;align-items:baseline;gap:22px;padding:6px 0;opacity:0;transform:translateY(24px)}
.menu.open .menu-links a{opacity:.85;transform:none;transition:opacity .55s var(--ease),transform .65s var(--ease),letter-spacing .4s var(--ease),color .3s;transition-delay:calc(.15s + var(--i) * .06s)}
.menu.open .menu-links a:hover{opacity:1;letter-spacing:.02em;color:var(--gold-bright)}
.menu-links a i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--gold)}
.menu-figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.menu-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.5s var(--ease)}
.menu-figure img.on{opacity:1;transform:scale(1)}
.menu-figure figcaption{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.menu .close{position:absolute;top:24px;right:clamp(20px,4vw,52px);background:none;border:1px solid var(--line);border-radius:50%;width:52px;height:52px;color:var(--ivory);font-size:20px}

/* ============ HERO (parallax day -> night) ============ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;color:var(--ivory);display:grid;place-items:end center}
.hero-depth{position:absolute;inset:-8%;will-change:transform}
.hero-media{position:absolute;inset:0;background:center/cover no-repeat;animation:drift 22s var(--ease) forwards}
.hero-media.night{opacity:0}
/* Les deux jeux d'images du hero sont derriere une media query exclusive.
   Poser le jeu desktop sans condition faisait telecharger les quatre
   fichiers sur mobile (1,6 Mo au lieu de 0,4). */
@media (min-width:601px){
  .hero-media{background-image:url(images/hero-day.jpg)}
  .hero-media.night{background-image:url(images/hero-dusk.jpg)}
  .finale .bg{background-image:url(images/hero-dusk.jpg)}
}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
/* The title band sits between roughly 20% and 55% of the frame. At .06 the
   gradient left white type sitting on full daylight; .26 holds the words
   without flattening the photograph. */
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,23,16,.52),rgba(7,23,16,.26) 30%,rgba(7,23,16,.30) 62%,rgba(7,23,16,.80))}
.hero-inner{position:relative;z-index:3;text-align:center;padding:0 24px;margin-bottom:max(19svh,150px);will-change:transform,opacity}
.hero .k{color:var(--cream);letter-spacing:.44em;display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:26px}
.hero .k i{height:1px;width:54px;background:var(--gold);opacity:.7}
.hero h1{font-size:var(--step-4);max-width:16ch;margin:0 auto;text-shadow:0 2px 40px rgba(7,23,16,.4)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
@keyframes rise{to{transform:translateY(0)}}
.hero p.sub{margin:26px auto 0;max-width:52ch;font-size:var(--step-0);opacity:.94}
.book{position:absolute;left:50%;bottom:clamp(22px,5svh,48px);transform:translateX(-50%);z-index:5;width:min(940px,calc(100% - 40px))}
.book-card{display:grid;grid-template-columns:1fr 1fr 1fr auto;background:rgba(243,236,217,.9);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:6px;box-shadow:0 30px 80px rgba(7,23,16,.45);overflow:hidden}
.book-card label{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-right:1px solid var(--line);color:var(--pine)}
.book-card label span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.book-card input,.book-card select{border:none;background:none;color:var(--pine);font-size:15px;font-family:var(--sans);outline:none}
.book-card .btn{border-radius:0;align-self:stretch;padding:0 34px}
.book-note{text-align:center;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.scue{position:absolute;left:clamp(18px,3vw,44px);bottom:26px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.9;transition:opacity .6s var(--ease)}
.scue.hide{opacity:0}
.scue span{writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.scue .ln{width:1px;height:52px;background:rgba(243,236,217,.28);position:relative;overflow:hidden}
.scue .ln::after{content:"";position:absolute;left:0;top:0;width:1px;height:42%;background:var(--gold-bright);animation:scdrop 2s var(--ease) infinite}
@keyframes scdrop{0%{transform:translateY(-100%)}70%,100%{transform:translateY(240%)}}

/* section shell */
.wrap{max-width:1280px;margin:0 auto;padding:var(--s7) clamp(20px,4.5vw,52px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:var(--s5);flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:var(--step-3);line-height:1.02;max-width:18ch}
.sec-head .k{white-space:nowrap}
[data-io]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-io].in{opacity:1;transform:none}
[data-io] h2{clip-path:inset(0 0 110% 0);transition:clip-path 1.1s var(--ease) .08s}
[data-io].in h2{clip-path:inset(-12% 0 -12% 0)}

/* manifesto */
.manifesto{background:var(--ivory)}
.manifesto .wrap{max-width:1080px;text-align:center}
.manifesto p{font-family:var(--serif);font-weight:400;font-size:var(--step-2);line-height:1.4;color:var(--pine)}
.manifesto p .w{opacity:.14;transition:opacity .5s var(--ease)}
.manifesto p .w.on{opacity:1}
.manifesto em{font-style:italic;color:var(--gold)}
.rule{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:var(--s4)}
.rule span{height:1px;width:72px;background:var(--gold)}

/* bento */
.estate{background:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:118px;gap:14px}
.tile{position:relative;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);transform-style:preserve-3d}
.tile:hover{transform:translateY(-5px);box-shadow:0 30px 60px rgba(7,23,16,.12)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile .gl{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(420px at var(--gx,50%) var(--gy,50%),rgba(255,246,220,.16),transparent 60%);opacity:0;transition:opacity .35s}
.tile:hover .gl{opacity:1}
.tile .cap{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--ivory);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.tile.img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,23,16,.55))}
.tile.stat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:26px;background:var(--pine);color:var(--ivory);border:none}
.tile.stat b{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:1;color:var(--gold-bright)}
.tile.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.tile.quote{display:flex;align-items:center;padding:28px;background:var(--cream);border:none}
.tile.quote p{font-family:var(--serif);font-style:italic;font-size:var(--step-1);line-height:1.3;color:var(--green)}
.tile.strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 26px;background:var(--ink);color:var(--cream);border:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;flex-wrap:wrap}
.t-a{grid-column:span 7;grid-row:span 3}.t-b{grid-column:span 5;grid-row:span 2}
.t-c{grid-column:span 5;grid-row:span 1}.t-d{grid-column:span 4;grid-row:span 2}
.t-e{grid-column:span 4;grid-row:span 2}.t-f{grid-column:span 4;grid-row:span 2}.t-g{grid-column:span 12;grid-row:span 1}

/* ============ STAYS (horizontal journey) ============ */
.stays{background:var(--ivory)}
.journey{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 26px;scrollbar-width:none;cursor:grab}
.journey::-webkit-scrollbar{display:none}
.journey.drag{cursor:grabbing;scroll-snap-type:none}
.stay{flex:0 0 min(78vw,460px);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.stay figure{position:relative;overflow:hidden;aspect-ratio:4/3}
.stay figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.stay:hover figure img{transform:scale(1.06)}
.stay .tag{position:absolute;top:14px;left:14px;background:var(--pine);color:var(--ivory);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:3px}
.stay .body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.stay h3{font-family:var(--serif);font-weight:500;font-size:1.75rem;color:var(--pine);line-height:1.05}
.stay .facts{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a8570}
.stay .price{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold)}
.stay p.d{font-size:.95rem;flex:1;opacity:.85}
.stay .row{display:flex;gap:10px;margin-top:12px}
.stay .row .btn{flex:1;justify-content:center;padding:13px 10px;font-size:10.5px}
.j-nav{display:flex;gap:10px}
.j-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);background:none;color:var(--pine);display:grid;place-items:center;transition:background .3s,color .3s}
.j-nav button:hover{background:var(--gold);color:var(--ink)}
.j-track{height:1px;background:var(--line);margin-top:4px;position:relative;overflow:hidden}
.j-track span{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(.25);transition:transform .2s linear}
.j-count{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold)}
.j-count b{color:var(--pine)}

/* chapters */
.chapter{color:var(--ivory)}
.chapter .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.chapter figure{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;max-height:640px}
.chapter figure img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.14)}
.chapter figure figcaption{position:absolute;left:18px;bottom:16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.9}
.chapter h2{font-family:var(--serif);font-weight:400;font-size:var(--step-3);line-height:1.04;margin:18px 0 22px}
.chapter p{color:var(--cream);max-width:50ch}
.chapter .btn{margin-top:30px}
.table-ch{background:var(--green)}
.hammam-ch{background:var(--pine)}
.collection-ch{background:var(--ink)}
.hammam-ch .wrap>div:first-child{order:2}
figure[data-io]{clip-path:inset(9% 6% 9% 6% round 26px);transition:clip-path 1.3s var(--ease),opacity 1s var(--ease),transform 1s var(--ease)}
figure[data-io].in{clip-path:inset(0 0 0 0 round 10px)}

/* experiences */
.exps{background:var(--ink);color:var(--ivory)}
.exps .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,80px)}
.exp-list{border-top:1px solid var(--line-dark)}
.exp{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:22px;padding:26px 6px;border-bottom:1px solid var(--line-dark);transition:padding .35s var(--ease),background .35s}
.exp:hover{background:rgba(176,139,62,.06);padding-left:18px}
.exp i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--gold)}
.exp h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1}
.exp span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.6}
.exp-side{position:sticky;top:120px;border-radius:10px;overflow:hidden;aspect-ratio:3/4;display:none}
.exp-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.exp-side img.on{opacity:1}
@media (min-width:901px){.exp-side{display:block}}

/* gallery marquee */
/* The two marquee rows are 3870px wide by design and slide horizontally.
   Without a clip here they widened the document to ~3863px, which put a
   stray horizontal scrollbar on the whole page. */
.gal{background:var(--ink);padding:0 0 var(--s6);overflow:hidden}
/* The rows are wider than the viewport on purpose and slide horizontally.
   Clipping the section stops the stray page-wide scrollbar; nowrap keeps
   the tiles on one line inside that clip. */
.gal .m-row{flex-wrap:nowrap;will-change:transform}
.m-row{display:flex;flex-wrap:nowrap;gap:14px;width:max-content}
.m-row.rev{margin-top:14px}
.m-row a{flex:none;width:clamp(240px,26vw,400px);aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.m-row img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.m-row a:hover img{transform:scale(1.05)}

/* proof — elegant carousel */
.proof{background:var(--green);color:var(--ivory)}
.proof-in{max-width:860px;margin:0 auto;padding:var(--s7) clamp(20px,4.5vw,52px);text-align:center}
.proof-in>.k{display:block;margin-bottom:30px;color:var(--gold-bright)}
.q-rot{display:grid;min-height:9.5em}
.q-rot figure{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.q-rot figure.on{opacity:1;transform:none;pointer-events:auto}
.q-rot blockquote{font-family:var(--serif);font-weight:400;font-style:italic;font-size:var(--step-2);line-height:1.3;max-width:26ch;margin:0 auto}
.q-rot cite{display:block;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);font-style:normal}
.q-foot{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:40px}
.q-dots{display:flex;gap:11px}
.q-dots button{width:34px;height:3px;border:none;border-radius:2px;background:rgba(243,236,217,.25);padding:0;overflow:hidden;position:relative}
.q-dots button span{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.q-dots button[aria-current="true"] span{animation:qfill 5s linear forwards}
@keyframes qfill{to{transform:scaleX(1)}}
.badges{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.85}
.badges b{color:var(--gold-bright);font-weight:500}

/* finale */
.finale{position:relative;min-height:82svh;display:grid;place-items:center;text-align:center;color:var(--ivory);overflow:hidden}
.finale .bg{position:absolute;inset:-6%;background:center/cover no-repeat}
.finale .scrim{position:absolute;inset:0;background:rgba(7,23,16,.6)}
.finale .in{position:relative;z-index:2;padding:var(--s6) 24px}
.finale h2{font-family:var(--serif);font-weight:400;font-size:var(--step-4);line-height:1;max-width:14ch;margin:18px auto 30px}

/* footer */
.foot{background:var(--ink);color:var(--cream);padding:var(--s6) clamp(20px,4.5vw,52px) 0;overflow:hidden}
.foot-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:var(--s5)}
.foot h4{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot a{opacity:.85;transition:opacity .3s,color .3s}
.foot a:hover{opacity:1;color:var(--gold-bright)}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.news{display:flex;border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden}
.news input{flex:1;background:none;border:none;padding:13px 14px;color:var(--ivory);font-size:14px;outline:none;min-width:0}
.news button{background:var(--gold);border:none;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 18px}
.foot-bar{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;opacity:.6}
.wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,12.5vw,12rem);line-height:.9;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(176,139,62,.4);user-select:none;transform:translateY(18%);white-space:nowrap;display:block;transition:color .9s var(--ease)}
.wordmark:hover{color:rgba(176,139,62,.22)}

/* floating CTA */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab .wa{width:54px;height:54px;border-radius:50%;background:var(--green);border:1px solid var(--gold);display:grid;place-items:center;box-shadow:0 12px 30px rgba(7,23,16,.4)}
.fab .btn{box-shadow:0 12px 30px rgba(7,23,16,.4)}

/* responsive */
@media (max-width:900px){.nav,.h-inner>.lang{display:none}.burger{display:inline-flex}}
@media (max-width:900px){
  .book-card{grid-template-columns:1fr 1fr}.book-card .btn{grid-column:1/-1;padding:18px}
  .bento{grid-auto-rows:96px}
  .t-a{grid-column:span 12;grid-row:span 3}.t-b{grid-column:span 6;grid-row:span 2}.t-c{grid-column:span 6;grid-row:span 2}.t-d{grid-column:span 6;grid-row:span 2}.t-e{grid-column:span 6;grid-row:span 2}.t-f{grid-column:span 12;grid-row:span 2}
  .chapter .wrap,.exps .wrap{grid-template-columns:1fr}
  .menu{grid-template-columns:1fr}.menu-figure{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  /* --step-4 tops out at 6.2rem, which is far too large once the hero is only
     342px wide: the title took half the screen and pushed the booking card
     off the fold. Tighten type and spacing so hero + form fit one screen. */
  .hero h1{font-size:clamp(2.1rem,10.5vw,3rem);max-width:14ch;line-height:1.05}
  .hero .lede,.hero p{font-size:.95rem}
  .hero .eyebrow,.hero .k{font-size:9.5px;letter-spacing:.24em}
  /* The booking card is absolutely positioned over the hero on desktop.
     On a phone there is no room for both, so the hero becomes a normal
     stack: image and title on top, card in the flow underneath. */
  .hero{height:auto!important;min-height:0!important;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:22px}
  .hero-inner{position:relative;z-index:4;padding:104px 18px 14px}
  .book{position:relative;left:auto;bottom:auto;transform:none;width:100%;z-index:5;padding:0 16px;margin-top:auto}
  .book-card{grid-template-columns:1fr}.book-card label{border-right:none;border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr}.exp{grid-template-columns:44px 1fr}.exp span{display:none}
  .scue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-io],figure[data-io]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-io] h2{clip-path:none!important}
  .hero h1 .line>span{transform:none}.manifesto p .w{opacity:1}
  .loader{display:none}.cur{display:none!important}
  .chapter figure img{transform:none}
}

/* ---- hero on a phone -------------------------------------------------
   The scrim was tuned for the desktop layout, where the title sits high in
   the frame. On a portrait screen the title lands at 30-50% of the hero,
   exactly where the gradient is at its lightest (.06), so white type fell
   onto a bright, busy photograph. Deepen the middle of the gradient on
   small screens only -- the picture still reads, the words now do too. */
@media (max-width:600px){
  /* A 3:2 photograph in a portrait frame shows only its middle third, and for
     the daytime hero that third was the awning and the yellow wall -- busy,
     bright, and no place for white type. These two files are portrait crops
     chosen for a calm upper band: sky and palms behind the title. */
  .hero-media{background-image:url(images/hero-day-m.jpg)}
  .hero-media.night{background-image:url(images/hero-dusk-m.jpg)}
  .finale .bg{background-image:url(images/hero-dusk-m.jpg)}
  .hero-scrim{background:linear-gradient(180deg,
    rgba(7,23,16,.64), rgba(7,23,16,.44) 34%,
    rgba(7,23,16,.46) 62%, rgba(7,23,16,.84))}
  /* The gold rules flanking the eyebrow assume one line; the label wraps to
     two on a phone and they ended up crossing the second line. */
  .hero .k i{display:none}
  .hero .k{gap:0}
}

/* index.html carries its own stylesheet and does not link base.css,
   so the shared mobile fixes are repeated here. Keep the two in sync. */
/* ---- small phones: 360px and under ----------------------------------------
   Measured on a 360px viewport: the header row came out 349px wide inside a
   320px content box (logo + BOOK NOW + burger cannot shrink), pushing every
   page 29px past the viewport. Tightening the gutters, the gap and the button
   brings the row back inside without dropping any control. */
@media (max-width:420px){
  header.site{padding-left:12px;padding-right:12px}
  header.site .h-inner{gap:8px}
  header.site .h-right{gap:8px}
  header.site .btn{padding-left:13px;padding-right:13px;letter-spacing:.1em;font-size:11px}
  header.site .logo img{height:44px}
  header.site.solid .logo img{height:40px}
  .burger{padding:10px}
}

/* ---- mobile legibility floor -------------------------------------------
   The micro-labels are set between 9.5px and 10.5px, which reads fine on a
   desktop at arm's length but is too small on a phone. Several of the
   original rules are more specific than a plain class selector, so the floor
   is forced here rather than restated at every call site. Scoped to <=600px,
   so desktop typography is untouched. The map attribution is deliberately
   left alone -- small print is the convention there. */
@media (max-width:600px){
  .book-card label span,.bento .tile .cap,.bento .tile.stat span,
  .bento .tile.strip span,.stay .facts,.slot dt,.filters button,
  .fb span,.lbl,.cap,.facts,.bk label,.bk .price small,
  .fh,.tag,.note-h,.updated,.count,p.t,.lg-toc p,.foot-bar span,
  .diet-tags span,.stay-facts li,.stay-facts li span,.loader span,
  .cbody .meta,.amen li span,figure cite,figure figcaption,
  dl dt,label,label span{font-size:11px!important}
  .btn,.btn.ghost,.row .btn{font-size:11.5px!important}
}


/* Footer links are 18px tall on a phone, well under the 44px touch floor.
   Padding on the link itself widens the target without moving the layout. */
@media (max-width:600px){
  footer.site .fg nav a,footer.site .fg li a{display:inline-block;padding-block:7px}
  .lang a{padding:9px 8px}
}

/* The hero booking inputs carry no padding of their own, so the field itself
   is a 21px target even though its label wraps a taller box. */
@media (max-width:600px){
  .book-card input,.book-card select{padding-block:6px}
}

/* The two floating calls-to-action sit above the page on a phone and were
   covering the last line of the footer. Reserve their height at the bottom
   of the document. The page-hero eyebrow is tracked out to .4em, which wraps
   awkwardly on a narrow screen; tighten it so it holds one or two clean lines. */
@media (max-width:600px){
  footer.site{padding-bottom:96px}
  .pagehero .k{letter-spacing:.26em}
}

/* ---- navigation over the hero -------------------------------------------
   On a wide screen the header sits on open sky. The scrim was inset:0, so the
   gradient had already faded to zero by the time it reached the nav row, and
   11px at weight 300 with no shadow dissolved into the photograph. Extend the
   scrim past the header, give the type weight and a soft shadow, and let the
   logo grow on very wide screens -- without dropping a solid bar over the
   picture, which is the point of the transparent header. */
header::before{
  inset:0 0 -64px 0;
  background:linear-gradient(180deg,rgba(7,23,16,.68),rgba(7,23,16,.38) 56%,rgba(7,23,16,0))
}
header .nav{font-size:12px;letter-spacing:.16em}
header .nav a{font-weight:400;opacity:1}
header:not(.solid) .nav a,
header:not(.solid) .lang a,
header:not(.solid) .logo img{text-shadow:0 1px 3px rgba(7,23,16,.55);
  filter:drop-shadow(0 1px 3px rgba(7,23,16,.45))}
@media (min-width:1500px){
  header .nav{font-size:12.5px;gap:26px}
  header .logo img{height:58px}
  header.solid .logo img{height:50px}
}

/* ---- header laid out in one row ------------------------------------------
   Client note: the two-tier block (languages far left, logo and navigation
   stacked in the centre) read as scattered on a wide screen. Logo hard left,
   navigation centred in the space between, languages and Book now hard right. */
header .h-inner{gap:clamp(16px,3vw,40px)}
header .h-inner>.logo{flex:0 0 auto}
header .h-inner>.nav{flex:1 1 auto;justify-content:center}
header .h-inner>.h-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:18px}
header .h-right .lang{flex:0 0 auto}
@media (max-width:900px){
  header .h-inner>.nav,header .h-right .lang{display:none}
  .burger{display:inline-flex}
}


/* Les avis Google apportent trois elements de plus : la photographie du
   compte, la date, et le lien vers la fiche. Ils restent discrets — le bloc
   vit de sa grande citation, pas de ses accessoires. */
.q-rot .q-face{
  display:block;width:48px;height:48px;margin:0 auto 22px;
  border-radius:50%;object-fit:cover;
  border:1px solid rgba(235,226,200,.28)}
.q-rot .q-when{opacity:.62}
.q-stars .q-all{
  display:inline-block;margin-left:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);border-bottom:1px solid rgba(201,164,92,.4);
  padding-bottom:2px;transition:color .3s,border-color .3s}
.q-stars .q-all:hover{color:var(--ivory);border-color:var(--ivory)}
@media (max-width:600px){
  .q-stars .q-all{display:block;margin:14px 0 0}
}

@media (max-width:600px){
  .q-rot .q-face{width:40px;height:40px;margin-bottom:16px}
}


/* La signature d'un avis. Le nom n'est pas une metadonnee : c'est la personne
   qui repond de la maison. Il prend donc la serif de la citation, une taille
   qui se lit, la teinte creme plutot que le blanc, et de l'espace autour. La
   date, elle, reste une mention discrete.

   Le dore aurait ete plus proche de la marque, mais il ne donne que 3,57:1
   sur le vert : illisible a cette taille. */
.q-rot cite{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:16px;row-gap:4px;margin-top:34px;font-style:normal}
.q-rot cite .q-who{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:21px;letter-spacing:.01em;text-transform:none;
  color:var(--cream)}
.q-rot cite .q-when{
  position:relative;padding-left:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);opacity:.72}
.q-rot cite .q-when::before{
  content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:8px;height:1px;background:currentColor;opacity:.5}
@media (max-width:600px){
  .q-rot cite{column-gap:12px;margin-top:26px}
  .q-rot cite .q-who{font-size:18px}
  .q-rot cite .q-when{font-size:10px;padding-left:14px}
}