@view-transition{navigation:auto}
.site-header{view-transition-name:journal-header}
main#contenu{view-transition-name:journal-page}
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.22,.75,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(journal-header),::view-transition-new(journal-header){animation:none;mix-blend-mode:normal}
::view-transition-old(journal-page){animation:journal-leave .4s cubic-bezier(.4,0,.4,1) both}
::view-transition-new(journal-page){animation:journal-arrive .65s cubic-bezier(.22,.75,.2,1) both}
::view-transition-group(story-photo){z-index:2;overflow:hidden;border-radius:4px;animation-duration:.72s}
::view-transition-old(story-photo),::view-transition-new(story-photo){width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;animation-duration:.55s}
::view-transition-old(story-photo){animation-name:photo-leave}
::view-transition-new(story-photo){animation-name:photo-arrive}
@keyframes journal-leave{to{opacity:0;transform:translateY(-32px)}}
@keyframes journal-arrive{from{opacity:0;transform:translateY(48px);clip-path:inset(3% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes photo-leave{to{opacity:0}}
@keyframes photo-arrive{from{opacity:0}to{opacity:1}}
html[data-jv-entry=pending] main#contenu{animation:journal-arrive .6s cubic-bezier(.22,.75,.2,1) both}
html.jv-leaving main#contenu{opacity:0;transform:translateY(-15px);transition:opacity .16s,transform .16s}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.site-header,main#contenu,[data-story-id]{view-transition-name:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html[data-jv-entry] main#contenu,html.jv-leaving main#contenu{animation:none!important;transform:none!important;opacity:1!important;transition:none!important}}
