/* Scroll fluide sur toute la page */
html {
  scroll-behavior: smooth;
}

/* Empêche le scroll horizontal sur mobile */
body {
  overflow-x: hidden;
}

/* ---- Carte Google Maps fictive ---- */
.fake-map {
  background:
    /* Grille de rues simulée en CSS */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 39px,
      #d1d5db 39px,
      #d1d5db 40px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 59px,
      #d1d5db 59px,
      #d1d5db 60px),
    /* Fond carte couleur pastel */
    linear-gradient(135deg, #e8f4f0 0%, #dde8f0 100%);
  position: relative;
}

/* Marqueur de position sur la carte fictive */
.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -110%);
  width: 36px;
  height: 36px;
  background: #3B5BDB;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: 0 4px 20px rgba(59, 91, 219, .4);
}

.map-pin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

/* Reflet doux sur les cartes menu */
.menu-card:hover {
  box-shadow: 0 8px 32px rgba(59, 91, 219, .10);
  transform: translateY(-2px);
}

.menu-card {
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Indicateur "Ouvert/Fermé" clignotant */
@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

.dot-open {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Hero background gradient */
.hero-bg {
  background: linear-gradient(135deg,
      #0f1923 0%,
      #1a1a2e 40%,
      #2a1f3d 70%,
      #1e2a4a 100%);
}

/* Decorative glowing elements */
.hero-bg::before {
  content: '';
  position: absolute;
  top: 1/4;
  right: 1/4;
  width: 96px;
  height: 96px;
  background: #3B5BDB;
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(32px);
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 1/4;
  left: 1/4;
  width: 80px;
  height: 80px;
  background: #fbbf24;
  opacity: 0.08;
  border-radius: 50%;
  filter: blur(32px);
}
/* ---- Menu Book ----*/

/* Le conteneur s'ouvre sur deux pages (320px x 2 = 640px) 
#menuBook {
    width: 640px !important;
    height: 400px !important;
    position: relative;
    display: block !important;
    margin: 0 auto !important; /* Centre parfaitement le livre dans ton grand cadre noir
}

/* Chaque page à l'intérieur fait la moitié de la largeur 
.page-menu {
    width: 320px !important;
    height: 400px !important;
    box-sizing: border-box;
    overflow: hidden;
}*/

/* ============================================================
   CARTE MENU IMMERSIVE — styles à ajouter dans style.css
   ============================================================ */

/* ── Spreads (double page) ── */
.menu-spread {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
}

.menu-spread--hidden {
    opacity: 0;
    pointer-events: none;
}

.menu-spread--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Animation feuilletage vers la droite (page suivante) */
.menu-spread--flip-out-next {
    animation: menuFlipNext 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animation feuilletage vers la gauche (page précédente) */
.menu-spread--flip-out-prev {
    animation: menuFlipPrev 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes menuFlipNext {
    0%   { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
    40%  { opacity: 0.3; transform: perspective(1200px) rotateY(-25deg); }
    100% { opacity: 0; transform: perspective(1200px) rotateY(-25deg); }
}

@keyframes menuFlipPrev {
    0%   { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
    40%  { opacity: 0.3; transform: perspective(1200px) rotateY(25deg); }
    100% { opacity: 0; transform: perspective(1200px) rotateY(25deg); }
}

/* ── Page crème (pages intérieures) ── */
.menu-page-cream {
    width: 100%;
    height: 100%;
    background: #fdfbf7;
    padding: 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Titre de catégorie ── */
.menu-category-title {
    font-family: sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
    color: #7c4e1a;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(180, 130, 50, 0.18);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

/* ── Liste de plats ── */
.menu-items-list {
    flex: 1;
    overflow: hidden;
}

.menu-item {
    margin-bottom: 12px;
}

.menu-item-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    color: #2c2621;
}

.menu-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(120, 80, 30, 0.28);
    margin: 0 3px;
    position: relative;
    top: -2px;
}

.menu-desc {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 9px;
    font-style: italic;
    color: rgba(44, 38, 33, 0.62);
    margin-top: 2px;
    line-height: 1.45;
}

/* ── Numéro de page ── */
.menu-page-num {
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 9px;
    font-style: italic;
    color: rgba(120, 80, 30, 0.42);
    margin-top: 8px;
    flex-shrink: 0;
}

/* ── Responsive : réduction sur tablette ── */
@media (max-width: 700px) {
    #menuBook {
        width: 340px !important;
        height: 440px !important;
    }
    .menu-spread {
        flex-direction: column;
    }
    .menu-spread > div {
        width: 100% !important;
        height: 50% !important;
    }
}