/* ===================================
   SYSTÈME DE STYLES UTILISATEUR VIP
   Styles différenciés pour Admin, Éditeur, Auteur, VIP
   =================================== */

/* Variables pour les couleurs des rôles */
:root {
    /* Administrateur - Rouge/Doré */
    --admin-primary: #FF0000;
    --admin-secondary: #FFD700;
    --admin-glow: rgba(255, 0, 0, 0.6);
    --admin-gold-glow: rgba(255, 215, 0, 0.8);
    
    /* Éditeur - Violet/Argent */
    --editor-primary: #8A2BE2;
    --editor-secondary: #C0C0C0;
    --editor-glow: rgba(138, 43, 226, 0.6);
    --editor-silver-glow: rgba(192, 192, 192, 0.8);
    
    /* Auteur - Bleu/Cyan */
    --author-primary: #0066FF;
    --author-secondary: #00FFFF;
    --author-glow: rgba(0, 102, 255, 0.6);
    --author-cyan-glow: rgba(0, 255, 255, 0.8);
    
    /* VIP - Orange/Jaune */
    --vip-primary: #FF6600;
    --vip-secondary: #FFAA00;
    --vip-glow: rgba(255, 102, 0, 0.6);
    --vip-yellow-glow: rgba(255, 170, 0, 0.8);
}

/* ===================================
   STYLES GÉNÉRAUX POUR AVATARS
   =================================== */

/* Container pour l'avatar avec effets */
.user-avatar-container {
    position: relative;
    display: inline-block;
}

/* Badge de rôle sur l'avatar */
.role-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    border: 2px solid rgba(0, 0, 0, 0.8);
}

/* Préfixes pour les noms d'utilisateur */
.user-role-prefix {
    font-weight: bold;
    margin-right: 5px;
    text-shadow: 0 0 5px currentColor;
    font-size: 0.9em;
}

/* ===================================
   STYLES ADMINISTRATEUR
   =================================== */

/* Avatar administrateur */
.user-avatar-container.admin-user .avatar,
.user-avatar-container.admin-user img {
    border: 3px solid var(--admin-primary);
    border-radius: 50%;
    box-shadow: 
        0 0 15px var(--admin-glow),
        0 0 30px var(--admin-gold-glow),
        inset 0 0 10px rgba(255, 215, 0, 0.3);
    animation: adminPulse 3s ease-in-out infinite;
    position: relative;
}

/* Halo doré pour admin */
.user-avatar-container.admin-user::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid var(--admin-secondary);
    border-radius: 50%;
    opacity: 0.7;
    animation: adminHalo 4s linear infinite;
    z-index: -1;
}

/* Particules dorées */
.user-avatar-container.admin-user::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, transparent 40%, var(--admin-gold-glow) 70%, transparent 100%);
    border-radius: 50%;
    opacity: 0.4;
    animation: adminParticles 2s ease-in-out infinite alternate;
    z-index: -2;
}

/* Badge couronne pour admin */
.admin-user .role-badge {
    background: linear-gradient(45deg, var(--admin-secondary), #FFF700);
    color: var(--admin-primary);
}

.admin-user .role-badge::before {
    content: '👑';
    font-size: 12px;
}

/* Préfixe admin */
.user-role-prefix.admin {
    color: var(--admin-primary);
    text-shadow: 0 0 8px var(--admin-glow);
}

/* ===================================
   STYLES ÉDITEUR
   =================================== */

/* Avatar éditeur */
.user-avatar-container.editor-user .avatar,
.user-avatar-container.editor-user img {
    border: 3px solid var(--editor-primary);
    border-radius: 50%;
    box-shadow: 
        0 0 15px var(--editor-glow),
        0 0 25px var(--editor-silver-glow),
        inset 0 0 8px rgba(192, 192, 192, 0.3);
    animation: editorShimmer 3.5s ease-in-out infinite;
}

/* Effet cristallin pour éditeur */
.user-avatar-container.editor-user::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid var(--editor-secondary);
    border-radius: 50%;
    opacity: 0.6;
    animation: editorCrystal 3s ease-in-out infinite;
    z-index: -1;
}

/* Badge parchemin pour éditeur */
.editor-user .role-badge {
    background: linear-gradient(45deg, var(--editor-primary), var(--editor-secondary));
    color: white;
}

.editor-user .role-badge::before {
    content: '📜';
    font-size: 10px;
}

/* Préfixe éditeur */
.user-role-prefix.editor {
    color: var(--editor-primary);
    text-shadow: 0 0 6px var(--editor-glow);
}

/* ===================================
   STYLES AUTEUR
   =================================== */

/* Avatar auteur */
.user-avatar-container.author-user .avatar,
.user-avatar-container.author-user img {
    border: 3px solid var(--author-primary);
    border-radius: 50%;
    box-shadow: 
        0 0 15px var(--author-glow),
        0 0 25px var(--author-cyan-glow),
        inset 0 0 8px rgba(0, 255, 255, 0.3);
    animation: authorEnergy 2.8s ease-in-out infinite;
}

/* Aura énergétique pour auteur */
.user-avatar-container.author-user::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border: 2px solid var(--author-secondary);
    border-radius: 50%;
    opacity: 0.5;
    animation: authorAura 2.5s ease-in-out infinite;
    z-index: -1;
}

/* Badge épée pour auteur */
.author-user .role-badge {
    background: linear-gradient(45deg, var(--author-primary), var(--author-secondary));
    color: white;
}

.author-user .role-badge::before {
    content: '⚔️';
    font-size: 10px;
}

/* Préfixe auteur */
.user-role-prefix.author {
    color: var(--author-primary);
    text-shadow: 0 0 6px var(--author-glow);
}

/* ===================================
   STYLES VIP
   =================================== */

/* Avatar VIP */
.user-avatar-container.vip-user .avatar,
.user-avatar-container.vip-user img {
    border: 3px solid var(--vip-primary);
    border-radius: 50%;
    box-shadow: 
        0 0 15px var(--vip-glow),
        0 0 25px var(--vip-yellow-glow),
        inset 0 0 8px rgba(255, 170, 0, 0.3);
    animation: vipFlame 2.5s ease-in-out infinite;
}

/* Effet de flammes pour VIP */
.user-avatar-container.vip-user::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--vip-secondary);
    border-radius: 50%;
    opacity: 0.6;
    animation: vipRotate 4s linear infinite;
    z-index: -1;
}

/* Badge diamant pour VIP */
.vip-user .role-badge {
    background: linear-gradient(45deg, var(--vip-primary), var(--vip-secondary));
    color: white;
}

.vip-user .role-badge::before {
    content: '💎';
    font-size: 10px;
}

/* Préfixe VIP */
.user-role-prefix.vip {
    color: var(--vip-primary);
    text-shadow: 0 0 6px var(--vip-glow);
}

/* ===================================
   ANIMATIONS
   =================================== */

/* Animation admin - Pulsation avec halo */
@keyframes adminPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px var(--admin-glow),
            0 0 30px var(--admin-gold-glow),
            inset 0 0 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 25px var(--admin-glow),
            0 0 45px var(--admin-gold-glow),
            inset 0 0 15px rgba(255, 215, 0, 0.5);
    }
}

@keyframes adminHalo {
    0% { transform: rotate(0deg); opacity: 0.7; }
    50% { opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0.7; }
}

@keyframes adminParticles {
    0% { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.1); }
}

/* Animation éditeur - Scintillement cristallin */
@keyframes editorShimmer {
    0%, 100% {
        box-shadow: 
            0 0 15px var(--editor-glow),
            0 0 25px var(--editor-silver-glow),
            inset 0 0 8px rgba(192, 192, 192, 0.3);
    }
    33% {
        box-shadow: 
            0 0 20px var(--editor-glow),
            0 0 35px var(--editor-silver-glow),
            inset 0 0 12px rgba(192, 192, 192, 0.5);
    }
    66% {
        box-shadow: 
            0 0 12px var(--editor-glow),
            0 0 20px var(--editor-silver-glow),
            inset 0 0 6px rgba(192, 192, 192, 0.2);
    }
}

@keyframes editorCrystal {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Animation auteur - Ondulation énergétique */
@keyframes authorEnergy {
    0%, 100% {
        box-shadow: 
            0 0 15px var(--author-glow),
            0 0 25px var(--author-cyan-glow),
            inset 0 0 8px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 0 22px var(--author-glow),
            0 0 35px var(--author-cyan-glow),
            inset 0 0 12px rgba(0, 255, 255, 0.5);
    }
}

@keyframes authorAura {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.08); }
}

/* Animation VIP - Flammes rotatives */
@keyframes vipFlame {
    0%, 100% {
        box-shadow: 
            0 0 15px var(--vip-glow),
            0 0 25px var(--vip-yellow-glow),
            inset 0 0 8px rgba(255, 170, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 20px var(--vip-glow),
            0 0 35px var(--vip-yellow-glow),
            inset 0 0 12px rgba(255, 170, 0, 0.5);
    }
}

@keyframes vipRotate {
    0% { transform: rotate(0deg); opacity: 0.6; }
    100% { transform: rotate(360deg); opacity: 0.6; }
}

/* ===================================
   STYLES POUR COMMENTAIRES
   =================================== */

/* Bordure subtile pour les commentaires selon le rôle */
.comment-item.admin-comment {
    border-left: 3px solid var(--admin-primary);
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.05) 0%, transparent 100%);
}

.comment-item.editor-comment {
    border-left: 3px solid var(--editor-primary);
    background: linear-gradient(90deg, rgba(138, 43, 226, 0.05) 0%, transparent 100%);
}

.comment-item.author-comment {
    border-left: 3px solid var(--author-primary);
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.05) 0%, transparent 100%);
}

.comment-item.vip-comment {
    border-left: 3px solid var(--vip-primary);
    background: linear-gradient(90deg, rgba(255, 102, 0, 0.05) 0%, transparent 100%);
}

/* ===================================
   STYLES POUR HEADER
   =================================== */

/* Avatars dans le header (plus petits) */
.site-header .user-avatar-container.admin-user .avatar,
.site-header .user-avatar-container.admin-user img {
    border: 2px solid var(--admin-primary);
    box-shadow: 0 0 8px var(--admin-glow);
}

.site-header .user-avatar-container.editor-user .avatar,
.site-header .user-avatar-container.editor-user img {
    border: 2px solid var(--editor-primary);
    box-shadow: 0 0 8px var(--editor-glow);
}

.site-header .user-avatar-container.author-user .avatar,
.site-header .user-avatar-container.author-user img {
    border: 2px solid var(--author-primary);
    box-shadow: 0 0 8px var(--author-glow);
}

.site-header .user-avatar-container.vip-user .avatar,
.site-header .user-avatar-container.vip-user img {
    border: 2px solid var(--vip-primary);
    box-shadow: 0 0 8px var(--vip-glow);
}

/* Badge plus petit pour le header */
.site-header .role-badge {
    width: 16px;
    height: 16px;
    font-size: 8px;
    top: -3px;
    right: -3px;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Mobile - Effets simplifiés */
@media (max-width: 768px) {
    .user-avatar-container::before,
    .user-avatar-container::after {
        display: none;
    }
    
    .user-avatar-container .avatar,
    .user-avatar-container img {
        animation: none !important;
        box-shadow: 0 0 5px currentColor !important;
    }
    
    .role-badge {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
    
    .user-role-prefix {
        font-size: 0.8em;
    }
}

/* Tablette - Effets intermédiaires */
@media (min-width: 769px) and (max-width: 1024px) {
    .user-avatar-container::after {
        display: none;
    }
    
    .role-badge {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}

/* ===================================
   ÉTATS DE SURVOL
   =================================== */

.user-avatar-container:hover .avatar,
.user-avatar-container:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.admin-user:hover .avatar,
.admin-user:hover img {
    box-shadow: 
        0 0 25px var(--admin-glow),
        0 0 45px var(--admin-gold-glow),
        inset 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.editor-user:hover .avatar,
.editor-user:hover img {
    box-shadow: 
        0 0 25px var(--editor-glow),
        0 0 40px var(--editor-silver-glow),
        inset 0 0 12px rgba(192, 192, 192, 0.5) !important;
}

.author-user:hover .avatar,
.author-user:hover img {
    box-shadow: 
        0 0 25px var(--author-glow),
        0 0 40px var(--author-cyan-glow),
        inset 0 0 12px rgba(0, 255, 255, 0.5) !important;
}

.vip-user:hover .avatar,
.vip-user:hover img {
    box-shadow: 
        0 0 25px var(--vip-glow),
        0 0 40px var(--vip-yellow-glow),
        inset 0 0 12px rgba(255, 170, 0, 0.5) !important;
}

/* 1) Le header doit passer DEVANT le fond étoilé */
#starry-background,
.starry-background {
  position: fixed;       /* ou absolute selon ton implé */
  z-index: 0 !important; /* fond en dessous */
}
.site-header {
  position: relative;
  z-index: 10;           /* header au-dessus du fond */
}

/* 2) Pas de clipping par le bouton utilisateur */
.site-header .user-menu .user-toggle {
  position: relative;
  overflow: visible;     /* IMPORTANT : pour laisser dépasser le badge */
  background: transparent;
  border: 0;
}

/* 3) Autoriser le wrapper avatar à déborder */
.site-header .user-avatar-container {
  position: relative;
  overflow: visible;
  z-index: 21;
}

/* 4) Le badge passe TOUT devant dans le header */
.site-header .role-badge {
  position: absolute;    /* déjà le cas, on insiste */
  z-index: 9999;         /* très haut pour éviter les conflits */
  top: -3px;             /* tes valeurs header */
  right: -3px;
  pointer-events: none;  /* évite de bloquer le clic sur le bouton */
}
/* --- Désactiver l'aura et les animations dans le header uniquement --- */
.user-avatar-container.header-context::before,
.user-avatar-container.header-context::after {
  display: none !important;          /* coupe les halos/pseudo-éléments */
}

.user-avatar-container.header-context .avatar,
.user-avatar-container.header-context img {
  box-shadow: none !important;       /* plus de glow */
  animation: none !important;        /* plus d'animation */
  border-width: 2px;                 /* fine bague colorée (garde l’info de rôle) */
}

/* pas d'effet zoom au survol dans le header */
.user-avatar-container.header-context:hover .avatar,
.user-avatar-container.header-context:hover img {
  transform: none !important;
}

/* si ton CSS header ajoutait déjà un glow par rôle, on le neutralise */
.site-header .user-avatar-container.admin-user .avatar,
.site-header .user-avatar-container.admin-user img,
.site-header .user-avatar-container.editor-user .avatar,
.site-header .user-avatar-container.editor-user img,
.site-header .user-avatar-container.author-user .avatar,
.site-header .user-avatar-container.author-user img,
.site-header .user-avatar-container.vip-user .avatar,
.site-header .user-avatar-container.vip-user img {
  box-shadow: none !important;
}
