/* Noriya — vitrine de démonstration LYMOA.
   Direction « laque noire et vermillon, le soir » : fond laqué presque noir, rouge laque, filets dorés
   discrets, photos culinaires du soir. Titres Bodoni Moda, texte Jost, sceau 海苔屋 (« la maison du nori »). */

:root {
  --laque: #0c0a0a;
  --laque-2: #121010;
  --laque-3: #1a1615;
  --laque-4: #241d1b;
  --ivoire: #f3ece2;
  --ivoire-2: #d9cfc3;
  --cendre: #a89c90;
  --cendre-2: #8a7f75;
  --vermillon: #e04a2f;
  --vermillon-2: #f26a4f;
  --rouge: #c8321f;
  --rouge-2: #a82617;
  --or: #c6a467;
  --or-2: #e2c690;
  --line: rgba(198, 164, 103, 0.26);
  --line-2: rgba(198, 164, 103, 0.5);
  --line-soft: rgba(243, 236, 226, 0.1);
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "MS PMincho", serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --wrap: 1240px;
  --gutter: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  background: var(--laque);
}
body {
  margin: 0;
  background: var(--laque);
  color: var(--ivoire-2);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body:has(dialog[open]) {
  overflow: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
}
p {
  margin: 0 0 1em;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ivoire);
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--vermillon-2);
}
::selection {
  background: var(--rouge);
  color: #fff7f0;
}
:focus-visible {
  outline: 2px solid var(--or-2);
  outline-offset: 4px;
}
.lymoa-sheet-close:focus-visible {
  outline: 2px solid var(--or-2);
  outline-offset: -6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 110;
  padding: 10px 18px;
  background: var(--ivoire);
  color: var(--laque);
  text-decoration: none;
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.muted {
  color: var(--cendre-2);
  font-size: 14px;
}

/* Sceau 海苔屋 : trois caractères à la verticale, réservés en noir dans un carré vermillon. */
.seal {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.42em 0.34em;
  border-radius: 0.1em;
  background: var(--vermillon);
  background-image: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%);
  color: var(--laque);
  font-family: var(--mincho);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
  outline: 0.05em solid rgba(12, 10, 10, 0.78);
  outline-offset: -0.2em;
  user-select: none;
}
.seal span {
  display: block;
}
.seal-sm {
  font-size: 11px;
}
.seal-md {
  font-size: 22px;
}
.seal-lg {
  font-size: clamp(34px, 3.8vw, 50px);
  transform: rotate(-2deg);
  box-shadow: 0 24px 50px -24px rgba(224, 74, 47, 0.55);
}

/* Petits titres, chapeaux */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font: 500 12px/1.2 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
}
.kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  flex: none;
  background: currentColor;
}
.lead {
  max-width: 34em;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ivoire-2);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 32px 80px;
  margin-bottom: 60px;
}
.section-head h2 {
  font-size: clamp(42px, 4.8vw, 72px);
}
.section-head .lead {
  justify-self: end;
}

/* Boutons */
.btn,
.lymoa-launch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  /* Coins légèrement arrondis (30/10, choix d'Anthony : les coins droits faisaient trop secs). Même
     arrondi, un peu plus petit, sur les autres éléments cliquables (« Ajouter », créneaux). */
  border-radius: 10px;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.45s var(--ease), transform 0.3s var(--ease);
}
.btn:active {
  transform: scale(0.985);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.35s var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
/* Rouge laqué : un léger reflet en haut, comme une laque polie. */
.btn-red,
.lymoa-launch {
  background-color: var(--rouge);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.1));
  color: #fff7f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px -16px rgba(224, 74, 47, 0.8);
}
.btn-red:hover,
.lymoa-launch:hover {
  background-color: var(--rouge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 44px -14px rgba(224, 74, 47, 0.95);
}
.btn-line {
  border-color: var(--line-2);
  background: transparent;
  color: var(--ivoire);
}
.btn-line:hover {
  border-color: var(--or-2);
  color: var(--or-2);
}
.btn-sm {
  min-height: 42px;
  padding: 0 20px;
  font-size: 12px;
}
.btn-block {
  width: 100%;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivoire);
  border-bottom: 1px solid var(--line-2);
  transition: border-color 0.3s, color 0.3s;
}
.link:hover {
  border-color: var(--or-2);
  color: var(--or-2);
}
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ivoire);
  color: var(--rouge-2);
  font-size: 11px;
  letter-spacing: 0;
}
.cart-count[hidden] {
  display: none;
}

/* En-tête : logo au centre, navigation à gauche, commande à droite. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.site-header.is-solid {
  background: rgba(12, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-soft);
}
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1380px, 100% - 48px);
  min-height: 80px;
  margin-inline: auto;
}
.nav {
  display: flex;
  gap: 30px;
}
.nav a {
  position: relative;
  padding: 8px 0;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivoire-2);
  transition: color 0.3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover {
  color: var(--ivoire);
}
.nav a:hover::after {
  transform: scaleX(1);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ivoire);
  text-decoration: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--ivoire);
}
.brand-name {
  font: 500 22px/1 var(--serif);
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  text-transform: uppercase;
}
.header-cta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 20px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--cendre);
  white-space: nowrap;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cendre-2);
}
.status.is-open .status-dot {
  background: #74d39c;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(116, 211, 156, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(116, 211, 156, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(116, 211, 156, 0);
  }
}

/* Accueil */
/* Sur ordinateur, le texte se tient en haut à gauche, au-dessus de la natte (qui occupe le bas à droite). */
.hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: max(640px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--laque);
  color: var(--ivoire);
}
.hero picture,
.hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  z-index: -2;
}
.hero picture img {
  transform: scale(1.04);
  animation: settle 2.8s var(--ease) forwards;
}
@keyframes settle {
  to {
    transform: scale(1);
  }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 10, 10, 0.94) 0%, rgba(12, 10, 10, 0.72) 28%, rgba(12, 10, 10, 0) 54%),
    linear-gradient(180deg, rgba(12, 10, 10, 0.6) 0%, transparent 20%, transparent 74%, rgba(12, 10, 10, 0.92) 100%);
}
/* Accueil animé (assets/accueil-video.js) : l'accueil reste fixé pendant que la natte roule le maki,
   le temps de faire défiler l'espace réservé (.hero-spacer), puis la page continue. La vidéo se pose
   sur la photo, avec le même cadrage. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  object-fit: cover;
  object-position: 100% 50%;
  transform: scale(1.04);
  animation: settle 2.8s var(--ease) forwards;
}
/* Fond sombre derrière l'accueil fixé : sur iPhone, quand la barre d'adresse se replie, l'écran grandit
   et laisse voir ce qui est sous l'accueil. */
.hero-track {
  background: var(--laque);
}
.hero-spacer {
  display: none;
}
.hero-anime .hero {
  position: sticky;
  top: 0;
}
.hero-anime .hero-spacer {
  display: block;
  height: 120vh;
}
.hero-inner {
  padding-block: clamp(124px, 15vh, 180px) 170px;
}
.hero-copy {
  max-width: 640px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or-2);
}
/* Une ombre sombre et floue autour des lettres du titre et du paragraphe garde le texte net si une partie
   claire de l'image passe derrière. Sur le fond sombre, elle ne se voit pas. */
.hero h1 {
  font-size: clamp(56px, 5.9vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(12, 10, 10, 0.9), 0 0 60px rgba(12, 10, 10, 0.75);
}
.hero-text {
  max-width: 25em;
  margin: 26px 0 36px;
  font-size: clamp(16px, 1.25vw, 18px);
  color: rgba(243, 236, 226, 0.84);
  text-shadow: 0 0 14px rgba(12, 10, 10, 0.95), 0 0 30px rgba(12, 10, 10, 0.7);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
}
.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
}
.hero-foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cendre);
}
.hero-foot-inner span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-foot-inner svg {
  width: 16px;
  height: 16px;
  color: var(--or);
}
.hero-foot strong {
  font-weight: 500;
  color: var(--ivoire);
}
/* « Faites défiler » : seulement quand l'accueil est animé. */
.hero-cue {
  display: none;
}
.hero-anime .hero-cue {
  position: absolute;
  right: max(var(--gutter), (100% - var(--wrap)) / 2);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding-top: 20px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivoire-2);
}
.hero-cue::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--or-2), transparent);
  animation: cue 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* La maison : le manifeste et les engagements */
.manifesto {
  position: relative;
  padding: 150px 0 130px;
  background:
    radial-gradient(60% 50% at 18% 0%, rgba(200, 50, 31, 0.1), transparent 70%),
    var(--laque);
  border-top: 1px solid var(--line-soft);
}
.manifesto-inner {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: start;
  gap: 40px 64px;
}
.manifesto-seal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-top: 6px;
}
.manifesto-caption {
  margin: 0;
  font: italic 400 18px/1.35 var(--serif);
  color: var(--cendre);
}
.manifesto-caption em {
  color: var(--or-2);
}
.manifesto-text {
  max-width: 22em;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.manifesto-text em {
  color: var(--or-2);
}
.promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 110px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.promises li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px 0 0;
}
.promises li + li {
  padding-left: 28px;
  border-left: 1px solid var(--line-soft);
}
.promise-num {
  margin-bottom: 12px;
  font: italic 400 16px/1 var(--serif);
  color: var(--vermillon-2);
}
.promises strong {
  font: 400 27px/1.1 var(--serif);
  color: var(--ivoire);
}
.promises li > span:last-child {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cendre);
}

/* Le geste */
.craft {
  padding: 140px 0;
  background: var(--laque-2);
}
.craft-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}
.craft-photos {
  position: relative;
  padding: 0 64px 96px 0;
}
.craft-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--laque-3);
}
.craft-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.craft-photo-main {
  aspect-ratio: 1000 / 1241;
}
.craft-photo-main::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(198, 164, 103, 0.32);
  pointer-events: none;
}
.craft-photo-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 640 / 794;
  border: 10px solid var(--laque-2);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.85);
}
.craft-copy h2 {
  font-size: clamp(42px, 4.6vw, 70px);
  margin-bottom: 28px;
}
.steps {
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.step-num {
  font: italic 400 20px/1.3 var(--serif);
  color: var(--vermillon-2);
}
.steps h3 {
  margin-bottom: 8px;
  font-size: 27px;
}
.steps p {
  margin: 0;
  font-size: 15.5px;
  color: var(--cendre);
}

/* La carte : grille de fiches séparées par de fins filets, comme les cases d'une boîte. */
.menu {
  padding: 150px 0 130px;
  background: var(--laque);
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative;
  padding: 20px 0;
  border: 0;
  background: none;
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cendre);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s;
}
.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--vermillon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.tab:hover {
  color: var(--ivoire);
}
.tab.is-active {
  color: var(--ivoire);
}
.tab.is-active::after {
  transform: scaleX(1);
}
.dishes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line-soft);
}
.dishes[data-count="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.dish {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.dish[hidden] {
  display: none;
}
.dish-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 26px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.45s var(--ease);
}
.dish-link:hover {
  background-color: var(--laque-2);
}
.dish-photo {
  position: relative;
  aspect-ratio: 800 / 993;
  overflow: hidden;
  background: var(--laque-3);
}
.dish-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.dish-link:hover .dish-photo img {
  transform: scale(1.045);
}
.dish-tag,
.platter-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 11px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(12, 10, 10, 0.74);
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-2);
}
.dish-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 22px;
}
.dish-qty {
  margin: 0 0 10px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}
.dish-name {
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.08;
}
.dish-desc {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ivoire-2);
}
.dish-allergens {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--cendre-2);
}
.dish-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.dish-price {
  font: 400 25px/1 var(--serif);
  color: var(--ivoire);
  white-space: nowrap;
}
.dish-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivoire);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.dish-add svg {
  width: 14px;
  height: 14px;
}
.dish-link:hover .dish-add {
  border-color: var(--rouge);
  background: var(--rouge);
}
.dish-add.is-bump {
  animation: bump 0.5s var(--ease);
}
@keyframes bump {
  40% {
    transform: scale(1.12);
    background: var(--rouge);
    border-color: var(--rouge);
  }
}
.menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 44px;
}
.menu-foot p {
  max-width: 42em;
  margin: 0;
  font-size: 15px;
  color: var(--cendre);
}

/* À partager : un bandeau de laque rouge, les plateaux en boîtes noires. */
.platters {
  position: relative;
  padding: 140px 0 150px;
  background:
    radial-gradient(80% 60% at 18% 0%, rgba(255, 140, 110, 0.13), transparent 62%),
    radial-gradient(70% 60% at 92% 100%, rgba(0, 0, 0, 0.5), transparent 70%),
    linear-gradient(162deg, #5e130c 0%, #3e0b07 48%, #210605 100%);
  color: var(--ivoire);
}
.platters .kicker {
  color: var(--or-2);
}
.platters h2 em {
  color: var(--or-2);
}
.platters .lead {
  color: rgba(243, 236, 226, 0.86);
}
.platters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.platter {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(226, 198, 144, 0.3);
  background: linear-gradient(180deg, #161212, #0c0a0a 40%);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.platter-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--laque-3);
}
.platter-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
.platter-tag {
  top: 18px;
  left: 18px;
  border-color: transparent;
  background: var(--rouge);
  color: #fff7f0;
}
.platter-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 34px 36px 32px;
}
.platter-count {
  margin: 0 0 12px;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}
.platter h3 {
  margin-bottom: 24px;
  font-size: clamp(34px, 3.2vw, 44px);
}
.platter-list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.platter-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px;
  color: var(--ivoire-2);
}
.platter-list strong {
  min-width: 30px;
  flex: none;
  font: italic 400 21px/1 var(--serif);
  color: var(--or-2);
}
.platter-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
}
.platter-price {
  margin: 0;
}
.platter-price strong {
  display: block;
  margin-bottom: 6px;
  font: 400 42px/1 var(--serif);
  color: var(--ivoire);
}
.platter-price span {
  font-size: 13.5px;
  color: var(--cendre);
}
.platter-allergens {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--cendre-2);
}

/* Commander */
.order {
  position: relative;
  padding: 150px 0;
  background:
    radial-gradient(50% 60% at 85% 50%, rgba(200, 50, 31, 0.09), transparent 70%),
    var(--laque);
}
.order-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}
.order-aside h2 {
  margin-bottom: 26px;
  font-size: clamp(42px, 4.6vw, 70px);
}
.how {
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.how li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.how .num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font: italic 400 18px/1 var(--serif);
  color: var(--or-2);
}
.how strong {
  display: block;
  margin-bottom: 4px;
  font: 400 22px/1.2 var(--serif);
  color: var(--ivoire);
}
.how span {
  font-size: 15px;
  color: var(--cendre);
}
.order-frame {
  padding: 18px 18px 26px;
  border: 1px solid var(--line);
  background: var(--laque-2);
}
.order-visual {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--laque-3);
}
.order-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.order-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 10, 10, 0.88) 100%);
}
.order-visual figcaption {
  position: absolute;
  bottom: 22px;
  left: 26px;
  right: 26px;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.order-visual-kicker {
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or-2);
}
.order-visual-title {
  font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif);
  color: var(--ivoire);
}
.order-visual-title em {
  color: var(--vermillon-2);
}
#lymoa-container:empty {
  display: none;
}
.order-frame [data-lymoa-module],
.order-frame .btn-block {
  margin-top: 20px;
}
.order-frame .btn-block,
.order-frame .lymoa-launch {
  width: 100%;
  min-height: 62px;
  font-size: 13.5px;
}
.is-live #order-launch {
  display: none;
}
.order-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font: 500 11.5px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cendre);
}
.order-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.order-facts li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--vermillon);
  transform: rotate(45deg);
}
.order-notice {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--cendre-2);
}

/* Infos */
.visit {
  padding: 140px 0 150px;
  background: var(--laque-2);
}
.visit-photo {
  position: relative;
  margin: 0 0 76px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--laque-3);
}
.visit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.visit-photo::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(198, 164, 103, 0.3);
  pointer-events: none;
}
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 50px 72px;
}
.visit-grid h2 {
  font-size: clamp(42px, 4.4vw, 66px);
}
.visit-grid h3 {
  margin: 8px 0 20px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}
.visit-grid h3.spaced {
  margin-top: 38px;
}
.visit-grid p {
  color: var(--ivoire-2);
}
.visit-grid .muted {
  color: var(--cendre-2);
}
.hours {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: collapse;
  font-size: 15px;
}
.hours th {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  color: var(--ivoire-2);
}
.hours td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  color: var(--ivoire);
  font-variant-numeric: tabular-nums;
}
.hours td span {
  display: block;
}
.hours tr.is-today th,
.hours tr.is-today td {
  color: var(--or-2);
}
.hours tr.is-today th::after {
  content: "aujourd’hui";
  margin-left: 10px;
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon-2);
}

/* Pied de page */
.site-footer {
  position: relative;
  padding: 120px 0 40px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(200, 50, 31, 0.12), transparent 70%),
    var(--laque);
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.brand-xl .brand-name {
  font-size: clamp(44px, 8.4vw, 124px);
  letter-spacing: 0.28em;
  margin-right: -0.28em;
}
.footer-claim {
  margin: 0;
  font: italic 400 clamp(20px, 2vw, 26px)/1.3 var(--serif);
  color: var(--cendre);
}
.footer-claim em {
  color: var(--vermillon-2);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 30px;
  width: 100%;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  text-align: left;
  color: var(--cendre-2);
}
.footer-bottom a {
  color: var(--ivoire-2);
}

/* Panier de démonstration (sans clé de site) */
.cart-dialog {
  width: min(470px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--laque-2);
  color: var(--ivoire-2);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
}
.cart-dialog[open] {
  animation: drawer 0.45s var(--ease);
}
.cart-dialog::backdrop {
  background: rgba(6, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@keyframes drawer {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}
.drawer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 30px 28px calc(28px + env(safe-area-inset-bottom));
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.drawer-head .kicker {
  margin-bottom: 12px;
}
.drawer-head h2 {
  font-size: 42px;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}
.icon-btn:hover {
  border-color: var(--or-2);
}
.sim-label {
  margin: 20px 0 22px;
  padding: 10px 14px;
  border: 1px solid rgba(224, 74, 47, 0.38);
  background: rgba(224, 74, 47, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: var(--or-2);
}
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: 50% 58%;
  background: var(--laque);
}
.cart-line h3 {
  font-size: 19px;
  line-height: 1.15;
}
.cart-line .price {
  font-weight: 500;
  color: var(--ivoire);
  font-variant-numeric: tabular-nums;
}
.qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.qty button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ivoire);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.qty button:hover:not(:disabled) {
  border-color: var(--or-2);
}
.qty button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qty output {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
  color: var(--ivoire);
}
.empty-cart {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 32px 0;
}
.empty-cart strong {
  font: 400 34px/1.05 var(--serif);
  color: var(--ivoire);
}
.empty-cart p {
  margin-bottom: 10px;
  color: var(--cendre);
}
#checkout-form {
  margin-top: auto;
  padding-top: 24px;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  padding: 0;
  font: 400 24px/1.1 var(--serif);
  color: var(--ivoire);
}
fieldset .muted {
  margin: 6px 0 14px;
  font-size: 13.5px;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.slot {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--laque-3);
  color: var(--ivoire);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.slot:hover {
  border-color: var(--or-2);
}
.slot[aria-checked="true"] {
  border-color: var(--rouge);
  background: var(--rouge);
  color: #fff7f0;
}
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cart-total span {
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
}
.cart-total strong {
  font: 400 36px/1 var(--serif);
  color: var(--ivoire);
}
.privacy-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cendre-2);
}
.confirmation {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 24px 0;
}
.confirmation-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff7f0;
  box-shadow: 0 0 34px rgba(224, 74, 47, 0.45);
}
.confirmation-badge svg {
  width: 30px;
  height: 30px;
}
.confirmation h3 {
  font-size: 40px;
}
.confirmation p {
  color: var(--ivoire-2);
}
.confirmation .btn {
  margin-top: 10px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border: 1px solid var(--line-2);
  background: rgba(20, 16, 15, 0.97);
  color: var(--ivoire);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.toast::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--vermillon);
  transform: rotate(45deg);
}
.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Bouton de commande flottant (téléphone) */
.order-bar {
  display: none;
}

/* Apparitions */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Écrans moyens */
@media (max-width: 1240px) {
  .nav {
    gap: 22px;
  }
  .status {
    display: none;
  }
}

/* Ordinateur (même règle que la photo ordinateur du <picture>) : le plateau se tient à droite, un peu plus
   petit que l'écran, pour laisser le titre libre du début à la fin de l'animation (la caméra monte au-dessus
   du plateau). La photo et la vidéo, même cadre, occupent le coin bas-droit de l'accueil et se fondent dans
   le noir à gauche et en haut. Sur les écrans peu allongés (1024 × 768…), cette descente met aussi le
   plateau sous le titre. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) {
  .hero picture img,
  .hero-video {
    inset: auto 0 0 auto;
    width: 86%;
    height: 84%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 18%);
    mask-composite: intersect;
  }
}
/* Écrans peu allongés (1024 × 768, 1280 × 1024…) : la photo, cadrée sur la hauteur, serait trop grande et
   passerait sous le paragraphe et le lien « Voir la carte » : on la réduit encore. */
@media (min-width: 768px) and (orientation: landscape) and (max-aspect-ratio: 31/20) {
  .hero picture img,
  .hero-video {
    height: 64%;
  }
}

/* Tablette */
@media (max-width: 1100px) {
  .header-bar {
    grid-template-columns: auto 1fr;
    width: min(100% - 40px, 1380px);
  }
  .nav {
    display: none;
  }
  .brand {
    grid-column: 1;
  }
  .header-cta {
    grid-column: 2;
  }
  .manifesto-inner {
    grid-template-columns: 1fr;
  }
  .manifesto-seal {
    flex-direction: row;
    align-items: center;
  }
  .promises {
    grid-template-columns: 1fr 1fr;
  }
  .promises li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .promises li:nth-child(n + 3) {
    margin-top: 30px;
    border-top: 1px solid var(--line-soft);
  }
  .craft-grid,
  .order-grid {
    grid-template-columns: 1fr;
  }
  .craft-photos {
    max-width: 640px;
  }
  .dishes,
  .dishes[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .platters-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .order-frame {
    max-width: 640px;
  }
  .visit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .visit-grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* Téléphone et tablette en portrait : accueil plein écran, titre en haut, bouton en bas */
@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) {
  /* En-tête sans flou d'arrière-plan sur téléphone : le flou serait recalculé à chaque image de
     l'animation et ferait saccader le défilement. Fond presque opaque à la place. */
  .site-header.is-solid {
    background: rgba(12, 10, 10, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Pas d'env(safe-area-inset-bottom) dans l'accueil : la hauteur est figée (--ecran, assets/site.js)
     pour que le bouton ne bouge pas quand Safari replie ses barres. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: var(--ecran, 100svh);
  }
  /* Le plateau occupe presque toute la largeur de la photo 9:16 : photo et vidéo prennent toute la largeur
     de l'écran (rien n'est coupé sur les côtés), à la même hauteur qu'un cadrage à 58 % (58 % de l'écran
     moins 58 % de leur hauteur, 16/9 × 100vw). Leurs bords haut et bas se fondent dans le noir.
     Plancher : le haut du plateau (34 % de la hauteur de l'image, soit 60,44vw) ne remonte jamais au-dessus
     du bas du titre + 10 px. Bas du titre = 170 px (marge haute 104 + surtitre 44 + 22) + 2 lignes de
     0,98 × la taille du titre. Sans ce plancher, sur iPhone avec les barres de Safari (écran moins haut),
     le plateau passait sous « Tranché net. ». */
  .hero picture img,
  .hero-video {
    top: max(calc(58% - 103.1vw), calc(180px + 1.96 * clamp(46px, 13.4vw, 100px) - 60.44vw));
    bottom: auto;
    height: auto;
    aspect-ratio: 9 / 16;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 88%, transparent 100%);
  }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(12, 10, 10, 0.86) 0%, rgba(12, 10, 10, 0.5) 26%, rgba(12, 10, 10, 0) 42%),
      linear-gradient(0deg, rgba(12, 10, 10, 0.95) 0%, rgba(12, 10, 10, 0.55) 18%, rgba(12, 10, 10, 0) 32%);
  }
  .hero-anime .hero-spacer {
    height: calc(var(--ecran, 100svh) * 1.1);
  }
  .hero-inner {
    display: flex;
    flex: 1;
    padding-block: 104px 18px;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
  .eyebrow {
    margin-bottom: 22px;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 0.26em;
  }
  .hero h1 {
    font-size: clamp(46px, 13.4vw, 100px);
    white-space: normal;
  }
  .hero-text,
  .hero-actions .link {
    display: none;
  }
  .hero-actions {
    margin-top: auto;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero-foot {
    position: static;
    padding-bottom: 18px;
  }
  .hero-foot-inner {
    justify-content: center;
    gap: 8px 26px;
    padding-top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .hero-foot .hide-sm,
  .hero-anime .hero-cue {
    display: none;
  }
}

/* Téléphones très courts (iPhone SE avec les barres de Safari) : même en pleine largeur, le plateau
   passerait sous le bouton. Photo et vidéo rétrécissent juste assez pour que le plateau (32 % de leur
   hauteur) tienne entre le bas du titre et le haut du bouton (hauteur d'écran − 121 px), à 10 px de chacun ;
   elles restent centrées et leurs bords se fondent dans le noir. */
@media (max-width: 1100px) and (orientation: portrait) and (max-height: 640px) {
  .hero picture img,
  .hero-video {
    --titre: clamp(46px, 13.4vw, 100px);
    --largeur: clamp(55vw, calc((var(--ecran, 100svh) - 311px - 1.96 * var(--titre)) * 1.7578), 100vw);
    width: var(--largeur);
    margin-inline: auto;
    top: max(calc(58% - 1.0311 * var(--largeur)), calc(180px + 1.96 * var(--titre) - 0.6044 * var(--largeur)));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Téléphone */
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }
  html {
    scroll-padding-top: 70px;
  }
  .header-bar {
    width: calc(100% - 32px);
    min-height: 66px;
  }
  .brand {
    gap: 10px;
  }
  .brand-mark {
    width: 26px;
    height: 26px;
  }
  .brand-name {
    font-size: 19px;
    letter-spacing: 0.28em;
    margin-right: -0.28em;
  }
  .header-cta .btn {
    min-height: 40px;
    padding: 0 16px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
  }
  .section-head {
    display: block;
    margin-bottom: 40px;
  }
  .section-head .lead {
    margin-top: 22px;
  }
  .lead {
    font-size: 16px;
  }
  .manifesto {
    padding: 96px 0 84px;
  }
  .manifesto-text {
    font-size: clamp(27px, 7.4vw, 34px);
  }
  .promises {
    grid-template-columns: 1fr;
    margin-top: 64px;
  }
  .promises li,
  .promises li + li,
  .promises li:nth-child(n + 3) {
    margin-top: 0;
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .promises li:first-child {
    border-top: 0;
  }
  .promise-num {
    margin-bottom: 4px;
  }
  .craft,
  .menu,
  .platters,
  .order,
  .visit {
    padding: 96px 0;
  }
  .craft-photos {
    padding: 0 34px 70px 0;
  }
  .craft-photo-inset {
    width: 48%;
    border-width: 7px;
  }
  .steps li {
    grid-template-columns: 44px 1fr;
  }
  .tabs {
    flex-wrap: nowrap;
    gap: 0 28px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 18px 0;
    font-size: 11.5px;
    letter-spacing: 0.18em;
  }
  .dishes,
  .dishes[data-count="4"] {
    grid-template-columns: 1fr;
    border-left: 0;
  }
  .dish {
    border-right: 0;
  }
  .dish-link {
    padding: 22px 0 26px;
  }
  .dish-link:hover {
    background-color: transparent;
  }
  .dish-photo {
    aspect-ratio: 4 / 3.4;
  }
  .dish-photo img {
    object-position: 50% 58%;
  }
  .dish-name {
    font-size: 25px;
  }
  .menu-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .platter-body {
    padding: 26px 22px 26px;
  }
  .platter-price strong {
    font-size: 36px;
  }
  .platter-buy .btn {
    flex: 1;
  }
  .order-frame {
    padding: 12px 12px 22px;
  }
  .order-visual {
    aspect-ratio: 4 / 3.6;
  }
  .visit-photo {
    margin-bottom: 52px;
    aspect-ratio: 4 / 3;
  }
  .visit-photo::after {
    inset: 10px;
  }
  .visit-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .site-footer {
    padding: 90px 0 110px;
  }
  .order-bar {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 25;
    display: flex;
    transform: translateY(150%);
    visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .order-bar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.45s var(--ease), visibility 0s;
  }
  .order-bar .btn {
    flex: 1;
    min-height: 58px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 40px -10px rgba(0, 0, 0, 0.85);
  }
  .order-bar-total:not(:empty) {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 247, 240, 0.4);
    letter-spacing: 0.06em;
  }
  body:has(.order-bar.is-visible) .toast {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .cart-dialog {
    width: 100%;
    border-left: 0;
  }
  .drawer {
    padding-inline: 20px;
  }
  .slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}