/* ==========================================================================
   L’ARDOISE — Parchemin & safran
   Palette / typographie : "spiced parchment gallery"
   ========================================================================== */

/* ---------- Polices ----------
   Titres : Cormorant Garamond Light, hébergée sur le site (dossier fonts/, licence libre SIL OFL : voir fonts/OFL.txt).
   Texte : Satoshi, chargée depuis Fontshare (voir le <head> des pages). Sa licence autorise l'hébergement sur son
   propre site mais interdit de placer ses fichiers dans un dépôt public comme GitHub : ne pas la copier dans ce dossier. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: only light; /* site à thème unique : le « mode sombre automatique » des navigateurs ne doit pas teinter le beige en marron */
  --color-parchment: #d8cbb8;
  --color-linen: #bfb4a3;
  --color-warm-stone: #b6ab9c;
  --color-walnut: #978e81;
  --color-muted: #7b7368;
  --color-espresso: #615b53;
  --color-onyx-warm: #2c2c2c;
  --color-midnight-roast: #292622;
  --color-saffron-glow: #d49653;

  --line-dark: rgba(216, 203, 184, .2);

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --gap-section: clamp(5.5rem, 12vw, 10rem);
  /* marge latérale des éléments pleine largeur : les aligne sur la colonne centrale (.wrap) sur les très grands écrans */
  --gutter: max(var(--pad), calc((100% - 90rem) / 2 + var(--pad)));
  --navoff: 4.5rem; /* hauteur de la barre de navigation (passe à 0 quand elle se cache) */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Toutes les tailles sont en rem : au-delà de 1440 px de large, le site grandit doucement (×1,11 à 1920 px, ×1,26 à 2560 px,
   plafonné à ×1,6) pour rester proportionné sur les grands écrans. En dessous de 1440 px, rien ne change. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: clamp(100%, calc(100% + (100vw - 1440px) * .00375), 160%); } /*no-rem*/
body {
  background: var(--color-parchment);
  color: var(--color-onyx-warm);
  font: 500 0.9375rem/1.4 var(--font-sans);
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
::selection { background: var(--color-saffron-glow); color: var(--color-onyx-warm); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
ul { list-style: none; }
address { font-style: normal; }
svg { display: block; }
i { font-style: normal; }
em { font-style: normal; }
:focus-visible { outline: 1px solid var(--color-saffron-glow); outline-offset: 0.25rem; }
section[id] { scroll-margin-top: 3.75rem; }

.wrap { max-width: 90rem; margin: 0 auto; padding: 0 var(--pad); }
.on-dark { background: var(--color-midnight-roast); color: var(--color-parchment); }
.on-light { color: var(--color-onyx-warm); }

.label {
  font: 500 0.75rem/1.3 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: -.012em;
  color: var(--color-espresso);
}
.on-dark .label { color: var(--color-walnut); }
.body { color: var(--color-espresso); max-width: 46ch; }
.on-dark .body { color: var(--color-linen); }

.h2 {
  font: 300 clamp(3.25rem, 10.5vw, 9.375rem)/.86 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: -.04em;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.sec-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 3.5rem); }
.rule { display: block; height: 1px; width: 100%; background: var(--color-warm-stone); }
.on-dark .rule { background: var(--line-dark); }

.ico { width: 1rem; height: 1rem; flex: none; transition: transform .5s var(--ease-out); }

/* ---------- Roll (texte qui défile au survol) ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; }
.roll > span { display: inline-block; transition: transform .55s var(--ease-out); }
.roll::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 0;
  transform: translateY(110%);
  transition: transform .55s var(--ease-out);
}
a:hover .roll > span, button:hover .roll > span { transform: translateY(-110%); }
a:hover .roll::after, button:hover .roll::after { transform: none; }

/* ---------- Boutons fantômes ---------- */
.btn {
  --fill: var(--color-parchment);
  --ink: var(--color-midnight-roast);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.875rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-transform: uppercase;
  font: 500 0.875rem/1.3 var(--font-sans);
  letter-spacing: -.01em;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), transform .6s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: -1px;
  background: var(--fill);
  transform: translateY(102%);
  transition: transform .55s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: none; }
.btn:hover .ico { transform: translateX(0.3125rem); }
.btn-sm { padding: 0.75rem 1.125rem; font-size: 0.8125rem; }
.on-light .btn { --fill: var(--color-onyx-warm); --ink: var(--color-parchment); }

.link {
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-transform: uppercase; font-size: 0.875rem;
  padding: 0.75rem 0 0.5rem; border-bottom: 1px solid currentColor; /* zone de toucher confortable (≈ 44 px) */
}
.link:hover .ico { transform: translateX(0.375rem); }

/* ---------- Curseur ---------- */
.cursor-ring, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor select { cursor: none; }
  html.has-cursor input, html.has-cursor textarea { cursor: text; }
  .cursor-ring, .cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 200;
    pointer-events: none; mix-blend-mode: difference;
    opacity: 0; transition: opacity .3s;
  }
  html.has-cursor .cursor-ring, html.has-cursor .cursor-dot { opacity: 1; }
  .cursor-ring {
    width: 2.375rem; height: 2.375rem; margin: -1.1875rem 0 0 -1.1875rem;
    border: 1px solid #d8cbb8; border-radius: 50%;
    transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .3s, opacity .3s;
  }
  .cursor-dot { width: 0.375rem; height: 0.375rem; margin: -3px 0 0 -3px; border-radius: 50%; background: #d8cbb8; }
  body.cur-hover .cursor-ring { width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; background: #d8cbb8; }
}

/* ---------- Progression ---------- */
.progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 120;
  background: var(--color-saffron-glow);
  transform-origin: left; transform: scaleX(var(--p, 0));
}

/* ---------- Préchargeur ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--color-midnight-roast); color: var(--color-parchment);
  display: grid; place-items: center;
  transition: transform 1.1s var(--ease-out) .1s;
}
.preloader.out { transform: translateY(-101%); }
.pl-inner { display: grid; justify-items: center; gap: 0.625rem; width: min(20rem, 70vw); text-align: center; transition: opacity .4s, transform .8s var(--ease-out); }
.preloader.out .pl-inner { opacity: 0; transform: translateY(-1.875rem); }
.pl-mark { width: 2.75rem; height: 2.75rem; animation: spin-slow 8s linear infinite; }
.pl-name { font: 300 2.75rem/1 var(--font-serif); text-transform: uppercase; letter-spacing: -.04em; margin-top: 0.75rem; }
.pl-sub { font-size: 0.75rem; text-transform: uppercase; color: var(--color-walnut); }
.pl-line { width: 100%; height: 1px; background: var(--line-dark); margin: 1.125rem 0 0.375rem; overflow: hidden; }
.pl-bar { display: block; height: 100%; background: var(--color-parchment); transform-origin: left; transform: scaleX(0); }
.pl-num { font-size: 0.75rem; color: var(--color-walnut); font-variant-numeric: tabular-nums; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.no-js .preloader { display: none; }
.no-js body.is-loading { overflow: auto; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  color: var(--color-parchment);
  transition: transform .6s var(--ease-out), background .4s var(--ease), padding .4s var(--ease);
}
.nav.solid { background: var(--color-onyx-warm); padding-block: 0.875rem; }
.nav.hide { transform: translateY(-101%); }
.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; text-transform: uppercase; font-size: 0.875rem; }
.brand-mark { width: 1.875rem; height: 1.875rem; transition: transform .8s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(180deg); }
.nav-links { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); }
.nav-links a { padding: 0.75rem 0; text-transform: uppercase; font-size: 0.875rem; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.lang { display: flex; align-items: center; gap: 0.375rem; font: 500 0.8125rem var(--font-sans); }
.lang-sep { opacity: .4; }
.lang a { opacity: .6; transition: opacity .3s var(--ease); }
.lang a:hover, .lang a:focus-visible { opacity: 1; }
.lang-cur { opacity: 1; }
.burger { display: none; width: 2.75rem; height: 2.75rem; position: relative; border: 1px solid currentColor; border-radius: 3px; }
.burger i { position: absolute; left: 0.75rem; right: 0.75rem; height: 1px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.burger i:nth-child(1) { top: 1.125rem; }
.burger i:nth-child(2) { top: 1.5625rem; }
.burger[aria-expanded="true"] i:nth-child(1) { top: 1.3125rem; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { top: 1.3125rem; transform: rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--color-onyx-warm); color: var(--color-parchment);
  display: flex; flex-direction: column; gap: clamp(1rem, 4vh, 2.5rem);
  padding: clamp(4.75rem, 14vh, 6.25rem) var(--gutter) 2rem;
  overflow-y: auto; overscroll-behavior: contain; /* si l'écran est très court (téléphone en paysage), le menu défile */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-out), visibility 0s .8s;
}
.menu-overlay.open { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease-out), visibility 0s; }
.menu-overlay nav { display: flex; flex-direction: column; margin-top: auto; } /* marges auto : centré s'il y a de la place, sinon on défile depuis le haut */
.menu-overlay nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font: 300 clamp(1.875rem, min(13vw, 9.5vh), 5.25rem)/1.05 var(--font-serif); text-transform: uppercase; letter-spacing: -.04em;
  border-bottom: 1px solid var(--line-dark); padding: clamp(0.25rem, 1.1vh, 0.625rem) 0;
  opacity: 0; transform: translateY(1.875rem);
  transition: opacity .5s, transform .7s var(--ease-out), padding .4s var(--ease-out);
}
.menu-overlay nav a span { font: 500 0.75rem var(--font-sans); color: var(--color-walnut); letter-spacing: 0; min-width: 1.375rem; }
.menu-overlay nav a:hover { padding-left: 0.875rem; }
.menu-overlay.open nav a { opacity: 1; transform: none; }
.menu-overlay.open nav a:nth-child(1) { transition-delay: .25s; }
.menu-overlay.open nav a:nth-child(2) { transition-delay: .32s; }
.menu-overlay.open nav a:nth-child(3) { transition-delay: .39s; }
.menu-overlay.open nav a:nth-child(4) { transition-delay: .46s; }
.menu-overlay.open nav a:nth-child(5) { transition-delay: .53s; }
.menu-foot { font-size: 0.8125rem; line-height: 1.6; color: var(--color-walnut); margin-bottom: auto; }
.menu-foot a { color: var(--color-parchment); font-size: 1.25rem; border-bottom: 1px solid var(--line-dark); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--color-midnight-roast); color: var(--color-parchment);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  --hero-photo: url("images/hero.jpg"); /* photo d'ambiance de la salle (assombrie par .hero-photo et .hero-shade) */
}
.hero-photo {
  position: absolute; inset: -4%;
  background-image: var(--hero-photo, none);
  background-size: cover; background-position: center;
  opacity: .5;
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
/* téléphone en portrait : le cadre se centre sur l'arche et le bar, sans le nom gravé sur la vitre (vu à l'envers depuis la salle) */
@media (max-width: 700px) { .hero-photo { background-position: 78% center; } }
#sea { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(32.5rem circle at var(--mx, 70%) var(--my, 32%), rgba(212, 150, 83, .13), transparent 65%);
}
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(41, 38, 34, .6), rgba(41, 38, 34, 0) 32%, rgba(41, 38, 34, .35) 62%, rgba(41, 38, 34, .85));
}
.hero-inner { position: relative; z-index: 2; padding-top: 8.75rem; will-change: transform, opacity; }
.hero-meta {
  display: flex; justify-content: space-between; gap: 1.25rem;
  padding: 0 var(--gutter) clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.75rem; text-transform: uppercase; color: var(--color-linen);
}
.wordmark {
  font: 500 clamp(2.5rem, 13.7vw, 12.4375rem)/.8 var(--font-sans);
  letter-spacing: -.016em; text-transform: uppercase;
  white-space: nowrap; padding: 0 var(--gutter);
  color: var(--color-parchment);
}
.wm-line { display: block; overflow: hidden; padding: .06em 0 .04em; }
.ch { display: inline-block; transition: color .9s var(--ease), transform .5s var(--ease-out); }
.ch:hover { color: var(--color-saffron-glow); transform: translateY(-.05em); transition: color .1s, transform .3s var(--ease-out); }
.ch.sp { width: .26em; }
/* "backwards" : la lettre reste cachée avant l'animation, puis reprend son style normal (le survol reste actif) */
.wm-line .ch, .foot-mark .ch { animation: ch-in 1.2s var(--ease-out) backwards paused; animation-delay: calc(var(--i) * 65ms + 250ms); }
body.ready .wm-line .ch, .foot-mark.in .ch { animation-play-state: running; }
@keyframes ch-in { from { transform: translateY(112%) rotate(5deg); } to { transform: none; } }

.hero-foot { padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 2rem; }
.hero-foot .rule { background: var(--line-dark); margin-bottom: 1.625rem; }
.hero-foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.hero-hours { text-align: right; font-size: 0.75rem; text-transform: uppercase; color: var(--color-linen); line-height: 1.5; }

/* statut ouvert / fermé */
.status { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; text-transform: uppercase; }
.status .dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-walnut); flex: none; }
.status.is-open .dot { background: var(--color-saffron-glow); }
.status.is-open .dot::after {
  content: ""; position: absolute; inset: -0.375rem; border-radius: 50%;
  border: 1px solid var(--color-saffron-glow);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.status-lg { font-size: 0.875rem; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  overflow: hidden; padding: clamp(1.5rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--color-warm-stone);
}
.mq-row { display: flex; width: max-content; will-change: transform; }
.mq-set { display: flex; align-items: center; flex: none; }
.mq-set span {
  font: 300 clamp(3rem, 8.4vw, 7.75rem)/1 var(--font-serif);
  text-transform: uppercase; letter-spacing: -.04em; white-space: nowrap;
  padding: 0 .16em;
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.mq-set i {
  width: .5em; height: .5em; flex: none; margin: 0 .3em;
  font-size: clamp(3rem, 8.4vw, 7.75rem);
  border: 1px solid var(--color-onyx-warm); border-radius: 50%;
  position: relative; transition: transform .6s var(--ease-out), background .4s;
}
.mq-set i::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--color-onyx-warm); }
.mq-row:hover .mq-set i { transform: rotate(180deg); }
.mq-row.outline .mq-set span { color: transparent; -webkit-text-stroke: 1px var(--color-onyx-warm); }
.mq-row.outline .mq-set span:hover { color: var(--color-onyx-warm); }
.mq-row:not(.outline) .mq-set span:hover { color: transparent; -webkit-text-stroke: 1px var(--color-onyx-warm); }

/* ==========================================================================
   LE LIEU
   ========================================================================== */
.intro { padding: var(--gap-section) 0; }
.intro-grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(2rem, 6vw, 6.25rem); align-items: start; }
.lead {
  font: 300 clamp(2rem, min(5.3vw, 8vh), 4.75rem)/.98 var(--font-serif); /* vh : le texte ne dépasse jamais la hauteur d'un écran court */
  text-transform: uppercase; letter-spacing: -.035em;
}
.fw { color: rgba(44, 44, 44, .16); transition: color .5s var(--ease); }
.fw.on { color: var(--color-onyx-warm); }
.intro-side { display: grid; gap: 1.75rem; justify-items: start; padding-top: 0.75rem; }
.badge { width: clamp(8.125rem, 13vw, 11.875rem); color: var(--color-onyx-warm); will-change: transform; }
.badge text { fill: currentColor; font: 500 11.4px var(--font-sans); letter-spacing: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--gap-section); border-top: 1px solid var(--color-warm-stone); }
.card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.75rem 1.75rem 2.25rem; min-height: 21.25rem;
  display: flex; flex-direction: column;
  container-type: inline-size; /* permet à .card-time de se caler sur la largeur réelle de la carte */
  border-right: 1px solid var(--color-warm-stone); border-bottom: 1px solid var(--color-warm-stone);
  transition: color .5s var(--ease), opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.card:first-child { border-left: 1px solid var(--color-warm-stone); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-onyx-warm);
  transform: translateY(101%);
  transition: transform .7s var(--ease-out);
}
.card:hover { color: var(--color-parchment); }
.card:hover::before { transform: none; }
.card-num { font-size: 0.75rem; color: var(--color-espresso); transition: color .5s; }
.card:hover .card-num { color: var(--color-saffron-glow); }
.card-title { font: 300 clamp(1.75rem, 2.6vw, 2.375rem)/1 var(--font-serif); text-transform: uppercase; letter-spacing: -.03em; margin-top: 1.125rem; }
.card-time {
  margin-top: auto; font: 300 clamp(2.5rem, 4.2vw, 3.875rem)/.9 var(--font-serif); text-transform: uppercase; letter-spacing: -.04em;
  font-size: clamp(1.5rem, 14.6cqi, 3.875rem); /* "Ouistreham" reste toujours dans sa carte, à toutes les largeurs d'écran */
  transition: transform .7s var(--ease-out);
}
.card-time em { display: inline-block; transition: transform .7s var(--ease-out); }
.card:hover .card-time { transform: translateX(0.5rem); }
.card:hover .card-time em { transform: translateX(0.625rem); }
.card-text { margin-top: 1.25rem; color: var(--color-espresso); transition: color .5s; }
.card:hover .card-text { color: var(--color-linen); }

/* « À savoir » : second bloc de cartes (accessibilité, vélos), même langage visuel que .cards */
.cards-label { margin-top: clamp(2.5rem, 6vw, 5rem); margin-bottom: 1rem; }
.cards-duo { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.card-ico {
  position: absolute; top: 1.25rem; right: 1.75rem; width: 2.625rem; height: 2.625rem;
  fill: none; stroke: currentColor; stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round;
  color: var(--color-espresso); transition: color .5s;
}
.card-ico * { vector-effect: non-scaling-stroke; } /* trait de 1 px à toutes les tailles, comme les filets du site */
.card:hover .card-ico { color: var(--color-saffron-glow); }
@media (max-width: 380px) { .card-ico { width: 2rem; height: 2rem; } } /* très petits téléphones : l'icône ne touche jamais le titre */

/* ==========================================================================
   LA CARTE
   ========================================================================== */
.carte { padding: 0 0 var(--gap-section); }
.carte-grid { display: grid; grid-template-columns: minmax(16.25rem, 4fr) 8fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.tabs { position: sticky; top: calc(var(--navoff) + 1.75rem); transition: top .6s var(--ease-out); display: flex; flex-direction: column; border-bottom: 1px solid var(--color-warm-stone); max-height: calc(100vh - var(--navoff) - 3.5rem); overflow-y: auto; scrollbar-width: none; } /* max-height : sur un écran peu haut, le sous-menu ouvert défile au lieu de couper les derniers onglets */
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: flex; align-items: baseline; gap: 1rem;
  padding: 1.25rem 0 1.25rem 0; text-align: left;
  border-top: 1px solid var(--color-warm-stone);
  color: var(--color-muted);
  transition: color .4s var(--ease), padding .6s var(--ease-out);
}
.tab::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--color-saffron-glow);
  transition: width .6s var(--ease-out);
}
.tab .t-num { font-size: 0.75rem; min-width: 1.375rem; }
.tab .t-name { font: 300 clamp(2.375rem, 4.4vw, 3.875rem)/.9 var(--font-serif); text-transform: uppercase; letter-spacing: -.04em; flex: 1; }
.tab .t-count { font-size: 0.75rem; }
.tab:hover { color: var(--color-espresso); padding-left: 0.875rem; }
.tab[aria-current="true"] { color: var(--color-onyx-warm); padding-left: 2.125rem; }
.tab[aria-current="true"]::before { width: 1.25rem; }

/* sous-menu déroulant sous l'onglet ouvert (ex. Plats : Brasserie, Burgers, Snacking, Côté mer) */
.subtabs { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease-out), visibility 0s .6s; }
.subtabs.open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.subtabs ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.subtabs li:last-child { padding-bottom: 1.25rem; }
.subtab {
  position: relative; display: block; width: 100%; padding: 0.5rem 0 0.5rem 4.5rem; text-align: left;
  font-size: 0.75rem; text-transform: uppercase; color: var(--color-muted);
  transition: color .4s var(--ease), padding .5s var(--ease-out);
}
.subtab::before {
  content: ""; position: absolute; left: 3.25rem; top: 50%; width: 0; height: 1px;
  background: var(--color-saffron-glow); transition: width .5s var(--ease-out);
}
.subtab:hover { color: var(--color-espresso); padding-left: 4.875rem; }
.subtab[aria-current="true"] { color: var(--color-onyx-warm); }
.subtab[aria-current="true"]::before { width: 1rem; }
.subchips { display: none; } /* pastilles : seulement sur téléphone / tablette (voir plus bas) */
/* écran d'ordinateur peu haut (portable) : onglets plus compacts pour que le sous-menu ouvert tienne sans défiler */
@media (min-width: 1001px) and (max-height: 820px) {
  .tab { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .tab .t-name { font-size: clamp(2rem, min(4.4vw, 6.2vh), 3.875rem); }
  .subtab { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .subtabs li:last-child { padding-bottom: 0.875rem; }
}

.panel { min-height: 26.25rem; min-width: 0; } /* min-width: 0 : la rangée de pastilles défile dans le panneau au lieu de l'élargir */
/* phrase d'explication au-dessus d'une partie de la carte (ex. "Suggestions") */
.panel-note { max-width: 54ch; margin-bottom: 1.75rem; padding-left: 1rem; border-left: 1px solid var(--color-saffron-glow); color: var(--color-espresso); }
.panel-note + .grp { margin-top: 0; }
.grp { display: flex; align-items: center; gap: 1rem; margin: 2.75rem 0 0.375rem; font-size: 0.75rem; text-transform: uppercase; color: var(--color-espresso); }
.grp:first-child { margin-top: 0; }
.grp::after { content: ""; flex: 1; height: 1px; background: var(--color-warm-stone); }
.dishes { border-top: 1px solid var(--color-warm-stone); }
.grp + .dishes { border-top: 0; }
.dish {
  position: relative; isolation: isolate;
  padding: 1.5rem 1.125rem;
  border-bottom: 1px solid var(--color-warm-stone);
}
.dish::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-linen);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.dish:hover::before { transform: scaleX(1); }
.dish-top { display: flex; align-items: baseline; gap: 1rem; }
.dish-name {
  font: 300 clamp(1.625rem, 2.8vw, 2.375rem)/1 var(--font-serif);
  text-transform: uppercase; letter-spacing: -.03em;
  transition: transform .6s var(--ease-out);
}
.dish-tag {
  align-self: center; padding: 0.25rem 0.5rem; border: 1px solid var(--color-saffron-glow); border-radius: 3px;
  font-size: 0.75rem; text-transform: uppercase; color: var(--color-espresso);
}
.dish-lead { flex: 1; align-self: flex-end; margin-bottom: 0.4375rem; border-bottom: 1px dotted var(--color-walnut); min-width: 1.25rem; transition: border-color .4s; }
.dish-price { font: 700 0.9375rem var(--font-sans); white-space: nowrap; transition: transform .6s var(--ease-out); }
/* article proposé en plusieurs formats (25 cl / 50 cl, 75 cl / 37,5 cl) : le format en petit devant chaque prix */
.dish-price .dp + .dp { margin-left: 0.875rem; }
.dish-price small { margin-right: 0.25rem; font: 500 0.6875rem var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-walnut); }
.dish-desc { margin-top: 0.625rem; color: var(--color-espresso); max-width: 54ch; white-space: pre-line; transition: transform .6s var(--ease-out); } /* pre-line : un \n dans desc fait un retour à la ligne (composition d'un menu) */
.dish:hover .dish-name, .dish:hover .dish-desc { transform: translateX(1rem); }
.dish:hover .dish-lead { border-color: var(--color-onyx-warm); }
.dish:hover .dish-price { transform: translateX(-0.375rem) scale(1.12); transform-origin: right; }

.panel.enter .dish { animation: dish-in .9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.panel.enter .grp, .panel.enter .panel-note { animation: dish-in .9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.panel.leave .dish, .panel.leave .grp, .panel.leave .panel-note { animation: dish-out .3s var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes dish-in { from { opacity: 0; transform: translateY(2.125rem); } to { opacity: 1; transform: none; } }
@keyframes dish-out { to { opacity: 0; transform: translateY(-0.875rem); } }

/* mentions de bas de carte (prix, allergènes, alcool) */
.carte-foot { max-width: 68ch; margin-top: clamp(2.5rem, 5vw, 4rem); font-size: 0.8125rem; line-height: 1.65; color: var(--color-muted); }

/* ==========================================================================
   LE PORT — scène épinglée
   ========================================================================== */
/* Hauteur de la section = 100vh (écran) + la distance de scroll pendant laquelle la scène reste épinglée.
   Ici : 175vh - 100vh = 75vh de scroll seulement (avant : 200vh). Pour raccourcir/allonger, changez cette valeur. */
.harbor { position: relative; height: 175vh; }
.harbor-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.harbor-title {
  position: absolute; left: 0; top: 15vh; white-space: nowrap;
  font: 300 clamp(3rem, 14.2vw, 18.75rem)/.8 var(--font-serif);
  text-transform: uppercase; letter-spacing: -.04em;
  transform: translate3d(var(--tx, 44vw), 0, 0);
  color: var(--color-parchment); opacity: .96;
  will-change: transform;
}
.harbor-title .br-m { display: none; }
.harbor-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.harbor-svg path, .harbor-svg circle { fill: none; stroke: var(--color-parchment); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.harbor-svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-js .harbor-svg .draw { stroke-dashoffset: 0; }
.harbor-svg .sun, .harbor-svg .sun2 { stroke: var(--color-saffron-glow); }
.harbor-svg .sun2 { opacity: .4; }
.harbor-svg .wv { opacity: .55; }
.harbor-svg .boat { animation: bob 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.harbor-svg .b2 { animation-duration: 9s; animation-delay: -3s; }
.harbor-svg .b3 { animation-duration: 6s; animation-delay: -1.5s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(0.3125rem) rotate(1.4deg); } }
.harbor-svg .waves { animation: sway 9s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translateX(-3.75rem); } to { transform: translateX(3.75rem); } }

.harbor-cap { position: absolute; opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.harbor-cap.show { opacity: 1; transform: none; }
.harbor-cap-a { left: var(--gutter); bottom: clamp(3.5rem, 12vh, 7.5rem); }
.harbor-line { font: 300 clamp(2.125rem, 5vw, 4.5rem)/.92 var(--font-serif); text-transform: uppercase; letter-spacing: -.04em; margin-top: 0.875rem; }
.harbor-cap-b { right: var(--gutter); bottom: clamp(3.5rem, 12vh, 7.5rem); text-align: right; font-size: 0.75rem; text-transform: uppercase; color: var(--color-linen); line-height: 1.5; }

/* ==========================================================================
   HORAIRES
   ========================================================================== */
.hours { padding: var(--gap-section) 0; background: var(--color-linen); }
.hours .rule { background: var(--color-walnut); }
.hours .label, .hours .body, .hours .status { color: var(--color-onyx-warm); }
.hours .body { color: var(--color-espresso); }
.hours-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.hours-status { display: grid; gap: 0.875rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.days { border-top: 1px solid var(--color-onyx-warm); }
.axis, .day { display: grid; grid-template-columns: minmax(6.875rem, 12.5rem) 1fr minmax(9.375rem, 14.375rem); gap: clamp(0.75rem, 3vw, 2.5rem); align-items: center; }
.axis { padding: 0.75rem 1.25rem; font-size: 0.75rem; color: var(--color-espresso); text-transform: uppercase; }
.axis-track { position: relative; height: 0.875rem; }
.axis-track span { position: absolute; top: 0; transform: translateX(-50%); }
.day {
  position: relative; isolation: isolate;
  padding: 1.625rem 1.25rem; border-top: 1px solid var(--color-walnut);
  transition: color .5s var(--ease);
}
.day::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-parchment);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-out);
}
.day:hover::before { transform: scaleY(1); }
.day.today { background: var(--color-onyx-warm); color: var(--color-parchment); }
.day.today::before { display: none; }
.day-name { font: 300 clamp(1.875rem, 3.6vw, 3.25rem)/.9 var(--font-serif); text-transform: uppercase; letter-spacing: -.035em; transition: transform .6s var(--ease-out); }
.day:hover .day-name { transform: translateX(0.625rem); }
.day-name small { display: block; margin-top: 0.375rem; font: 500 0.75rem var(--font-sans); letter-spacing: 0; color: var(--color-saffron-glow); }
.track { position: relative; height: 1px; background: currentColor; opacity: .95; }
.track .seg {
  position: absolute; top: -0.375rem; height: 0.8125rem;
  background: var(--color-onyx-warm);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-out), background .4s;
  transition-delay: calc(var(--k) * 180ms + var(--r, 0) * 60ms);
}
.day.today .track .seg { background: var(--color-parchment); }
.days.in .track .seg { transform: scaleX(1); }
.day:hover .track .seg { background: var(--color-saffron-glow); }
.track .now {
  position: absolute; top: -0.875rem; width: 1px; height: 1.8125rem; background: var(--color-saffron-glow);
  display: none;
}
.track .now::after { content: ""; position: absolute; top: -0.25rem; left: -3px; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--color-saffron-glow); animation: ping-dot 2s var(--ease) infinite; }
@keyframes ping-dot { 50% { transform: scale(1.7); opacity: .5; } }
.day-times { font-size: 0.875rem; text-align: right; text-transform: uppercase; line-height: 1.5; }

/* ==========================================================================
   AVIS — mêmes hairlines et le même remplissage au survol que .cards/.infos
   ========================================================================== */
.reviews { padding: var(--gap-section) 0; }
.reviews-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.reviews-score { display: grid; justify-items: start; gap: 0.375rem; padding-bottom: clamp(0.5rem, 1.4vw, 1rem); }
.score-num { font: 300 2.75rem/1 var(--font-serif); letter-spacing: -.03em; }
.score-num span { font-size: 1.25rem; color: var(--color-walnut); }
.score-stars { color: var(--color-saffron-glow); letter-spacing: .125em; }
.score-text { font-size: 0.8125rem; text-transform: uppercase; color: var(--color-walnut); }
.reviews-score .link { margin-top: 0.5rem; }

.reviews-row {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch;
  margin-top: var(--gap-section); border-top: 1px solid var(--color-warm-stone);
}
.review-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  border-right: 1px solid var(--color-warm-stone); border-bottom: 1px solid var(--color-warm-stone);
  transition: color .5s var(--ease), opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.review-card:nth-child(3n+1) { border-left: 1px solid var(--color-warm-stone); }
.review-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-onyx-warm);
  transform: translateY(101%);
  transition: transform .7s var(--ease-out);
}
.review-card:hover { color: var(--color-parchment); }
.review-card:hover::before { transform: none; }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-top .stars { color: var(--color-saffron-glow); letter-spacing: .1em; }
.review-top .stars .off { color: var(--color-warm-stone); transition: color .5s; }
.review-card:hover .review-top .stars .off { color: var(--color-espresso); }
.review-src { font: 500 0.75rem var(--font-sans); text-transform: uppercase; letter-spacing: -.012em; color: var(--color-walnut); }
.review-body { color: var(--color-espresso); transition: color .5s; }
.review-card:hover .review-body { color: var(--color-linen); }
.review-author { margin-top: auto; font-size: 0.8125rem; color: var(--color-walnut); }
.review-author span { text-transform: none; }
.reviews-note { margin-top: 1.5rem; max-width: 60ch; font-size: 0.8125rem; color: var(--color-walnut); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--color-onyx-warm); padding-top: var(--gap-section); }
.contact > .wrap { padding-bottom: var(--gap-section); }
.contact .h2 { margin-bottom: clamp(1.5rem, 3.4vw, 3rem); }

/* Réservation : par téléphone ou sur place uniquement */
.resa { display: grid; gap: clamp(1.125rem, 2.6vw, 1.875rem); justify-items: start; }
.resa > .rule { margin-top: clamp(0.25rem, 1vw, 0.75rem); }
.phone {
  position: relative; display: block; width: fit-content; overflow: hidden; padding: .14em 0 .12em;
  font: 300 clamp(2.5rem, 10.4vw, 9.75rem)/.9 var(--font-serif); letter-spacing: -.04em; white-space: nowrap;
}
.phone::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-parchment); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease-out); }
.phone:hover::after { transform: scaleX(1); transform-origin: left; }
.phone .c { display: inline-block; transition: transform .6s var(--ease-out), color .6s; transition-delay: calc(var(--i) * 22ms); animation: ch-in 1.2s var(--ease-out) backwards paused; animation-delay: calc(var(--i) * 45ms + 100ms); }
.phone.in .c { animation-play-state: running; }
.phone .c.sp { width: .24em; }
.phone:hover .c { transform: translateY(-.09em); color: var(--color-saffron-glow); }
.resa-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.resa-row .body { max-width: 56ch; }
.contact-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.infos { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--gap-section); border-top: 1px solid var(--line-dark); }
.info {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 0.875rem; align-content: start; min-height: 13.75rem;
  padding: 1.75rem 1.75rem 2.25rem;
  border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  transition: color .5s var(--ease), opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.info:first-child { border-left: 1px solid var(--line-dark); }
.info::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-parchment); transform: translateY(101%); transition: transform .7s var(--ease-out); }
.info:hover { color: var(--color-onyx-warm); }
.info:hover::before { transform: none; }
.info .label { transition: color .5s; }
.info:hover .label { color: var(--color-espresso); }
.info-title { font: 300 clamp(1.625rem, 2.6vw, 2.375rem)/1 var(--font-serif); text-transform: uppercase; letter-spacing: -.03em; margin-top: 0.625rem; transition: transform .6s var(--ease-out); }
.info:hover .info-title { transform: translateX(0.5rem); }
.info-text { color: var(--color-linen); transition: color .5s; }
.info:hover .info-text { color: var(--color-espresso); }
.mail { width: fit-content; border-bottom: 1px solid currentColor; padding-bottom: 0.25rem; }

.map { position: relative; height: clamp(18.75rem, 42vw, 32.5rem); border-top: 1px solid var(--line-dark); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.35) brightness(.78) contrast(1.05); transition: filter .8s var(--ease); }
.map:hover iframe { filter: grayscale(.2) sepia(.25) brightness(.95); }
.map-tag {
  position: absolute; left: var(--gutter); bottom: var(--pad); z-index: 2;
  display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem;
  background: var(--color-parchment); color: var(--color-onyx-warm);
  font-size: 0.8125rem; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.map-tag-go { display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 1.5rem; border-left: 1px solid var(--color-warm-stone); }
.map-tag:hover { background: var(--color-onyx-warm); color: var(--color-parchment); }
.map-tag:hover .ico { transform: translateX(0.3125rem); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--color-midnight-roast); padding: clamp(3rem, 7vw, 6.25rem) 0 1.75rem; overflow: hidden; }
.foot-top { padding: 0 var(--gutter) clamp(1.75rem, 4vw, 3.5rem); }
.foot-mark {
  display: block; overflow: hidden; padding: .06em 0 .04em;
  font: 500 clamp(2.5rem, 13.7vw, 12.4375rem)/.8 var(--font-sans); letter-spacing: -.016em; text-transform: uppercase; white-space: nowrap;
}
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem 2.5rem; flex-wrap: wrap; padding: 1.5rem var(--gutter) 0; font-size: 0.8125rem; color: var(--color-walnut); }
.foot-row a:not(.totop) { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.foot-row a:not(.totop):hover { color: var(--color-parchment); border-color: currentColor; }
/* crédit du développeur : ligne discrète tout en bas du pied de page */
.foot-credit { padding: 0.5rem var(--gutter) 0; font-size: 0.75rem; color: var(--color-walnut); }
.foot-credit a { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.foot-credit a:hover { color: var(--color-parchment); border-color: currentColor; }
.totop { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.875rem 0; text-transform: uppercase; color: var(--color-parchment); }
.ico.up { transform: rotate(-90deg); }
.totop:hover .ico.up { transform: rotate(-90deg) translateX(0.3125rem); }

/* Chiffres alignés sur la ligne de base : la police serif propose des chiffres "anciens" par défaut,
   et le raccourci `font:` les réinitialise, d'où cette règle placée après les autres. */
.card-time, .card-title, .phone, .lead, .h2, .dish-name, .mq-set span, .info-title, .day-name, .harbor-line, .tab .t-name, .score-num, .legal-h3 { font-variant-numeric: lining-nums; }

/* ==========================================================================
   Révélations au scroll
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(2.75rem);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.7) rotate(-30deg); }
[data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition-duration: 1.6s; }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* une fois révélées, les cartes gardent leurs transitions de survol / de tilt */
.card[data-reveal].in, .info[data-reveal].in, .review-card[data-reveal].in { transition: color .5s var(--ease), opacity 1s var(--ease-out), transform .8s var(--ease-out); }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .04em .04em; margin: -.16em -.04em -.04em; }
.wi { display: inline-block; transform: translateY(112%) rotate(3deg); transform-origin: left bottom; transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
.in .wi, .wi.in { transform: none; }
.no-js .wi { transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-side { grid-template-columns: auto 1fr; align-items: center; gap: 1.75rem; }
  .intro-side .link { grid-column: 1 / -1; }
  .cards, .infos, .reviews-row { grid-template-columns: 1fr; }
  .card { min-height: 16.25rem; border-left: 1px solid var(--color-warm-stone); }
  .info { min-height: 10.625rem; border-left: 1px solid var(--line-dark); }
  .review-card { border-left: 1px solid var(--color-warm-stone); }
  .reviews-top { flex-direction: column; align-items: flex-start; }
  .carte-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .tabs {
    position: sticky; top: var(--navoff); z-index: 5; flex-direction: row; gap: 1.375rem; overflow-x: auto;
    background: var(--color-parchment); border-bottom: 1px solid var(--color-warm-stone);
    margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { border-top: 0; padding: 0.75rem 0; flex: none; gap: 0.5rem; }
  .tab .t-num, .tab .t-count { display: none; }
  .tab .t-name { font-size: 2.125rem; flex: none; }
  .tab:hover, .tab[aria-current="true"] { padding-left: 0; }
  .tab::before { top: auto; bottom: 0; left: 0; width: 0; height: 2px; }
  .tab[aria-current="true"]::before { width: 100%; }
  .tabs { max-height: none; }
  .subtabs { display: none; }
  .subchips { display: flex; gap: 0.5rem; margin: 0 calc(var(--pad) * -1) 1.5rem; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
  .subchips::-webkit-scrollbar { display: none; }
  .subchip {
    flex: none; padding: 0.5rem 0.875rem; border: 1px solid var(--color-warm-stone); border-radius: 3px;
    font-size: 0.75rem; text-transform: uppercase; color: var(--color-espresso);
    transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  }
  .subchip[aria-current="true"] { border-color: var(--color-saffron-glow); background: var(--color-linen); color: var(--color-onyx-warm); }
  .hero-foot-row { grid-template-columns: 1fr; justify-items: start; gap: 1.25rem; }
  .hero-cta { justify-content: flex-start; }
  .hero-hours { text-align: left; }
  .axis { display: none; }
  .day { grid-template-columns: 1fr auto; gap: 1.125rem 1rem; padding: 1.375rem 1rem; }
  .day .track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .btn-sm { display: none; }
  .btn { padding: 1.0625rem 1.25rem; }
  .hero-inner { padding-top: 6.875rem; }
  .hero-meta { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .wordmark, .foot-mark { font-size: 15.4vw; }
  .intro-side { grid-template-columns: 1fr; }
  .harbor-title { top: 11vh; font-size: 21.5vw; }
  .harbor-title .br-m { display: inline; }
  .resa-row { flex-direction: column; align-items: flex-start; }
  .map-tag { right: var(--gutter); flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.875rem 1rem; }
  .map-tag-go { border-left: 0; padding-left: 0; }
  .dish { padding: 1.25rem 0.5rem; }
  .dish-top { flex-wrap: wrap; gap: 0.375rem 0.75rem; }
  .dish-lead { display: none; }
  .dish-price { margin-left: auto; }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .harbor-cap-b { display: none; }
  .day-times { font-size: 0.8125rem; }
  .legal-fields { grid-template-columns: 1fr; }
  .legal-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ---------- Écrans peu hauts (téléphone en paysage, petite fenêtre) : le hero tient dans l'écran ---------- */
@media (max-height: 560px) {
  .hero-inner { padding-top: 4.75rem; }
  .hero-meta { padding-bottom: 0.625rem; }
  .wordmark { font-size: min(13.7vw, 26vh); }
  .hero-foot { padding-top: 0.875rem; padding-bottom: 1rem; }
  .hero-foot .rule { margin-bottom: 0.875rem; }
  .hero-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.5rem; }
  .hero-hours { display: none; } /* déjà dans la section Horaires */
  .btn { padding: 0.875rem 1.25rem; }
  .harbor-cap-a { bottom: 1.75rem; }
  .harbor-line { font-size: clamp(1.625rem, 8vh, 3rem); }
}
@media (max-height: 560px) and (min-width: 641px) {
  .hero-cta .btn:nth-child(2) { display: none; } /* le bouton "Réserver · téléphone" est déjà dans la barre du haut */
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal="line"] { transform: none; }
  .wi { transform: none; }
  .harbor-svg .draw { stroke-dashoffset: 0; }
  .harbor-cap { opacity: 1; transform: none; }
  .track .seg { transform: scaleX(1); }
  .fw { color: var(--color-onyx-warm); }
}

/* ==========================================================================
   PAGES LÉGALES (Mentions légales / Politique de confidentialité)
   Bloc entièrement additif : ne redéfinit aucune règle existante, ne
   réutilise que les tokens et composants déjà en place (couleurs, polices,
   hairlines, .label/.h2/.body/.link/.rule) pour garder la même charte.
   ========================================================================== */
.legal-intro { padding: calc(var(--navoff) + 3rem) 0 clamp(2.5rem, 6vw, 4rem); }
/* .h2 a un plancher de 3.25rem (utile pour "La carte"/"Ouvert" etc.) : trop grand pour un mot aussi
   long que "CONFIDENTIALITÉ" sur un très petit téléphone, d'où un plancher plus bas ici, avec
   coupure de secours si un mot isolé ne tient vraiment pas. Identique à .h2 au-delà de ~370px. */
.legal-intro .h2 { margin-bottom: 0; font-size: clamp(2rem, 10.5vw, 9.375rem); overflow-wrap: break-word; }

.legal { padding: var(--gap-section) 0; }
.legal-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.legal-updated { font-size: 0.8125rem; color: var(--color-walnut); }

.legal-col { max-width: 64ch; }
.legal-block { padding: clamp(2.25rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--color-warm-stone); }
.legal-block:first-of-type { border-top: 0; padding-top: 0; }
.legal-num { margin-bottom: 0.75rem; }
.legal-h3 {
  font: 300 clamp(1.625rem, 2.6vw, 2.375rem)/1.05 var(--font-serif);
  text-transform: uppercase; letter-spacing: -.03em;
  margin-bottom: 1.125rem;
}
.legal-block .body { max-width: none; }
.legal-block .body + .body,
.legal-block .body + ul,
.legal-block .body + .legal-fields,
.legal-block .legal-fields + .body,
.legal-block ul + .body { margin-top: 1rem; }
.legal-block ul { display: grid; gap: 0.625rem; margin: 1rem 0; max-width: 64ch; }
.legal-block li { position: relative; padding-left: 1.25rem; color: var(--color-espresso); }
.legal-block li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.375rem; height: 0.375rem; background: var(--color-saffron-glow);
}
.legal-block a:not(.link) { border-bottom: 1px solid var(--color-warm-stone); transition: border-color .3s, color .3s; }
.legal-block a:not(.link):hover { border-color: var(--color-onyx-warm); color: var(--color-saffron-glow); }

/* fiche identité (éditeur / hébergeur…) : étiquette + valeur, comme les Caption Label du reste du site */
.legal-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 2rem;
  margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--color-warm-stone);
}
.legal-field dt { font: 500 0.75rem var(--font-sans); text-transform: uppercase; letter-spacing: -.012em; color: var(--color-walnut); }
.legal-field dd { margin-top: 0.25rem; font: 500 0.9375rem var(--font-sans); }
.legal-field dd.tbd { color: var(--color-saffron-glow); } /* signale un champ [À COMPLÉTER] */

/* page 404 : texte + boutons en français, puis le même bloc en anglais ; le pied de page reste en bas même sur un grand écran */
body.page-404 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.page-404 main { flex: 1; }
.err-block .body a { border-bottom: 1px solid var(--color-warm-stone); transition: border-color .3s, color .3s; }
.err-block .body a:hover { border-color: var(--color-onyx-warm); color: var(--color-saffron-glow); }
.err-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.err-en { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-warm-stone); }
.err-en .label { margin-bottom: 0.75rem; }