/* Capsule perimeter, driven only by the existing slideshow timer render.
   The native button, caption, timing, gestures and accessible name stay intact. */
html body main#accueil .filmstrip-section :is(.filmstrip-controls > .filmstrip-fixed-play, .compact-carousel-progress > .compact-carousel-play),
html body main#accueil .filmstrip-section :is(.filmstrip-controls > .filmstrip-fixed-play, .compact-carousel-progress > .compact-carousel-play):is(:hover, :focus-visible) {
  border-color: #00000020;
}

html body main#accueil .filmstrip-section .film-frame-play > .studio-carousel-pill-timer {
  display: block;
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  transform: none;
  fill: none;
  stroke: #525252;
  stroke-width: 1px;
  stroke-linecap: round;
  pointer-events: none;
}

html body main#accueil .filmstrip-section .studio-carousel-pill-timer > rect {
  x: .5px;
  y: .5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  /* rx:auto copies the vertical radius before width clamping. Setting both
     radii to 999px would make an ellipse, not the button's circular end caps. */
  rx: auto;
  ry: calc(50% - .5px);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html body main#accueil .filmstrip-section .studio-carousel-pill-timer.is-running > rect {
  animation: film-frame-button-progress linear forwards;
  animation-duration: inherit;
}

html body main#accueil .filmstrip-section .studio-carousel-pill-timer.is-rewinding > rect {
  animation: film-frame-button-rewind .36s cubic-bezier(.4, 0, .6, 1) forwards;
}

/* Match the native reduced-motion policy: do not introduce a new animation. */
@media (prefers-reduced-motion: reduce) {
  html body main#accueil .filmstrip-section .film-frame-play > .studio-carousel-pill-timer {
    display: none;
  }
}

@media (forced-colors: active) {
  html body main#accueil .filmstrip-section :is(.filmstrip-controls > .filmstrip-fixed-play, .compact-carousel-progress > .compact-carousel-play),
  html body main#accueil .filmstrip-section :is(.filmstrip-controls > .filmstrip-fixed-play, .compact-carousel-progress > .compact-carousel-play):is(:hover, :focus-visible) {
    border-color: ButtonText;
  }

  html body main#accueil .filmstrip-section .film-frame-play > .studio-carousel-pill-timer {
    stroke: ButtonText;
  }
}