/* Page Menu, hero : bande de plats qui défile */
.mn-band {
  grid-column: 1 / -1; width: 100%; margin-top: clamp(28px, 4vw, 52px); overflow: hidden; padding: 8px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mn-band__track {
  display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content; margin: 0; padding: 0; list-style: none;
  animation: mn-band-slide 150s linear infinite;
}
.mn-band:hover .mn-band__track { animation-play-state: paused; }
.mn-band__track li {
  flex: none; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #152a25;
  border: 1px solid rgba(233, 207, 159, .5); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .85);
}
.mn-band__track li:nth-child(even) { transform: translateY(14px); }
.mn-band__track img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes mn-band-slide { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .mn-band__track li { width: 128px; border-radius: 14px; } .mn-band__track { animation-duration: 120s; } }
@media (prefers-reduced-motion: reduce) {
  .mn-band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .mn-band__track { animation: none; }
  .mn-band__track li[aria-hidden="true"] { display: none; }
}

/* le hero se referme sur son texte pour que la bande soit visible dès l'arrivée */
.mn-hero { min-height: 0; align-content: start; row-gap: 0; padding-bottom: clamp(20px, 3vw, 40px); }

/* Ordinateur : la bande occupe la partie vide à droite du titre, entre dans le cadre par la droite (A) et s'efface avant le titre (B) */
@media (min-width: 1081px) {
  .mn-band { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; padding: 18px 0 32px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 90%, transparent 100%); }
  .mn-band__track li { width: clamp(190px, 16vw, 240px); }
  .mn-hero__text { grid-column: 1; grid-row: 1; }
}

/* Médaillons ronds : plus de coins blancs autour des plats */
.mn-band__track li { border-radius: 50%; }
@media (max-width: 640px) { .mn-band__track li { border-radius: 50%; } }