/* ════════════════════════════════════════════════════════════════════════════
   Restaurant Le Prestige — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Leur carte de visite dit tout : un SMOKING dessiné —
   veste noire, chemise blanche, nœud papillon ROUGE, revers soulignés d'OR —
   au-dessus de « RESTAURANT LE PRESTIGE », le « LE » en or et « PRESTIGE » en
   rouge, puis « STEAK HOUSE » entre deux filets dorés, le tout sur un NOIR
   plein. Trois couleurs, pas une de plus, et elles sont déjà choisies.

   LE NOIR EST UNE SURFACE, PAS UN FOND. Un steak house se mange le soir : les
   bandeaux de tête et de pied sont noirs comme leur carte, le corps de page
   reste crème pour que la carte se lise en plein jour. C'est le contraste du
   restaurant lui-même — la salle en bois clair, la soirée au noir.

   LE FILET DORÉ est le seul ornement, et il vient de leur logo : deux traits
   qui encadrent « STEAK HOUSE ». Il sert aux séparations de section et à rien
   d'autre.

   LA RÈGLE DE FOND. Leur menu existe, il est complet, il a des prix — il n'est
   simplement nulle part en ligne. Le site doit donc le porter en entier, tel
   qu'il est écrit sur leur papier, catégorie par catégorie.

   Titres en Fraunces, texte en Outfit.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0B0B0C;               /* le noir plein de leur carte */
  --ink-soft: #16161A;
  --paper: #F7F4EE;             /* crème de salle */
  --cream: #EFE9DC;
  --card: #ffffff;
  --line: #E0D8C8;
  --text: #1A1A1C;
  --muted: #6F6A62;
  --crust: #B0202A;             /* le rouge de PRESTIGE et du nœud papillon */
  --crust-deep: #8E1821;
  --crust-soft: #F7E3E4;
  --leaf: #6E6244;              /* bronze sourd, pour les gammes */
  --linen: #C9A24B;             /* L'OR des revers et des filets */
  --petal: #E3CFA0;             /* or clair */
  --on-dark: #F4F0E7;
  --on-dark-muted: #A79C87;
  --shadow: 0 1px 2px rgba(11, 11, 12, .06), 0 12px 30px -18px rgba(11, 11, 12, .3);
  --shadow-lg: 0 2px 8px rgba(11, 11, 12, .09), 0 34px 74px -36px rgba(11, 11, 12, .45);
  --r: 6px;
  --r-sm: 4px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Outfit", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --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(--paper); color: var(--text);
  font: 400 17px/1.65 var(--sans); font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* height:auto est indispensable : les attributs width/height du HTML (posés pour réserver la place et
   éviter le saut de mise en page) sont des indications de présentation qui l'emportent sur aspect-ratio
   tant que la hauteur n'est pas « auto ». Sans cette ligne, chaque vignette s'affiche à sa hauteur native. */
img { max-width: 100%; display: block; height: auto }
/* Plusieurs blocs (promo, bandeau, exceptions d'horaire) sont masqués par l'attribut hidden et
   possèdent par ailleurs un display : sans cette règle, le display de la classe l'emporte et un
   bloc vide reste visible. */
[hidden] { display: none !important }
a { color: inherit }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance }
h1 { font-size: clamp(42px, 7.2vw, 78px) }
h2 { font-size: clamp(30px, 4.4vw, 50px) }
h3 { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -.016em }
h1 em, h2 em { font-style: normal; color: var(--crust) }
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(--ink); color: var(--on-dark); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; z-index: 100 }
.skip:focus { left: 0 }
:focus-visible { outline: 3px solid var(--crust); outline-offset: 3px; border-radius: 6px }

/* Surtitre : pastille pleine + petites capitales. Le marqueur de toute la page. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; color: var(--leaf); margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--crust); flex: none }

/* ── Écran d'ouverture ────────────────────────────────────────────────────── */
/* Le splash reprend le noir plein de leur carte de visite : c'est là-dessus que le smoking et
   le lettrage ont été dessinés, et c'est la couleur de la salle le soir. */
.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--ink);
  background-image: radial-gradient(46% 42% at 50% 48%, rgba(201,162,75,.14), transparent 72%);
  animation: splashOut .5s ease 1.5s forwards;
}
.splash__mark {
  display: block; animation: splashIn .8s cubic-bezier(.22, 1, .36, 1) both;
}
.splash__mark img {
  display: block; width: clamp(190px, 52vw, 330px); height: auto;
  filter: none;
}
@keyframes splashIn { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@keyframes splashOut { to { opacity: 0; visibility: hidden } }

/* ── Bandeau d'annonce ────────────────────────────────────────────────────── */
.announce { background: var(--ink); color: var(--on-dark); font-size: 14.5px; font-weight: 500 }
.announce .wrap { padding-block: 11px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.announce a { color: var(--linen); text-underline-offset: 3px }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
/* ── L'EN-TÊTE EST NOIR ───────────────────────────────────────────────────────
   Leur logo est dessiné pour le noir : le doré de « RESTAURANT » et les revers
   du smoking s'éteignent sur un fond crème. Plutôt que de bricoler une version
   claire de leur marque, c'est la barre qui prend leur couleur. C'est aussi la
   leur : un steak house se présente en habit du soir. */
.top { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 12, .9); backdrop-filter: blur(14px); transition: box-shadow var(--t), background var(--t) }
.top.is-scrolled { box-shadow: 0 1px 0 rgba(201, 162, 75, .28), 0 16px 30px -28px rgba(0, 0, 0, .8); background: rgba(11, 11, 12, .97) }
.top .nav a { color: var(--on-dark) }
.top .nav a:hover { color: var(--linen) }
.top .nav a::after { background: var(--linen) }
.top .nav__cta { background: var(--crust); color: #fff !important }
.top .nav__cta:hover { background: var(--crust-deep) }
.top .burger span { background: var(--on-dark) }
.top__row { display: flex; align-items: center; gap: 20px; min-height: 76px }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; transition: transform var(--t) }
.brand:hover { transform: translateY(-1px) }
.brand__name { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.012em; color: var(--ink); line-height: 1 }
.brand__name small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 6px }
.brand--foot .brand__name { color: var(--on-dark) }
.brand--foot .brand__name small { color: var(--on-dark-muted) }
.brand--foot .brand__name { font-size: 30px }

/* La pastille ronde est leur logo tel quel, détourée du blanc de leur photo de profil. Elle
   porte déjà son nom : on la pose donc à côté du nom écrit, pas à la place. */
/* Leur carte de visite tient lieu de logo : le smoking et le lettrage, posés sur leur propre
   noir. Elle porte déjà le nom, donc elle remplace le texte au lieu de l'accompagner. */
/* Dans la barre, le verrou complet ne tient pas sur 76 px : le smoking se réduit à une tache
   noire sur noir. On n'y garde donc que le lettrage, découpé du même fichier. Le verrou entier
   reste sur l'écran d'ouverture et dans le pied de page, où il a la place de respirer. */
.brand__mark { height: 42px; width: auto; flex: none; display: block }
.brand--foot .brand__mark { height: 78px }
@media (max-width: 560px) { .brand__mark { height: 40px } }

/* L'étiquette d'une catégorie du comptoir : « Longue fermentation », « Spécialité ». */
.carte__tag {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--linen);
  border: 1px solid rgba(201, 162, 39, .45); border-radius: 999px; padding: 4px 10px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px) }
.nav a { position: relative; text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--text); padding: 6px 0; transition: color var(--t) }
/* Le trait qui s'étire sous le lien : l'une des deux seules animations de survol de la navigation. */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--crust); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t) }
.nav a:hover { color: var(--crust) }
.nav a:hover::after { transform: scaleX(1) }
.nav__cta { background: var(--ink); color: var(--on-dark) !important; border-radius: 999px; padding: 11px 22px !important; transition: background var(--t), transform var(--t), box-shadow var(--t) }
.nav__cta::after { display: none }
.nav__cta:hover { background: var(--crust); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(194, 48, 90, .9) }
.nav__cta:active { transform: translateY(0) scale(.97) }

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

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn--crust { background: var(--crust); color: #fff; box-shadow: 0 10px 24px -16px rgba(155, 61, 43, .95) }
.btn--crust:hover { background: var(--crust-deep); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(155, 61, 43, .95) }
.btn--ink { background: var(--ink); color: var(--on-dark) }
.btn--ink:hover { background: var(--ink-soft); transform: translateY(-2px) }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(43, 33, 29, .26) }
.btn--ghost:hover { border-color: var(--ink); background: rgba(43, 33, 29, .05); transform: translateY(-2px) }
.btn--lg { padding: 17px 34px; font-size: 17px }
.btn:active { transform: translateY(0) scale(.97) }
.btn:disabled { opacity: .55; cursor: default; transform: none }

/* ── Héros ────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; color: var(--on-dark); overflow: hidden }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2 }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(1.03) }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 85%, rgba(43, 33, 29, .93) 0%, rgba(43, 33, 29, .72) 42%, rgba(43, 33, 29, .20) 78%),
    linear-gradient(to top, rgba(43, 33, 29, .92), rgba(43, 33, 29, .34) 55%, rgba(43, 33, 29, .50));
}
.hero__inner { padding: clamp(96px, 16vh, 170px) var(--pad) clamp(72px, 12vh, 118px); max-width: 920px }
.hero .eyebrow { color: var(--linen) }
.hero .eyebrow::before { background: var(--petal) }
.hero h1 { color: #fff }
.hero h1 em { color: var(--linen) }
.hero__status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26);
  padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px);
}
.hero__status .dot { width: 8px; height: 8px; border-radius: 50%; background: #8fd18a; box-shadow: 0 0 0 4px rgba(140, 163, 90, .22) }
.hero__status.is-closed .dot { background: var(--petal); box-shadow: 0 0 0 4px rgba(232, 160, 182, .22) }
.lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: rgba(251, 246, 241, .92); margin-top: 22px; max-width: 60ch }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45) }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff }
.hero__proof { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; font-size: 14.5px; color: rgba(251, 246, 241, .82) }
.hero__proof b { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--petal); margin-right: 5px }
.hero__proof i { width: 5px; height: 5px; border-radius: 50%; background: rgba(251, 246, 241, .4) }

/* ── Promo ────────────────────────────────────────────────────────────────── */
.promo { background: var(--linen) }
.promo__row { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 34px }
.promo h2 { font-size: clamp(24px, 3vw, 32px) }
.promo p { color: var(--ink-soft); margin-top: 8px; max-width: 62ch }

/* ── L'ardoise ────────────────────────────────────────────────────────────── */
.slate { background: var(--cream); padding-block: clamp(64px, 10vw, 110px) }
.slate__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); align-items: center }
.slate__photo { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg) }
.slate__photo figcaption { padding: 14px 20px 18px; font-size: 14px; color: var(--muted); text-align: center }
.slate__photo img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3 }
.section-head { max-width: 62ch }
.section-head h2 { margin-bottom: 0 }
.section-head__note { color: var(--muted); margin-top: 16px; font-size: 16.5px }
.board {
  margin-top: 30px; position: relative; border-radius: var(--r); padding: clamp(28px, 4vw, 42px);
  background: linear-gradient(168deg, #3a2a2f, #2b211d 72%);
  color: var(--on-dark); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(251, 246, 241, .10);
}
.board::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(251, 246, 241, .14); border-radius: calc(var(--r) - 14px); pointer-events: none }
.board__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--linen) }
.board__dish { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; margin-top: 12px; color: #fff }
.board__desc { color: var(--on-dark-muted); margin-top: 12px; max-width: 48ch }
.board__price { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--linen); margin-top: 18px }
.board__price:empty { display: none }
.board__note { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(251, 246, 241, .16); font-size: 14px; color: var(--on-dark-muted) }

/* ── Quatre promesses ─────────────────────────────────────────────────────── */
.values { padding-block: clamp(64px, 9vw, 104px) }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px }
.value { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px 32px; position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
/* Lueur intérieure au survol : la carte se soulève et s'éclaire par le haut. */
.value::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--t); background: radial-gradient(90% 60% at 50% 0%, rgba(194, 48, 90, .10), transparent 70%) }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(194, 48, 90, .32) }
.value:hover::after { opacity: 1 }
.value h3 { margin-bottom: 10px }
.value p { color: var(--muted); font-size: 16px }

/* ── La carte ─────────────────────────────────────────────────────────────── */
.menus { background: var(--ink); color: var(--on-dark); padding-block: clamp(70px, 10vw, 118px); border-radius: var(--r) var(--r) 0 0 }
.menus .eyebrow { color: var(--linen) }
.menus .eyebrow::before { background: var(--petal) }
.menus h2 { color: #fff }
.menus h2 em { color: var(--linen) }
.menus .section-head { margin-inline: auto; text-align: center }
.menus .section-head .eyebrow { justify-content: center }
.menus .section-head__note { color: var(--on-dark-muted) }

.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 38px 0 44px }
.tab { font: 600 15px/1 var(--sans); padding: 13px 26px; border-radius: 999px; border: 1px solid rgba(251, 246, 241, .24); 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(--linen); transform: translateY(-2px) }
.tab:active { transform: translateY(0) scale(.97) }
.tab.is-active { background: var(--linen); color: var(--ink); border-color: var(--linen) }
.menu-panel[hidden] { display: none }
.carte__intro { text-align: center; color: var(--on-dark-muted); max-width: 62ch; margin: 0 auto 36px; font-size: 17px }
.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 54px) }
.carte__col { min-width: 0 }
.carte__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: #fff; padding-bottom: 14px; border-bottom: 1px solid rgba(251, 246, 241, .2); margin-bottom: 6px }
.tag { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--linen); padding: 5px 11px; border-radius: 999px }
.carte__secnote { color: var(--on-dark-muted); font-size: 15px; 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: 17px 14px 17px 14px; margin-inline: -14px; border-bottom: 1px dotted rgba(251, 246, 241, .22); border-radius: var(--r-sm); transition: background var(--t) }
.dishes li:hover { background: rgba(251, 246, 241, .055) }
.dish { display: block; min-width: 0 }
.dish b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: #fff; display: block; letter-spacing: -.01em }
.dish small { display: block; color: var(--on-dark-muted); font-size: 14.5px; line-height: 1.5; margin-top: 5px }
.dish small:empty { display: none }
.price { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--linen); 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; border-radius: var(--r); overflow: hidden; background: rgba(251, 246, 241, .06) }
.carte__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.carte__photo figcaption { padding: 13px 18px 16px; font-size: 14px; color: var(--on-dark-muted) }
.carte__subnote { margin: -6px 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted); font-style: italic }
.carte__note { text-align: center; color: var(--on-dark-muted); font-size: 15px; margin-top: 40px }
.carte__note a { color: var(--linen) }

/* ── La maison ────────────────────────────────────────────────────────────── */
.split { padding-block: clamp(70px, 10vw, 118px) }
.split .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center }
.split__media { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg) }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.split__p { color: var(--muted); margin-top: 18px; font-size: 16.5px }
.timeline { list-style: none; counter-reset: s; margin: 34px 0 0; padding: 0; display: grid; gap: 14px }
.timeline li { counter-increment: s; position: relative; padding: 18px 20px 18px 62px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); transition: transform var(--t), box-shadow var(--t) }
.timeline li::before {
  content: counter(s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--crust); color: #fff; font: 700 14px/1 var(--sans);
}
.timeline li:hover { transform: translateX(4px); box-shadow: var(--shadow) }
.timeline b { display: block; font-size: 16.5px }
.timeline span { display: block; color: var(--muted); font-size: 15px; margin-top: 3px }

/* ── Galerie ──────────────────────────────────────────────────────────────── */
.features { background: var(--cream); padding-block: clamp(64px, 9vw, 104px) }
.section-head--row { display: flex; gap: 28px; align-items: end; justify-content: space-between; flex-wrap: wrap; max-width: none; margin-bottom: 36px }
.features__note { color: var(--muted); max-width: 40ch; font-size: 16px }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px }
.feature { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform var(--t), box-shadow var(--t) }
.feature img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; transition: transform 600ms cubic-bezier(.22, 1, .36, 1) }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) }
.feature:hover img { transform: scale(1.05) }
.feature figcaption { padding: 20px 22px 24px }
.feature b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 400 }
.feature span { display: block; color: var(--muted); font-size: 15px; margin-top: 5px }

/* ── Bandeau façade ───────────────────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; color: var(--on-dark); overflow: hidden }
.banner__media { position: absolute; inset: 0; z-index: -2 }
.banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38% }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(43, 33, 29, .94) 12%, rgba(43, 33, 29, .74) 52%, rgba(43, 33, 29, .36)) }
.banner__content { padding-block: clamp(70px, 11vw, 124px); max-width: 720px }
.banner .eyebrow { color: var(--linen) }
.banner .eyebrow::before { background: var(--petal) }
.banner h2 { color: #fff }
.banner h2 em { color: var(--linen) }
.banner p { color: rgba(251, 246, 241, .88); margin-top: 16px; max-width: 54ch }
.banner__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px }
.banner .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45) }
.banner .btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff }

/* ── Avis ─────────────────────────────────────────────────────────────────── */
.reviews { padding-block: clamp(64px, 9vw, 104px) }
.reviews__head { text-align: center; max-width: 720px; margin: 0 auto 40px }
.reviews__head .eyebrow { justify-content: center }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; position: relative; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.review::before { content: "“"; position: absolute; top: 6px; right: 24px; font-family: var(--serif); font-size: 76px; line-height: 1; color: var(--crust); opacity: .16 }
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(194, 48, 90, .3) }
.review p { font-size: 16.5px; line-height: 1.6 }
.review footer { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--leaf) }
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px }
.chip { background: var(--linen); border-radius: 999px; padding: 10px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: transform var(--t) }
.chip:hover { transform: translateY(-2px) }
.chip b { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-right: 5px }
.chips__note { background: transparent; color: var(--muted); font-weight: 400 }

/* ── Réservation ──────────────────────────────────────────────────────────── */
.booking { background: var(--ink); color: var(--on-dark); padding-block: clamp(70px, 10vw, 118px) }
.booking__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 64px); align-items: start }
.booking .eyebrow { color: var(--linen) }
.booking .eyebrow::before { background: var(--petal) }
.booking h2 { color: #fff }
.booking h2 em { color: var(--linen) }
.booking__text > p { color: var(--on-dark-muted); margin-top: 18px; max-width: 48ch }
.booking__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px }
.booking__points li { padding-left: 26px; position: relative }
.booking__points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--crust) }
.booking__points b { display: block; font-size: 16.5px; color: #fff }
.booking__points span { display: block; color: var(--on-dark-muted); font-size: 15px; margin-top: 2px }
.booking__phone { margin-top: 26px; font-size: 16px; color: var(--on-dark-muted) }
.booking__phone a { font-family: var(--serif); font-size: 25px; font-weight: 400; color: var(--linen); text-decoration: none; margin-left: 6px; transition: color var(--t) }
.booking__phone a:hover { color: #fff }

.booking__form { background: var(--card); color: var(--text); border-radius: var(--r); padding: clamp(26px, 3.6vw, 38px); box-shadow: var(--shadow-lg) }
.field { margin-bottom: 16px }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px }
.field__opt { font-weight: 400; color: var(--muted) }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.5 var(--sans); color: var(--text);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field textarea { resize: vertical; min-height: 86px }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crust); background: var(--card); box-shadow: 0 0 0 4px var(--crust-soft) }
.field--hp { position: absolute; left: -9999px }
.booking__legal { font-size: 13.5px; color: var(--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(--leaf) }
.booking__msg.err { color: var(--crust) }

/* ── Nous trouver ─────────────────────────────────────────────────────────── */
.contact { padding-block: clamp(64px, 9vw, 104px) }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 60px); align-items: start }
.contact__lede { color: var(--muted); margin-top: 16px; max-width: 46ch }
.contact__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px }
.contact__list li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dotted var(--line) }
.contact__list b { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.contact__list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); transition: color var(--t), border-color var(--t) }
.contact__list a:hover { color: var(--crust); border-color: var(--crust) }
.hours { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 16px }
.hours th, .hours td { text-align: left; padding: 11px 0; border-bottom: 1px dotted var(--line); font-weight: 400 }
.hours td { text-align: right; font-variant-numeric: tabular-nums }
.hours td.closed { color: var(--muted) }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--crust) }
.hours__exc { list-style: none; margin: 16px 0 0; padding: 14px 18px; background: var(--crust-soft); border-radius: var(--r-sm); font-size: 14.5px; display: grid; gap: 6px }
.contact__note { margin-top: 20px; font-size: 15px; color: var(--muted) }
.contact__map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); min-height: 420px; height: 100% }
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 8vw, 88px) }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px }
.foot__brand p { color: var(--on-dark-muted); font-size: 15.5px; margin-top: 18px; max-width: 34ch }
.foot h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--linen); margin-bottom: 14px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--on-dark-muted) }
.foot a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--t) }
.foot a:hover { color: #fff }
.foot__bar { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 64px); padding-block: 24px; border-top: 1px solid rgba(251, 246, 241, .14); font-size: 13.5px; color: var(--on-dark-muted) }
.foot__credit a { color: var(--linen) }

/* ── 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 }
  .foot__grid { grid-template-columns: 1fr 1fr }
  .contact__map { min-height: 320px }
  .contact__map iframe { min-height: 320px }
}
@media (max-width: 760px) {
  .burger { display: grid }
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 24px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t);
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto }
  .nav a { padding: 15px 0; border-bottom: 1px dotted var(--line); font-size: 17px }
  .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: 6px }
  .price { align-self: flex-start }
  .contact__list li { grid-template-columns: 1fr; gap: 2px }
  .hours td { text-align: left }
  .hero__proof { gap: 10px }
  /* Sur deux lignes, une pastille centrée verticalement flotte au milieu du surtitre : on la cale en haut. */
  .eyebrow { align-items: flex-start }
  .eyebrow::before { margin-top: 5px }
}







/* ── LE FILET DORÉ ────────────────────────────────────────────────────────────
   Les deux traits qui encadrent « STEAK HOUSE » sur leur carte, repris en
   séparation de section. Un seul ornement dans toute la page. */
.filet {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linen) 18%, var(--linen) 82%, transparent);
  opacity: .75;
  margin-block: 0;
}
.filet--large { height: 3px; background: linear-gradient(to right, transparent, var(--linen) 25%, var(--linen) 75%, transparent) }