/* Mouvement des pages perks et glossaire (complète motion.css, sans JS).
   Les éléments .mp sont visibles par défaut ; l'entrée est une animation qui finit visible
   (fill-mode backwards : jamais de blanc si l'animation ne démarre pas). 2-3 propriétés : opacité, translate, bordure au survol. */
@keyframes mp-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.mp { animation: mp-in .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(min(var(--i, 0), 6) * 55ms + 80ms); }
@supports (animation-timeline: view()) {
  .mp { animation-timeline: view(); animation-range: entry 0% entry 55%; animation-delay: 0s; animation-duration: auto; animation-fill-mode: both; }
}
.chip.mp, .gl-item.mp, .tbl tbody tr.mp { transition: border-color .25s ease, background-color .25s ease, translate .25s ease; }
@media (hover: hover) {
  .chip.mp:hover, .gl-item.mp:hover { border-color: var(--survivor); translate: 0 -2px; }
  .tbl tbody tr.mp:hover { background: var(--surface); }
  .tbl tbody tr.mp:hover th { color: var(--survivor); }
}
@media (prefers-reduced-motion: reduce) {
  .mp { animation: none; opacity: 1; translate: none; }
  .chip.mp, .gl-item.mp, .tbl tbody tr.mp { transition: none; }
  .chip.mp:hover, .gl-item.mp:hover { translate: none; }
}