/* ============================================================
   themes/theme.css - Structure Globale 2 Colonnes Fixée
   ============================================================ */

/* Reset de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #121214;
    color: #eeeeee;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   themes/theme.css - Structure Globale 2 Colonnes Responsive
   ============================================================ */

/* Conteneur principal */
.app-layout {
    display: flex;
    flex-direction: column;
    width: 100% !important;        
    max-width: 1750px !important; 
    margin: 0 auto;
    /* Gère dynamiquement l'espace entre 12px (mobile) et 20px (PC) */
    gap: clamp(12px, 2vw, 20px);
    /* Sécurité pour éviter que le contenu touche les bords de l'écran sur mobile */
    padding-left: clamp(10px, 3vw, 20px);
    padding-right: clamp(10px, 3vw, 20px);
}

/* Alignement des colonnes - Devient adaptatif sur petit écran */
.row-with-sidebars {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: clamp(12px, 2vw, 20px) !important;
    width: 100% !important;
    align-items: flex-start !important;
}

/* Conteneur vertical de la colonne de gauche (Sans !important pour préserver votre jQuery/JS toggle) */
.sidebar-container-left {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    width: 250px;
    min-width: 250px;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out; /* Ajoute une transition fluide lors du Toggle */
}

/* Les panneaux à l'intérieur de la colonne gauche */
.sidebar-panel {
    width: 100% !important;
    background: linear-gradient(145deg, #1e1e2f, #151522); 
    border: 1px solid #3b82f6; 
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); 
}

.sidebar-panel h3 {
    font-size: 14px;
    color: #3b82f6; 
    text-transform: uppercase;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    padding-bottom: 5px;
    text-align: center;
}

/* ============================================================
   RÈGLES RESPONSIVE (Écrans inférieurs à 992px : Tablettes / Mobiles)
   ============================================================ */
@media (max-width: 992px) {
    /* On casse le côte-à-côte pour empiler la sidebar et le contenu principal */
    .row-with-sidebars {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    /* La sidebar prend toute la largeur disponible sur mobile si elle est affichée */
    .sidebar-container-left {
        width: 100%;
        min-width: 0;
        flex-shrink: 1;
    }
}

/* Zone centrale (Radio + Chat) */
.main-content-center {
    flex: 1 !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
    align-items: center !important;
}

/* ============================================================
   SECTION 1 : LA RADIO
   ============================================================ */
.radio-section {
    width: 100%;
}

.radio-container {
    position: relative; /* Crée le repère pour le fond absolu */
    background: rgba(26, 26, 31, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    overflow: hidden;
    width: 100%;       
    margin-bottom: 20px;       
    z-index: 1; /* Initialise l'empilement global */
}

#blur-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(15px) brightness(0.4); /* Flou légèrement augmenté pour une meilleure lisibilité */
    -webkit-filter: blur(15px) brightness(0.4);
    z-index: -1 !important; /* Forcé en arrière-plan absolu par rapport au conteneur */
    pointer-events: none; /* Évite de bloquer les clics sur le lecteur */
    transform: scale(1.1); /* Évite les lignes blanches transparentes sur les bords à cause du flou */
    will-change: background-image; /* Optimise l'injection JS */
}  z-index: 1;
}

.fieldset-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.radio-deco-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

#radio-player-block {
    width: 100%;
    max-width: 80%;         
    margin: 0 auto;            
    margin-top: 0px;         
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;             
    align-items: center;       
    gap: 20px;                 
    padding: 15px;
    box-sizing: border-box;    
}

#track-art {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;            
}

.radio-infos {
    flex-grow: 1;
    text-align: left;          
    overflow: hidden;          
}

.player-controls-row {
    display: flex;
    justify-content: center; 
    align-items: center;    
    width: 100%;
    margin-bottom: 15px;    
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.btn-group .btn {
    border: none;
    color: #ffffff;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 20px; 
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.1s;
    outline: none;
}

.btn-group .btn:active { transform: scale(0.96); }
.btn-group .btn-primary { background: #2563eb; }
.btn-group .btn-primary:hover { background: #1d4ed8; }
.btn-group .btn-success { background: #10b981; }
.btn-group .btn-success:hover { background: #059669; }

.station-picker { width: 100%; }
.select-station {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.status-badge { margin-bottom: 12px; }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;       
    border-radius: 30px;       
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-live {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); 
}

.badge-playlist {
    background: linear-gradient(135deg, #10b981, #047857);
    color: #ffffff;
}

#track-title {
    font-size: 18px;           
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
}

#track-artist {
    font-size: 13px;
    color: #a0a0b0;
    margin-bottom: 10px;
}

.stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #a0a0b0;            
    
    padding: 6px 12px;
    border-radius: 6px;
    
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#listeners-count { color: #3b82f6; font-weight: 800; }

/* ============================================================
   SECTION 2 : LE SALON DE CHAT (STRUCTURE NORMALISÉE)
   ============================================================ */
.shoutbox-section {
    width: 100%;    
    background: #16161a;
    border: 1px solid #2d2d37;
    border-radius: 12px;
    overflow: visible; 
    height: auto;      
    min-height: 480px; 
}

.shoutbox-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Zone des messages */
.shoutbox-messages-area {
    flex: 1 1 auto !important;
    /*height: 350px !important;  On réduit la hauteur fixe de la zone de chat */
    min-height: 250px !important; /* Sécurité plus basse pour les petits écrans */
    display: flex !important;
    flex-direction: column !important; 
    gap: 8px;
    padding: 15px;
    overflow-y: auto !important; /* Le scroll se fera UNIQUEMENT à l'intérieur du chat, pas sur ta page */
    position: relative !important; 
    background: #141417 !important; 
    z-index: 1;
    overflow-x: hidden !important; 
}

/* Le fond fixe virtuel en mode normal */
.shoutbox-messages-area::before {
    content: "" !important;
    position: absolute !important;
    
    /* CORRECTION ICI : Ajout du signe "-" et de l'unité "px" */
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    
    /* CORRECTION ICI : On retire width et height 100% pour laisser les positions négatives agrandir l'image correctement sans déborder */
    width: auto !important;
    height: auto !important;
    /* MODIFICATION ICI : On appelle le script php de rotation d'images */
    /*background-image: url('../datas/images/fonds/rotate.php') !important;*/
    /*background-image: url('../datas/images/fonds/I.A.et_moi.webp') !important;*/
    /*background-image: url('../datas/images/2894059.jpg') !important;*/
    /* MODIFICATION 1 : Rend l'image totalement fixe pendant le scroll */
	/* MODIFICATION ICI : On utilise la variable CSS fournie par le JS, 
   et si elle n'existe pas encore, on charge le fichier PHP par défaut */
background-image: var(--dynamic-bg, url('../datas/images/fonds/rotate.php')) !important;
    background-attachment: fixed !important;
    
    /* Rempli tout l'espace proprement */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Vos réglages de visibilité (10px ou 0.1 de flou, bonne luminosité) */
    filter: blur(5px) brightness(0.8) !important;
    z-index: -1 !important; 
    pointer-events: none !important;
/* ========================================== */
    /* 🌟 AJOUTS ICI POUR LA TRANSITION DISCRÈTE   */
    /* ========================================== */
    opacity: var(--bg-opacity, 1) !important; /* Utilise une variable pour contrôler l'opacité */
    transition: opacity 0.8s ease-in-out !important; /* Transition douce de 0.8 seconde */
}

/* Lignes de messages */
.shoutbox-msg-row {
    position: relative !important;
    z-index: 2 !important; 
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important;             
    width: 100% !important;                     
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
    background: rgba(20, 20, 23, 0.65) !important; 
}

.shoutbox-msg-row:hover {
    background: rgba(59, 130, 246, 0.15) !important; 
    border-color: rgba(59, 130, 246, 0.3);
}

/* Conteneur de l'heure et des boutons */
.msg-left-column {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important; 
    gap: 4px; 
    flex-shrink: 0 !important;
    width: 50px; 
}

.msg-text-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 6px;
}

.msg-time {
    color: #ffffff;
    font-size: 11px;
    flex-shrink: 0 !important;                  
    white-space: nowrap !important;             
}

.msg-username {
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Zone du texte brut du message */
.msg-actual-text {
    color: #eeeeee;
    flex: 1 !important;
    overflow-wrap: break-word !important; 
    word-break: break-word !important;
    white-space: pre-wrap !important; /* <-- REMPLACÉ : préserve les sauts de ligne */
    min-width: 0 !important;
}

/* Smileys (CORRIGÉ : Suppression des astérisques invalides) */
.msg-actual-text img {
    /*max-height: 32px !important;*/ 
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
}

/* Style pour le Chuchotement (PM) */
.msg-private {
    background: rgba(168, 85, 247, 0.08) !important; 
    border-left: 4px solid #a855f7 !important;        
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.msg-private-label {
    color: #c084fc !important; 
    font-weight: bold;
    margin-right: 4px;
}

/* Boutons d'action sur les messages */
.msg-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0 !important;                  
    margin-left: 15px;                          
}

.shoutbox-msg-row:hover .msg-actions {
    opacity: 1;
}

.action-btn {
    background: #1e1e24;
    border: 1px solid #3d3d4e;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 3px 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.action-btn.btn-whisper:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.action-btn.btn-edit:hover    { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.action-btn.btn-delete:hover  { background: #ef4444; border-color: #ef4444; color: #fff; }
.action-btn:active            { transform: scale(0.9); }

/* ============================================================
   FORMULAIRE DE SAISIE & TOOLBAR
   ============================================================ */
.shoutbox-form-area {
    background: #1a1a22;
    border-bottom: 1px solid #24242b; 
    padding: 12px;
}

#shoutbox-form {
    background: transparent;
}

.shoutbox-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
}

.toolbar-btn {
    background: #22222b;              
    border: 1px solid #3d3d4e;
    color: #a0a0b0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;                                  
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

.toolbar-btn:hover { 
    border-color: #3b82f6; 
    color: #fff; 
    background: #2a2a35; 
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); 
    transform: translateY(-1px);                  
}

.toolbar-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Modificateurs Toolbar BBCode Styles */
.font-bold {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: #28a745 !important; 
    color: white !important;
    margin-right: 5px !important;
    font-weight: bold;
}

.font-italic {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: #dc3545 !important; 
    color: white !important;
    margin-right: 5px !important;
    font-style: italic;
}

.font-underline {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: rgb(0, 123, 255) !important; 
    color: white !important;
    margin-right: 5px !important;
    text-decoration: underline;
}

.toolbar-btn.font-scroll {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: rgb(0, 123, 255) !important;
    color: white !important;
    margin-right: 5px !important;
}

.toolbar-btn.font-blink {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: #dc3545 !important;
    color: white !important;
    margin-right: 5px !important;
}

#shoutbox-history-btn {
    display: inline-block !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-family: sans-serif !important;
    background-color: #28a745 !important;
    color: white !important;
    margin-right: 5px !important;
}

#shoutbox-color-picker {
    background: #22222b;
    border: 1px solid #3d3d4e;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    height: 23px;
    width: 40px;
    transition: border-color 0.2s;
}
#shoutbox-color-picker:hover { border-color: #3b82f6; }

.btn-clear-shout {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: transparent;
}
.btn-clear-shout:hover { 
    background: #ef4444 !important; 
    color: #fff !important; 
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-1px);
}

/* Zone d'input basique */
.input-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

#shoutbox-input {
    flex: 1;
    background: #22222b;
    border: 1px solid #3d3d4e;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
}
#shoutbox-input:focus { border-color: #3b82f6; background: #1e1e27; }
#shoutbox-input:disabled { background: #141417; color: #555566; cursor: not-allowed; }

#shoutbox-submit-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.2s;
}
#shoutbox-submit-btn:hover { background: #1d4ed8; }
#shoutbox-submit-btn:disabled { background: #3d3d4e; color: #a0a0b0; cursor: not-allowed; }

/* ============================================================
   BBCODE CONFINÉ & ANIMATIONS (SCROLL / BLINK)
   ============================================================ */

/* AJOUT : Bloque le texte pour qu'il ne déborde pas sur le chevron ou l'avatar */
.msg-actual-text {
    position: relative !important;
    overflow: hidden !important; /* Rend invisible tout ce qui sort de la zone du message */
    display: inline-block !important;
    vertical-align: middle;
    max-width: 100%;
}

.bbcode-scroll {
    display: inline-block !important;
    white-space: nowrap !important;
    padding-left: 10px;
    /* Passé à 10s pour un défilé un peu plus fluide vu qu'il parcourt toute la largeur */
    animation: sb-marquee-confined 10s linear infinite !important; 
    will-change: transform;
}

.bbcode-scroll:hover { animation-play-state: paused !important; }

/* MODIFICATION : Le texte commence à 100% (tout à droite du conteneur) et sort à -100% */
@keyframes sb-marquee-confined {
    0%   { transform: translate3d(100%, 0, 0); } 
    100% { transform: translate3d(-100%, 0, 0); } 
}

@keyframes sb-blink-effect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.btn-blink-effect {
    animation: sb-blink-effect 1.5s infinite ease-in-out;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.btn-blink-effect:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    animation-play-state: paused; 
}

.bbcode-blink {
    animation: sb-blink-effect 1s infinite steps(2, start) !important;
}

/* Images dans la Shoutbox */
.shoutbox-img {
    max-width: 100%;          
    max-height: 150px;        
    border-radius: 6px;       
    display: block;
    margin: 5px 0;
    object-fit: contain;      
    *border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Actions Top Boutons */
.shoutbox-actions-top {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

.btn-action-top {
    display: inline-flex;     /* Modifié pour un alignement parfait texte/émoji */
    align-items: center;      /* Centre verticalement */
    justify-content: center;   /* Centre horizontalement */
    padding: 4px 8px;          
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;           
    font-family: sans-serif;
    color: white !important;  /* On garde le texte blanc obligatoire */
    text-decoration: none;    /* Évite que les liens <a> soient soulignés */
}
.btn-action-top:active { transform: scale(0.98); }

/* Couleurs par défaut si non définies dans le HTML */
.btn-fullscreen-top { background-color: #28a745 !important; }
.btn-fullscreen-top:hover { background-color: #218838 !important; }

.btn-clear-top { background-color: #dc3545 !important; }
.btn-clear-top:hover { background-color: #c82333 !important; }

.btn-radio-top { background-color: #007bff !important; }
.btn-radio-top:hover { background-color: #0069d9 !important; }

/* ============================================================
   MINI PLAYER RADIO DANS LA SHOUTBOX
   ============================================================ */
.shoutbox-radio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px; 
}

.sb-player-art {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sb-player-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    min-width: 0; 
}

.sb-player-infos {
    display: flex;
    flex-direction: column;
}

.sb-track-title {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.sb-track-artist {
    font-size: 11px;
    color: #a0a0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-audio-streamer {
    width: 100%;
    height: 24px; 
    outline: none;
}

.sb-btn-audio-on {
    background: #22aa22;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}
.sb-btn-audio-off {
    background: #aa2222;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

/* ============================================================
   CORRECTIF PLEIN ÉCRAN STABLE (AVEC FORÇAGE DES MENUS DEVANT)
   ============================================================ */

/* 1. On force le menu du haut et le formulaire à passer DEVANT l'image fixed */
.shoutbox-container:fullscreen .shoutbox-actions-top,
.shoutbox-container:fullscreen .shoutbox-radio-player,
.shoutbox-container:fullscreen .shoutbox-form-area {
    position: relative !important;
    z-index: 10 !important; /* Passe au-dessus de l'image */
}

/* 2. Ton code de l'image (le seul qui fonctionne chez toi !) */
.shoutbox-container:fullscreen .shoutbox-messages-area::before,
.shoutbox-container:-webkit-full-screen .shoutbox-messages-area::before {
    position: fixed !important; 
    top: 60px !important;       /* Tu peux remettre 60px (ou l'ajuster) car le z-index va corriger le tir */
    left: 30px !important;      
    right: 30px !important;     
    bottom: 120px !important;   
    
    width: auto !important;     
    height: auto !important;    
    z-index: 1 !important;     /* On le passe en positif mais inférieur aux menus (1 < 10) */
}

/* ============================================================
   ANIMATIONS DES BADGES LIVE & EFFETS DES PM (VIOLET)
   ============================================================ */
@keyframes radioLiveBlink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.badge-live-animated {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
    animation: radioLiveBlink 1.4s infinite ease-in-out !important;
    font-weight: 800;
}

.sb-live-text-animated {
    color: #ef4444 !important; 
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: radioLiveBlink 1.4s infinite ease-in-out !important; 
}

.shoutbox-radio-player.live-active {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.03) !important;
}

/* Système de Notification Flash Flash PM */
@keyframes flash-purple {
    0% { background-color: rgba(192, 132, 252, 0.6); } 
    50% { background-color: rgba(192, 132, 252, 0.1); }
    100% { background-color: rgba(192, 132, 252, 0.6); }
}

.shoutbox-msg-row.msg-private.just-received {
    animation: flash-purple 1s ease-in-out infinite;
    border: 1px solid #c084fc;
}

@keyframes whisperFlash {
    0% { background-color: rgba(192, 132, 252, 0.4); }
    100% { background-color: transparent; }
}

.shoutbox-flash-whisper {
    animation: whisperFlash 2s ease-out;
}

/* ============================================================
   STRUCTURE ET STYLE DU LOGICIEL SIDEBAR TOGGLE
   ============================================================ */
.toggle-container {
    max-width: 1750px;
    margin: 0 auto 10px auto;
    width: 100%;
}

.sidebar-toggle-style {
    background: #1a1a24;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
    transition: all 0.2s ease-in-out;
}

.sidebar-toggle-style:hover {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.toggle-container-inline {
    width: 100%;
    display: flex;
    justify-content: flex-start; 
}

/* Suppression des deux points parasites sur le profil */
.shoutbox-online-box .msg-username::after,
.shoutbox-online-box span::after,
.shoutbox-form-area + div span::after {
    content: "" !important;
}