/* Evening in Black - CSS Principal */

@import url('https://fonts.cdnfonts.com/css/nexa-bold');
@import url('https://fonts.cdnfonts.com/css/nexa-light');

/* Configuration de base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nexa Light', 'Nexa', Arial, sans-serif !important;
}

* {
    font-family: 'Nexa Light', 'Nexa', Arial, sans-serif !important;
}

/* Classes utilitaires */
.glass-effect {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.focus-visible {
    outline: none;
    ring: 2px solid rgb(250 204 21);
    ring-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.font-nexa {
    font-family: 'Nexa Bold', 'Nexa', Arial, sans-serif !important;
    font-weight: bold !important;
}

h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, li, ul, ol {
    font-family: 'Nexa Light', 'Nexa', Arial, sans-serif !important;
}

.border-dashed {
    border-style: dashed;
    stroke-dasharray: 2 4;
}

/* Couleurs personnalisées */
.bg-eib-red { background-color: #cc0001; }
.bg-eib-red:hover { background-color: #b30000; }
.text-eib-gold { color: rgb(250 204 21); }
.bg-eib-gold { background-color: rgb(250 204 21); }
.border-eib-gold { border-color: rgb(250 204 21); }
.bg-eib-black { background-color: #000000; }

/* Animations */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll {
    animation: scroll 20s linear infinite;
    will-change: transform;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.02); }
}

@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), 0 0 60px rgba(250, 204, 21, 0.1); 
    }
    50% { 
        box-shadow: 0 0 60px rgba(250, 204, 21, 0.8), 0 0 100px rgba(250, 204, 21, 0.3); 
    }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounce-in {
    0% { opacity: 0; transform: translateY(15px); }
    60% { opacity: 1; transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes bounce-in-mobile {
    0% { opacity: 0; transform: translateY(0.5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes rotate-border {
    0% { 
        border-color: rgba(250, 204, 21, 0.3); 
        box-shadow: 0 0 20px rgba(250, 204, 21, 0.2); 
    }
    50% { 
        border-color: rgba(250, 204, 21, 0.8); 
        box-shadow: 0 0 40px rgba(250, 204, 21, 0.5); 
    }
    100% { 
        border-color: rgba(250, 204, 21, 0.3); 
        box-shadow: 0 0 20px rgba(250, 204, 21, 0.2); 
    }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Classes d'animation */
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-scale-in { animation: scale-in 0.6s ease-out; }
.animate-bounce-in { animation: bounce-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-rotate-border { animation: rotate-border 3s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.6s ease-out; }
.animate-fade-in { animation: fade-in 0.8s ease-out; }

@media (max-width: 768px) {
    .animate-bounce-in { 
        animation: bounce-in-mobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); 
    }
}

/* Optimisation pour les performances */
.gallery-container {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.hero-stat {
    animation: scale-in 0.6s ease-out;
}

.hero-stat:nth-child(1) { animation-delay: 0.4s; }
.hero-stat:nth-child(2) { animation-delay: 0.5s; }
.hero-stat:nth-child(3) { animation-delay: 0.6s; }

/* Styles pour les formulaires */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-yellow-400 bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all duration-300;
}

.form-textarea {
    @apply form-input resize-none min-h-[120px];
}

.btn-primary {
    @apply bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-6 py-3 rounded-lg font-bold transition-all duration-300 hover:scale-105 shadow-lg;
}

.btn-secondary {
    @apply border-2 border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-900 px-6 py-3 rounded-lg font-bold transition-all duration-300 hover:scale-105;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold transition-all duration-300 hover:scale-105 shadow-lg;
}

/* Styles pour les cartes */
.card {
    @apply bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-700 hover:border-yellow-400;
}

.card-header {
    @apply border-b border-gray-700 pb-4 mb-4;
}

.card-title {
    @apply text-xl font-semibold text-yellow-400;
}

/* Styles pour les modales */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply flex justify-between items-center p-6 border-b border-gray-700;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply flex justify-end space-x-4 p-6 border-t border-gray-700;
}

/* Styles pour les notifications */
.notification {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-4 transform transition-all duration-300;
}

.notification.success {
    @apply border-green-500 bg-green-900 bg-opacity-20;
}

.notification.error {
    @apply border-red-500 bg-red-900 bg-opacity-20;
}

.notification.warning {
    @apply border-yellow-500 bg-yellow-900 bg-opacity-20;
}

.notification.info {
    @apply border-blue-500 bg-blue-900 bg-opacity-20;
}

/* Styles pour les tableaux */
.table {
    @apply w-full bg-gray-800 rounded-lg overflow-hidden;
}

.table th {
    @apply bg-gray-700 px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300 border-t border-gray-700;
}

.table tr:hover {
    @apply bg-gray-700;
}

/* Styles pour les badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge.success {
    @apply bg-green-100 text-green-800;
}

.badge.error {
    @apply bg-red-100 text-red-800;
}

.badge.warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge.info {
    @apply bg-blue-100 text-blue-800;
}

/* Responsive */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .hero-stat {
        @apply text-base;
    }
    
    .modal-content {
        @apply mx-4;
    }
}

/* Styles pour l'impression */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .bg-gray-900,
    .bg-gray-800,
    .bg-gray-700 {
        background: white !important;
        color: black !important;
    }
}
/* Infinite Scroll Carousel */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

.carousel-track-infinite:hover {
    animation-play-state: paused;
}

/* Styles pour le blog */
.article-content h1, 
.article-content h2, 
.article-content h3, 
.article-content h4 {
    @apply font-bold text-yellow-400 mb-4 mt-6;
}

.article-content h1 { @apply text-3xl; }
.article-content h2 { @apply text-2xl; }
.article-content h3 { @apply text-xl; }
.article-content h4 { @apply text-lg; }
.article-content p { @apply mb-4 leading-relaxed; }
.article-content ul, .article-content ol { @apply mb-4 pl-6; }
.article-content li { @apply mb-2; }
.article-content blockquote { @apply border-l-4 border-yellow-400 pl-4 italic my-6 text-gray-300; }
.article-content strong { @apply font-bold text-yellow-400; }
.article-content a { @apply text-yellow-400 hover:text-yellow-300 underline; }

.blog-card {
    @apply bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-yellow-400 transition-all duration-300 group;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.blog-sidebar {
    @apply bg-gray-800 rounded-xl p-6 border border-gray-700;
}

.blog-category-filter {
    @apply px-4 py-2 rounded-full border transition-colors cursor-pointer;
}

.blog-category-filter.active {
    @apply text-gray-900 border-current;
}

.blog-category-filter:not(.active) {
    @apply border-gray-600 text-gray-300 hover:border-current hover:text-current;
}

.blog-search {
    @apply w-full px-4 py-3 pl-12 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent text-white;
}

.blog-pagination {
    @apply px-4 py-2 border rounded transition-colors;
}

.blog-pagination.active {
    @apply bg-yellow-400 text-gray-900 border-yellow-400;
}

.blog-pagination:not(.active) {
    @apply bg-gray-800 border-gray-600 hover:border-yellow-400;
}