/* Marseille Tracker - Animations et effets visuels */

/* Animation d'apparition générale */
@keyframes appearAnimation {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(59, 130, 246, 0.5),
            0 4px 16px rgba(59, 130, 246, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(59, 130, 246, 0.3),
            0 6px 20px rgba(59, 130, 246, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(59, 130, 246, 0.2),
            0 8px 24px rgba(59, 130, 246, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(59, 130, 246, 0.1),
            0 6px 20px rgba(59, 130, 246, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(59, 130, 246, 0.05),
            0 5px 18px rgba(59, 130, 246, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(59, 130, 246, 0),
            0 4px 16px rgba(59, 130, 246, 0.4);
    }
}

/* Animation d'apparition pour l'éducation */
@keyframes appearAnimationEducation {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(34, 197, 94, 0.5),
            0 4px 16px rgba(34, 197, 94, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(34, 197, 94, 0.3),
            0 6px 20px rgba(34, 197, 94, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(34, 197, 94, 0.2),
            0 8px 24px rgba(34, 197, 94, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(34, 197, 94, 0.1),
            0 6px 20px rgba(34, 197, 94, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(34, 197, 94, 0.05),
            0 5px 18px rgba(34, 197, 94, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(34, 197, 94, 0),
            0 4px 16px rgba(34, 197, 94, 0.4);
    }
}

/* Animation d'apparition pour le transport */
@keyframes appearAnimationTransport {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(251, 146, 60, 0.5),
            0 4px 16px rgba(251, 146, 60, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(251, 146, 60, 0.3),
            0 6px 20px rgba(251, 146, 60, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(251, 146, 60, 0.2),
            0 8px 24px rgba(251, 146, 60, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(251, 146, 60, 0.1),
            0 6px 20px rgba(251, 146, 60, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(251, 146, 60, 0.05),
            0 5px 18px rgba(251, 146, 60, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(251, 146, 60, 0),
            0 4px 16px rgba(251, 146, 60, 0.4);
    }
}

/* Animation d'apparition pour la santé */
@keyframes appearAnimationSante {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(244, 63, 94, 0.5),
            0 4px 16px rgba(244, 63, 94, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(244, 63, 94, 0.3),
            0 6px 20px rgba(244, 63, 94, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(244, 63, 94, 0.2),
            0 8px 24px rgba(244, 63, 94, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(244, 63, 94, 0.1),
            0 6px 20px rgba(244, 63, 94, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(244, 63, 94, 0.05),
            0 5px 18px rgba(244, 63, 94, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(244, 63, 94, 0),
            0 4px 16px rgba(244, 63, 94, 0.4);
    }
}

/* Animation d'apparition pour la sécurité */
@keyframes appearAnimationSecurite {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(129, 140, 248, 0.5),
            0 4px 16px rgba(129, 140, 248, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(129, 140, 248, 0.3),
            0 6px 20px rgba(129, 140, 248, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(129, 140, 248, 0.2),
            0 8px 24px rgba(129, 140, 248, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(129, 140, 248, 0.1),
            0 6px 20px rgba(129, 140, 248, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(129, 140, 248, 0.05),
            0 5px 18px rgba(129, 140, 248, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(129, 140, 248, 0),
            0 4px 16px rgba(129, 140, 248, 0.4);
    }
}

/* Animation d'apparition pour le logement */
@keyframes appearAnimationLogement {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(139, 92, 246, 0.5),
            0 4px 16px rgba(139, 92, 246, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(139, 92, 246, 0.3),
            0 6px 20px rgba(139, 92, 246, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(139, 92, 246, 0.2),
            0 8px 24px rgba(139, 92, 246, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(139, 92, 246, 0.1),
            0 6px 20px rgba(139, 92, 246, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(139, 92, 246, 0.05),
            0 5px 18px rgba(139, 92, 246, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(139, 92, 246, 0),
            0 4px 16px rgba(139, 92, 246, 0.4);
    }
}

/* Animation d'apparition pour la justice */
@keyframes appearAnimationJustice {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(99, 102, 241, 0.5),
            0 4px 16px rgba(99, 102, 241, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(99, 102, 241, 0.3),
            0 6px 20px rgba(99, 102, 241, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(99, 102, 241, 0.2),
            0 8px 24px rgba(99, 102, 241, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(99, 102, 241, 0.1),
            0 6px 20px rgba(99, 102, 241, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(99, 102, 241, 0.05),
            0 5px 18px rgba(99, 102, 241, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(99, 102, 241, 0),
            0 4px 16px rgba(99, 102, 241, 0.4);
    }
}

/* Animation d'apparition pour l'emploi */
@keyframes appearAnimationEmploi {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(16, 185, 129, 0.5),
            0 4px 16px rgba(16, 185, 129, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(16, 185, 129, 0.3),
            0 6px 20px rgba(16, 185, 129, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(16, 185, 129, 0.2),
            0 8px 24px rgba(16, 185, 129, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(16, 185, 129, 0.1),
            0 6px 20px rgba(16, 185, 129, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(16, 185, 129, 0.05),
            0 5px 18px rgba(16, 185, 129, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(16, 185, 129, 0),
            0 4px 16px rgba(16, 185, 129, 0.4);
    }
}

/* Animation d'apparition pour le port */
@keyframes appearAnimationPort {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(6, 182, 212, 0.5),
            0 4px 16px rgba(6, 182, 212, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(6, 182, 212, 0.3),
            0 6px 20px rgba(6, 182, 212, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(6, 182, 212, 0.2),
            0 8px 24px rgba(6, 182, 212, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(6, 182, 212, 0.1),
            0 6px 20px rgba(6, 182, 212, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(6, 182, 212, 0.05),
            0 5px 18px rgba(6, 182, 212, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(6, 182, 212, 0),
            0 4px 16px rgba(6, 182, 212, 0.4);
    }
}

/* Animation d'apparition pour le cinéma */
@keyframes appearAnimationCinema {
    0% { 
        transform: scale(0.3); 
        opacity: 0;
        box-shadow: 
            0 0 0 0 rgba(245, 158, 11, 0.5),
            0 4px 16px rgba(245, 158, 11, 0.3);
    }
    20% {
        transform: scale(0.9);
        opacity: 0.8;
        box-shadow: 
            0 0 0 8px rgba(245, 158, 11, 0.3),
            0 6px 20px rgba(245, 158, 11, 0.2);
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 
            0 0 0 15px rgba(245, 158, 11, 0.2),
            0 8px 24px rgba(245, 158, 11, 0.15);
    }
    60% { 
        transform: scale(0.97); 
        box-shadow: 
            0 0 0 12px rgba(245, 158, 11, 0.1),
            0 6px 20px rgba(245, 158, 11, 0.1);
    }
    80% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 5px rgba(245, 158, 11, 0.05),
            0 5px 18px rgba(245, 158, 11, 0.08);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 0 0 rgba(245, 158, 11, 0),
            0 4px 16px rgba(245, 158, 11, 0.4);
    }
}

/* Animation de mise en évidence (pulse) */
@keyframes pulseHighlight {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6), 0 6px 24px rgba(59, 130, 246, 0.4);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0), 0 8px 32px rgba(59, 130, 246, 0.2);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6), 0 6px 24px rgba(59, 130, 246, 0.4);
    }
}

/* Animation de glissement vers le haut */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation de pulsation pour les éléments en attente */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Animation de rotation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animation de fondu d'entrée */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation de fondu de sortie */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Animation de rebond */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

/* Animation de secousse */
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Classes d'animation utilitaires */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-fadeOut {
    animation: fadeOut 0.5s ease-in-out;
}

.animate-slideUp {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animation en boucle pour les indicateurs */
.loading-indicator {
    animation: rotate 2s linear infinite;
}

/* Animation pour le dernier projet affiché */
@keyframes latestProjectPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--pulse-color, rgba(96, 165, 250, 0.7));
        border-color: var(--border-color, #60a5fa);
    }
    50% {
        box-shadow: 0 0 0 12px var(--pulse-color, rgba(96, 165, 250, 0.2));
        border-color: var(--border-color-intense, #3b82f6);
    }
}

@keyframes latestProjectGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--glow-color, rgba(96, 165, 250, 0.6)));
    }
    50% {
        filter: drop-shadow(0 0 16px var(--glow-color, rgba(96, 165, 250, 0.8)));
    }
}

/* Styles pour le dernier projet par type */
.project-card.latest-project {
    position: relative;
    border-width: 3px;
    border-style: solid;
    z-index: 1600; /* Z-index plus élevé pour passer au-dessus de la drag-area */
    transform: scale(1.02); /* Réduction du scale pour éviter les débordements */
    margin: 0; /* Suppression de la marge qui cause le décalage */
}

/* Styles pour le projet actif (halo clignotant) */
.project-card.active-project {
    animation: latestProjectPulse 2s ease-in-out infinite, latestProjectGlow 3s ease-in-out infinite;
}

/* Couleurs spécifiques par type de projet */
.project-card.latest-project.education-latest {
    --pulse-color: rgba(59, 130, 246, 0.6);
    --border-color: #3b82f6;
    --border-color-intense: #1d4ed8;
    --glow-color: rgba(59, 130, 246, 0.7);
}

.project-card.latest-project.transport-latest {
    --pulse-color: rgba(16, 185, 129, 0.6);
    --border-color: #10b981;
    --border-color-intense: #047857;
    --glow-color: rgba(16, 185, 129, 0.7);
}

.project-card.latest-project.logement-latest {
    --pulse-color: rgba(245, 158, 11, 0.6);
    --border-color: #f59e0b;
    --border-color-intense: #d97706;
    --glow-color: rgba(245, 158, 11, 0.7);
}

.project-card.latest-project.sante-latest {
    --pulse-color: rgba(239, 68, 68, 0.6);
    --border-color: #ef4444;
    --border-color-intense: #dc2626;
    --glow-color: rgba(239, 68, 68, 0.7);
}

.project-card.latest-project.securite-latest {
    --pulse-color: rgba(139, 92, 246, 0.6);
    --border-color: #8b5cf6;
    --border-color-intense: #7c3aed;
    --glow-color: rgba(139, 92, 246, 0.7);
}

.project-card.latest-project.justice-latest {
    --pulse-color: rgba(6, 182, 212, 0.6);
    --border-color: #06b6d4;
    --border-color-intense: #0891b2;
    --glow-color: rgba(6, 182, 212, 0.7);
}

.project-card.latest-project.emploi-latest {
    --pulse-color: rgba(132, 204, 22, 0.6);
    --border-color: #84cc16;
    --border-color-intense: #65a30d;
    --glow-color: rgba(132, 204, 22, 0.7);
}

.project-card.latest-project.port-latest {
    --pulse-color: rgba(14, 165, 233, 0.6);
    --border-color: #0ea5e9;
    --border-color-intense: #0284c7;
    --glow-color: rgba(14, 165, 233, 0.7);
}

.project-card.latest-project.cinema-latest {
    --pulse-color: rgba(236, 72, 153, 0.6);
    --border-color: #ec4899;
    --border-color-intense: #db2777;
    --glow-color: rgba(236, 72, 153, 0.7);
}

/* Animation d'entrée pour le dernier projet */
.project-card.latest-project.new-card {
    animation: fadeInUp 0.5s forwards;
}

.project-card.active-project.new-card {
    animation: fadeInUp 0.5s forwards, latestProjectPulse 2s ease-in-out infinite 0.5s, latestProjectGlow 3s ease-in-out infinite 0.5s;
}

/* Transition douce pour tous les éléments interactifs */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}