/**
 * PromptManager - Animations & Micro-interactions
 * @version 1.6
 * @description Système d'animations fluides et performantes
 * @author d2o
 */

/* ============================================
   VARIABLES & CONFIGURATION
   ============================================ */

:root {
    /* Animation Timings - Optimisés pour fluidité */
    --animation-speed-instant: 100ms;
    --animation-speed-fast: 180ms;
    --animation-speed-normal: 300ms;
    --animation-speed-slow: 500ms;
    --animation-speed-slower: 700ms;

    /* Easing Functions - Courbes premium */
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Animation Delays - Stagger plus subtil */
    --stagger-delay: 35ms;
    --stagger-delay-slow: 60ms;

    /* Transform Values - Effets plus subtils */
    --hover-scale: 1.015;
    --hover-scale-button: 1.05;
    --hover-translate-y: -3px;
    --active-scale: 0.98;

    /* Shadow depths */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.24);
}

/* Respecter les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   KEYFRAMES ANIMATIONS
   ============================================ */

/* Fade In & Slide Up - Pour les cartes (version améliorée) */
@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fade In simple */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide In from Top - Pour les toasts */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Out to Top - Pour les toasts qui disparaissent */
@keyframes slideOutToTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* Pulse - Pour le bouton favori (plus subtil) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Star Burst - Animation étoile favorite (plus fluide) */
@keyframes starBurst {
    0% {
        transform: scale(0.8) rotate(-10deg);
        filter: brightness(1);
    }
    40% {
        transform: scale(1.25) rotate(8deg);
        filter: brightness(1.4);
    }
    70% {
        transform: scale(0.95) rotate(-4deg);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

/* Shimmer - Pour le skeleton loader */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake - Pour les erreurs */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Rotate - Pour les loaders */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Fade Scale - Pour les modales */
@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   CARD ANIMATIONS
   ============================================ */

/* Animation d'apparition des cartes */
.card {
    animation: fadeInSlideUp var(--animation-speed-slow) var(--ease-out-expo) backwards;
    will-change: transform, opacity;
    transition: all var(--animation-speed-normal) var(--ease-in-out-cubic);
}

/* Stagger effect - chaque carte arrive avec un délai */
.card:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 0); }
.card:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 1); }
.card:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 2); }
.card:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 3); }
.card:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 4); }
.card:nth-child(6) { animation-delay: calc(var(--stagger-delay) * 5); }
.card:nth-child(7) { animation-delay: calc(var(--stagger-delay) * 6); }
.card:nth-child(8) { animation-delay: calc(var(--stagger-delay) * 7); }
.card:nth-child(9) { animation-delay: calc(var(--stagger-delay) * 8); }
.card:nth-child(10) { animation-delay: calc(var(--stagger-delay) * 9); }

/* Effet hover plus subtil et élégant */
.card:hover {
    transform: translateY(var(--hover-translate-y)) scale(var(--hover-scale));
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

/* Animation au clic avec feedback tactile */
.card:active {
    transform: translateY(-1px) scale(var(--active-scale));
    transition-duration: var(--animation-speed-instant);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   FAVORITE BUTTON ANIMATIONS
   ============================================ */

/* Bouton favori de base */
.btn-fav {
    transition: all var(--animation-speed-fast) var(--ease-out-expo);
    position: relative;
    overflow: visible;
}

/* Hover sur bouton favori - plus fluide */
.btn-fav:hover {
    transform: scale(var(--hover-scale-button)) rotate(-5deg);
}

/* Animation pulse lors de l'activation */
.btn-fav.active {
    animation: pulse 0.5s var(--ease-spring);
}

/* Animation star burst pour favori ajouté */
.btn-fav.just-favorited {
    animation: starBurst 0.7s var(--ease-out-expo);
}

/* Effet de brillance sur l'étoile favorite - plus subtil */
.btn-fav.active i {
    color: #FFD700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
    transition: all var(--animation-speed-normal) var(--ease-out-expo);
}

/* Animation hover sur icône */
.btn-fav:not(.active):hover i {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
}

/* ============================================
   VIEW TRANSITIONS
   ============================================ */

/* Transition entre vues */
.view-transition-enter {
    animation: fadeInSlideUp var(--animation-speed-slow) var(--ease-smooth);
}

.view-transition-exit {
    animation: fadeOut var(--animation-speed-fast) var(--ease-smooth);
    pointer-events: none;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Dashboard View Animation */
#dashboardView {
    animation: fadeIn var(--animation-speed-normal) var(--ease-smooth);
}

/* Templates View Animation */
#templatesView {
    animation: fadeIn var(--animation-speed-normal) var(--ease-smooth);
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

/* Modal backdrop */
.modal-backdrop {
    animation: fadeIn var(--animation-speed-normal) var(--ease-smooth);
}

/* Modal content */
.modal-content {
    animation: fadeScale var(--animation-speed-slow) var(--ease-bounce);
}

/* Modal close */
.modal.closing .modal-content {
    animation: fadeOut var(--animation-speed-fast) var(--ease-smooth);
}

.modal.closing .modal-backdrop {
    animation: fadeOut var(--animation-speed-fast) var(--ease-smooth);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

/* Toast container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

/* Toast individual - animation plus professionnelle */
.toast {
    animation: slideInFromTop var(--animation-speed-slow) var(--ease-spring);
    margin-bottom: 10px;
    pointer-events: auto;
    will-change: transform, opacity;
    transition: all var(--animation-speed-normal) var(--ease-out-expo);
}

/* Toast qui disparaît */
.toast.toast-exit {
    animation: slideOutToTop var(--animation-speed-fast) var(--ease-in-out-cubic) forwards;
}

/* Toast hover - effet subtil */
.toast:hover {
    transform: translateX(-4px) scale(1.01);
    box-shadow: var(--shadow-xl);
}

/* ============================================
   SKELETON LOADER
   ============================================ */

/* Skeleton base */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Skeleton card */
.skeleton-card {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
}

/* Skeleton text */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.large {
    height: 24px;
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.small {
    width: 40%;
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

/* Boutons génériques - animations améliorées */
.btn {
    transition: all var(--animation-speed-fast) var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

/* Ripple effect optimisé */
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo);
}

.btn:active::before {
    width: 250px;
    height: 250px;
}

/* Hover sur boutons - plus fluide */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Active state avec feedback tactile */
.btn:active {
    transform: translateY(0) scale(var(--active-scale));
    transition-duration: var(--animation-speed-instant);
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-top-color: #7C3AED;
    border-radius: 50%;
    animation: rotate 0.8s linear infinite;
}

/* Loading dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7C3AED;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ============================================
   SIDEBAR ANIMATIONS
   ============================================ */

/* Sidebar items - interactions fluides */
/* Note: Ne pas ajouter de transform par défaut pour éviter décalage initial */
.nav-item {
    transition: all var(--animation-speed-normal) var(--ease-out-expo);
}

/* Hover seulement si pas dans la première nav-section (Menu) */
#librarySection .nav-item:hover,
#catSection .nav-item:hover {
    transform: translateX(5px);
}

/* Active state - pas de translateX pour le tableau de bord */
#navHome.active {
    transform: none;
}

#librarySection .nav-item.active,
#catSection .nav-item.active {
    transform: translateX(7px);
}

.nav-item:active {
    transform: scale(0.99);
    transition-duration: var(--animation-speed-instant);
}

/* Category expansion */
.nav-section.collapsible .nav-tree {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--animation-speed-slow) var(--ease-smooth);
}

.nav-section.collapsible:not(.collapsed) .nav-tree {
    max-height: 1000px;
}

/* Toggle icon rotation */
.toggle-icon {
    transition: transform var(--animation-speed-normal) var(--ease-smooth);
}

.nav-section:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

/* ============================================
   FORM ANIMATIONS
   ============================================ */

/* Input focus */
input:focus,
textarea:focus,
select:focus {
    transform: scale(1.01);
    transition: all var(--animation-speed-fast) var(--ease-smooth);
}

/* Label float */
.form-group {
    position: relative;
}

.form-group label {
    transition: all var(--animation-speed-normal) var(--ease-smooth);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    transform: translateY(-24px) scale(0.85);
    color: #7C3AED;
}

/* ============================================
   BADGE & TAG ANIMATIONS
   ============================================ */

/* Badges */
.badge,
.card-badge,
.project-type-tag {
    transition: all var(--animation-speed-fast) var(--ease-smooth);
}

.badge:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Scroll to top button */
.scroll-to-top {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--animation-speed-normal) var(--ease-smooth);
    pointer-events: none;
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================
   EMPTY STATE ANIMATIONS
   ============================================ */

.empty-state {
    animation: fadeIn var(--animation-speed-slow) var(--ease-smooth);
}

.empty-state i {
    animation: bounce 2s infinite ease-in-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Animation controls */
.animate-none {
    animation: none !important;
    transition: none !important;
}

.animate-fast {
    animation-duration: var(--animation-speed-fast) !important;
    transition-duration: var(--animation-speed-fast) !important;
}

.animate-slow {
    animation-duration: var(--animation-speed-slow) !important;
    transition-duration: var(--animation-speed-slow) !important;
}

/* Fade utilities */
.fade-in {
    animation: fadeIn var(--animation-speed-normal) var(--ease-smooth);
}

.fade-out {
    animation: fadeOut var(--animation-speed-normal) var(--ease-smooth);
}

/* Scale utilities */
.scale-up {
    transform: scale(1.05);
}

.scale-down {
    transform: scale(0.95);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible pour keyboard navigation */
*:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
    transition: outline-offset var(--animation-speed-fast);
}

/* Skip animations for keyboard users if needed */
.using-keyboard * {
    animation-duration: 0.01ms !important;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration pour animations fréquentes */
.card,
.btn,
.toast,
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Limiter le repaint aux éléments animés */
.animating {
    will-change: transform, opacity;
}

.animating-complete {
    will-change: auto;
}

/* ============================================
   ANIMATIONS AVANCÉES
   ============================================ */

/* Glow effect pour focus et highlights */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(124, 58, 237, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
    }
}

.glow-effect {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Gradient animation pour backgrounds */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Typing indicator animation */
@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: #7C3AED;
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* Float animation pour éléments flottants */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Blur-in animation */
@keyframes blurIn {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.blur-in {
    animation: blurIn var(--animation-speed-slow) var(--ease-smooth);
}

/* Flip card animation */
@keyframes flipIn {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

.flip-in {
    animation: flipIn var(--animation-speed-slow) var(--ease-bounce);
}

/* Elastic bounce */
@keyframes elasticBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    90% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.elastic-bounce {
    animation: elasticBounce 0.6s var(--ease-spring);
}

/* Neon glow effect */
@keyframes neonGlow {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(124, 58, 237, 0.8),
            0 0 8px rgba(124, 58, 237, 0.6),
            0 0 12px rgba(124, 58, 237, 0.4);
    }
    50% {
        text-shadow:
            0 0 8px rgba(124, 58, 237, 1),
            0 0 16px rgba(124, 58, 237, 0.8),
            0 0 24px rgba(124, 58, 237, 0.6);
    }
}

.neon-text {
    animation: neonGlow 2s ease-in-out infinite;
}

/* Slide in from directions */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-right { animation: slideInRight var(--animation-speed-slow) var(--ease-out-expo); }
.slide-in-left { animation: slideInLeft var(--animation-speed-slow) var(--ease-out-expo); }
.slide-in-bottom { animation: slideInBottom var(--animation-speed-slow) var(--ease-out-expo); }

/* Spotlight effect */
@keyframes spotlight {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.spotlight-effect {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: spotlight 3s ease-in-out infinite;
}

/* Heartbeat animation */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(1.1);
    }
    20%, 40% {
        transform: scale(1);
    }
}

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* Wobble effect */
@keyframes wobble {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    15% {
        transform: translateX(-10px) rotate(-5deg);
    }
    30% {
        transform: translateX(8px) rotate(3deg);
    }
    45% {
        transform: translateX(-6px) rotate(-3deg);
    }
    60% {
        transform: translateX(4px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
}

.wobble {
    animation: wobble 0.8s ease-in-out;
}

/* Success checkmark animation */
@keyframes drawCheck {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.success-checkmark {
    stroke-dasharray: 100;
    animation: drawCheck 0.6s var(--ease-out-expo) forwards;
}

/* ============================================
   PIN / ÉPINGLÉS ANIMATIONS
   ============================================ */

/* Animation de pin (punaise qui se plante) */
@keyframes pinStick {
    0% {
        transform: translateY(-20px) rotate(-45deg) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translateY(2px) rotate(5deg) scale(1.1);
        opacity: 1;
    }
    70% {
        transform: translateY(-2px) rotate(-2deg) scale(0.95);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Animation de unpin (punaise qui se retire) */
@keyframes pinUnstick {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateY(-2px) rotate(-5deg) scale(1.05);
    }
    100% {
        transform: translateY(-20px) rotate(45deg) scale(0);
        opacity: 0;
    }
}

/* Badge pinned */
.badge-pinned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    animation: pinStick 0.5s var(--ease-spring);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.badge-pinned.removing {
    animation: pinUnstick 0.4s var(--ease-out-expo) forwards;
}

/* Icône pin animée */
.pin-icon {
    display: inline-block;
    transition: transform var(--animation-speed-fast) var(--ease-spring);
}

.pin-icon.pinned {
    animation: pinStick 0.5s var(--ease-spring);
}

.pin-icon.unpinning {
    animation: pinUnstick 0.4s var(--ease-out-expo) forwards;
}

/* Hover sur pin icon */
.btn-pin:hover .pin-icon {
    transform: rotate(-15deg) scale(1.1);
}

/* Drag & Drop states */
.card.dragging {
    opacity: 0.5;
    transform: scale(0.95) rotate(2deg);
    cursor: grabbing;
    z-index: 1000;
}

.card.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.8;
    transform: scale(1.05) rotate(-3deg);
    box-shadow: var(--shadow-xl);
    transition: none;
}

/* Drop zones */
.pinned-section.drag-over {
    background: rgba(124, 58, 237, 0.1);
    border: 2px dashed #7C3AED;
    animation: dragOverPulse 0.8s ease-in-out infinite;
}

@keyframes dragOverPulse {
    0%, 100% {
        border-color: #7C3AED;
        background: rgba(124, 58, 237, 0.1);
    }
    50% {
        border-color: #EC4899;
        background: rgba(236, 72, 153, 0.1);
    }
}

/* Animation de réorganisation */
@keyframes reorderShift {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

.card.reordering {
    animation: reorderShift var(--animation-speed-normal) var(--ease-spring);
}

/* Section épinglés */
.pinned-section {
    transition: all var(--animation-speed-normal) var(--ease-out-expo);
    position: relative;
}

.pinned-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7C3AED, #EC4899);
    transform: scaleX(0);
    transition: transform var(--animation-speed-normal) var(--ease-out-expo);
}

.pinned-section.active::before {
    transform: scaleX(1);
}

/* Compteur de pins */
.pin-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    transition: all var(--animation-speed-fast) var(--ease-spring);
}

.pin-counter.updating {
    animation: counterPop 0.4s var(--ease-spring);
}

@keyframes counterPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation quand limite atteinte */
.pinned-section.limit-reached {
    animation: limitShake 0.5s ease-in-out;
}

@keyframes limitShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-8px);
    }
    75% {
        transform: translateX(8px);
    }
}

/* Message limite atteinte */
.pin-limit-warning {
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #EF4444;
    font-size: 12px;
    animation: slideInBottom var(--animation-speed-normal) var(--ease-spring);
}

/* Effet de glow sur section épinglés */
.pinned-section-header {
    position: relative;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1));
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all var(--animation-speed-normal) var(--ease-out-expo);
}

.pinned-section-header:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.15));
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

/* Animation d'entrée pour templates épinglés */
.pinned-card {
    animation: pinCardEnter var(--animation-speed-slow) var(--ease-spring) backwards;
}

@keyframes pinCardEnter {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    60% {
        transform: translateX(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Stagger pour les cartes épinglées */
.pinned-card:nth-child(1) { animation-delay: 0ms; }
.pinned-card:nth-child(2) { animation-delay: 50ms; }
.pinned-card:nth-child(3) { animation-delay: 100ms; }
.pinned-card:nth-child(4) { animation-delay: 150ms; }
.pinned-card:nth-child(5) { animation-delay: 200ms; }