/* ========================================
   COMPOSANT : STREAMERS PAGE
   ======================================== 
   
   Créé le : 2026-04-15
   Utilisé par : streamers.php
   Impact : MOYEN (styles spécifiques page streamers)
   
   REFACTORING CSS - Phase 3
   
   Contient :
   - Styles spécifiques à la page streamers
   - Section title et badges
   - Informations offline
   - Adaptations pour .streamer-card
   
   Note : Réutilise streamers-grid.css pour les cartes
   ======================================== */

/* Section streamers */
.streamers-section {
    margin-bottom: 3rem;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Force overflow visible pour toute la hiérarchie */
.streamers-section,
.streamers-section .streamers-grid,
.streamers-section .streamer-mini-card {
    overflow: visible !important;
}

.streamers-grid {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.streamer-mini-card {
    overflow: visible !important;
    position: relative;
}

/* Augmenter le z-index de la carte au hover pour que la tooltip passe au-dessus */
.streamer-mini-card:hover {
    z-index: 9999 !important;
    position: relative;
}

/* S'assurer que la tooltip a un z-index très élevé */
.streamer-mini-card .streamer-tooltip {
    z-index: 10000 !important;
    position: absolute;
}

/* Titre de section */
.section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--border);
}

.section-title.offline {
    opacity: 0.7;
}

.title-icon {
    font-size: 2rem;
}

/* Badge de compteur */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: linear-gradient(135deg, #FF6FB1, #A56BFF);
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

/* Informations offline */
.offline-info {
    margin: 1rem 0;
}

.offline-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(156, 163, 175, 0.2);
    border: 2px solid #9ca3af;
    border-radius: 20px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.offline-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0.5rem 0;
}

/* Force overflow visible pour les tooltips */
.streamers-section .streamers-grid .streamer-mini-card,
.streamers-grid .streamer-mini-card,
.streamer-mini-card {
    overflow: visible !important;
}

/* Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }
    
    .title-icon {
        font-size: 1.5rem;
    }
    
    .count-badge {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.25rem;
        flex-wrap: wrap;
    }
    
    .streamers-section {
        margin-bottom: 2rem;
    }
}