/* Ji Fu, Les Breuleux · site écrit à la main (10.10.2026), sans bibliothèque.
   La maison : la pierre froide de son bassin, le vert de ses boiseries, l'ardoise de ses sept plats.
   La signature : LA LIGNE DE PARTAGE. La maison a deux cartes ; le site les partage d'une seule ligne
   brisée (la géométrie de la glace qui se fend), entre le vert (côté chinois) et l'ardoise (côté japonais).
   Elle sert trois fois : à l'accueil (elle se trace), au geste (elle s'incline vers le versant survolé),
   et sur la carte (elle souligne l'onglet du versant à l'écran).
   Règle : l'état par défaut de chaque élément animé EST l'état final. Sans JS, sous mouvement réduit,
   ou si un script tombe, la page est complète et immobile. */

:root {
  color-scheme: only light;
  --pierre-froide: #ecefea;
  --carte-fond: #f5f7f3;
  --filet-clair: #d5dbd6;
  --encre: #16211c;
  --gris: #4d5a53;
  --vert: #132720;
  --vert-clair: #1b3329;
  --ardoise: #2a332f;
  --ardoise-clair: #39433e;
  --pierre: #93a099;
  --pierre-clair: #c3ccc6;
  --papier: #f2f5f0;
  --texte-sombre: #e4ebe6;
  --filet: rgb(147 160 153 / .28);
  --cinabre: #af1917;
  --cinabre-clair: #ef7a73;
  --voile: 16, 26, 22;
  --b4g-fond: #E9F2FC;
  --b4g-bord: #0070D6;
  --b4g-cyan-1: #01DDFB;
  --b4g-cyan-2: #01B8F8;
  --b4g-encre: #06202A;

  --f-titre: Archivo, "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-texte: Spectral, Georgia, "Times New Roman", serif;

  --c-sortie: cubic-bezier(.23, 1, .32, 1);
  --c-rideau: cubic-bezier(.77, 0, .175, 1);
  --c-lent: cubic-bezier(.25, .1, .25, 1);

  --nav-h: 57px;
  --onglets-h: 0px;
  --sommaire-h: 0px;
  --barre-bas: 0px;
  --gout: 16px;
  --section: 72px;
  --large: 1200px;
}
@media (min-width: 960px) {
  :root { --nav-h: 65px; --gout: 40px; --section: 120px; }
}
@media (max-width: 959px) {
  :root { --barre-bas: calc(61px + env(safe-area-inset-bottom)); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* La barre du haut, les onglets collants de la carte et l'onglet du bas ne cachent jamais ce qui reçoit le focus. */
  scroll-padding-top: calc(var(--nav-h) + var(--onglets-h) + var(--sommaire-h) + 14px);
  scroll-padding-bottom: calc(var(--barre-bas) + 14px);
}
body {
  margin: 0; background: var(--pierre-froide); color: var(--encre);
  font: 400 17px/1.6 var(--f-texte); font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 960px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--f-titre); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
p, figure, ul, ol, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cinabre); outline-offset: 3px; }
.sombre :focus-visible { outline-color: var(--pierre-clair); }
.cache-lecteur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Les heures, les prix et le numéro : chiffres alignés, jamais coupés en fin de ligne. */
.chiffres { font-family: var(--f-titre); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 70; background: var(--vert); color: var(--papier);
  padding: 12px 18px; font: 500 16px var(--f-titre); text-decoration: none;
}
.evitement:focus { top: 12px; }
.contenu {
  max-width: var(--large); margin: 0 auto;
  padding-left: max(var(--gout), env(safe-area-inset-left)); padding-right: max(var(--gout), env(safe-area-inset-right));
}
.section { padding: var(--section) 0; }
.sombre { background: linear-gradient(168deg, var(--vert-clair) 0%, var(--vert) 100%); color: var(--texte-sombre); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--papier); }
.ardoise { background: linear-gradient(168deg, var(--ardoise-clair) 0%, var(--ardoise) 100%); color: #e6eae7; }
.ardoise h2, .ardoise h3 { color: #f4f6f4; }
.ardoise :focus-visible { outline-color: var(--pierre-clair); }

/* Le rang : un titre aligné à gauche, un filet qui file jusqu'au bord (jamais centré : c'est l'autre maison). */
.rang { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.rang::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--filet-clair); transform-origin: left center; }
.sombre .rang::after, .ardoise .rang::after { background: var(--filet); }
.titre-2 { font-size: clamp(30px, 7vw, 54px); }
.chapeau { margin-top: 18px; max-width: 58ch; color: var(--gris); }
.sombre .chapeau { color: #cfdad4; }
.ardoise .chapeau { color: #ccd3cf; }

/* ---------- Boutons : angles vifs, casse de phrase ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 0;
  font: 500 16px/1.1 var(--f-titre); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms, transform 100ms var(--c-sortie);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-plein { background: var(--pierre-clair); border-color: var(--pierre-clair); color: var(--vert); }
.btn-plein:hover { background: var(--papier); border-color: var(--papier); }
.btn-fantome { border-color: var(--encre); color: var(--encre); }
.btn-fantome:hover { background: var(--encre); color: var(--pierre-froide); }
.sombre .btn-fantome, .ardoise .btn-fantome { border-color: var(--pierre); color: var(--pierre-clair); }
.sombre .btn-fantome:hover, .ardoise .btn-fantome:hover { background: var(--pierre); color: var(--vert); }
.btn-vert { background: var(--vert); border-color: var(--vert); color: var(--papier); }
.btn-vert:hover { background: var(--ardoise); border-color: var(--ardoise); }
.fleche { display: inline-block; transition: transform 200ms var(--c-sortie); }
a:hover .fleche, a:focus-visible .fleche { transform: translateX(4px); }
.lien-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 600 17px var(--f-titre); text-decoration: none; color: var(--cinabre); }
.lien-tel:hover { text-decoration: underline; text-underline-offset: 5px; }
.sombre .lien-tel, .heros .lien-tel { color: var(--cinabre-clair); }
.lien-tel svg { width: 18px; height: 18px; flex: none; }

/* Commander sur Best4GoEat (BG, 10.10 : le premier bouton du héros, et la pub de Best4GoEat avec). */
.btn-b4g, .btn-commander {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--b4g-cyan-1), var(--b4g-cyan-2)); color: var(--b4g-encre);
  text-decoration: none; transition: transform 120ms var(--c-sortie), box-shadow 160ms;
}
.btn-b4g { min-height: 48px; padding: 0 22px; font: 600 16px/1 var(--f-titre); }
.btn-commander { min-height: 54px; padding: 0 26px; font: 600 17px/1.1 var(--f-titre); box-shadow: 0 6px 18px rgba(1, 184, 248, .22); }
.btn-commander:hover, .btn-b4g:hover { box-shadow: 0 8px 26px rgba(1, 184, 248, .38); }
.btn-b4g:active, .btn-commander:active { transform: translateY(1px); }
.btn-b4g svg, .btn-commander svg { width: 20px; height: 20px; flex: none; }
.b4g-mot { font-family: Poppins, var(--f-titre); font-style: italic; font-weight: 900; letter-spacing: -.02em; }
/* Le logo Best4GoEat dans le bouton (BG : « quand tu mets Best4GoEat, toujours aussi le logo quand il y a un peu plus d'espace »).
   Le cyan du logo se perdrait sur un bouton cyan : le bouton passe à l'encre, liseré cyan de 2 px, halo cyan. L'onglet du bas
   (téléphone) garde le mot seul, sur son fond cyan. */
.btn-b4g, .btn-commander { background: var(--b4g-encre); color: #fff; border: 2px solid var(--b4g-cyan-1); box-shadow: 0 6px 20px rgba(1, 184, 248, .32); }
.btn-commander:hover, .btn-b4g:hover { background: #0B2E3B; box-shadow: 0 8px 28px rgba(1, 184, 248, .48); }
.btn-commander { gap: 12px; padding: 0 20px 0 26px; }
.btn-b4g .b4g-logo-bouton, .btn-commander .b4g-logo-bouton { width: auto; height: 40px; margin: -4px 0; flex: none; overflow: visible; }
.b4g .btn-b4g { gap: 12px; }
/* Le dégradé se pose sur toutes les surfaces : anneau blanc et halo sombre, visibles partout. */
.btn-b4g:focus-visible, .btn-commander:focus-visible, .bb-commander:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(var(--voile), .85);
}

/* ---------- La barre « versant » : le nom, l'altitude, une seule ligne à 390 px ---------- */
.versant { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--vert); border-bottom: 1px solid var(--filet); padding-top: env(safe-area-inset-top); }
.versant-in {
  position: relative; height: 56px; max-width: var(--large); margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding-left: max(var(--gout), env(safe-area-inset-left)); padding-right: max(var(--gout), env(safe-area-inset-right));
}
.marque { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 12px; text-decoration: none; color: var(--papier); white-space: nowrap; }
.marque b { font: 600 23px/1 var(--f-titre); letter-spacing: -.025em; }
.marque small { font: 500 13px/1 var(--f-titre); color: var(--pierre); font-variant-numeric: lining-nums tabular-nums; }
.versant :focus-visible { outline-color: var(--pierre-clair); }
.versant .lien-tel { color: var(--cinabre-clair); }
.nav-liens, .nav-b4g, .nav-tel { display: none; }
.nav-mobile { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lien-carte { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 500 16px/1 var(--f-titre); color: var(--pierre-clair); text-decoration: none; border-bottom: 2px solid transparent; }
.lien-carte[aria-current="page"] { color: var(--papier); border-bottom-color: var(--cinabre-clair); }
.menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--filet); color: var(--papier); font: 500 16px/1 var(--f-titre); cursor: pointer; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 18px; height: 18px; }
.menu[open] > summary { background: var(--vert-clair); }
.menu-panneau {
  position: absolute; right: max(var(--gout), env(safe-area-inset-right)); top: calc(100% + 1px); min-width: 230px; padding: 6px 0;
  background: var(--vert-clair); border: 1px solid var(--filet); box-shadow: 0 18px 40px rgba(var(--voile), .45);
}
.menu-panneau a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; color: var(--papier); text-decoration: none; font: 500 17px/1 var(--f-titre); }
.menu-panneau a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cinabre-clair); }
.menu-panneau a:hover { background: rgba(255, 255, 255, .05); }
@media (max-width: 359px) { .marque small { display: none; } }
@media (min-width: 960px) {
  .versant-in { height: 64px; gap: 22px; }
  .marque b { font-size: 26px; }
  .nav-mobile { display: none; }
  .nav-liens { display: flex; gap: 26px; margin-left: auto; }
  .nav-liens a { display: inline-flex; align-items: center; min-height: 44px; font: 500 16px/1 var(--f-titre); color: var(--pierre-clair); text-decoration: none; border-bottom: 2px solid transparent; }
  .nav-liens a:hover { color: var(--papier); }
  .nav-liens a[aria-current="page"] { color: var(--papier); border-bottom-color: var(--cinabre-clair); }
  .nav-b4g { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; }
  .nav-b4g .nav-court { display: inline-flex; align-items: center; gap: 8px; }
  .nav-b4g .nav-court svg { width: 18px; height: 18px; }
  .nav-b4g .nav-long, .nav-b4g .b4g-logo-bouton { display: none; }
  .nav-tel { display: inline-flex; min-height: 44px; font-size: 16px; }
}

/* Assez de place pour le long bouton (marque, quatre liens, Commander sur + logo, numéro) : dès 1180 px. */
@media (min-width: 1180px) {
  .nav-b4g { padding: 0 14px 0 18px; }
  .nav-b4g .nav-court { display: none; }
  .nav-b4g .nav-long { display: inline; }
  .nav-b4g .b4g-logo-bouton { display: block; height: 34px; margin: -3px 0; }
}

/* ---------- Le héros : le nom à gauche, les deux portes partagées par la ligne ---------- */
.heros { position: relative; padding-top: var(--nav-h); background: linear-gradient(168deg, var(--vert-clair) 0%, var(--vert) 100%); color: var(--texte-sombre); }
.heros-texte { padding: 40px max(var(--gout), env(safe-area-inset-right)) 32px max(var(--gout), env(safe-area-inset-left)); }
.lieu { font: 500 15px/1.3 var(--f-titre); color: var(--pierre); font-variant-numeric: lining-nums tabular-nums; }
.nom { margin-top: 10px; font-weight: 600; font-size: clamp(76px, 25vw, 112px); line-height: .9; letter-spacing: -.04em; color: var(--papier); }
.nom:focus { outline: none; }
.phrase { margin-top: 18px; max-width: 34ch; font-size: 18px; line-height: 1.55; }
.heros-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; margin-top: 26px; align-items: center; }
.heros-actions .btn-commander { grid-column: 1 / -1; }
.heros-actions .btn { padding: 0 14px; }
.heros-actions .lien-tel { justify-content: center; }
@media (max-width: 379px) {
  .heros-actions .btn, .heros-actions .lien-tel { font-size: 15px; }
  .heros-actions .btn { padding: 0 12px; }
  .heros-actions .lien-tel { gap: 6px; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .nom { font-size: clamp(112px, 18vw, 150px); }
  .heros-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; }
  .heros-actions .btn { padding: 0 22px; }
}
.jour-h { margin-top: 16px; font: 500 15px/1.35 var(--f-titre); color: var(--pierre-clair); font-variant-numeric: lining-nums tabular-nums; }

.portes { position: relative; height: 252px; container-type: inline-size; overflow: hidden; }
.porte { position: absolute; inset: 0; display: block; color: var(--papier); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.porte-chinois { background: var(--vert-clair); clip-path: inset(0 50% 0 0); }
.porte-japonais { background: var(--ardoise); clip-path: inset(0 0 0 50%); }
.porte-photo { position: absolute; top: 0; bottom: 0; width: 56%; height: 100%; object-fit: cover; }
.porte-chinois .porte-photo { left: 0; }
.porte-japonais .porte-photo { right: 0; }
.porte:has(.porte-photo)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Le voile tient le titre en haut et les chiffres en bas ; le milieu garde la lumière de la photo. */
  background: linear-gradient(to bottom, rgba(var(--voile), .82) 0%, rgba(var(--voile), .66) 14%, rgba(var(--voile), .3) 24%, rgba(var(--voile), .3) 26%, rgba(var(--voile), .7) 35%, rgba(var(--voile), .74) 70%, rgba(var(--voile), .92) 94%);
}
.porte-texte {
  position: absolute; z-index: 1; top: 0; bottom: 0; width: calc(50% - 2 * var(--pad, 16px)); left: var(--pad, 16px);
  display: flex; flex-direction: column; padding: 16px 0 18px;
  transition: transform 220ms var(--c-sortie);
}
.porte-japonais .porte-texte { left: calc(50% + var(--pad, 16px)); }
.porte-label { font: 600 19px/1.1 var(--f-titre); letter-spacing: -.01em; color: var(--papier); }
.porte-bas { margin-top: auto; }
.porte-nombre { display: block; font: 500 58px/.9 var(--f-titre); letter-spacing: -.04em; color: var(--pierre-clair); font-variant-numeric: lining-nums tabular-nums; }
.porte-unite { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--texte-sombre); }
.porte-chapeau { display: none; }
.porte-rubriques { display: none; }
.porte-ouvrir { display: inline-flex; gap: 6px; margin-top: 10px; font: 500 15px/1.2 var(--f-titre); color: var(--pierre-clair); }
.porte-cadre { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; }
.porte-japonais .porte-cadre { left: 50%; }
.porte:focus-visible { outline: none; }
.porte:focus-visible .porte-cadre { outline: 3px solid var(--pierre-clair); outline-offset: -9px; }
.porte:hover .fleche, .porte:focus-visible .fleche { transform: translateX(4px); }
.ligne { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 24px; margin-left: -12px; height: 100%; pointer-events: none; overflow: visible; transition: transform 220ms var(--c-sortie); }
.ligne polyline { fill: none; stroke: var(--pierre); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (min-width: 600px) {
  .portes { height: 300px; --pad: 28px; }
  .porte-chapeau { display: block; margin-top: 10px; max-width: 30ch; font-size: 16px; line-height: 1.45; color: #cfdad4; }
}
/* Sur très petit téléphone, « Côté japonais » passe sur deux lignes et le bloc du bas monte : plus de bande de lumière, le voile reste tenu. */
@media (max-width: 359px) {
  .porte:has(.porte-photo)::after { background: linear-gradient(to bottom, rgba(var(--voile), .84) 0%, rgba(var(--voile), .72) 24%, rgba(var(--voile), .66) 32%, rgba(var(--voile), .74) 44%, rgba(var(--voile), .78) 70%, rgba(var(--voile), .92) 94%); }
}
/* Sur tablette la mention sous le chiffre (la ligne « Potages, entrées… ») monte le bloc du bas : la bande de lumière de la photo remonte avec lui. */
@media (min-width: 600px) and (max-width: 959px) {
  .porte:has(.porte-photo)::after { background: linear-gradient(to bottom, rgba(var(--voile), .82) 0%, rgba(var(--voile), .68) 12%, rgba(var(--voile), .3) 18%, rgba(var(--voile), .3) 19%, rgba(var(--voile), .72) 25%, rgba(var(--voile), .76) 70%, rgba(var(--voile), .92) 94%); }
}
/* Le geste, à la souris seulement : la ligne s'incline vers le versant survolé (50/50 → 56/44), en 220 ms,
   par découpe et translation : aucune mise en page recalculée. Au toucher, ce sont de simples liens. */
@media (hover: hover) and (pointer: fine) {
  .porte-texte { width: calc(44% - 2 * var(--pad, 16px)); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .porte { transition: clip-path 220ms var(--c-sortie); }
  .portes:has(.porte-chinois:hover) .porte-chinois { clip-path: inset(0 44% 0 0); }
  .portes:has(.porte-chinois:hover) .porte-japonais { clip-path: inset(0 0 0 56%); }
  .portes:has(.porte-chinois:hover) .ligne,
  .portes:has(.porte-chinois:hover) .porte-japonais .porte-texte { transform: translateX(6cqw); }
  .portes:has(.porte-japonais:hover) .porte-japonais { clip-path: inset(0 0 0 44%); }
  .portes:has(.porte-japonais:hover) .porte-chinois { clip-path: inset(0 56% 0 0); }
  .portes:has(.porte-japonais:hover) .ligne,
  .portes:has(.porte-japonais:hover) .porte-japonais .porte-texte { transform: translateX(-6cqw); }
}
@media (min-width: 960px) {
  .heros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 100svh; min-height: 640px; max-height: 1000px; }
  .heros-texte { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px 56px max(var(--gout), calc(50vw - var(--large) / 2 + var(--gout))); }
  .nom { font-size: clamp(110px, 10.5vw, 168px); }
  .phrase { font-size: 20px; }
  .heros-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 34px; }
  .heros-actions .btn-commander { flex: 0 0 auto; }
  .heros-actions .btn { padding: 0 22px; }
  .portes { height: auto; --pad: clamp(28px, 3vw, 44px); }
  .porte-texte { padding: 36px 0 44px; }
  .porte-label { font-size: clamp(26px, 2.4vw, 36px); }
  .porte-nombre { font-size: clamp(96px, 9vw, 150px); }
  .porte-unite { font-size: 17px; margin-top: 10px; }
  .porte-chapeau { font-size: 17px; }
  .porte-ouvrir { font-size: 16px; margin-top: 18px; }
  /* Sur grand écran, chaque porte dit ce qu'elle ouvre : ses rubriques, comptées sur la carte. */
  .porte-rubriques { display: grid; gap: 2px; margin-top: 22px; max-width: 300px; }
  .porte-rubriques span { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--filet); font-size: 16px; line-height: 1.3; color: #cfdad4; }
  .porte-rubriques i { font: 500 14px/1.3 var(--f-titre); font-style: normal; color: var(--pierre); font-variant-numeric: lining-nums tabular-nums; }
  /* Avec la photo d'un plat, la porte se tait : le titre en haut, les chiffres en bas, la photo entre les deux. */
  .porte:has(.porte-photo) .porte-rubriques { display: none; }
}
.passer { display: none; }

/* ---------- La bande qui passe : la maison en panorama continu ---------- */
.bande { position: relative; height: clamp(260px, 42svh, 420px); overflow: hidden; background: var(--vert); }
.bande-piste { display: flex; height: 100%; width: max-content; animation: passer 84s linear infinite; }
.bande-vue { position: relative; flex: none; height: 100%; width: 100vw; }
.bande-vue.portrait { width: auto; aspect-ratio: 3 / 4; }
.bande-vue img { width: 100%; height: 100%; object-fit: cover; }
.bande-vue::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(var(--voile), .92) 0%, rgba(var(--voile), .8) 18%, rgba(var(--voile), .2) 50%, rgba(var(--voile), .06) 100%); }
.bande-vue figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 var(--gout) 18px; font-size: 14px; line-height: 1.4; color: var(--pierre-clair); }
.bande-pause {
  display: none; position: absolute; z-index: 3; right: max(14px, env(safe-area-inset-right)); top: 14px; width: 44px; height: 44px; border-radius: 50%;
  place-items: center; background: rgba(var(--voile), .78); border: 1.5px solid var(--pierre); color: var(--papier); cursor: pointer;
}
.js .bande-pause { display: grid; }
.bande-pause svg { width: 16px; height: 16px; }
.bande-pause .icone-lecture, .bande.en-pause .bande-pause .icone-pause { display: none; }
.bande.en-pause .bande-pause .icone-lecture { display: block; }
.bande-pause:focus-visible { outline: 3px solid var(--papier); outline-offset: 2px; }
.bande:hover .bande-piste, .bande:focus-within .bande-piste, .bande.en-pause .bande-piste, .bande.hors-champ .bande-piste { animation-play-state: paused; }
@keyframes passer { to { transform: translateX(-50%); } }
@media (min-width: 720px) {
  .bande { height: clamp(340px, 54svh, 560px); }
  .bande-vue { width: min(62vw, 900px); }
  .bande-vue figcaption { padding-left: 28px; padding-bottom: 24px; font-size: 15px; }
}

/* ---------- Le versant chinois : le portrait des quatre gibiers ---------- */
.gibiers { margin-top: 44px; }
.gibiers-noms { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px clamp(20px, 5vw, 44px); }
.gibier-nom {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-bottom: 4px; cursor: pointer;
  font: 600 clamp(30px, 8.6vw, 52px)/1.1 var(--f-titre); letter-spacing: -.03em; color: #6d7a73;
  border-bottom: 2px solid transparent; transition: color 250ms, border-bottom-color 250ms;
}
.gibier-nom input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gibier-nom:has(input:checked) { color: var(--encre); border-bottom-color: var(--cinabre); }
.gibier-nom:has(input:focus-visible) { outline: 2px solid var(--cinabre); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .gibier-nom:hover { color: var(--gris); } }
.gibiers-panneaux { margin-top: 24px; }
/* Tout est visible par défaut : sans :has(), on lit les quatre plats à la suite. */
.gibier-panneau { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--filet-clair); max-width: 760px; }
.gibier-panneau h3 { font-size: clamp(20px, 4.6vw, 26px); line-height: 1.2; }
.gibier-panneau .prix { grid-column: 2; grid-row: 1; font: 500 clamp(20px, 4.6vw, 26px)/1.2 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.gibier-panneau p:not(.prix) { grid-column: 1 / -1; color: var(--gris); font-size: 16px; }
.gibiers:has(input[data-i="0"]:checked) .gibier-panneau:not([data-i="0"]),
.gibiers:has(input[data-i="1"]:checked) .gibier-panneau:not([data-i="1"]),
.gibiers:has(input[data-i="2"]:checked) .gibier-panneau:not([data-i="2"]),
.gibiers:has(input[data-i="3"]:checked) .gibier-panneau:not([data-i="3"]) { display: none; }
.gibier-panneau { animation: panneau 260ms var(--c-sortie) both; }
@keyframes panneau { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .gibiers-noms { display: flex; flex-wrap: wrap; } }
/* Le plat du gibier a sa photo (le cerf de Sichuan) : au-dessus du nom sur téléphone, à gauche dès 640 px. Les autres
   gibiers n'ont ni photo ni case : leur panneau reste celui d'avant. */
.gibier-panneau.avec-photo h3, .gibier-panneau.avec-photo .prix { grid-row: 2; }
.gibier-panneau.avec-photo p:not(.prix) { grid-row: 3; }
.gibier-photo { grid-column: 1 / -1; grid-row: 1; display: block; width: min(100%, 300px); aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; background: var(--ardoise); }
.gibier-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) {
  .gibier-panneau.avec-photo { grid-template-columns: 240px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 6px 24px; }
  .gibier-photo { grid-column: 1; grid-row: 1 / span 3; width: 100%; margin: 0; }
  .gibier-panneau.avec-photo h3 { grid-column: 2; grid-row: 1; }
  .gibier-panneau.avec-photo .prix { grid-column: 3; grid-row: 1; }
  .gibier-panneau.avec-photo p:not(.prix) { grid-column: 2 / -1; grid-row: 2; }
}

/* Les plats phares. La GRILLE ne garde que les plats à photo : nom, PRIX (celui de la carte) et vignette carrée au-dessus du
   nom, sur un même filet. Deux colonnes sur téléphone, trois pour trois plats, autant que la place en donne sinon. Une photo
   seule dans son versant (le côté japonais), ou la dernière d'un nombre impair sur téléphone, devient une carte LARGE :
   toute la largeur de deux colonnes, image 16:10, pour ne jamais rester orpheline. Les plats SANS photo passent dessous,
   en lignes de carte pleine largeur (voir .phares-lignes). */
.signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; align-items: start; margin-top: 52px; }
.signatures li { min-width: 0; padding-top: 14px; border-top: 1px solid var(--filet-clair); }
.ardoise .signatures li { border-top-color: var(--filet); }
.sig-photo { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; background: var(--ardoise); }
.sig-photo img { width: 100%; height: 100%; object-fit: cover; }
.signatures .rubrique { padding-top: 0; font: 500 14px/1.3 var(--f-titre); color: var(--gris); }
.ardoise .signatures .rubrique { color: var(--pierre-clair); }
.sig-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin-top: 6px; align-items: baseline; }
.signatures h3 { font-size: clamp(18px, 4.6vw, 24px); line-height: 1.2; overflow-wrap: break-word; }
/* Deux colonnes de photos : les noms réservent deux lignes, pour que les prix de deux voisines se retrouvent à la même hauteur. */
.signatures .avec-photo h3 { min-height: 2.4em; }
.signatures .prix { font: 500 clamp(17px, 4.2vw, 21px)/1.2 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--encre); }
.ardoise .signatures .prix { color: #f4f6f4; }
.signatures .desc { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.ardoise .signatures .desc { color: #b8c2bc; }
/* La carte large : la photo seule d'un versant. Le plat y est cadré sur sa moitié basse (la table, pas le plafond). */
.signatures .large { grid-column: 1 / -1; }
.signatures .large .sig-photo { aspect-ratio: 16 / 10; }
.signatures .large .sig-photo img { object-position: 50% 68%; }
.signatures .large .sig-tete { grid-template-columns: minmax(0, 1fr) auto; }
.signatures .large h3 { min-height: 0; }
@media (max-width: 719px) {
  .signatures .avec-photo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .signatures .avec-photo:last-child:nth-child(odd) .sig-photo { aspect-ratio: 16 / 10; }
  .signatures .avec-photo:last-child:nth-child(odd) .sig-photo img { object-position: 50% 68%; }
  .signatures .avec-photo:last-child:nth-child(odd) .sig-tete { grid-template-columns: minmax(0, 1fr) auto; }
  .signatures .avec-photo:last-child:nth-child(odd) h3 { min-height: 0; }
}
@media (min-width: 720px) {
  .signatures { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 40px 32px; }
  .signatures-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signatures .large { grid-column: span 2; }
  .sig-tete { grid-template-columns: minmax(0, 1fr) auto; }
  .signatures h3 { font-size: clamp(20px, 2.1vw, 24px); }
  .signatures .avec-photo h3 { min-height: 0; }
  .signatures .desc { font-size: 16px; }
}

/* Les plats phares SANS photo : des lignes de carte sur toute la largeur du versant, comme la page carte (étiquette de
   rubrique, nom en Spectral, prix de la carte aligné à droite, description dessous, un filet entre deux plats). */
.phares-lignes { margin-top: 52px; border-top: 1px solid var(--filet-clair); }
.signatures + .phares-lignes { margin-top: 40px; }
.phares-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--filet-clair); }
.phares-lignes .etiquette { grid-column: 1 / -1; font: 500 14px/1.3 var(--f-titre); color: var(--gris); }
.phares-lignes h3 { font: 400 18px/1.35 var(--f-texte); letter-spacing: 0; text-wrap: wrap; color: var(--encre); }
.phares-lignes .prix { font: 500 18px/1.2 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; text-align: right; color: var(--encre); }
.phares-lignes .desc { grid-column: 1 / -1; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.ardoise .phares-lignes, .ardoise .phares-lignes li { border-color: var(--filet); }
.ardoise .phares-lignes .etiquette { color: var(--pierre-clair); }
.ardoise .phares-lignes h3, .ardoise .phares-lignes .prix { color: #f4f6f4; }
.ardoise .phares-lignes .desc { color: #b8c2bc; }
@media (min-width: 720px) { .phares-lignes h3, .phares-lignes .prix { font-size: 19px; } }
/* Un versant qui n'a qu'UNE carte à photo (le côté japonais) : sous 960 px tout s'empile (la carte, les lignes, le lien) ;
   dès 960 px, deux colonnes égales, la carte à gauche, et à droite, calés sur le filet de la carte, les plats sans photo
   en lignes puis le lien « Toute la carte … ». Aucun vide à droite. */
.phares-duo { margin-top: 52px; }
.phares-duo .signatures { margin-top: 0; }
.phares-duo .phares-lignes { margin-top: 40px; }
@media (min-width: 960px) {
  .phares-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .phares-duo .signatures { grid-template-columns: minmax(0, 1fr); }
  .phares-duo .signatures .large { grid-column: 1 / -1; }
  .phares-duo .phares-lignes { margin-top: 0; }
}
.suite { margin-top: 40px; }

/* ---------- Les buffets : le seul prix de l'accueil (une formule à prix fixe) ---------- */
.buffets-grille { display: grid; gap: 32px; margin-top: 40px; align-items: start; }
.table-buffets { width: 100%; max-width: 620px; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.table-buffets th, .table-buffets td { padding: 13px 0; border-bottom: 1px solid var(--filet-clair); text-align: right; white-space: nowrap; }
.table-buffets thead th { font: 500 17px/1.2 var(--f-titre); color: var(--encre); border-bottom: 2px solid var(--encre); vertical-align: bottom; padding-bottom: 10px; }
.table-buffets th[scope="row"], .table-buffets thead th:first-child { text-align: left; font: 400 16px/1.3 var(--f-texte); color: var(--gris); padding-right: 20px; white-space: normal; }
.table-buffets td { font: 500 clamp(19px, 4.6vw, 24px)/1 var(--f-titre); color: var(--encre); padding-left: 24px; }
.table-buffets .gratuit { font: 400 16px/1 var(--f-texte); color: var(--gris); }
.quand { display: block; margin-top: 2px; font: 400 14px/1.2 var(--f-texte); color: var(--gris); }
.regle-prix { margin-top: 18px; max-width: 62ch; font-size: 15px; color: var(--gris); }
.buffets-appel { padding: 24px; background: var(--carte-fond); border: 1px solid var(--filet-clair); }
.buffets-appel h3 { font-size: 22px; }
.buffets-appel p { margin-top: 8px; color: var(--gris); }
.buffets-appel .actions { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 16px; }
@media (min-width: 960px) { .buffets-grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; } }

/* ---------- Les menus ---------- */
.menus { display: grid; gap: 28px; margin-top: 40px; }
.menus li { padding-top: 16px; border-top: 1px solid var(--encre); }
.menus h3 { font-size: 22px; }
.menus p { margin-top: 8px; font-size: 16px; color: var(--gris); }
@media (min-width: 720px) { .menus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* ---------- À l'intérieur du Ji Fu, et ce qu'on en dit ---------- */
.prose-2 { display: grid; gap: 16px 56px; margin-top: 26px; max-width: 1040px; }
@media (min-width: 860px) { .prose-2 { grid-template-columns: 1fr 1fr; } }
.avis { display: grid; gap: 40px 64px; margin-top: 56px; }
.avis blockquote { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: #dde5e0; }
.avis figcaption { margin-top: 12px; font: 500 14px/1.3 var(--f-titre); color: var(--pierre); }
@media (min-width: 860px) { .avis { grid-template-columns: 1fr 1fr; } }

/* ---------- Venir : horaires, adresse, téléphone ---------- */
.infos-grille { display: grid; gap: 40px; margin-top: 40px; }
.info h3 { font-size: 22px; margin-bottom: 12px; }
.jour { font: 600 18px/1.35 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; margin-bottom: 12px; }
.semaine { display: grid; gap: 0; max-width: 420px; }
.semaine li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--filet-clair); font-size: 16px; }
.semaine li span:last-child { font-family: var(--f-titre); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.semaine .ferme span:last-child { color: var(--gris); }
.grand-tel { display: inline-flex; min-height: 48px; align-items: center; font: 600 clamp(30px, 7vw, 40px)/1.05 var(--f-titre); color: var(--cinabre); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.grand-tel:hover { text-decoration: underline; text-underline-offset: 6px; }
.sombre .grand-tel { color: var(--papier); }
.info .btn { margin-top: 16px; }
.info p + p { margin-top: 8px; }
.note { font-size: 15px; color: var(--gris); }
@media (min-width: 960px) { .infos-grille { grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; } }

/* ---------- La fin : une table, puis Best4GoEat ---------- */
.fin-appel .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px; }
.fin-appel .depuis { margin-top: 28px; font-size: 15px; color: var(--pierre); }
.b4g {
  margin-top: 56px; border-radius: 28px; background: var(--b4g-fond); border: 2px solid var(--b4g-bord); color: var(--encre);
  padding: 24px 20px; display: grid; gap: 18px;
}
.contenu > .b4g:first-child { margin-top: 0; }
.b4g-logo { width: 88px; height: auto; display: block; overflow: visible; }
.b4g-logo text { font-family: Poppins, var(--f-titre); font-style: italic; font-weight: 900; }
.b4g h2 { font: 700 24px/1.2 var(--f-titre); letter-spacing: -.01em; color: var(--encre); }
.b4g p { color: var(--gris); margin-top: 6px; }
.b4g-actions { display: grid; gap: 6px; justify-items: start; }
.b4g .tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); font: 500 16px var(--f-titre); }
.b4g :focus-visible { outline-color: var(--b4g-bord); }
@media (max-width: 959px) { .b4g .btn-b4g { width: 100%; } .b4g-actions { justify-items: stretch; } }
@media (min-width: 960px) { .b4g { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 28px 40px; } .b4g-logo { width: 112px; } .b4g-actions { justify-items: end; } }

/* ---------- L'onglet du bas, sur téléphone et tablette : Commander | Réserver | Appeler ---------- */
.barre-bas {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px;
  background: var(--filet); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(var(--voile), .25);
}
/* La zone sûre de l'iPhone est pleine : le fond de l'onglet descend sous la barre d'accueil. */
.barre-bas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom); background: var(--vert); z-index: -1; }
.barre-bas a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 0 8px;
  background: var(--vert); color: var(--papier); text-decoration: none; font: 500 15px/1.1 var(--f-titre);
}
.barre-bas svg { width: 20px; height: 20px; flex: none; }
.barre-bas .bb-commander { background: linear-gradient(135deg, var(--b4g-cyan-1), var(--b4g-cyan-2)); color: var(--b4g-encre); font-weight: 600; }
.bb-commander span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bb-commander small { font-family: Poppins, var(--f-titre); font-style: italic; font-weight: 900; font-size: 11px; letter-spacing: -.01em; }
.barre-bas a:focus-visible { outline: 3px solid var(--papier); outline-offset: -4px; }
.barre-bas a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cinabre-clair); }
@media (min-width: 960px) { .barre-bas { display: none; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--texte-sombre); padding: 40px 0 calc(44px + var(--barre-bas)); font-size: 16px; }
.pied .contenu { display: grid; gap: 8px; }
.pied a { color: var(--papier); }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pied nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pied :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.revoir { display: none !important; }
.mouvement:not(.eco) .revoir { display: inline-flex !important; }
.colophon { color: var(--pierre-clair); }

/* ---------- Pages intérieures ---------- */
.page-tete { padding: calc(var(--nav-h) + 40px) 0 40px; }
.page-tete h1 { font-size: clamp(46px, 11vw, 92px); line-height: .95; letter-spacing: -.035em; }
.page-tete .chapeau { color: #cfdad4; }
.page-tete .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; }
.cartouche { padding: 22px; background: var(--carte-fond); border: 1px solid var(--filet-clair); }
.cartouche h2 { font-size: 22px; margin-bottom: 10px; }
.deux-col { display: grid; gap: 32px; }
@media (min-width: 960px) { .deux-col { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.photo-legendee img { width: 100%; height: auto; }
.photo-legendee figcaption { margin-top: 10px; font-size: 14px; color: var(--gris); }
.photo-salle { max-width: 420px; }

/* La frise de la page Histoire */
.frise { position: relative; margin-top: 48px; padding-left: 30px; border-left: 2px solid var(--vert); max-width: 760px; }
.frise article { position: relative; padding-bottom: 44px; }
.frise article:last-child { padding-bottom: 0; }
.frise article::before { content: ""; position: absolute; left: -39px; top: 8px; width: 12px; height: 12px; border: 3px solid var(--vert); background: var(--pierre-froide); border-radius: 50%; }
.frise .an { font: 600 clamp(40px, 9vw, 56px)/1 var(--f-titre); letter-spacing: -.03em; color: var(--vert); font-variant-numeric: lining-nums tabular-nums; }
.frise h2 { margin-top: 6px; font-size: clamp(22px, 5vw, 30px); }
.frise p { margin-top: 10px; color: var(--gris); max-width: 62ch; }
/* La coulée en deux colonnes du décor : une vue traverse, deux portraits se rangent dessous. */
.coulee { columns: 1; column-gap: 24px; margin-top: 44px; }
.coulee > * { break-inside: avoid; margin-bottom: 24px; background: var(--carte-fond); border: 1px solid var(--filet-clair); }
.coulee > .large { column-span: all; }
.coulee .cadre { overflow: hidden; }
.coulee img { width: 100%; height: 100%; object-fit: cover; }
.coulee .large .cadre { aspect-ratio: 16 / 9; }
.coulee .portrait .cadre { aspect-ratio: 3 / 4; }
.coulee figcaption { padding: 18px 20px 22px; }
.coulee figcaption b { display: block; font: 600 20px/1.2 var(--f-titre); }
.coulee figcaption span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--gris); }
@media (min-width: 640px) { .coulee { columns: 2; } }

/* Le formulaire de réservation */
.formulaire { display: none; }
.js .formulaire { display: grid; gap: 18px; }
.js .formulaire[hidden] { display: none; }
.sans-js { padding: 22px; background: var(--carte-fond); border: 1px solid var(--filet-clair); }
.js .sans-js { display: none; }
.champs-2 { display: grid; gap: 18px; }
.champs-3 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.champs-3 .champ:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .champs-2 { grid-template-columns: 1fr 1fr; } .champs-3 { grid-template-columns: 1.3fr 1fr 1fr; } .champs-3 .champ:first-child { grid-column: auto; } }
.champ label, .champ .libelle { display: block; margin-bottom: 6px; font: 500 15px/1.3 var(--f-titre); color: var(--encre); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #aeb8b2; border-radius: 0; background: #fff;
  font: 400 17px/1.4 var(--f-texte); color: var(--encre); font-variant-numeric: lining-nums;
}
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316211c' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.champ select:disabled { background-color: #e6eae7; color: var(--gris); }
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--cinabre); outline-offset: 1px; border-color: var(--encre); }
.champ .aide { margin-top: 6px; font-size: 14px; color: var(--gris); }
.case { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--carte-fond); border: 1px solid var(--filet-clair); cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--vert); }
.case b { display: block; font: 500 16px/1.3 var(--f-titre); }
.case span span { display: block; margin-top: 2px; font-size: 15px; color: var(--gris); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.envoyer { width: 100%; min-height: 54px; }
.envoyer[disabled] { opacity: .6; cursor: progress; }
.issue { padding: 18px 20px; border-left: 4px solid var(--vert); background: var(--carte-fond); }
.issue[hidden] { display: none; }
.issue:focus { outline: none; }
.issue h2 { font-size: 22px; }
.issue p { margin-top: 6px; }
.issue.refus, .issue.panne { border-left-color: var(--cinabre); }
.issue ul { margin-top: 8px; padding-left: 20px; list-style: disc; }
.issue .btn { margin-top: 14px; }
.mention { font-size: 14px; color: var(--gris); }

/* ---------- La carte ---------- */
.carte-tete { padding: calc(var(--nav-h) + 40px) 0 36px; }
.carte-tete h1 { font-size: clamp(56px, 13vw, 104px); line-height: .9; letter-spacing: -.035em; }
.carte-tete .chapeau { color: #cfdad4; }
.carte-tete .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; }
.a-savoir { margin-top: 28px; padding: 16px 18px; background: var(--carte-fond); border: 1px solid var(--filet-clair); color: var(--gris); font-size: 16px; }
.a-savoir strong { color: var(--encre); font-weight: 600; }
.onglets { position: sticky; z-index: 30; top: var(--nav-h); background: var(--pierre-froide); border-bottom: 1px solid var(--filet-clair); }
.onglets-in { position: relative; display: flex; gap: 4px 24px; overflow-x: auto; scrollbar-width: none; }
.onglets-in::-webkit-scrollbar { display: none; }
.onglets a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 2px; white-space: nowrap;
  font: 500 16px/1 var(--f-titre); color: var(--gris); text-decoration: none; border-bottom: 2px solid transparent;
}
.onglets .bref { display: none; }
@media (max-width: 439px) { .onglets .long { display: none; } .onglets .bref { display: inline; } .onglets-in { gap: 4px 20px; } }
.onglets a span.n { font-size: 13px; color: #5f6c65; font-variant-numeric: lining-nums tabular-nums; }
.onglets a:hover { color: var(--encre); }
.onglets a[aria-current="true"] { color: var(--encre); }
.registre-corps.seul { display: block; }
.onglets a:focus-visible { outline-offset: -3px; }
/* La même ligne de partage, couchée : elle souligne l'onglet du versant à l'écran et glisse de l'un à l'autre. */
.indicateur { position: absolute; left: 0; bottom: -1px; width: 100px; height: 10px; pointer-events: none; transform-origin: 0 50%; display: none; }
.js .indicateur { display: block; }
.indicateur.glisse { transition: transform 220ms var(--c-sortie); }
.indicateur polyline { fill: none; stroke: var(--cinabre); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.registre { padding-top: 44px; }
.registre-tete { display: grid; gap: 14px; }
.registre-tete h2 { font-size: clamp(34px, 8vw, 56px); letter-spacing: -.03em; }
.registre-tete p { color: var(--gris); max-width: 60ch; }
.registre.arrive .registre-tete { animation: panneau 260ms var(--c-sortie) both; }
.banniere { margin-top: 24px; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ardoise); }
.banniere img { width: 100%; height: 100%; object-fit: cover; }
.banniere figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-size: 14px; color: var(--pierre-clair); background: linear-gradient(to top, rgba(var(--voile), .92) 0%, rgba(var(--voile), .84) 55%, transparent 100%); }
.registre-corps { margin-top: 8px; }
/* Le sommaire du versant : collé sous les onglets sur téléphone (une ligne qui défile), à gauche sur grand écran.
   Il est collant DANS son versant : quand l'autre versant arrive, le sien prend sa place sans script. */
.sommaire { position: sticky; z-index: 20; top: calc(var(--nav-h) + var(--onglets-h)); margin: 0 calc(-1 * var(--gout)); background: var(--pierre-froide); border-bottom: 1px solid var(--filet-clair); }
.sommaire ol { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--gout); scrollbar-width: none; scroll-padding-inline: var(--gout); }
.sommaire ol::-webkit-scrollbar { display: none; }
.sommaire a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--filet-clair); background: var(--carte-fond); text-decoration: none; font: 500 14px/1 var(--f-titre); color: var(--gris);
}
.sommaire a span { font-size: 12px; color: #5f6c65; font-variant-numeric: lining-nums tabular-nums; }
.sommaire a[aria-current="true"] { background: var(--vert); border-color: var(--vert); color: var(--papier); }
.sommaire a[aria-current="true"] span { color: var(--pierre-clair); }
.rubrique { padding-top: 34px; }
.rubrique-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--encre); }
.rubrique-tete h3 { font-size: clamp(23px, 5.4vw, 30px); }
.compte { color: var(--gris); font-size: 15px; white-space: nowrap; }
.rubrique-note { margin-top: 10px; font-style: italic; color: var(--gris); font-size: 16px; }
.lignes > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--filet-clair); }
.lignes > li.avec-photo { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; }
.lignes .vignette { width: 76px; height: 76px; overflow: hidden; background: var(--ardoise); }
.lignes .vignette img { width: 100%; height: 100%; object-fit: cover; }
.lignes h4 { margin: 0; font: 400 18px/1.35 var(--f-texte); color: var(--encre); }
.lignes .desc { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.lignes .prix { font: 500 18px/1.2 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; text-align: right; color: var(--encre); }
.lignes .services { margin-top: 6px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--gris); }
.lignes .services li { padding: 1px 0; }
.signe { display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: 2px; border: 1px solid #b4beb8; font: 500 11px/1.4 var(--f-titre); letter-spacing: .03em; color: var(--gris); white-space: nowrap; }
.signe.epice { border-color: rgba(175, 25, 23, .45); color: var(--cinabre); }
.fin-carte { margin-top: 36px; font-size: 15px; color: var(--gris); }
.carte-buffets { margin-top: 64px; padding-top: 8px; }
@media (min-width: 720px) {
  .lignes > li.avec-photo { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .lignes .vignette { width: 92px; height: 92px; }
  .lignes h4, .lignes .prix { font-size: 19px; }
}
@media (min-width: 960px) {
  .registre-corps { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 64px; align-items: start; }
  .registre-corps.seul { display: block; max-width: 1044px; padding-left: 284px; }
  .banniere { aspect-ratio: 21 / 8; }
  .sommaire { top: calc(var(--nav-h) + var(--onglets-h) + 24px); margin: 0; padding-top: 34px; background: none; border: 0; }
  .sommaire ol { display: block; position: relative; padding: 0; overflow: visible; }
  .sommaire ol::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--filet-clair); }
  .sommaire a { display: flex; justify-content: space-between; min-height: 40px; padding: 0 0 0 18px; border: 0; background: none; font-size: 15px; }
  .sommaire a[aria-current="true"] { background: none; color: var(--encre); box-shadow: inset 2px 0 0 var(--cinabre); }
  .sommaire a[aria-current="true"] span { color: var(--gris); }
}

/* ---------- 404 ---------- */
.perdu { min-height: 100svh; display: grid; place-content: center; gap: 18px; padding: var(--nav-h) var(--gout) 48px; }
.perdu h1 { font-size: clamp(40px, 8vw, 72px); }
.perdu .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================
   MOUVEMENT : n'existe que si le visiteur l'accepte.
   ===================================================================== */

/* 1. L'accueil (2,6 s) : la ligne se trace, les deux versants s'ouvrent depuis elle, le nom se pose,
      la barre descend, puis Commander, Réserver et le numéro. L'onglet du bas est là dès 0 s. */
.accueil .ligne { animation: tracer 550ms var(--c-sortie) 150ms both; }
.accueil .porte-chinois { animation: ouvre-chinois 700ms var(--c-rideau) 700ms both; }
.accueil .porte-japonais { animation: ouvre-japonais 700ms var(--c-rideau) 790ms both; }
.accueil .heros .lieu, .accueil .heros .nom { animation: arrive 420ms var(--c-sortie) 1.4s both; }
.accueil .heros .phrase { animation: arrive 420ms var(--c-sortie) 1.5s both; }
.accueil .versant { animation: tombe 380ms var(--c-sortie) 1.9s both; }
.accueil .heros-actions > * { animation: arrive 340ms var(--c-sortie) both; animation-delay: calc(2.1s + var(--i, 0) * 80ms); }
.accueil .heros .jour-h { animation: arrive 340ms var(--c-sortie) 2.26s both; }
/* « Passer l'animation » : en haut à droite, jamais sur le texte ; il part avec l'accueil. */
.accueil .passer {
  display: inline-flex; align-items: center; position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 12px);
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 500 15px/1 var(--f-titre); color: var(--papier); background: rgba(var(--voile), .72); border: 1.5px solid var(--pierre);
  animation: arrive 200ms var(--c-sortie) 300ms both, part 220ms linear 1.72s both;
}
.accueil .passer:focus-visible { outline: 3px solid var(--papier); outline-offset: 3px; }
.accueil-saute .heros-texte, .accueil-saute .portes { animation: adoucir 240ms var(--c-sortie) both; }
@keyframes tracer { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ouvre-chinois { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 50% 0 0); } }
@keyframes ouvre-japonais { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 50%); } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tombe { from { transform: translateY(-110%); } to { transform: none; } }
@keyframes part { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes adoucir { from { opacity: .45; } to { opacity: 1; } }

/* 2. Ce qui entre : une photo hors écran monte de 6 px en moins de 300 ms ; le filet d'un titre se trace. */
.js.mouvement .monte.attend { opacity: 0; transform: translateY(6px); }
.js.mouvement .monte.vient { animation: monte 280ms var(--c-sortie) both; }
@keyframes monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.js.mouvement .rang.attend::after { transform: scaleX(0); }
.js.mouvement .rang.vient::after { animation: filet 700ms var(--c-sortie) 120ms both; }
@keyframes filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .monte.attend { opacity: 1 !important; transform: none !important; }
  .rang.attend::after { transform: none !important; }
  /* La bande s'arrête : elle devient une file qu'on fait défiler soi-même, sans les vues répétées. */
  .bande { overflow-x: auto; scroll-snap-type: x mandatory; }
  .bande-vue { scroll-snap-align: start; }
  .bande-vue[aria-hidden="true"], .bande-pause { display: none !important; }
}

/* ---------- Impression : la carte sur papier, lisible, sans décor ni barres ---------- */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .versant, .barre-bas, .passer, .evitement, .onglets, .sommaire, .carte-tete .actions, .heros-actions, .b4g, .revoir, .bande, .portes, .formulaire, .banniere, .vignette, .sig-photo, .gibier-photo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sombre, .ardoise, .heros, .pied { background: none !important; color: #000 !important; }
  .sombre *, .ardoise *, .pied *, .heros * { color: #000 !important; }
  .heros { padding-top: 0; display: block; height: auto; min-height: 0; }
  .carte-tete, .page-tete { padding: 0 0 12pt; }
  .monte.attend { opacity: 1 !important; transform: none !important; }
  .lignes > li, .lignes > li.avec-photo { grid-template-columns: minmax(0, 1fr) auto; break-inside: avoid; }
  .registre-corps { display: block; }
  .rubrique-tete { break-after: avoid; }
  .registre { padding-top: 14pt; }
  .rubrique { padding-top: 10pt; }
  .lignes > li { padding: 4pt 0; }
  .registre-tete p, .chapeau { font-size: 10pt; }
}