/* ===============================================
   FONT AWESOME - STYLES PERSONNALISÉS
   RevisionBPEL - Remplace le système SVG
   =============================================== */

/* ===============================================
   STYLES GÉNÉRAUX FONT AWESOME
   =============================================== */
.fas, .far, .fab {
    font-size: 1.2em;
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
	height: fit-content;
}

/* Animations hover générales */
.fas:hover, .far:hover, .fab:hover {
    transform: scale(1.1);
}

/* ===============================================
   WIDGET UNIFIÉ
   =============================================== */
.widget-icon .fas {
    font-size: 16px;
    margin: 0;
    color: inherit;
}

/* Section online */
.widget-section.online .fa-users {
    color: #a78bfa;
}

/* Section admin */
.widget-section.admin .fa-cog {
    color: #a78bfa;
}

/* Dropdown admin */
.admin-dropdown-item .fas {
    width: 20px;
    text-align: center;
    margin-right: 10px;
}

.admin-dropdown-item .fa-user-circle {
    color: #6366f1;
}

.admin-dropdown-item.danger .fa-right-from-bracket {
    color: #ef4444;
}

/* ===============================================
   SIDEBAR & GROUPES
   =============================================== */

/* Icône cadenas dans les groupes */
.group-name .fa-lock {
    color: #fbbf24;
    font-size: 14px;
    margin-right: 6px;
    margin-left: -6px;
    filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.4));
    position: absolute;
    left: 10px;
}

#groupList li:hover .group-name .fa-lock {
    color: #fde047;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.4));
}

/* ===============================================
   BOUTONS D'ACTION
   =============================================== */



/* Bouton shuffle amélioré */
#melanger {
    background: #1b1b2a;
    border: 1px solid #343747;
    padding: 0 !important;
    display: flex
;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    min-width: 58px;
    height: 40px;
}

/* Icône shuffle */
#melanger .fa-shuffle {
    font-size: 26px;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Hover simple sans rotation */
#melanger:hover .fa-shuffle {
    color: var(--accent-primary);
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3));
}

/* État activé - icône blanche */
#melanger.active .fa-shuffle {
    color: white !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.3));
    }
}

/* Bouton bulk cards */
.bulk-cards-btn .fa-boxes-stacked {
    color: white;
    font-size: 1.1em;
}

/* Boutons admin */
.dir-actions .fas,
.group-actions .fas {
    font-size: 16px;
    margin: 0;
}

/* Boutons edit/delete */
.edit-btn .fa-pen-to-square {
    color: white;
    margin: 0;
}

.delete-btn .fa-trash-can {
    color: white;
    margin: 0;
}

/* ===============================================
   ÉCRAN D'ACCUEIL IA
   =============================================== */

/* Feature cards icons */
.feature-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.feature-icon .fas {
    font-size: 28px;
    color: white !important;
    margin: 0;
}

.feature-card:hover .feature-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4);
}

.feature-card:hover .feature-icon .sparkle-icon {
    animation: sparkleGlowIntense 0.8s ease-in-out infinite;
}

@keyframes sparkleGlowIntense {
    0%, 100% { 
        filter: drop-shadow(0 0 20px rgba(139, 92, 246, 1)) brightness(1.2);
        transform: scale(1.1) rotate(0deg);
    }
    50% { 
        filter: drop-shadow(0 0 35px rgba(167, 139, 250, 1)) brightness(1.5);
        transform: scale(1.2) rotate(180deg);
    }
}

.feature-card:hover .feature-icon .fas {
    animation: iconPulse 1s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Icônes spécifiques features */
.feature-icon .sparkle-icon {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.9)) brightness(1.1);
    animation: sparkleGlow 2s ease-in-out infinite;
    position: relative;
    display: block;
}

/* Animation sparkle pour l'image PNG */
@keyframes sparkleGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.7)) brightness(1);
        transform: scale(1) rotate(0deg);
    }
    25% {
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.9)) brightness(1.2);
        transform: scale(1.08) rotate(10deg);
    }
    50% { 
        filter: drop-shadow(0 0 25px rgba(139, 92, 246, 1)) brightness(1.4);
        transform: scale(1.15) rotate(-10deg);
    }
    75% {
        filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.8)) brightness(1.1);
        transform: scale(1.08) rotate(5deg);
    }
}

.feature-icon .fa-chart-column {
    color: white !important;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.8));
    animation: pulseChart 2.5s ease-in-out infinite;
}

@keyframes pulseChart {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.8));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(99, 102, 241, 1));
        transform: scale(1.08);
    }
}

/* ===============================================
   MODAL BULK CARDS
   =============================================== */

/* Tabs icons */
.bulk-tab .fas {
    margin-right: 0.5em;
    font-size: 1.1em;
}

.bulk-tab.active .fas {
    color: white;
}

/* Upload zone */
.upload-icon .fa-folder-open {
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

/* AI enhancement */
.ai-enhance-label .fa-robot {
    color: #8b92ff;
    margin-right: 0.5em;
    font-size: 1.2em;
}

/* ===============================================
   CONTEXTE & TOOLTIPS
   =============================================== */

/* Menu contextuel */
.context-menu-item .fas {
    width: 16px;
    text-align: center;
    margin-right: 8px;
    font-size: 14px;
}

.context-menu-item.danger .fas {
    color: #dc3545;
}

/* Tooltip utilisateurs */
#ouTooltip .fas {
    font-size: 14px;
    margin-right: 6px;
}

/* ===============================================
   COULEURS SPÉCIFIQUES PAR ICÔNE
   =============================================== */

/* Success/Error/Info */
.fa-circle-check { 
    color: #6366f1 !important; 
}

.fa-circle-xmark { 
    color: #ef4444 !important; 
}

.fa-circle-info { 
    color: #3b82f6 !important; 
}

.fa-circle-plus { 
    color: #10b981 !important; 
}

/* Actions */
.fa-pen-to-square {
    color: #10b981;
}

.fa-trash-can {
    color: #ef4444;
}

.fa-floppy-disk {
    color: #3b82f6;
}

/* Navigation */
.fa-magnifying-glass {
    color: #6366f1;
}

.fa-cloud-arrow-up {
    color: #8b5cf6;
}

/* Sécurité */
.fa-lock {
    color: #fbbf24;
}

.fa-lock-open {
    color: #94a3b8;
}

.fa-key {
    color: #f59e0b;
}

/* Documents */
.fa-file-lines,
.fa-file-import,
.fa-clipboard-list {
    color: #64748b;
}

/* Monde/Global */
.fa-earth-americas {
    color: #0099cc;
}

/* AI/Tech */
.fa-robot,
.fa-brain {
    color: #8b5cf6;
}

/* Étoile magique/sparkle */
.fa-star {
    color: #a78bfa;
}

/* Alternative sparkle icons */
.fa-magic,
.fa-wand-sparkles {
    color: #a78bfa;
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
}

.fa-wand-magic-sparkles {
    color: #a78bfa !important;
    animation: magicWand 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.7));
}

@keyframes magicWand {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.7)) brightness(1);
    }
    25% {
        transform: scale(1.05) rotate(5deg);
        filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.9)) brightness(1.2);
    }
    50% { 
        transform: scale(1.1) rotate(-5deg); 
        filter: drop-shadow(0 0 20px rgba(167, 139, 250, 1)) brightness(1.4);
    }
    75% {
        transform: scale(1.05) rotate(3deg);
        filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.9)) brightness(1.2);
    }
}

/* ===============================================
   TAILLES RESPONSIVES
   =============================================== */

/* Mobile */
@media (max-width: 768px) {
    .fas, .far, .fab {
        font-size: 1em;
    }
    
    .feature-icon .fas {
        font-size: 24px;
    }
    
    #melanger .fa-shuffle {
        font-size: 28px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .fas, .far, .fab {
        font-size: 1.1em;
    }
    
    .feature-icon .fas {
        font-size: 26px;
    }
}

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

/* Rotation continue pour settings */
.fa-cog {
    transition: transform 0.5s ease;
}

.widget-section.admin:hover .fa-cog {
    transform: rotate(90deg);
}

/* Bounce pour notifications */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.notification .fas {
    animation: bounce 0.5s ease;
}

/* Shake pour erreurs */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error .fa-circle-xmark {
    animation: shake 0.5s ease;
}

/* ===============================================
   FIXES ET COMPATIBILITÉ
   =============================================== */

/* Fix pour les icônes dans les inputs */
input + .fas,
select + .fas {
    pointer-events: none;
}

/* Fix pour les icônes cliquables */
.clickable .fas {
    pointer-events: auto;
    cursor: pointer;
}

/* Désactiver les animations sur mobile pour performance */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .fas, .far, .fab {
        animation: none !important;
        transition: none !important;
    }
}

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

/* Spin animation */
.fa-spin-hover:hover {
    animation: fa-spin 2s infinite linear;
}

/* Pulse animation */
.fa-pulse-hover:hover {
    animation: fa-pulse 1s infinite;
}

/* Tailles custom */
.fa-2xs { font-size: 0.625em; }
.fa-xs { font-size: 0.75em; }
.fa-sm { font-size: 0.875em; }
.fa-lg { font-size: 1.25em; }
.fa-xl { font-size: 1.5em; }
.fa-2xl { font-size: 2em; }

/* Marges */
.fa-fw { text-align: center; width: 1.25em; }
.fa-pull-left { float: left; margin-right: 0.3em; }
.fa-pull-right { float: right; margin-left: 0.3em; }

/* Bordures */
.fa-border {
    padding: 0.2em 0.25em 0.15em;
    border: 0.08em solid #eee;
    border-radius: 0.1em;
}

/* ===============================================
   NOTIFICATIONS AVEC ICÔNES
   =============================================== */

/* Icônes dans les notifications */
#notification {
    display: flex;
    align-items: center;
    gap: 8px;
}

#notification .fas,
#notification .far {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.2em;
    min-width: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Icônes de succès */
#notification.success .fa-circle-check,
#notification.success .fa-check {
    color: #6366f1 !important;
    animation: checkBounce 0.5s ease;
}

/* Icônes d'erreur */
#notification.error .fa-circle-xmark,
#notification.error .fa-xmark,
#notification.error .fa-triangle-exclamation {
    color: #ef4444 !important;
    animation: errorShake 0.5s ease;
}

/* Animations pour les notifications */
@keyframes checkBounce {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Toast notifications avec icônes */
.toast .fas,
.drag-toast .fas {
    margin-right: 8px;
    vertical-align: middle;
}

/* Modal titles avec icônes */
.modal-content h2 .fas,
.modal-content h3 .fas {
    margin-right: 10px;
    vertical-align: middle;
    opacity: 0.9;
}

/* ===============================================
   FIN DU FICHIER
   =============================================== */