/* Transition entre les pages (transitions.js) */
#app>header,body>header{view-transition-name:t2w-header}
::view-transition-group(t2w-header){animation:none}
::view-transition-old(t2w-header),::view-transition-new(t2w-header){animation:none;mix-blend-mode:normal}

/* cercle depuis le clic */
html[data-vt=circle]::view-transition-old(root){animation:vtSink .6s cubic-bezier(.65,0,.35,1) both}
html[data-vt=circle]::view-transition-new(root){animation:vtCircle .62s cubic-bezier(.65,0,.35,1) both}
@keyframes vtCircle{from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}to{clip-path:circle(var(--vt-r) at var(--vt-x) var(--vt-y))}}
@keyframes vtSink{to{transform:scale(.96);opacity:.55;filter:blur(1.5px)}}

/* retour arrière : fondu + léger glissement */
html[data-vt=fade]::view-transition-old(root){animation:vtFadeOut .28s ease both}
html[data-vt=fade]::view-transition-new(root){animation:vtFadeIn .38s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes vtFadeOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtFadeIn{from{opacity:0;transform:translateY(16px)}}

/* photo de carte → bannière du pays */
::view-transition-group(t2w-photo){animation-duration:.65s;animation-timing-function:cubic-bezier(.65,0,.35,1);z-index:5}
::view-transition-old(t2w-photo),::view-transition-new(t2w-photo){height:100%;object-fit:cover;overflow:hidden}

@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}