/* ════════════════════════════════════════════════════════════════════════════
   Tingz Café — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Tout vient de leur salle, photographiée sur leur fiche
   Tourisme Centre-du-Québec : un mur VERT SAUGE (#8B9189, échantillonné), une
   banquette capitonnée en CUIR BORDEAUX (#2A1513 dans l’ombre), un sol en
   DAMIER noir et blanc, du bois chaud, et au mur une enseigne au NÉON BLANC qui
   écrit « Tingz Café » à la main. Leur page Facebook dit « vibes rétro » : le
   damier et le néon sont donc des citations, pas des ornements.

   LE LOGO EST LEUR VRAIE ENSEIGNE, extraite de la photo par seuillage (le néon
   est le seul blanc très lumineux et peu saturé de l’image), détourée des
   reflets, et posée en blanc sur le bordeaux. Rien n’a été redessiné : c’est
   littéralement leur néon.

   LE DAMIER PORTE DE L’INFORMATION, il ne décore pas. Il ne sert qu’aux
   séparations de section — une bande de deux rangs qui reprend le sol — et
   jamais sous du texte.

   LA RÈGLE DE FOND. Leur phrase est « 100 % sans gluten ». Ce n’est pas une
   option du menu, c’est toute la cuisine : la page doit le dire une fois, haut
   et fort, et ne plus jamais y revenir plat par plat.

   Titres en Fraunces — des empattements souples, un peu rétro, qui tiennent la
   même époque que le néon ; texte en Outfit.

   Langage de formes : L’ARRONDI GÉNÉREUX, comme le capitonnage de la banquette
   et les boucles de l’enseigne. Rayon large (--r : 28px), jamais d’angle vif.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #2A1513;               /* le cuir de la banquette, dans l’ombre */
  --ink-soft: #3E1F1C;
  --paper: #F6F2E9;             /* crème chaud */
  --cream: #ECE5D6;
  --card: #ffffff;
  --line: #E0D7C6;
  --text: #2E1C19;
  --muted: #7A6A62;
  --crust: #8B3A33;             /* bordeaux d’action, remonté pour porter du blanc */
  --crust-deep: #6E2F2B;
  --crust-soft: #F6E6E2;
  --leaf: #8B9189;              /* le vert sauge du mur — la couleur signature */
  --linen: #C9A227;             /* un doré chaud, pour les gammes et les étiquettes */
  --petal: #B8BFB4;             /* sauge clair */
  --on-dark: #F6F2E9;
  --on-dark-muted: #C3B5AC;
  --shadow: 0 1px 2px rgba(42, 21, 19, .05), 0 12px 30px -18px rgba(42, 21, 19, .26);
  --shadow-lg: 0 2px 8px rgba(42, 21, 19, .08), 0 34px 74px -36px rgba(42, 21, 19, .4);
  --r: 28px;
  --r-sm: 16px;
  --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 MUR sur lequel l'enseigne est réellement accrochée : vert sauge,
   avec le néon en blanc par-dessus. Sur le fond crème habituel, un néon blanc sur du blanc
   ne se voyait pas du tout. La halo doux derrière reproduit la lueur du tube sur la peinture. */
.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--leaf);
  background-image: radial-gradient(42% 38% at 50% 48%, rgba(255,255,255,.22), transparent 70%);
  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: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 0 38px rgba(255,255,255,.3));
}
@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 ──────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 244, .82); backdrop-filter: blur(14px); transition: box-shadow var(--t), background var(--t) }
.top.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 16px 30px -28px rgba(43, 33, 29, .5); background: rgba(251, 248, 244, .95) }
.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 }

/* L'enseigne au néon, extraite de la photo de leur salle, tient lieu de logo : à Tingwick
   c'est elle qu'on reconnaît, pas un nom composé. Elle est posée seule dans l'en-tête, sans
   texte à côté — le nom est déjà écrit dedans. */
/* Les traits du néon sont fins : sous 40 px ils deviennent des cheveux et le nom
   ne se lit plus. On ne descend donc jamais en dessous. */
.brand__mark { height: 46px; width: auto; flex: none; display: block }
.brand--foot .brand__mark { height: 54px }
@media (max-width: 560px) { .brand__mark { height: 38px } }
/* Sur fond clair, le néon blanc disparaîtrait : on le fonce en bordeaux par filtre, ce qui
   évite d'avoir à maintenir deux fichiers. */
.top .brand__mark,
.foot .brand__mark { filter: brightness(0) saturate(100%) invert(22%) sepia(31%) saturate(1402%) hue-rotate(327deg) brightness(93%) contrast(89%) }
.foot .brand__mark { filter: none }

/* 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 }
}


/* ── LA BANDE DE DAMIER ───────────────────────────────────────────────────────
   Le sol de la salle, cité en séparation de section. Deux rangs de 18 px, jamais
   sous du texte, jamais en fond d’image. C’est le seul motif de la page. */
.damier {
  height: 36px;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  background-color: var(--paper);
  opacity: .9;
}
@media (max-width: 640px) {
  .damier { height: 24px; background-size: 24px 24px; background-position: 0 0, 12px 12px }
}