/* =========================================
   BFC STYLES v8.6 (Menu Dépliant + Animation)
   ========================================= */

/* Container Principal */
.bfc-container {
    position: fixed;
    /* Utilise l'option de marge basse définie précédemment (ou 20px par défaut) */
    bottom: var(--bfc-bottom, 20px);
    z-index: 9990;
    display: flex;
    
    /* CORRECTION ICI : On passe de 'column-reverse' à 'column' */
    /* Cela place la liste (1er élément HTML) AU-DESSUS du bouton (2ème élément HTML) */
    flex-direction: column; 
    
    align-items: center; 
    gap: 15px;
    pointer-events: none;
}
.bfc-right { right: 20px; }
.bfc-left { left: 20px; }

/* v8.6 : Liste des sous-boutons */
.bfc-sub-buttons-list {
    display: flex;
    flex-direction: column-reverse; /* Empile du bas vers le haut */
    gap: 15px;
    /* Caché par défaut */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Effet ressort */
    pointer-events: none;
}

/* v8.6 : État OUVERT du menu */
.bfc-container.bfc-menu-open .bfc-sub-buttons-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Wrappers individuels (pour l'animation d'apparition en cascade) */
.bfc-wrapper { position: relative; display: flex; align-items: center; }

/* Style générique des boutons */
.bfc-btn {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: #fff !important;
    transition: all 0.3s ease;
    cursor: pointer; border: none; text-decoration: none;
    pointer-events: auto; /* Réactive les clics sur les boutons */
}
.bfc-icon { width: 26px; height: 26px; fill: #fff; }

/* v8.6 : Bouton Principal (Toggle) */
.bfc-main-toggle {
    background-color: var(--bfc-main-color, #333333); /* Couleur par défaut */
    position: relative;
    z-index: 2;
    font-size: 24px;
}
/* Change la couleur du bouton principal quand ouvert */
.bfc-container.bfc-menu-open .bfc-main-toggle { background-color: #d63638; }

/* Gestion des icônes Ouvrir/Fermer dans le bouton principal */
.bfc-toggle-icon-close { display: none; }
.bfc-container.bfc-menu-open .bfc-toggle-icon-open { display: none; }
.bfc-container.bfc-menu-open .bfc-toggle-icon-close { display: block; }
.bfc-container.bfc-menu-open .bfc-main-toggle { transform: rotate(90deg); }


/* Couleurs des sous-boutons */
.bfc-email { background-color: var(--bfc-color-email); }
.bfc-phone { background-color: var(--bfc-color-phone); }
.bfc-custom { background-color: var(--bfc-color-custom); }
/* Ajoutez ceci après .bfc-custom */
.bfc-custom2 { background-color: var(--bfc-color-custom2); }

/* Hover effect sur les sous-boutons */
.bfc-sub-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }


/* =========================================
   v8.6 ANIMATION "PULSE" (ATTENTION)
   ========================================= */

/* Définition de l'animation */
@keyframes bfc-pulse-anim {
    0% { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    50% { transform: scale(1.15); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
    100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
}

/* La classe ajoutée par JS toutes les 10s */
.bfc-main-toggle.bfc-do-pulse {
    /* L'animation dure 1s total (0.5s grossir, 0.5s rétrécir) */
    animation: bfc-pulse-anim 1s ease-in-out;
}

/* Désactiver l'animation si le menu est ouvert */
.bfc-container.bfc-menu-open .bfc-main-toggle.bfc-do-pulse {
    animation: none;
}


/* =========================================
   Tooltips & Modal (Reste inchangé)
   ========================================= */
.bfc-tooltip {
    position: absolute; background: #333; color: #fff;
    padding: 5px 10px; border-radius: 4px; font-size: 13px; white-space: nowrap;
    opacity: 0; visibility: hidden; transition: opacity 0.3s; pointer-events: none;
}
/* Positionnement des tooltips selon le côté */
.bfc-right .bfc-tooltip { right: 70px; }
.bfc-left .bfc-tooltip { left: 70px; }
.bfc-wrapper:hover .bfc-tooltip { opacity: 1; visibility: visible; }

/* Modal Styling */
.bfc-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 9995; 
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
.bfc-modal-overlay.open { opacity: 1; visibility: visible; }
.bfc-modal-content {
    background-color: var(--bfc-popup-bg); color: var(--bfc-popup-text);
    padding: 25px; border-radius: 12px; width: 90%; max-width: 600px;
    max-height: 90vh; overflow-y: auto; position: relative;
    transform: translateY(20px); transition: transform 0.3s ease;
}
.bfc-modal-content.bfc-is-divi { padding: 0; overflow: hidden; background: transparent; }
.bfc-modal-content.bfc-is-divi .bfc-modal-close {
    z-index: 10; background: rgba(255,255,255,0.8); border-radius: 50%;
    width: 30px; height: 30px; top: 5px; right: 5px;
    display: flex; align-items: center; justify-content: center;
}
.bfc-modal-overlay.open .bfc-modal-content { transform: translateY(0); }
.bfc-modal-close {
    position: absolute; top: 10px; right: 15px; font-size: 28px;
    background: none; border: none; cursor: pointer; color: inherit; padding: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .bfc-container { bottom: 15px; }
    .bfc-right { right: 15px; }
    .bfc-left { left: 15px; }
    .bfc-btn { width: 48px; height: 48px; }
    .bfc-icon { width: 22px; height: 22px; }
    /* v8.6 : Sur mobile, le tooltip du bouton principal peut gêner */
    .bfc-main-toggle .bfc-tooltip { display: none; }
}