/* Illustrations animées (scènes Stageshow filmées) : image fixe, puis boucle muette. */
.demo-loop { margin: 0; }
.demo-loop__media {
  position: relative;
  aspect-ratio: var(--demo-ratio);
  overflow: hidden;
  border-radius: 12px;
  background: #ECE7DC;
  box-shadow: inset 0 0 0 1px rgba(20, 25, 28, 0.08);
}
.demo-loop__poster,
.demo-loop__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.demo-loop__video { opacity: 0; transition: opacity 0.35s ease; }
.demo-loop.is-playing .demo-loop__video,
.demo-loop.is-paused .demo-loop__video { opacity: 1; }
.demo-loop__toggle {
  display: block;
  margin: 6px 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: none;
  color: #5B676B;
  font: 500 12px/1.3 Inter, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.demo-loop__toggle[hidden] { display: none; }
.demo-loop__toggle:hover { color: #0A5C57; }
.demo-loop__toggle:focus-visible { outline: 2px solid #0A5C57; outline-offset: 2px; border-radius: 3px; }
.demo-loop__toggle-play,
.demo-loop.is-paused .demo-loop__toggle-pause { display: none; }
.demo-loop.is-paused .demo-loop__toggle-play { display: inline; }
.demo-loop__caption {
  margin-top: 4px;
  color: #3D4A4F;
  font-size: 14px;
  line-height: 1.5;
}
.demo-loop__kicker { color: #8A3414; font-weight: 600; }
.demo-loop__note { display: block; margin-top: 2px; color: #566064; font-size: 12.5px; font-style: italic; }
@media (max-width: 599px) {
  .demo-loop__media { aspect-ratio: var(--demo-ratio-compact); }
}
.demo-loop__toggle[hidden] + .demo-loop__caption { margin-top: 10px; }

/* Variante sombre (page « Pour les pros ») : le fond de la scène est celui de la carte. */
.demo-loop--dark .demo-loop__media { background: oklch(19% 0.014 30); box-shadow: none; }
.demo-loop--dark .demo-loop__caption { color: oklch(73% 0.010 30); }
.demo-loop--dark .demo-loop__kicker { color: oklch(67% 0.18 50); }
.demo-loop--dark .demo-loop__note { color: oklch(54% 0.006 30); }
.demo-loop--dark .demo-loop__toggle { color: oklch(73% 0.010 30); }
.demo-loop--dark .demo-loop__toggle:hover { color: oklch(67% 0.18 50); }
.demo-loop--dark .demo-loop__toggle:focus-visible { outline-color: oklch(67% 0.18 50); }
/* Pleine largeur de la carte hôte : la scène déborde de son padding (--demo-bleed). */
.demo-loop--flush .demo-loop__media { margin-inline: calc(-1 * var(--demo-bleed, 0px)); border-radius: 0; }