/* 6.3. Transitions de page */
.content-wrapper-old, /* Pour animation de slide entre pages */
.content-wrapper-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform, opacity;
    box-sizing: border-box;
}
.slide-out-left { animation: slideOutLeft 0.4s forwards ease-in-out; }
.slide-in-from-right { animation: slideInFromRight 0.4s forwards ease-in-out; }
.slide-out-right { animation: slideOutRight 0.4s forwards ease-in-out; }
.slide-in-from-left { animation: slideInFromLeft 0.4s forwards ease-in-out; }
.slide-out-up { animation: slideOutUp 0.5s forwards ease-in-out !important; }
.slide-in-from-bottom { animation: slideInFromBottom 0.5s forwards ease-in-out !important; }

.content-container.fade-out-active { /* Fallback fade si pas de slide */
    opacity: 0;
    transition: opacity 0.15s ease-out;
}
.content-container.fade-in-active {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}
/* Désactivation des animations de boutons pendant la transition de page/pagination */
.pagination-inner.transitioning *,
.single-post-navigation.transitioning * {
    pointer-events: none !important;
    cursor: not-allowed !important;
}
.pagination-inner.transitioning .btn-animated-read-more span,
.single-post-navigation.transitioning .btn-animated-read-more span {
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}

/* ==========================================================================
   7. ANIMATIONS (KEYFRAMES)
   ========================================================================== */
@keyframes animate1 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes animate2 {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
@keyframes animate3 {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@keyframes animate4 {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-100%); }
}
@keyframes steam { /* Pour .login-button */
    0% { background-position: 0% 50%; }
    100% { background-position: -400% 50%; }
}

/* Loader Animations */
@keyframes spinPulse {
    0% { transform: scale(1.1);}
    70% { transform: scale(0.98);}
    100% { transform: scale(1.1);}
}
@keyframes spinoffPulse {
    0% { transform: rotate(0deg) scale(1);}
    10% { transform: rotate(90deg);}
    20% { transform: rotate(-90deg) scale(1.05);}
    40% { transform: rotate(180deg) scale(0.9);}
    70% { transform: rotate(-180deg) scale(1.05);}
    100% { transform: rotate(360deg) scale(1);}
}
@keyframes fade { /* Pour #mainText */
    0% { opacity: 1;}
    50% { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes loadbars { /* Pour .bars li */
    0% { height: 10px; }
    50% { height: 50px; }
    100% { height: 10px; }
}

/* Page Transition Animations */
@keyframes slideOutLeft {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(-100%, 0, 0); opacity: 0; }
}
@keyframes slideInFromRight {
    from { transform: translate3d(100%, 0, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutUp { /* Article Unique -> Liste */
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(0, -100vh, 0); opacity: 0; }
}
@keyframes slideInFromBottom { /* Article Unique -> Liste */
    from { transform: translate3d(0, 100vh, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* 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)
   ========================================================================== */