:root{
    --violet:#A855F7; --rose:#EC4899; --bleu:#3B82F6; --lavande:#F3E8FF; --encre:#3B0764;
    --degrade:linear-gradient(135deg,var(--rose),var(--violet),var(--bleu));
    --fondu:220ms;
  }
  html,body{margin:0;width:100%;height:100%;background:transparent;overflow:hidden;
    -webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;
    font-family:"Inter",-apple-system,"Helvetica Neue",sans-serif}

  /* ---------- Sarah en pied ---------- */
  #scene{position:absolute;inset:0}
  #corps{position:absolute;inset:0;transform-origin:54% 100%;transition:transform .35s ease, filter .3s ease}
  .pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
    transition:opacity var(--fondu) ease-out;-webkit-user-drag:none}
  .pose.visible{opacity:1}
  .pose.dessus{z-index:2}

  /* Petits mouvements (désactivés en mouvement réduit) */
  body.m-respire #corps{animation:respire 4.2s ease-in-out infinite}
  body.m-attentive #corps{transform:rotate(-1.2deg) translateY(-1px)}
  body.m-parole #corps{animation:parole .62s ease-in-out infinite alternate}
  @keyframes respire{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1px) scaleY(1.004)}}
  @keyframes parole{from{transform:translateY(0) rotate(0)}to{transform:translateY(-2px) rotate(.5deg)}}

  /* États */
  body.hors_ligne #corps{filter:grayscale(1) opacity(.6)}
  body.suspendu #corps{filter:grayscale(.7) opacity(.65)}
  body.arret #corps{filter:grayscale(1) opacity(.5)}

  /* Socle lumineux aux pieds : couleur de l'état (micro ouvert = dégradé qui pulse) */
  #socle{position:absolute;left:24%;right:16%;bottom:.4%;height:3.2%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(168,85,247,.28),rgba(168,85,247,0));opacity:.7;
    transition:opacity .25s, background .25s; z-index:0}
  body.ecoute #socle{background:radial-gradient(closest-side,rgba(236,72,153,.55),rgba(168,85,247,.35) 55%,rgba(59,130,246,0));opacity:1;animation:pouls 1.1s ease-in-out infinite}
  body.reflexion #socle{background:radial-gradient(closest-side,rgba(168,85,247,.5),rgba(59,130,246,0));opacity:1;animation:pouls 1.6s ease-in-out infinite}
  body.parole #socle{background:radial-gradient(closest-side,rgba(59,130,246,.45),rgba(168,85,247,0));opacity:1;animation:pouls .7s ease-in-out infinite}
  body.hors_ligne #socle,body.suspendu #socle{background:radial-gradient(closest-side,rgba(156,163,175,.5),rgba(156,163,175,0))}
  body.arret #socle{background:radial-gradient(closest-side,rgba(239,68,68,.7),rgba(239,68,68,0));opacity:1}
  @keyframes pouls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

  /* Voyants aux pieds : micro ouvert, caméra allumée, mode discret */
  #voyants{position:absolute;left:18%;right:16%;bottom:1.2%;display:flex;justify-content:center;gap:5px;z-index:3}
  .voyant{display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
    box-shadow:0 1px 3px rgba(59,7,100,.35);border:1.5px solid #fff;box-sizing:border-box}
  .voyant svg{width:12px;height:12px}
  #v-micro{background:var(--degrade)}
  #v-camera{background:var(--bleu)}
  #v-discret{background:var(--lavande);border-color:var(--violet)}
  body.ecoute #v-micro{display:flex;animation:pouls 1.1s ease-in-out infinite}
  body.camera #v-camera{display:flex}
  body.discret #v-discret{display:flex}
  /* Liseré bleu autour de la silhouette quand la caméra est allumée (visible même en petite taille) */
  body.camera #corps{filter:drop-shadow(0 0 2px var(--bleu)) drop-shadow(0 0 1px var(--bleu))}
  body.camera.hors_ligne #corps{filter:grayscale(1) opacity(.6) drop-shadow(0 0 2px var(--bleu))}

  /* À appairer : pastille « ? » près de l'épaule */
  #badge{display:none;position:absolute;left:66%;top:9%;width:24px;height:24px;border-radius:50%;
    background:var(--violet);color:#fff;font:700 14px/24px "Space Grotesk",-apple-system,sans-serif;text-align:center;
    box-shadow:0 1px 4px rgba(59,7,100,.4);z-index:3}
  body.a_appairer #badge{display:block}

  /* Contrôles au survol : poignée de taille (haut gauche) et « réduire en pastille » (haut droite) */
  .ctrl{position:absolute;top:1.5%;width:13%;aspect-ratio:1;max-width:30px;min-width:22px;border-radius:50%;
    background:#fff;border:1.5px solid var(--violet);box-shadow:0 2px 6px rgba(59,7,100,.25);
    display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);
    transition:opacity .15s ease, transform .15s ease;z-index:4;box-sizing:border-box}
  .ctrl svg{width:58%;height:58%}
  #poignee{left:16%}
  #reduire{left:74%}
  body.survol .ctrl{opacity:1;transform:scale(1)}

  /* ---------- Bande discrète (plein écran, visio) ---------- */
  #bande{display:none;position:absolute;inset:0;border-radius:16px 0 0 16px;background:var(--lavande);
    overflow:hidden;box-shadow:0 2px 10px rgba(59,7,100,.3)}
  #bande::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--degrade);opacity:.55;z-index:2}
  #tete{position:absolute;inset:0;background-repeat:no-repeat;background-size:180px 325px;background-position:-71px 2px}
  #b-camera,#b-discret{display:none;position:absolute;width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;z-index:3}
  #b-camera{left:8px;top:6px;background:var(--bleu)}
  #b-discret{left:8px;bottom:6px;background:var(--violet)}
  body.bande #scene{display:none}
  body.bande #bande{display:block}
  body.bande.ecoute #bande::before{opacity:1;animation:clignote 1.1s ease-in-out infinite}
  body.bande.reflexion #bande::before,body.bande.parole #bande::before{opacity:1}
  body.bande.hors_ligne #tete,body.bande.suspendu #tete,body.bande.arret #tete{filter:grayscale(1) opacity(.6)}
  body.bande.arret #bande::before{background:#EF4444;opacity:1}
  body.bande.camera #b-camera{display:block}
  body.bande.discret #b-discret{display:block}
  @keyframes clignote{0%,100%{opacity:1}50%{opacity:.35}}

  /* Mouvement réduit : aucune animation ni transition */
  body.reduit *, body.reduit *::before{animation:none!important;transition:none!important}
  @media (prefers-reduced-motion: reduce){*,*::before{animation:none!important;transition:none!important}}