/* Chez Grand-Mère — v6. DA de la v5 conservée (Formica menthe/jaune, papier peint fleuri, vichy, lettrage rouge, botanique),
   réalisation refaite : textures, densité, typo lisible, mobile composé, motion. */

@font-face{font-family:"Young Serif";src:url(/fonts/young-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --font-display:"Young Serif",Georgia,serif;
  --font-text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cream:oklch(95.5% .025 85);
  --cream-2:oklch(92% .035 85);
  --green:oklch(36% .07 160);
  --green-deep:oklch(28% .055 160);
  --red:oklch(48% .17 25);
  --red-deep:oklch(40% .15 25);
  --mint:oklch(90% .045 165);
  --yellow:oklch(93% .08 95);
  --pink:oklch(78% .08 10);
  --ink:oklch(27% .04 160);
  --muted:oklch(44% .035 160);
  --line:oklch(36% .07 160 / .2);
  --step--1:clamp(.875rem,.85rem + .12vw,.95rem);
  --step-0:clamp(1rem,.97rem + .18vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.2rem,1.55rem + 2.9vw,4rem);
  --step-4:clamp(3rem,1.8rem + 5.6vw,6.6rem);
  --s2:.5rem;--s3:1rem;--s4:1.5rem;--s5:2.25rem;--s6:3.5rem;--s7:5rem;
  --section-y:clamp(3.5rem,2.4rem + 4.6vw,6rem);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --wrap:min(100% - 2.5rem,1280px);
  --header-h:4rem;
  --tex-paper:url(/img/tex-papier.webp);
  --tex-wallpaper:url(/img/tex-papier-peint.webp);
  --tex-vichy:url(/img/tex-vichy.webp);
  --tex-mint:url(/img/tex-formica-menthe.webp);
  --tex-yellow:url(/img/tex-formica-jaune.webp);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;color:var(--ink);font-family:var(--font-text);font-size:var(--step-0);line-height:1.6;background:var(--cream) var(--tex-paper) repeat;background-size:640px}
img,svg{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--green)}
p{margin:0 0 var(--s3)}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--green);color:var(--cream);padding:.75rem 1rem}
.skip:focus{top:1rem}
main{overflow-x:clip}
section{position:relative;padding-block:var(--section-y)}
.eyebrow{font-size:var(--step--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:var(--s3)}
.section-title{font-size:var(--step-3);margin-bottom:var(--s4)}
.section-lede{font-size:var(--step-1);line-height:1.5;max-width:46ch}
.capacity{font-family:var(--font-display);font-size:var(--step-1);color:var(--red)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream) var(--tex-paper);background-size:640px;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:baseline;gap:.3em;min-height:44px;align-items:center;font-family:var(--font-display);font-size:clamp(1.15rem,.7rem + 2.4vw,1.45rem);color:var(--red);text-decoration:none;white-space:nowrap}
.brand-chez{color:var(--green)}
.nav-toggle{font:700 var(--step--1)/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:none;border:1.5px solid var(--green);border-radius:999px;padding:.7rem 1.1rem;min-height:44px;cursor:pointer}
.nav-panel{display:none}
.nav-open{overflow:hidden}
.nav-open .nav-panel{display:flex;position:fixed;inset:var(--header-h) 0 0;z-index:60;flex-direction:column;justify-content:center;gap:var(--s5);padding:var(--s5) 1.5rem calc(var(--s6) + env(safe-area-inset-bottom));background:var(--mint) var(--tex-mint);background-size:520px}
.nav-list{display:flex;flex-direction:column;gap:var(--s3)}
.nav-list a{font-family:var(--font-display);font-size:clamp(2.2rem,9vw,3.2rem);color:var(--green);text-decoration:none;line-height:1.1}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.8rem 1.45rem;border-radius:999px;border:1.5px solid var(--green);font-weight:700;text-decoration:none;line-height:1.2;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 12px 24px -14px oklch(48% .17 25 / .9)}
.btn--ghost{color:var(--green);background:oklch(100% 0 0 / .45)}
@media (hover:hover) and (pointer:fine){
  .btn--red:hover{background:var(--red-deep);border-color:var(--red-deep)}
  .btn--ghost:hover{background:var(--green);color:var(--cream)}
}
.status{display:inline-flex;align-items:center;gap:.5em;margin:0;padding:.35rem .85rem;border-radius:999px;font-size:var(--step--1);font-weight:700;background:oklch(100% 0 0 / .6);box-shadow:inset 0 0 0 1px var(--line)}
.status::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--muted)}
.status.is-open::before{background:oklch(62% .15 150);box-shadow:0 0 0 4px oklch(62% .15 150 / .2)}

/* ---------- decor & lettering ---------- */
.deco{position:absolute;z-index:3;pointer-events:none;display:block}
.deco-img img{width:100%;height:auto;filter:drop-shadow(0 14px 14px oklch(27% .04 160 / .18))}
.lettering{margin:0}
.lettering img{width:100%;height:auto}

/* ---------- hero ---------- */
.hero{padding-block:var(--s5) var(--s6);background:
  radial-gradient(40rem 28rem at 78% 40%,oklch(93% .07 95 / .7),transparent 70%),
  radial-gradient(34rem 24rem at 8% 95%,oklch(91% .05 165 / .65),transparent 70%)}
.hero-grid{display:grid;gap:var(--s4)}
.hero-text{display:contents}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;order:1}
.hero-meta .eyebrow{margin:0}
.hero-title{order:2;font-size:clamp(3rem,1.6rem + 6vw,6.2rem);line-height:.95;color:var(--green)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.wi{display:inline-block}
.hero-visual{order:3;position:relative;margin:var(--s2) auto var(--s3);width:min(80vw,26rem)}
.hero-sub{order:4;font-family:var(--font-display);font-size:var(--step-2);line-height:1.15;color:var(--red);margin:0}
.hero-body{order:5;font-size:var(--step-1);max-width:34ch}
.hero-text .actions{order:6}
.lettering--hero{order:7;width:min(62vw,20rem);transform:rotate(-4deg);margin-top:var(--s2)}
.arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px 18px 18px;overflow:hidden;border:10px solid #fff;box-shadow:0 2.6rem 3.4rem -2rem oklch(27% .04 160 / .55),0 0 0 1px var(--line);background:var(--mint)}
.arch picture,.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 88%}
.arch img{transform:scale(1.22);transform-origin:44% 80%} /* zoom on the Formica cabinet, less ceiling */
.deco--hero-l{width:48%;left:-26%;top:2%;transform:rotate(-8deg)}
.deco--hero-r{width:52%;right:-28%;top:38%}
.deco--hero-cup{width:44%;left:-18%;bottom:-8%}

/* ---------- restaurant (papier peint) ---------- */
.restaurant{background:oklch(90% .04 40);box-shadow:inset 0 14px 0 -6px var(--mint),inset 0 -14px 0 -6px var(--mint)}
.restaurant-grid{display:grid;gap:var(--s5)}
.paper-card{position:relative;z-index:2;background:var(--cream) var(--tex-paper);background-size:520px;padding:var(--s5) var(--s4);border-radius:6px;box-shadow:0 2rem 3rem -1.8rem oklch(20% .04 160 / .6)}
.paper-card p:not(.eyebrow):not(.capacity){font-size:var(--step-1);line-height:1.5}
.frame{position:relative;margin:0;padding:10px 10px 12px;background:#fff;box-shadow:0 1.8rem 2.6rem -1.6rem oklch(20% .04 160 / .65);transform:rotate(var(--rot,0deg))}
.frame img{width:100%;height:auto}
.frame--a{--rot:-2.5deg}
.frame--b{--rot:2deg}
.frame--c{--rot:-1deg}
.frame-tag{position:absolute;right:1rem;bottom:1.2rem;background:var(--red);color:#fff;font-family:var(--font-display);padding:.3rem .8rem;border-radius:999px;font-size:var(--step--1)}
.restaurant-grid .frame--a,.restaurant-grid .frame--b{width:78%}
.restaurant-grid .frame--b{justify-self:end;margin-top:calc(var(--s6) * -1.4)}

/* ---------- cuisine (vichy) ---------- */
.cuisine{padding-bottom:var(--s6)}
.cuisine-head{display:grid;gap:var(--s5);align-items:end}
.ticket{background:var(--yellow) var(--tex-yellow);background-size:400px;padding:var(--s4) var(--s4) var(--s3);border-radius:6px;box-shadow:0 1.6rem 2.4rem -1.6rem oklch(27% .04 160 / .55);transform:rotate(1.5deg);max-width:26rem}
.ticket-head{font-family:var(--font-display);font-size:var(--step-2);color:var(--red);margin-bottom:var(--s2)}
.ticket li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block:var(--s3);border-top:1.5px dashed oklch(36% .07 160 / .3)}
.ticket li strong{display:block}
.ticket li small{color:var(--muted);font-size:var(--step--1)}
.ticket-price{font-family:var(--font-display);font-size:var(--step-2);color:var(--green);white-space:nowrap}
.table-band{margin-top:var(--s6);padding-block:var(--s6);background:oklch(80% .07 20);box-shadow:inset 0 22px 30px -24px oklch(20% .04 25 / .55),inset 0 -22px 30px -24px oklch(20% .04 25 / .55)}
.dishes{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s2) max(1.25rem,calc((100vw - 1280px) / 2)) var(--s4);scrollbar-width:none}
.dish{flex:0 0 min(70vw,19rem);scroll-snap-align:center;background:var(--cream) var(--tex-paper);background-size:400px;padding:12px 12px var(--s4);border-radius:6px;box-shadow:0 1.8rem 2.6rem -1.6rem oklch(20% .04 25 / .7);transform:rotate(var(--r,0deg))}
.dish-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.dish-name{font-size:var(--step-2);margin:var(--s3) 0 .3rem;color:var(--red)}
.dish-desc{font-size:var(--step--1);color:var(--muted);margin:0;line-height:1.45}
.cuisine-foot{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s5)}

/* ---------- producteurs (formica menthe) ---------- */
.producteurs{background:var(--mint)}
.deco--prod{width:clamp(7rem,24vw,12rem);right:2%;top:-2.5rem;transform:rotate(18deg)}
.producteurs-grid{display:grid;gap:var(--s5);align-items:start}
.still-life{margin:var(--s4) 0 0}
.still-life img{width:100%;height:auto;filter:drop-shadow(0 18px 18px oklch(27% .04 160 / .2))}
.label-card{background:var(--cream) var(--tex-paper);background-size:480px;padding:var(--s5) var(--s4);border-radius:8px;box-shadow:0 2rem 3rem -1.8rem oklch(27% .04 160 / .55);border:1.5px solid oklch(36% .07 160 / .25);outline:6px solid var(--cream);outline-offset:-14px}
.label-title{font-family:var(--font-display);font-size:var(--step-2);color:var(--red);text-align:center;margin-bottom:var(--s4)}
.producers li{display:grid;grid-template-columns:1fr auto;gap:.15rem var(--s3);padding-block:.55rem;border-bottom:1px dotted oklch(36% .07 160 / .35);font-size:var(--step--1)}
.p-what{font-weight:700;color:var(--green)}
.p-who{text-align:right}
.p-dep{color:var(--muted)}
.producers-more{display:none}
.label-foot{margin:var(--s3) 0 0;font-size:var(--step--1);color:var(--muted);text-align:center}

/* ---------- détails ---------- */
.details{background:radial-gradient(36rem 24rem at 20% 50%,oklch(91% .05 10 / .45),transparent 70%)}
.details-grid{display:grid;gap:var(--s5);align-items:center}
.details-text p:not(.eyebrow){font-size:var(--step-1);line-height:1.5;max-width:40ch}
.lettering--details{width:min(84vw,26rem);transform:rotate(-3deg);margin-top:var(--s4)}
.frame--d{--rot:-2deg;width:82%}
.frame--e{--rot:2.5deg;width:70%;justify-self:end}

/* ---------- terrasse (formica jaune) ---------- */
.terrasse{background:var(--yellow)}
.terrasse-grid{display:grid;gap:var(--s5);align-items:center}
.terrasse-photo{margin:0;border-radius:999px 999px 14px 14px;overflow:hidden;border:10px solid #fff;box-shadow:0 2.2rem 3rem -1.8rem oklch(27% .04 160 / .55);max-width:30rem}
.terrasse-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- infos ---------- */
.infos-grid{display:grid;gap:var(--s5)}
.infos-address{font-family:var(--font-display);font-size:var(--step-2);color:var(--green);line-height:1.15}
.infos-contact{font-size:var(--step-1)}
.infos-contact a{display:inline-flex;min-height:44px;align-items:center}
.infos-card{position:relative;background:var(--cream-2) var(--tex-paper);background-size:480px;border-radius:10px;padding:var(--s5) var(--s4);box-shadow:inset 0 0 0 1px var(--line)}
.infos-card h3{font-size:var(--step-1);color:var(--red);margin:var(--s4) 0 var(--s2)}
.infos-card h3:first-of-type{margin-top:0}
.deco--infos-cup{width:clamp(7rem,26vw,11rem);right:-1rem;top:-3.5rem}
.hours{border-collapse:collapse;width:100%}
.hours th,.hours td{text-align:left;vertical-align:top;padding:.55rem 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:700;padding-right:var(--s3)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{padding:.3rem .8rem;border-radius:999px;background:var(--mint);font-size:var(--step--1);font-weight:600}

/* below-the-fold textures: applied after page load (main.js adds .tex-ready) so they never compete with the first screen */
.tex-ready .restaurant{background:linear-gradient(oklch(95% .03 85 / .18),oklch(95% .03 85 / .18)),var(--tex-wallpaper);background-size:auto,560px}
.tex-ready .table-band{background:linear-gradient(oklch(98% .01 85 / .12),oklch(98% .01 85 / .12)),var(--tex-vichy);background-size:auto,380px}
.tex-ready .producteurs{background:var(--mint) var(--tex-mint);background-size:520px}
.tex-ready .terrasse{background:var(--yellow) var(--tex-yellow);background-size:400px}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;padding-block:var(--s6) calc(var(--s6) + 6rem);background:var(--cream-2) var(--tex-paper);background-size:640px;border-top:14px solid oklch(80% .06 40)}
.tex-ready .site-footer{border-top-color:transparent;border-image:var(--tex-wallpaper) 30 round}
.footer-inner{position:relative;z-index:2}
.lettering--footer{width:min(86vw,34rem);margin:0 auto var(--s5)}
.footer-grid{display:grid;gap:var(--s4);font-size:var(--step--1)}
.footer-links a,.site-footer address a{display:inline-flex;min-height:44px;align-items:center}
.deco--footer-l{width:clamp(7rem,22vw,13rem);left:-2rem;bottom:-1rem}
.deco--footer-r{width:clamp(7rem,22vw,13rem);right:-2rem;top:1rem}
/* round badge CTA (mobile): curved label around a botanical flower, turns with the scroll */
.badge-cta{position:fixed;right:max(.9rem,env(safe-area-inset-right));bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:45;width:5.4rem;height:5.4rem;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:var(--cream);background:radial-gradient(circle at 50% 40%,var(--red),var(--red-deep));box-shadow:0 1.2rem 2rem -1rem oklch(30% .12 25 / .85),inset 0 0 0 3px oklch(100% 0 0 / .18);transition:transform 320ms var(--ease-out),opacity 320ms ease}
.badge-ring{position:absolute;inset:0;width:100%;height:100%;font:700 10.8px/1 var(--font-text);letter-spacing:.06em;fill:currentColor}
.badge-core{width:44%;aspect-ratio:1;border-radius:50%;background:var(--cream) var(--tex-paper);display:grid;place-items:center;box-shadow:inset 0 0 0 2px oklch(100% 0 0 / .6)}
.badge-flower img{width:88%;height:auto;margin:auto}
.badge-cta:active{transform:scale(.94)}
.js .badge-cta.is-hidden{opacity:0;transform:translateY(140%) rotate(20deg);pointer-events:none}

/* ---------- inner pages ---------- */
.prose{padding-block:var(--s6) var(--s7);max-width:44rem}
.prose h1{font-size:var(--step-3);margin-bottom:var(--s5)}
.prose h2{font-size:var(--step-1);margin:var(--s5) 0 var(--s2)}
.prose--center{text-align:center}
.lettering--404{width:min(80vw,24rem);margin:0 auto var(--s4)}
.actions--center{justify-content:center}

/* ---------- ≥ 40em ---------- */
@media (min-width:40em){
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .restaurant-grid{grid-template-columns:1fr 1fr}
  .restaurant-grid .paper-card,.restaurant-grid .frame--c{grid-column:1/-1}
  .restaurant-grid .frame--a,.restaurant-grid .frame--b{width:auto}
  .restaurant-grid .frame--b{margin-top:var(--s6)}
}

/* ---------- ≥ 56em : desktop ---------- */
@media (min-width:56em){
  :root{--header-h:4.75rem}
  .nav-toggle{display:none}
  .nav-panel{display:flex;align-items:center;gap:var(--s5)}
  .nav-list{flex-direction:row;gap:var(--s4)}
  .nav-list a{font-family:var(--font-text);font-size:var(--step-0);font-weight:600}
  .badge-cta{display:none}
  .site-footer{padding-bottom:var(--s6)}

  .hero{padding-block:var(--s5) var(--s7)}
  .hero-grid{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,5rem);align-items:center}
  .hero-text{display:block}
  .hero-meta{margin-bottom:var(--s4)}
  .hero-title{margin-bottom:var(--s3)}
  .hero-sub{margin-bottom:var(--s3)}
  .hero-text .actions{margin-top:var(--s4)}
  .lettering--hero{width:min(24vw,19rem);margin:var(--s3) 0 0 auto}
  .hero-visual{width:100%;max-width:35rem;margin:0 auto}

  .restaurant-grid{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:var(--s4);align-items:start}
  .restaurant-grid .paper-card{grid-column:1/7;grid-row:1}
  .restaurant-grid .frame--a{grid-column:8/11;grid-row:1;margin-top:var(--s5)}
  .restaurant-grid .frame--b{grid-column:10/13;grid-row:1/3;margin-top:calc(var(--s7) * 1.6)}
  .restaurant-grid .frame--c{grid-column:2/8;grid-row:2;margin-top:calc(var(--s5) * -1)}
  .paper-card{padding:var(--s6) var(--s5)}

  .cuisine-head{grid-template-columns:1.4fr 1fr}
  .ticket{justify-self:end}
  .dish{flex-basis:clamp(17rem,22vw,20rem)}
  /* pinned horizontal scroll only when GSAP is running (motion.js adds .is-scrub); otherwise the strip stays scrollable */
  .dishes.is-scrub{overflow:visible;width:max-content;scroll-snap-type:none}
  .table-band:has(.is-scrub){overflow:hidden}

  .producteurs-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .label-card{padding:var(--s6) var(--s5);transform:rotate(1deg)}

  .details-grid{grid-template-columns:.9fr 1.2fr .8fr;gap:var(--s5)}
  .frame--d,.frame--e{width:auto}
  .frame--e{margin-top:var(--s7)}

  .terrasse-grid{grid-template-columns:1fr 1.1fr;gap:var(--s7)}
  .infos-grid{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
}

/* =====================================================================
   MOBILE, traité comme la version principale (80-90 % du trafic).
   Tout est dans ce bloc < 56em : le desktop n'est pas touché.
   ===================================================================== */
.nav-quick,.deco--nav-cup{display:none}
.deck-count{display:none}
@media (max-width:55.99em){
  /* --- hero : l'arche en tête, presque pleine largeur ; le titre est une étiquette posée sur sa base --- */
  .hero{padding-top:var(--s3);padding-bottom:var(--s5)}
  .hero-grid{gap:var(--s3)}
  .hero-visual{order:1;width:calc(100vw - 2.5rem);max-width:30rem;margin:0 auto}
  .arch{border-width:8px}
  .hero-title{order:2;position:relative;z-index:4;justify-self:center;width:fit-content;max-width:94%;margin:-5.4rem auto 0;padding:.85rem 1.15rem 1rem;
    font-size:clamp(2.5rem,11.2vw,3.6rem);text-align:center;background:var(--cream) var(--tex-paper);background-size:420px;border-radius:6px;
    box-shadow:0 1.6rem 2.2rem -1.4rem oklch(27% .04 160 / .6),0 0 0 1px var(--line);rotate:-2deg}
  .hero-meta{order:3;justify-content:center;text-align:center;margin-top:var(--s2)}
  .hero-sub{order:4;text-align:center}
  .hero-body{order:5;text-align:center;margin-inline:auto}
  .hero-text .actions{order:6;justify-content:center}
  .lettering--hero{order:7;margin:var(--s2) auto 0}
  .deco--hero-l{width:42%;left:-15%;top:-5%}
  .deco--hero-r{width:44%;right:-17%;top:22%}
  .deco--hero-cup{width:36%;left:auto;right:-9%;bottom:16%}

  /* --- restaurant : le papier peint occupe l'écran, les cadres se balancent (motion.js) --- */
  .restaurant{padding-block:var(--s6)}
  .frame{transform-origin:50% -12px}

  /* --- plats : une pile d'assiettes servie au scroll (motion.js ajoute .is-deck) --- */
  .table-band.has-deck{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-block:var(--s4)}
  .table-band.has-deck .deck-count{display:block;align-self:center;margin:0 0 var(--s4);padding:.4rem 1rem;border-radius:999px;background:var(--cream) var(--tex-paper);
    font-family:var(--font-display);font-size:var(--step-1);color:var(--red);box-shadow:0 .8rem 1.4rem -1rem oklch(20% .04 25 / .8)}
  .dishes.is-deck{display:grid;place-items:center;overflow:visible;padding:0;scroll-snap-type:none}
  .dishes.is-deck .dish{grid-area:1/1;width:min(76vw,19.5rem);flex:none;will-change:transform}
  .dishes.is-deck .dish-img img{aspect-ratio:1/1}

  /* --- producteurs : 7 visibles, le reste sur demande --- */
  .js .producers:not(.is-open) li:nth-child(n+8){display:none}
  .js .producers-more{display:flex;margin:var(--s4) auto 0;min-height:46px;padding:.6rem 1.2rem;border-radius:999px;border:1.5px solid var(--green);background:oklch(100% 0 0 / .5);
    font:700 var(--step--1)/1 var(--font-text);color:var(--green);cursor:pointer}
  .still-life{margin-inline:-1rem}

  /* --- détails : collage serré au lieu d'une pile --- */
  .details-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .details-text{grid-column:1/-1;order:-1}
  .frame--d,.frame--e{width:auto}
  .frame--e{margin-top:var(--s6)}

  /* --- terrasse : l'arche déborde, le texte vient dessus comme dans le hero --- */
  .terrasse-photo{max-width:none;margin-inline:auto;width:calc(100vw - 2.5rem)}

  /* --- menu mobile : papier peint plein écran, carte de visite en papier --- */
  .nav-open .nav-panel{background:oklch(90% .04 40) var(--tex-wallpaper);background-size:520px;align-items:center;overflow:hidden}
  .nav-open .nav-list{background:var(--cream) var(--tex-paper);background-size:420px;padding:var(--s5) var(--s5);border-radius:8px;box-shadow:0 2rem 3rem -1.6rem oklch(20% .04 160 / .7);rotate:-1.5deg;width:min(100%,24rem)}
  .nav-open .nav-list li{animation:fade-up .55s var(--ease-out) both;animation-delay:calc(.05s + var(--i) * 60ms)}
  .nav-open .nav-book{width:min(100%,24rem)}
  .nav-open .nav-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0}
  .nav-quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;background:var(--cream);font-weight:700;color:var(--green);text-decoration:none;box-shadow:0 .6rem 1rem -.8rem oklch(20% .04 160 / .7)}
  .nav-open .deco--nav-cup{display:block;width:38vw;right:-6vw;bottom:2vh;rotate:-12deg}
}

/* ---------- entrée du hero en CSS (dès la 1re image, sans attendre le JS) ---------- */
@keyframes rise{from{transform:translateY(110%)}}
@keyframes arch-open{from{clip-path:inset(100% 0 0 0 round 999px 999px 18px 18px)}to{clip-path:inset(0 0 0 0 round 999px 999px 18px 18px)}}
@keyframes deco-in{from{opacity:0;transform:translateY(36px) scale(.86)}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.motion .wi{animation:rise 1s var(--ease-out) both;animation-delay:calc(.1s + var(--i) * 90ms)}
.motion .arch{animation:arch-open 1.3s .25s var(--ease-out) both}
.motion .deco--hero .deco-img{animation:deco-in 1.2s var(--ease-out) both;animation-delay:var(--d,.5s)}
.motion .hero-meta,.motion .hero-sub,.motion .hero-body,.motion .hero-text .actions{animation:fade-up .8s .55s var(--ease-out) both}
.motion .lettering--hero img{animation:write 1.4s .9s cubic-bezier(.65,0,.35,1) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
}