/* ═══════════════════════════════════════════════════════════
   FOND VERT FEUTRÉ
═══════════════════════════════════════════════════════════ */
body {
    background:
      repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.032) 0px, rgba(0,0,0,0.032) 1px,
        transparent 1px, transparent 5px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0.032) 0px, rgba(0,0,0,0.032) 1px,
        transparent 1px, transparent 5px
      ),
      linear-gradient(160deg, #237a48 0%, #165c31 45%, #0f4525 100%);
  }
  
  /* ═══════════════════════════════════════════════════════════
     CONTENEUR DES BOULES
  ═══════════════════════════════════════════════════════════ */
  #balls-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  
  /* ═══════════════════════════════════════════════════════════
     BOULE
     Structure :
     .deco-ball
       .ball-stripe       (si rayée)
       .ball-white-disc
         .ball-num
  ═══════════════════════════════════════════════════════════ */
  .deco-ball {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
      inset -5px -8px 16px rgba(0, 0, 0, 0.58),
      inset 4px 5px 11px rgba(255, 255, 255, 0.14),
      4px 9px 18px rgba(0, 0, 0, 0.48),
      0 2px 5px rgba(0, 0, 0, 0.30);
    animation: ballFloat ease-in-out infinite;
  }
  
  .deco-ball::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 14%;
    width: 36%;
    height: 26%;
    background: radial-gradient(
      ellipse at 30% 30%,
      rgba(255,255,255,0.72) 0%,
      rgba(255,255,255,0.08) 60%,
      transparent 100%
    );
    border-radius: 50%;
    transform: rotate(-25deg);
    z-index: 3;
    pointer-events: none;
  }
  
  /* Boules rayées */
  .deco-ball.striped {
    background: #f3f3f3 !important;
  }
  
  .ball-stripe {
    position: absolute;
    left: 0;
    right: 0;
    top: 22%;
    height: 56%;
    border-radius: 4px;
    z-index: 1;
  }
  
  /* Disque blanc central */
  .ball-white-disc {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
      inset 0 1px 4px rgba(0,0,0,0.15),
      0 0 0 1px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  
  /* Numéro */
  .ball-num {
    font-weight: 900;
    line-height: 1;
    color: #111111;
    user-select: none;
    pointer-events: none;
    z-index: 3;
  }
  
  /* Boule 8 */
  .deco-ball.ball-eight {
    background: #111111 !important;
  }
  
  /* Animation légère */
  @keyframes ballFloat {
    0%   { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
    33%  { transform: translate(-50%, -50%) translateY(-5px) rotate(2deg); }
    66%  { transform: translate(-50%, -50%) translateY(3px) rotate(-1deg); }
    100% { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
  }
  
  /* ═══════════════════════════════════════════════════════════
     PAGE & CARTE MENU
  ═══════════════════════════════════════════════════════════ */
  .menu-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  
  .menu-card {
    width: min(100%, 520px);
    padding: 44px 36px 36px;
    border-radius: 26px;
    background: rgba(8, 28, 16, 0.84);
    border: 2px solid rgba(255,255,255,0.10);
    box-shadow:
      0 32px 80px rgba(0,0,0,0.60),
      inset 0 1px 0 rgba(255,255,255,0.06);
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .menu-subtitle {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7dcca0;
    margin-bottom: 10px;
  }
  
  .menu-card h1 {
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 12px;
  }
  
  .menu-description {
    font-size: 0.96rem;
    color: #aed4bc;
    max-width: 34ch;
    margin: 0 auto 32px;
    line-height: 1.65;
  }
  
  /* Boutons */
  .menu-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 14px 24px;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07);
    color: #e8f5ee;
    font-size: 1.05rem;
    font-weight: 700;
    transition:
      transform 150ms ease,
      background 150ms ease,
      border-color 150ms ease,
      box-shadow 150ms ease;
  }
  
  .menu-btn:hover,
  .menu-btn:focus-visible {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.40);
    outline: none;
  }
  
  .menu-btn:active {
    transform: translateY(0);
    box-shadow: none;
  }
  
  .menu-btn--primary {
    background: linear-gradient(135deg, #f5c842, #d4930f);
    border-color: transparent;
    color: #1b1203;
  }
  
  .menu-btn--primary:hover,
  .menu-btn--primary:focus-visible {
    background: linear-gradient(135deg, #ffd96a, #e8a928);
    border-color: transparent;
  }
  
  .btn-icon {
    font-size: 1.1rem;
    line-height: 1;
  }
  
  .menu-footer {
    margin-top: 28px;
    font-size: 0.80rem;
    color: #4a8c62;
    letter-spacing: 0.04em;
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .menu-card {
      padding: 32px 20px 28px;
      border-radius: 20px;
    }
  
    .menu-btn {
      min-height: 52px;
      font-size: 1rem;
    }
  }