/* ===================================
   BOUTON SCROLL TO TOP
   =================================== */

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1999;
}

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

.scroll-to-top:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.scroll-to-top:active {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 1rem;
    }
}

/* ===================================
   BOUTON SCROLL TO BOTTOM
   =================================== */

.scroll-to-bottom {
    position: fixed;
    bottom: 90px;
    /* Juste au-dessus du bouton "remonter" (30px + 50px + 10px d'espace) */
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Même direction que scroll-to-top pour cohérence */
    transition: all 0.3s ease;
    z-index: 1999;
}

.scroll-to-bottom.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-bottom:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.scroll-to-bottom:active {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-to-bottom {
        width: 45px;
        height: 45px;
        bottom: 75px;
        /* Ajusté pour mobile (20px + 45px + 10px) */
        right: 20px;
        font-size: 1rem;
    }
}