/* =========================================================
   LA SUCRIERE — Atelier Parisien · v2
   ========================================================= */
:root{
  --moss:#477D1A; --moss-deep:#2F5512; --moss-ink:#21400b;
  --raspberry:#E30B5D; --raspberry-deep:#b40849;
  /* Brand raspberry is 4.42:1 on cream, just under AA for small text.
     Same hue, a shade darker, for text only. Fills keep --raspberry. */
  --raspberry-text:#D50A57;
  --wheat:#FFE8C4; --wheat-text:#FFFDF8; --camel:#C89862; --camel-deep:#8E6335; --mauve:#A23B43;
  --cream:#FFF7EC; --cream-2:#FBEFDC; --paper:#FCF3E1;
  --ink:#2A2118; --ink-soft:#6a5c49;
  --gold:linear-gradient(135deg,#e6c187,#C89862 45%,#9c6d36);
  --maxw:1240px;
  --r-lg:30px; --r-md:20px; --r-sm:13px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 30px 70px -34px rgba(42,33,24,.5);
  --shadow-soft:0 20px 50px -30px rgba(42,33,24,.42);
  --ff-display:"Fraunces",Georgia,serif;
  --ff-script:"Pinyon Script",cursive;
  --ff-body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--cream);line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.ico{width:1em;height:1em;display:inline-block;fill:currentColor;flex:none}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:560;line-height:1.05;letter-spacing:-.012em;margin:0}
h2{font-size:clamp(2.2rem,5.4vw,4.3rem);font-variation-settings:"SOFT" 30,"opsz" 110}
h3{font-size:clamp(1.3rem,2.1vw,1.65rem)}
p{margin:0 0 1rem}
em{font-style:italic;font-variation-settings:"SOFT" 70}
.script{font-family:var(--ff-script);font-weight:400;color:var(--raspberry);font-size:1.34em;line-height:.78;display:inline-block;vertical-align:-.04em}
.center{text-align:center}.cream{color:var(--cream)}.cream-soft{color:rgba(255,247,236,.82)}

.section{max-width:var(--maxw);margin:0 auto;padding:clamp(86px,12vw,160px) clamp(20px,5vw,48px)}
.section__head{max-width:780px;margin:0 auto clamp(48px,6vw,80px)}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-soft)}
.cream .lede,.lede.cream{color:rgba(255,247,236,.82)}

/* ---- eyebrow ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--raspberry);margin-bottom:1.15rem}
.eyebrow .ico{font-size:1.15em;color:var(--camel)}
.eyebrow--center{display:flex;justify-content:center;width:100%}
.eyebrow--cream{color:var(--wheat-text)}.eyebrow--cream .ico{color:var(--wheat-text)}

/* ---- ornamental rule ---- */
.ornrule{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0}
.ornrule span{height:1px;width:min(120px,22vw);background:linear-gradient(90deg,transparent,var(--camel))}
.ornrule span:last-child{background:linear-gradient(90deg,var(--camel),transparent)}
.ornrule svg{width:30px;height:30px;color:var(--raspberry);flex:none}

/* ---- section divider ---- */
.divider{display:flex;align-items:center;justify-content:center;gap:1.2rem;max-width:760px;margin:0 auto;padding:0 24px}
.divider__rule{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(200,152,98,.6))}
.divider__rule:last-child{background:linear-gradient(90deg,rgba(200,152,98,.6),transparent)}
.divider__orn{width:120px;height:24px;color:var(--camel);flex:none}
.divider--dark .divider__rule{background:linear-gradient(90deg,transparent,rgba(255,232,196,.3))}
.divider--dark .divider__orn{color:var(--wheat-text);opacity:.75}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--ff-body);font-weight:700;font-size:.95rem;padding:.95em 1.75em;border-radius:100px;border:2px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s,border-color .3s;will-change:transform;text-align:center}
.btn--sm{padding:.62em 1.2em;font-size:.86rem}
.btn--block{width:100%}
.btn{position:relative;overflow:hidden}
.btn--primary{background:var(--raspberry);color:#fff;box-shadow:0 14px 30px -12px rgba(227,11,93,.6)}
.btn--primary::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none}
.btn--primary:hover::before{animation:shine .9s var(--ease)}
@keyframes shine{to{left:140%}}
.btn--primary:hover{background:var(--raspberry-deep);transform:translateY(-3px);box-shadow:0 22px 40px -12px rgba(227,11,93,.65)}
.btn--ghost{background:transparent;border-color:var(--moss);color:var(--moss)}
.btn--ghost:hover{background:var(--moss);color:var(--cream);transform:translateY(-3px)}
.btn--ghost-cream{border-color:var(--wheat);color:var(--wheat-text)}
.btn--ghost-cream:hover{background:var(--wheat);color:var(--moss-deep)}

/* ---- paper grain ---- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =========================================================
   INTRO REVEAL ("doors open")
   ========================================================= */
/* Intro is fully CSS-driven: it dismisses itself even if JS never runs. */
.intro{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;
  animation:introHide 0s linear 1.7s forwards}
@keyframes introHide{to{visibility:hidden;pointer-events:none}}
.intro__curtain{position:absolute;top:0;bottom:0;width:50%;background:var(--moss-deep)}
.intro__curtain--l{left:0;border-right:1px solid rgba(255,232,196,.12);animation:curtainOutL .8s var(--ease-out) .95s forwards}
.intro__curtain--r{right:0;animation:curtainOutR .8s var(--ease-out) .95s forwards}
@keyframes curtainOutL{to{transform:translateX(-100%)}}
@keyframes curtainOutR{to{transform:translateX(100%)}}
.intro__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:introInnerOut .4s ease .85s forwards}
@keyframes introInnerOut{to{opacity:0;transform:translateY(-10px)}}
.intro__logo{width:clamp(220px,34vw,330px);opacity:0;transform:translateY(14px) scale(.96);animation:introLogo .9s var(--ease-out) .1s forwards}
.intro__word{font-family:var(--ff-script);font-size:clamp(2rem,6vw,3rem);color:var(--wheat-text);opacity:0;animation:introWord .7s var(--ease-out) .35s forwards}
.intro__orn{width:120px;height:24px;color:var(--camel);opacity:0;animation:introWord .8s ease .3s forwards}
.intro__orn--flip{transform:scaleX(-1)}
.intro.gone{display:none !important}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introWord{to{opacity:.95}}

/* =========================================================
   CURSOR
   ========================================================= */
.cursor{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;mix-blend-mode:multiply}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:7px;height:7px;background:var(--raspberry)}
.cursor__ring{width:38px;height:38px;border:1.5px solid var(--moss);transition:width .25s,height .25s,background .25s,border-color .25s}
.cursor.is-hover .cursor__ring{width:60px;height:60px;background:rgba(71,125,26,.1);border-color:var(--raspberry)}
.cursor.is-down .cursor__ring{width:28px;height:28px}
@media (hover:none),(max-width:860px){.cursor{display:none}}

/* =========================================================
   TOPBAR + NAV
   ========================================================= */
.topbar{background:var(--moss-deep);color:var(--wheat-text);overflow:hidden;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;position:relative;z-index:60}
.topbar__track{display:flex;align-items:center;gap:2.2rem;white-space:nowrap;padding:7px 0;width:max-content;animation:marquee 36s linear infinite}
.topbar .ico{color:var(--raspberry);font-size:1em}

.nav{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:1.4rem;padding:.55rem clamp(16px,4vw,40px);transition:background .4s,box-shadow .4s,padding .4s}
.nav.scrolled{background:rgba(255,247,236,.9);backdrop-filter:blur(12px);box-shadow:0 10px 30px -22px rgba(42,33,24,.55);padding-top:.35rem;padding-bottom:.35rem}
.nav__brand{flex:none}
.nav__logo{height:52px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__logo{height:40px}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.94rem}
.nav__links a{position:relative;padding:.3em 0;color:var(--moss-deep)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--raspberry);transition:width .3s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__greet{font-family:var(--ff-script);font-size:1.5rem;color:var(--camel-deep);line-height:1;padding:0 .2rem}
.nav__cta{flex:none}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav__burger span{width:26px;height:2.4px;background:var(--moss-deep);border-radius:2px;transition:.3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:54;background:var(--moss-deep);transform:translateX(100%);transition:transform .45s var(--ease);padding:96px 32px 40px;display:flex}
.drawer.open{transform:translateX(0);box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
.drawer__links{display:flex;flex-direction:column;gap:1.25rem;width:100%;font-family:var(--ff-display);font-size:1.45rem;color:var(--wheat-text)}
.drawer__links a{transition:color .2s,padding .2s}
.drawer__links a:hover{color:#fff;padding-left:6px}
.drawer__links .btn{font-family:var(--ff-body);font-size:1rem;margin-top:.6rem}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:90px 20px 96px;isolation:isolate}
.hero__wash{position:absolute;inset:0;z-index:-3;background:radial-gradient(125% 88% at 50% -8%, #fffdf8 0%, var(--cream) 38%, #ffe7bf 78%, #ffd9a0 100%)}
.hero__bigorn{position:absolute;z-index:-2;width:min(78vmin,720px);height:min(78vmin,720px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(200,152,98,.16);pointer-events:none}
.hero__inner{position:relative;z-index:2;max-width:880px}
.hero__awning{width:clamp(120px,16vw,190px);height:auto;color:var(--raspberry);margin:0 auto .2rem;display:block}
.hero__logo{width:clamp(280px,44vw,520px);height:auto;margin:.3rem auto .2rem;filter:drop-shadow(0 18px 30px rgba(71,125,26,.22))}
.hero__head{font-size:clamp(2rem,5.4vw,3.8rem);color:var(--moss-deep);margin:.4rem 0 0;font-variation-settings:"SOFT" 40,"opsz" 120}
.hero__head em{color:var(--raspberry);font-variation-settings:"SOFT" 80}
.hero__sub{max-width:600px;margin:.2rem auto 1.9rem;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-soft)}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero .ornrule{margin:1rem auto 1.4rem}

.drift{position:absolute;z-index:-1;pointer-events:none;will-change:transform;color:var(--moss);opacity:.5}
.drift.leaf{color:rgba(71,125,26,.4)}
.drift--1{width:clamp(90px,12vw,150px);left:5%;top:22%;color:var(--camel)}
.drift--2{width:clamp(70px,9vw,120px);right:8%;top:18%;color:var(--mauve)}
.drift--3{width:clamp(80px,10vw,130px);left:11%;bottom:14%;color:var(--raspberry);opacity:.42}
.drift--4{width:clamp(80px,10vw,130px);right:6%;bottom:16%;color:var(--moss)}
.drift--5{width:clamp(70px,8vw,110px);right:20%;top:60%;color:var(--camel);opacity:.45}
.drift--6{width:clamp(120px,16vw,210px);left:-3%;bottom:-6%}
.hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--moss-deep);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;z-index:3}
.hero__scroll .ico{font-size:1.3rem;animation:bob 1.9s var(--ease) infinite}
.hero__sparkles{position:absolute;inset:0;z-index:0;pointer-events:none}
.spark{position:absolute;color:var(--camel);opacity:0;animation:twinkle linear infinite}
.spark svg{width:100%;height:100%;display:block}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.8;transform:scale(1)}}

/* =========================================================
   FRIEZE + RIBBON
   ========================================================= */
.frieze{background:var(--paper);border-top:1px solid rgba(200,152,98,.4);border-bottom:1px solid rgba(200,152,98,.4);overflow:hidden}
.frieze__track{display:flex;align-items:center;gap:2.6rem;width:max-content;padding:14px 0;animation:marquee 48s linear infinite;color:var(--camel)}
.frieze__track svg{width:38px;height:38px;flex:none;opacity:.7}
.ribbon{background:var(--raspberry);color:var(--wheat-text);overflow:hidden}
.ribbon__track{display:flex;align-items:center;gap:2rem;white-space:nowrap;width:max-content;padding:16px 0;font-family:var(--ff-display);font-style:italic;font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:500;animation:marquee 32s linear infinite}
.ribbon .ico{font-size:1em;opacity:.85}

/* =========================================================
   MAISON
   ========================================================= */
.maison{position:relative}
.maison__ghost{position:absolute;left:-4%;top:8%;width:clamp(120px,16vw,220px);color:rgba(200,152,98,.18);pointer-events:none;z-index:0}
.maison__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;max-width:880px;margin:0 auto;gap:clamp(34px,5vw,56px)}
.maison__text{display:flex;flex-direction:column;align-items:center}
.maison__text h2{margin:.4rem 0 1rem}
.maison__text p{color:var(--ink-soft);max-width:60ch}
.dropcap::first-letter{font-family:inherit;font-weight:inherit;font-size:inherit;float:none;margin:0;color:inherit}
.pillars{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.2rem;justify-content:center;text-align:center}
.pillar{align-items:center}
.pillar{display:flex;flex-direction:column;gap:.12rem}
.pillar .ico{font-size:2rem;color:var(--moss);margin-bottom:.3rem}
.pillar b{font-family:var(--ff-display);font-size:1.05rem}
.pillar span{font-size:.85rem;color:var(--ink-soft)}
.maison__media{position:relative;width:100%;max-width:440px}
.archframe{position:relative;border-radius:230px 230px 26px 26px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);border:7px solid #fff;outline:2px solid var(--camel);outline-offset:7px;background:var(--cream-2)}
.archframe__img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover}
.seal{position:absolute;right:-22px;bottom:24px;width:140px;height:140px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
/* The seal used to be an outline rosette with nothing behind it, so its
   text sat straight on the photograph and could not be read. A cream
   disc inside the rosette gives the type something to sit on. */
.seal::before{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--cream);box-shadow:0 6px 18px -10px rgba(42,33,24,.55)}
.seal__ring{position:absolute;inset:0;width:100%;height:100%;color:var(--camel);animation:spin 26s linear infinite}
.seal img{width:58px;height:auto;position:relative;z-index:1}
.seal__txt{position:relative;z-index:1;font-size:.58rem;font-weight:800;letter-spacing:.1em;line-height:1.25;text-transform:uppercase;color:var(--moss-deep);margin-top:3px;max-width:84px}
.deco--laurel{position:absolute;left:-44px;top:-26px;width:70px;color:var(--camel);opacity:.7;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   LA CARTE — printed menu
   ========================================================= */
.carte{position:relative}
.cartephotos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:0 auto clamp(28px,4vw,46px)}
.cartephotos figure{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-soft);border:6px solid #fff;outline:1px solid rgba(200,152,98,.5);outline-offset:-6px;position:relative}
.cartephotos img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cartephotos figure:hover img{transform:scale(1.07)}
.cartephotos figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(33,64,11,.8));color:var(--wheat-text);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.menucard{position:relative;background:linear-gradient(180deg,#fffdf8,#fdf4e3);border:1px solid rgba(200,152,98,.5);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3.4rem);box-shadow:var(--shadow-soft)}
.menucard::before{content:"";position:absolute;inset:12px;border:1px solid rgba(200,152,98,.4);border-radius:calc(var(--r-lg) - 12px);pointer-events:none}
.menucard__corner{position:absolute;width:26px;height:26px;border:0 solid var(--camel);opacity:.85}
.menucard__corner--tl{top:18px;left:18px;border-top-width:2px;border-left-width:2px}
.menucard__corner--tr{top:18px;right:18px;border-top-width:2px;border-right-width:2px}
.menucard__corner--bl{bottom:18px;left:18px;border-bottom-width:2px;border-left-width:2px}
.menucard__corner--br{bottom:18px;right:18px;border-bottom-width:2px;border-right-width:2px}
.menucard__cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
.menucol--mid{padding:0 clamp(20px,3vw,40px);border-left:1px solid rgba(200,152,98,.4);border-right:1px solid rgba(200,152,98,.4)}
.menucol__title{display:flex;align-items:center;justify-content:center;gap:.5em;color:var(--moss-deep);font-size:1.32rem;text-align:center}
.menucol__title .ico{font-size:1.5em;color:var(--raspberry)}
.menucol__note{font-family:var(--ff-display);font-style:italic;font-size:.95rem;color:var(--camel-deep);margin:.35rem 0 1.4rem;text-align:center}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.mi{display:flex;align-items:baseline;gap:.55rem}
.mi__ill{width:26px;height:26px;flex:none;align-self:center;color:var(--moss);transition:transform .4s var(--ease),color .3s}
.mi:hover .mi__ill{transform:translateY(-3px) rotate(-6deg) scale(1.12);color:var(--raspberry)}
.mi__name{font-weight:600;color:var(--ink);font-size:1rem}
.mi__dots{flex:1;border-bottom:1.6px dotted rgba(200,152,98,.7);transform:translateY(-4px);min-width:14px}
.mi__meta{font-family:var(--ff-display);font-style:italic;font-size:.84rem;color:var(--camel-deep);white-space:nowrap}
.menucard__foot{text-align:center;margin:2.2rem 0 0;font-size:.82rem;letter-spacing:.05em;color:var(--ink-soft);font-style:italic;display:flex;align-items:center;justify-content:center;gap:.7rem}
.menucard__foot .ico{color:var(--raspberry);font-style:normal}

/* =========================================================
   SIGNATURES
   ========================================================= */
.sigs{position:relative;background:var(--moss-deep);color:var(--cream);padding:clamp(86px,12vw,160px) clamp(20px,5vw,48px);overflow:hidden}
.sigs .section__head{margin-bottom:clamp(40px,5vw,64px)}
.sigs__list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px)}
.sig,.sig--rev{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem}
.sig__ill{display:flex;align-items:center;justify-content:center;width:100%;max-width:236px;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,232,196,.45);padding:10px;margin-bottom:1.1rem}
.sig__ill svg{width:60%;height:60%;color:var(--wheat-text);transition:transform .5s var(--ease)}
.sig__ill img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.sig:hover .sig__ill img{transform:scale(1.06)}
.sig:hover .sig__ill svg{transform:translateY(-4px) rotate(-5deg) scale(1.06)}
.sig__body{display:flex;flex-direction:column;align-items:center}
.sig__no{font-family:var(--ff-display);font-size:2.4rem;color:var(--camel);opacity:.7;line-height:1;font-weight:300}
.sig__body h3{color:#fff;font-size:clamp(1.4rem,2.4vw,1.85rem);margin:.1rem 0 .6rem}
.sig__body p{color:rgba(255,247,236,.8);max-width:34ch}
.sig__tag{display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wheat-text);border:1px solid rgba(255,232,196,.3);border-radius:100px;padding:.45em 1em;margin-top:.4rem}

/* =========================================================
   GALLERY
   ========================================================= */
.galerie{padding:clamp(86px,12vw,160px) 0;position:relative}
.galerie__intro{padding-left:24px;padding-right:24px}
.gallery{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px}
.gtile{position:relative;border-radius:var(--r-md);overflow:hidden;margin:0;box-shadow:var(--shadow-soft);border:6px solid #fff;outline:1px solid rgba(200,152,98,.5);outline-offset:-6px}
.gtile img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transition:transform .7s var(--ease)}
.gtile:hover img{transform:scale(1.06)}
.gtile--tall{grid-row:span 2}.gtile--wide{grid-column:span 2}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,rgba(33,64,11,.82));color:var(--wheat-text);font-size:.8rem;font-weight:600;letter-spacing:.04em}

/* =========================================================
   WAYS
   ========================================================= */
.ways__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.way{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;background:linear-gradient(180deg,#fffdf8,#fdf4e3);border-radius:var(--r-lg);padding:2.6rem 2rem 2.2rem;border:1px solid rgba(200,152,98,.45);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.way:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--camel)}
.way--accent{background:var(--moss);color:var(--cream);border-color:var(--moss)}
.way--accent .way__link{color:var(--wheat-text)}
.way__no{font-family:var(--ff-display);font-size:3.2rem;line-height:1;color:var(--camel);opacity:.6;font-weight:300}
.way--accent .way__no{color:var(--wheat-text);opacity:.55}
.way__ico{width:44px;height:44px;color:var(--raspberry);margin:.2rem 0 .4rem;transition:transform .4s var(--ease)}
.way:hover .way__ico{transform:rotate(-8deg) scale(1.08)}
.way--accent .way__ico{color:var(--wheat-text)}
.way h3{color:var(--moss-deep)}.way--accent h3{color:#fff}
.way p{font-size:.95rem;color:var(--ink-soft)}.way--accent p{color:rgba(255,247,236,.85)}
.way__link{margin-top:auto;font-weight:700;color:var(--raspberry);font-size:.9rem}

/* =========================================================
   PRO
   ========================================================= */
.pro{position:relative;background:linear-gradient(135deg,var(--mauve),var(--raspberry-deep));color:var(--cream);overflow:hidden;padding:clamp(86px,12vw,160px) clamp(20px,5vw,48px)}
.pro__leaf{position:absolute;right:-4%;top:-6%;width:clamp(220px,30vw,440px);color:rgba(255,232,196,.13);pointer-events:none}
.pro__grid{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(34px,5vw,52px);position:relative}
.pro__text{display:flex;flex-direction:column;align-items:center}
.pro__text h2{margin:.4rem 0 1.2rem}.pro__text .script{color:var(--wheat-text)}
.pro__benefits{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.85rem;width:fit-content}
.pro__benefits li{display:flex;align-items:center;gap:.7rem;font-weight:600;text-align:left}
.pro__benefits .ico{color:var(--wheat-text);font-size:1.05rem}
.pro__form{background:var(--cream);color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow);width:100%;max-width:560px;text-align:left}
.pro__form h3{color:var(--moss-deep)}
.pro__formsub{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.3rem}
.field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field textarea{font-family:var(--ff-body);font-size:1rem;color:var(--ink);padding:.8em .9em;border:1.5px solid rgba(71,125,26,.3);border-radius:var(--r-sm);background:#fff;transition:border-color .25s,box-shadow .25s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 4px rgba(71,125,26,.14)}
.field input.invalid,.field textarea.invalid{border-color:var(--raspberry);box-shadow:0 0 0 4px rgba(227,11,93,.12)}
.pro__formnote{text-align:center;font-size:.86rem;color:var(--ink-soft);margin:1rem 0 0}
.pro__formnote a{color:var(--raspberry);font-weight:700}
.pro__form.sent{text-align:center}

/* =========================================================
   SOCIAL
   ========================================================= */
.social__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sgram{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;display:block;border:1px solid rgba(200,152,98,.4)}
.sgram img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sgram__o{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;opacity:0;transition:.35s}
.sgram:hover img{transform:scale(1.1)}
.sgram:hover .sgram__o{opacity:1;background:rgba(227,11,93,.55)}

/* =========================================================
   VISITE
   ========================================================= */
.visite{background:var(--moss-deep);color:var(--cream);padding:clamp(86px,12vw,150px) clamp(20px,5vw,48px);position:relative;overflow:hidden}
.visite__awning{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:160px;height:auto;color:rgba(255,232,196,.2);pointer-events:none}
.visite__grid{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(34px,5vw,52px);position:relative}
.visite__info{display:flex;flex-direction:column;align-items:center}
.visite__info h2{margin:.4rem 0 1.1rem}.visite__info .script{color:var(--wheat-text)}
.visite__details{list-style:none;padding:0;margin:1.8rem auto 2rem;display:grid;gap:1.1rem;width:fit-content}
.visite__details li{display:flex;gap:1rem;align-items:flex-start;text-align:left}
.visite__details .ico{font-size:1.4rem;color:var(--raspberry);margin-top:.15rem;flex:none}
.visite__details b{font-family:var(--ff-display);font-size:1.06rem;display:block}
.visite__details span{font-size:.86rem;color:rgba(255,247,236,.7)}
.visite__cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.visite__map{width:100%;max-width:640px}
.mapframe{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:7px solid var(--wheat);aspect-ratio:4/3;background:#ddd}
.mapframe iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.05)}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.news{position:relative;background:var(--wheat);overflow:hidden;padding:clamp(72px,9vw,124px) clamp(20px,5vw,48px);text-align:center}
.news__inner{max-width:620px;margin:0 auto;position:relative;z-index:2}
.news h2{color:var(--moss-deep)}.news p{color:var(--ink-soft);margin-top:.5rem}
.news__form{display:flex;gap:.6rem;max-width:480px;margin:1.7rem auto 0;flex-wrap:wrap}
.news__form input{flex:1;min-width:200px;font-family:var(--ff-body);font-size:1rem;padding:.95em 1.2em;border:2px solid var(--moss);border-radius:100px;background:#fff;color:var(--ink)}
.news__form input:focus{outline:none;box-shadow:0 0 0 4px rgba(71,125,26,.16)}
.news__msg{margin-top:1rem;font-weight:700;color:var(--moss-deep);min-height:1.2em}
.news__deco{position:absolute;top:50%;transform:translateY(-50%);width:clamp(90px,12vw,150px);color:var(--camel);opacity:.4;pointer-events:none}
.news__deco--l{left:5%}.news__deco--r{right:5%}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;background:var(--ink);color:var(--cream-2);padding:clamp(60px,7vw,90px) clamp(20px,5vw,48px) 30px;overflow:hidden}
.footer__seal{position:absolute;right:-40px;top:-40px;width:200px;height:200px;color:rgba(200,152,98,.12);pointer-events:none}
.footer__top{position:relative;max-width:var(--maxw);margin:0 auto 2.4rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:clamp(24px,3vw,44px)}
.footer__logo{width:190px;margin-bottom:1.1rem}
.footer__brand p{font-size:.92rem;color:rgba(253,244,227,.62);max-width:34ch}
.footer__social{display:flex;gap:.7rem;margin-top:1.2rem}
.footer__social a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,232,196,.3);font-size:1.1rem;transition:.3s}
.footer__social a:hover{background:var(--raspberry);border-color:var(--raspberry);color:#fff;transform:translateY(-3px)}
.footer__col h4{font-family:var(--ff-body);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--camel);margin-bottom:1rem}
.footer__col a{display:block;margin-bottom:.55rem;color:rgba(253,244,227,.72);font-size:.93rem;transition:color .2s,padding .2s}
.footer__col a:hover{color:var(--wheat-text);padding-left:4px}
.footer__col p{font-size:.91rem;color:rgba(253,244,227,.62)}
.footer__bottom{max-width:var(--maxw);margin:1.6rem auto 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.79rem;color:rgba(253,244,227,.5)}

/* =========================================================
   EXPERIENCE ENHANCEMENTS
   ========================================================= */
/* anchor links land below the sticky nav */
[id]{scroll-margin-top:90px}

/* scroll progress */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:1090;
  background:linear-gradient(90deg,var(--raspberry),var(--camel));
  box-shadow:0 0 12px rgba(227,11,93,.45)}

/* nav live status + greeting */
.nav__meta{display:flex;align-items:center;gap:.85rem}
.nav__status{display:inline-flex;align-items:center;gap:.45em;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--moss-deep)}
.nav__status i{width:8px;height:8px;border-radius:50%;background:var(--camel)}
.nav__status.open i{background:var(--moss);animation:pulse 2.2s ease-out infinite}
.nav__status.closed i{background:#c0392b}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(71,125,26,.55)}70%{box-shadow:0 0 0 8px rgba(71,125,26,0)}100%{box-shadow:0 0 0 0 rgba(71,125,26,0)}}

/* active nav link */
.nav__links a.active{color:var(--raspberry)}
.nav__links a.active::after{width:100%}

/* back to top */
.totop{position:fixed;right:22px;bottom:22px;z-index:1080;width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--camel);background:var(--cream);color:var(--moss-deep);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--raspberry);border-color:var(--raspberry);color:#fff;transform:translateY(-3px)}
.totop .ico{font-size:1.3rem;transform:rotate(180deg)}

/* staggered grid reveals */
.ways__grid .reveal:nth-child(2),.sigs__list .reveal:nth-child(2){transition-delay:.1s}
.ways__grid .reveal:nth-child(3),.sigs__list .reveal:nth-child(3){transition-delay:.2s}
.social__grid .reveal:nth-child(2){transition-delay:.06s}.social__grid .reveal:nth-child(3){transition-delay:.12s}
.social__grid .reveal:nth-child(4){transition-delay:.18s}.social__grid .reveal:nth-child(5){transition-delay:.24s}
.social__grid .reveal:nth-child(6){transition-delay:.3s}
.gallery .reveal:nth-child(2){transition-delay:.08s}.gallery .reveal:nth-child(3){transition-delay:.16s}
.gallery .reveal:nth-child(4){transition-delay:.24s}

/* =========================================================
   REVEAL
   ========================================================= */
/* Reveal: IntersectionObserver adds .in for the staggered effect, but a pure-CSS
   backstop forces opacity to 1 by 2.6s so content is NEVER stuck invisible if JS
   or IO fail. Backstop only touches opacity (never transform) to avoid fighting
   the parallax engine. */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);animation:safeReveal .01s linear 1.4s forwards}
.js .reveal.in{opacity:1;transform:none}
.cards .reveal.in,.ways__grid .reveal.in,.social__grid .reveal.in{transition-delay:.05s}
@keyframes safeShow{to{opacity:1}}
@keyframes safeReveal{to{opacity:1;transform:none}}

/* graceful image load (fade in once decoded) — same self-healing backstop */
.js .archframe__img,.js .gtile img,.js .sgram img,.js .sig__ill img,.js .cartephotos img,.js .lieu__media img,.js .lieu__strip img{opacity:0;transition:opacity .8s var(--ease);animation:safeShow .01s linear .7s forwards}
.js .archframe__img.loaded,.js .gtile img.loaded,.js .sgram img.loaded,.js .sig__ill img.loaded,.js .cartephotos img.loaded,.js .lieu__media img.loaded,.js .lieu__strip img.loaded{opacity:1}

/* accessible focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px;border-radius:6px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .nav__links,.nav__cta,.nav__greet{display:none}
  .nav__burger{display:flex}
  .ways__grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .sigs__list{grid-template-columns:1fr;max-width:460px}
  .menucard__cols{grid-template-columns:1fr;gap:0}
  .menucol{padding:1.6rem 0;border-bottom:1px solid rgba(200,152,98,.4)}
  .menucol--mid{padding:1.6rem 0;border-left:0;border-right:0}
  .menucol:last-child{border-bottom:0}
  .menu{max-width:380px;margin:0 auto}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gtile--wide{grid-column:span 2}
  .social__grid{grid-template-columns:repeat(3,1fr)}
  /* center the footer on smaller screens */
  .footer__top{grid-template-columns:1fr 1fr;text-align:center}
  .footer__brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center}
  .footer__logo{margin-left:auto;margin-right:auto}
  .footer__social{justify-content:center}
  .footer__seal{display:none}
  .footer__bottom{justify-content:center;text-align:center}
}
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .social__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;grid-auto-rows:230px}
  .gtile--wide,.gtile--tall{grid-column:auto;grid-row:auto}
  .hero__head{font-size:clamp(1.75rem,8vw,2.4rem)}
  .hero__logo{width:min(78vw,330px)}
  .drift--1,.drift--2{opacity:.32}
  .drift--5,.drift--6{display:none}
  .news__deco{display:none}
  .section{padding-left:18px;padding-right:18px}
  .menucard{padding:1.5rem 1.1rem}
  .pillars{gap:1.3rem}
  .visite__cta,.hero__cta{width:100%}
  .visite__cta .btn,.hero__cta .btn{flex:1 1 auto}
  .cartephotos{gap:9px}
  .cartephotos figcaption{font-size:.55rem;letter-spacing:.03em;padding:6px 6px}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .topbar__track,.ribbon__track,.frieze__track,.seal__ring{animation:none}
  [data-px]{transform:none !important}
  .hero__scroll .ico{animation:none}
  .intro{display:none}
}

/* =========================================================
   ORDER TOOLS + FAQ (v7)
   ========================================================= */
.order__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);max-width:980px;margin:0 auto;align-items:start}
.tool{background:linear-gradient(180deg,#fffdf8,#fdf4e3);border:1px solid rgba(200,152,98,.5);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-soft);text-align:left}
.tool h3{display:flex;align-items:center;gap:.5em;color:var(--moss-deep);font-size:1.3rem}
.tool h3 .ico{font-size:1.4em;color:var(--raspberry)}
.tool__sub{font-size:.92rem;color:var(--ink-soft);margin:.35rem 0 1.2rem}
.tool__note{font-size:.8rem;color:var(--ink-soft);margin:1rem 0 0;font-style:italic;text-align:center}
.tool .field select{font-family:var(--ff-body);font-size:1rem;color:var(--ink);padding:.8em .9em;border:1.5px solid rgba(71,125,26,.3);
  border-radius:var(--r-sm);background:#fff;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23477D1A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:11px}
.tool .field select:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 4px rgba(71,125,26,.14)}
.tool.sent{text-align:center}
.calc__out{margin:1.3rem 0 .4rem;background:#fff;border:1px solid rgba(200,152,98,.5);border-radius:var(--r-md);padding:1.1rem 1.2rem;min-height:80px}
.calc__out h4{font-family:var(--ff-display);font-size:1.05rem;color:var(--moss-deep);margin:0 0 .6rem}
.calc__out ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.calc__out li{display:flex;align-items:baseline;gap:.5rem;font-size:.96rem}
.calc__out li b{font-family:var(--ff-display);color:var(--raspberry);font-size:1.05rem;min-width:2.4em}
.calc__out .dots{flex:1;border-bottom:1.5px dotted rgba(200,152,98,.7);transform:translateY(-4px)}
.calc__out .calc__tot{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed rgba(200,152,98,.6);font-size:.85rem;color:var(--ink-soft)}

.faq__list{max-width:760px;margin:0 auto}
.faq__item{border-top:1px solid rgba(200,152,98,.5)}
.faq__item:last-child{border-bottom:1px solid rgba(200,152,98,.5)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15em .2em;font-family:var(--ff-display);font-size:1.12rem;color:var(--ink);font-weight:560}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--ff-body);font-size:1.5rem;color:var(--raspberry);transition:transform .3s;flex:none}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 .2em 1.2em;color:var(--ink-soft);line-height:1.7}
.faq__a p{margin:0}
@media(max-width:760px){.order__grid{grid-template-columns:1fr}}

/* =========================================================
   GRACEFUL IMAGE LOADING — shimmer behind frames (v9)
   ========================================================= */
/* static warm placeholders (shimmer removed — perf) */
.archframe,.gtile,.sgram,.cartephotos figure{background-color:#f6e9cf}

/* =========================================================
   NOS DEUX MAISONS — two locations (v10)
   ========================================================= */
.maisons{overflow:hidden}
.maisons__head{position:relative;z-index:2}
.maisons__yacht,.maisons__palm{position:absolute;color:rgba(255,232,196,.14);pointer-events:none}
.maisons__yacht{right:-3%;top:4%;width:clamp(160px,22vw,320px);height:auto}
.maisons__palm{left:-4%;bottom:2%;width:clamp(140px,18vw,260px);height:auto}
.maisons__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,34px);max-width:1040px;margin:0 auto}
@media(min-width:880px){.maisons__grid{grid-template-columns:1fr 1fr}}
.lieu{background:linear-gradient(180deg,#fffdf8,#fdf4e3);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid rgba(200,152,98,.5);display:flex;flex-direction:column;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s}
.lieu:hover{transform:translateY(-6px)}
.lieu__media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.lieu__media img{width:100%;height:112%;object-fit:cover;transition:transform .7s var(--ease)}
.lieu:hover .lieu__media img{transform:scale(1.05)}
.lieu__flag{position:absolute;top:14px;left:14px;background:var(--moss);color:var(--wheat-text);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border-radius:100px;padding:.5em 1.1em;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.lieu__flag--new{background:var(--raspberry);color:#fff}
.lieu__body{padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;align-items:center;flex:1}
.lieu__ico{width:44px;height:44px;color:var(--camel);margin:-.4rem 0 .5rem}
.lieu__body h3{color:var(--moss-deep);font-size:clamp(1.25rem,2.4vw,1.55rem)}
.lieu__sub{font-family:var(--ff-display);font-style:italic;color:var(--camel-deep);font-size:.98rem;max-width:38ch;margin:.4rem auto 1.1rem}
.lieu__facts{list-style:none;margin:0 auto 1.3rem;padding:0;display:grid;gap:.85rem;width:fit-content;text-align:left}
.lieu__facts li{display:flex;gap:.8rem;align-items:flex-start}
.lieu__facts .ico{font-size:1.25rem;color:var(--raspberry);margin-top:.15rem;flex:none}
.lieu__facts b{font-family:var(--ff-display);font-size:1rem;display:block;color:var(--ink)}
.lieu__facts span{font-size:.83rem;color:var(--ink-soft)}
.lieu__cta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:auto}
.maisons__map{margin:clamp(28px,4vw,44px) auto 0;position:relative;z-index:2}
.maisons__mapnote{text-align:center;font-size:.84rem;color:rgba(255,247,236,.7);margin:.9rem 0 0;font-style:italic}

/* hero palm drift */
.drift--7{width:clamp(90px,12vw,160px);left:18%;top:12%;color:var(--moss);opacity:.4}

/* =========================================================
   MOBILE QUICK-ACTION BAR (v10) — mobile-first nicety
   ========================================================= */
.mab{display:none}
@media(max-width:860px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .mab{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:60;
    display:flex;align-items:stretch;gap:6px;background:rgba(255,247,236,.94);backdrop-filter:blur(14px);
    border:1px solid rgba(200,152,98,.5);border-radius:22px;padding:7px;box-shadow:0 18px 44px -18px rgba(42,33,24,.55)}
  .mab a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:.5em 0;border-radius:16px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--moss-deep)}
  .mab a .ico{font-size:1.35rem}
  .mab__main{background:var(--raspberry);color:#fff !important;box-shadow:0 10px 22px -10px rgba(227,11,93,.7)}
  .totop{bottom:calc(86px + env(safe-area-inset-bottom,0px));right:16px;width:44px;height:44px}
  /* larger tap targets + breathing room */
  .nav__burger{padding:12px}
  .faq__item summary{padding:1.25em .2em}
}

/* =========================================================
   LOCATION PHOTO MOSAICS (v11)
   ========================================================= */
.lieu__strip{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 6px 0;background:transparent}
.lieu__strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block;
  transition:transform .5s var(--ease)}
.lieu__strip img:hover{transform:scale(1.04)}
.lieu__media,.lieu__strip img{background-color:#f6e9cf}

/* ===================== SKIP LINK + RECIPES TEASER (v12) ===================== */
.skiplink{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--raspberry);color:#fff;
  font-weight:700;padding:.8em 1.4em;border-radius:0 0 14px 0}
.skiplink:focus{left:0}
.rteaser__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);max-width:1040px;margin:0 auto}
.rt{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(180deg,#fffdf8,#fdf4e3);
  border:1px solid rgba(200,152,98,.5);box-shadow:var(--shadow-soft);transition:transform .4s var(--ease),box-shadow .4s}
.rt:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.rt img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--ease)}
.rt:hover img{transform:scale(1.05)}
.rt__body{padding:1rem 1.2rem 1.2rem;text-align:center}
.rt__body b{font-family:var(--ff-display);font-weight:600;color:var(--moss-deep);font-size:1.12rem;display:block}
.rt__body em{font-size:.84rem;color:var(--ink-soft);font-style:italic;font-family:var(--ff-display)}
.rteaser__more{text-align:center;margin:2rem 0 0}
@media(max-width:760px){.rteaser__grid{grid-template-columns:1fr;max-width:420px}}

/* ===================== v14 — Daniela review round ===================== */
.lieu__media a{display:block;width:100%;height:100%}
.hero__logo{filter:drop-shadow(0 18px 30px rgba(227,11,93,.18))}
/* v15 — designer pass on Daniela round */
.hero__sub{max-width:660px;line-height:1.7}

/* =========================================================
   v16 — DE-CLUNK: performance + layout polish
   ========================================================= */
@media(max-width:860px){.grain{display:none}}
/* nav: stop the tablet/laptop crowding & wrapping */
.nav{flex-wrap:nowrap;min-width:0}
.nav__links{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
@media(max-width:1360px){.nav__greet{display:none}}
@media(max-width:1180px){.nav__status{display:none}}
@media(max-width:1080px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}
/* hero: tighter vertical rhythm */
.hero{padding-top:64px}
.hero__awning{margin-bottom:0}
.hero__logo{margin-top:0}
.hero__sub{margin-bottom:1.6rem}
/* fewer always-running layers */
.spark{display:none}
.seal__ring{animation-duration:48s}
/* drift ornaments: calmer, less visually noisy */
.drift{opacity:.34}
.drift--3{opacity:.3}.drift--5{opacity:.3}
.hero__bigorn{opacity:.7;color:rgba(200,152,98,.12)}
/* cards: consistent soft hover (less jumpy) */
.way:hover,.jcard:hover,.rt:hover,.nm:hover,.lieu:hover{transform:translateY(-4px)}

/* =========================================================
   v17 — LUX FINISH · the couture layer
   Precision overrides, applied last by intent.
   ========================================================= */
/* brand moment on text selection */
::selection{background:var(--raspberry);color:#fff}

/* typographic poise */
h1,h2,h3{text-wrap:balance}
h2{letter-spacing:-.015em}
.lede{text-wrap:balance}
.topbar{letter-spacing:.18em}
.eyebrow{letter-spacing:.24em}

/* softer, more expensive shadow language */
:root{
  --shadow:0 24px 56px -30px rgba(42,33,24,.4);
  --shadow-soft:0 14px 36px -24px rgba(42,33,24,.32);
}

/* buttons: quieter confidence */
.btn{letter-spacing:.02em}
.btn--primary{box-shadow:0 10px 24px -12px rgba(227,11,93,.5)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(227,11,93,.55)}
.btn--ghost{border-width:1.5px}
.btn--ghost:hover,.btn--ghost-cream:hover{transform:translateY(-2px)}

/* hero hierarchy: the logo owns the raspberry — awning steps back to gold */
.hero__awning{color:var(--camel);width:clamp(100px,13vw,150px);opacity:.9}

/* scroll progress: a hairline, not a stripe */
.scrollbar{height:2px;box-shadow:none}

/* inputs: one radius, one calm focus */
.field input,.field textarea,.tool .field select{border-radius:12px}
.field input:focus,.field textarea:focus,.tool .field select:focus{box-shadow:0 0 0 3px rgba(71,125,26,.12)}
.news__form input{border-width:1.5px}

/* FAQ: gentle interaction cue */
.faq__item summary:hover,.jfaq summary:hover{color:var(--raspberry)}

/* gallery captions: smaller, finer */
.gtile figcaption{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* footer: finer seam */
.footer__bottom{letter-spacing:.02em}
.footer__col a{font-size:.92rem}

/* mobile action bar: softer presence */
@media(max-width:860px){
  .mab{box-shadow:0 12px 32px -16px rgba(42,33,24,.4);border-radius:20px}
  .mab__main{box-shadow:0 8px 18px -8px rgba(227,11,93,.55)}
}

/* ribbons: a touch less shouty */
.ribbon__track{font-size:clamp(1rem,2vw,1.45rem)}
.topbar__track{padding:8px 0}

/* lieu cards: hairline gold seam above body */
.lieu__body{border-top:1px solid rgba(200,152,98,.35)}

/* drawer: luxury dark with gold hairlines */
.drawer__links a{padding:.15em 0;border-bottom:1px solid rgba(255,232,196,.12)}
.drawer__links a:last-of-type{border-bottom:0}
/* lux: ornaments never collide with type on small screens */
@media(max-width:700px){
  .drift--7{display:none}
  .drift--1{top:34%;left:2%}
  .drift--2{top:30%}
}
/* v18 — pickup request flow */
.tool__msg{min-height:1.1em;font-weight:700;font-size:.88rem;text-align:center;margin:.7rem 0 0}
.tool__note a{color:var(--raspberry);font-weight:700}

@media (min-width:1001px) and (max-width:1150px){.footer__top{grid-template-columns:1fr 1fr 1fr;text-align:left}.footer__brand{grid-column:1/-1}}

/* ---------------------------------------------------------
   Media hygiene
   Every <img> carries intrinsic width and height attributes so
   the browser can reserve the right box before the file lands
   and the page stops jumping while it loads. Those attributes
   must never dictate the rendered height: anything the layout
   sizes by width keeps its own aspect ratio. Lowest possible
   specificity on purpose, so any real rule still wins.
   --------------------------------------------------------- */
img{height:auto}

/* Anchors must not land under the sticky header. Without this every
   in page jump (the action bar, FAQ links, the capture block) puts its
   target roughly one header height too high, hidden behind the bar. */
html{scroll-padding-top:88px}
@media (min-width:861px){html{scroll-padding-top:104px}}

/* ---------------------------------------------------------
   Horizontal scroll guard
   Decorative layers are positioned to bleed past the edge on
   purpose. overflow-x:clip contains them without the side
   effect overflow-x:hidden has, which is to silently kill
   position:sticky on the header.
   --------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* ---------------------------------------------------------
   The hero must never be opacity-gated
   Everything with .reveal starts at opacity:0 and waits for
   JS to add .in, with a 1.4s CSS animation as the safety net.
   That is fine below the fold, but the hero holds the Largest
   Contentful Paint element, and an element at opacity:0 has
   not painted. On a 3G connection this pushed LCP to ~3.5s
   even though the logo itself had long since downloaded.
   The hero keeps its entrance, but as a transform only, so it
   is painted from the first frame.
   --------------------------------------------------------- */
.js .hero .reveal{
  opacity:1;
  animation:heroRise .8s var(--ease-out) both;
}
.js .hero .reveal:nth-child(2){animation-delay:.06s}
.js .hero .reveal:nth-child(3){animation-delay:.12s}
.js .hero .reveal:nth-child(4){animation-delay:.18s}
@keyframes heroRise{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .hero .reveal{animation:none}
}