/* =========================================================
   Costa Smeralda - site vitrine
   Direction artistique : éditorial méditerranéen / sarde
   ========================================================= */

:root{
  --azure-deep:#0b3a4d;
  --azure:#175b76;
  --azure-light:#a8c8d4;
  --sea-foam:#e6efe9;
  --cream:#f5efe4;
  --cream-warm:#ebe2d0;
  --paper:#fbf7ee;
  --ink:#1a1612;
  --ink-soft:#3a322a;
  --gold:#c9a352;
  --gold-deep:#a87c3a;
  --terracotta:#a83a2e;
  --olive:#3d5a32;
  --whatsapp:#25d366;
  --whatsapp-deep:#128c5a;

  --f-display:"Italiana", "Cormorant Garamond", Georgia, serif;
  --f-serif:"Cormorant Garamond", Georgia, serif;
  --f-sans:"Jost", "Helvetica Neue", system-ui, sans-serif;

  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --max: 1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:clip;          /* lock horizontal scroll at the root */
  overscroll-behavior-x:none;
}

/* Lenis smooth scroll bridge */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-x:none;
  width:100%;
  position:relative;
}
/* Belt-and-braces: kill any horizontal touch panning on mobile */
@media (max-width:760px){
  html, body{touch-action:pan-y; overflow-x:clip}
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400}
iframe{border:0; display:block}

/* Subtle paper grain everywhere */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:200;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:multiply;
  opacity:.4;
}

/* ---------------------------- Custom cursor ---------------------------- */
.cursor{
  position:fixed; top:0; left:0;
  width:34px; height:34px;
  border:1px solid var(--gold);
  border-radius:50%;
  pointer-events:none; z-index:300;
  transform:translate(-50%, -50%);
  transition:width .25s, height .25s, background .25s, border-color .25s, opacity .25s;
  opacity:0;
}
.cursor--dot{
  width:6px; height:6px;
  background:var(--gold); border:0;
  transition:transform .12s linear, opacity .25s, width .25s, height .25s;
}
.cursor.is-active{
  width:54px; height:54px;
  background:rgba(201,163,82,.15);
  border-color:var(--gold);
}
.cursor.is-visible{opacity:1}
.cursor--dot.is-active{width:8px; height:8px}
@media (hover:none), (pointer:coarse){
  .cursor{display:none !important}
  body, a, button{cursor:auto !important}
}
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a, button, input, select, textarea, [data-cursor="hover"]{cursor:none}
  input, textarea, select{cursor:text !important}
}

/* ---------------------------- Sticky chapter rail ---------------------------- */
.rail{
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:90;
  display:flex; flex-direction:column; gap:.85rem;
  font-family:var(--f-sans); font-size:.65rem;
  pointer-events:auto;
}
.rail a{
  display:flex; align-items:center; gap:.55rem;
  color:var(--ink-soft); opacity:.55;
  transition:opacity .35s, color .35s;
  letter-spacing:.2em; text-transform:uppercase;
}
.rail a span{
  display:inline-block; width:1.6em; text-align:right;
  font-family:var(--f-display); font-size:1rem;
  border-right:1px solid currentColor; padding-right:.6rem;
  transition:padding .35s, color .35s;
}
.rail a em{
  font-family:var(--f-serif); font-style:italic; font-size:.85rem;
  letter-spacing:.05em; text-transform:none;
  max-width:0; overflow:hidden; white-space:nowrap;
  transition:max-width .45s ease;
}
.rail a:hover, .rail a.is-active{opacity:1; color:var(--terracotta)}
.rail a:hover em, .rail a.is-active em{max-width:140px}
.rail.is-dark a{color:var(--cream-warm)}
.rail.is-dark a:hover, .rail.is-dark a.is-active{color:var(--gold)}
@media (max-width:1100px){.rail{display:none}}

/* ---------------------------- Typography ---------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.4rem, 5vw + .5rem, 4.6rem);
  line-height:1.02;
  letter-spacing:-.005em;
  color:var(--ink);
}
.display em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:500;
  color:var(--azure-deep);
}
.display--light{color:var(--cream)}
.display--light em{color:var(--gold)}

.lede{
  font-family:var(--f-serif);
  font-size:clamp(1.05rem, 1.2vw + .8rem, 1.35rem);
  font-style:italic;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:58ch;
}
.lede--light{color:#dcd0b9}

.eyebrow{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--f-sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow__line{display:inline-block; width:32px; height:1px; background:currentColor; opacity:.7}
.eyebrow--light{color:var(--cream-warm)}

/* ---------------------------- NAV ---------------------------- */
.nav{
  /* Posée en haut du hero, défile avec la page (pas sticky) */
  position:absolute; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(1.1rem + env(safe-area-inset-top, 0px))
          calc(var(--pad-x) + env(safe-area-inset-right, 0px))
          1.1rem
          calc(var(--pad-x) + env(safe-area-inset-left, 0px));
  color:var(--cream);
}
.nav__brand{display:flex; align-items:center; gap:.65rem}
.nav__mark{width:30px; height:30px; color:currentColor}
.nav__wordmark{font-family:var(--f-display); font-size:1.35rem; letter-spacing:.04em}

/* Italian flag accent (subtle vertical 3-stripe pin) */
.nav__flag{
  display:inline-flex; height:16px; border-radius:1px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  margin-left:.1rem;
}
.nav__flag i{display:block; width:3px; height:100%}
.nav__flag i:nth-child(1){background:#008c45}
.nav__flag i:nth-child(2){background:#f4f5f0}
.nav__flag i:nth-child(3){background:#cd212a}
.nav__links{display:flex; align-items:center; gap:1.6rem}
.nav__links a{
  font-size:.86rem; letter-spacing:.06em;
  position:relative; padding:.25rem 0;
  transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.6,.05,.2,1);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{
  border:1px solid currentColor; padding:.55rem 1.05rem !important;
  border-radius:999px; letter-spacing:.12em; font-size:.78rem !important;
  text-transform:uppercase;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--gold); color:var(--ink); border-color:var(--gold)}
.nav__burger{
  display:none;
  width:34px; height:34px;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.nav__burger span{display:block; width:22px; height:1.5px; background:currentColor; transition:transform .3s, opacity .3s}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------------------- BUTTONS ---------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem;
  font-family:var(--f-sans); font-size:.84rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid transparent; border-radius:999px;
  transition:transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn--gold{background:var(--gold); color:var(--ink); box-shadow:0 14px 30px -14px rgba(201,163,82,.7)}
.btn--gold:hover{background:var(--gold-deep); color:var(--cream); transform:translateY(-2px)}
.btn--ghost{border-color:currentColor; color:var(--cream)}
.btn--ghost:hover{background:var(--cream); color:var(--ink)}

/* Italia button: tricolor sweep on hover + flash burst on click */
.btn--italia{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn--italia::before,
.btn--italia::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  transform:translateX(-101%);
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.btn--italia::before{
  background:linear-gradient(90deg,
    #008c45 0%, #008c45 33.33%,
    #f4f5f0 33.33%, #f4f5f0 66.66%,
    #cd212a 66.66%, #cd212a 100%);
}
.btn--italia::after{
  background:linear-gradient(0deg, rgba(0,0,0,.32), rgba(0,0,0,.32));
  transition-delay:.06s;
}
.btn--italia:hover::before,
.btn--italia:hover::after,
.btn--italia:focus-visible::before,
.btn--italia:focus-visible::after{
  transform:translateX(0);
}
.btn--italia.btn--ghost:hover{
  background:transparent;
  color:var(--cream);
  border-color:rgba(245,239,228,.0);
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.btn--italia.is-flash{animation:italiaFlash .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes italiaFlash{
  0%,100% { box-shadow:0 0 0 0 rgba(245,239,228,0); }
  20% { box-shadow:0 0 0 8px rgba(0,140,69,.55), 0 0 30px 4px rgba(0,140,69,.4); }
  50% { box-shadow:0 0 0 10px rgba(244,245,240,.6), 0 0 36px 6px rgba(244,245,240,.45); }
  80% { box-shadow:0 0 0 8px rgba(205,33,42,.55), 0 0 30px 4px rgba(205,33,42,.4); }
}
.btn--whatsapp{
  background:var(--whatsapp); color:#063b1f;
  padding:1.05rem 1.8rem; font-weight:500;
  box-shadow:0 18px 38px -14px rgba(37,211,102,.55);
}
.btn--whatsapp:hover{background:var(--whatsapp-deep); color:var(--cream); transform:translateY(-2px)}

/* ---------------------------- HERO ---------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  color:var(--cream);
  padding:8rem var(--pad-x) 7rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{from{transform:scale(1.08)} to{transform:scale(1)}}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(11,58,77,.25) 0%, rgba(11,58,77,.7) 70%, rgba(11,58,77,.85) 100%),
    linear-gradient(180deg, rgba(11,58,77,.35) 0%, rgba(11,58,77,.55) 50%, rgba(11,58,77,.9) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero__meta-bar{
  position:absolute; top:5.5rem; left:0; right:0;
  padding:0 var(--pad-x);
  display:flex; justify-content:space-between;
  font-family:var(--f-sans); font-size:.7rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-warm);
  z-index:2; pointer-events:auto;
}
.hero__meta a{border-bottom:1px solid transparent}
.hero__meta a:hover{border-color:currentColor}

.hero__content{position:relative; max-width:980px; width:100%}
.hero__flourish{
  width:200px; height:14px; color:var(--gold);
  opacity:.85;
  margin:0 auto 1rem;
  display:block;
}
.hero__flourish--bottom{margin:1.2rem auto 1.6rem}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(3.4rem, 12vw, 9.5rem);
  line-height:.92;
  letter-spacing:.005em;
  margin:.65rem 0;
  display:flex; align-items:baseline; justify-content:center; gap:.28em;
  flex-wrap:wrap;
}
.word-mask{display:inline-block; overflow:hidden; padding:.06em 0; line-height:.92}
.word{display:inline-block; transform:translateY(105%); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s)}
.word.is-in{transform:translateY(0)}

.hero__tagline{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.1rem, 1.4vw + .7rem, 1.65rem);
  color:var(--cream-warm);
  margin:0 0 1.4rem;
}
.hero__cycle{
  display:inline-flex; align-items:baseline; gap:.6rem;
  font-family:var(--f-sans); font-size:.78rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream-warm); opacity:.9;
  margin:0 0 2.4rem;
}
.hero__cycle-label{opacity:.7}
.hero__cycle-words{
  position:relative; display:inline-block;
  min-width:11ch; text-align:left;
  height:1em; overflow:hidden;
  color:var(--gold); font-weight:500;
}
.hero__cycle-words span{
  position:absolute; top:0; left:0;
  opacity:0; transform:translateY(110%);
  transition:opacity .55s, transform .7s cubic-bezier(.2,.7,.2,1);
}
.hero__cycle-words span.is-active{opacity:1; transform:translateY(0)}
.hero__cycle-words span.is-leave{opacity:0; transform:translateY(-110%); transition-duration:.6s}

.hero__cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

.hero__scroll{
  position:absolute; bottom:5.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--cream-warm); opacity:.8;
  z-index:2;
}
.hero__scroll svg{width:20px; height:34px}

.hero__wave{
  position:absolute; bottom:-1px; left:0; right:0; width:100%; height:90px;
  z-index:1;
}

/* ---------------------------- MARQUEE ---------------------------- */
.marquee{
  background:var(--azure-deep);
  color:var(--gold);
  overflow:hidden;
  padding:1.4rem 0;
  border-top:1px solid rgba(201,163,82,.18);
  border-bottom:1px solid rgba(201,163,82,.18);
}
.marquee__track{
  display:flex; align-items:center; gap:2.2rem;
  width:max-content;
  animation:marquee 38s linear infinite;
  font-family:var(--f-display);
  font-size:clamp(1.3rem, 1.6vw + .7rem, 2rem);
  letter-spacing:.04em;
  white-space:nowrap;
}
.marquee__track span{display:inline-block}
.marquee__dot{color:var(--terracotta); font-size:.7em; transform:translateY(-.1em)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Image marquee - photos collées bord-à-bord (effet bande de film) */
.marquee--images{
  background:var(--azure-deep);
  padding:0;
  border-top:1px solid rgba(201,163,82,.18);
  border-bottom:1px solid rgba(201,163,82,.18);
}
.marquee--images .marquee__track{
  gap:0; /* photos collées entre elles */
  animation-duration:120s;
}
.marquee--images .marquee__track img{
  height:clamp(180px, 22vw, 280px);
  width:auto;
  flex-shrink:0;
  display:block;
  object-fit:cover;
  filter:saturate(.92);
  transition:filter .4s;
}
.marquee--images .marquee__track img:hover{filter:saturate(1.05)}

/* ---------------------------- SECTIONS ---------------------------- */
.section{
  position:relative;
  padding:var(--section-y) var(--pad-x);
  max-width:var(--max);
  margin:0 auto;
}
.chapter{
  display:flex; align-items:baseline; gap:1.2rem;
  margin-bottom:3.5rem;
  color:var(--gold);
}
.chapter__num{
  font-family:var(--f-display); font-size:2.4rem; line-height:1;
}
.chapter__label{
  font-family:var(--f-sans); font-size:.74rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--azure-deep);
  position:relative; padding-left:1rem;
}
.chapter--light .chapter__label{color:var(--cream-warm)}
.chapter__label::before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:1px; background:currentColor;
}

.ornament{
  display:flex; justify-content:center;
  color:var(--gold);
  margin:0 var(--pad-x);
  opacity:.7;
}
.ornament svg{width:220px; height:24px}

/* ---------------------------- II. STORIA ---------------------------- */
.storia__grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.storia__copy h2{margin-bottom:1.4rem}
.storia__copy > p{margin:0 0 1.2rem; max-width:58ch}
.storia__copy > p:not(.lede){font-size:1rem; color:var(--ink-soft); line-height:1.75}

.pillars{
  display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;
  margin-top:2.4rem;
}
.pillar{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(11,58,77,.12);
  border-radius:3px;
  background:var(--paper);
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.pillar:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 30px -22px rgba(11,58,77,.4)}
.pillar svg{width:28px; height:28px; flex-shrink:0; color:var(--terracotta)}
.pillar p{margin:0; line-height:1.3}
.pillar strong{display:block; font-family:var(--f-display); font-size:1.2rem; font-weight:400; color:var(--azure-deep)}
.pillar span{font-family:var(--f-serif); font-style:italic; font-size:.85rem; color:var(--ink-soft)}

.storia__figure{
  position:relative; margin:0;
}
.storia__slideshow{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  border-radius:2px;
  overflow:hidden;
  background:var(--cream-warm);
  box-shadow:
    -22px 22px 0 -2px var(--azure-deep),
    -22px 22px 0 -1px var(--gold);
}
/* Reverse layout: photo on the left, copy on the right */
.storia__grid--reverse{grid-template-columns:1fr 1.05fr}
.storia__grid--reverse .storia__copy{order:2}
.storia__grid--reverse .storia__figure{order:1}
.storia--reverse .storia__slideshow{
  box-shadow:
    22px 22px 0 -2px var(--azure-deep),
    22px 22px 0 -1px var(--gold);
}
.storia--reverse .storia__figure figcaption{justify-content:flex-end; text-align:right}
.storia__slideshow img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(.96);
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 6s ease-out;
}
.storia__slideshow img.is-active{
  opacity:1;
  transform:scale(1);
}
.storia__figure figcaption{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem;
  font-family:var(--f-serif); font-style:italic; font-size:.95rem;
  color:var(--ink-soft);
}
.figcaption__line{width:24px; height:1px; background:var(--gold)}

/* ---------------------------- III. ARTE ---------------------------- */
.arte__grid{
  display:grid; grid-template-columns:1fr 1.25fr .85fr; gap:clamp(1.6rem, 4vw, 4rem);
  align-items:center;
}
.arte__photo{
  margin:0;
  position:relative;
}
.arte__photo img{
  width:100%; aspect-ratio:4/5;
  object-fit:cover;
  border-radius:2px;
  filter:saturate(.95) contrast(1.02);
  box-shadow:
    22px 22px 0 -2px var(--azure-deep),
    22px 22px 0 -1px var(--gold);
}
.arte__photo figcaption{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem;
  font-family:var(--f-serif); font-style:italic; font-size:.95rem;
  color:var(--ink-soft);
}
@media (max-width:1100px){
  .arte__grid{grid-template-columns:1fr 1fr; gap:3rem}
  .arte__photo{grid-column:1 / -1; max-width:520px; margin:0 auto}
  .arte__photo img{aspect-ratio:16/9}
  .arte__photo img{box-shadow:-22px 22px 0 -2px var(--azure-deep), -22px 22px 0 -1px var(--gold)}
}
.arte__visual{position:relative}
.arte__img-wrap{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:
    0 30px 60px -30px rgba(11,58,77,.55),
    inset 0 0 0 8px var(--cream),
    inset 0 0 0 9px var(--gold);
  animation:floatY 6s ease-in-out infinite;
}
/* Plate variant: transparent PNG defines the circle - no wrapper frame */
.arte__img-wrap--plate{
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  filter:drop-shadow(0 24px 40px rgba(11,58,77,.35));
}
@keyframes floatY{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
.arte__img-wrap img{
  width:100%; height:100%; object-fit:cover;
  animation:arteSpin 80s linear infinite;
}
@keyframes arteSpin{to{transform:rotate(360deg)}}
.arte__stamp{
  position:absolute; bottom:-1rem; right:-.5rem;
  background:var(--terracotta); color:var(--cream);
  font-family:var(--f-display); font-size:1.4rem;
  padding:.4rem 1.4rem;
  border-radius:999px;
  letter-spacing:.04em;
  transform:rotate(-6deg);
  box-shadow:0 12px 24px -10px rgba(168,58,46,.5);
}
.arte__copy h2{margin-bottom:1.2rem}
.steps{list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-direction:column; gap:1.4rem}
.steps li{display:flex; gap:1.2rem; align-items:flex-start; padding-bottom:1.4rem; border-bottom:1px dotted rgba(11,58,77,.2)}
.steps li:last-child{border-bottom:0; padding-bottom:0}
.steps__num{
  font-family:var(--f-display); font-size:2.2rem; line-height:1;
  color:var(--gold); flex-shrink:0; min-width:2.5rem;
}
.steps h4{font-family:var(--f-display); font-size:1.6rem; color:var(--azure-deep); margin-bottom:.3rem}
.steps p{margin:0; color:var(--ink-soft); font-family:var(--f-serif); font-style:italic; font-size:1.05rem}

/* ---------------------------- IV. CUCINA ---------------------------- */
.cucina__head{margin-bottom:2.2rem; max-width:720px}
.cucina__head .display{margin-bottom:1rem}
/* Controls bar : just the discreet "Filtres & sections" toggle */
.cucina__controls{
  display:flex; justify-content:flex-end;
  margin-bottom:1rem;
}
.cucina__filter, .cucina__diet{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.diet-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem;
  font-family:var(--f-sans); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid rgba(11,58,77,.18);
  border-radius:999px;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s;
  box-shadow:0 2px 8px -4px rgba(11,58,77,.18);
}
.diet-btn > svg:first-of-type{width:14px; height:14px}
.diet-btn__caret{
  width:11px; height:11px;
  transition:transform .3s;
}
.diet-btn[aria-expanded="true"] .diet-btn__caret{transform:rotate(180deg)}
.diet-btn:hover, .diet-btn[aria-expanded="true"]{
  background:var(--azure-deep); color:var(--cream); border-color:var(--azure-deep);
}
.diet-btn__count{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px;
  padding:0 .35rem;
  background:var(--gold); color:var(--ink);
  font-size:.62rem; letter-spacing:0;
  border-radius:999px;
  font-family:var(--f-sans); font-weight:600;
}

/* Collapsible panel containing both section nav + diet filters */
.diet-panel{
  display:flex; flex-direction:column; gap:1.1rem;
  margin:0 0 1.6rem;
  padding:1.1rem 1.2rem;
  background:rgba(11,58,77,.04);
  border:1px solid rgba(11,58,77,.10);
  border-radius:6px;
  animation:dietPanelIn .35s ease-out;
}
@keyframes dietPanelIn{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}
.diet-panel__group{
  display:flex; flex-direction:column; gap:.55rem;
}
.diet-panel__label{
  font-family:var(--f-sans); font-size:.62rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); opacity:.8;
}
.diet-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem;
  font-family:var(--f-sans); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid rgba(11,58,77,.14);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.diet-chip__dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(11,58,77,.22);
  transition:background .25s, transform .25s;
}
.diet-chip:hover{transform:translateY(-1px); border-color:var(--azure-deep)}
.diet-chip.is-on{
  background:var(--azure-deep); color:var(--cream); border-color:var(--azure-deep);
}
.diet-chip.is-on .diet-chip__dot{background:var(--gold); transform:scale(1.4)}
.diet-chip[data-tag="veggie"].is-on  .diet-chip__dot,
.diet-chip[data-tag="veggie"]:hover  .diet-chip__dot{background:#7aab57}
.diet-chip[data-tag="piquant"].is-on .diet-chip__dot,
.diet-chip[data-tag="piquant"]:hover .diet-chip__dot{background:#d96a3a}
.diet-chip[data-tag="poisson"].is-on .diet-chip__dot,
.diet-chip[data-tag="poisson"]:hover .diet-chip__dot{background:#3d8aa6}
.diet-chip[data-tag="fdm"].is-on     .diet-chip__dot,
.diet-chip[data-tag="fdm"]:hover     .diet-chip__dot{background:#2c6f88}
.diet-chip[data-tag="viande"].is-on  .diet-chip__dot,
.diet-chip[data-tag="viande"]:hover  .diet-chip__dot{background:#a83a2e}
.diet-chip[data-tag="sarde"].is-on   .diet-chip__dot,
.diet-chip[data-tag="sarde"]:hover   .diet-chip__dot{background:var(--gold)}

.diet-chip--reset{
  background:transparent;
  border-style:dashed;
  color:var(--terracotta);
  letter-spacing:.08em;
}
.diet-chip--reset:hover{background:var(--terracotta); color:var(--cream); border-color:var(--terracotta)}

/* When filters hide a row inside a page */
.menu-row.is-filtered{display:none}
.menu-page__empty{
  text-align:center;
  padding:1.5rem 0;
  font-family:var(--f-serif); font-style:italic;
  color:var(--ink-soft);
  font-size:.95rem;
}
.menu-page__empty[hidden]{display:none}
.menu-page--feature .menu-page__empty{color:var(--cream-warm)}

/* When filter is active, gently highlight which rows match in the section dots */
.diet-panel .filter-btn.has-matches::after{
  content:""; display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold);
  margin-left:.4rem; vertical-align:middle;
}
.filter-btn{
  font-family:var(--f-sans); font-size:.75rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.5rem 1.1rem;
  border:1px solid rgba(11,58,77,.18);
  border-radius:999px;
  color:var(--ink-soft);
  background:transparent;
  transition:background .25s, color .25s, border-color .25s, transform .2s;
}
.filter-btn:hover{border-color:var(--azure-deep); color:var(--azure-deep)}
.filter-btn.is-active{background:var(--azure-deep); color:var(--cream); border-color:var(--azure-deep)}
.filter-btn.is-active:hover{background:var(--ink); border-color:var(--ink)}

/* ---- Menu book : single-page card with prev/next navigation ---- */
.menu-book{
  position:relative;
  max-width:680px;
  margin:0 auto;
}
.menu-page{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(11,58,77,.10);
  border-radius:4px;
  padding:2.2rem 2.4rem 2rem;
  box-shadow:
    0 24px 50px -36px rgba(11,58,77,.32),
    0 2px 0 0 rgba(201,163,82,.18) inset;
  display:none;
}
.menu-page.is-active{
  display:block;
  animation:menuPageIn .45s cubic-bezier(.2,.7,.2,1) both;
}
.menu-page.is-leaving{
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  pointer-events:none;
  animation:menuPageOut .22s ease-out forwards;
}
.menu-page::before, .menu-page::after{
  content:""; position:absolute; left:1.8rem; right:1.8rem; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,163,82,.55), transparent);
}
.menu-page::before{top:.9rem}
.menu-page::after{bottom:.9rem}
@keyframes menuPageIn{
  from{opacity:0; transform:translateY(10px) scale(.99)}
  to  {opacity:1; transform:translateY(0)    scale(1)}
}
@keyframes menuPageOut{
  from{opacity:1; transform:translateY(0)}
  to  {opacity:0; transform:translateY(-6px)}
}
@media (prefers-reduced-motion: reduce){
  .menu-page.is-active, .menu-page.is-leaving{animation:none}
}

.menu-page__head{
  text-align:center;
  margin-bottom:1.4rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid rgba(11,58,77,.10);
  position:relative;
}
.menu-page__roman{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.38em;
  color:var(--gold-deep);
  padding:.1rem .6rem;
  border:1px solid rgba(201,163,82,.45);
  border-radius:2px;
  margin-bottom:.55rem;
}
.menu-page__title{
  font-family:var(--f-display);
  font-size:2rem; line-height:1.05;
  color:var(--azure-deep);
  margin:0 0 .3rem;
  font-weight:400;
}
.menu-page__sub{
  font-family:var(--f-serif); font-style:italic;
  color:var(--ink-soft);
  font-size:.9rem;
  margin:0;
  line-height:1.45;
}
.menu-page__badge{
  position:absolute; top:1.1rem; right:1.1rem;
  background:var(--gold); color:var(--ink);
  padding:.28rem .65rem; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase;
  border-radius:999px;
  font-family:var(--f-sans);
}

.menu-page__list{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:.95rem;
}
.menu-page__split{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}
.menu-page__group{
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 .7rem;
  padding-bottom:.4rem;
  border-bottom:1px solid rgba(201,163,82,.25);
  font-weight:400;
}

.menu-row{
  display:block;
  break-inside:avoid;
}
.menu-row__top{
  display:flex; align-items:baseline; gap:.45rem;
  font-family:var(--f-display);
  font-size:.98rem;
  color:var(--ink);
}
.menu-row__name{
  flex:0 1 auto;
  font-weight:400;
  letter-spacing:.005em;
}
.menu-row__name em{font-style:italic; color:var(--ink-soft); font-size:.92em}

/* Dish has a photo: subtle dotted underline + clickable */
.menu-row[data-photo]{cursor:pointer}
.menu-row[data-photo] .menu-row__name{
  text-decoration:underline dotted rgba(201,163,82,.65);
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
  transition:color .25s, text-decoration-color .25s;
}
.menu-row[data-photo] .menu-row__name::after{
  content:"";
  display:inline-block;
  width:9px; height:9px;
  margin-left:.4rem;
  vertical-align:.05em;
  background:no-repeat center / contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a352' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6.5' width='18' height='13' rx='2'/><path d='M8.5 6.5 L10 4 L14 4 L15.5 6.5'/><circle cx='12' cy='13' r='3.5'/></svg>");
  opacity:.75;
  transition:opacity .25s, transform .25s;
}
.menu-row[data-photo]:hover .menu-row__name{
  color:var(--gold-deep);
  text-decoration-color:var(--gold);
}
.menu-row[data-photo]:hover .menu-row__name::after{
  opacity:1; transform:scale(1.1);
}
.menu-page--feature .menu-row[data-photo] .menu-row__name{
  text-decoration-color:rgba(201,163,82,.75);
}
.menu-page--feature .menu-row[data-photo]:hover .menu-row__name{color:var(--gold)}

/* Photo modal */
.photo-modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:2.5rem 1.2rem;
  background:rgba(11,12,14,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:9999;
  opacity:0;
  transition:opacity .3s ease-out;
}
.photo-modal[hidden]{display:none !important}
.photo-modal.is-open{opacity:1}
.photo-modal__inner{
  margin:0;
  max-width:min(92vw, 1100px);
  max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  transform:scale(.96);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.photo-modal.is-open .photo-modal__inner{transform:scale(1)}
.photo-modal__inner img{
  display:block;
  max-width:100%;
  max-height:78vh;
  border-radius:4px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  object-fit:contain;
}
.photo-modal__cap{
  color:var(--cream);
  font-family:var(--f-display);
  font-size:1.4rem;
  letter-spacing:.02em;
  text-align:center;
  margin:0;
}
.photo-modal__close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(245,239,228,.12);
  border:1px solid rgba(245,239,228,.22);
  color:var(--cream);
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.photo-modal__close svg{width:20px; height:20px}
.photo-modal__close:hover{background:rgba(245,239,228,.22); transform:rotate(90deg)}
@media (max-width:520px){
  .photo-modal{padding:1rem .6rem}
  .photo-modal__inner img{max-height:72vh}
  .photo-modal__cap{font-size:1.1rem}
  .photo-modal__close{top:.6rem; right:.6rem; width:40px; height:40px}
}
.menu-row__dots{
  flex:1 1 auto;
  border-bottom:1px dotted rgba(11,58,77,.32);
  transform:translateY(-.22em);
  min-width:1.2rem;
}
.menu-row__price{
  flex:0 0 auto;
  font-family:var(--f-serif);
  font-style:italic;
  color:var(--terracotta);
  font-size:.96rem;
  white-space:nowrap;
}
.menu-row__price small{
  font-size:.68rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  font-style:normal;
  margin-left:.1rem;
}
.menu-row__price em{color:var(--gold-deep); font-style:italic}
.menu-row__desc{
  margin:.22rem 0 0;
  font-family:var(--f-serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:.82rem;
  line-height:1.5;
  padding-left:.05rem;
  max-width:38rem;
}

.menu-page__foot{
  margin:1.3rem 0 0;
  padding-top:.95rem;
  border-top:1px solid rgba(11,58,77,.08);
  font-family:var(--f-serif); font-style:italic;
  color:var(--ink-soft);
  font-size:.82rem;
  text-align:center;
}

/* Wider screens: a bit more breathing room */
@media (min-width:721px){
  .menu-book{max-width:760px}
  .menu-page{padding:2.6rem 2.8rem 2.2rem}
  .menu-page__title{font-size:2.3rem}
  .menu-row__top{font-size:1.02rem}
  .menu-row__price{font-size:1rem}
  .menu-row__desc{font-size:.86rem}
  .menu-page__split{grid-template-columns:1fr 1fr; gap:2rem}
}

/* Feature page (Sardegna) — azure background */
.menu-page--feature{
  background:var(--azure-deep);
  color:var(--cream);
  border-color:transparent;
}
.menu-page--feature::before, .menu-page--feature::after{
  background:linear-gradient(90deg, transparent, rgba(201,163,82,.5), transparent);
}
.menu-page--feature .menu-page__head{border-bottom-color:rgba(245,239,228,.18)}
.menu-page--feature .menu-page__roman{color:var(--gold); border-color:rgba(201,163,82,.55)}
.menu-page--feature .menu-page__title{color:var(--cream)}
.menu-page--feature .menu-page__sub{color:var(--cream-warm)}
.menu-page--feature .menu-row__top{color:var(--cream)}
.menu-page--feature .menu-row__dots{border-bottom-color:rgba(245,239,228,.32)}
.menu-page--feature .menu-row__price{color:var(--gold)}
.menu-page--feature .menu-row__desc{color:rgba(245,239,228,.78)}
.menu-page--feature .menu-page__foot{border-top-color:rgba(245,239,228,.15); color:var(--cream-warm)}

/* Navigation : prev/next + dots + roman counter */
.menu-book__nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem;
  margin-top:1.6rem;
  padding:.4rem .4rem;
}
.menu-nav__arrow{
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(11,58,77,.18);
  background:var(--paper);
  color:var(--azure-deep);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.menu-nav__arrow svg{width:18px; height:18px}
.menu-nav__arrow:hover{
  background:var(--azure-deep); color:var(--cream); border-color:var(--azure-deep);
  transform:translateY(-2px);
}
.menu-nav__arrow:disabled{opacity:.35; cursor:default; transform:none}
.menu-nav__arrow:disabled:hover{background:var(--paper); color:var(--azure-deep); border-color:rgba(11,58,77,.18)}

.menu-nav__center{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
}
.menu-nav__counter{
  font-family:var(--f-serif); font-style:italic;
  color:var(--ink-soft);
  font-size:.95rem;
}
.menu-nav__counter strong{
  font-family:var(--f-display); font-style:normal; font-weight:400;
  color:var(--gold-deep);
  letter-spacing:.2em;
  margin-right:.15rem;
}
.menu-nav__counter em{color:var(--azure-deep); font-style:italic}
.menu-nav__dots{
  display:flex; gap:.45rem;
}
.menu-nav__dots button{
  width:7px; height:7px; border-radius:50%;
  border:0; padding:0;
  background:rgba(11,58,77,.22);
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.menu-nav__dots button:hover{background:var(--azure-deep)}
.menu-nav__dots button.is-active{background:var(--gold); transform:scale(1.4)}

.menu-book__hint{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:.8rem 0 0;
  font-family:var(--f-serif); font-style:italic;
  color:var(--ink-soft); opacity:.6;
  font-size:.78rem;
  text-align:center;
}
.menu-book__hint svg{width:32px; height:16px; flex-shrink:0; opacity:.7}
@media (hover:hover) and (pointer:fine){
  .menu-book__hint{display:none}
}

@media (max-width:520px){
  .menu-page{padding:1.5rem 1.1rem 1.4rem}
  .menu-page::before, .menu-page::after{left:.8rem; right:.8rem}
  .menu-page__title{font-size:1.7rem}
  .menu-page__sub{font-size:.85rem}
  .menu-row__top{font-size:.92rem; gap:.35rem; flex-wrap:wrap}
  .menu-row__name{flex:1 1 auto}
  .menu-row__dots{min-width:.6rem}
  .menu-row__price{font-size:.9rem}
  .menu-row__desc{font-size:.78rem; line-height:1.45}
  .menu-page__head{margin-bottom:1.1rem; padding-bottom:.9rem}
  .menu-nav__arrow{width:40px; height:40px}
  .menu-nav__arrow svg{width:15px; height:15px}
  .menu-nav__counter{font-size:.88rem}
  .menu-page__badge{top:.7rem; right:.7rem; padding:.22rem .55rem; font-size:.5rem}
  .menu-book__nav{gap:.7rem; margin-top:1.1rem}
}

.cucina__note{
  text-align:center; margin:3rem auto 0;
  font-family:var(--f-serif); font-style:italic; font-size:1.1rem;
  color:var(--ink-soft);
}
.cucina__note a{color:var(--terracotta); border-bottom:1px solid currentColor}

/* ---------------------------- V. AMBIENTE ---------------------------- */
.ambiente{
  max-width:none;
  background:var(--azure-deep);
  color:var(--cream);
  padding-left:var(--pad-x); padding-right:var(--pad-x);
  position:relative;
  overflow:hidden;
}
.ambiente::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at top right, rgba(201,163,82,.12), transparent 50%);
  pointer-events:none;
}
.ambiente__head{max-width:780px; margin:0 auto 3.5rem; text-align:center}
.ambiente__head .lede{margin:1rem auto 0}

/* Swiper gallery (Ambiente) */
.gallery-wrap{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
}
.gallery-main{
  width:100%;
  border-radius:3px;
  overflow:hidden;
  background:#0c2a37;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  cursor:grab;
}
.gallery-main:active{cursor:grabbing}
.gallery-main .swiper-slide{
  height:clamp(360px, 56vw, 640px);
  background:#0c2a37;
  display:flex; align-items:center; justify-content:center;
}
.gallery-main .swiper-slide img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  user-select:none;
  -webkit-user-drag:none;
}
.gallery-main .swiper-slide img[src*="salle-sardegna-225"]{
  object-fit:contain;
}

.gallery-counter{
  position:absolute; right:1rem; bottom:1rem; z-index:2;
  display:flex; align-items:center; gap:.55rem;
  background:rgba(11,58,77,.82);
  backdrop-filter:blur(8px);
  color:var(--cream);
  font-family:var(--f-display); font-size:1rem;
  padding:.45rem .85rem;
  border-radius:999px;
  letter-spacing:.04em;
  pointer-events:none;
}
.gallery-counter i{display:inline-block; width:18px; height:1px; background:var(--gold); transform:translateY(-1px)}
.gallery-counter .tot{color:var(--gold)}

.gallery-thumbs{
  margin-top:1rem;
  width:100%;
  padding:.1rem 0; /* room for active border */
}
.gallery-thumbs .swiper-wrapper{align-items:center}
.gallery-thumbs .swiper-slide{
  width:110px; height:74px;
  border-radius:2px;
  overflow:hidden;
  opacity:.42;
  cursor:pointer;
  transition:opacity .35s, transform .35s;
  position:relative;
}
.gallery-thumbs .swiper-slide::after{
  content:""; position:absolute; inset:0;
  border:1px solid transparent;
  border-radius:2px;
  transition:border-color .35s;
  pointer-events:none;
}
.gallery-thumbs .swiper-slide img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9);
  -webkit-user-drag:none;
}
.gallery-thumbs .swiper-slide:hover{opacity:.7}
.gallery-thumbs .swiper-slide-thumb-active{opacity:1}
.gallery-thumbs .swiper-slide-thumb-active::after{border-color:var(--gold)}

@media (max-width:760px){
  .gallery-thumbs .swiper-slide{width:80px; height:54px}
}

.pullquote{
  max-width:780px; margin:5rem auto 0; text-align:center; position:relative; padding:0 1rem;
}
.pullquote__mark{
  display:block; font-family:var(--f-display); font-size:6rem; line-height:.7;
  color:var(--gold); margin-bottom:.5rem;
}
.pullquote p{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.3rem, 2vw + .5rem, 1.8rem);
  line-height:1.45;
  margin:0;
}
.pullquote footer{
  margin-top:1.4rem;
  font-family:var(--f-sans); font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold);
}

/* ---------------------------- VI. ESPERIENZA ---------------------------- */
.esperienza__head{max-width:780px; margin:0 auto 3.5rem; text-align:center}
.esperienza__head .lede{margin:1rem auto 0}
.esperienza__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
}
.exp-card{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(11,58,77,.1);
  border-radius:3px;
  padding:1.8rem 1.7rem 1.9rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.exp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 40px -28px rgba(11,58,77,.4);
  border-color:rgba(201,163,82,.4);
}
.exp-card__icon{
  width:38px; height:38px;
  color:var(--terracotta);
  margin-bottom:.4rem;
}
.exp-card h3{
  font-family:var(--f-display);
  font-size:1.6rem; line-height:1.05;
  color:var(--azure-deep);
}
.exp-card p{margin:0; font-size:.95rem; color:var(--ink-soft); line-height:1.55}
.exp-card p strong{color:var(--terracotta); font-weight:500}
.exp-card__link{
  margin-top:auto;
  padding-top:.4rem;
  font-family:var(--f-sans); font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--terracotta);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
  align-self:flex-start;
}
.exp-card__link:hover{border-color:currentColor}
.exp-card--feature{
  background:var(--azure-deep);
  border-color:transparent;
}
.exp-card--feature .exp-card__icon{color:var(--gold)}
.exp-card--feature h3{color:var(--cream)}
.exp-card--feature p{color:#cfd9df}
.exp-card--feature p strong{color:var(--gold)}
.exp-card--feature .exp-card__link{color:var(--gold)}

@media (max-width:1024px){
  .esperienza__grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:580px){
  .esperienza__grid{grid-template-columns:1fr}
}

/* ---------------------------- VII. REVIEWS / LE VOCI ---------------------------- */
.reviews{
  max-width:none;
  padding-left:0; padding-right:0;
}
.reviews .chapter, .reviews__head, .reviews__source{
  max-width:var(--max);
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad-x); padding-right:var(--pad-x);
}
.reviews__head{margin-bottom:3rem; max-width:760px; text-align:center; padding-left:var(--pad-x); padding-right:var(--pad-x)}
.reviews__head .display{margin-bottom:1rem}
.reviews__head .lede{margin:0 auto}
.reviews__head em{font-family:var(--f-display); font-style:normal; color:var(--terracotta)}

.reviews-swiper{
  width:100%;
  padding:.3rem var(--pad-x) .8rem;
  cursor:grab;
}
.reviews-swiper:active{cursor:grabbing}
.reviews-swiper .swiper-wrapper{
  transition-timing-function:linear !important; /* continuous marquee feel */
}
.review-card{
  width:clamp(280px, 32vw, 400px);
  height:auto;
  background:var(--paper);
  border:1px solid rgba(11,58,77,.1);
  border-left:3px solid var(--gold);
  border-radius:3px;
  padding:1.8rem 1.7rem 1.5rem;
  display:flex; flex-direction:column;
  gap:1rem;
  position:relative;
  box-shadow:0 16px 30px -26px rgba(11,58,77,.4);
  transition:transform .35s, box-shadow .35s;
}
.review-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 36px -22px rgba(11,58,77,.4);
}
.review-card::before{
  content:"\201C"; /* opening double quote */
  position:absolute;
  top:-.2rem; right:1rem;
  font-family:var(--f-display);
  font-size:4.4rem; line-height:1;
  color:var(--gold);
  opacity:.32;
  pointer-events:none;
}
.review-card__stars{
  font-family:Georgia, serif;
  font-size:1.1rem;
  letter-spacing:.15em;
  color:var(--gold);
  line-height:1;
}
.review-card__quote{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:1.08rem;
  line-height:1.55;
  color:var(--ink);
  margin:0;
  flex:1;
}
.review-card__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--f-sans); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:.6rem;
  border-top:1px dotted rgba(11,58,77,.18);
}
.review-card__author{color:var(--azure-deep); font-weight:500}
.review-card__sep{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); opacity:.7;
}
.review-card__date{color:var(--ink-soft)}
.review-card__source{
  margin-left:auto;
  font-style:italic; text-transform:none; letter-spacing:.05em;
  color:var(--gold-deep);
  font-family:var(--f-serif); font-size:.85rem;
}
.reviews__source{
  text-align:center; margin:1.8rem auto 0;
  font-family:var(--f-serif); font-style:italic; font-size:.95rem;
  color:var(--ink-soft);
}
.reviews__source a{color:var(--terracotta); border-bottom:1px solid currentColor}

@media (max-width:580px){
  .review-card{width:78vw}
}

/* ---------------------------- VIII. TROVARCI ---------------------------- */
.trovarci__grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:1.5rem;
}
.trovarci__map{
  position:relative;
  border-radius:3px; overflow:hidden;
  background:var(--azure-deep);
  min-height:460px;
  box-shadow:0 20px 50px -30px rgba(11,58,77,.5);
}
.trovarci__map iframe{
  width:100%; height:100%;
  min-height:460px;
  filter:grayscale(.25) contrast(1.05);
}
.trovarci__map-tag{
  position:absolute; top:1rem; left:1rem;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--cream); color:var(--azure-deep);
  padding:.55rem .9rem; border-radius:999px;
  font-family:var(--f-sans); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 12px 24px -16px rgba(11,58,77,.5);
}
.trovarci__map-tag svg{color:var(--terracotta)}

.trovarci__cards{display:flex; flex-direction:column; gap:1.2rem}
.info-card{
  background:var(--paper);
  border:1px solid rgba(11,58,77,.1);
  padding:1.8rem 1.8rem;
  border-radius:3px;
  display:flex; flex-direction:column; gap:.8rem;
  position:relative;
  transition:transform .4s, box-shadow .4s;
}
.info-card:hover{transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(11,58,77,.4)}
.info-card__h{
  font-family:var(--f-sans); font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-deep);
}
.info-card__body{
  font-family:var(--f-serif); font-size:1.18rem; line-height:1.55; color:var(--azure-deep);
  margin:0;
}
.info-card__alt{
  display:inline-block;
  font-size:.78rem;
  font-style:italic;
  color:var(--gold-deep);
  letter-spacing:.05em;
  margin:.1rem 0;
}
.info-card__hint{
  margin:.3rem 0 0;
  font-size:.78rem;
  font-style:italic;
  color:var(--ink-soft);
  opacity:.8;
}
.phone{font-family:var(--f-display); font-size:1.55rem; color:var(--terracotta); letter-spacing:.02em}
.info-card a{border-bottom:1px solid transparent; transition:border-color .25s}
.info-card a:hover{border-color:currentColor}
.info-card__link{
  margin-top:auto;
  font-family:var(--f-sans); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--terracotta);
}
.hours{width:100%; border-collapse:collapse; font-family:var(--f-serif); font-size:1.05rem}
.hours th{
  text-align:left; font-weight:400; padding:.4rem 0;
  color:var(--ink); border-bottom:1px dotted rgba(11,58,77,.2);
}
.hours td{
  text-align:right; padding:.4rem 0;
  color:var(--azure-deep); border-bottom:1px dotted rgba(11,58,77,.2);
}
.hours__closed th, .hours__closed td{color:var(--terracotta); font-style:italic}

/* ---------------------------- VII. PRENOTARE ---------------------------- */
.prenotare{
  max-width:none;
  background:
    linear-gradient(180deg, var(--azure-deep) 0%, #0a2e3c 100%);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.prenotare::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 10% 10%, rgba(201,163,82,.12), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(168,58,46,.1), transparent 50%);
  pointer-events:none;
}
.prenotare__inner{max-width:880px; margin:0 auto; position:relative}
.prenotare__head{text-align:center; margin-bottom:2rem}
.prenotare__head .lede{margin:1rem auto 0}

/* Sur place / À emporter segment control */
.wa-tabs{
  display:flex;
  width:fit-content;
  margin:0 auto 1rem;
  background:rgba(245,239,228,.06);
  border:1px solid rgba(245,239,228,.15);
  border-radius:999px;
  padding:.3rem;
  gap:.2rem;
}
.wa-tab{
  font-family:var(--f-sans); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.55rem 1.3rem;
  border-radius:999px;
  color:var(--cream-warm);
  background:transparent;
  transition:background .3s, color .3s;
}
.wa-tab:hover{color:var(--cream)}
.wa-tab.is-active{background:var(--gold); color:var(--ink)}

.wa-bonus{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:0 auto 1.4rem;
  font-family:var(--f-serif); font-style:italic; font-size:1rem;
  color:var(--gold);
  text-align:center;
  animation:fadein .35s ease both;
}
.wa-bonus[hidden]{display:none}
.wa-bonus strong{color:var(--cream); font-style:normal; font-weight:500}
.wa-bonus svg{color:var(--gold)}

/* Show/hide form fields based on mode + label switching */
.wa-form[data-mode="dine"] [data-show="takeaway"],
.wa-form[data-mode="takeaway"] [data-show="dine"]{display:none}
.wa-form[data-mode="dine"] .lbl-take{display:none}
.wa-form[data-mode="takeaway"] .lbl-dine{display:none}

.wa-form{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.2rem;
  background:rgba(245,239,228,.04);
  border:1px solid rgba(245,239,228,.15);
  padding:2.4rem;
  border-radius:4px;
  backdrop-filter:blur(8px);
}
.field{display:flex; flex-direction:column; gap:.4rem}
.field--full{grid-column:1 / -1}
.field--half{grid-column:span 1}
.field label{
  font-family:var(--f-sans); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--cream-warm);
}
.field label span{opacity:.6; letter-spacing:.1em; text-transform:none; font-style:italic; font-size:.8em; margin-left:.3rem}
.field input, .field select, .field textarea{
  font-family:var(--f-serif); font-size:1.1rem;
  background:transparent;
  border:0; border-bottom:1px solid rgba(245,239,228,.3);
  color:var(--cream);
  padding:.55rem 0;
  transition:border-color .25s;
  width:100%;
}
.field textarea{font-family:var(--f-sans); font-size:.95rem; line-height:1.6; resize:vertical; min-height:80px; border:1px solid rgba(245,239,228,.2); border-radius:3px; padding:.7rem .9rem}
.field input::placeholder, .field textarea::placeholder{color:rgba(245,239,228,.4)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold);
}
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c9a352' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right .25rem center; background-size:12px;
  padding-right:1.5rem;
}
.field select option{background:var(--azure-deep); color:var(--cream)}
.field input[type="date"]{color-scheme:dark}

.wa-form__foot{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-top:.6rem;
}
.wa-form__legend{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-serif); font-style:italic; font-size:.95rem;
  color:var(--cream-warm); margin:0;
}
.wa-form__legend svg{color:var(--whatsapp)}

.wa-form__notice{
  grid-column:1 / -1;
  margin:1rem 0 0;
  font-family:var(--f-sans); font-size:.72rem; line-height:1.55;
  color:rgba(245,239,228,.55);
  letter-spacing:.02em;
}
.wa-form__notice a{
  color:var(--cream-warm);
  border-bottom:1px solid rgba(245,239,228,.35);
  transition:color .25s, border-color .25s;
}
.wa-form__notice a:hover{color:var(--gold); border-color:var(--gold)}

.wa-form.is-sent{position:relative}
.wa-form.is-sent::after{
  content:"Merci ! Votre demande s'ouvre sur WhatsApp…";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,46,60,.96);
  font-family:var(--f-serif); font-style:italic; font-size:1.4rem;
  color:var(--gold);
  border-radius:4px;
  animation:fadein .4s ease both;
}
@keyframes fadein{from{opacity:0} to{opacity:1}}

/* ---------------------------- FOOTER ---------------------------- */
.footer{
  background:var(--ink);
  color:var(--cream);
  padding:5rem var(--pad-x) 2rem;
}
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  max-width:var(--max); margin:0 auto;
  padding-bottom:3rem; border-bottom:1px solid rgba(245,239,228,.12);
}
.footer__mark{width:38px; height:38px; color:var(--gold); margin-bottom:.6rem}
.footer__name{font-family:var(--f-display); font-size:1.8rem; margin:0}
.footer__tag{font-family:var(--f-serif); font-style:italic; color:var(--cream-warm); margin:.2rem 0 0}
.footer__col h4{
  font-family:var(--f-sans); font-size:.7rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.8rem;
}
.footer__col p{margin:0; font-family:var(--f-serif); font-size:1.05rem; line-height:1.7}
.footer__col a{transition:color .25s}
.footer__col a:hover{color:var(--gold)}
.footer__social{display:flex; gap:.7rem; margin-top:.2rem}
.footer__social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(245,239,228,.22);
  color:var(--cream);
  transition:color .25s, border-color .25s, background .25s, transform .25s;
}
.footer__social-btn svg{width:20px; height:20px; display:block}
.footer__social-btn:hover{
  color:var(--ink); background:var(--gold); border-color:var(--gold);
  transform:translateY(-2px);
}
.footer__bottom{
  max-width:var(--max); margin:0 auto;
  padding-top:2rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
  font-size:.78rem; letter-spacing:.08em; color:rgba(245,239,228,.5);
}
.footer__signoff{font-family:var(--f-serif); font-style:italic; font-size:.95rem; color:var(--gold); letter-spacing:.05em}

/* ---------------------------- REVEAL (IO fallback) ---------------------------- */
.reveal, .reveal-up{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d, 0s);
}
.reveal.is-in, .reveal-up.is-in{opacity:1; transform:none}
.hero .reveal{transform:translateY(28px)}
.hero .reveal.is-in{transform:none}

/* When GSAP is active: reset elements to visible-by-default + kill CSS transitions.
   GSAP from() reads this visible state as the destination, then applies the hidden
   "from" state inline (higher specificity wins). Without this, GSAP would animate
   from hidden → hidden, i.e. nothing happens. */
.gsap-active .reveal,
.gsap-active .reveal-up{
  opacity:1; transform:none; transition:none;
}
.gsap-active .word{
  transform:none; transition:none;
}

/* Split-words generated by GSAP for .display headlines */
.sw-mask{display:inline-block; overflow:hidden; line-height:1.04; padding:.04em 0; vertical-align:top}
.sw-word{display:inline-block; will-change:transform}
.display .sw-mask:has(em){overflow:visible} /* allow nested em to remain styled */
.display em .sw-word, .display em{font-family:var(--f-serif); font-style:italic; color:var(--azure-deep)}
.display--light em .sw-word, .display--light em{color:var(--gold)}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width:1024px){
  .footer__top{grid-template-columns:1fr 1fr}
  .arte__grid{grid-template-columns:1fr; gap:3rem}
  .trovarci__grid{grid-template-columns:1fr}
  .trovarci__map{min-height:340px}
  .trovarci__map iframe{min-height:340px}
}
@media (max-width:760px){
  .nav__links{
    position:fixed; top:0; right:0;
    background:var(--azure-deep); color:var(--cream);
    flex-direction:column; gap:1.4rem;
    padding:6rem 2.5rem 2rem;
    width:min(82vw, 360px); height:100vh;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.6,.05,.2,1);
    align-items:flex-start;
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-size:1.4rem; font-family:var(--f-display); letter-spacing:.02em}
  .nav__cta{font-size:.9rem !important}
  .nav__burger{display:flex}
  .nav.is-scrolled .nav__links{color:var(--cream)}

  .hero__meta-bar{
    flex-direction:column; gap:.4rem; align-items:flex-start;
    top:5rem; font-size:.62rem;
  }

  .storia__grid{grid-template-columns:1fr; gap:3rem}
  .storia__seal{top:auto; bottom:-30px; right:1rem; width:90px; height:90px}
  .pillars{grid-template-columns:1fr}

  .cucina__controls{justify-content:stretch}
  .diet-btn{flex:1; justify-content:center; padding:.55rem .9rem; font-size:.68rem}
  .diet-panel{padding:.9rem 1rem; gap:.9rem}
  .filter-btn{padding:.42rem .85rem; font-size:.68rem}
  .diet-chip{padding:.4rem .8rem; font-size:.66rem; letter-spacing:.1em}

  .wa-form{grid-template-columns:1fr; padding:1.6rem}
  .field--half{grid-column:1 / -1}

  .footer__top{grid-template-columns:1fr; gap:2rem}
  .footer__bottom{flex-direction:column; align-items:flex-start}

  .hero__scroll{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  .marquee__track{animation:none}
  .arte__img-wrap, .arte__img-wrap img{animation:none}
}