html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; }
body { display: grid; place-items: center; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#lancer {
  position: fixed; inset: 0; border: 0; color: #fff; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 60%), #000;
}
#lancer .rond {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; box-sizing: border-box;
  border: 1.5px solid rgba(255,255,255,.55); animation: souffle 2.4s ease-in-out infinite;
}
#lancer .texte { letter-spacing: .3em; text-transform: lowercase; opacity: .6; font-size: 13px; }
#lancer:hover .rond, #lancer:focus-visible .rond { border-color: #fff; }
@keyframes souffle { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
#video { position: fixed; inset: 0; }
#video iframe { width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { #lancer .rond { animation: none; } }