/* ════════════════════════════════════════════════════════════════════════════
   Restaurant Zélé — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Deux objets dictent tout, et ils existent vraiment dans
   la maison. Le premier est l'enseigne : un lièvre bondissant gravé comme une
   planche de naturaliste du XIXe, à l'encre, dans une arche, sur un papier
   vieilli. Le second est le tableau noir — il n'y a aucun menu imprimé ici, les
   plats et les cocktails sont écrits à la craie sur deux grands panneaux vissés
   au mur de brique.

   Le site est donc fait de ces deux matières, et de rien d'autre : un PAPIER
   chaud, légèrement sépia, échantillonné sur le fond de l'enseigne (#ece2cb), et
   une ARDOISE vert-noir (#1a1c18). Le trait de l'enseigne donne l'encre. La
   brique du mur donne l'unique accent (#a8432c), et la vigne qui court sous le
   lièvre donne le vert secondaire. Aucune autre couleur n'entre.

   Titres en Bodoni Moda — un didone à fort contraste, exactement le registre de
   la plaque gravée et des capitales « ZÉLÉ » de l'enseigne. Texte en Spectral,
   un romain chaud qui tient bien le français.

   Langage de formes : la PLANCHE. Tout est à angle vif (--r : 3 px, comme un
   panneau vissé au mur) à une exception, qui est la règle : toute photographie
   encadrée reprend l'arche de l'enseigne (--arch), bord supérieur arrondi et
   base plate. Les cartes, les champs et les boutons restent carrés. Et le
   surtitre ne porte pas de pastille mais un tiret cadratin, comme les en-têtes
   du tableau : « — Entrées — ».
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #1a1c18;               /* ardoise : le vert-noir des deux tableaux */
  --ink-soft: #262a23;
  --paper: #ece2cb;             /* le papier vieilli de l'enseigne */
  --cream: #e3d7ba;             /* bande douce, un cran plus soutenue */
  --card: #f4ecd9;
  --line: #d2c3a1;
  --text: #211f18;
  --muted: #736b58;
  --crust: #a8432c;             /* la brique du mur, et le rouge des fraises gravées */
  --crust-deep: #86301d;
  --crust-soft: #efdcd3;
  --leaf: #5e6b45;              /* le vert de la vigne sous le lièvre */
  --linen: #cfc4a4;             /* craie éteinte, pour les accents sur fond sombre */
  --petal: #c8b98f;             /* craie chaude : le second marqueur sur fond sombre */
  --on-dark: #f1ede0;           /* craie */
  --on-dark-muted: #a9a492;
  --shadow: 0 1px 2px rgba(26, 28, 24, .06), 0 10px 26px -14px rgba(26, 28, 24, .22);
  --shadow-lg: 0 2px 8px rgba(26, 28, 24, .08), 0 30px 70px -32px rgba(26, 28, 24, .38);
  --r: 3px;
  --r-sm: 2px;
  --arch: 46% 46% 3px 3px / 30% 30% 3px 3px;   /* l'arche de l'enseigne */
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Spectral", Georgia, "Times New Roman", serif;
  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --t: 300ms cubic-bezier(.22, 1, .36, 1);   /* la durée de toutes les micro-interactions */
  --main: "Caveat", "Bradley Hand", "Segoe Script", cursive;  /* la main qui écrit au tableau */
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj4KPGZpbHRlciBpZD0iZyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMjIiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwLjYyIDAuMyAwLjA4IDAgMCIvPgo8ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSJ0YWJsZSIgdGFibGVWYWx1ZXM9IjAgMC4xMiAwLjYyIDAuOTQgMSAxIDEiLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsdGVyPSJ1cmwoI2cpIi8+Cjwvc3ZnPg==");   /* le grain de la craie, posé en masque sur le texte */
  --tooth: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj4KPGZpbHRlciBpZD0iYiIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNyIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMC41IDAuMyAwLjIgMCAwIi8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsdGVyPSJ1cmwoI2IpIi8+Cjwvc3ZnPg==");   /* le grain de l'ardoise elle-même */
}

/* ── 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: 500; line-height: 1.06; letter-spacing: -.012em; margin: 0; text-wrap: balance; font-optical-sizing: auto }
h1 { font-size: clamp(42px, 7.2vw, 78px) }
h2 { font-size: clamp(30px, 4.4vw, 50px) }
h3 { font-size: 21px; font-weight: 500; letter-spacing: -.005em }
h1 em, h2 em { font-style: italic; font-weight: 400; 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 }

/* ── La craie ─────────────────────────────────────────────────────────────────
   Trois effets qui se cumulent, et aucun n'est une image : le texte est percé par
   un champ de bruit (la craie saute sur le relief du tableau, elle ne s'efface
   pas — le masque reste opaque sur les deux tiers de sa course), il porte un halo
   de poussière, et la surface qui le reçoit a le grain de l'ardoise.

   Deux règles tiennent l'ensemble, et elles ne souffrent aucune exception :
   sur le PAPIER c'est gravé — didone, encre, pas de grain ; sur l'ARDOISE c'est
   écrit à la craie, et ce qui serait écrit à la main en salle l'est aussi ici.
   ──────────────────────────────────────────────────────────────────────────── */

/* Tout ce qui est posé sur une ardoise est écrit à la craie. On vise les éléments de
   texte un par un : masquer un conteneur percerait aussi son fond. */
.hero__panel :is(h1, .lede, .eyebrow),
.board :is(p),
.menus :is(h2, .eyebrow, .section-head__note, .carte__intro, .carte__h, .carte__secnote, .carte__note, figcaption),
.menus .dishes :is(b, small, .price),
.banner__content :is(h2, .eyebrow, p),
.booking__text :is(h2, .eyebrow, p, b, span) {
  -webkit-mask-image: var(--grain); mask-image: var(--grain);
  -webkit-mask-size: 300px 300px; mask-size: 300px 300px;
  text-shadow: 0 0 .6px rgba(241, 237, 224, .50), 0 1px 12px rgba(241, 237, 224, .15);
}
/* L'échelle du grain suit celle des lettres : de gros éclats dans un titre, de la
   poussière fine dans une liste de plats. Un grain unique ferait du bruit de photo. */
.menus .dishes :is(b, small, .price), .menus :is(.carte__intro, .carte__note, .section-head__note, figcaption),
.hero__panel .lede, .banner__content p, .booking__text :is(p, b, span) {
  -webkit-mask-size: 118px 118px; mask-size: 118px 118px;
}
/* Qui demande un fort contraste reçoit de la craie neuve : ni trou ni poussière. */
@media (prefers-contrast: more) {
  .hero__panel :is(h1, .lede, .eyebrow), .board :is(p),
  .menus :is(h2, .eyebrow, .section-head__note, .carte__intro, .carte__h, .carte__secnote, .carte__note, figcaption),
  .menus .dishes :is(b, small, .price), .banner__content :is(h2, .eyebrow, p),
  .booking__text :is(h2, .eyebrow, p, b, span) {
    -webkit-mask-image: none; mask-image: none; text-shadow: none;
  }
}
/* Le prix et le petit texte portent moins de poussière : trop de halo les rendrait flous. */
.menus .dishes :is(small, .price), .menus :is(.carte__note, figcaption), .booking__text span {
  text-shadow: 0 0 1px rgba(241, 237, 224, .22);
}

/* LA RÈGLE : sur le papier, c'est gravé ; sur l'ardoise, c'est écrit à la main.
   Chaque titre d'une section sombre bascule donc sa seconde moitié dans la main de la
   maison, et les en-têtes du tableau sont de la même écriture qu'en salle. */
.hero h1 em, .menus h2 em, .banner h2 em, .booking h2 em {
  font-family: var(--main); font-style: normal; font-weight: 600;
  font-size: 1.22em; line-height: .92; letter-spacing: .005em; padding-right: .06em;
}
/* Le trait de craie sous « à la craie. ». Il est posé en fond du mot plutôt qu'en
   pseudo-élément : un fond suit l'élément en ligne sans toucher à la mise en page, et
   il reçoit le même masque de grain que la lettre — donc il s'use comme elle. */
.hero h1 em {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTQiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMi41IDguMUM0NCA1LjIgOTYgOS40IDE0OCA2LjNjNDAtMi40IDc4IC42IDExMiAyLjEgMTQgLjYgMjggLjQgMzcuNS0uOSAuOC0uMSAxLjMgMS41IC40IDEuOS05LjggNC0yNSA0LjYtMzkgNC4xLTM0LTEuMy03MS00LjEtMTEwLTEuOEM5NiAxMy44IDQ0IDkuOCAyLjYgMTEuNmMtMS4xIC4xLTEuMi0zLjQtLjEtMy41WiIvPgo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-size: 100% .12em;
  background-position: center bottom;
  /* inline-block : sur un élément en ligne, la boîte de fond dépend des métriques de
     la police et le trait se perdait sous la ligne. Le mot tient de toute façon sur sa
     propre ligne — il est précédé d'un retour naturel. */
  display: inline-block;
  padding-bottom: .16em;
}

.board .board__dish { font-family: var(--main); font-style: normal; font-weight: 600; font-size: clamp(36px, 5.4vw, 54px); line-height: 1.04; padding-right: .1em }
.board .board__price { font-family: var(--main); font-weight: 600; font-size: 34px; padding-right: .08em }
.menus .carte__h { font-family: var(--main); font-weight: 600; font-size: 29px; letter-spacing: .01em }
/* Sur le tableau, le nom du plat et son prix sont de la même main que les en-têtes.
   Seule la description reste en romain : c'est la seule ligne qu'on lit vraiment vite. */
.menus .dish b { font-family: var(--main); font-weight: 600; font-size: 25px; letter-spacing: .005em; line-height: 1.15; padding-right: .14em }
.menus .price { font-family: var(--main); font-weight: 600; font-size: 25px; letter-spacing: .01em; padding-right: .1em }
/* L'en-tête du tableau porte ses tirets, exactement comme sur le mur : « — Entrées — ». */
.menus .carte__h::before { content: "— "; color: var(--petal); opacity: .7 }
.menus .carte__h::after { content: " —"; color: var(--petal); opacity: .7; margin-right: auto }

/* Le grain de l'ardoise sur les quatre surfaces sombres. */
.hero__panel, .board, .menus, .booking {
  background-image: var(--tooth);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  background-position: center;
}

/* Surtitre : pastille pleine + petites capitales. Le marqueur de toute la page. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf); margin: 0 0 14px;
}
/* Le tiret cadratin des en-têtes du tableau noir : « — Entrées — ». Il remplace
   la pastille et se retrouve, décliné en craie, sur chaque fond sombre. */
.eyebrow::before { content: "—"; font-family: var(--serif); font-size: 15px; line-height: 1; color: var(--crust); font-weight: 400; letter-spacing: 0; flex: none }

/* ── É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(250px, 52vw); height: auto; animation: splashIn .8s cubic-bezier(.22, 1, .36, 1) both }
@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(236, 226, 203, .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(26, 28, 24, .5); background: rgba(236, 226, 203, .95) }
.top__row { display: flex; align-items: center; gap: 20px; min-height: 76px }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; transition: transform var(--t) }
.brand:hover { transform: translateY(-1px) }
.brand__logo { width: auto; height: 50px }
.brand__name { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); line-height: 1 }
.brand__name small { display: block; font-size: 9.5px; letter-spacing: .22em; color: var(--muted); margin-top: 5px }
.brand--foot { background: var(--paper); border-radius: var(--r-sm); padding: 10px 14px }
.brand--foot .brand__logo { height: 58px }
.brand--foot .brand__name { color: var(--on-dark) }
.brand--foot .brand__name small { color: var(--on-dark-muted) }

.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: var(--r); padding: 12px 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(168, 67, 44, .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 30px; border-radius: var(--r); border: 1px solid transparent;
  font: 500 15.5px/1 var(--sans); letter-spacing: .04em; 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(134, 48, 29, .95) }
.btn--crust:hover { background: var(--crust-deep); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(134, 48, 29, .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(33, 31, 24, .3) }
.btn--ghost:hover { border-color: var(--ink); background: rgba(33, 31, 24, .06); 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(26, 28, 24, .93) 0%, rgba(26, 28, 24, .72) 42%, rgba(26, 28, 24, .20) 78%),
    linear-gradient(to top, rgba(26, 28, 24, .92), rgba(26, 28, 24, .34) 55%, rgba(26, 28, 24, .50));
}
.hero__inner { padding: clamp(84px, 13vh, 150px) var(--pad) clamp(64px, 10vh, 104px); max-width: 980px }
/* Le panneau du héros EST un tableau noir : fond d'ardoise, filet de craie en
   retrait et quatre vis aux angles. C'est le même objet que celui du mur. */
.hero__panel {
  position: relative; background-color: rgba(18, 20, 17, .92); padding: clamp(30px, 4.4vw, 54px);
  border-radius: var(--r); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
}
.hero__panel::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(241, 237, 224, .17); border-radius: 1px; pointer-events: none }
.hero__panel::after {
  content: ""; position: absolute; inset: 20px; pointer-events: none; border-radius: 1px;
  background:
    radial-gradient(circle at 0 0, rgba(241, 237, 224, .34) 1.6px, transparent 2px),
    radial-gradient(circle at 100% 0, rgba(241, 237, 224, .34) 1.6px, transparent 2px),
    radial-gradient(circle at 0 100%, rgba(241, 237, 224, .34) 1.6px, transparent 2px),
    radial-gradient(circle at 100% 100%, rgba(241, 237, 224, .34) 1.6px, transparent 2px);
}
.hero .eyebrow { color: var(--petal) }
.hero .eyebrow::before { color: var(--petal) }
.hero h1 { color: var(--petal) }
.hero h1 em { color: #fff }
.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: #9ab47a; box-shadow: 0 0 0 4px rgba(154, 180, 122, .22) }
.hero__status.is-closed .dot { background: var(--crust); box-shadow: 0 0 0 4px rgba(168, 67, 44, .26) }
.lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: rgba(241, 237, 224, .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: 26px; padding-inline: 4px; font-size: 14.5px; color: rgba(241, 237, 224, .84) }
.hero__proof b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--on-dark); margin-right: 5px; font-variant-numeric: tabular-nums }
.hero__proof i { width: 14px; height: 1px; background: rgba(241, 237, 224, .42) }

/* ── 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; border-radius: var(--arch); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink) }
.slate__photo figcaption { padding: 14px 20px 18px; font-size: 14px; color: var(--on-dark-muted); text-align: center }
.slate__photo img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3.2 }
.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-color: #1d2620;
  color: var(--on-dark); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(241, 237, 224, .10);
}
.board::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241, 237, 224, .18); border-radius: 1px; pointer-events: none }
/* Le voile de craie : ce que laisse une éponge passée sur un tableau. */
.board::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background:
    radial-gradient(60% 40% at 18% 22%, rgba(241, 237, 224, .07), transparent 70%),
    radial-gradient(50% 36% at 82% 72%, rgba(241, 237, 224, .05), transparent 70%);
}
.board > * { position: relative; z-index: 1 }
.board__kicker { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--petal) }
.board__dish { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; margin-top: 12px; color: var(--on-dark) }
.board__desc { color: var(--on-dark-muted); margin-top: 12px; max-width: 48ch }
.board__price { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--petal); margin-top: 18px; font-variant-numeric: tabular-nums }
.board__price:empty { display: none }
.board__note { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(241, 237, 224, .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(168, 67, 44, .10), transparent 70%) }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(168, 67, 44, .32) }
.value:hover::after { opacity: 1 }
.value h3 { margin-bottom: 10px }
.value p { color: var(--muted); font-size: 16px }

/* ── La carte ─────────────────────────────────────────────────────────────── */
.menus { background-color: var(--ink); color: var(--on-dark); padding-block: clamp(70px, 10vw, 118px) }
.menus .eyebrow { color: var(--linen) }
.menus .eyebrow::before { color: var(--petal) }
.menus h2 { color: var(--linen) }
.menus h2 em { color: #fff }
.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: 500 15px/1 var(--sans); letter-spacing: .04em; padding: 13px 26px; border-radius: var(--r); border: 1px solid rgba(241, 237, 224, .26); 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(--on-dark); color: var(--ink); border-color: var(--on-dark) }
.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(241, 237, 224, .2); margin-bottom: 6px }
.tag { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--linen); padding: 4px 10px; border-radius: var(--r) }
.carte__secnote { color: var(--on-dark-muted); font-size: 15px; margin: 10px 0 0 }
.dishes + .carte__h { margin-top: 38px }
.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(241, 237, 224, .22); border-radius: var(--r-sm); transition: background var(--t) }
.dishes li:hover { background: rgba(241, 237, 224, .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: 500; font-size: 19px; color: var(--petal); 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(--arch); overflow: hidden; background: rgba(241, 237, 224, .06) }
.carte__photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover }
.carte__photo figcaption { padding: 13px 18px 16px; font-size: 14px; color: var(--on-dark-muted) }
.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(--arch); overflow: hidden; box-shadow: var(--shadow-lg) }
.split__media img { width: 100%; aspect-ratio: 4 / 4.2; 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: var(--r);
  display: grid; place-items: center; background: var(--crust); color: var(--paper); font: 500 15px/1 var(--serif);
}
.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(330px, 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; 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: 20px; font-weight: 500 }
.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(26, 28, 24, .94) 12%, rgba(26, 28, 24, .74) 52%, rgba(26, 28, 24, .36)) }
.banner__content { padding-block: clamp(70px, 11vw, 124px); max-width: 720px }
.banner .eyebrow { color: var(--linen) }
.banner .eyebrow::before { color: var(--petal) }
.banner h2 { color: var(--linen) }
.banner h2 em { color: #fff }
.banner p { color: rgba(241, 237, 224, .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: 16px; right: 24px; font-family: var(--serif); font-size: 58px; line-height: 1; color: var(--crust); opacity: .18 }
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(168, 67, 44, .3) }
.review p { font-size: 16.5px; line-height: 1.6 }
.review footer { margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf) }
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px }
.chip { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 20px; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: transform var(--t) }
.chip:hover { transform: translateY(-2px) }
.chip b { font-family: var(--serif); font-size: 19px; font-weight: 500; margin-right: 5px; font-variant-numeric: tabular-nums }
.chips__note { background: transparent; border-color: transparent; color: var(--muted); font-weight: 400 }

/* ── Réservation ──────────────────────────────────────────────────────────── */
.booking { background-color: 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 { color: var(--petal) }
.booking h2 { color: var(--linen) }
.booking h2 em { color: #fff }
.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: 13px; width: 14px; height: 1.5px; 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: 24px; font-weight: 500; color: var(--petal); 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(241, 237, 224, .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 { gap: 14px }
  .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: 2px }
}