/* ========================================
   CURSEUR PERSONNALISÉ 3D MINIMALISTE
   ======================================== */

/* Cacher le curseur par défaut - FUSION PARFAITE */
* {
    cursor: none !important;
}

/* Forcer pour tous les éléments interactifs */
a, button, input, textarea, select, 
[role="button"], [onclick],
.btn, .nav-link, .project-link, 
.filter-btn, .social-icon {
    cursor: none !important;
}

/* Empêcher le curseur par défaut d'apparaître */
body, html {
    cursor: none !important;
}

/* Container du curseur */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Boule unique avec effet 3D */
.cursor-ball {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        #8B5CF6 0%,
        #6366F1 50%,
        #7C3AED 100%
    );
    box-shadow: 
        0 2px 12px rgba(139, 92, 246, 0.6),
        0 0 20px rgba(139, 92, 246, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.5);
    will-change: clip-path;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Bordure externe lumineuse */
.cursor-ball::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(139, 92, 246, 0.3);
    pointer-events: none;
}

/* Bordure interne brillante */
.cursor-ball::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* ========================================
   VARIATIONS DE GRADIENT PAR ZONE
   ======================================== */

/* Zone header/navigation - Bleu cyan */
.custom-cursor.zone-header .cursor-ball {
    background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 50%, #0284C7 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(6, 182, 212, 0.6),
        0 0 20px rgba(6, 182, 212, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-header .cursor-ball::before {
    border-color: rgba(6, 182, 212, 0.4);
}

/* Zone hero - Rose magenta */
.custom-cursor.zone-hero .cursor-ball {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 50%, #BE185D 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(236, 72, 153, 0.6),
        0 0 20px rgba(236, 72, 153, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-hero .cursor-ball::before {
    border-color: rgba(236, 72, 153, 0.4);
}

/* Zone about - Vert émeraude */
.custom-cursor.zone-about .cursor-ball {
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(16, 185, 129, 0.6),
        0 0 20px rgba(16, 185, 129, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-about .cursor-ball::before {
    border-color: rgba(16, 185, 129, 0.4);
}

/* Zone skills - Orange doré */
.custom-cursor.zone-skills .cursor-ball {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(245, 158, 11, 0.6),
        0 0 20px rgba(245, 158, 11, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-skills .cursor-ball::before {
    border-color: rgba(245, 158, 11, 0.4);
}

/* Zone projects - Rouge rubis */
.custom-cursor.zone-projects .cursor-ball {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(239, 68, 68, 0.6),
        0 0 20px rgba(239, 68, 68, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-projects .cursor-ball::before {
    border-color: rgba(239, 68, 68, 0.4);
}

/* Zone contact/footer - Indigo violet */
.custom-cursor.zone-contact .cursor-ball {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #4338CA 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 2px 12px rgba(99, 102, 241, 0.6),
        0 0 20px rgba(99, 102, 241, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4);
}

.custom-cursor.zone-contact .cursor-ball::before {
    border-color: rgba(99, 102, 241, 0.4);
}

/* ========================================
   TRANSFORMATION EN TÊTE DE FLÈCHE
   ======================================== */

/* Tête de flèche gaming au survol des liens */
.custom-cursor.cursor-hover {
    width: 24px;
    height: 24px;
}

.custom-cursor.cursor-hover .cursor-ball {
    border-radius: 0;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.custom-cursor.cursor-hover .cursor-ball::before {
    border-radius: 0;
    border: 2px solid currentColor;
    opacity: 0.5;
}

.custom-cursor.cursor-hover .cursor-ball::after {
    display: none;
}

/* Variations selon la direction du lien - POINTES PRÉCISES */

/* Flèche vers le haut - Pointe en haut ▲ */
.custom-cursor.arrow-up .cursor-ball {
    clip-path: polygon(50% 0%, 100% 100%, 50% 70%, 0% 100%);
}

/* Flèche vers le bas - Pointe en bas ▼ */
.custom-cursor.arrow-down .cursor-ball {
    clip-path: polygon(50% 100%, 100% 0%, 50% 30%, 0% 0%);
}

/* Flèche vers la droite - Pointe à droite ▶ */
.custom-cursor.arrow-right .cursor-ball {
    clip-path: polygon(100% 50%, 0% 100%, 30% 50%, 0% 0%);
}

/* Flèche vers la gauche - Pointe à gauche ◀ */
.custom-cursor.arrow-left .cursor-ball {
    clip-path: polygon(0% 50%, 100% 0%, 70% 50%, 100% 100%);
}

/* Directions diagonales pour plus de précision */

/* Flèche haut-droite ↗ */
.custom-cursor.arrow-up-right .cursor-ball {
    clip-path: polygon(100% 0%, 100% 100%, 30% 70%, 0% 0%);
}

/* Flèche haut-gauche ↖ */
.custom-cursor.arrow-up-left .cursor-ball {
    clip-path: polygon(0% 0%, 100% 0%, 70% 30%, 0% 100%);
}

/* Flèche bas-droite ↘ */
.custom-cursor.arrow-down-right .cursor-ball {
    clip-path: polygon(100% 100%, 0% 100%, 30% 30%, 100% 0%);
}

/* Flèche bas-gauche ↙ */
.custom-cursor.arrow-down-left .cursor-ball {
    clip-path: polygon(0% 100%, 100% 100%, 70% 30%, 0% 0%);
}

/* Animation de brillance pour la flèche */
@keyframes arrow-glow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 6px currentColor);
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 12px currentColor);
    }
}

/* Animation de brillance pour la flèche */
@keyframes arrow-glow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 8px currentColor);
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 16px currentColor);
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    * {
        cursor: auto !important;
    }
    
    .custom-cursor {
        display: none !important;
    }
}

/* Mode sombre - ajustements */
[data-theme="dark"] .cursor-ball {
    box-shadow: 
        0 2px 16px rgba(139, 92, 246, 0.8),
        0 0 24px rgba(139, 92, 246, 0.5),
        inset -3px -3px 8px rgba(0, 0, 0, 0.5),
        inset 2px 2px 8px rgba(255, 255, 255, 0.3);
}