/* GÉNÉRÉ par admin/_dev_audit_cosmetiques/extraire-auras.cjs le 08/11/2026 — NE PAS MODIFIER À LA MAIN.
   Effets d'avatar (.aura.<id>) repris de perso.html (la source) pour les pages qui affichent un avatar ou la fiche
   d'identité : accueil classique, appli, guildes, classements. */
.aura { position: absolute; inset: -20px; border-radius: 28px; pointer-events: none; z-index: 0; mix-blend-mode: screen; }
.aura.none { display: none; }
.aura.cosmic { background: radial-gradient(60% 60%, rgba(137, 207, 255, 0.25), transparent 60%), conic-gradient(rgba(139, 92, 246, 0.25), transparent, rgba(105, 224, 255, 0.25), transparent); animation: 9s linear 0s infinite normal none running swirl; }
.aura.flame { background: radial-gradient(60% 60% at 50% 60%, rgba(255, 120, 40, 0.25), transparent 60%); filter: blur(6px); animation: 2.2s ease-in-out 0s infinite normal none running pulse; }
.aura.runes { background: radial-gradient(40% 40% at 30% 30%, rgba(137, 207, 255, 0.22), transparent 60%), radial-gradient(40% 40% at 70% 70%, rgba(139, 92, 246, 0.22), transparent 60%); animation: 6s ease-in-out 0s infinite normal none running float; }
.aura.voyageur { background: radial-gradient(55% 55%, rgba(214, 179, 106, 0.22), transparent 60%), conic-gradient(from 90deg, rgba(126, 166, 83, 0.2), transparent 30%, rgba(214, 179, 106, 0.2), transparent 70%); animation: 12s linear 0s infinite normal none running swirl; }
.aura { position: absolute; inset: -22px; border-radius: 28px; pointer-events: none; z-index: 5; --hole: 48%; --bw: 10px; opacity: 0.98; }
.aura.none { display: none; }
.aura.cosmic { background: radial-gradient(
          circle at 50% 50%,
          transparent calc(var(--hole) - 2%),
          rgba(70, 160, 255, 0.35) calc(var(--hole) + 2%),
          rgba(135, 92, 246, 0.35) calc(var(--hole) + 6%),
          rgba(70, 160, 255, 0.22) calc(var(--hole) + 12%),
          transparent calc(var(--hole) + 22%)
        ); mix-blend-mode: screen; filter: saturate(115%); }
.aura.cosmic::before { content: ""; position: absolute; inset: -14px; border-radius: 34px; background: repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 255, 255, 0.18) 0deg,
            rgba(255, 255, 255, 0.18) 2deg,
            transparent 7deg,
            transparent 16deg
          ),
          /* bloom */
          radial-gradient(
              circle at 50% 50%,
              transparent var(--hole),
              rgba(120, 150, 255, 0.2) calc(var(--hole) + 10%),
              rgba(150, 100, 255, 0.16) calc(var(--hole) + 22%),
              rgba(255, 255, 255, 0.1) calc(var(--hole) + 34%),
              transparent 100%
            ); animation: 18s linear 0s infinite normal none running cosmic-spin; mix-blend-mode: screen; filter: blur(0.6px); mask: radial-gradient(
          circle at 50% 50%,
          transparent var(--hole),
          #000 calc(var(--hole) + 4%),
          #000 100%
        ); }
.aura.cosmic::after { content: ""; position: absolute; inset: -10px; border-radius: 32px; background: radial-gradient(2px 2px at 22% 28%, rgba(255, 255, 255, 0.95), transparent 60%), radial-gradient(1.8px 1.8px at 78% 36%, rgba(255, 255, 255, 0.9), transparent 60%), radial-gradient(1.6px 1.6px at 36% 74%, rgba(255, 255, 255, 0.85), transparent 60%), radial-gradient(1.4px 1.4px at 64% 82%, rgba(255, 255, 255, 0.8), transparent 60%); animation: 3s ease-in-out 0s infinite alternate none running cosmic-twinkle; mix-blend-mode: screen; }
.aura.flame { background: radial-gradient(
          circle at 50% 56%,
          transparent calc(var(--hole) - 2%),
          rgba(255, 140, 40, 0.55) calc(var(--hole) + 3%),
          rgba(255, 200, 90, 0.32) calc(var(--hole) + 9%),
          rgba(255, 120, 40, 0.22) calc(var(--hole) + 16%),
          transparent calc(var(--hole) + 26%)
        ); mix-blend-mode: screen; filter: saturate(120%); }
.aura.flame::before { content: ""; position: absolute; inset: -18px; border-radius: 36px; background: conic-gradient(
            from 200deg at 50% 100%,
            rgba(255, 170, 90, 0.45) 0 20%,
            rgba(255, 90, 50, 0.35) 35% 55%,
            rgba(255, 220, 120, 0.4) 70% 85%,
            transparent 90% 100%
          ),
          radial-gradient(
            circle at 50% 60%,
            transparent var(--hole),
            rgba(255, 120, 40, 0.22) calc(var(--hole) + 12%),
            rgba(255, 150, 60, 0.16) calc(var(--hole) + 26%),
            transparent 100%
          ); animation: 1.9s ease-in-out 0s infinite normal none running flame-waver; filter: blur(1.6px); mix-blend-mode: screen; mask: radial-gradient(
          circle at 50% 50%,
          transparent var(--hole),
          #000 calc(var(--hole) + 6%),
          #000 100%
        ); }
.aura.flame::after { content: ""; position: absolute; inset: -14px; border-radius: 34px; background: radial-gradient(100% 80% at 50% 55%, rgba(255, 180, 90, 0.12), transparent 60%); animation: 1.2s ease-in-out 0s infinite normal none running flame-heat; mix-blend-mode: screen; filter: blur(1.2px); }
.aura.runes { background: radial-gradient(
          circle at 50% 50%,
          transparent calc(var(--hole) - 2%),
          rgba(137, 207, 255, 0.48) calc(var(--hole) + 3%),
          rgba(139, 92, 246, 0.42) calc(var(--hole) + 9%),
          rgba(137, 207, 255, 0.22) calc(var(--hole) + 16%),
          transparent calc(var(--hole) + 26%)
        ); mix-blend-mode: screen; }
.aura.runes::before { content: ""; position: absolute; inset: -12px; border-radius: 32px; background: repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(137, 207, 255, 0.22) 0deg,
            transparent 10deg,
            transparent 30deg,
            rgba(139, 92, 246, 0.22) 40deg
          ),
          radial-gradient(
            circle at 50% 50%,
            transparent var(--hole),
            rgba(137, 207, 255, 0.18) calc(var(--hole) + 12%),
            rgba(139, 92, 246, 0.16) calc(var(--hole) + 26%),
            transparent 100%
          ); animation: 14s linear 0s infinite normal none running runes-rotate; filter: blur(0.5px); mix-blend-mode: screen; mask: radial-gradient(
          circle at 50% 50%,
          transparent var(--hole),
          #000 calc(var(--hole) + 6%),
          #000 100%
        ); }
.aura.runes::after { content: ""; position: absolute; inset: -18px; border-radius: 36px; background: radial-gradient(42% 42% at 32% 32%, rgba(139, 92, 246, 0.22), transparent 62%), radial-gradient(42% 42% at 68% 68%, rgba(137, 207, 255, 0.22), transparent 62%); animation: 2.8s ease-in-out 0s infinite normal none running runes-pulse; mix-blend-mode: screen; }
.aura.eclipse { background: radial-gradient(circle, transparent 45%, rgba(50, 40, 80, 0.4) 55%, rgba(120, 90, 180, 0.25) 70%, transparent 90%); mix-blend-mode: screen; filter: saturate(130%); }
.aura.eclipse::before { content: ""; position: absolute; inset: -12px; border-radius: 32px; background: conic-gradient(rgba(139, 92, 246, 0.25), rgba(0, 0, 0, 0.2), rgba(105, 224, 255, 0.25)); animation: 14s linear 0s infinite normal none running eclipse-rotate; mix-blend-mode: screen; filter: blur(0.6px); }
.aura.eclipse::after { content: ""; position: absolute; inset: -16px; border-radius: 36px; background: radial-gradient(40% 40%, rgba(0, 0, 0, 0.4), transparent 70%), radial-gradient(40% 40% at 30% 30%, rgba(139, 92, 246, 0.15), transparent 60%), radial-gradient(40% 40% at 70% 70%, rgba(105, 224, 255, 0.15), transparent 60%); animation: 3s ease-in-out 0s infinite normal none running eclipse-pulse; mix-blend-mode: screen; }
.aura.aurora { background: radial-gradient(circle, transparent 40%, rgba(130, 255, 220, 0.35) 55%, rgba(170, 120, 255, 0.25) 70%, transparent 90%); mix-blend-mode: screen; filter: saturate(130%); }
.aura.aurora::before { content: ""; position: absolute; inset: -14px; border-radius: 36px; background: linear-gradient(120deg, rgb(130, 234, 255), rgb(166, 117, 255), rgb(104, 255, 213), rgb(130, 234, 255)) 0% 0% / 300% 300%; animation: 6s ease-in-out 0s infinite normal none running aurora-wave; mix-blend-mode: screen; filter: blur(1px); mask: radial-gradient(circle, transparent 46%, rgb(0, 0, 0) 52%); }
.aura.storm { background: radial-gradient(circle, transparent 45%, rgba(100, 180, 255, 0.35) 60%, rgba(0, 90, 255, 0.25) 70%, transparent 90%); mix-blend-mode: screen; filter: brightness(1.2); }
.aura.storm::before { content: ""; position: absolute; inset: -16px; border-radius: 34px; background: repeating-conic-gradient(rgba(255, 255, 255, 0.25) 0deg, transparent 8deg, transparent 12deg, rgba(0, 200, 255, 0.25) 16deg); animation: 2s linear 0s infinite normal none running storm-flash; mix-blend-mode: screen; filter: blur(0.8px); }
.aura.storm::after { content: ""; position: absolute; inset: -10px; border-radius: 30px; background: radial-gradient(2px 2px at 30% 70%, rgba(255, 255, 255, 0.95), transparent 60%), radial-gradient(2px 2px at 70% 30%, rgba(255, 255, 255, 0.85), transparent 60%); animation: 1s ease-in-out 0s infinite alternate none running storm-twinkle; mix-blend-mode: screen; }
.aura.void { background: radial-gradient(circle, transparent 45%, rgba(40, 0, 60, 0.6) 55%, rgba(100, 0, 150, 0.4) 65%, rgba(0, 0, 0, 0.8) 80%, transparent 100%); mix-blend-mode: screen; }
.aura.void::before { content: ""; position: absolute; inset: -18px; border-radius: 38px; background: conic-gradient(rgba(200, 0, 255, 0.25), rgba(0, 0, 0, 0.6), rgba(100, 0, 255, 0.25)); animation: 12s linear 0s infinite normal none running void-rotate; mix-blend-mode: screen; filter: blur(0.8px); }
.aura.void::after { content: ""; position: absolute; inset: -14px; border-radius: 34px; background: radial-gradient(50% 50%, rgba(180, 120, 255, 0.2), transparent 60%); animation: 2.8s ease-in-out 0s infinite normal none running void-pulse; mix-blend-mode: screen; }
.aura.electric { background: radial-gradient(circle, transparent 40%, rgba(255, 240, 0, 0.22) 55%, rgba(255, 200, 0, 0.12) 70%, transparent 90%); mix-blend-mode: screen; animation: 0.28s steps(2) 0s infinite normal none running electric-aura-flash; }
.aura.electric::before { content: ""; position: absolute; inset: -16px; border-radius: 36px; background: conic-gradient(transparent 0deg, rgba(255, 255, 0, 0.4) 18deg, transparent 38deg, rgba(255, 220, 0, 0.3) 60deg, transparent 80deg, rgba(255, 255, 120, 0.4) 110deg, transparent 145deg, rgba(255, 200, 0, 0.3) 200deg, transparent 240deg, rgba(255, 255, 0, 0.4) 280deg, transparent 330deg); animation: 0.4s steps(3) 0s infinite normal none running electric-zap-spin; mix-blend-mode: screen; filter: blur(0.5px); }
.aura.electric::after { content: ""; position: absolute; inset: -10px; border-radius: 30px; box-shadow: rgba(255, 230, 0, 0.45) 0px 0px 14px 2px; animation: 0.22s steps(2) 0s infinite alternate none running electric-aura-flash; }
.aura.shadow { background: radial-gradient(circle, transparent 40%, rgba(20, 0, 40, 0.5) 55%, rgba(80, 0, 120, 0.3) 70%, transparent 90%); mix-blend-mode: screen; animation: 3s ease-in-out 0s infinite normal none running shadow-aura-pulse; }
.aura.shadow::before { content: ""; position: absolute; inset: -16px; border-radius: 36px; background: radial-gradient(transparent 50%, rgba(60, 0, 100, 0.25) 65%, rgba(120, 60, 200, 0.15) 80%, transparent 100%); animation: 4s ease-in-out 0s infinite normal none running shadow-aura-float; mix-blend-mode: screen; filter: blur(1px); }
.aura.ice { background: radial-gradient(circle, transparent 40%, rgba(120, 220, 255, 0.2) 55%, rgba(60, 180, 255, 0.1) 70%, transparent 90%); mix-blend-mode: screen; }
.aura.ice::before { content: ""; position: absolute; inset: -14px; border-radius: 36px; background: radial-gradient(transparent 48%, rgba(160, 240, 255, 0.3) 56%, transparent 70%); animation: 2.5s ease-out 0s infinite normal none running ice-aura-ripple; mix-blend-mode: screen; }
.aura.ice::after { content: ""; position: absolute; inset: -22px; border-radius: 42px; background: radial-gradient(transparent 56%, rgba(100, 200, 255, 0.15) 64%, transparent 78%); animation: 2.5s ease-out 1.25s infinite normal none running ice-aura-ripple; mix-blend-mode: screen; }
.aura.blood { background: radial-gradient(circle, transparent 40%, rgba(180, 0, 20, 0.25) 55%, rgba(120, 0, 10, 0.18) 70%, transparent 90%); mix-blend-mode: screen; animation: 1.8s ease-in-out 0s infinite normal none running blood-aura-pulse; }
.aura.blood::before { content: ""; position: absolute; inset: -16px; border-radius: 36px; background: radial-gradient(at 50% 65%, transparent 50%, rgba(200, 0, 30, 0.2) 65%, transparent 85%); animation: 1.8s ease-in-out 0.9s infinite normal none running blood-aura-pulse; mix-blend-mode: screen; filter: blur(1px); }
.aura.feu { background: radial-gradient(at 50% 85%, rgba(255, 60, 0, 0.3) 0%, rgba(255, 130, 0, 0.18) 40%, transparent 68%); mix-blend-mode: screen; animation: 0.9s ease-in-out 0s infinite normal none running feu-aura-flicker; }
.aura.feu::before { content: ""; position: absolute; inset: -14px; border-radius: 36px; background: radial-gradient(at 30% 80%, rgba(255, 60, 0, 0.22), transparent 50%), radial-gradient(at 70% 75%, rgba(255, 140, 0, 0.18), transparent 45%); animation: 0.7s ease-in-out 0.15s infinite alternate none running feu-aura-flicker; mix-blend-mode: screen; }
.aura.feu::after { content: ""; position: absolute; inset: -8px; border-radius: 30px; box-shadow: rgba(255, 60, 0, 0.35) 0px 8px 22px 8px, rgba(255, 160, 0, 0.22) 0px 4px 14px; animation: 1.1s ease-in-out 0s infinite normal none running feu-aura-glow; }
.aura.rainbow { background: conic-gradient(rgba(255, 80, 80, 0.13), rgba(255, 165, 0, 0.13), rgba(255, 255, 0, 0.1), rgba(80, 255, 100, 0.13), rgba(80, 180, 255, 0.13), rgba(180, 80, 255, 0.13), rgba(255, 80, 80, 0.13)); mix-blend-mode: screen; animation: 4s linear 0s infinite normal none running rainbow-aura-hue; }
.aura.rainbow::before { content: ""; position: absolute; inset: -10px; border-radius: 36px; background: conic-gradient(from 180deg, rgba(255, 80, 80, 0.08), rgba(255, 165, 0, 0.08), rgba(255, 255, 0, 0.07), rgba(80, 255, 100, 0.08), rgba(80, 180, 255, 0.08), rgba(180, 80, 255, 0.08), rgba(255, 80, 80, 0.08)); animation: 6s linear 0s infinite reverse none running rainbow-aura-hue; mix-blend-mode: screen; }
.aura.rainbow::after { content: ""; position: absolute; inset: -4px; border-radius: 32px; box-shadow: rgba(255, 200, 100, 0.18) 0px 0px 18px, rgba(100, 200, 255, 0.14) 0px 0px 30px; animation: 4s ease-in-out 0s infinite normal none running rainbow-aura-glow; }
.aura.plasma { background: radial-gradient(circle, transparent 38%, rgba(220, 60, 255, 0.22) 54%, rgba(160, 0, 220, 0.15) 70%, transparent 88%); mix-blend-mode: screen; animation: 2s ease-in-out 0s infinite normal none running plasma-aura-pulse; }
.aura.plasma::before { content: ""; position: absolute; inset: -14px; border-radius: 36px; background: radial-gradient(transparent 50%, rgba(255, 80, 255, 0.2) 60%, transparent 76%); animation: 2s ease-out 0s infinite normal none running plasma-aura-ripple; mix-blend-mode: screen; }
.aura.plasma::after { content: ""; position: absolute; inset: -22px; border-radius: 42px; background: radial-gradient(transparent 58%, rgba(180, 0, 255, 0.12) 66%, transparent 80%); animation: 2s ease-out 1s infinite normal none running plasma-aura-ripple; mix-blend-mode: screen; }
.avatar.avec-ca > .aura { clip-path: inset(22px round 18px); }
@keyframes swirl { 
  100% { transform: rotate(360deg); }
}
@keyframes pulse { 
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
@keyframes float { 
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
@keyframes cosmic-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes cosmic-twinkle { 
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}
@keyframes flame-waver { 
  0%, 100% { transform: translateY(0px) scale(1.02) rotate(-1deg); }
  50% { transform: translateY(-2px) scale(1.05) rotate(1deg); }
}
@keyframes flame-heat { 
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.03); opacity: 1; }
}
@keyframes runes-rotate { 
  100% { transform: rotate(360deg); }
}
@keyframes runes-pulse { 
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes eclipse-rotate { 
  100% { transform: rotate(360deg); }
}
@keyframes eclipse-pulse { 
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes aurora-wave { 
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes storm-flash { 
  0%, 100% { opacity: 0.8; transform: rotate(0deg); }
  50% { opacity: 1; transform: rotate(180deg); }
}
@keyframes storm-twinkle { 
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes void-rotate { 
  100% { transform: rotate(360deg); }
}
@keyframes void-pulse { 
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes electric-zap-spin { 
  0% { transform: rotate(0deg); opacity: 1; }
  33% { transform: rotate(120deg); opacity: 0.55; }
  66% { transform: rotate(240deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.7; }
}
@keyframes electric-aura-flash { 
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes shadow-aura-pulse { 
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes shadow-aura-float { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes ice-aura-ripple { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes blood-aura-pulse { 
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes feu-aura-flicker { 
  0%, 100% { opacity: 0.65; transform: scaleY(1); }
  33% { opacity: 1; transform: scaleY(1.04); }
  66% { opacity: 0.8; transform: scaleY(0.97); }
}
@keyframes feu-aura-glow { 
  0%, 100% { box-shadow: rgba(255, 60, 0, 0.35) 0px 8px 22px 8px, rgba(255, 160, 0, 0.22) 0px 4px 14px; }
  50% { box-shadow: rgba(255, 80, 0, 0.55) 0px 8px 30px 12px, rgba(255, 180, 0, 0.38) 0px 4px 20px; }
}
@keyframes rainbow-aura-hue { 
  100% { filter: hue-rotate(360deg); }
}
@keyframes rainbow-aura-glow { 
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes plasma-aura-pulse { 
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes plasma-aura-ripple { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}