/* ==========================================================================
   AZUR VISION — Lot « demo-local » : le panneau de la démo vocale (/demo)
   --------------------------------------------------------------------------
   États pilotés par js/p-demo.js (mêmes noms de classes que l'ancienne page) :
     #demoWidget.widget-active   → l'accueil disparaît, le widget prend la place
     .demo-agent-help.visible    → bandeau d'aide affiché quelques secondes
   Le panneau est sombre, comme avant : le widget ElevenLabs s'y affiche sur le
   même fond qu'en production aujourd'hui.
   ========================================================================== */

.demo-stage {
  position: relative;
  min-height: 480px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(37, 71, 208, .25);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

/* Écran d'accueil : l'orbe (la voix) + le bouton de démarrage */
.demo-agent-intro {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 40px 28px;
  text-align: center;
  background: radial-gradient(120% 120% at 0% 0%, var(--night-2) 0%, var(--night) 60%);
  color: #eef2ff;
}
.demo-agent-intro .orb { width: min(200px, 52vw); margin-bottom: 8px; }
.demo-agent-intro .orb__ring { border-color: rgba(159, 179, 255, .45); }
.demo-agent-intro__label { font-weight: 600; font-size: 1.08rem; color: #fff; }
.demo-agent-intro .mono { color: #9fb3ff; }
.demo-agent-intro__btn { margin-top: 10px; }
.demo-agent-intro__btn:disabled { transform: none; }
.demo-agent-intro__hint { max-width: 32ch; font-size: .9rem; line-height: 1.5; color: #c3cdf0; }

/* Zone du widget ElevenLabs (vide au départ, remplie au clic) */
.demo-agent-widgetarea {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: stretch;
  background: radial-gradient(120% 120% at 0% 0%, var(--night-2) 0%, var(--night) 60%);
}
.demo-agent-widgetarea elevenlabs-convai {
  display: block; flex: 1;
  width: 100%; min-height: 100%;
  position: relative;
}

/* Quand le widget est prêt */
.demo-stage.widget-active { min-height: 520px; overflow: visible; }
.demo-stage.widget-active .demo-agent-intro { display: none; }
.demo-stage.widget-active .demo-agent-widgetarea { z-index: 2; border-radius: var(--r-lg); }

/* Bandeau d'aide */
.demo-agent-help {
  display: none;
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;
  padding: 12px 44px 12px 16px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-size: .9rem; line-height: 1.45;
  box-shadow: var(--sh-2);
}
.demo-agent-help.visible { display: flex; gap: 10px; align-items: flex-start; animation: demo-help-in 400ms var(--ease); }
.demo-agent-help svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.demo-agent-help__close {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: 1.2rem; line-height: 1;
}
.demo-agent-help__close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
@keyframes demo-help-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .demo-agent-help.visible { animation: none; }
}