/* ==========================================================
       VARIABLES ET COULEURS DYNAMIQUES
       ========================================================== */
    :root {
      --orange-primary: #F58220;
      --gold-accent: #D4A24C;
      --gold-light: #F3E5AB;
      --cream: #FAF6F0;
      --font-display: "Bebas Neue", Impact, sans-serif;
      --font-body: "DM Sans", -apple-system, sans-serif;
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

      /* Teintes de fond immersives par catégorie */
      --bg-entrees: #1B130E;        /* Brun épicé */
      --bg-viandes: #2A0F08;        /* Rouge bordeaux braise */
      --bg-accompagnements: #1A160A;/* Ambre terreux */
      
      --current-bg: var(--bg-entrees);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #140E0A;
      color: var(--cream);
      font-family: var(--font-body);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ==========================================================
       SECTION PLEINE LARGEUR (FULL BLEED)
       ========================================================== */
    .menu-section {
      position: relative;
      width: 100%;
      min-width: 100vw;
      padding: 80px 0 100px;
      background-color: var(--current-bg);
      transition: background-color 0.7s var(--ease-smooth);
      overflow: hidden;
    }

    .menu-section[data-theme="entrees"] {
      --current-bg: var(--bg-entrees);
    }
    .menu-section[data-theme="viandes"] {
      --current-bg: var(--bg-viandes);
    }
    .menu-section[data-theme="accompagnements"] {
      --current-bg: var(--bg-accompagnements);
    }

    /* En-tête centré */
    .menu-header {
      text-align: center;
      margin-bottom: 35px;
      padding-inline: 16px;
    }

    .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-accent);
      margin-bottom: 8px;
    }

    .display-title {
      font-family: var(--font-display);
      font-size: clamp(42px, 7.5vw, 98px);
      text-transform: uppercase;
      color: var(--orange-primary);
      line-height: 0.95;
      letter-spacing: 0.02em;
    }

    /* ==========================================================
       ONGLETS : STRICTEMENT SUR UNE SEULE LIGNE (MOBILE & DESKTOP)
       ========================================================== */
    .category-tabs-wrapper {
      width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 0 16px;
      margin-bottom: 45px;
    }
    .category-tabs-wrapper::-webkit-scrollbar {
      display: none;
    }

    .category-tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap; /* Empêche le retour à la ligne */
      gap: clamp(10px, 3.5vw, 42px);
      width: max-content;
      margin-inline: auto;
    }

    .tab-btn {
      background: none;
      border: none;
      font-family: var(--font-display);
      font-size: clamp(14px, 3.8vw, 48px); /* S'adapte parfaitement à l'écran mobile */
      color: rgba(250, 246, 240, 0.45);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: clamp(4px, 1vw, 10px);
      padding-bottom: 6px;
      white-space: nowrap; /* Aucun mot coupé */
      flex-shrink: 0;
      border-bottom: 3px solid transparent;
      transition: color 0.3s ease, border-color 0.3s ease;
    }

    .tab-btn .badge-count {
      font-family: var(--font-body);
      font-size: clamp(10px, 1.8vw, 13px);
      font-weight: 800;
      background: rgba(255, 255, 255, 0.16);
      color: var(--cream);
      padding: 2px 7px;
      border-radius: 999px;
      line-height: 1;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .tab-btn.active {
      color: var(--cream);
      border-bottom-color: var(--cream);
    }

    .tab-btn.active .badge-count {
      background: var(--orange-primary);
      color: #000;
    }

    /* ==========================================================
       CARROUSEL PLEIN ÉCRAN (BORD À BORD)
       ========================================================== */
    .carousel-outer {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    /* Dégradés d'estompage à gauche et à droite style Impossible Foods */
    .carousel-outer::before,
    .carousel-outer::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: clamp(40px, 8vw, 140px);
      z-index: 5;
      pointer-events: none;
      transition: background 0.7s var(--ease-smooth);
    }

    .carousel-outer::before {
      left: 0;
      background: linear-gradient(to right, var(--current-bg) 0%, transparent 100%);
    }

    .carousel-outer::after {
      right: 0;
      background: linear-gradient(to left, var(--current-bg) 0%, transparent 100%);
    }

    /* Flèches de navigation */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(16, 11, 8, 0.75);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.25s ease;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    }

    .carousel-arrow:hover {
      background: var(--orange-primary);
      color: #000;
      border-color: var(--orange-primary);
      transform: translateY(-50%) scale(1.1);
    }

    .carousel-arrow.prev { left: 20px; }
    .carousel-arrow.next { right: 20px; }

    @media (max-width: 768px) {
      .carousel-arrow { display: none; } /* Navigation tactile au doigt sur mobile */
    }

    /* Fenêtre de défilement */
    .carousel-viewport {
      width: 100%;
      overflow-x: auto;
      scroll-behavior: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 20px 0 35px;
      cursor: grab;
    }
    .carousel-viewport::-webkit-scrollbar {
      display: none;
    }
    .carousel-viewport:active {
      cursor: grabbing;
    }

    /* Piste contenant les cartes */
    .carousel-track {
      display: flex;
      gap: clamp(18px, 2.5vw, 32px);
      width: max-content;
      padding-inline: clamp(24px, 6vw, 100px); /* Laisse voir le premier et le dernier plat */
      transition: opacity 0.3s ease;
    }

    /* ==========================================================
       CARTE PRODUIT : FORME COUSSIN ET HOVER INTERACTIF
       ========================================================== */
    .dish-card {
      position: relative;
      flex: 0 0 clamp(260px, 22vw, 320px);
      background: #0E0907;
      border-radius: 28px;
      padding: 24px 18px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 420px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.06);
      transition: transform 0.4s var(--ease-spring), border-color 0.3s ease, box-shadow 0.4s ease;
      user-select: none;
    }

    .dish-card:hover {
      transform: translateY(-10px);
      border-color: var(--orange-primary);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    }

    /* Forme coussin organique derrière le plat */
    .cushion-shape {
      position: absolute;
      top: 14%;
      left: 50%;
      transform: translateX(-50%);
      width: 210px;
      height: 210px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 40% 60% 63% 37% / 41% 44% 56% 59%;
      z-index: 1;
      transition: transform 0.5s ease, background 0.4s ease;
    }

    .dish-card:hover .cushion-shape {
      transform: translateX(-50%) rotate(20deg) scale(1.15);
      background: rgba(245, 130, 32, 0.14);
    }

    /* Photo du plat */
    .dish-media {
      position: relative;
      width: 190px;
      height: 190px;
      z-index: 2;
      margin-bottom: 16px;
    }

    .dish-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      transition: transform 0.5s var(--ease-spring);
    }

    .dish-card:hover .dish-img {
      transform: scale(1.08);
    }

    /* Vignette ingrédient qui surgit au survol */
    .ingredient-badge {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: 3px solid var(--gold-accent);
      background: #140E0A;
      padding: 3px;
      opacity: 0;
      transform: scale(0.5) rotate(-25deg);
      transition: all 0.4s var(--ease-spring);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
      z-index: 3;
    }

    .ingredient-badge img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .ingredient-name {
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold-accent);
      color: #000;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      pointer-events: none;
    }

    .dish-card:hover .ingredient-badge {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    /* Titre et Prix */
    .dish-info {
      z-index: 2;
      width: 100%;
    }

    .dish-name {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.2vw, 26px);
      line-height: 1.1;
      color: var(--cream);
      margin-bottom: 12px;
    }

    .dish-price {
      display: inline-block;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(212, 162, 76, 0.15);
      color: var(--gold-light);
      font-size: 13px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .dish-card:hover .dish-price {
      background: var(--orange-primary);
      color: #000;
      transform: scale(1.05);
    }

    /* Indicateurs de progression (Dots) */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 15px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .dot.active {
      background: var(--orange-primary);
      width: 24px;
      border-radius: 999px;
    }