/* Navbar Style NiangProgrammeur - Effets Néon Cyan */

/* Effet néon sur les éléments */
.neon-glow {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.8),
                 0 0 20px rgba(6, 182, 212, 0.6),
                 0 0 30px rgba(6, 182, 212, 0.4);
}

.neon-border {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4),
                inset 0 0 15px rgba(6, 182, 212, 0.1);
}

/* Animation de pulsation néon */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.3),
                    0 0 20px rgba(6, 182, 212, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.6),
                    0 0 40px rgba(6, 182, 212, 0.4);
    }
}

.neon-pulse {
    animation: neon-pulse 2s ease-in-out infinite;
}

/* Correction Font Awesome pour navbar noire */
header i.fas,
header i.fa,
header i.far,
header i.fab {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
}

header i.fas::before,
header i.fa::before,
header i.far::before,
header i.fab::before {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    font-family: "Font Awesome 6 Free" !important;
}

/* Hover effect néon sur les liens */
header a:hover,
header button:hover {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
}

/* Dropdown avec effet de flou et néon */
[x-cloak] {
    display: none !important;
}

/* Scrollbar néon globale */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(17, 24, 39, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.6) 0%, rgba(59, 130, 246, 0.6) 100%);
    border-radius: 10px;
    border: 2px solid rgba(17, 24, 39, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.9) 0%, rgba(59, 130, 246, 0.9) 100%);
}

/* Animation d'apparition des dropdowns */
@keyframes dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Effet de brillance au hover */
@keyframes shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.shine-effect {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(6, 182, 212, 0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shine 3s infinite;
}

/* Transitions fluides */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge néon */
.neon-badge {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5),
                inset 0 0 5px rgba(6, 182, 212, 0.2);
}

/* Effet de scan ligne (optionnel) */
@keyframes scan-line {
    0% {
        top: -10%;
    }
    100% {
        top: 110%;
    }
}

/* Style néon sans flou */
.glass-neon {
    background: rgba(17, 24, 39, 0.95);
    border: 2px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3),
                inset 0 0 20px rgba(6, 182, 212, 0.05);
}

/* Performance optimizations */
.will-change-transform {
    will-change: transform, opacity;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .neon-glow {
        text-shadow: 0 0 5px rgba(6, 182, 212, 0.6);
    }
}

/* Print styles */
@media print {
    .neon-glow,
    .neon-border,
    .neon-pulse {
        text-shadow: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
}