/**
 * ═══════════════════════════════════════════════════════════════════════════
 * INDEX - PLAYER MULTISTREAM
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Permettre l'affichage de plusieurs streams Twitch simultanément dans une grille.
 * L'utilisateur peut regarder jusqu'à 6 streamers en même temps.
 * 
 * FONCTIONNALITÉS:
 * - Grilles adaptatives (1, 2, 3, 4, 5, 6 streams)
 * - Layout intelligent (stream principal + secondaires)
 * - Clic sur un stream pour le mettre en principal
 * - Sélecteur de layout manuel
 * - Informations au survol de chaque stream
 * 
 * LAYOUTS DISPONIBLES:
 * - 1 stream: Plein écran
 * - 2 streams: 50/50 horizontal
 * - 3 streams: 1 grand (gauche) + 2 petits (droite)
 * - 4 streams: Grille 2x2
 * - 5-6 streams: 1 grand (gauche) + 4-5 petits (droite en 2 colonnes)
 * 
 * CHARGEMENT: Avec cache busting
 * TAILLE: 5.6 KB
 * 
 * DÉPENDANCES:
 * - JavaScript: multistream-manager.js (gère la logique multistream)
 * - Twitch Player API: https://player.twitch.tv/
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ===== CONTENEUR MULTISTREAM ===== */
.multistream-container {
    display: none !important;
    visibility: hidden;
    width: 100%;
    height: 480px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.multistream-container.active {
    display: block !important;
    visibility: visible;
}

/* S'assurer que le lecteur principal et multistream ne sont jamais visibles ensemble */
.player-container:has(.multistream-container.active) #twitch-embed {
    display: none !important;
    visibility: hidden;
}

.multistream-container:not(.active) {
    display: none !important;
    visibility: hidden;
}

/* ===== GRILLE MULTISTREAM ===== */
.multistream-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 2px;
    background: #1a1a1a;
}

/* Layout 1 stream */
.multistream-grid.grid-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* Layout 2 streams */
.multistream-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* Layout 3 streams */
.multistream-grid.grid-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.multistream-grid.grid-3 .multistream-player:first-child {
    grid-row: 1 / 3;
}

/* Layout 4 streams */
.multistream-grid.grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Layout 5-6 streams */
.multistream-grid.grid-5,
.multistream-grid.grid-6 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.multistream-grid.grid-5 .multistream-player:first-child,
.multistream-grid.grid-6 .multistream-player:first-child {
    grid-row: 1 / 3;
}

/* ===== PLAYERS INDIVIDUELS ===== */
.multistream-player {
    position: relative;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.multistream-player:hover {
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(165, 107, 255, 0.4);
}

.multistream-player.main-player {
    border: 3px solid #A56BFF;
    box-shadow: 0 0 15px rgba(165, 107, 255, 0.6);
}

.multistream-player.main-player:hover {
    box-shadow: 0 4px 20px rgba(165, 107, 255, 0.8);
}

.multistream-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== INFORMATIONS DU PLAYER ===== */
.multistream-player-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.multistream-player:hover .multistream-player-info {
    opacity: 1;
}

/* ===== CONTRÔLES MULTISTREAM ===== */
.multistream-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 100;
}

.multistream-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.multistream-btn:hover {
    background: rgba(165, 107, 255, 0.8);
    border-color: rgba(165, 107, 255, 1);
}

/* ===== SÉLECTEUR DE LAYOUT ===== */
.multistream-layout-selector {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.25rem;
    z-index: 100;
}

.layout-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.layout-btn.active {
    background: rgba(165, 107, 255, 0.8);
    border-color: rgba(165, 107, 255, 1);
}

.layout-btn:hover {
    background: rgba(165, 107, 255, 0.6);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .multistream-container {
        height: 300px;
    }
    
    /* Simplifier les layouts sur mobile */
    .multistream-grid.grid-3,
    .multistream-grid.grid-4,
    .multistream-grid.grid-5,
    .multistream-grid.grid-6 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .multistream-grid.grid-3 .multistream-player:first-child,
    .multistream-grid.grid-5 .multistream-player:first-child,
    .multistream-grid.grid-6 .multistream-player:first-child {
        grid-row: auto;
    }
    
    .multistream-controls,
    .multistream-layout-selector {
        top: 0.5rem;
    }
    
    .multistream-controls {
        right: 0.5rem;
    }
    
    .multistream-layout-selector {
        left: 0.5rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier gère l'affichage multistream avec des grilles adaptatives
   pour afficher de 1 à 6 streams Twitch simultanément.
   
   LAYOUTS:
   - grid-1: 1 stream plein écran
   - grid-2: 2 streams côte à côte (50/50)
   - grid-3: 1 grand + 2 petits (layout asymétrique)
   - grid-4: Grille 2x2 symétrique
   - grid-5/6: 1 grand + 4-5 petits en 2 colonnes
   
   INTERACTIONS:
   - Hover: Agrandissement léger + ombre violette
   - Clic: Définir comme stream principal (bordure violette)
   - Informations: Nom du streamer au survol (overlay gradient)
   
   TECHNIQUE:
   - CSS Grid pour les layouts
   - grid-row: 1 / 3 pour le stream principal (2 lignes)
   - transform: scale(1.02) au hover
   - Bordure 3px violette pour le stream principal
   
   RESPONSIVE:
   Sur mobile, tous les layouts se simplifient en grille 2x2
   pour éviter des streams trop petits.
   
   MAINTENANCE:
   Pour ajouter un nouveau layout, créer une classe .grid-X
   Pour changer la couleur du stream principal, modifier #A56BFF
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/