/* =====================================================================
   ÉCRAN MENU — grille des catégories
   Les valeurs viennent de reglages.css (bloc .ecran-menu).
   ===================================================================== */

/* Fond derrière l'écran (bords éventuels sur les appareils hors format borne) */
html.ecran-menu {
  background-image: url('../assets/fond-menu.webp');
}

/* Zone qui défile : seule la grille bouge, le fond et le titre restent fixes.
   Sur un écran plus allongé, le fond (et son titre peint) grossit :
   la zone descend d'autant pour rester sous le titre. */
#vue-menu #zone{
  position: absolute;
  top: calc(var(--haut-zone) * var(--etirement));
  left: 0;
  right: 0;
  bottom: var(--bas-zone);
}

#vue-menu #grille{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grille-espace);
  padding: var(--grille-marges);
}

/* ---------- Une case ---------- */
#vue-menu .case{
  position: relative;
  height: var(--hauteur-case);
  transition: transform .15s ease;
  will-change: transform;                 /* calque à part : l'appui ne redessine rien */
}
#vue-menu .case:active{
  transform: scale(.96);
}

/* Ombre portée, visible quand la case est touchée (seule son opacité change) */
#vue-menu .case::before{
  content: "";
  position: absolute;
  inset: 6% 5% 4%;
  border-radius: 30px;
  box-shadow: var(--case-choisie-ombre);
  opacity: 0;
  transition: opacity .15s ease;
}
/* Case touchée : léger agrandissement + ombre plus marquée */
#vue-menu .case.choisie{
  transform: scale(var(--case-choisie-echelle));
}
#vue-menu .case.choisie::before{
  opacity: 1;
}

/* Cadre en papier déchiré */
#vue-menu .cadre{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
#vue-menu .cadre.miroir{
  transform: scaleX(-1);
}

/* Photo de la catégorie */
#vue-menu .photo{
  position: absolute;
  top: var(--photo-haut);
  left: var(--photo-cote);
  right: var(--photo-cote);
  height: var(--photo-hauteur);
  display: flex;
  align-items: center;
  justify-content: center;
}
#vue-menu .photo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6));
}

/* Étiquette : bande de papier déchiré (image) + nom en texte */
#vue-menu .etiquette{
  position: absolute;
  left: var(--etiquette-debord);
  right: var(--etiquette-debord);
  bottom: var(--etiquette-bas);
  height: var(--etiquette-hauteur);
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Nom : Bangers blanc, contour noir épais comme "NOTRE MENU",
   incliné comme la bande */
#vue-menu .etiquette span{
  font-family: var(--police-titre);
  font-size: var(--etiquette-texte);
  letter-spacing: 1.5px;
  line-height: 1;
  color: #fff;
  transform: rotate(var(--etiquette-rotation));
  text-shadow: var(--contour-epais);
}