/* Page-owned styles for /menu/ */
.menu-page {
  padding: 2rem 0;
  background-color: #09050E;
}

/* Introduction au menu */
.menu-intro {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
}

.menu-intro__text {
  min-width: 0;
}

.menu-intro__text h1 {
  margin-bottom: 1.5rem;
}

.menu-intro__lead {
  margin-bottom: 1rem;
}

.menu-intro__media {
  min-width: 0;
}

.menu-intro__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(0.4) sepia(0.1) hue-rotate(240deg) saturate(0.8);
  transition: filter 0.2s ease-in-out;
}

.menu-intro__image:hover {
  filter: grayscale(0.2) sepia(0.1) hue-rotate(240deg) saturate(0.9);
  animation: menu-glitch 0.3s ease-in-out;
}

@keyframes menu-glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

/* Catégories de menu */
.menu-category {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
}

.menu-category h2 {
  margin-bottom: 1.5rem;
}

.menu-category__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  background-color: #180F25;
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
}

.menu-item__info {
  min-width: 0;
}

.menu-item__info h3 {
  margin-bottom: 0.5rem;
}

.menu-item__info p {
  margin-bottom: 0;
}

.menu-item__price {
  font-weight: 600;
  color: #9D4EDD;
  white-space: nowrap;
}

.menu-item__tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #B8AEC4;
  font-style: italic;
}

.menu-drink {
  background-color: #180F25;
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
}

.menu-drink h3 {
  margin-bottom: 0.5rem;
}

.menu-drink p {
  margin-bottom: 0;
}

/* Suggestions du chef */
.chef-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
}

.chef-suggestion__media {
  min-width: 0;
}

.chef-suggestion__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(0.4) sepia(0.1) hue-rotate(240deg) saturate(0.8);
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.chef-suggestion__image:hover {
  transform: scale(1.02);
  filter: grayscale(0.2) sepia(0.1) hue-rotate(240deg) saturate(0.9);
}

.chef-suggestion__text {
  min-width: 0;
}

.chef-suggestion__text h2 {
  margin-bottom: 1rem;
}

.chef-suggestion__text h3 {
  margin-bottom: 0.75rem;
}

.chef-suggestion__text p {
  margin-bottom: 1rem;
}

.chef-suggestion__price {
  font-weight: 600;
  color: #9D4EDD;
}

/* Philosophie culinaire */
.culinary-philosophy {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}

.culinary-philosophy h2 {
  margin-bottom: 1.5rem;
}

.culinary-philosophy__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.culinary-philosophy__content h3 {
  margin-bottom: 0.5rem;
}

.culinary-philosophy__content p {
  margin-bottom: 0;
}

/* Informations pratiques */
.practical-info {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
}

.practical-info h2 {
  margin-bottom: 1.5rem;
}

.practical-info__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-item {
  background-color: #180F25;
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
}

.info-item h3 {
  margin-bottom: 0.5rem;
}

.info-item p {
  margin-bottom: 0;
}

.info-item a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-item a:hover {
  color: #B87AE8;
}

/* Expérience poker */
.poker-experience {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: 3rem;
}

.poker-experience__text {
  min-width: 0;
}

.poker-experience__text h2 {
  margin-bottom: 1rem;
}

.poker-experience__text h3 {
  margin-bottom: 0.75rem;
}

.poker-experience__text p {
  margin-bottom: 1rem;
}

.poker-experience__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.poker-experience__media {
  min-width: 0;
}

.poker-experience__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(0.4) sepia(0.1) hue-rotate(240deg) saturate(0.8);
  transition: filter 0.2s ease-in-out;
}

.poker-experience__image:hover {
  filter: grayscale(0.2) sepia(0.1) hue-rotate(240deg) saturate(0.9);
  animation: menu-glitch 0.3s ease-in-out;
}

/* Appel à l'action final */
.final-cta {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.final-cta h2 {
  margin-bottom: 0;
}

.final-cta p {
  margin-bottom: 0;
}

.final-cta__button {
  min-width: 200px;
}

/* Responsive */
@media (max-width: 1024px) {
  .menu-intro,
  .chef-suggestion,
  .poker-experience {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .menu-intro__text,
  .chef-suggestion__text,
  .poker-experience__text {
    order: 1;
  }

  .menu-intro__media,
  .chef-suggestion__media,
  .poker-experience__media {
    order: 2;
  }
}

@media (max-width: 768px) {
  .menu-page {
    padding: 1rem 0;
  }

  .menu-intro,
  .menu-category,
  .chef-suggestion,
  .culinary-philosophy,
  .practical-info,
  .poker-experience,
  .final-cta {
    padding-inline: 1rem;
    margin-bottom: 2rem;
  }

  .menu-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .menu-item__price {
    justify-self: start;
  }

  .final-cta__button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .menu-intro__text h1 {
    font-size: 2rem;
  }

  .menu-category h2,
  .chef-suggestion__text h2,
  .culinary-philosophy h2,
  .practical-info h2,
  .poker-experience__text h2,
  .final-cta h2 {
    font-size: 1.75rem;
  }
}