/* ════════════════════════════════════════════════════════════════════════════
   Le Nord-Ouest — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Tout vient de leurs propres affiches de spectacle :
   fond noir, lettrage blanc très gras, un mot en script rouge-orangé, et un
   filet rouge sous la ligne. Les couleurs sont échantillonnées sur leur
   bannière — le rouge des pastilles « PUB • SPECTACLES • RESTO » (#e74c1d) et
   celui du filet (#c53727).

   Le langage de formes est donc l'AFFICHE : aucun arrondi nulle part, des
   angles vifs, des filets, et des titres qui occupent toute la largeur. C'est
   l'exact inverse des maquettes rondes faites jusqu'ici, et c'est ce que leur
   propre matériel réclame. Seuls les boutons sont des pastilles — parce qu'un
   bouton doit se voir comme un bouton.

   Titres en Archivo Black, texte en Archivo, et Yellowtail pour le mot écrit à
   la main, comme sur leurs affiches : un seul mot par titre, jamais deux.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0e0e10;               /* le noir de leurs affiches */
  --ink-2: #17171a;
  --ink-3: #202024;
  --paper: #f2efe9;             /* le blanc cassé du lettrage */
  --paper-2: #e6e2d9;
  --text: #16161a;
  --muted: #8b887f;
  --on-dark: #f2efe9;
  --on-dark-muted: #9a978f;
  --rouge: #e74c1d;             /* la pastille, mesurée sur la bannière */
  --rouge-deep: #c53727;        /* le filet sous la signature */
  --line: rgba(242, 239, 233, .16);
  --line-paper: #d8d3c7;
  --shadow: 0 10px 28px -16px rgba(0, 0, 0, .75);
  --shadow-lg: 0 30px 70px -32px rgba(0, 0, 0, .9);
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 44px);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --black: "Archivo Black", "Archivo", Arial, sans-serif;
  --script: "Yellowtail", cursive;
  --t: 300ms cubic-bezier(.22, 1, .36, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--ink); color: var(--on-dark);
  font: 400 17px/1.62 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto }
/* Des blocs masqués par hidden portent aussi un display : sans cette règle, ils resteraient visibles. */
[hidden] { display: none !important }
a { color: inherit }
h1, h2, h3 { font-family: var(--black); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; text-transform: uppercase }
h1 { font-size: clamp(34px, 5.6vw, 68px) }
h2 { font-size: clamp(26px, 3.8vw, 44px) }
h3 { font-size: 19px; letter-spacing: -.01em }
/* Le mot manuscrit : jamais en capitales, toujours rouge, un seul par titre. */
h1 em, h2 em { font-family: var(--script); font-style: normal; text-transform: none; color: var(--rouge); letter-spacing: 0; font-size: 1.16em; line-height: .9 }
p { margin: 0 }
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--pad) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: -9999px; top: 0; background: var(--rouge); color: #fff; padding: 12px 18px; z-index: 100; font-weight: 700 }
.skip:focus { left: 0 }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px }

/* Surtitre : capitales espacées et pastilles rouges, repris du « PUB • SPECTACLES • RESTO ». */
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--paper);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--rouge); flex: none }
.eyebrow i { font-style: normal; color: var(--rouge) }

/* ── Écran d'ouverture ────────────────────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--ink); animation: splashOut .5s ease 1.5s forwards }
.splash__logo { width: min(260px, 56vw); height: auto; animation: splashIn .8s cubic-bezier(.22, 1, .36, 1) both }
@keyframes splashIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes splashOut { to { opacity: 0; visibility: hidden } }

/* ── Bandeau d'annonce ────────────────────────────────────────────────────── */
.announce { background: var(--rouge); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.announce .wrap { padding-block: 10px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(14, 14, 16, .84); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: background var(--t), border-color var(--t) }
.top.is-scrolled { background: rgba(14, 14, 16, .97); border-bottom-color: var(--line) }
.top__row { display: flex; align-items: center; gap: 20px; min-height: 78px }
.brand { display: inline-flex; align-items: center; text-decoration: none; transition: opacity var(--t) }
.brand:hover { opacity: .78 }
.brand__logo { width: auto; height: 42px }
.brand--foot .brand__logo { height: 54px }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.1vw, 30px) }
.nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); padding: 7px 0; transition: color var(--t) }
/* Le filet rouge qui s'étire sous le lien — repris du trait sous leur signature. */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform var(--t) }
.nav a:hover { color: var(--rouge) }
.nav a:hover::after { transform: scaleX(1) }
.nav__cta { background: var(--rouge); color: #fff !important; padding: 11px 22px !important; border-radius: 999px; transition: background var(--t), transform var(--t) }
.nav__cta::after { display: none }
.nav__cta:hover { background: #ff5f2e; transform: translateY(-2px) }
.nav__cta:active { transform: translateY(0) scale(.97) }

.burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); background: transparent; cursor: pointer; padding: 0; place-items: center; gap: 5px }
.burger span { display: block; width: 19px; height: 2px; background: var(--on-dark); transition: transform var(--t), opacity var(--t) }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px; border: 2px solid transparent;
  font: 700 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn--rouge { background: var(--rouge); color: #fff }
.btn--rouge:hover { background: #ff5f2e; transform: translateY(-2px) }
.btn--ink { background: var(--ink); color: var(--on-dark) }
.btn--ink:hover { background: var(--ink-3); transform: translateY(-2px) }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(242, 239, 233, .4) }
.btn--ghost:hover { border-color: var(--rouge); color: var(--rouge); transform: translateY(-2px) }
.btn--lg { padding: 17px 34px; font-size: 15px }
.btn:active { transform: translateY(0) scale(.97) }
.btn:disabled { opacity: .5; cursor: default; transform: none }

/* ── Héros ────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2 }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; transform: scale(1.08) }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14, 14, 16, .96) 8%, rgba(14, 14, 16, .80) 48%, rgba(14, 14, 16, .40)),
    linear-gradient(to top, rgba(14, 14, 16, .96), rgba(14, 14, 16, .22) 62%);
}
.hero__inner { padding: clamp(86px, 14vh, 150px) var(--pad) clamp(70px, 11vh, 112px); max-width: 860px }
.hero h1 { color: #fff }
.hero__status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  border: 1px solid rgba(242, 239, 233, .26); padding: 7px 17px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.hero__status .dot { width: 7px; height: 7px; background: var(--rouge) }
.hero__status.is-closed .dot { background: var(--on-dark-muted) }
.lede { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; color: rgba(242, 239, 233, .86); margin-top: 24px; max-width: 56ch }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px }
.hero__proof { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 239, 233, .68) }
.hero__proof b { font-family: var(--black); font-size: 17px; color: var(--rouge); margin-right: 6px; letter-spacing: 0 }
.hero__proof i { width: 5px; height: 5px; background: rgba(242, 239, 233, .34) }

/* ── Promo ────────────────────────────────────────────────────────────────── */
.promo { background: var(--rouge); color: #fff }
.promo__row { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 30px }
.promo .eyebrow { color: #fff } .promo .eyebrow::before { background: #fff }
.promo h2 em { color: #fff }
.promo p { margin-top: 8px; max-width: 62ch }

/* ── L'affiche ────────────────────────────────────────────────────────────── */
.slate { padding-block: clamp(62px, 9vw, 106px); border-top: 1px solid var(--line) }
.slate__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: clamp(28px, 5vw, 62px); align-items: center }
.slate__photo { margin: 0; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg) }
.slate__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover }
.section-head { max-width: 58ch }
.section-head__note { color: var(--on-dark-muted); margin-top: 16px; font-size: 16.5px }
/* Le bloc d'affiche : fond blanc cassé, trait rouge épais à gauche, angles vifs. */
.board { margin-top: 30px; position: relative; background: var(--paper); color: var(--text); padding: clamp(24px, 3.4vw, 36px) clamp(24px, 3.4vw, 38px); border-left: 8px solid var(--rouge); box-shadow: var(--shadow-lg) }
.board__kicker { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--rouge-deep) }
.board__title { font-family: var(--black); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.02; text-transform: uppercase; letter-spacing: -.02em; margin-top: 12px }
.board__when { font-family: var(--script); font-size: clamp(22px, 2.6vw, 30px); color: var(--rouge-deep); margin-top: 10px; line-height: 1.1 }
.board__desc { color: var(--muted); margin-top: 14px; max-width: 46ch }
.board__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-paper); font-size: 14.5px; color: var(--muted) }

/* ── Quatre promesses ─────────────────────────────────────────────────────── */
.values { background: var(--paper); color: var(--text); padding-block: clamp(56px, 8vw, 92px) }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px }
.value { background: var(--paper); border: 1px solid var(--line-paper); padding: 28px 26px 30px; position: relative; transition: background var(--t), border-color var(--t) }
.value::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform var(--t) }
.value:hover { background: #fff; border-color: var(--rouge) }
.value:hover::after { transform: scaleX(1) }
.value h3 { margin-bottom: 10px }
.value p { color: var(--muted); font-size: 16px }

/* ── Le menu ──────────────────────────────────────────────────────────────── */
.menus { padding-block: clamp(62px, 9vw, 106px); border-top: 1px solid var(--line) }
.menus .section-head { margin-inline: auto; text-align: center }
.menus .section-head .eyebrow { justify-content: center }
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 36px 0 42px }
.tab { font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 13px 22px; border: 1px solid rgba(242, 239, 233, .28); background: transparent; color: var(--on-dark); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t) }
.tab:hover { border-color: var(--rouge); color: var(--rouge); transform: translateY(-2px) }
.tab:active { transform: translateY(0) scale(.97) }
.tab.is-active { background: var(--rouge); border-color: var(--rouge); color: #fff }
.carte__intro { text-align: center; color: var(--on-dark-muted); max-width: 56ch; margin: 0 auto 36px; font-size: 17px }
.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 56px) }
.carte__col { min-width: 0 }
.carte__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--rouge); margin-bottom: 4px }
.tag { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--rouge); padding: 4px 10px }
.carte__secnote { color: var(--on-dark-muted); font-size: 15.5px; margin: 10px 0 0 }
.dishes { list-style: none; margin: 0; padding: 0 }
.dishes li { display: flex; gap: 18px; align-items: baseline; justify-content: space-between; padding: 15px 12px; margin-inline: -12px; border-bottom: 1px solid rgba(242, 239, 233, .1); transition: background var(--t) }
.dishes li:hover { background: rgba(242, 239, 233, .05) }
.dish { display: block; min-width: 0 }
.dish b { font-family: var(--sans); font-weight: 700; font-size: 17px; display: block; letter-spacing: -.005em }
.dish small { display: block; color: var(--on-dark-muted); font-size: 15px; line-height: 1.45; margin-top: 3px }
.dish small:empty { display: none }
.price { font-family: var(--black); font-size: 16px; color: var(--rouge); white-space: nowrap; font-variant-numeric: tabular-nums; transition: transform var(--t) }
.dishes li:hover .price { transform: translateX(-3px) }
.price:empty { display: none }
.carte__photo { margin: 28px 0 0; overflow: hidden; border: 1px solid var(--line) }
.carte__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover }
.carte__photo figcaption { padding: 12px 16px 15px; font-size: 14px; color: var(--on-dark-muted) }
.carte__note { text-align: center; color: var(--on-dark-muted); font-size: 14.5px; margin-top: 34px }

/* ── Les soirées ──────────────────────────────────────────────────────────── */
.features { background: var(--ink-2); padding-block: clamp(58px, 8vw, 96px) }
.section-head--row { display: flex; gap: 28px; align-items: end; justify-content: space-between; flex-wrap: wrap; max-width: none; margin-bottom: 34px }
.features__note { color: var(--on-dark-muted); max-width: 40ch; font-size: 16px }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px }
.feature { margin: 0; background: var(--ink); border: 1px solid var(--line); overflow: hidden; transition: transform var(--t), border-color var(--t) }
.feature img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 600ms cubic-bezier(.22, 1, .36, 1) }
.feature:hover { transform: translateY(-5px); border-color: var(--rouge) }
.feature:hover img { transform: scale(1.04) }
.feature figcaption { padding: 18px 20px 22px }
.feature b { display: block; font-family: var(--black); font-size: 17px; text-transform: uppercase; letter-spacing: -.01em }
.feature span { display: block; color: var(--on-dark-muted); font-size: 15px; margin-top: 5px }

/* ── La maison ────────────────────────────────────────────────────────────── */
.split { padding-block: clamp(62px, 9vw, 106px); border-top: 1px solid var(--line) }
.split .wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: center }
.split__media { margin: 0; overflow: hidden; border: 1px solid var(--line) }
.split__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center }
.split__p { color: var(--on-dark-muted); margin-top: 18px; font-size: 17px }
.timeline { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line) }
.timeline li { counter-increment: s; position: relative; padding: 18px 20px 18px 60px; background: var(--ink); transition: background var(--t), transform var(--t) }
.timeline li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--rouge); color: #fff; font: 700 13px/1 var(--sans) }
.timeline li:hover { background: var(--ink-3); transform: translateX(4px) }
.timeline b { display: block; font-size: 16.5px; font-weight: 700 }
.timeline span { display: block; color: var(--on-dark-muted); font-size: 15px; margin-top: 3px }

/* ── Réserver ─────────────────────────────────────────────────────────────── */
.booking { background: var(--paper); color: var(--text); padding-block: clamp(62px, 9vw, 106px) }
.booking .eyebrow { color: var(--text) }
.booking__text > p { color: var(--muted); margin-top: 18px; max-width: 48ch }
.booking__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 60px); align-items: start }
.booking__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px }
.booking__points li { padding-left: 22px; position: relative }
.booking__points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--rouge) }
.booking__points b { display: block; font-size: 16.5px; font-weight: 700 }
.booking__points span { display: block; color: var(--muted); font-size: 15.5px; margin-top: 2px }
.booking__phone { margin-top: 24px; font-size: 16px; color: var(--muted) }
.booking__phone a { font-family: var(--black); font-size: 21px; color: var(--text); text-decoration: none; margin-left: 8px; border-bottom: 3px solid var(--rouge); transition: color var(--t) }
.booking__phone a:hover { color: var(--rouge) }

.booking__form { background: var(--ink); color: var(--on-dark); padding: clamp(24px, 3.4vw, 36px); box-shadow: var(--shadow-lg) }
.field { margin-bottom: 15px }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.5 var(--sans); color: var(--on-dark);
  padding: 12px 14px; border: 1px solid rgba(242, 239, 233, .24); background: rgba(242, 239, 233, .06);
  transition: border-color var(--t), background var(--t);
}
.field textarea { resize: vertical; min-height: 84px }
.field select option { color: #111 }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--rouge); background: rgba(242, 239, 233, .1) }
.field--hp { position: absolute; left: -9999px }
.booking__legal { font-size: 14px; color: var(--on-dark-muted); margin: 6px 0 18px }
.booking__form .btn { width: 100% }
.booking__msg { margin-top: 14px; font-size: 15px; font-weight: 600; min-height: 1.2em }
.booking__msg.ok { color: var(--rouge) }
.booking__msg.err { color: #ff8f6e }

/* ── Nous trouver ─────────────────────────────────────────────────────────── */
.contact { padding-block: clamp(58px, 8vw, 96px); border-top: 1px solid var(--line) }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start }
.contact__lede { color: var(--on-dark-muted); margin-top: 16px; max-width: 44ch }
.contact__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px }
.contact__list li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.contact__list b { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge) }
.contact__list a { text-decoration: none; border-bottom: 1px solid rgba(242, 239, 233, .2); transition: color var(--t), border-color var(--t) }
.contact__list a:hover { color: var(--rouge); border-color: var(--rouge) }
.hours { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 400 }
.hours th { font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase }
.hours td { text-align: right; font-variant-numeric: tabular-nums }
.hours td.closed { color: var(--on-dark-muted) }
.hours tr.is-today th, .hours tr.is-today td { color: var(--rouge) }
.hours__exc { list-style: none; margin: 16px 0 0; padding: 13px 16px; background: rgba(231, 76, 29, .14); font-size: 15px; display: grid; gap: 6px }
.contact__note { margin-top: 20px; font-size: 15.5px; color: var(--on-dark-muted) }
.contact__map { overflow: hidden; border: 1px solid var(--line); min-height: 430px; height: 100% }
.contact__map iframe { width: 100%; height: 100%; min-height: 430px; border: 0; display: block; filter: grayscale(.4) contrast(1.05) }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.foot { background: #000; padding-top: clamp(52px, 7vw, 82px); border-top: 3px solid var(--rouge) }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px }
.foot__brand p { color: var(--on-dark-muted); font-size: 16px; margin-top: 18px; max-width: 32ch }
.foot h3 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rouge); margin-bottom: 14px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 16px; color: var(--on-dark-muted) }
.foot a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--t) }
.foot a:hover { color: var(--paper) }
.foot__bar { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 58px); padding-block: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--on-dark-muted) }
.foot__credit a { color: var(--rouge) }

/* ── Couche d'animation (anim.js) ─────────────────────────────────────────── */
.js-anim [data-reveal]:not([data-revealed]) { opacity: 0 }
.js-anim [data-reveal-group]:not([data-revealed]) > * { opacity: 0 }
.w { display: inline-block; overflow: hidden; vertical-align: top }
.w > span { display: inline-block; will-change: transform }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important }
  .splash { display: none }
  .js-anim [data-reveal]:not([data-revealed]), .js-anim [data-reveal-group]:not([data-revealed]) > * { opacity: 1 }
}

/* ── Adaptation ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .slate__grid, .split .wrap, .booking__grid, .contact__grid { grid-template-columns: 1fr }
  .slate__photo { order: -1 }
  .foot__grid { grid-template-columns: 1fr 1fr }
  .contact__map, .contact__map iframe { min-height: 320px }
}
@media (max-width: 760px) {
  .burger { display: grid }
  .nav {
    position: fixed; inset: 78px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 24px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t);
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px }
  .nav a::after { display: none }
  .nav__cta { text-align: center; margin-top: 16px; border-bottom: 0 }
  .foot__grid { grid-template-columns: 1fr }
  .dishes li { flex-direction: column; gap: 5px }
  .price { align-self: flex-start }
  .contact__list li { grid-template-columns: 1fr; gap: 2px }
  .hours td { text-align: left }
  .eyebrow { align-items: flex-start } .eyebrow::before { margin-top: 6px }
}