/* ============================================================
   TOUITIGROUP — images.css
   Placeholder flou : la zone prend la couleur dominante de la
   photo, puis l'image apparaît en fondu une fois chargée
   (classe .is-loaded posée par assets/js/images.js).
   Chargé par toutes les pages, après footer.css.

   <div class="img-wrap dominant-sand">
     <img src="…" alt="…" data-img-id="IMG-001" width="…" height="…">
   </div>
   .img-wrap--fill : le cadre remplit son parent positionné
   (ex. .service-hero__media, qui fixe déjà le ratio).
   Couleur dominante : classes .dominant-* (jamais de style inline).
   ============================================================ */
.img-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--img-dominant, #1a1a1a);
}
.img-wrap--fill {
  position: absolute;
  inset: 0;
}
.img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}
.img-wrap img.is-loaded { opacity: 1; }
.img-wrap img:not(.is-loaded) {
  filter: blur(12px);
  transform: scale(1.05);
}

/* Sans JavaScript, l'image reste visible (pas de fondu) */
html:not(.js) .img-wrap img {
  opacity: 1;
  filter: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .img-wrap img { transition: none; }
}

/* Couleurs dominantes (palette du site) */
.img-wrap.dominant-dark { --img-dominant: #1a1a1a; }
.img-wrap.dominant-sand { --img-dominant: #a87a5c; }
.img-wrap.dominant-gray { --img-dominant: #6b6b6b; }
.img-wrap.dominant-cream { --img-dominant: #f5f0e8; }
.img-wrap.dominant-charcoal { --img-dominant: #2a2a2a; }
.img-wrap.dominant-gold { --img-dominant: #c9a84c; }