/* ==========================================================================
   LE MANAÏA — Restaurant de plage · Sainte-Anne, Guadeloupe
   Design system grounded in the printed menu cards:
   warm cream/sand grounds, rhum-gold accents, serif capitals + script labels,
   tropical fronds as ambient texture.
   ========================================================================== */

:root{
  /* palette */
  --sand:      #F5EFE4;   /* page ground */
  --cream:     #EFE7D8;   /* raised panels */
  --cream-2:   #E9DFCC;   /* deeper panel / boxed */
  --shell:     #FBF7EF;   /* lightest cards */
  --rhum:      #9A6A3C;   /* primary accent — logo gold-brown */
  --rhum-deep: #815530;
  --terre:     #5A4229;   /* darkest display text */
  --cacao:     #6E5C48;   /* body text */
  --cacao-soft:#8A7862;   /* muted / notes */
  --leaf:      #C6B393;   /* secondary decorative */
  --leaf-soft: #D9CBB0;
  --line:      #D8C9AE;   /* hairlines */
  --dark:      #2E2418;   /* footer ground */

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Dancing Script", cursive;
  --sans: "Jost", system-ui, sans-serif;

  /* rhythm */
  --wrap: 1200px;
  --gap: clamp(1.5rem, 4vw, 4rem);
  --radius: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  font-family:var(--sans);
  color:var(--cacao);
  background:var(--sand);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2.5px solid var(--rhum); outline-offset:3px; border-radius:4px; }

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

/* shared script label */
.script{
  font-family:var(--script);
  color:var(--rhum);
  font-weight:600;
  line-height:1;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:500; letter-spacing:.06em;
  font-size:.8rem; text-transform:uppercase; position:relative;
  padding:1em 2em; border-radius:100px;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"→"; font-size:1.05em; line-height:1; transform:translateX(-2px);
  transition:transform .35s var(--ease); opacity:.9;
}
.btn--solid{ background:var(--rhum); color:var(--shell); box-shadow:0 10px 26px -14px rgba(129,85,48,.95); }
.btn--solid:hover{ background:var(--rhum-deep); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(129,85,48,1); }
.btn--solid:hover::after{ transform:translateX(3px); }
.btn--ghost{ border:1.5px solid var(--rhum); color:var(--rhum); }
.btn--ghost:hover{ background:var(--rhum); color:var(--shell); transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(129,85,48,.9); }
.btn--ghost:hover::after{ transform:translateX(3px); }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:1000; background:var(--sand);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ text-align:center; color:var(--rhum); }
.preloader__le{ display:block; font-family:var(--serif); font-size:1.1rem; letter-spacing:.5em; padding-left:.5em; opacity:0; animation:pl 2.4s var(--ease) forwards; }
.preloader__name{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(3rem,10vw,5.5rem); letter-spacing:.06em; color:var(--terre); line-height:1; margin:.05em 0 .2em; opacity:0; animation:pl 2.4s .15s var(--ease) forwards; }
.preloader__sub{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--cacao-soft); opacity:0; animation:pl 2.4s .3s var(--ease) forwards; }
@keyframes pl{ 0%{opacity:0; transform:translateY(14px);} 30%{opacity:1; transform:translateY(0);} 80%{opacity:1;} 100%{opacity:1;} }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:1.15rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav.is-scrolled{ background:rgba(245,239,228,.9); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); }

.nav__brand{ display:flex; align-items:baseline; gap:.45em; color:var(--terre); transition:color .3s; }
.nav__brand-le{ font-family:var(--serif); font-size:.85rem; letter-spacing:.35em; padding-left:.35em; }
.nav__brand-name{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.08em; }
.hero-dark .nav__brand{ color:var(--shell); text-shadow:0 2px 14px rgba(30,22,12,.6); }

.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  font-size:.86rem; letter-spacing:.03em; color:var(--cacao); position:relative; padding:.2em 0;
  transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--rhum);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--rhum); }
.nav__links a:hover::after{ width:100%; }
.hero-dark .nav__links a{ color:rgba(251,247,239,.92); text-shadow:0 1px 10px rgba(30,22,12,.55); }
.hero-dark .nav__links a:hover{ color:#fff; }

.nav__cta{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:500;
  padding:.7em 1.5em; border-radius:100px; border:1.5px solid var(--rhum); color:var(--rhum);
  transition:background .3s, color .3s, transform .3s;
}
.nav__cta:hover{ background:var(--rhum); color:var(--shell); transform:translateY(-1px); }
.hero-dark .nav__cta{ border-color:rgba(251,247,239,.7); color:var(--shell); }
.hero-dark .nav__cta:hover{ background:var(--shell); color:var(--terre); border-color:var(--shell); }

.nav__burger{ display:none; width:34px; height:26px; position:relative; }
.nav__burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--terre); border-radius:2px; transition:transform .35s var(--ease), opacity .25s, background .3s; }
.nav__burger span:nth-child(1){ top:2px; }
.nav__burger span:nth-child(2){ top:12px; }
.nav__burger span:nth-child(3){ top:22px; }
.hero-dark .nav__burger span{ background:var(--shell); }
.nav__burger.is-open span:nth-child(1){ top:12px; transform:rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ top:12px; transform:rotate(-45deg); }
.nav__burger.is-open span{ background:var(--terre); }

/* drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(86vw,380px); z-index:99;
  background:var(--cream); box-shadow:-20px 0 60px -30px rgba(46,36,24,.6);
  transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:2rem 2.2rem;
}
.drawer.is-open{ transform:translateX(0); visibility:visible; }
.drawer__links{ display:flex; flex-direction:column; gap:.4rem; }
.drawer__links a{ font-family:var(--serif); font-size:1.9rem; color:var(--terre); padding:.35rem 0; border-bottom:1px solid var(--line); transition:color .3s, padding-left .3s; }
.drawer__links a:hover{ color:var(--rhum); padding-left:.4rem; }
.drawer__cta{ margin-top:1rem; font-family:var(--sans)!important; font-size:.85rem!important; letter-spacing:.05em; text-transform:uppercase; color:var(--rhum)!important; border-bottom:none!important; }
.drawer__social{ display:flex; gap:1.4rem; margin-top:2rem; }
.drawer__social a{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cacao-soft); transition:color .3s; }
.drawer__social a:hover{ color:var(--rhum); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; z-index:2; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.08); animation:heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 22% 55%, rgba(30,22,12,.72) 0%, rgba(30,22,12,.45) 30%, transparent 62%),
    linear-gradient(90deg, rgba(30,22,12,.85) 0%, rgba(30,22,12,.62) 34%, rgba(30,22,12,.28) 66%, rgba(30,22,12,.35) 100%),
    linear-gradient(180deg, rgba(30,22,12,.55) 0%, transparent 26%, transparent 58%, rgba(30,22,12,.6) 100%);
}
.hero__frond{ position:absolute; color:rgba(251,247,239,.12); width:clamp(180px,26vw,340px); z-index:-1; }
.hero__frond--l{ top:-4%; left:-6%; transform:rotate(18deg); }
.hero__frond--r{ bottom:-8%; right:-7%; transform:rotate(-160deg); }

.hero__content{ position:relative; max-width:var(--wrap); width:100%; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); color:var(--shell); }
.hero__eyebrow{
  font-size:.8rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(251,247,239,.92);
  margin-bottom:1.4rem; opacity:0; animation:rise .9s .1s var(--ease) forwards;
  text-shadow:0 2px 16px rgba(30,22,12,.7);
}
.hero__title{ line-height:.85; margin-bottom:1rem; }
.hero__le{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem); color:var(--shell); letter-spacing:.02em;
  margin-left:.15em; opacity:0; animation:rise .9s .25s var(--ease) forwards;
  text-shadow:0 2px 20px rgba(30,22,12,.7);
}
.hero__name{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(4rem,15vw,10rem); letter-spacing:.03em; color:var(--shell);
  text-shadow:0 4px 44px rgba(30,22,12,.55), 0 2px 12px rgba(30,22,12,.4);
  opacity:0; animation:rise 1s .35s var(--ease) forwards;
}
.hero__tag{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--shell); margin-bottom:1rem; letter-spacing:.01em;
  opacity:0; animation:rise .9s .5s var(--ease) forwards;
  text-shadow:0 2px 18px rgba(30,22,12,.75);
}
.hero__desc{
  max-width:38ch; font-size:1.02rem; color:rgba(251,247,239,.92); line-height:1.65; margin-bottom:2.2rem;
  opacity:0; animation:rise .9s .62s var(--ease) forwards;
  text-shadow:0 2px 16px rgba(30,22,12,.8);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; opacity:0; animation:rise .9s .75s var(--ease) forwards; }
.hero__actions .btn--ghost{ border-color:rgba(251,247,239,.7); color:var(--shell); }
.hero__actions .btn--ghost:hover{ background:var(--shell); color:var(--terre); }
@keyframes rise{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }

.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(251,247,239,.6); border-radius:20px; z-index:2; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--shell); border-radius:2px; transform:translateX(-50%); animation:scroll 1.8s var(--ease) infinite; }
@keyframes scroll{ 0%{opacity:0; top:8px;} 30%{opacity:1;} 60%{opacity:1; top:22px;} 100%{opacity:0; top:22px;} }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro{ position:relative; background:var(--sand); padding:clamp(4.5rem,10vw,8rem) 0; overflow:hidden; z-index:2; }
.intro__leaf{ position:absolute; top:-10%; right:-5%; width:clamp(200px,26vw,380px); color:var(--leaf); opacity:.28; transform:rotate(-24deg); pointer-events:none; }
.intro__inner{ position:relative; max-width:860px; margin:0 auto; padding:0 clamp(1.25rem,5vw,2rem); text-align:center; }
.intro__script{ font-size:clamp(1.8rem,5vw,2.8rem); margin-bottom:.4rem; }
.intro__head{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.12; color:var(--terre); letter-spacing:.005em; margin-bottom:1.6rem; }
.intro__body{ font-size:1.08rem; color:var(--cacao); max-width:62ch; margin:0 auto 2.8rem; line-height:1.75; }
.intro__stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4rem); }
.stat{ text-align:center; }
.stat__num{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,4vw,2.3rem); color:var(--rhum); line-height:1; }
.stat__star{ font-size:.7em; }
.stat__lbl{ display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cacao-soft); margin-top:.5rem; }

/* ==========================================================================
   SIGNATURES (bande photos plats, défilement horizontal)
   ========================================================================== */
.signatures{ background:var(--sand); padding:0 0 clamp(3.5rem,7vw,6rem); z-index:2; position:relative; }
.signatures__track{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 clamp(1.25rem,5vw,2.5rem) 1rem; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.signatures__track::-webkit-scrollbar{ display:none; }
.sig{
  position:relative; flex:0 0 auto; scroll-snap-align:start;
  width:clamp(210px,42vw,300px); aspect-ratio:4/5; border-radius:18px; overflow:hidden;
  box-shadow:0 20px 44px -28px rgba(46,36,24,.5);
}
.sig img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.sig:hover img{ transform:scale(1.06); }
.sig figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.4rem 1.2rem .95rem;
  display:flex; flex-direction:column; gap:.05rem;
  background:linear-gradient(180deg, transparent 0%, rgba(46,36,24,.35) 45%, rgba(46,36,24,.9) 100%);
}
.sig__name{ font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--shell); line-height:1.15; text-shadow:0 1px 12px rgba(46,36,24,.7); }
.sig__cat{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--leaf-soft); text-shadow:0 1px 8px rgba(46,36,24,.7); }

/* ==========================================================================
   MENU / CARTE
   ========================================================================== */
.menu{ position:relative; background:var(--cream); padding:clamp(4rem,9vw,7rem) 0 clamp(3.5rem,7vw,5.5rem); z-index:2; }
.menu__header{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); padding:0 1.25rem; }
.menu__eyebrow{ font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--cacao-soft); margin-bottom:1rem; }
.menu__title{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,7vw,4.2rem); letter-spacing:.04em; color:var(--terre); line-height:1; }
.menu__rule{ display:flex; justify-content:center; margin:1.1rem 0; }
.menu__rule svg{ width:64px; height:26px; color:var(--rhum); }
.menu__lead{ font-size:.98rem; color:var(--cacao-soft); max-width:52ch; margin:0 auto; }

/* tabs */
.menu__tabs{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  max-width:var(--wrap); margin:0 auto clamp(2rem,4vw,3rem);
  padding:1rem clamp(1rem,5vw,2rem);
  background:linear-gradient(180deg, var(--cream) 70%, rgba(233,223,204,0));
}
.menu__tabs::-webkit-scrollbar{ display:none; }
/* On mobile: single row that scrolls horizontally from the left */
@media (max-width:760px){
  .menu__tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
}
.mtab{
  flex:0 0 auto; scroll-snap-align:center;
  font-size:.86rem; letter-spacing:.02em; color:var(--cacao);
  padding:.7em 1.35em; border-radius:100px; white-space:nowrap;
  border:1.5px solid transparent; background:var(--shell);
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .2s, box-shadow .3s;
}
.mtab:hover{ border-color:var(--line); transform:translateY(-1px); }
.mtab.is-active{ background:var(--rhum); color:var(--shell); box-shadow:0 8px 20px -12px rgba(129,85,48,.9); }

/* stage / panels */
.menu__stage{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem); min-height:400px; }
.mpanel{ display:none; }
.mpanel.is-active{ display:block; animation:panelIn .5s var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.mpanel__intro{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--cacao); text-align:center; max-width:56ch; margin:0 auto clamp(2.2rem,4vw,3.2rem); line-height:1.5;
}

.mcols{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:860px){ .mcols.cols-2{ grid-template-columns:1fr 1fr; } .mcols.cols-3{ grid-template-columns:1fr 1fr 1fr; } }
@media (min-width:640px) and (max-width:859px){ .mcols.cols-3{ grid-template-columns:1fr 1fr; } }

.mgroup{ margin-bottom:clamp(2rem,3.5vw,2.8rem); }
.mgroup:last-child{ margin-bottom:0; }
.mgroup__title{ font-size:1.02rem; letter-spacing:.02em; }
.mgroup__title.is-serif{ font-family:var(--serif); font-weight:600; font-size:1.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--terre); }
.mgroup__title.is-script{ font-family:var(--script); font-weight:600; font-size:1.95rem; color:var(--rhum); }
.mgroup__note{ font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cacao-soft); margin-left:.5em; }
.mgroup__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem; margin-bottom:.4rem; }
.mgroup__underline{ width:44px; height:2px; background:var(--rhum); opacity:.5; margin-bottom:1.1rem; border-radius:2px; }

/* boxed group (matches the cream cards on printed menus) */
.mgroup.is-boxed{ background:var(--cream-2); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2rem); }
.mgroup.is-boxed .mgroup__underline{ opacity:.6; }
.mgroup.is-dark{ background:var(--rhum); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2rem); color:var(--shell); }
.mgroup.is-dark .mgroup__title{ color:var(--shell); }
.mgroup.is-dark .mgroup__underline{ background:rgba(251,247,239,.6); }
.mgroup.is-dark .mitem__name,
.mgroup.is-dark .mitem__price,
.mgroup.is-dark .mitem__desc,
.mgroup.is-dark .mitem__note{ color:var(--shell); }
.mgroup.is-dark .mitem__desc{ color:rgba(251,247,239,.82); }

/* item */
.mitem{ margin-bottom:1.15rem; }
.mitem:last-child{ margin-bottom:0; }
.mitem__top{ display:flex; align-items:baseline; gap:.6rem; }
.mitem__name{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--terre); line-height:1.2; }
.mitem__note{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:.92rem; color:var(--cacao-soft); }
.mitem__dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:12px; }
.mitem__price{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--rhum); white-space:nowrap; }
.mitem__desc{ font-size:.9rem; color:var(--cacao-soft); line-height:1.55; margin-top:.25rem; max-width:52ch; }

/* variant grid (gaufres/crêpes) */
.mvariant{ margin-top:.4rem; }
.mvariant__row{ padding:.9rem 0; border-top:1px solid var(--line); }
.mvariant__row:first-child{ border-top:none; }
.mvariant__name{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--terre); }
.mvariant__desc{ font-size:.86rem; color:var(--cacao-soft); margin:.15rem 0 .55rem; }
.mvariant__prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:.4rem .6rem; }
.mvariant__cell{ text-align:center; }
.mvariant__lbl{ display:block; font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--cacao-soft); margin-bottom:.15rem; }
.mvariant__val{ display:block; font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--rhum); }

/* subgroups (bières pressions/bouteilles) */
.msub{ margin-top:1rem; }
.msub__title{ font-family:var(--script); font-weight:600; font-size:1.35rem; color:var(--rhum-deep); margin-bottom:.5rem; }

.menu__foot{ text-align:center; font-size:.78rem; color:var(--cacao-soft); max-width:56ch; margin:clamp(2.5rem,5vw,4rem) auto 0; padding:0 1.25rem; letter-spacing:.01em; }

/* ==========================================================================
   LE LIEU
   ========================================================================== */
.place{ background:var(--sand); padding:clamp(4rem,9vw,7rem) 0; z-index:2; position:relative; }
.place__grid{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem); display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:900px){ .place__grid{ grid-template-columns:1.05fr .95fr; } }
.place__media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -34px rgba(46,36,24,.5); }
.place__media img{ width:100%; height:100%; min-height:340px; object-fit:cover; transition:transform 1.2s var(--ease); }
.place__media:hover img{ transform:scale(1.04); }
.place__badge{ position:absolute; bottom:1.2rem; left:1.2rem; background:var(--shell); border-radius:16px; padding:.7rem 1.1rem; text-align:center; box-shadow:0 12px 28px -16px rgba(46,36,24,.6); }
.place__badge-num{ display:block; font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--rhum); line-height:1; }
.place__badge-lbl{ display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cacao-soft); margin-top:.2rem; }
.place__script{ font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:.3rem; }
.place__head{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,4.5vw,2.8rem); color:var(--terre); line-height:1.15; margin-bottom:1.2rem; }
.place__text > p{ font-size:1.02rem; color:var(--cacao); line-height:1.7; margin-bottom:1.6rem; }
.place__meaning{ position:relative; padding:1.1rem 1.3rem 1.1rem 3.4rem; background:var(--cream); border-radius:16px; border-left:3px solid var(--rhum); font-size:.96rem !important; color:var(--cacao) !important; }
.place__meaning em{ font-family:var(--serif); font-style:italic; color:var(--rhum-deep); font-weight:600; }
.place__meaning-icon{ position:absolute; left:1rem; top:1.05rem; width:26px; height:26px; color:var(--rhum); }
.place__meaning-icon svg{ width:100%; height:100%; }
.place__list{ list-style:none; margin-bottom:2rem; }
.place__list li{ position:relative; padding:.7rem 0 .7rem 1.8rem; border-bottom:1px solid var(--line); font-size:.98rem; color:var(--cacao); }
.place__list li::before{ content:""; position:absolute; left:0; top:1.15rem; width:8px; height:8px; border-radius:50%; background:var(--rhum); }
.place__list li span{ font-family:var(--serif); font-weight:600; color:var(--terre); }

/* ==========================================================================
   BANDE IMMERSIVE (parallax)
   ========================================================================== */
.band{ position:relative; min-height:clamp(340px,52vh,520px); display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:2; }
.band__media{ position:absolute; inset:0; z-index:-1; }
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
@media (min-width:820px){ .band{ background-attachment:fixed; } .band__media img{ object-position:center 55%; } }
.band__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(46,36,24,.35), rgba(46,36,24,.55)); }
.band__content{ position:relative; text-align:center; padding:2rem 1.5rem; color:var(--shell); }
.band__script{ display:block; font-size:clamp(2rem,6vw,3.4rem); color:var(--shell); margin-bottom:.4rem; text-shadow:0 2px 24px rgba(46,36,24,.5); }
.band__line{ font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(251,247,239,.9); }

/* ==========================================================================
   GALERIE
   ========================================================================== */
.gallery{ background:var(--cream); padding:clamp(4rem,9vw,7rem) 0; z-index:2; position:relative; }
.gallery__header{ text-align:center; margin-bottom:clamp(2.2rem,4vw,3.2rem); padding:0 1.25rem; }
.gallery__script{ font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:.2rem; }
.gallery__head{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5vw,3rem); color:var(--terre); letter-spacing:.03em; }
.gallery__mosaic{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem;
}
@media (min-width:760px){ .gallery__mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; } }
.gtile{ position:relative; border-radius:18px; overflow:hidden; min-height:220px; }
@media (min-width:760px){
  .gtile{ min-height:0; }
  .gtile--wide{ grid-column:span 2; grid-row:span 1; }
  .gtile--tall{ grid-row:span 2; }
}
.gtile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.gtile:hover img{ transform:scale(1.06); }
.gtile__cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:2.6rem 1.3rem 1.1rem;
  background:linear-gradient(180deg, transparent 0%, rgba(46,36,24,.4) 45%, rgba(46,36,24,.85) 100%);
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gtile:hover .gtile__cap, .gtile:focus-within .gtile__cap{ opacity:1; transform:translateY(0); }
.gtile__cap .script{ font-size:1.5rem; color:var(--shell); text-shadow:0 1px 14px rgba(46,36,24,.6); }
@media (hover:none){ .gtile__cap{ opacity:1; transform:none; } }
.gallery__note{ text-align:center; margin-top:2rem; font-size:.95rem; color:var(--cacao-soft); }
.gallery__note a{ color:var(--rhum); font-weight:500; border-bottom:1px solid var(--rhum); }

/* ==========================================================================
   INFOS / CONTACT
   ========================================================================== */
.infos{ position:relative; background:var(--sand); padding:clamp(4rem,9vw,7rem) 0 clamp(3.5rem,7vw,5rem); overflow:hidden; z-index:2; }
.infos__leaf{ position:absolute; bottom:-12%; left:-6%; width:clamp(200px,26vw,380px); color:var(--leaf); opacity:.24; transform:rotate(30deg); pointer-events:none; }
.infos__header{ text-align:center; margin-bottom:clamp(2.5rem,4vw,3.5rem); padding:0 1.25rem; }
.infos__title{ font-family:var(--serif); font-weight:600; font-size:clamp(2.3rem,6vw,3.6rem); color:var(--terre); letter-spacing:.03em; line-height:1; }

.infos__grid{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem);
  display:grid; grid-template-columns:1fr; gap:1.2rem;
}
@media (min-width:820px){
  .infos__grid{ grid-template-columns:1fr 1fr; grid-template-areas:"hours contact" "map map"; }
  .infocard--hours{ grid-area:hours; }
  .infocard--contact{ grid-area:contact; }
  .infocard--map{ grid-area:map; }
}
@media (min-width:1040px){
  .infos__grid{ grid-template-columns:1fr 1fr 1.15fr; grid-template-areas:"hours contact map"; }
}
.infocard{ background:var(--shell); border-radius:var(--radius); padding:clamp(1.6rem,3.5vw,2.4rem); box-shadow:0 20px 50px -34px rgba(46,36,24,.4); }
.infocard__script{ font-size:1.9rem; margin-bottom:1.3rem; }

/* hours */
.hours{ list-style:none; }
.hours li{ display:flex; align-items:baseline; gap:.5rem; padding:.62rem 0; }
.hours__day{ font-family:var(--serif); font-size:1.12rem; color:var(--terre); letter-spacing:.03em; }
.hours__dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); }
.hours__time{ font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--cacao); white-space:nowrap; }
.hours li.is-late .hours__time{ color:var(--rhum); }
.hours li.is-late .hours__day{ position:relative; }

/* contact */
.contact{ display:flex; flex-direction:column; }
.contact__row{ display:flex; flex-direction:column; gap:.15rem; padding:.85rem 0; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease); }
.contact__row:last-of-type{ border-bottom:none; }
a.contact__row:hover{ padding-left:.4rem; }
.contact__label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cacao-soft); }
.contact__value{ font-family:var(--serif); font-size:1.18rem; color:var(--terre); line-height:1.3; }
a.contact__row .contact__value{ color:var(--rhum); }
/* social buttons — shared between contact card and footer */
.socials{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.socbtn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.62em 1.15em .62em .9em; border-radius:100px;
  border:1.5px solid var(--line); color:var(--cacao);
  font-size:.82rem; letter-spacing:.03em; font-weight:500;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.socbtn svg{ width:18px; height:18px; flex:0 0 auto; }
.socbtn:hover{ background:var(--rhum); color:var(--shell); border-color:var(--rhum); transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(129,85,48,.9); }
/* round icon-only variant */
.socbtn--round{ padding:0; width:42px; height:42px; justify-content:center; border-radius:50%; }
.socbtn--round svg{ width:19px; height:19px; }
/* dark variant for footer */
.socbtn--dark{ border-color:rgba(251,247,239,.28); color:rgba(251,247,239,.85); }
.socbtn--dark:hover{ background:var(--leaf); color:var(--dark); border-color:var(--leaf); box-shadow:0 10px 22px -12px rgba(0,0,0,.5); }

/* map */
.infocard--map{ padding:0; overflow:hidden; display:flex; flex-direction:column; min-height:320px; }
.mapframe{ position:relative; flex:1; min-height:280px; }
.mapframe__fallback{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, var(--cream) 0%, transparent 60%),
    radial-gradient(circle at 80% 90%, var(--leaf-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--cream-2), var(--cream));
  display:grid; place-items:center; text-align:center;
}
.mapframe__leaf{ position:absolute; top:-15%; right:-30%; width:70%; color:var(--leaf); opacity:.35; }
.mapframe__pin{ position:relative; z-index:1; }
.mapframe__dot{ display:block; width:16px; height:16px; margin:0 auto .8rem; border-radius:50%; background:var(--rhum); position:relative; box-shadow:0 0 0 8px rgba(154,106,60,.18); }
.mapframe__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 8px rgba(154,106,60,.18); animation:ping 2.4s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(2.4); opacity:0; } }
.mapframe__label{ display:block; font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--terre); }
.mapframe__place{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cacao-soft); margin-top:.2rem; }
.mapframe iframe{ position:relative; z-index:1; width:100%; height:100%; border:0; min-height:280px; filter:sepia(.18) saturate(.9); background:transparent; }
.infocard__maplink{ display:block; text-align:center; padding:1rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rhum); font-weight:500; background:var(--shell); transition:background .3s; }
.infocard__maplink:hover{ background:var(--cream); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--dark); color:rgba(251,247,239,.8); padding:clamp(3.2rem,6vw,4.8rem) 0 1.5rem; position:relative; z-index:2; overflow:hidden; }
.foot::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--rhum), transparent); opacity:.5; }
.foot__inner{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem); display:grid; grid-template-columns:1fr; gap:2.8rem; }
@media (min-width:820px){ .foot__inner{ grid-template-columns:1.1fr 1.4fr; align-items:start; } }
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.foot__mark{ display:block; width:44px; height:44px; color:var(--leaf); margin-bottom:.9rem; }
.foot__mark svg{ width:100%; height:100%; }
.foot__le{ font-family:var(--serif); font-size:.95rem; letter-spacing:.4em; padding-left:.4em; color:var(--leaf); }
.foot__name{ font-family:var(--serif); font-weight:600; font-size:2.6rem; letter-spacing:.06em; color:var(--shell); line-height:1; }
.foot__sub{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(251,247,239,.55); margin-top:.6rem; }
.foot__socials{ display:flex; gap:.6rem; margin-top:1.6rem; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:560px){ .foot__cols{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; } }
.foot__h{ font-family:var(--serif); font-size:1.1rem; color:var(--leaf); margin-bottom:1rem; letter-spacing:.03em; }
.foot__col a{ display:block; font-size:.9rem; color:rgba(251,247,239,.72); padding:.32rem 0; line-height:1.4; transition:color .3s var(--ease), padding-left .3s var(--ease); position:relative; }
.foot__col a:hover{ color:var(--shell); padding-left:.5rem; }
.foot__col a::before{ content:""; position:absolute; left:-.1rem; top:50%; transform:translateY(-50%) scaleX(0); transform-origin:left; width:.35rem; height:1.5px; background:var(--leaf); transition:transform .3s var(--ease); }
.foot__col a:hover::before{ transform:translateY(-50%) scaleX(1); }
.foot__hours{ cursor:pointer; }
.foot__bar{ max-width:var(--wrap); margin:3rem auto 0; padding:1.5rem clamp(1.25rem,5vw,2.5rem) 0; border-top:1px solid rgba(251,247,239,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; }
.foot__bar p{ font-size:.76rem; color:rgba(251,247,239,.5); letter-spacing:.02em; }
.foot__legal{ font-style:italic; }

/* back to top */
.totop{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:80; width:46px; height:46px; border-radius:50%; background:var(--rhum); color:var(--shell); display:grid; place-items:center; font-size:1.2rem; box-shadow:0 12px 26px -12px rgba(129,85,48,.9); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .4s, visibility .4s, transform .4s, background .3s; }
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--rhum-deep); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   RESPONSIVE NAV
   ========================================================================== */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
}