/* ==========================================================================
   TRIOPARC — Restaurant (Menus / Ambiance / Zones sociales)
   Source : Figma « Restaurant Menus v1 » 326:2, « Ambiance v1 » 327:2,
            « Zones sociales v1 » 327:146 — même page, trois onglets.
   ========================================================================== */

/* ---------- HERO (commun aux trois onglets) ---------- */
.resto-hero {
  position: relative;
  z-index: 2;
  height: 944px;
  display: flex;
  align-items: center;
  background: var(--bg-1);
  /* Courbe du bas : masque Figma (rect 1920×834 + ellipse 2800×808, y 136) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%222800%22 height=%22944%22 viewBox=%220 0 2800 944%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2360 245.938C2630.89 319.61 2800 424.106 2800 540C2800 763.123 2173.2 944 1400 944C626.801 944 0 763.123 0 540C0 424.106 169.107 319.61 440 245.938V0H2360V245.938Z%22 fill=%22%23D9D9D9%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%222800%22 height=%22944%22 viewBox=%220 0 2800 944%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2360 245.938C2630.89 319.61 2800 424.106 2800 540C2800 763.123 2173.2 944 1400 944C626.801 944 0 763.123 0 540C0 424.106 169.107 319.61 440 245.938V0H2360V245.938Z%22 fill=%22%23D9D9D9%22/%3E%3C/svg%3E");
  -webkit-mask-size: max(2800px, 145.84%) 100%;
  mask-size: max(2800px, 145.84%) 100%;
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.resto-hero__media {
  position: absolute;
  top: 0; bottom: 0;
  left: 38.54%;      /* 740 / 1920 */
  width: 61.46%;     /* 1180 / 1920 */
  background: linear-gradient(180deg, #1a2450, #0a1024);
}
.resto-hero__media img, .resto-hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* VOILE — fusion de l'image vers la gauche */
.resto-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000 70.7%);
}
/* Dégradé — voile de gauche (vertical + 2 radiaux violets + horizontal) */
.resto-hero__voile {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 5, 13, 0.88) 0%, rgba(3, 5, 13, 0.28) 10%, rgba(3, 5, 13, 0) 20%, rgba(3, 5, 13, 0) 84%, rgba(3, 5, 13, 0.42) 100%),
    radial-gradient(576px 321px at 14% 86%, rgba(201, 92, 255, 0.22) 0%, rgba(201, 92, 255, 0.1364) 40%, rgba(201, 92, 255, 0.0484) 70%, rgba(201, 92, 255, 0) 100%),
    radial-gradient(806px 661px at 30% 44%, rgba(138, 92, 255, 0.62) 0%, rgba(138, 92, 255, 0.3844) 40%, rgba(138, 92, 255, 0.1364) 70%, rgba(138, 92, 255, 0) 100%),
    linear-gradient(90deg, rgb(10, 15, 40) 0%, rgb(21, 15, 62) 26%, rgba(27, 18, 72, 0.9) 38.5%, rgba(23, 26, 68, 0.52) 47%, rgba(12, 20, 50, 0.16) 55%, rgba(6, 11, 28, 0) 63%, rgba(6, 11, 28, 0) 100%);
}
.resto-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.resto-hero__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.resto-hero__eyebrow { line-height: 1.6; text-shadow: none; }
.resto-hero__title {
  font-size: 80px;
  line-height: 1.02;
  letter-spacing: -0.8px;
  color: var(--txt-principal);
  text-shadow: 0 0 64px rgba(255, 198, 58, 0.2);
  white-space: nowrap;
}
.resto-hero__title .grad-text {
  background-image: linear-gradient(90deg, #ffc63a 0%, #ff6fa8 100%);
  filter: drop-shadow(0 0 64px rgba(255, 198, 58, 0.2));
}
.resto-hero__sub {
  max-width: 640px;
  font-size: 20px;
  line-height: 1.65;
  color: var(--txt-doux);
}
.resto-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Indicateur de défilement */
.resto-hero__scroll {
  position: absolute;
  left: 50%;
  top: 840px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #d1def5;
}
.resto-hero__scroll-label { display: flex; flex-direction: column; align-items: center; gap: 10px; white-space: nowrap; }
.resto-hero__scroll-label span:first-child { font-size: 12px; letter-spacing: 4.08px; }
.resto-hero__scroll-label span:last-child { font-size: 26px; font-weight: 300; line-height: 1; animation: resto-bob 2.2s ease-in-out infinite; }
.resto-hero__light {
  width: 246px; height: 3px;
  background: linear-gradient(90deg, rgba(15, 28, 61, 0) 0%, rgba(56, 198, 240, 0.55) 28%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 111, 168, 0.55) 72%, rgba(15, 28, 61, 0) 100%);
  box-shadow: 0 -8px 60px 6px rgba(140, 102, 255, 0.5), 0 0 26px 0 rgba(255, 255, 255, 0.45);
}
@keyframes resto-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- ONGLETS SECTION ---------- */
.resto-tabs {
  /* Le fond remonte derrière la courbe du hero (la maquette laisse voir la masse chaude sous la courbe) */
  margin-top: -140px;
  padding-top: 140px;
  background: linear-gradient(180deg, #1c163f 0%, #171540 12%, #0a0e28 72%, #060a1b 92%, var(--bg-7) 100%);
}
.resto-tabs .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  padding-top: 140px;
  padding-bottom: 140px;
}
/* Masse fluide chaude (jaune resto), centrée vers (700, 120) de la section */
.resto-blob {
  left: -150px;
  top: -290px;
  width: 1700px;
  height: 1100px;
  background: radial-gradient(ellipse closest-side, rgba(255, 186, 56, 0.26) 0%, rgba(255, 186, 56, 0.19) 28%, rgba(255, 186, 56, 0.08) 58%, rgba(255, 186, 56, 0) 80%);
}

/* Onglets */
.resto-tabs__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resto-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--txt-discret);
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.resto-tab:hover { color: var(--txt-doux); border-color: rgba(255, 255, 255, 0.24); }
.resto-tab:focus-visible { outline: 2px solid rgba(160, 107, 255, 0.7); outline-offset: 3px; }
.resto-tab.is-active, .resto-tab[aria-selected="true"] {
  background: var(--surface-pill);
  border-color: var(--neon-violet);
  box-shadow: 0 0 26px 0 rgba(160, 107, 255, 0.26);
  color: #fff;
}

/* Panneaux */
.resto-panel { width: 100%; }
.resto-panel[hidden] { display: none; }
.resto-panel.is-entering { animation: resto-fade .45s ease both; }
@keyframes resto-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ----- Vue — Menus ----- */
.resto-menus { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; }
.resto-menus__cols { display: flex; align-items: flex-start; gap: 80px; width: 100%; }
.resto-menus__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.resto-cat { display: flex; flex-direction: column; width: 100%; }
.resto-cat__title {
  padding-bottom: 18px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.44px;
  color: #fff;
  text-transform: uppercase;
}
.resto-cat__filet {
  width: 100%; height: 2px;
  background: linear-gradient(90deg, rgba(160, 107, 255, 0.9) 0%, rgba(160, 107, 255, 0.05) 100%);
}
.resto-cat__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 20px;
  line-height: 1.4;
}
.resto-cat__name { color: var(--txt-principal); }
.resto-cat__price { font-weight: 500; color: var(--neon-jaune); white-space: nowrap; }

/* ----- Vue — Ambiance ----- */
.resto-ambiance { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.resto-ambiance__grid { display: flex; align-items: flex-start; gap: 80px; width: 100%; }
.resto-visuel {
  --c: 255, 198, 58;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 460px;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1224;
  border: 1px solid rgba(255, 255, 255, 0.07);
  isolation: isolate;
}
.resto-visuel--rose { --c: 255, 111, 168; }
.resto-visuel__photo {
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
  transition: transform .6s ease;
}
.resto-visuel:hover .resto-visuel__photo { transform: scale(1.03); }
/* VOILE — dégradé de scène */
.resto-visuel__voile {
  position: absolute; inset: -1px;
  background: linear-gradient(180deg, rgba(6, 11, 28, 0) 0%, rgba(6, 11, 28, 0.78) 100%);
}
/* Liseré lumineux */
.resto-visuel__lisere {
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--glow, var(--c)), 0.95) 0%, rgba(var(--glow, var(--c)), 0) 100%);
}
.resto-visuel__legende {
  position: absolute;
  left: 30px; bottom: 38px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.resto-ambiance__texte {
  max-width: 900px;
  font-size: 20px;
  line-height: 1.65;
  color: var(--txt-doux);
}

/* ----- Vue — Zones sociales ----- */
.resto-zones { display: flex; flex-direction: column; align-items: flex-start; gap: 46px; }
.resto-zones__liste { display: flex; flex-direction: column; width: 100%; }
.resto-zone {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  width: 100%;
  padding: 34px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.resto-zone:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.resto-zone__num {
  flex: none;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1.12px;
  color: var(--neon-jaune);
  opacity: 0.9;
  text-shadow: 0 0 26px rgba(255, 198, 58, 0.28);
  white-space: nowrap;
}
.resto-zone__texte { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.resto-zone__titre { font-size: 26px; font-weight: 500; line-height: 1.12; color: #fff; }
.resto-zone__desc { font-size: 20px; line-height: 1.55; color: var(--txt-doux); }
.resto-zones__note { font-size: 17px; line-height: 1.5; color: var(--txt-discret); white-space: pre-wrap; }
.resto-zones__note a {
  color: var(--neon-jaune);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: opacity .2s ease;
}
.resto-zones__note a:hover { opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  .resto-hero__title { font-size: 64px; }
  .resto-menus__cols, .resto-ambiance__grid { gap: 48px; }
}
@media (max-width: 1280px) {
  .resto-hero { height: auto; min-height: 860px; padding-block: 140px 150px; }
  .resto-hero__scroll { top: auto; bottom: 48px; }
}
@media (max-width: 1024px) {
  .resto-menus__cols { flex-direction: column; gap: 56px; }
  .resto-ambiance__grid { flex-direction: column; gap: 32px; }
  .resto-visuel { width: 100%; height: 380px; }
  .resto-zone__texte { max-width: none; }
}
@media (max-width: 720px) {
  .resto-hero { min-height: 0; padding-block: 120px 120px; -webkit-mask-size: 300% 100%; mask-size: 300% 100%; }
  .resto-hero__media { left: 0; width: 100%; opacity: .55; }
  .resto-hero__title { font-size: 44px; white-space: normal; }
  .resto-hero__sub { font-size: 18px; }
  .resto-hero__scroll { display: none; }
  .resto-tabs .container { padding-top: 90px; padding-bottom: 90px; gap: 44px; }
  .resto-tab { padding: 11px 20px; font-size: 15px; }
  .resto-cat__title { font-size: 20px; }
  .resto-cat__item { font-size: 17px; padding: 14px 0; }
  .resto-visuel { height: 260px; }
  .resto-visuel__legende { left: 20px; bottom: 24px; font-size: 17px; }
  .resto-ambiance__texte, .resto-zone__desc { font-size: 17px; }
  .resto-zone { gap: 20px; padding: 26px 0; }
  .resto-zone__num { font-size: 40px; }
  .resto-zone__titre { font-size: 22px; }
  .resto-zones__note { white-space: normal; }
}

/* Lueur mauve pour les éléments jaunes par défaut (sans variante de couleur) */
.resto-visuel:not([class*="resto-visuel--"]) { --glow: 160, 107, 255; }