/* Copie générée depuis design/web-blocks/dt-media.css -- ne pas éditer ici. */
.dtb-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dtb-media-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dtb-media-fond .dtb-media-image,
.dtb-media-fond .dtb-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtb-media-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--dt-text) 55%, transparent),
    color-mix(in srgb, var(--dt-text) 70%, transparent)
  );
}

.dtb-media-voile--uniforme {
  --dt-media-voile-a: 70%;
  background: color-mix(in srgb, var(--dt-text) var(--dt-media-voile-a), transparent);
}
.dtb-media-voile--lateral {
  --dt-media-voile-a: 92%;
  --dt-media-voile-b: 55%;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--dt-text) var(--dt-media-voile-a), transparent) 0%,
    color-mix(in srgb, var(--dt-text) 72%, transparent) 38%,
    color-mix(in srgb, var(--dt-text) var(--dt-media-voile-b), transparent) 100%
  );
}
.dtb-media-voile--bas {
  --dt-media-voile-a: 55%;
  --dt-media-voile-b: 90%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--dt-text) var(--dt-media-voile-a), transparent),
    color-mix(in srgb, var(--dt-text) var(--dt-media-voile-b), transparent)
  );
}
@media (min-width: 48rem) {
  .dtb-media-voile--uniforme { --dt-media-voile-a: 62%; }
  .dtb-media-voile--lateral  { --dt-media-voile-a: 90%; --dt-media-voile-b: 30%; }
  .dtb-media-voile--bas      { --dt-media-voile-a: 35%; --dt-media-voile-b: 86%; }
}

.dtb-media-voile--teinte {
  --dt-media-teinte: var(--dt-surface-alt);
  --dt-media-voile-a: 82%;
  background: color-mix(in srgb, var(--dt-media-teinte) var(--dt-media-voile-a), transparent);
}
.dtb-media-teinte--bg             { --dt-media-teinte: var(--dt-bg); }
.dtb-media-teinte--surface-alt    { --dt-media-teinte: var(--dt-surface-alt); }
@media (min-width: 48rem) {
  .dtb-media-voile--teinte { --dt-media-voile-a: 74%; }
}
.dtb-media.dtb-media--clair {
  color: var(--dt-text);
}

.dtb-media .dtb-btn-primary,
.dtb-media .dtb-btn-primary:visited,
.dtb-media .dtb-btn-primary:focus {
  background: var(--dt-cta-on-media);
  border-color: var(--dt-cta-on-media);
  color: var(--dt-text-on-cta-on-media);
}
.dtb-media .dtb-btn-primary:hover,
.dtb-media .dtb-btn-primary:focus-visible,
.dtb-media .dtb-btn-primary:active {
  background: var(--dt-cta-on-media-strong);
  border-color: var(--dt-cta-on-media-strong);
  color: var(--dt-text-on-cta-on-media);
}

@supports (animation-timeline: view()) {
  .dtb-media[data-parallaxe="oui"] .dtb-media-fond {
    animation: dtb-media-derive linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }

  @keyframes dtb-media-derive {
    from { transform: translateY(-8%) scale(1.12); }
    to   { transform: translateY(8%) scale(1.12); }
  }
}

.dtb-media-pause {
  position: absolute;
  right: var(--dt-space-2);
  bottom: var(--dt-space-2);
  z-index: 2;
  min-width: var(--dt-target-min);
  min-height: var(--dt-target-min);
  padding: 0 var(--dt-space-2);
  border: 1px solid currentColor;
  border-radius: var(--dt-radius-pill);
  color: var(--dt-text);
  font-family: var(--dt-font-body);
  font-size: var(--dt-fs-small);
  cursor: pointer;
  transition: background-color var(--motion-fast, 200ms) var(--ease-standard, ease);
}

.dtb-media-pause,
.dtb-media-pause:focus {
  background: color-mix(in srgb, var(--dt-bg) 80%, transparent);
}
.dtb-media-pause:hover,
.dtb-media-pause:focus-visible,
.dtb-media-pause:active {
  background: var(--dt-bg);
}

.dtb-media-pause:hover,
.dtb-media-pause:focus,
.dtb-media-pause:focus-visible,
.dtb-media-pause:active {
  color: var(--dt-text);
}

.dtb-media-pause {
  display: none;
}

.dtb-media[data-anime] .dtb-media-pause,
.dtb-media[data-video] .dtb-media-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .dtb-media[data-parallaxe="oui"] .dtb-media-fond {
    animation: none;
    transform: none;
    will-change: auto;
  }
}