html.anim .rev {
  opacity: 0; translate: 0 36px;
  transition: opacity 1s var(--entree), translate 1.1s var(--entree);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.anim .rev.vu { opacity: 1; translate: 0 0; }
html.anim .rev.de-g { translate: -40px 0; }
html.anim .rev.de-d { translate: 40px 0; }
html.anim .rev.zoom { translate: 0 24px; scale: .96; transition-property: opacity, translate, scale; }
html.anim .rev.zoom.vu { scale: 1; }
html.anim .rev.de-g.vu, html.anim .rev.de-d.vu { translate: 0 0; }
@media (max-width: 980px) {
  html.anim .rev.de-g, html.anim .rev.de-d { translate: 0 36px; }
}
html.anim [data-dec] .cas {
  opacity: 0; translate: 0 14px;
  transition: opacity .7s var(--entree), translate .8s var(--entree);
  transition-delay: calc(120ms + var(--i, 0) * var(--pas, 110ms));
}
html.anim [data-dec].actif .cas { opacity: 1; translate: 0 0; }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes respire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes derive { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 3% -2%; scale: 1.06; } }
@keyframes pulse-point { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}