/* ---------------------------------------------------------------------
   Orbe vocale compacte (SVG/CSS pur) — version reduite du composant
   cree pour /mascotte, reutilisee telle quelle sur mascotte_login.html
   et mascotte_register.html. Memes animations desynchronisees, memes
   garde-fous (prefers-reduced-motion).
--------------------------------------------------------------------- */

.voice-orb-wrap {
  position:relative;
  width:72px; height:72px; margin:0 auto 16px auto;
  display:flex; align-items:center; justify-content:center;
}
.voice-orb-wrap .ring {
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(0,216,255,.35);
  border-top-color:rgba(94,231,255,.9);
  animation:orbRingSpin 5s linear infinite;
}
.voice-orb-wrap .ring.ring2 {
  inset:7px;
  border-color:rgba(0,216,255,.18);
  border-bottom-color:rgba(0,216,255,.7);
  animation:orbRingSpin 7s linear infinite reverse;
}
@keyframes orbRingSpin { to { transform:rotate(360deg); } }

.voice-orb-wrap .orb-glow {
  position:absolute; inset:-26%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,212,255,.5) 0%, rgba(0,170,255,.32) 42%, rgba(140,90,255,.24) 66%, transparent 78%);
  filter:blur(10px);
  animation:orbGlowBreathe 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orbGlowBreathe {
  0%,100% { opacity:.55; transform:scale(1); }
  50% { opacity:.95; transform:scale(1.1); }
}

.voice-orb-wrap .voice-orb { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.voice-orb-wrap .orb-wave { fill:none; transform-origin:32px 32px; animation:orbWave ease-out infinite; }
@keyframes orbWave {
  0% { transform:scale(.8); opacity:var(--wave-op); }
  70% { opacity:calc(var(--wave-op) * .15); }
  100% { transform:scale(1.32); opacity:0; }
}
.voice-orb-wrap .orb-wave.wave1 { stroke:#5ee7ff; stroke-width:2.4; --wave-op:.85; animation-duration:2.4s; }
.voice-orb-wrap .orb-wave.wave2 { stroke:#00d4ff; stroke-width:2; --wave-op:.65; animation-duration:3.1s; animation-delay:.4s; }
.voice-orb-wrap .orb-wave.wave3 { stroke:#9b7dff; stroke-width:1.6; --wave-op:.5; animation-duration:3.8s; animation-delay:.9s; }

.voice-orb-wrap .orb-eq rect {
  fill:#7fe9ff;
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:orbEqPulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(0,212,255,.8));
}
@keyframes orbEqPulse {
  0%,100% { transform:scaleY(.45); opacity:.55; }
  50% { transform:scaleY(1); opacity:1; }
}

.voice-orb-wrap .orb-core-highlight { fill:#ffffff; opacity:.55; filter:blur(1px); }

.voice-orb-wrap .orb-core { animation:orbCoreGlow 3s ease-in-out infinite; }
@keyframes orbCoreGlow {
  0%,100% {
    filter:drop-shadow(0 0 9px rgba(0,212,255,.7))
           drop-shadow(0 0 18px rgba(0,212,255,.45))
           drop-shadow(0 0 30px rgba(140,90,255,.28));
  }
  50% {
    filter:drop-shadow(0 0 14px rgba(0,212,255,.95))
           drop-shadow(0 0 28px rgba(0,212,255,.65))
           drop-shadow(0 0 44px rgba(140,90,255,.42));
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-orb-wrap .ring, .voice-orb-wrap .orb-glow { animation:none !important; }
  .voice-orb-wrap .orb-wave { animation:none !important; }
  .voice-orb-wrap .orb-wave.wave1 { opacity:.65; transform:scale(1.02); }
  .voice-orb-wrap .orb-wave.wave2 { opacity:.45; transform:scale(1.08); }
  .voice-orb-wrap .orb-wave.wave3 { opacity:.32; transform:scale(1.14); }
  .voice-orb-wrap .orb-eq rect { animation:none !important; transform:scaleY(.75); opacity:.75; }
  .voice-orb-wrap .orb-core {
    animation:none !important;
    filter:drop-shadow(0 0 10px rgba(0,212,255,.8))
           drop-shadow(0 0 22px rgba(0,212,255,.55))
           drop-shadow(0 0 34px rgba(140,90,255,.35));
  }
}