/* Big M — produits d'une catégorie : filtres par viande et par allergène, groupes par
   sous-catégorie, vignettes, message quand rien ne correspond.
   Repris de prototype/pages.py (CATEG_CSS, après site.css comme dans le prototype) et,
   d'abord, du bloc « animations des boutons » de site.css : pastilles et enfoncement des vignettes
   (@keyframes pop : base.css du thème). Le filtre est dans assets/js/filtres.js. */

/* animations (site.css) */
.product:active { transform: scale(.97); transition-duration: .1s; }
.chip { transition: background-color .18s ease, color .18s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.chip:active { transform: scale(.92); }
.chip[aria-pressed="true"] { animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }

/* page d'une catégorie (CATEG_CSS) */
.filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 8px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(43,20,6,.35); font-weight: 600; transition: background-color .18s ease, color .18s ease; }
.chip:hover { background: var(--tile); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.allergy { background: #fff; border-radius: var(--radius); padding: 22px; margin-top: 14px; display: none; flex-direction: column; gap: 14px; }
.allergy[data-open="true"] { display: flex; }
.allergy h2 { font-size: 22px; }
.allergy .chip[aria-pressed="true"] { background: var(--btn); text-decoration: line-through; }
.allergy small { color: var(--muted); }
.group { margin-top: 36px; }
.group h2 { font-size: 30px; margin-bottom: 16px; }
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.product { background: #fff; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; position: relative; transition: transform .2s var(--ease); }
.product:hover { transform: translateY(-3px); }
.product:hover .product__name { color: var(--btn); }
.product__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; min-height: 2.3em; }
.product__img { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; z-index: 1; top: 10px; left: 10px; background: var(--yellow); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 13px; }
.empty { display: none; margin-top: 36px; background: #fff; border-radius: var(--radius); padding: 32px; text-align: center; }
.empty[data-show="true"] { display: block; }
/* styles en ligne du message, dans le prototype */
.empty h2 { font-size: 26px; }
.empty p { margin: 8px 0 16px; color: var(--muted); }
[hidden] { display: none !important; }

/* nouveautés : la vignette se secoue trois fois quand elle apparaît (classe is-new, Réglages Big M →
   La carte), en 4,5 s au plus (WCAG 2.2.2 : pas de mouvement automatique de plus de 5 s).
   rotate et translate s'ajoutent aux transform de l'apparition, du survol et de l'appui. */
@media (prefers-reduced-motion: no-preference) {
  .js .product.is-new.is-in { animation: bigm-secousse 1.5s ease-in-out calc(.75s + var(--i, 0) * 70ms) 3; }
}
@keyframes bigm-secousse {
  0%, 40%, 100% { rotate: 0deg; translate: 0 0; }
  6% { rotate: -3deg; translate: -3px 0; }
  14% { rotate: 3deg; translate: 3px 0; }
  22% { rotate: -2.5deg; translate: -2px 0; }
  30% { rotate: 1.5deg; translate: 1px 0; }
  36% { rotate: -.5deg; translate: 0 0; }
}
@media (max-width: 960px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product { padding: 12px; }
  .product__name { font-size: 17px; }
}