/* 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;
}

.dtb-media-pause--icone {
  width: var(--dt-target-min);
  padding: 0;
}

.dtb-media-pause--icone .dtb-media-pause-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dtb-media-pause--icone::before {
  content: "";
  width: var(--dt-space-3);
  height: var(--dt-space-3);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-player-pause%22 %3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M6 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12%22 /%3E%3Cpath d=%22M14 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12%22 /%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-player-pause%22 %3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M6 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12%22 /%3E%3Cpath d=%22M14 6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -12%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

.dtb-media-pause--icone[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-player-play%22 %3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M7 4v16l13 -8l-13 -8%22 /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-player-play%22 %3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M7 4v16l13 -8l-13 -8%22 /%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  .dtb-media-pause--icone::before {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}

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