/* Custom styles */
body {
    font-family: 'Inter', sans-serif;
    /* NOUVEAU: Fond de page avec dégradé subtil */
    background-color: #f7f8fc;
    background-image:
        radial-gradient(at 47% 33%, hsl(210.00, 70%, 95%) 0, transparent 59%),
        radial-gradient(at 82% 65%, hsl(285.00, 70%, 90%) 0, transparent 55%);
}
.logo-font {
    font-family: 'Pacifico', cursive;
}
/* Rainbow gradient text */
.rainbow-text {
    background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #84cc16, #22c55e, #14b8a6, #06b6d4, #3b82f6, #8b5cf6, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* Styles for dark mode */
.dark body {
    background-color: #0d1117;
    background-image:
        radial-gradient(at 47% 33%, hsl(210.00, 70%, 10%) 0, transparent 59%),
        radial-gradient(at 82% 65%, hsl(285.00, 70%, 10%) 0, transparent 55%);
}
.dark .text-gray-800 { color: #e2e8f0; }
.dark .text-gray-600 { color: #a0aec0; }

/* Scrollbar styles */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
.dark ::-webkit-scrollbar-track { background: #2d3748; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #555; }
::-webkit-scrollbar-thumb:hover { background: #555; }
.dark ::-webkit-scrollbar-thumb:hover { background: #777; }

/* --- NOUVEAU : Design créatif --- */

/* Effet "Glassmorphism" pour les cartes */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.dark .glass-effect {
    background-color: rgba(26, 32, 44, 0.6);
}

/* Header flottant */
header {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(230, 230, 230, 0.8);
    box-shadow: none !important;
}

.dark header {
    background-color: rgba(13, 17, 23, 0.7) !important;
    border-bottom: 1px solid rgba(48, 54, 61, 0.8);
}

/* UPDATE: Cartes de statistiques discrètes */
.stat-card {
    transition: all 0.3s ease;
}
.stat-card:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);
    border-radius: 1.5rem; /* 24px */
}
.dark .stat-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Styles pour le sélecteur de temps (À venir / Passés) */
.time-filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
.dark .time-filter-btn {
    color: #9ca3af;
}
.time-filter-btn.active-time-filter {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
}
.dark .time-filter-btn.active-time-filter {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
}

/* Style pour les cartes de concerts passés */
.past-concert-card {
    filter: grayscale(50%);
    opacity: 0.8;
    transition: all 0.3s ease;
}
.past-concert-card:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Styles pour les filtres de prix */
.filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    border-radius: 9999px;
    transition: all 0.3s ease;
}
.dark .filter-btn {
    color: #d1d5db;
}
.filter-btn.active-filter {
    background-color: white;
    color: #8b5cf6;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.dark .filter-btn.active-filter {
    background-color: #1f2937;
    color: #a78bfa;
}

/* ========== CORRECTION DU BUG DES CŒURS ========== */

/* Animation et styles pour le cœur - VERSION CORRIGÉE */
@keyframes heart-beat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); color: #ef4444; }
  50% { transform: scale(1); color: #ef4444; }
  75% { transform: scale(1.3); color: #ef4444; }
  100% { transform: scale(1); color: #ef4444; }
}

.like-btn {
  transition: transform 0.2s ease;
}

.like-btn .fa-heart {
  transition: color 0.3s ease, transform 0.2s ease;
  font-family: "Font Awesome 6 Free";
}

/* État non-liké (cœur vide) */
.like-btn:not(.is-liked) .fa-heart {
   font-weight: 400; /* Far = outline */
   color: #6b7280;
}

/* État liké (cœur plein avec animation) */
.like-btn.is-liked .fa-heart {
  font-weight: 900; /* Fas = solid */
  color: #ef4444 !important; /* Force la couleur rouge */
  animation: heart-beat 0.8s ease-in-out;
  position: relative;
}

/* Hover effect */
.like-btn:hover .fa-heart {
    transform: scale(1.25);
}

/* Animation de burst au clic du cœur - AMÉLIORÉE */
.like-btn.is-liked .fa-heart::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fde047 0%, #f59e0b 50%, #ef4444 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 20px #fde047,
        0 0 40px #f59e0b,
        0 0 60px #ef4444;
    animation: sparkle-burst-improved 0.8s ease-out;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10;
    pointer-events: none;
}

@keyframes sparkle-burst-improved {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
        box-shadow: 
            0 0 5px #fde047,
            0 0 10px #f59e0b,
            0 0 15px #ef4444;
    }
    30% {
        transform: translate(-50%, -50%) scale(3) rotate(180deg);
        opacity: 1;
        box-shadow: 
            0 0 30px #fde047,
            0 0 60px #f59e0b,
            0 0 90px #ef4444;
    }
    60% {
        transform: translate(-50%, -50%) scale(5) rotate(360deg);
        opacity: 0.7;
        box-shadow: 
            0 0 50px #fde047,
            0 0 100px #f59e0b,
            0 0 150px #ef4444;
    }
    100% {
        transform: translate(-50%, -50%) scale(8) rotate(540deg);
        opacity: 0;
        box-shadow: none;
    }
}

/* NOUVEAU: Animation pour l'icône de billetterie */
.ticketing-btn i {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ticketing-btn:hover i {
    transform: scale(1.25) rotate(-15deg);
}

/* Styles pour mettre en avant le prochain concert */
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(167, 139, 250, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
  }
}
.next-concert-card {
  animation: pulse-border 2s infinite;
}
.upcoming-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-image: linear-gradient(to right, #8b5cf6, #d946ef);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Styles pour le bouton de contact */
.contact-option {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    font-size: 1.5rem;
    transition: all 0.3s ease;
    transform: scale(0);
    opacity: 0;
}
#contact-fab-container.open .contact-option {
    transform: scale(1);
    opacity: 1;
}
#contact-fab-container.open .contact-option:nth-child(1) { transition-delay: 0.2s; }
#contact-fab-container.open .contact-option:nth-child(2) { transition-delay: 0.1s; }
#contact-fab-container.open .contact-option:nth-child(3) { transition-delay: 0s; }
#contact-fab-container.open #main-contact-btn {
    transform: rotate(90deg);
}
.instagram-bg {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Animations d'entrée */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  opacity: 0;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* Styles pour la page de détail */
.concert-detail-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(247, 248, 252, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.dark .concert-detail-view {
    background-color: rgba(13, 17, 23, 0.95);
}
.concert-detail-view.is-open {
    transform: translateY(0);
}
body.detail-view-open {
    overflow: hidden;
}

/* Nouveau style pour le conteneur de notification */
#notification-box {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* Augmenté pour être au-dessus de tout */
    max-width: 300px;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform: translateX(150%);
    opacity: 0;
}

#notification-box.show {
    transform: translateX(0);
    opacity: 1;
}

/* ========== NOUVEAU : STYLES POUR L'ENCART FUN NOTIFICATIONS & WHATSAPP ========== */
@keyframes fun-box-slide-in {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#fun-notification-box.is-visible {
    display: block;
    animation: fun-box-slide-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes icon-jiggle {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.1); }
}

.fun-box-icon-container {
    background-image: linear-gradient(to top right, #8b5cf6, #ec4899);
    position: relative;
    animation: icon-jiggle 3s ease-in-out infinite;
}
.dark .fun-box-icon-container {
    background-image: linear-gradient(to top right, #a78bfa, #f472b6);
}

.fun-box-icon-container .fa-bell {
    transform: translateX(-5px) rotate(-15deg);
}
.fun-box-icon-container .fa-whatsapp {
    transform: translateX(5px) rotate(15deg);
}

/* ========== PAILLETTES CORRIGÉES POUR PLEIN ÉCRAN ========== */

/* Conteneur des paillettes - FIXE et couvre tout l'écran */
#sparkle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Animation des paillettes sur la page - VERSION ÉCLATANTE CORRIGÉE */
.sparkle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    filter: blur(0px);
}

/* Différents types de paillettes avec tailles variables */
.sparkle.type-1 {
    background: radial-gradient(circle, #fde047 0%, #f59e0b 100%);
    box-shadow: 0 0 20px #fde047, 0 0 40px #f59e0b;
}

.sparkle.type-2 {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 20px #ef4444, 0 0 40px #dc2626;
}

.sparkle.type-3 {
    background: radial-gradient(circle, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 0 20px #8b5cf6, 0 0 40px #7c3aed;
}

.sparkle.type-4 {
    background: radial-gradient(circle, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 0 20px #06b6d4, 0 0 40px #0891b2;
}

.sparkle.type-5 {
    background: radial-gradient(circle, #10b981 0%, #059669 100%);
    box-shadow: 0 0 20px #10b981, 0 0 40px #059669;
}

/* Tailles variables pour plus de réalisme */
.sparkle.size-small {
    width: 4px !important;
    height: 4px !important;
}

.sparkle.size-medium {
    width: 8px !important;
    height: 8px !important;
}

.sparkle.size-large {
    width: 12px !important;
    height: 12px !important;
}

.sparkle.size-xlarge {
    width: 16px !important;
    height: 16px !important;
}

/* ========== ANIMATION RADIALE POUR EXPLOSION DEPUIS LES LIKES ========== */

/* Animation de dispersion radiale depuis le point de clic */
@keyframes sparkle-radial-burst {
    0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(0, 0) scale(1.2) rotate(45deg);
    }
    30% {
        transform: translate(calc(var(--final-x) * 0.3), calc(var(--final-y) * 0.3)) scale(1.5) rotate(90deg);
        opacity: 1;
    }
    60% {
        transform: translate(calc(var(--final-x) * 0.7), calc(var(--final-y) * 0.7)) scale(1) rotate(180deg);
        opacity: 0.8;
    }
    80% {
        transform: translate(calc(var(--final-x) * 0.9), calc(var(--final-y) * 0.9)) scale(0.6) rotate(270deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(var(--final-x), var(--final-y)) scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Animation principale - chute avec trajectoires variées - CORRIGÉE */
@keyframes sparkle-fall-enhanced {
    0% {
        transform: translateY(0) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
        transform: translateY(20px) translateX(0) scale(1) rotate(45deg);
    }
    15% {
        transform: translateY(15vh) translateX(20px) scale(1.2) rotate(90deg);
        opacity: 1;
    }
    35% {
        transform: translateY(35vh) translateX(-30px) scale(1) rotate(180deg);
        opacity: 0.9;
    }
    55% {
        transform: translateY(55vh) translateX(40px) scale(0.8) rotate(270deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(75vh) translateX(-20px) scale(0.6) rotate(360deg);
        opacity: 0.4;
    }
    90% {
        transform: translateY(90vh) translateX(10px) scale(0.3) rotate(450deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(110vh) translateX(0) scale(0) rotate(540deg);
        opacity: 0;
    }
}

/* Animation de rebond - CORRIGÉE */
@keyframes sparkle-bounce {
    0% {
        transform: translateY(0) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(30px) translateX(0) scale(1) rotate(30deg);
    }
    20% {
        transform: translateY(20vh) translateX(15px) scale(1.1) rotate(60deg);
    }
    30% {
        transform: translateY(15vh) translateX(25px) scale(1.2) rotate(90deg);
    }
    40% {
        transform: translateY(30vh) translateX(35px) scale(1) rotate(120deg);
    }
    50% {
        transform: translateY(25vh) translateX(45px) scale(1.1) rotate(150deg);
    }
    60% {
        transform: translateY(40vh) translateX(55px) scale(0.9) rotate(180deg);
        opacity: 0.8;
    }
    70% {
        transform: translateY(55vh) translateX(65px) scale(0.7) rotate(210deg);
        opacity: 0.6;
    }
    80% {
        transform: translateY(70vh) translateX(75px) scale(0.5) rotate(240deg);
        opacity: 0.4;
    }
    90% {
        transform: translateY(85vh) translateX(85px) scale(0.3) rotate(270deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(110vh) translateX(95px) scale(0) rotate(300deg);
        opacity: 0;
    }
}

/* Animation en spirale - CORRIGÉE */
@keyframes sparkle-spiral {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(30px) translateY(10vh) rotate(36deg) scale(1);
    }
    20% {
        transform: translateX(60px) translateY(20vh) rotate(72deg) scale(1.1);
    }
    30% {
        transform: translateX(30px) translateY(30vh) rotate(108deg) scale(1.2);
    }
    40% {
        transform: translateX(-30px) translateY(40vh) rotate(144deg) scale(1);
    }
    50% {
        transform: translateX(-60px) translateY(50vh) rotate(180deg) scale(0.9);
        opacity: 0.8;
    }
    60% {
        transform: translateX(-30px) translateY(60vh) rotate(216deg) scale(0.8);
        opacity: 0.6;
    }
    70% {
        transform: translateX(30px) translateY(70vh) rotate(252deg) scale(0.6);
        opacity: 0.4;
    }
    80% {
        transform: translateX(60px) translateY(80vh) rotate(288deg) scale(0.4);
        opacity: 0.3;
    }
    90% {
        transform: translateX(30px) translateY(90vh) rotate(324deg) scale(0.2);
        opacity: 0.1;
    }
    100% {
        transform: translateX(0) translateY(110vh) rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* Animation de flottement latéral - CORRIGÉE */
@keyframes sparkle-float {
    0% {
        transform: translateX(0) translateY(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(20px) translateY(10vh) scale(1) rotate(20deg);
    }
    25% {
        transform: translateX(50px) translateY(20vh) scale(1.1) rotate(45deg);
    }
    50% {
        transform: translateX(100px) translateY(40vh) scale(1.2) rotate(90deg);
        opacity: 0.9;
    }
    75% {
        transform: translateX(150px) translateY(65vh) scale(0.8) rotate(135deg);
        opacity: 0.6;
    }
    90% {
        transform: translateX(180px) translateY(85vh) scale(0.4) rotate(160deg);
        opacity: 0.3;
    }
    100% {
        transform: translateX(200px) translateY(110vh) scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* Animation de zigzag - CORRIGÉE */
@keyframes sparkle-zigzag {
    0% {
        transform: translateX(0) translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(40px) translateY(15vh) scale(1);
    }
    20% {
        transform: translateX(-20px) translateY(25vh) scale(1.1);
    }
    30% {
        transform: translateX(60px) translateY(35vh) scale(1.2);
    }
    40% {
        transform: translateX(-40px) translateY(45vh) scale(1);
    }
    50% {
        transform: translateX(80px) translateY(55vh) scale(0.9);
        opacity: 0.8;
    }
    60% {
        transform: translateX(-60px) translateY(65vh) scale(0.8);
        opacity: 0.6;
    }
    70% {
        transform: translateX(40px) translateY(75vh) scale(0.6);
        opacity: 0.4;
    }
    80% {
        transform: translateX(-20px) translateY(85vh) scale(0.4);
        opacity: 0.3;
    }
    90% {
        transform: translateX(20px) translateY(95vh) scale(0.2);
        opacity: 0.1;
    }
    100% {
        transform: translateX(0) translateY(110vh) scale(0);
        opacity: 0;
    }
}

/* ========== EFFET DE DEBUG POUR VISUALISER LE POINT DE DÉPART ========== */
.sparkle-debug {
    position: fixed;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    z-index: 10000;
    pointer-events: none;
}

/* ========== OPTIMISATIONS POUR MOBILE ========== */
@media (max-width: 768px) {
    /* Réduire l'intensité des box-shadow sur mobile pour les performances */
    .sparkle.type-1 {
        box-shadow: 0 0 10px #fde047, 0 0 20px #f59e0b;
    }
    
    .sparkle.type-2 {
        box-shadow: 0 0 10px #ef4444, 0 0 20px #dc2626;
    }
    
    .sparkle.type-3 {
        box-shadow: 0 0 10px #8b5cf6, 0 0 20px #7c3aed;
    }
    
    .sparkle.type-4 {
        box-shadow: 0 0 10px #06b6d4, 0 0 20px #0891b2;
    }
    
    .sparkle.type-5 {
        box-shadow: 0 0 10px #10b981, 0 0 20px #059669;
    }
    
    /* Accélérer les animations sur mobile */
    .sparkle {
        animation-duration: 1.5s !important;
    }
    
    /* Tailles plus petites sur mobile pour de meilleures performances */
    .sparkle.size-small {
        width: 3px !important;
        height: 3px !important;
    }
    
    .sparkle.size-medium {
        width: 6px !important;
        height: 6px !important;
    }
    
    .sparkle.size-large {
        width: 9px !important;
        height: 9px !important;
    }
    
    .sparkle.size-xlarge {
        width: 12px !important;
        height: 12px !important;
    }
}