/**
 * ═══════════════════════════════════════════════════════════════════════════
 * INDEX - RAID SYSTEM
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Permettre aux streamers de faire des raids Twitch directement depuis le site.
 * Un raid envoie tous les viewers d'un stream vers un autre stream.
 * 
 * FONCTIONNALITÉS:
 * - Bouton "Raid" sur chaque carte de streamer
 * - Modal d'authentification si non connecté
 * - Confirmation avant d'envoyer le raid
 * - Statuts de raid (success, error, loading)
 * - Intégration avec l'API Twitch
 * 
 * WORKFLOW:
 * 1. Clic sur bouton "Raid" → Vérification auth Twitch
 * 2. Si non auth → Modal "Connectez-vous avec Twitch"
 * 3. Si auth → Confirmation "Raider vers [streamer] ?"
 * 4. Envoi du raid via API Twitch
 * 5. Affichage du statut (succès/erreur)
 * 
 * CHARGEMENT: Avec cache busting
 * TAILLE: 3.9 KB
 * 
 * DÉPENDANCES:
 * - JavaScript: raid-button.js (gère la logique de raid)
 * - API: /api/raid.php (endpoint pour envoyer les raids)
 * - Twitch API: Authentification OAuth requise
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ===== BOUTONS DE RAID SUR LES CARTES ===== */
.card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.raid-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.raid-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
    background: linear-gradient(135deg, #f7931e, #ff6b35);
}

.raid-btn:active {
    transform: translateY(0);
}

.streamer-mini-card {
    position: relative;
}

/* ===== MODAL D'AUTHENTIFICATION RAID ===== */
.raid-auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.raid-auth-content {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.raid-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.raid-auth-description {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.raid-auth-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.raid-auth-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.raid-auth-btn.primary {
    background: linear-gradient(135deg, #9146ff, #772ce8);
    color: white;
    box-shadow: 0 4px 12px rgba(145, 70, 255, 0.3);
}

.raid-auth-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(145, 70, 255, 0.4);
}

.raid-auth-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text);
    border: 2px solid var(--border);
}

.raid-auth-btn.secondary:hover {
    background: var(--bg-card);
    transform: translateY(-2px);
}

/* ===== STATUTS DE RAID ===== */
.raid-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.raid-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.raid-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.raid-status.loading {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .raid-auth-content {
        padding: 1.5rem;
        width: 95%;
    }
    
    .raid-auth-buttons {
        flex-direction: column;
    }
    
    .raid-auth-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier gère le système de raid Twitch permettant aux streamers
   d'envoyer leurs viewers vers un autre stream directement depuis le site.
   
   QU'EST-CE QU'UN RAID ?
   Un raid Twitch permet à un streamer de rediriger tous ses viewers
   vers un autre stream à la fin de sa session. C'est une façon de
   soutenir d'autres créateurs et de garder la communauté active.
   
   COMPOSANTS:
   - Bouton Raid: Gradient orange (#ff6b35 → #f7931e)
   - Modal Auth: Demande de connexion Twitch si nécessaire
   - Statuts: Success (vert), Error (rouge), Loading (bleu)
   
   COULEURS:
   - Orange: Bouton raid (#ff6b35, #f7931e)
   - Violet Twitch: Bouton auth (#9146ff, #772ce8)
   - Vert: Succès (#22c55e)
   - Rouge: Erreur (#ef4444)
   - Bleu: Chargement (#3b82f6)
   
   SÉCURITÉ:
   - Authentification OAuth Twitch requise
   - Vérification des permissions côté serveur
   - Token CSRF pour les requêtes API
   
   MAINTENANCE:
   Pour modifier les permissions requises, éditer /api/raid.php
   Pour changer les couleurs, modifier les gradients linear-gradient()
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/