.menu-page {
  overflow-x: hidden;
}

.menu-intro {
  background-color: var(--color-oat);
  padding-block-start: var(--space-3xl);
  padding-block-end: var(--space-2xl);
}

.menu-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.menu-intro__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
}

.menu-intro__label {
  margin-block-end: 0;
}

.menu-intro__title {
  margin-block-end: 0;
}

.menu-intro__separator {
  width: 80px;
  height: 2px;
  background-color: var(--color-moutarde);
  margin-block: var(--space-xs) var(--space-md);
}

.menu-intro__lead {
  margin-block-end: 0;
}

.menu-intro__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.menu-intro__list li {
  padding-inline-start: var(--space-lg);
  position: relative;
}

.menu-intro__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background-color: var(--color-moutarde);
  border-radius: 50%;
}

.menu-intro__text {
  margin-block-end: 0;
}

.menu-section {
  padding-block: var(--space-3xl);
}

.menu-section--oat {
  background-color: var(--color-oat);
}

.menu-section--dark {
  background-color: var(--color-brun-profond);
  color: var(--color-craie);
}

.menu-section--dark .menu-section__title,
.menu-section--dark .menu-subsection-title,
.menu-section--dark .menu-callout__title {
  color: var(--color-craie);
}

.menu-section--dark .menu-section__intro,
.menu-section--dark .menu-callout__text {
  color: var(--color-craie);
}

.menu-section--green {
  background-color: var(--color-vert-bouteille);
  color: var(--color-craie);
}

.menu-section--green .menu-section__title,
.menu-section--green .menu-subsection-title,
.menu-section--green .menu-callout__title {
  color: var(--color-craie);
}

.menu-section--green .menu-section__intro,
.menu-section--green .menu-callout__text {
  color: var(--color-craie);
}

.menu-section--brick {
  background-color: var(--color-brique);
  color: var(--color-craie);
}

.menu-section--brick .menu-section__title,
.menu-section--brick .menu-subsection-title,
.menu-section--brick .menu-callout__title {
  color: var(--color-craie);
}

.menu-section--brick .menu-section__intro,
.menu-section--brick .menu-callout__text {
  color: var(--color-craie);
}

.menu-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.menu-section__header .label {
  margin-block-end: 0;
}

.menu-section__title {
  margin-block-end: 0;
}

.menu-section__intro {
  max-width: 720px;
  margin-block-end: var(--space-xl);
}

.menu-subsection-title {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-md);
}

.menu-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.menu-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.menu-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.menu-list__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  color: inherit;
  min-width: 0;
  overflow-wrap: break-word;
}

.menu-list__dots {
  flex: 1 1 auto;
  min-width: var(--space-md);
  border-bottom: 2px dotted var(--color-brun-30);
  transform: translateY(-0.35em);
}

.menu-list--on-dark .menu-list__dots,
.menu-list--on-green .menu-list__dots {
  border-bottom-color: rgba(244, 237, 224, 0.4);
}

.menu-list__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.menu-callout {
  background-color: var(--color-craie);
  border: 1px solid var(--color-brun-15);
  border-inline-start: 4px solid var(--color-moutarde);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-block-end: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.menu-callout--brick {
  border-inline-start-color: var(--color-brique);
}

.menu-callout--moutarde {
  border-inline-start-color: var(--color-moutarde);
}

.menu-callout--poker {
  background-color: var(--color-craie);
  color: var(--color-brun-profond);
  border-inline-start-color: var(--color-brique);
}

.menu-callout--poker .menu-callout__title,
.menu-callout--poker .menu-callout__text,
.menu-callout--poker .menu-callout__phone {
  color: var(--color-brun-profond);
}

.menu-callout__title {
  margin-block-end: 0;
}

.menu-callout__text {
  margin-block-end: 0;
}

.menu-callout__phone {
  margin-block-end: 0;
}

.menu-callout__phone a {
  color: var(--color-mauve);
}

.menu-figure {
  margin-block-end: var(--space-xl);
}

.menu-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.menu-figure--square img {
  aspect-ratio: 1 / 1;
}

.menu-figure figcaption {
  margin-block-start: var(--space-xs);
}

.menu-poker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.menu-poker-text {
  min-width: 0;
}

.menu-poker-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.menu-poker-list li {
  padding-inline-start: var(--space-lg);
  position: relative;
}

.menu-poker-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background-color: var(--color-moutarde);
  border-radius: 50%;
}

.menu-reservation {
  padding-block: var(--space-3xl);
}

.menu-reservation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.menu-info-block {
  background-color: var(--color-craie);
  border-inline-start: 4px solid var(--color-moutarde);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.menu-info-block .menu-section__title {
  margin-block-end: 0;
}

.menu-info-block p {
  margin-block-end: 0;
}

.menu-info-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.menu-groups-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.menu-groups-block .menu-subsection-title {
  margin-block: 0;
}

.menu-groups-block p {
  margin-block-end: 0;
}

.menu-reservation-cta {
  display: flex;
  justify-content: center;
}

.menu-reservation-cta .btn {
  min-width: 240px;
}

@media (min-width: 768px) {
  .menu-intro {
    padding-block-start: var(--space-4xl);
    padding-block-end: var(--space-3xl);
  }

  .menu-intro__content {
    max-width: 760px;
  }

  .menu-section {
    padding-block: var(--space-4xl);
  }

  .menu-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .menu-poker-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: var(--space-2xl);
  }

  .menu-reservation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

@media (max-width: 767px) {
  .menu-intro__content {
    max-width: 100%;
  }

  .menu-list__name {
    font-size: 1.125rem;
  }

  .menu-list__price {
    font-size: 0.9375rem;
  }

  .menu-figure img {
    aspect-ratio: 3 / 2;
  }

  .menu-figure--square img {
    aspect-ratio: 1 / 1;
  }
}