/* ============================================================
   La Cantina — Design system « Affiche »
   Papier crème + encre espresso · or · rouge
   Titres : Cormorant Garamond · Textes : Jost
   ============================================================ */

@font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/CormorantGaramond.woff2") format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:400 600; font-display:swap; src:url("../fonts/CormorantGaramond-italic.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap; src:url("../fonts/Jost.woff2") format("woff2"); }

:root {
  --paper:#f2ead6; --paper-2:#ece0c9; --paper-3:#e4d6b9;
  --ink:#241c14; --ink-dim:rgba(36,28,20,0.86); --ink-faint:rgba(36,28,20,0.64);
  --gold:#82571a; --gold-lite:#e0b862;
  --red:#9c2a24;
  --cream:#f4efe6;            /* texte sur photo / fond sombre */
  --espresso:#17120e;         /* surfaces sombres d'accent */

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --maxw:1240px; --header-h:76px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; scrollbar-gutter:stable; background:var(--paper); scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* Transitions de page natives (fondu cinéma entre les pages) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration:.42s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
::view-transition-new(root) { animation-duration:.42s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
body { background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-weight:300; font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }

/* Grain de pellicule animé (film italien) */
body::after {
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:0.05; mix-blend-mode:multiply;
  animation:grain 0.5s steps(2) infinite;
}
@keyframes grain {
  0%{background-position:0 0} 25%{background-position:-12px 8px} 50%{background-position:10px -10px} 75%{background-position:-8px 12px} 100%{background-position:8px -8px}
}

/* Titres */
h1,h2,h3,h4,.display { font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:0.005em; color:var(--ink); text-wrap:balance; }
h1 { font-size:clamp(2.8rem,7vw,6rem); }
h2 { font-size:clamp(2.1rem,4.6vw,3.6rem); }
h3 { font-size:clamp(1.4rem,2.6vw,2.1rem); }
p { max-width:62ch; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
picture { display:contents; }

/* Typo utilitaire */
.eyebrow { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.32em; font-size:0.72rem; font-weight:400; color:var(--gold); }
.eyebrow[data-num]::before { content:attr(data-num) "  ·  "; color:var(--gold); opacity:0.9; }
/* Sur fond photo sombre, le numéro passe en or clair (sinon invisible) */
.hero-full .eyebrow[data-num]::before, .page-banner .eyebrow[data-num]::before,
.feature .eyebrow[data-num]::before, .cta-band .eyebrow[data-num]::before { color:var(--gold-lite); }
.label { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.28em; font-size:0.72rem; font-weight:400; }
.serif-italic { font-family:var(--font-display); font-style:italic; }
.lead { font-size:1.12rem; color:var(--ink-dim); }
.center { text-align:center; }
.muted { color:var(--ink-dim); }

/* Boutons */
.btn { display:inline-block; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.2em; font-size:0.72rem; font-weight:400; padding:0.95rem 1.9rem; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease; }
.btn:hover { background:var(--ink); color:var(--paper); }
.btn-solid { background:var(--red); border-color:var(--red); color:var(--cream); }
.btn-solid:hover { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.btn-row { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-row.center { justify-content:center; }

/* Header / nav (masthead) — transparent sur le hero, crème flouté au scroll */
.site-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.2rem,4vw,2.8rem); z-index:100; background:transparent; border-bottom:1px solid transparent; transition:height .35s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease; }
.site-header.scrolled, body.solid-nav .site-header { background:rgba(242,234,214,0.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:rgba(36,28,20,0.10); box-shadow:0 2px 16px rgba(36,28,20,0.06); }
/* Effet au scroll : le header (et le logo) diminuent légèrement */
.site-header.scrolled { height:calc(var(--header-h) - 12px); }
.logo { position:relative; display:block; height:26px; }
.logo img { height:26px; width:auto; display:block; transition:opacity .35s ease, height .35s ease; }
.site-header.scrolled .logo, .site-header.scrolled .logo img { height:22px; }
.logo .logo-noir { position:absolute; top:0; left:0; opacity:0; }
.site-header.scrolled .logo .logo-noir, body.solid-nav .logo .logo-noir, body.menu-open .logo .logo-noir { opacity:1; }
.site-header.scrolled .logo .logo-blanc, body.solid-nav .logo .logo-blanc, body.menu-open .logo .logo-blanc { opacity:0; }
.nav { position:fixed; top:0; right:0; height:var(--header-h); padding-right:clamp(1.2rem,4vw,2.8rem); display:flex; align-items:center; gap:clamp(1.2rem,2.5vw,2.3rem); z-index:101; }
.nav a:not(.cta) { position:relative; text-transform:uppercase; letter-spacing:0.2em; font-size:0.72rem; font-weight:400; color:var(--cream); text-shadow:0 1px 12px rgba(0,0,0,0.45); transition:color .25s ease; }
body.scrolled .nav a:not(.cta), body.solid-nav .nav a:not(.cta), body.menu-open .nav a:not(.cta) { color:var(--ink); text-shadow:none; }
/* Indicateur page active / survol : soulignement doré, lisible sur tout fond (le texte reste crème/encre) */
.nav a:not(.cta)::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--gold-lite); box-shadow:0 1px 6px rgba(0,0,0,0.4); transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.nav a:not(.cta):hover::after, .nav a.active::after { transform:scaleX(1); }
body.scrolled .nav a:not(.cta)::after, body.solid-nav .nav a:not(.cta)::after, body.menu-open .nav a:not(.cta)::after { background:var(--gold); box-shadow:none; }
.nav a:not(.cta):hover { color:var(--cream); }
body.scrolled .nav a:not(.cta):hover, body.solid-nav .nav a:not(.cta):hover, body.menu-open .nav a:not(.cta):hover { color:var(--gold); }
.nav .cta { background:var(--red); border:1px solid var(--red); padding:0.6rem 1.15rem; text-transform:uppercase; letter-spacing:0.2em; font-size:0.72rem; color:var(--cream); transition:background .25s ease,color .25s ease,border-color .25s ease; }
.nav .cta:hover { background:var(--ink); border-color:var(--ink); color:var(--cream); }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; z-index:110; }
.burger span { width:26px; height:1.5px; background:var(--cream); transition:transform .3s ease,opacity .3s ease,background .3s ease; }
body.scrolled .burger span, body.solid-nav .burger span, body.menu-open .burger span { background:var(--ink); }
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
body.menu-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* Bouton flottant « Réserver » — toujours accessible après le hero (mobile) */
.fab-reserve { position:fixed; z-index:95; bottom:1.1rem; right:1.1rem; background:var(--red); color:var(--cream); font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.18em; font-size:0.72rem; padding:0.9rem 1.5rem; border-radius:100px; box-shadow:0 8px 24px rgba(23,18,14,0.28); opacity:0; transform:translateY(18px) scale(0.96); pointer-events:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); display:none; }
.fab-reserve.show { opacity:1; transform:none; pointer-events:auto; }
@media (max-width:860px) { .fab-reserve { display:inline-flex; align-items:center; } }
body.menu-open .fab-reserve { opacity:0 !important; pointer-events:none; }

/* Layout */
.container { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,2.8rem); }
.section { padding:clamp(4.5rem,11vw,9rem) 0; }
.section-head { max-width:720px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.section-head .eyebrow { display:block; margin-bottom:1.1rem; }
.section-head p { margin:1.2rem auto 0; }

/* Grain cinéma sur les photos + Ken Burns */
.hero-full .bg img, .page-banner img, .split-media img, .gallery img, .cta-band .bg img, .feature img { filter:saturate(0.96) contrast(1.04) sepia(0.10); }
.hero-full .bg img { animation:kenburns 22s ease-out both; }
.feature img { transform:scale(1.16); }
@keyframes kenburns { from{transform:scale(1.001)} to{transform:scale(1.09)} }

/* Marquee (enseigne de cinéma) */
.marquee { overflow:hidden; background:var(--red); color:var(--cream); padding:0.85rem 0; border-top:1px solid rgba(0,0,0,0.12); border-bottom:1px solid rgba(0,0,0,0.12); }
.marquee-track { display:inline-flex; white-space:nowrap; will-change:transform; animation:marquee 90s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-style:italic; font-size:1.5rem; letter-spacing:0.02em; padding-right:0.4em; }
.marquee-track .star { color:var(--gold-lite); font-style:normal; padding:0 0.5em; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Hero plein écran (texte clair sur photo) */
.hero-full { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-full .bg { position:absolute; inset:0; z-index:0; }
.hero-full .bg img { width:100%; height:100%; object-fit:cover; }
.hero-full .bg::after { content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 54%, rgba(14,13,12,0.6) 0%, rgba(14,13,12,0) 78%),
    linear-gradient(180deg, rgba(14,13,12,0.5) 0%, rgba(14,13,12,0.32) 45%, rgba(14,13,12,0.8) 100%); }
.hero-full .inner { position:relative; z-index:2; padding:6rem 1.5rem 3rem; max-width:940px; color:var(--cream); }
.hero-full .eyebrow { display:block; margin-bottom:1.4rem; color:var(--gold-lite); text-shadow:0 1px 14px rgba(0,0,0,0.75); }
.hero-full h1 { margin:0 0 1.5rem; color:var(--cream); text-shadow:0 2px 40px rgba(0,0,0,0.6); }
.hero-full .sub { color:var(--cream); font-size:1.08rem; max-width:46ch; margin:0 auto 2.4rem; text-shadow:0 2px 22px rgba(0,0,0,0.85); }
.hero-full .btn { border-color:var(--cream); color:var(--cream); }
.hero-full .btn:hover { background:var(--cream); color:var(--ink); }
.hero-full .btn-solid { border-color:var(--red); }
.scroll-cue { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2; letter-spacing:0.3em; font-size:0.62rem; text-transform:uppercase; color:var(--cream); writing-mode:vertical-rl; }
.scroll-cue::after { content:""; display:block; width:1px; height:34px; background:rgba(244,239,230,0.6); margin:10px auto 0; transform-origin:top; animation:cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform:scaleY(0.5); opacity:0.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* Bandeau image (pages internes) */
.page-banner { position:relative; height:56vh; min-height:380px; display:flex; align-items:flex-end; overflow:hidden; }
.page-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,0.25), rgba(14,13,12,0.82)); }
.page-banner .inner { position:relative; z-index:2; padding:0 clamp(1.2rem,4vw,2.8rem) clamp(2rem,5vw,3.5rem); max-width:var(--maxw); margin:0 auto; width:100%; color:var(--cream); }
.page-banner .inner h1 { color:var(--cream); }
.page-banner .eyebrow { display:block; margin-bottom:0.8rem; color:var(--gold-lite); text-shadow:0 1px 10px rgba(0,0,0,0.7); }

/* Split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split.reverse .split-media { order:2; }
.split-media { overflow:hidden; }
.split-media img { width:100%; height:100%; max-height:760px; object-fit:cover; }
.split-body { max-width:520px; }
.split-body h2 { margin-bottom:1.3rem; }
.split-body .eyebrow { display:block; margin-bottom:1rem; }
.split-body p + p { margin-top:1rem; }
.split-body .btn { margin-top:2rem; }

/* Bande photo plein cadre */
.feature { position:relative; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden; }
.feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,0.12) 0%, rgba(14,13,12,0) 38%, rgba(14,13,12,0.82) 100%); }
.feature .cap { position:relative; z-index:2; padding:0 clamp(1.2rem,4vw,2.8rem) clamp(2.5rem,6vw,4rem); max-width:var(--maxw); margin:0 auto; width:100%; color:var(--cream); }
.feature .cap .eyebrow { display:block; margin-bottom:0.9rem; color:var(--gold-lite); text-shadow:0 1px 10px rgba(0,0,0,0.7); }
.feature .cap h2 { max-width:18ch; color:var(--cream); text-shadow:0 2px 30px rgba(0,0,0,0.5); }
.feature .cap p { margin-top:1.1rem; max-width:52ch; color:var(--cream); text-shadow:0 1px 16px rgba(0,0,0,0.7); }

/* Galerie */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery a { display:block; overflow:hidden; aspect-ratio:3/4; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.gallery a:hover img { transform:scale(1.06); }

/* Bandeau citation — surface sombre d'accent */
.quote-band { text-align:center; padding:clamp(4.5rem,10vw,8rem) clamp(1.2rem,4vw,2rem); background:var(--espresso); color:var(--cream); }
.quote-band blockquote { font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.22; max-width:24ch; margin:0 auto; color:var(--cream); }
.quote-band blockquote::before { content:"“"; color:var(--gold-lite); }
.quote-band blockquote::after { content:"”"; color:var(--gold-lite); }
.quote-band cite { display:block; margin-top:1.6rem; font-style:normal; color:var(--gold-lite); }

/* Carte / menu */
.menu-block { max-width:780px; margin:0 auto; }
.menu-cat + .menu-cat { margin-top:clamp(2.5rem,5vw,4rem); }
.menu-cat h3 { text-align:center; color:var(--ink); margin-bottom:0.4rem; }
.menu-cat .cat-note { text-align:center; color:var(--ink-faint); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:2rem; }
.menu-item { display:flex; align-items:baseline; gap:1rem; padding:0.85rem 0; border-bottom:1px solid rgba(36,28,20,0.14); }
.menu-item .mi-name { font-family:var(--font-display); font-size:1.3rem; color:var(--ink); }
.menu-item .mi-desc { color:var(--ink-dim); font-size:0.85rem; }
.menu-item .mi-dots { flex:1; border-bottom:1px dotted rgba(154,106,36,0.55); transform:translateY(-4px); }
.menu-item .mi-price { font-family:var(--font-display); font-size:1.2rem; color:var(--gold); white-space:nowrap; }
/* Micro-interaction : la ligne glisse et le pointillé s'anime au survol */
.menu-item { transition:padding-left .3s ease; }
@media (hover:hover) {
  .menu-item:hover { padding-left:0.5rem; }
  .menu-item:hover .mi-name { color:var(--gold); }
  .menu-item:hover .mi-dots { border-bottom-color:var(--gold); }
}
.menu-item .mi-name, .menu-item .mi-dots { transition:color .3s ease, border-color .3s ease; }
.menu-cat { scroll-margin-top:calc(var(--header-h) + 62px); }

/* Barre de catégories collante + scroll-spy */
.menu-nav { position:sticky; top:var(--header-h); z-index:90; display:flex; gap:0.4rem; justify-content:center; flex-wrap:wrap; margin:0 auto clamp(2.5rem,5vw,3.5rem); padding:0.7rem 0.4rem; background:rgba(242,234,214,0.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid rgba(36,28,20,0.10); }
.menu-nav a { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.18em; font-size:0.68rem; color:var(--ink-dim); padding:0.5rem 0.9rem; border-radius:100px; transition:background .25s ease, color .25s ease; white-space:nowrap; }
.menu-nav a:hover { color:var(--ink); }
.menu-nav a.active { background:var(--red); color:var(--cream); }
@media (max-width:560px) {
  .menu-nav { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .menu-nav::-webkit-scrollbar { display:none; }
}

/* Infos / contact */
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; text-align:center; }
.info-grid h3 { font-size:1.4rem; margin-bottom:0.6rem; }
.info-grid p { margin:0 auto; color:var(--ink-dim); font-size:0.92rem; }
.info-grid a { color:var(--gold); }
.info-grid-2 { grid-template-columns:repeat(2,1fr); max-width:720px; margin-left:auto; margin-right:auto; }

/* --- Réservation : formulaire + carte --- */
.reserve-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.6rem,4vw,3rem); align-items:stretch; margin-top:clamp(1rem,3vw,2rem); }
.reserve-form { display:flex; flex-direction:column; gap:1.05rem; }
.reserve-form.reserve-form-solo { max-width:640px; margin:0 auto; }
.reserve-form .field { display:flex; flex-direction:column; gap:0.4rem; text-align:left; min-width:0; }
.reserve-form .field-row { display:grid; grid-template-columns:1fr 1fr 0.85fr; gap:1rem; }
.reserve-form .field-row-2 { grid-template-columns:1fr 0.62fr; }
.reserve-form label { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.16em; font-size:0.66rem; font-weight:400; color:var(--gold); }
.reserve-form input, .reserve-form select, .reserve-form textarea { font-family:var(--font-sans); font-size:0.95rem; font-weight:300; color:var(--ink); background:rgba(255,255,255,0.34); border:1px solid rgba(36,28,20,0.22); border-radius:2px; padding:0.75rem 0.9rem; width:100%; min-width:0; transition:border-color .25s ease, background .25s ease; }
.reserve-form select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.4rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23241c14' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9rem center; }
.reserve-form input::placeholder, .reserve-form textarea::placeholder { color:var(--ink-faint); }
.reserve-form input:focus, .reserve-form select:focus, .reserve-form textarea:focus { outline:none; border-color:var(--gold); background-color:rgba(255,255,255,0.62); }
.reserve-form input:invalid:not(:placeholder-shown) { border-color:rgba(156,42,36,0.55); }
.reserve-form textarea { resize:vertical; min-height:84px; }
.reserve-form button { margin-top:0.3rem; align-self:flex-start; }
.reserve-hint { font-size:0.8rem; line-height:1.55; margin-top:0.1rem; }
.reserve-hint a { color:var(--gold); }
.reserve-map { min-height:360px; overflow:hidden; border:1px solid rgba(36,28,20,0.16); border-radius:2px; background:var(--paper-2); }
.reserve-map iframe { width:100%; height:100%; min-height:360px; border:0; display:block; filter:grayscale(0.12) sepia(0.06) contrast(1.02); }

/* --- Section Instagram --- */
.insta-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:clamp(2rem,4vw,3rem); }
.insta-grid a { position:relative; display:block; overflow:hidden; aspect-ratio:1/1; cursor:pointer; }
.insta-grid img { width:100%; height:100%; object-fit:cover; filter:saturate(0.96) contrast(1.04) sepia(0.10); transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.insta-grid a::after { content:""; position:absolute; inset:0; background:rgba(23,18,14,0); transition:background .35s ease; }
.insta-grid a:hover img { transform:scale(1.07); }
.insta-grid a:hover::after { background:rgba(23,18,14,0.30); }
.insta-glyph { position:absolute; inset:0; margin:auto; width:32px; height:32px; z-index:2; color:var(--cream); opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.insta-grid a:hover .insta-glyph, .insta-grid a:focus-visible .insta-glyph { opacity:1; transform:translateY(0); }

/* CTA bandeau (photo) */
.cta-band { position:relative; text-align:center; overflow:hidden; color:var(--cream); }
.cta-band .bg { position:absolute; inset:0; z-index:0; }
.cta-band .bg img { width:100%; height:100%; object-fit:cover; }
.cta-band .bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,0.48), rgba(14,13,12,0.72)); }
.cta-band .inner { position:relative; z-index:2; padding:clamp(4.5rem,10vw,7.5rem) 1.5rem; color:var(--cream); }
.cta-band .inner::before { content:""; position:absolute; inset:clamp(1rem,3vw,1.8rem); border:1px solid rgba(224,184,98,0.5); pointer-events:none; }
.cta-band .inner .eyebrow { color:var(--gold-lite); }
.cta-band h2 { color:var(--cream); margin-bottom:1.6rem; }
.cta-band .lead { color:var(--cream); }
.cta-band .btn { border-color:var(--cream); color:var(--cream); }
.cta-band .btn:hover { background:var(--cream); color:var(--ink); }

/* Footer — surface sombre d'accent */
.site-footer { background:var(--espresso); color:var(--cream); padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.footer-grid .f-logo img { height:34px; margin-bottom:1.1rem; }
.footer-grid h3 { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.24em; font-size:0.7rem; color:var(--gold-lite); margin-bottom:1.1rem; font-weight:400; }
.footer-grid p, .footer-grid a { color:rgba(244,239,230,0.85); font-size:0.9rem; }
.footer-grid a { display:inline-block; padding:6px 2px; }
.footer-grid a:hover { color:var(--cream); }
.footer-grid ul { list-style:none; }
.footer-grid li { margin-bottom:0.5rem; }
.footer-bottom { text-align:center; margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid rgba(244,239,230,0.12); color:rgba(244,239,230,0.66); font-size:0.72rem; letter-spacing:0.1em; }
.footer-bottom a { color:rgba(244,239,230,0.66); }
.footer-bottom a:hover { color:var(--cream); }

/* Reveal au scroll (uniquement si JS actif) */
html.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
html.js .reveal.in { opacity:1; transform:none; }

/* Titre hero lettre par lettre */
html.js .hero-full h1 .ch { display:inline-block; opacity:0; transform:translateY(0.5em) rotate(2deg); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .hero-full h1.in .ch { opacity:1; transform:none; }
.hero-full h1 .sp { display:inline-block; width:0.3em; }

/* Marquee : pause au survol (uniquement souris — jamais sur tactile) */
@media (hover:hover) {
  .marquee:hover .marquee-track { animation-play-state:paused; }
}

/* Barre de progression de lecture (fil doré sous le header) */
.scroll-progress { position:fixed; top:calc(var(--header-h) - 2px); left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--gold), var(--gold-lite)); z-index:101; pointer-events:none; }

/* Lien d'évitement (accessibilité clavier) */
.skip-link { position:fixed; top:-100px; left:1rem; z-index:200; background:var(--ink); color:var(--paper); padding:0.7rem 1.1rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.18em; font-size:0.72rem; transition:top .2s ease; }
.skip-link:focus { top:0.8rem; }

/* Lightbox galerie (dialog natif) */
.gallery a { cursor:zoom-in; }
.lightbox { border:0; padding:0; margin:0; max-width:100vw; max-height:100dvh; width:100vw; height:100dvh; background:transparent; overflow:hidden; }
.lightbox::backdrop { background:rgba(14,13,12,0.94); }
.lightbox[open] { display:flex; align-items:center; justify-content:center; }
.lightbox .lb-fig { position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; padding:5vh 4vw; max-width:100%; max-height:100%; }
.lightbox img { max-width:min(1100px,90vw); max-height:78dvh; width:auto; height:auto; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,0.55); background:var(--espresso); }
.lightbox figcaption { color:var(--cream); font-family:var(--font-sans); letter-spacing:0.1em; font-size:0.78rem; text-transform:uppercase; opacity:0.85; text-align:center; }
.lb-ctrl { position:fixed; z-index:2; background:rgba(244,239,230,0.10); color:var(--cream); border:1px solid rgba(244,239,230,0.28); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.4rem; line-height:1; transition:background .2s ease, transform .2s ease; -webkit-tap-highlight-color:transparent; }
.lb-ctrl:hover { background:rgba(244,239,230,0.22); }
.lb-close { top:1.1rem; right:1.1rem; }
.lb-prev { left:1.1rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1.1rem; top:50%; transform:translateY(-50%); }
.lb-prev:hover { transform:translateY(-50%) scale(1.06); }
.lb-next:hover { transform:translateY(-50%) scale(1.06); }
@media (max-width:560px) { .lb-prev { left:0.5rem; } .lb-next { right:0.5rem; } .lb-ctrl { width:44px; height:44px; } }

/* Pages de texte (mentions légales) */
.legal { padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)); }
.legal-body { max-width:none; }
.legal-body h2 { font-size:clamp(1.3rem,2.4vw,1.7rem); margin:2.4rem 0 0.8rem; color:var(--ink); }
.legal-body p { max-width:none; color:var(--ink-dim); margin-bottom:0.5rem; }
.legal-body a:not(.btn) { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* Page 404 */
.error-page { min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:calc(var(--header-h) + 3rem) 1.5rem 4rem; }
.error-page .eyebrow { display:block; margin-bottom:0.8rem; }
.error-code { font-size:clamp(3.4rem,11vw,7rem); font-style:italic; color:var(--gold); line-height:1; margin-bottom:0.4rem; }

/* Focus clavier visible */
:where(a, button, .btn, .burger, .nav a):focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
.hero-full :focus-visible, .feature :focus-visible, .cta-band :focus-visible, .page-banner :focus-visible { outline-color:var(--gold-lite); }

/* Responsive */
@media (max-width:860px) {
  :root { --header-h:66px; }   /* bande un peu plus fine sur mobile */
  .burger { display:flex; }
  /* Header mobile : beige OPAQUE qui recouvre TOUTE la safe area iOS
     (barre d'état / Dynamic Island). Le fond remonte jusqu'au haut réel de
     l'écran ; le contenu (logo/burger) est décalé sous l'encoche. */
  .site-header, .site-header.scrolled, body.solid-nav .site-header {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid rgba(36,28,20,0.10);
    z-index: 9999;
    isolation: isolate;
  }
  /* Extension beige opaque rattachée au header : remonte 250px au-dessus de
     lui pour recouvrir toute la zone derrière la barre d'état / d'adresse Safari.
     Rien ne défile plus au-dessus du header. */
  .site-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 250px;
    background: var(--paper);
    pointer-events: none;
  }
  /* Header opaque beige => logo & burger toujours sombres */
  .logo .logo-blanc { opacity:0; }
  .logo .logo-noir { opacity:1; }
  .burger span { background:var(--ink); }
  /* Header mobile TOTALEMENT stable au scroll : ni rétrécissement de la barre,
     ni zoom du logo. Le fond est déjà beige opaque en permanence, donc aucun
     effet de taille n'est nécessaire — on privilégie une fluidité parfaite
     (zéro reflow / zéro re-rastérisation du logo). Effet réservé au desktop. */
  .site-header.scrolled { height:calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .site-header.scrolled .logo, .site-header.scrolled .logo img { height:26px; }
  .scroll-progress { top:calc(var(--header-h) + env(safe-area-inset-top, 0px) - 2px); }
  .menu-nav { top:calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .menu-cat { scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top, 0px) + 62px); }
  .nav { position:fixed; inset:0; width:100vw; height:100dvh; right:auto; padding:0; z-index:105; flex-direction:column; justify-content:center; gap:2rem; background:var(--paper); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s; }
  body.menu-open .nav { opacity:1; visibility:visible; pointer-events:auto; }
  /* Le header (avec le burger) reste au-dessus de l'overlay et cliquable */
  .site-header { z-index:106; }
  body.menu-open .site-header { background:transparent; border-color:transparent; box-shadow:none; }
  .nav a:not(.cta) { font-size:1rem; letter-spacing:0.24em; padding:0.7rem 1rem; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .nav .cta { padding:0.85rem 1.8rem; font-size:0.8rem; }
  .section { padding:5.75rem 0; }
  .section-head { margin-bottom:2.9rem; }
  .split { grid-template-columns:1fr; gap:2.5rem; }
  .split.reverse .split-media { order:0; }
  .split-media img { max-height:460px; }
  .split-body { max-width:none; text-align:center; }
  .split-body p { margin-left:auto; margin-right:auto; }
  /* Section « La signature » (photo pleine largeur) : numéro/texte centrés comme les autres */
  .feature .cap { text-align:center; }
  .feature .cap h2, .feature .cap p { margin-left:auto; margin-right:auto; }
  .info-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-grid { grid-template-columns:1fr; gap:2.2rem; text-align:center; }
  .footer-grid .f-logo img { margin:0 auto 1.1rem; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .marquee-track span { font-size:1.2rem; }
  .reserve-grid { grid-template-columns:1fr; }
  .reserve-form { text-align:left; }
  .reserve-form .field-row { grid-template-columns:1fr 1fr; }
  .reserve-form .field-row-2 { grid-template-columns:1fr; }
  .reserve-form .field-couverts { grid-column:1 / -1; }
  .reserve-form button { align-self:stretch; text-align:center; }
  .reserve-map { min-height:280px; order:-1; }
  .reserve-map iframe { min-height:280px; }
  .insta-grid { grid-template-columns:repeat(3,1fr); gap:7px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
  html.js .hero-full h1 .ch { opacity:1; transform:none; }
  .scroll-cue::after, body::after, .marquee-track { animation:none; }
  .hero-full .bg img { animation:none; }
  html { scroll-behavior:auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* Impression propre de la carte */
@media print {
  .site-header, .site-footer, .marquee, .fab-reserve, .menu-nav, .scroll-progress,
  .page-banner, .cta-band, .scroll-cue, .skip-link, .btn-row, .no-print { display:none !important; }
  body { background:#fff; color:#000; }
  body::after { display:none; }
  .section { padding:1.2rem 0; }
  .menu-item { break-inside:avoid; border-color:#ccc; }
  .menu-item .mi-name, .menu-cat h3, .menu-item .mi-price { color:#000; }
  a { color:#000; text-decoration:none; }
  @page { margin:1.6cm; }
}