/* ===== STYLE GLOBAL DU BODY ===== */
body {
  margin: 0; /* Supprime les marges par défaut du navigateur */
  font-family: 'Playfair Display', serif; /* Police principale élégante */
  background-color: #fff; /* Fond blanc */
  color: #111; /* Texte très sombre (presque noir) */
}

/* ===== TITRE DE LA PAGE DE MENU ===== */
.menu-title {
  text-align: center; /* Centre le texte horizontalement */
  padding: 50px 20px 20px; /* Espace intérieur : 50px en haut, 20px sur les côtés et en bas */
}

.menu-title h1 {
  font-size: 48px; /* Grande taille pour le titre */
  color: #bfa46f; /* Couleur dorée */
}

.menu-title p {
  font-size: 18px; /* Taille de texte normale pour la description */
  color: #555; /* Gris doux */
}

/* ===== GRILLE D'IMAGES DU MENU ===== */
.menu-grid {
  display: grid; /* Utilise CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Crée automatiquement autant de colonnes que possible avec un minimum de 280px par colonne */
  gap: 40px; /* Espace entre les éléments */
  max-width: 1200px; /* Largeur maximale de la grille */
  margin: 0 auto 60px; /* Centrée horizontalement + marge inférieure de 60px */
  padding: 20px; /* Espace intérieur de la grille */
  justify-items: center; /* Centre chaque élément horizontalement dans sa cellule */
}

.menu-grid img {
  width: 100%; /* Image prend toute la largeur de sa cellule */
  border-radius: 15px; /* Coins arrondis */
  box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Ombre douce sous l'image */
  transition: transform 0.3s ease; /* Animation fluide au survol */
}

.menu-grid img:hover {
  transform: scale(1.02); /* L'image grandit légèrement quand on la survole */
}

/* ===== STYLE DE LA LIGHTBOX (AGRANDISSEMENT D’IMAGE) ===== */
.lightbox {
  display: none; /* Cachée par défaut */
  position: fixed; /* Position fixe pour couvrir tout l'écran */
  z-index: 999; /* Toujours au-dessus des autres éléments */
  top: 0; left: 0; /* Commence dans le coin supérieur gauche */
  width: 100vw; height: 100vh; /* Prend toute la largeur et hauteur de la fenêtre */
  background: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
  justify-content: center; /* Centre l’image horizontalement */
  align-items: center; /* Centre l’image verticalement */
  cursor: zoom-out; /* Curseur indique qu’on peut cliquer pour fermer */
}

.lightbox img {
  max-width: 90%; /* Ne dépasse pas 90% de la largeur de la fenêtre */
  max-height: 90%; /* Ne dépasse pas 90% de la hauteur de la fenêtre */
  border-radius: 10px; /* Coins arrondis pour l'image agrandie */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Ombre blanche subtile autour de l'image */
  animation: fadeIn 0.3s ease; /* Animation d’apparition de l’image */
}

/* ===== ANIMATION FADE-IN POUR LA LIGHTBOX ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); } /* Début : légèrement plus petit et transparent */
  to   { opacity: 1; transform: scale(1); }    /* Fin : taille normale et complètement visible */
}
