.dvr {
  --dvr-top: 30px;          /* mettre la hauteur du header si celui-ci est fixe/sticky */
  --dvr-h: min(68vh, 620px);
  --dvr-gap: clamp(12px, 2vw, 24px);
  --dvr-pad: max(16px, 0vw);
  --dvr-extra: 0px;
  --dvr-left: 0px;
  --dvr-width: 100%;
  position: relative;
  width: 100%;
}

/* Sans JS / mouvement réduit : simple bande scrollable horizontalement */
.dvr__sticky {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 2rem 0;
  scrollbar-width: thin;
}

.dvr__track {
  display: flex;
  align-items: flex-start;
  gap: var(--dvr-gap);
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--dvr-pad);
  list-style: none;
  will-change: transform;
}

/* Mode épinglé : la page est « bloquée » pendant que les vidéos défilent */
.dvr.is-pinned {
  height: calc(100vh - var(--dvr-top) + var(--dvr-extra));
  height: calc(100svh - var(--dvr-top) + var(--dvr-extra));
         /* évite un scroll horizontal de la page */
}
.dvr.is-pinned .dvr__sticky {
  position: absolute;             /* avant l'effet : en haut de la section */
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - var(--dvr-top));
  height: calc(100svh - var(--dvr-top));
  overflow: visible;
  padding: 0;
}
.dvr.is-pinned.is-fixed .dvr__sticky {   /* pendant l'effet : collé à l'écran */
  position: fixed;
  top: var(--dvr-top);
  left: var(--dvr-left);
  right: auto;
  width: var(--dvr-width);
}
.dvr.is-pinned.is-end .dvr__sticky {     /* après l'effet : en bas de la section */
  top: auto;
  bottom: 0;
}

.dvr__card { flex: 0 0 auto; margin: 0; }
.dvr__fig { margin: 0; width: min-content; }

.dvr__frame {
  position: relative;
  height: var(--dvr-h);
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: 16px;
  background: #1b1b1b;    border: 1px solid #232323;
}
.dvr__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Légende incrustée en bas à gauche de la vidéo */
.dvr__legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 1rem 1.25rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
}

@media (max-width: 575px) {
	
	.dvr {
    --dvr-pad: max(35px, 0vw);
}

  .dvr { --dvr-h: min(62vh, 520px); }
}