/**
 * Barba.js - Styles pour les transitions
 */

/* Container barba avec transition d'opacité */
[data-barba="container"] {
    transition: opacity 0.3s ease-in-out;
}

/* Animation de chargement (optionnel) */
.barba-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #000 0%, #666 50%, #000 100%);
    background-size: 200% 100%;
    animation: barba-loading 1s ease-in-out infinite;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}

.barba-loading.is-active {
    opacity: 1;
}

@keyframes barba-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Animation de fade pour les transitions */
.barba-fade-enter {
    opacity: 0;
}

.barba-fade-enter-active {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.barba-fade-exit {
    opacity: 1;
}

.barba-fade-exit-active {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Animation slide (optionnel) */
.barba-slide-enter {
    transform: translateX(100%);
}

.barba-slide-enter-active {
    transform: translateX(0);
    transition: transform 0.4s ease-out;
}

.barba-slide-exit {
    transform: translateX(0);
}

.barba-slide-exit-active {
    transform: translateX(-100%);
    transition: transform 0.4s ease-out;
}