.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
    transition-timing-function: linear;
}

.logoLoginSmall {
    background-image: url(../img/Logo.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 90px;
    background-size: contain;
}

.cont {
    width: 100%;
    height: calc(100vh - 4.1rem);
}

body {
    height: 100%;
    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}

.theme-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255,255,255,0.8);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.statsMap {
    position: absolute;
    top: 60px;
    right: 10px;
    z-index: 1000;
    background: rgba(255,255,255,0.8);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#map {
    height: 100%;
    width: 100%;
}

.leaflet-bottom .leaflet-right {
    display: none;
}

/* ===== Marqueurs de carte améliorés ===== */

/* Visiteurs - Bleu */
.echo-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.3),
        0 0 15px rgba(59, 130, 246, 0.6),
        0 0 30px rgba(59, 130, 246, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
    animation: marker-glow-blue 2s ease-in-out infinite;
}

/* Bannis - Rouge */
.echo-marker-ban {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.4),
        0 0 20px rgba(239, 68, 68, 0.7),
        0 0 40px rgba(239, 68, 68, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.9);
    animation: marker-glow-red 1.5s ease-in-out infinite, marker-danger-pulse 0.5s ease-in-out 3;
}

/* WAF Attacks - Orange */
.echo-marker-waf {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #fdba74 0%, #f97316 50%, #ea580c 100%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.4),
        0 0 20px rgba(249, 115, 22, 0.7),
        0 0 40px rgba(249, 115, 22, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.9);
    animation: marker-glow-orange 1.5s ease-in-out infinite;
}

/* Point central lumineux */
.echo-marker::before,
.echo-marker-ban::before,
.echo-marker-waf::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
}

/* Animation ripple - Bleu */
.echo-marker .echo-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    animation: ripple-blue 2s ease-out infinite;
    pointer-events: none;
}

/* Animation ripple - Rouge */
.echo-marker-ban .echo-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: transparent;
    border: 3px solid #ef4444;
    border-radius: 50%;
    animation: ripple-red 1.5s ease-out infinite;
    pointer-events: none;
}

/* Animation ripple - Orange */
.echo-marker-waf .echo-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: transparent;
    border: 3px solid #f97316;
    border-radius: 50%;
    animation: ripple-orange 1.5s ease-out infinite;
    pointer-events: none;
}

/* Ancien style pour compatibilité */
.echo-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    animation: ripple-blue 2s ease-out infinite;
    pointer-events: none;
}

/* Animations Glow */
@keyframes marker-glow-blue {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(59, 130, 246, 0.3),
            0 0 15px rgba(59, 130, 246, 0.6),
            0 0 30px rgba(59, 130, 246, 0.3),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(59, 130, 246, 0.4),
            0 0 25px rgba(59, 130, 246, 0.8),
            0 0 50px rgba(59, 130, 246, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
}

@keyframes marker-glow-red {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(239, 68, 68, 0.4),
            0 0 20px rgba(239, 68, 68, 0.7),
            0 0 40px rgba(239, 68, 68, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(239, 68, 68, 0.5),
            0 0 30px rgba(239, 68, 68, 0.9),
            0 0 60px rgba(239, 68, 68, 0.5),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
}

@keyframes marker-glow-orange {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(249, 115, 22, 0.4),
            0 0 20px rgba(249, 115, 22, 0.7),
            0 0 40px rgba(249, 115, 22, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(249, 115, 22, 0.5),
            0 0 30px rgba(249, 115, 22, 0.9),
            0 0 60px rgba(249, 115, 22, 0.5),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
}

/* Animation danger pulse pour les bans */
@keyframes marker-danger-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Animations Ripple */
@keyframes ripple-blue {
    0% {
        width: 16px;
        height: 16px;
        opacity: 1;
        border-width: 3px;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes ripple-red {
    0% {
        width: 18px;
        height: 18px;
        opacity: 1;
        border-width: 4px;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes ripple-orange {
    0% {
        width: 18px;
        height: 18px;
        opacity: 1;
        border-width: 4px;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        border-width: 1px;
    }
}

input {
    padding: 10px;
}

.MarkerMe {
    background-color: red;
    width: 2px;
    height: 2px;
}

/* Server marker pulse animation */
@keyframes server-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}