/* LikeBand — 50 Avatars 3D Rock Expressifs */
/* Langues, écouteurs, mohawks, cheveux punk, cornes, lunettes */

/* ── Panel avatars ── */
.avatar-picker-panel {
  display: none; flex-wrap: wrap; gap: 4px; padding: 8px;
  position: absolute; top: 100%; left: 0;
  width: 340px; max-height: 340px; overflow-y: auto;
  background: #1a1040f0; border: 1px solid #6d28d944;
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 1000;
}
.avatar-picker-panel.show { display: flex; }

.av-pick {
  width: 56px; height: 68px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 3px; border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color .15s, transform .12s, background .15s;
}
.av-pick:hover {
  border-color: #7c3aed55; background: #7c3aed15; transform: scale(1.1);
}
.av-pick .av-label {
  font-size: 7px; color: #a1a1aa; text-align: center;
  line-height: 1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 54px;
}

/* ── Bouton toggle ── */
.avatar-toggle-btn {
  background: none; border: none; font-size: 20px;
  cursor: pointer; padding: 2px 4px; transition: transform .15s; line-height: 1;
}
.avatar-toggle-btn:hover { transform: scale(1.15); }

/* ── Avatar 3D base ── */
.lb-avatar {
  width: 44px; height: 44px; position: relative;
  perspective: 300px; transform-style: preserve-3d; flex-shrink: 0;
}
.lb-av-head {
  width: 100%; height: 100%; border-radius: 50%;
  position: relative; transform-style: preserve-3d; overflow: visible;
  box-shadow: 0 3px 12px var(--av-shadow, rgba(124,58,237,.4)),
    inset 0 -5px 10px rgba(0,0,0,.35),
    inset 0 2px 5px var(--av-hi, rgba(255,255,255,.25));
  border: 2px solid var(--av-bdr, rgba(124,58,237,.35));
  background: var(--av-bg);
  animation: av-bob 3s ease-in-out infinite;
}
.av-pick:hover .lb-av-head { transform: rotateY(12deg) rotateX(-5deg); }
.lb-av-face { position: absolute; inset: 0; }

/* Yeux */
.lb-av-eye {
  width: 7px; height: 7px;
  background: var(--av-eye, radial-gradient(circle at 35% 35%, #fff 30%, #ddd 60%, #aaa));
  border-radius: 50%; position: absolute; top: 34%;
  box-shadow: 0 0 4px var(--av-eyeglow, rgba(255,255,255,.5));
}
.lb-av-eye--l { left: 26%; }
.lb-av-eye--r { right: 26%; }

/* Bouche */
.lb-av-mouth {
  position: absolute; bottom: 24%; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 4px;
  background: var(--av-mouth, #220022); border-radius: 2px;
}

/* ── LANGUE ── */
.lb-av-mouth.has-tongue { overflow: visible; }
.lb-av-mouth.has-tongue::after {
  content: ""; position: absolute; top: 80%; left: 50%;
  transform: translateX(-50%);
  width: var(--tongue-w, 8px); height: var(--tongue-h, 7px);
  background: var(--tongue-color, #e74c6f);
  border-radius: 0 0 50% 50%;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.3);
}

/* ── ECOUTEURS ── */
.lb-av-head.has-phones::before {
  content: ""; position: absolute; top: -4px; left: 10%; right: 10%;
  height: 38%; border: 3px solid var(--phone-color, #444);
  border-bottom: none; border-radius: 50% 50% 0 0;
  z-index: 3; pointer-events: none;
}
.lb-av-head.has-phones::after {
  content: ""; position: absolute; top: 28%; left: -4px; right: -4px;
  height: 0; border-left: 6px solid var(--phone-pad, #555);
  border-right: 6px solid var(--phone-pad, #555);
  z-index: 3; pointer-events: none;
}

/* ── MOHAWK ── */
.lb-av-face.has-mohawk::before {
  content: ""; position: absolute; top: -42%; left: 50%;
  transform: translateX(-50%); width: 30%; height: 50%;
  background: var(--mohawk-color, #4ade80);
  clip-path: polygon(20% 100%, 0% 40%, 15% 0%, 35% 30%, 50% 0%, 65% 30%, 85% 0%, 100% 40%, 80% 100%);
  z-index: 5; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

/* ── CHEVEUX LONGS ── */
.lb-av-face.has-longhair::before {
  content: ""; position: absolute; top: -20%; left: -10%; right: -10%;
  height: 70%; background: var(--hair-color, #1c1917);
  border-radius: 50% 50% 30% 30%;
  z-index: -1; pointer-events: none;
}

/* ── CHEVEUX SPIKY ── */
.lb-av-face.has-spiky::before {
  content: ""; position: absolute; top: -48%; left: 50%;
  transform: translateX(-50%); width: 80%; height: 55%;
  background: var(--spike-color, #f97316);
  clip-path: polygon(0% 100%, 5% 50%, 12% 80%, 20% 20%, 30% 70%, 40% 10%, 50% 60%, 60% 5%, 70% 55%, 80% 15%, 88% 70%, 95% 40%, 100% 100%);
  z-index: 5; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

/* ── CORNES ── */
.lb-av-face.has-horns::before {
  content: ""; position: absolute; top: -32%; left: 50%;
  transform: translateX(-50%); width: 100%; height: 40%;
  clip-path: polygon(15% 100%, 8% 0%, 22% 100%, 78% 100%, 92% 0%, 85% 100%);
  background: var(--horn-color, #dc2626);
  z-index: 5; pointer-events: none;
}

/* ── LUNETTES DE SOLEIL ── */
.lb-av-face.has-shades::after {
  content: ""; position: absolute; top: 28%; left: 12%; right: 12%;
  height: 22%; background: var(--shade-color, #18181bdd);
  border-radius: 3px; z-index: 4; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ── COURONNE ── */
.lb-av-face.has-crown::before {
  content: ""; position: absolute; top: -38%; left: 50%;
  transform: translateX(-50%); width: 70%; height: 35%;
  background: var(--crown-color, #fbbf24);
  clip-path: polygon(0% 100%, 0% 40%, 15% 70%, 30% 20%, 50% 60%, 70% 20%, 85% 70%, 100% 40%, 100% 100%);
  z-index: 5; filter: drop-shadow(0 1px 4px rgba(251,191,36,.6));
}

/* Glow */
.lb-av-glow {
  position: absolute; inset: -6px; border-radius: 50%;
  background: var(--av-glow, radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%));
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.av-pick:hover .lb-av-glow { opacity: 1; }

/* Ring */
.lb-av-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--av-ring, #7c3aed44);
  animation: av-ring-spin 5s linear infinite; pointer-events: none;
}

@keyframes av-bob {
  0%, 100% { transform: translateY(0) rotateY(0); }
  50% { transform: translateY(-1.5px) rotateY(3deg); }
}
@keyframes av-ring-spin { to { transform: rotate(360deg); } }
@keyframes av-hue { to { filter: hue-rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   50 VARIANTS — Rock Expressifs
   ═══════════════════════════════════════════════════════════ */

/* 1. Rocker — rouge, langue, cornes */
.lb-av--rocker { --av-bg: radial-gradient(ellipse at 30% 25%, #ff4444, #cc0000 40%, #880000 80%); --av-shadow: rgba(255,0,0,.5); --av-bdr: rgba(255,100,100,.4); --av-glow: radial-gradient(circle, rgba(255,0,0,.3) 0%, transparent 70%); --av-ring: #ff444466; --horn-color: #cc0000; --tongue-w: 10px; --tongue-h: 8px; --tongue-color: #e74c6f; }
.lb-av--rocker .lb-av-mouth { width: 16px; height: 8px; background: #220000; border-radius: 0 0 50% 50%; }
.lb-av--rocker .lb-av-eye { width: 8px; height: 6px; border-radius: 40%; }

/* 2. DJ — violet, écouteurs */
.lb-av--dj { --av-bg: radial-gradient(ellipse at 30% 25%, #a855f7, #7c3aed 40%, #5b21b6 80%); --av-shadow: rgba(124,58,237,.5); --av-bdr: rgba(167,139,250,.4); --av-glow: radial-gradient(circle, rgba(124,58,237,.35) 0%, transparent 70%); --av-ring: #a855f766; --phone-color: #c4b5fd; --phone-pad: #a78bfa; }
.lb-av--dj .lb-av-mouth { width: 14px; height: 6px; background: #2e1065; border-radius: 0 0 50% 50%; }

/* 3. Punk — vert fluo, mohawk, langue */
.lb-av--punk { --av-bg: radial-gradient(ellipse at 30% 25%, #4ade80, #22c55e 40%, #15803d 80%); --av-shadow: rgba(34,197,94,.5); --av-bdr: rgba(74,222,128,.4); --av-glow: radial-gradient(circle, rgba(34,197,94,.35) 0%, transparent 70%); --av-ring: #4ade8066; --mohawk-color: #bbf7d0; --tongue-w: 8px; --tongue-h: 6px; }
.lb-av--punk .lb-av-mouth { width: 14px; height: 7px; background: #052e16; border-radius: 0 0 50% 50%; }
.lb-av--punk .lb-av-eye { --av-eye: radial-gradient(circle, #bbf7d0 30%, #86efac); }

/* 4. Blues — bleu profond */
.lb-av--blues { --av-bg: radial-gradient(ellipse at 30% 25%, #60a5fa, #3b82f6 40%, #1d4ed8 80%); --av-shadow: rgba(59,130,246,.5); --av-bdr: rgba(96,165,250,.4); --av-glow: radial-gradient(circle, rgba(59,130,246,.3) 0%, transparent 70%); --av-ring: #60a5fa66; }
.lb-av--blues .lb-av-mouth { width: 12px; height: 4px; background: #1e3a5f; border-radius: 3px; transform: translateX(-50%) rotate(-4deg); }

/* 5. Jazz — or, couronne */
.lb-av--jazz { --av-bg: radial-gradient(ellipse at 30% 25%, #fbbf24, #f59e0b 40%, #b45309 80%); --av-shadow: rgba(245,158,11,.5); --av-bdr: rgba(251,191,36,.4); --av-hi: rgba(255,230,150,.35); --av-glow: radial-gradient(circle, rgba(245,158,11,.3) 0%, transparent 70%); --av-ring: #fbbf2466; --crown-color: #fbbf24; }
.lb-av--jazz .lb-av-mouth { width: 14px; height: 7px; background: #451a03; border-radius: 0 0 50% 50%; }

/* 6. Metal — gris, spiky, langue */
.lb-av--metal { --av-bg: radial-gradient(ellipse at 30% 25%, #9ca3af, #6b7280 40%, #374151 80%); --av-shadow: rgba(107,114,128,.5); --av-bdr: rgba(156,163,175,.4); --av-glow: radial-gradient(circle, rgba(107,114,128,.35) 0%, transparent 70%); --av-ring: #9ca3af66; --spike-color: #4b5563; --tongue-w: 10px; --tongue-h: 7px; --tongue-color: #dc2626; }
.lb-av--metal .lb-av-mouth { width: 16px; height: 5px; background: #111827; border-radius: 0 0 50% 50%; }
.lb-av--metal .lb-av-eye { width: 10px; height: 4px; border-radius: 40%; }

/* 7. Pop Star — rose, couronne */
.lb-av--popstar { --av-bg: radial-gradient(ellipse at 30% 25%, #f472b6, #ec4899 40%, #be185d 80%); --av-shadow: rgba(236,72,153,.5); --av-bdr: rgba(244,114,182,.4); --av-glow: radial-gradient(circle, rgba(236,72,153,.35) 0%, transparent 70%); --av-ring: #f472b666; --crown-color: #fbbf24; }
.lb-av--popstar .lb-av-mouth { width: 8px; height: 8px; background: #500724; border-radius: 50%; }
.lb-av--popstar .lb-av-eye { width: 9px; height: 9px; }

/* 8. Reggae — jaune-vert, long hair */
.lb-av--reggae { --av-bg: radial-gradient(ellipse at 30% 25%, #a3e635, #84cc16 40%, #4d7c0f 80%); --av-shadow: rgba(132,204,22,.5); --av-bdr: rgba(163,230,53,.4); --av-glow: radial-gradient(circle, rgba(132,204,22,.3) 0%, transparent 70%); --av-ring: #a3e63566; --hair-color: #365314; }
.lb-av--reggae .lb-av-mouth { width: 16px; height: 8px; background: #1a2e05; border-radius: 0 0 50% 50%; }
.lb-av--reggae .lb-av-eye { height: 3px; width: 9px; border-radius: 0 0 50% 50%; top: 38%; }

/* 9. Electro — cyan, écouteurs */
.lb-av--electro { --av-bg: radial-gradient(ellipse at 30% 25%, #22d3ee, #06b6d4 40%, #0e7490 80%); --av-shadow: rgba(6,182,212,.5); --av-bdr: rgba(34,211,238,.4); --av-glow: radial-gradient(circle, rgba(6,182,212,.35) 0%, transparent 70%); --av-ring: #22d3ee66; --phone-color: #67e8f9; --phone-pad: #22d3ee; }
.lb-av--electro .lb-av-mouth { width: 8px; height: 8px; background: #042f2e; border-radius: 50%; }
.lb-av--electro .lb-av-eye { width: 5px; height: 9px; border-radius: 35%; }

/* 10. Country — brun, couronne */
.lb-av--country { --av-bg: radial-gradient(ellipse at 30% 25%, #d97706, #b45309 40%, #78350f 80%); --av-shadow: rgba(180,83,9,.5); --av-bdr: rgba(217,119,6,.4); --av-glow: radial-gradient(circle, rgba(180,83,9,.3) 0%, transparent 70%); --av-ring: #d9770666; --crown-color: #78350f; }
.lb-av--country .lb-av-mouth { width: 14px; height: 5px; background: #2a1503; border-radius: 0 0 40% 40%; }

/* 11. Funk — orange, langue, long hair */
.lb-av--funk { --av-bg: radial-gradient(ellipse at 30% 25%, #fb923c, #f97316 40%, #c2410c 80%); --av-shadow: rgba(249,115,22,.5); --av-bdr: rgba(251,146,60,.4); --av-glow: radial-gradient(circle, rgba(249,115,22,.35) 0%, transparent 70%); --av-ring: #fb923c66; --hair-color: #431407; --tongue-w: 10px; --tongue-h: 8px; --tongue-color: #fb7185; }
.lb-av--funk .lb-av-mouth { width: 18px; height: 9px; background: #3b0a00; border-radius: 0 0 50% 50%; }

/* 12. Classique — crème */
.lb-av--classic { --av-bg: radial-gradient(ellipse at 30% 25%, #fef3c7, #fde68a 40%, #d97706 80%); --av-shadow: rgba(217,119,6,.3); --av-bdr: rgba(254,243,199,.5); --av-hi: rgba(255,255,240,.4); --av-glow: radial-gradient(circle, rgba(253,230,138,.3) 0%, transparent 70%); --av-ring: #fde68a66; }
.lb-av--classic .lb-av-mouth { width: 8px; height: 3px; background: #78350f; border-radius: 3px; }
.lb-av--classic .lb-av-eye { --av-eye: radial-gradient(circle, #1c1917 60%, #44403c); --av-eyeglow: rgba(0,0,0,.2); }

/* 13. Hip-Hop — noir+or, lunettes */
.lb-av--hiphop { --av-bg: radial-gradient(ellipse at 30% 25%, #44403c, #1c1917 40%, #0c0a09 80%); --av-shadow: rgba(251,191,36,.3); --av-bdr: rgba(251,191,36,.4); --av-hi: rgba(251,191,36,.15); --av-glow: radial-gradient(circle, rgba(251,191,36,.3) 0%, transparent 70%); --av-ring: #fbbf2466; --shade-color: #fbbf2488; }
.lb-av--hiphop .lb-av-mouth { width: 14px; height: 4px; background: #fbbf24; border-radius: 2px; }
.lb-av--hiphop .lb-av-eye { --av-eye: radial-gradient(circle, #fbbf24 40%, #f59e0b); --av-eyeglow: rgba(251,191,36,.5); }

/* 14. Grunge — gris, long hair */
.lb-av--grunge { --av-bg: radial-gradient(ellipse at 30% 25%, #6b7280, #4b5563 40%, #1f2937 80%); --av-shadow: rgba(75,85,99,.5); --av-bdr: rgba(107,114,128,.3); --av-glow: radial-gradient(circle, rgba(75,85,99,.3) 0%, transparent 70%); --av-ring: #6b728066; --hair-color: #1f2937; }
.lb-av--grunge .lb-av-mouth { width: 14px; height: 3px; background: #000; border-radius: 1px; transform: translateX(-50%) rotate(5deg); }
.lb-av--grunge .lb-av-eye { height: 4px; width: 8px; border-radius: 40%; }

/* 15. Disco — magenta, lunettes */
.lb-av--disco { --av-bg: radial-gradient(ellipse at 30% 25%, #e879f9, #d946ef 40%, #a21caf 80%); --av-shadow: rgba(217,70,239,.5); --av-bdr: rgba(232,121,249,.4); --av-glow: radial-gradient(circle, rgba(217,70,239,.35) 0%, transparent 70%); --av-ring: #e879f966; --shade-color: #a21caf88; }
.lb-av--disco .lb-av-mouth { width: 10px; height: 10px; background: #4a044e; border-radius: 50%; }

/* 16. Acoustic — vert sauge */
.lb-av--acoustic { --av-bg: radial-gradient(ellipse at 30% 25%, #86efac, #4ade80 40%, #16a34a 80%); --av-shadow: rgba(22,163,74,.4); --av-bdr: rgba(134,239,172,.4); --av-glow: radial-gradient(circle, rgba(74,222,128,.3) 0%, transparent 70%); --av-ring: #86efac66; }
.lb-av--acoustic .lb-av-mouth { width: 12px; height: 6px; background: #052e16; border-radius: 0 0 50% 50%; }

/* 17. Synthwave — violet-rose, écouteurs */
.lb-av--synthwave { --av-bg: radial-gradient(ellipse at 30% 25%, #c084fc, #a855f7 40%, #7e22ce 80%); --av-shadow: rgba(168,85,247,.5); --av-bdr: rgba(192,132,252,.4); --av-glow: radial-gradient(circle, rgba(168,85,247,.35) 0%, transparent 70%); --av-ring: #c084fc66; --phone-color: #e879f9; --phone-pad: #c084fc; }
.lb-av--synthwave .lb-av-mouth { width: 10px; height: 2px; background: #3b0764; border-radius: 1px; }
.lb-av--synthwave .lb-av-eye { width: 10px; height: 3px; border-radius: 1px; }

/* 18. Gospel — doré */
.lb-av--gospel { --av-bg: radial-gradient(ellipse at 30% 25%, #fcd34d, #eab308 40%, #a16207 80%); --av-shadow: rgba(234,179,8,.5); --av-bdr: rgba(252,211,77,.4); --av-glow: radial-gradient(circle, rgba(234,179,8,.35) 0%, transparent 70%); --av-ring: #fcd34d66; }
.lb-av--gospel .lb-av-mouth { width: 12px; height: 12px; background: #422006; border-radius: 50%; }

/* 19. Indie — indigo, lunettes */
.lb-av--indie { --av-bg: radial-gradient(ellipse at 30% 25%, #818cf8, #6366f1 40%, #4338ca 80%); --av-shadow: rgba(99,102,241,.5); --av-bdr: rgba(129,140,248,.4); --av-glow: radial-gradient(circle, rgba(99,102,241,.3) 0%, transparent 70%); --av-ring: #818cf866; --shade-color: #31274066; }
.lb-av--indie .lb-av-mouth { width: 8px; height: 4px; background: #1e1b4b; border-radius: 50%; }

/* 20. Techno — vert néon */
.lb-av--techno { --av-bg: radial-gradient(ellipse at 30% 25%, #34d399, #10b981 40%, #047857 80%); --av-shadow: rgba(16,185,129,.5); --av-bdr: rgba(52,211,153,.4); --av-glow: radial-gradient(circle, rgba(16,185,129,.4) 0%, transparent 70%); --av-ring: #34d39966; }
.lb-av--techno .lb-av-mouth { width: 6px; height: 6px; background: #022c22; border-radius: 50%; }
.lb-av--techno .lb-av-eye { width: 5px; height: 10px; border-radius: 30%; --av-eye: radial-gradient(circle, #34d399 40%, #047857); }

/* 21. Soul — bordeaux */
.lb-av--soul { --av-bg: radial-gradient(ellipse at 30% 25%, #f87171, #ef4444 40%, #991b1b 80%); --av-shadow: rgba(239,68,68,.4); --av-bdr: rgba(248,113,113,.4); --av-glow: radial-gradient(circle, rgba(239,68,68,.3) 0%, transparent 70%); --av-ring: #f8717166; }
.lb-av--soul .lb-av-mouth { width: 16px; height: 9px; background: #450a0a; border-radius: 0 0 50% 50%; }

/* 22. Ska — jaune, mohawk, langue */
.lb-av--ska { --av-bg: radial-gradient(ellipse at 30% 25%, #facc15, #eab308 40%, #a16207 80%); --av-shadow: rgba(250,204,21,.5); --av-bdr: rgba(250,204,21,.4); --av-glow: radial-gradient(circle, rgba(250,204,21,.3) 0%, transparent 70%); --av-ring: #facc1566; --mohawk-color: #fde047; --tongue-w: 9px; --tongue-h: 7px; }
.lb-av--ska .lb-av-mouth { width: 16px; height: 8px; background: #422006; border-radius: 0 0 50% 50%; }

/* 23. Ambient — bleu pâle */
.lb-av--ambient { --av-bg: radial-gradient(ellipse at 30% 25%, #bfdbfe, #93c5fd 40%, #3b82f6 80%); --av-shadow: rgba(147,197,253,.4); --av-bdr: rgba(191,219,254,.5); --av-glow: radial-gradient(circle, rgba(147,197,253,.3) 0%, transparent 70%); --av-ring: #93c5fd66; }
.lb-av--ambient .lb-av-mouth { width: 6px; height: 3px; background: #1e3a5f; border-radius: 3px; }
.lb-av--ambient .lb-av-eye { height: 3px; width: 8px; border-radius: 50% 50% 0 0; top: 38%; }

/* 24. Tropical — turquoise, écouteurs */
.lb-av--tropical { --av-bg: radial-gradient(ellipse at 30% 25%, #5eead4, #2dd4bf 40%, #0d9488 80%); --av-shadow: rgba(45,212,191,.5); --av-bdr: rgba(94,234,212,.4); --av-glow: radial-gradient(circle, rgba(45,212,191,.3) 0%, transparent 70%); --av-ring: #5eead466; --phone-color: #f0fdfa; --phone-pad: #ccfbf1; }
.lb-av--tropical .lb-av-mouth { width: 14px; height: 7px; background: #042f2e; border-radius: 0 0 50% 50%; }

/* 25. Opéra — rouge vin */
.lb-av--opera { --av-bg: radial-gradient(ellipse at 30% 25%, #be123c, #9f1239 40%, #881337 80%); --av-shadow: rgba(159,18,57,.5); --av-bdr: rgba(190,18,60,.4); --av-glow: radial-gradient(circle, rgba(159,18,57,.3) 0%, transparent 70%); --av-ring: #be123c66; }
.lb-av--opera .lb-av-mouth { width: 12px; height: 14px; background: #1c0009; border-radius: 50%; }

/* 26. Lo-Fi — lavande, écouteurs */
.lb-av--lofi { --av-bg: radial-gradient(ellipse at 30% 25%, #c4b5fd, #a78bfa 40%, #7c3aed 80%); --av-shadow: rgba(167,139,250,.4); --av-bdr: rgba(196,181,253,.4); --av-glow: radial-gradient(circle, rgba(167,139,250,.3) 0%, transparent 70%); --av-ring: #c4b5fd66; --phone-color: #ddd6fe; --phone-pad: #c4b5fd; }
.lb-av--lofi .lb-av-mouth { width: 8px; height: 2px; background: #2e1065; border-radius: 1px; }
.lb-av--lofi .lb-av-eye { height: 2px; width: 8px; border-radius: 0; top: 40%; }

/* 27. Salsa — corail, langue */
.lb-av--salsa { --av-bg: radial-gradient(ellipse at 30% 25%, #fb7185, #f43f5e 40%, #be123c 80%); --av-shadow: rgba(244,63,94,.5); --av-bdr: rgba(251,113,133,.4); --av-glow: radial-gradient(circle, rgba(244,63,94,.3) 0%, transparent 70%); --av-ring: #fb718566; --tongue-w: 8px; --tongue-h: 6px; --tongue-color: #fda4af; }
.lb-av--salsa .lb-av-mouth { width: 14px; height: 8px; background: #2a0009; border-radius: 0 0 50% 50%; }

/* 28. Celtic — émeraude */
.lb-av--celtic { --av-bg: radial-gradient(ellipse at 30% 25%, #6ee7b7, #34d399 40%, #059669 80%); --av-shadow: rgba(5,150,105,.5); --av-bdr: rgba(110,231,183,.4); --av-glow: radial-gradient(circle, rgba(52,211,153,.3) 0%, transparent 70%); --av-ring: #6ee7b766; }
.lb-av--celtic .lb-av-mouth { width: 12px; height: 5px; background: #022c22; border-radius: 0 0 40% 40%; }

/* 29. DnB — cyan, écouteurs */
.lb-av--dnb { --av-bg: radial-gradient(ellipse at 30% 25%, #67e8f9, #22d3ee 40%, #0891b2 80%); --av-shadow: rgba(8,145,178,.5); --av-bdr: rgba(103,232,249,.4); --av-glow: radial-gradient(circle, rgba(34,211,238,.35) 0%, transparent 70%); --av-ring: #67e8f966; --phone-color: #0891b2; --phone-pad: #06b6d4; }
.lb-av--dnb .lb-av-mouth { width: 10px; height: 10px; background: #042f2e; border-radius: 50%; }

/* 30. Bossa — pêche */
.lb-av--bossa { --av-bg: radial-gradient(ellipse at 30% 25%, #fdba74, #fb923c 40%, #c2410c 80%); --av-shadow: rgba(194,65,12,.4); --av-bdr: rgba(253,186,116,.4); --av-glow: radial-gradient(circle, rgba(251,146,60,.3) 0%, transparent 70%); --av-ring: #fdba7466; }
.lb-av--bossa .lb-av-mouth { width: 14px; height: 6px; background: #3b0a00; border-radius: 0 0 50% 50%; }

/* 31. Trance — bleu, écouteurs */
.lb-av--trance { --av-bg: radial-gradient(ellipse at 30% 25%, #38bdf8, #0ea5e9 40%, #0369a1 80%); --av-shadow: rgba(14,165,233,.5); --av-bdr: rgba(56,189,248,.4); --av-glow: radial-gradient(circle, rgba(14,165,233,.4) 0%, transparent 70%); --av-ring: #38bdf866; --phone-color: #7dd3fc; --phone-pad: #38bdf8; }
.lb-av--trance .lb-av-mouth { width: 4px; height: 4px; background: #082f49; border-radius: 50%; }
.lb-av--trance .lb-av-eye { width: 4px; height: 10px; border-radius: 25%; }

/* 32. RnB — violet foncé, lunettes */
.lb-av--rnb { --av-bg: radial-gradient(ellipse at 30% 25%, #8b5cf6, #7c3aed 40%, #5b21b6 80%); --av-shadow: rgba(139,92,246,.5); --av-bdr: rgba(139,92,246,.4); --av-glow: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%); --av-ring: #8b5cf666; --shade-color: #1e1b4b88; }
.lb-av--rnb .lb-av-mouth { width: 12px; height: 6px; background: #2e1065; border-radius: 0 0 50% 50%; }

/* 33. Flamenco — langue */
.lb-av--flamenco { --av-bg: radial-gradient(ellipse at 30% 25%, #f97316, #ea580c 40%, #9a3412 80%); --av-shadow: rgba(234,88,12,.5); --av-bdr: rgba(249,115,22,.4); --av-glow: radial-gradient(circle, rgba(234,88,12,.35) 0%, transparent 70%); --av-ring: #f9731666; --tongue-w: 9px; --tongue-h: 7px; --tongue-color: #fb923c; }
.lb-av--flamenco .lb-av-mouth { width: 14px; height: 8px; background: #1c0a00; border-radius: 0 0 50% 50%; }

/* 34. Swing — couronne */
.lb-av--swing { --av-bg: radial-gradient(ellipse at 30% 25%, #fde047, #facc15 40%, #ca8a04 80%); --av-shadow: rgba(202,138,4,.5); --av-bdr: rgba(253,224,71,.4); --av-glow: radial-gradient(circle, rgba(250,204,21,.35) 0%, transparent 70%); --av-ring: #fde04766; --crown-color: #ca8a04; }
.lb-av--swing .lb-av-mouth { width: 16px; height: 8px; background: #422006; border-radius: 0 0 50% 50%; }

/* 35. Dubstep — spiky, langue */
.lb-av--dubstep { --av-bg: radial-gradient(ellipse at 30% 25%, #581c87, #3b0764 40%, #1e1b4b 80%); --av-shadow: rgba(88,28,135,.5); --av-bdr: rgba(126,34,206,.4); --av-glow: radial-gradient(circle, rgba(88,28,135,.4) 0%, transparent 70%); --av-ring: #7e22ce66; --spike-color: #a855f7; --tongue-w: 8px; --tongue-h: 6px; --tongue-color: #c084fc; }
.lb-av--dubstep .lb-av-mouth { width: 14px; height: 5px; background: #a855f7; border-radius: 0 0 50% 50%; }
.lb-av--dubstep .lb-av-eye { --av-eye: radial-gradient(circle, #a855f7 40%, #7c3aed); --av-eyeglow: rgba(168,85,247,.6); }

/* 36. House — rose, écouteurs */
.lb-av--house { --av-bg: radial-gradient(ellipse at 30% 25%, #fb7185, #e11d48 40%, #9f1239 80%); --av-shadow: rgba(225,29,72,.5); --av-bdr: rgba(251,113,133,.4); --av-glow: radial-gradient(circle, rgba(225,29,72,.35) 0%, transparent 70%); --av-ring: #fb718566; --phone-color: #fda4af; --phone-pad: #fb7185; }
.lb-av--house .lb-av-mouth { width: 12px; height: 6px; background: #1c0009; border-radius: 0 0 50% 50%; }

/* 37. Afrobeat — terre, cornes */
.lb-av--afro { --av-bg: radial-gradient(ellipse at 30% 25%, #a16207, #854d0e 40%, #713f12 80%); --av-shadow: rgba(161,98,7,.5); --av-bdr: rgba(161,98,7,.4); --av-hi: rgba(253,224,71,.2); --av-glow: radial-gradient(circle, rgba(161,98,7,.35) 0%, transparent 70%); --av-ring: #a1620766; --horn-color: #fbbf24; }
.lb-av--afro .lb-av-mouth { width: 16px; height: 8px; background: #1c0a00; border-radius: 0 0 50% 50%; }

/* 38. Chiptune — vert, pixel */
.lb-av--chiptune { --av-bg: radial-gradient(ellipse at 30% 25%, #4ade80, #22c55e 40%, #166534 80%); --av-shadow: rgba(34,197,94,.5); --av-bdr: rgba(74,222,128,.5); --av-glow: radial-gradient(circle, rgba(34,197,94,.4) 0%, transparent 70%); --av-ring: #4ade8066; }
.lb-av--chiptune .lb-av-eye { width: 8px; height: 8px; border-radius: 0; --av-eye: radial-gradient(circle, #22c55e 60%, #166534); }
.lb-av--chiptune .lb-av-mouth { width: 12px; height: 3px; background: #052e16; border-radius: 0; }

/* 39. K-Pop — rose pastel */
.lb-av--kpop { --av-bg: radial-gradient(ellipse at 30% 25%, #fbcfe8, #f9a8d4 40%, #ec4899 80%); --av-shadow: rgba(236,72,153,.3); --av-bdr: rgba(251,207,232,.5); --av-hi: rgba(255,255,255,.35); --av-glow: radial-gradient(circle, rgba(249,168,212,.3) 0%, transparent 70%); --av-ring: #f9a8d466; }
.lb-av--kpop .lb-av-mouth { width: 8px; height: 4px; background: #831843; border-radius: 50%; }
.lb-av--kpop .lb-av-eye { --av-eye: radial-gradient(circle, #ec4899 40%, #be185d); --av-eyeglow: rgba(236,72,153,.5); width: 10px; height: 10px; }

/* 40. Mariachi — couronne rouge */
.lb-av--mariachi { --av-bg: radial-gradient(ellipse at 30% 25%, #dc2626, #b91c1c 40%, #7f1d1d 80%); --av-shadow: rgba(185,28,28,.5); --av-bdr: rgba(220,38,38,.4); --av-glow: radial-gradient(circle, rgba(185,28,28,.35) 0%, transparent 70%); --av-ring: #dc262666; --crown-color: #dc2626; }
.lb-av--mariachi .lb-av-mouth { width: 18px; height: 9px; background: #1c0000; border-radius: 0 0 50% 50%; }

/* 41. EDM — multicolore, écouteurs */
.lb-av--edm { --av-bg: radial-gradient(ellipse at 30% 25%, #c084fc, #818cf8 40%, #6366f1 80%); --av-shadow: rgba(99,102,241,.5); --av-bdr: rgba(192,132,252,.4); --av-glow: radial-gradient(circle, rgba(129,140,248,.35) 0%, transparent 70%); --av-ring: #818cf866; --phone-color: #c4b5fd; --phone-pad: #a78bfa; }
.lb-av--edm .lb-av-head { animation: av-bob 2s ease-in-out infinite, av-hue 4s linear infinite; }
.lb-av--edm .lb-av-mouth { width: 10px; height: 10px; background: #1e1b4b; border-radius: 50%; }

/* 42. Boisé — brun */
.lb-av--wood { --av-bg: radial-gradient(ellipse at 30% 25%, #92400e, #78350f 40%, #451a03 80%); --av-shadow: rgba(120,53,15,.5); --av-bdr: rgba(146,64,14,.4); --av-glow: radial-gradient(circle, rgba(146,64,14,.3) 0%, transparent 70%); --av-ring: #92400e66; }
.lb-av--wood .lb-av-mouth { width: 12px; height: 5px; background: #1c0a00; border-radius: 0 0 40% 40%; }

/* 43. Chorale — blanc */
.lb-av--choir { --av-bg: radial-gradient(ellipse at 30% 25%, #fff, #e5e7eb 40%, #9ca3af 80%); --av-shadow: rgba(156,163,175,.3); --av-bdr: rgba(255,255,255,.5); --av-hi: rgba(255,255,255,.5); --av-glow: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%); --av-ring: #e5e7eb66; }
.lb-av--choir .lb-av-mouth { width: 10px; height: 10px; background: #374151; border-radius: 50%; }
.lb-av--choir .lb-av-eye { --av-eye: radial-gradient(circle, #1f2937 60%, #374151); --av-eyeglow: rgba(0,0,0,.15); }

/* 44. Samba — vert-jaune, langue */
.lb-av--samba { --av-bg: radial-gradient(ellipse at 30% 25%, #bef264, #a3e635 40%, #65a30d 80%); --av-shadow: rgba(101,163,13,.5); --av-bdr: rgba(190,242,100,.4); --av-glow: radial-gradient(circle, rgba(163,230,53,.3) 0%, transparent 70%); --av-ring: #bef26466; --tongue-w: 9px; --tongue-h: 6px; }
.lb-av--samba .lb-av-mouth { width: 16px; height: 8px; background: #1a2e05; border-radius: 0 0 50% 50%; }

/* 45. Noise — gris, spiky */
.lb-av--noise { --av-bg: radial-gradient(ellipse at 30% 25%, #d4d4d8, #a1a1aa 40%, #52525b 80%); --av-shadow: rgba(82,82,91,.4); --av-bdr: rgba(161,161,170,.3); --av-glow: radial-gradient(circle, rgba(161,161,170,.3) 0%, transparent 70%); --av-ring: #a1a1aa66; --spike-color: #71717a; }
.lb-av--noise .lb-av-mouth { width: 16px; height: 3px; background: #18181b; border-radius: 0; transform: translateX(-50%) skewX(-8deg); }
.lb-av--noise .lb-av-eye { width: 10px; height: 3px; border-radius: 0; }

/* 46. Psychédélique — rainbow, langue */
.lb-av--psyche { --av-bg: conic-gradient(#f87171, #fbbf24, #4ade80, #22d3ee, #818cf8, #e879f9, #f87171); --av-shadow: rgba(168,85,247,.4); --av-bdr: rgba(255,255,255,.3); --av-glow: radial-gradient(circle, rgba(232,121,249,.35) 0%, transparent 70%); --av-ring: #e879f966; --tongue-w: 10px; --tongue-h: 9px; --tongue-color: #f472b6; }
.lb-av--psyche .lb-av-mouth { width: 14px; height: 10px; background: #000; border-radius: 0 0 50% 50%; }
.lb-av--psyche .lb-av-eye { --av-eye: radial-gradient(circle, #000 50%, #333); width: 10px; height: 10px; }

/* 47. Chill — bleu-vert */
.lb-av--chill { --av-bg: radial-gradient(ellipse at 30% 25%, #99f6e4, #5eead4 40%, #14b8a6 80%); --av-shadow: rgba(20,184,166,.4); --av-bdr: rgba(153,246,228,.4); --av-glow: radial-gradient(circle, rgba(94,234,212,.3) 0%, transparent 70%); --av-ring: #99f6e466; }
.lb-av--chill .lb-av-mouth { width: 10px; height: 3px; background: #042f2e; border-radius: 3px; }
.lb-av--chill .lb-av-eye { height: 3px; width: 9px; border-radius: 0 0 50% 50%; top: 40%; }

/* 48. Hardcore — noir+rouge, cornes, langue */
.lb-av--hardcore { --av-bg: radial-gradient(ellipse at 30% 25%, #450a0a, #1c0000 40%, #000 80%); --av-shadow: rgba(220,38,38,.4); --av-bdr: rgba(220,38,38,.5); --av-glow: radial-gradient(circle, rgba(220,38,38,.35) 0%, transparent 70%); --av-ring: #dc262666; --horn-color: #dc2626; --tongue-w: 10px; --tongue-h: 8px; --tongue-color: #ef4444; }
.lb-av--hardcore .lb-av-mouth { width: 16px; height: 6px; background: #dc2626; border-radius: 0 0 50% 50%; }
.lb-av--hardcore .lb-av-eye { --av-eye: radial-gradient(circle, #dc2626 40%, #991b1b); --av-eyeglow: rgba(220,38,38,.6); }

/* 49. Ballade — rose-mauve */
.lb-av--ballad { --av-bg: radial-gradient(ellipse at 30% 25%, #ddd6fe, #c4b5fd 40%, #8b5cf6 80%); --av-shadow: rgba(139,92,246,.3); --av-bdr: rgba(221,214,254,.5); --av-glow: radial-gradient(circle, rgba(196,181,253,.3) 0%, transparent 70%); --av-ring: #c4b5fd66; }
.lb-av--ballad .lb-av-mouth { width: 10px; height: 5px; background: #2e1065; border-radius: 0 0 50% 50%; }

/* 50. Phantom — fantôme néon */
.lb-av--phantom { --av-bg: radial-gradient(ellipse at 30% 25%, #27272a, #18181b 40%, #09090b 80%); --av-shadow: rgba(124,58,237,.3); --av-bdr: rgba(63,63,70,.4); --av-hi: rgba(124,58,237,.1); --av-glow: radial-gradient(circle, rgba(124,58,237,.3) 0%, transparent 70%); --av-ring: #7c3aed66; }
.lb-av--phantom .lb-av-head { opacity: .8; }
.lb-av--phantom .lb-av-mouth { width: 12px; height: 6px; background: #7c3aed; border-radius: 0 0 50% 50%; opacity: .7; }
.lb-av--phantom .lb-av-eye { --av-eye: radial-gradient(circle, #a855f7 40%, #7c3aed); --av-eyeglow: rgba(168,85,247,.5); }

/* ── Rendu inline dans les posts ── */
.inline-avatar { display: inline-block; vertical-align: middle; margin: 0 1px; }