/* ===== CORRECTION FORCE BRUTE - TOUS LES BOUTONS ===== */
/* À charger EN DERNIER dans le HTML */

/* ===== RESET COMPLET DE TOUS LES BOUTONS FLOTTANTS ===== */

/* BOUTON CONNEXION - ORANGE - EN HAUT */
.floating-auth-button,
button.floating-auth-button,
#floatingAuthBtn {
    position: fixed !important;
    bottom: 170px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important;
    z-index: 1002 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    animation: float-auth 3s ease-in-out infinite !important;
}

.floating-auth-button:hover,
#floatingAuthBtn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.6) !important;
}

/* BOUTON PROFIL - ORANGE - EN HAUT (même position) */
.user-profile-button,
button.user-profile-button,
#userProfileBtn {
    position: fixed !important;
    bottom: 170px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border: 3px solid rgba(249, 115, 22, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important;
    z-index: 1002 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    animation: float-auth 3s ease-in-out infinite !important;
}

.user-profile-button:hover,
#userProfileBtn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.6) !important;
    border-color: #f97316 !important;
}

/* BOUTON CHAT - VIOLET - AU MILIEU */
.floating-chat-button,
button.floating-chat-button,
#floatingChatBtn {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
    z-index: 1001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    animation: float-chat 3s ease-in-out infinite !important;
}

.floating-chat-button:hover,
#floatingChatBtn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.6) !important;
}

/* BOUTON PARTAGE - DORÉ - EN BAS */
.floating-share-button,
button.floating-share-button,
#floatingShareBtn,
.btn-share {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    animation: float 3s ease-in-out infinite !important;
}

.floating-share-button:hover,
#floatingShareBtn:hover,
.btn-share:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6) !important;
}

/* ===== TOOLTIPS ===== */

/* Tooltip Compte/Profil */
.floating-auth-button::before,
.user-profile-button::before {
    content: attr(data-username) !important;
    position: absolute !important;
    right: 75px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
    z-index: 9999 !important;
}

.floating-auth-button::after,
.user-profile-button::after {
    content: '' !important;
    position: absolute !important;
    right: 65px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 6px solid rgba(0, 0, 0, 0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

.floating-auth-button:hover::before,
.floating-auth-button:hover::after,
.user-profile-button:hover::before,
.user-profile-button:hover::after {
    opacity: 1 !important;
}

/* Tooltip Chat */
.floating-chat-button::before {
    content: 'Chat' !important;
    position: absolute !important;
    right: 75px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    z-index: 9999 !important;
}

.floating-chat-button::after {
    content: '' !important;
    position: absolute !important;
    right: 65px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 6px solid rgba(0, 0, 0, 0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

.floating-chat-button:hover::before,
.floating-chat-button:hover::after {
    opacity: 1 !important;
}

/* Tooltip Partage */
.floating-share-button::before,
.btn-share::before {
    content: 'Partager' !important;
    position: absolute !important;
    right: 75px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    z-index: 9999 !important;
}

.floating-share-button::after,
.btn-share::after {
    content: '' !important;
    position: absolute !important;
    right: 65px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 6px solid rgba(0, 0, 0, 0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

.floating-share-button:hover::before,
.floating-share-button:hover::after,
.btn-share:hover::before,
.btn-share:hover::after {
    opacity: 1 !important;
}

/* ===== MENU DÉROULANT UTILISATEUR ===== */
.user-dropdown {
    position: fixed !important;
    bottom: 240px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 1001 !important;
}

/* ===== ANIMATIONS ===== */
@keyframes float-auth {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes float-chat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .floating-auth-button,
    .user-profile-button,
    #floatingAuthBtn,
    #userProfileBtn {
        bottom: 150px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        font-size: 22px !important;
    }
    
    .floating-chat-button,
    #floatingChatBtn {
        bottom: 90px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        font-size: 24px !important;
    }
    
    .floating-share-button,
    #floatingShareBtn,
    .btn-share {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        font-size: 22px !important;
    }
    
    .user-dropdown {
        bottom: 220px !important;
        right: 20px !important;
    }
}

@media (max-width: 480px) {
    .floating-auth-button,
    .user-profile-button,
    #floatingAuthBtn,
    #userProfileBtn {
        bottom: 140px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    .floating-chat-button,
    #floatingChatBtn {
        bottom: 80px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
    
    .floating-share-button,
    #floatingShareBtn,
    .btn-share {
        bottom: 15px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    .user-dropdown {
        bottom: 210px !important;
        right: 15px !important;
    }
}

/* ===== FORCER LE BADGE DE NOTIFICATION ===== */
.chat-notification-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ef4444 !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    min-width: 20px !important;
    text-align: center !important;
    z-index: 9999 !important;
}

.auth-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ef4444 !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    z-index: 9999 !important;
}

/* ===== ORDRE VISUEL FINAL ===== */
/*
Position finale:
👤 Compte/Profil - 170px (en haut) - ORANGE 🟠
💬 Chat - 100px (au milieu) - VIOLET 🟣
🔗 Partage - 30px (en bas) - DORÉ 🟡

Tous alignés verticalement à DROITE
Espacés de 70px entre chaque
*/