/* 6.3. Transitions de page */ /* ========================================================================== PHASE 1 — View Transitions API ========================================================================== */ /* Fond du conteneur VT — visible quand le contenu rétrécit (cas C zoom-out) */::view-transition{background-color:var(--color-background)}/* Éléments fixed/persistants — capturés séparément,exclus du zoom et des slides. Règle:tout élément position:fixed doit avoir un view-transition-name unique ici,sinon il est inclus dans le snapshot root et subit toutes les animations de page. */ /* Présents sur toutes les pages → complètement stables (animation:none) */ .site-header{view-transition-name:site-header}#colophon{view-transition-name:site-footer}#scroll-top-btn{view-transition-name:scroll-top}#wpadminbar{view-transition-name:wpadminbar}.ttm-cst{view-transition-name:ttm-cst}::view-transition-old(site-header),::view-transition-new(site-header),::view-transition-old(site-footer),::view-transition-new(site-footer),::view-transition-old(scroll-top),::view-transition-new(scroll-top),::view-transition-old(wpadminbar),::view-transition-new(wpadminbar),::view-transition-old(ttm-cst),::view-transition-new(ttm-cst){animation:none}/* Cas A (slide horizontal):animations gérées par Web Animations API dans updateContentVT. On coupe le crossfade par défaut pour tous les pseudo-éléments root. */::view-transition-old(root),::view-transition-new(root){animation:none}@keyframes vt-slide-out-left{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(-100%,0,0);opacity:0}}@keyframes vt-slide-in-from-right{from{transform:translate3d(100%,0,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}@keyframes vt-slide-out-right{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@keyframes vt-slide-in-from-left{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}/* Désactivation visuelle des boutons pendant la transition de page/pagination */ .pagination-inner.transitioning *,.single-post-navigation.transitioning *{cursor:wait !important}.pagination-inner.transitioning .btn-animated-read-more::before,.single-post-navigation.transitioning .btn-animated-read-more::before{opacity:0 !important}/* ========================================================================== 7. ANIMATIONS (KEYFRAMES) ========================================================================== */ @keyframes header-border-brighten{from{filter:brightness(1)}to{filter:brightness(2)}}@keyframes deploy-halo{0%{filter:drop-shadow(0 0 0px transparent)}25%{filter:drop-shadow(0 0 18px rgba(119,92,49,0.8))}60%{filter:drop-shadow(0 0 7px rgba(119,92,49,0.4))}100%{filter:drop-shadow(0 0 0px transparent)}}@keyframes retract-halo{0%{filter:drop-shadow(0 0 15px rgba(119,92,49,0.65))}55%{filter:drop-shadow(0 0 5px rgba(119,92,49,0.5))}100%{filter:drop-shadow(0 0 0px transparent)}}@keyframes pulse-deploy{0%{filter:drop-shadow(0 0 0px rgba(24,180,255,0.8))}40%{filter:drop-shadow(0 0 8px rgba(24,180,255,0.5))}100%{filter:drop-shadow(0 0 18px rgba(24,180,255,0))}}@keyframes pulse-retract{0%{filter:drop-shadow(0 0 18px rgba(24,180,255,0.5))}60%{filter:drop-shadow(0 0 4px rgba(24,180,255,0.7))}100%{filter:drop-shadow(0 0 0px rgba(24,180,255,0))}}/* Hexagonal Loader Animations */ @keyframes hex-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes hex-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.85;transform:scale(0.97)}}@keyframes hex-fade{0%,100%{opacity:0.4}50%{opacity:1}}@keyframes hex-halo{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}/* 404 Light Mode Animations */ @keyframes fadeInTextLight404{1%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}70%{color:#ff005d;text-shadow:0px 0px 14px #ff005d}100%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}}@keyframes flicker4Light404{0%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}30%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}31%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}32%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}36%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}37%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}41%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}42%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}85%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}86%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}95%{color:#EDE0C8;text-shadow:0px 0px 4px #EDE0C8}96%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}100%{color:#ff005d;text-shadow:0px 0px 4px #ff005d}}@keyframes hueRotate{/* Utilisé par la 404,peut rester ou être adapté */ 0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(-15deg)}100%{filter:hue-rotate(0deg)}}/* ========================================================================== 8. RESPONSIVE DESIGN (MEDIA QUERIES) ========================================================================== */