/* ===================================
   BOUTON BACK-TO-TOP MODERNE
   Design épuré et responsive mobile
   =================================== */

#back-to-top {
    /* Positionnement */
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1030;
    
    /* Dimensions - Taille tactile optimale */
    width: 52px;
    height: 52px;
    padding: 0;
    
    /* Design circulaire moderne */
    border-radius: 50%;
    border: none;
    
    /* Dégradé moderne */
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
    color: white;
    
    /* Ombre élégante */
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25),
                0 2px 6px rgba(0, 0, 0, 0.1);
    
    /* Centrage de l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animation fluide */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Masqué par défaut */
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    visibility: hidden;
    
    /* Curseur */
    cursor: pointer;
    
    /* Accessibilité tactile */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* État visible - Classe ajoutée par JS */
#back-to-top.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
    visibility: visible;
}

/* Icône */
#back-to-top i {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Effet au survol (desktop uniquement) */
@media (hover: hover) and (pointer: fine) {
    #back-to-top:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35),
                    0 4px 10px rgba(0, 0, 0, 0.15);
    }
    
    #back-to-top:hover i {
        transform: translateY(-2px);
    }
}

/* Effet actif/clic */
#back-to-top:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.15);
    transition-duration: 0.1s;
}

/* Focus pour accessibilité */
#back-to-top:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25),
                0 2px 6px rgba(0, 0, 0, 0.1),
                0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Animation de pulsation (première apparition) */
@keyframes pulse-subtle {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

#back-to-top.first-show {
    animation: pulse-subtle 2s ease-in-out 3;
}

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

/* Très petits écrans (< 360px) */
@media (max-width: 359.98px) {
    #back-to-top {
        bottom: 16px;
        right: 12px;
        max-width: 44px;
        height: 44px;
    }
    
    #back-to-top i {
        font-size: 16px;
    }
}

/* Smartphones standard (360px - 576px) */
@media (min-width: 360px) and (max-width: 575.98px) {
    #back-to-top {
        bottom: 74px;
        right: 16px;
        max-width: 48px;
        height: 48px;
    }
    
    #back-to-top i {
        font-size: 18px;
    }
}

/* Tablettes portrait (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #back-to-top {
        bottom: 28px;
        right: 24px;
        width: 56px;
        height: 56px;
    }
    
    #back-to-top i {
        font-size: 22px;
    }
}

/* Tablettes paysage et desktop (≥ 768px) */
@media (min-width: 768px) {
    #back-to-top {
        bottom: 32px;
        right: 32px;
        width: 60px;
        height: 60px;
    }
    
    #back-to-top i {
        font-size: 24px;
    }
}

/* ===========================================
   VARIANTES DE STYLE
   =========================================== */

/* Variante glassmorphism */
#back-to-top.glass {
    background: rgba(79, 70, 229, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Variante minimaliste */
#back-to-top.minimal {
    background: white;
    color: #4F46E5;
    border: 2px solid #4F46E5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (hover: hover) and (pointer: fine) {
    #back-to-top.minimal:hover {
        background: #EEF2FF;
        border-color: #4338CA;
    }
}

/* ===========================================
   DARK MODE
   =========================================== */

@media (prefers-color-scheme: dark) {
    #back-to-top {
        background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3),
                    0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    @media (hover: hover) and (pointer: fine) {
        #back-to-top:hover {
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4),
                        0 4px 10px rgba(0, 0, 0, 0.3);
        }
    }
    
    #back-to-top.minimal {
        background: #1E293B;
        color: #818CF8;
        border-color: #818CF8;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    @media (hover: hover) and (pointer: fine) {
        #back-to-top.minimal:hover {
            background: #334155;
        }
    }
}

/* ===========================================
   ACCESSIBILITÉ
   =========================================== */

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    #back-to-top,
    #back-to-top *,
    #back-to-top i {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Amélioration du contraste en mode high contrast */
@media (prefers-contrast: high) {
    #back-to-top {
        border: 2px solid currentColor;
    }
}