/* ARCANIS UI 19.4.0 — images responsives, apparition et mise en couleur */

.arcanis-media--animated {
  max-width: 100%;
}

/*
 * Le filtre vise uniquement le bitmap. Les légendes et les conteneurs ne sont
 * jamais rasterisés avec l’image, ce qui limite la surface de peinture.
 */
img.arcanis-image--focus-color,
img.arcanis-image--grayscale,
.arcanis-image--grayscale > img,
img.js-arcanis-grayscale,
.js-arcanis-grayscale > img,
.arcanis-banner__img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: grayscale(100%) saturate(72%) contrast(98%);
  transition: filter 420ms var(--arcanis-ease-reveal);
}

img.arcanis-image--focus-color.is-centered,
img.arcanis-image--focus-color.is-color,
img.arcanis-image--grayscale.is-centered,
img.arcanis-image--grayscale.is-color,
.arcanis-image--grayscale.is-centered > img,
.arcanis-image--grayscale.is-color > img,
.arcanis-image--grayscale > img.is-centered,
.arcanis-image--grayscale > img.is-color,
img.js-arcanis-grayscale.is-centered,
img.js-arcanis-grayscale.is-color,
.js-arcanis-grayscale.is-centered > img,
.js-arcanis-grayscale.is-color > img,
.js-arcanis-grayscale > img.is-centered,
.js-arcanis-grayscale > img.is-color,
.arcanis-banner__img.is-centered,
.arcanis-banner__img.is-color {
  filter: grayscale(0%) saturate(100%) contrast(100%);
}

/*
 * Un IntersectionObserver partagé active la couleur dans la bande centrale
 * de la fenêtre. Aucun gestionnaire scroll ni recalcul géométrique continu.
 */

/* Profils responsive utilisables dans Gutenberg. */
.arcanis-responsive-image,
.arcanis-canal-image {
  max-width: 100%;
}

.arcanis-responsive-image > img,
.arcanis-canal-image > img,
img.arcanis-responsive-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.arcanis-responsive-image--card > img,
img.arcanis-responsive-image--card {
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  img.arcanis-image--focus-color,
  img.arcanis-image--grayscale,
  .arcanis-image--grayscale > img,
  img.js-arcanis-grayscale,
  .js-arcanis-grayscale > img,
  .arcanis-banner__img {
    transition-duration: 320ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.arcanis-image--focus-color,
  img.arcanis-image--grayscale,
  .arcanis-image--grayscale > img,
  img.js-arcanis-grayscale,
  .js-arcanis-grayscale > img,
  .arcanis-banner__img {
    filter: grayscale(0%) saturate(100%) contrast(100%) !important;
    animation: none !important;
    transition: none !important;
  }
}

html.arcanis-save-data img.arcanis-image--focus-color,
html.arcanis-save-data img.arcanis-image--grayscale,
html.arcanis-save-data .arcanis-image--grayscale > img,
html.arcanis-save-data img.js-arcanis-grayscale,
html.arcanis-save-data .js-arcanis-grayscale > img,
html.arcanis-save-data .arcanis-banner__img {
  filter: grayscale(0%) saturate(100%) contrast(100%) !important;
  animation: none !important;
  transition: none !important;
}