/* =====================================================
   ronde.css — Scène « Silence plateau »
   Remplace la vidéo de bienvenue de la section LSF.
   Projecteurs de cinéma, vampire réalisateur et sorcière au clap.
   ===================================================== */
  /* =====================================================
     [Halloween] SILENCE PLATEAU — petite scène simple
  ===================================================== */
  .ronde { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #06110c; container-type: inline-size; }
  .ronde > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .ronde-on { opacity: 0; animation: ronde-on 2.4s ease-out forwards; }
  .ronde-on.d2 { animation-delay: .9s; }
  @keyframes ronde-on { 0%{opacity:0} 12%{opacity:.55} 18%{opacity:.1} 34%{opacity:.8} 100%{opacity:1} }
  .ronde-faisceau { opacity: 0; animation: ronde-on 2.4s ease-out forwards, ronde-lum 5s ease-in-out 2.4s infinite alternate; }
  .ronde-faisceau.d2 { animation-delay: .9s, 3.3s; }
  @keyframes ronde-lum { from { opacity: 1; } to { opacity: .82; } }
  .ronde-brume { animation: ronde-brume 14s ease-in-out infinite alternate; }
  .ronde-brume.b2 { animation-duration: 19s; animation-direction: alternate-reverse; }
  @keyframes ronde-brume { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
  .ronde-poussiere { animation: ronde-pous 7s linear infinite; }
  @keyframes ronde-pous { 0%{transform:translateY(0);opacity:0} 20%{opacity:.8} 100%{transform:translateY(-140px);opacity:0} }
  .ronde-voyant { transition: opacity .25s; opacity: .25; }
  .ronde.tournage .ronde-voyant { opacity: 1; }
  .ronde-voyant-halo { transition: opacity .25s; opacity: 0; }
  .ronde.tournage .ronde-voyant-halo { opacity: .7; }
  .ronde-cit { animation: ronde-vacille 2.4s ease-in-out infinite alternate; }
  @keyframes ronde-vacille { 0%{opacity:.7} 40%{opacity:1} 100%{opacity:.85} }

  /* Personnages */
  .ronde-cligne { transform-box: fill-box; transform-origin: center; animation: ronde-cligne 4.5s infinite; }
  @keyframes ronde-cligne { 0%,94%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }
  .ronde-respire { transform-box: fill-box; transform-origin: 50% 100%; animation: ronde-respire 2.4s ease-in-out infinite alternate; }
  @keyframes ronde-respire { from{transform:scale(1,1)} to{transform:scale(1.015,.985)} }
  .ronde-bouche { transform-box: fill-box; transform-origin: 50% 30%; }
  .parle .ronde-bouche { animation: ronde-parle .15s ease-in-out infinite alternate; }
  @keyframes ronde-parle { from{transform:scaleY(.75)} to{transform:scaleY(1.7)} }
  .ronde-porte-voix { transform-box: view-box; animation: ronde-pv 1.6s ease-in-out infinite alternate; }
  .parle .ronde-porte-voix { animation-duration: .22s; }
  @keyframes ronde-pv { from{transform:rotate(-4deg)} to{transform:rotate(7deg)} }
  .ronde-clap { transform-box: view-box; transform: rotate(-26deg); transition: transform .4s ease-out; }
  .clap-go .ronde-clap { transform: rotate(0); transition: transform 70ms ease-in; }

  /* Bulles */
  .ronde-bulle { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%;
    background: #fff; color: #0F2E1F; font: 400 max(13px, 2.6cqw)/1 'Bebas Neue', sans-serif; letter-spacing: .06em; white-space: nowrap;
    padding: .7cqw 1.4cqw .55cqw; border-radius: 1.4cqw; border: .25cqw solid #fd3898; box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.45);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .ronde-bulle::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.2cqw; height: 1.2cqw; background: inherit;
    border-right: inherit; border-bottom: inherit; transform: translate(-50%, -55%) rotate(45deg); }
  .ronde-bulle.on { transform: translate(-50%, -100%) scale(1); }
  .ronde-bulle.cri { background: #D62828; color: #fff; border-color: #fff; font-size: max(15px, 3.2cqw); }
  .ronde-clac { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%) scale(0) rotate(-8deg);
    font: 400 max(14px, 3cqw)/1 'Bebas Neue', sans-serif; letter-spacing: .08em; color: #fff; -webkit-text-stroke: .15cqw #fd3898;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .ronde-clac.on { transform: translate(-50%, -50%) scale(1) rotate(-8deg); }

  @media (prefers-reduced-motion: reduce) {
    .ronde *, .ronde *::before, .ronde *::after { animation: none !important; transition: none !important; }
    .ronde-on { opacity: 1; }
  }