:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-out: cubic-bezier(0, 0, .2, 1); }

@keyframes apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes eclosion { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glissade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.corps > * > * { animation: apparition .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.page__cote > *, .compte > *, .abo > * { animation: apparition .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.grille > .carte { animation: apparition .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.collection__grille > * { animation: eclosion .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.liste-conv > li { animation: glissade .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.abo__table tbody tr { animation: glissade .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 18ms); }
.offre__liste > li { animation: glissade .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.mur > * { animation: apparition .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.fil > .bulle { animation: apparition .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.fiche__galerie > * { animation: eclosion .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.fenetre__boite { animation: eclosion .25s var(--ease) backwards; }

.coque--arrivee .entete { animation: fondu .5s var(--ease-out) both; }
.coque--arrivee .barre__nav > *, .coque--arrivee .barre__liste > *, .coque--arrivee .barre__encart { animation: glissade .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms + 80ms); }
.coque--arrivee .onglets { animation: fondu .5s var(--ease-out) both; }

html:has(#entree:not(.entree--sortie)) .coque, html:has(#entree:not(.entree--sortie)) .coque * { animation-play-state: paused; }

.btn, .puce, .barre__lien, .liste-conv__lien, .carte__accroche { transition: background-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out), filter .16s var(--ease-out); }

.discussion--instant > *, .discussion--instant .fil > .bulle, .discussion--instant .fiche__galerie > * { animation: none; }

.feed__posts > *, .forum__fils > *, .relations > *, .packs > *, .offre-premium__avantages > * { animation: apparition .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.stories > *, .suggestions > *, .profil__traits > * { animation: glissade .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.profil__grille > * { animation: eclosion .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.x-liste > * { animation: apparition .35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }