/* ==========================================================================
   QUICK SWING — LOADING STATES
   Skeleton, lazy fade-in, barre de progression de navigation
   ========================================================================== */

/* --- SKELETON SHIMMER --- */
@keyframes qs-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.qs-skeleton-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    min-height: 200px;
}

.qs-skeleton-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--qs-neon-a06) 40%,
        var(--qs-neon-a12) 50%,
        var(--qs-neon-a06) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: qs-shimmer 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Image cachée pendant le chargement */
.qs-skeleton-wrap img {
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
}

.qs-skeleton-wrap.qs-loaded img {
    opacity: 1;
}

.qs-skeleton-wrap.qs-loaded::after {
    display: none;
}


/* --- LAZY LOAD FADE-IN --- */
img.qs-lazy {
    opacity: 0;
    transition: opacity 0.6s ease;
}

img.qs-lazy.qs-loaded {
    opacity: 1;
}


/* --- BARRE DE PROGRESSION NEON --- */
#qs-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #00ffcc, #0099ff, #00ffcc);
    background-size: 200% 100%;
    animation: qs-shimmer 1.5s linear infinite;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
    transition: width 0.3s ease, opacity 0.4s ease;
    box-shadow: 0 0 8px var(--qs-neon-a80),
                0 0 20px var(--qs-neon-a40);
    transform-origin: left;
}

#qs-progress-bar.qs-bar-done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.5s ease 0.2s;
}

/* Décalage si admin bar présente */
.admin-bar #qs-progress-bar { top: 32px; }
@media (max-width: 782px) {
    .admin-bar #qs-progress-bar { top: 46px; }
}