/* La div qui entoure l’image reçoit le fond bleu */
.image-externe {
  position: relative;
}

.views-element-container a.link-externe {
  text-decoration: none;
}

/* Icône invisible par défaut (desktop) */
.image-externe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0.5;
  transform: translate(-50%, -50%);
  background-image: url('/sites/default/files/2026-03/lien-extrne-3.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  z-index: 5;
  pointer-events: none; /* ne bloque pas le clic */
}

/* Icône visible au hover image OU hover card (desktop) */
.image-externe:hover::after,
.link-externe:hover .image-externe::after {
  width: 110px;
  height: 110px;
  opacity: 0.7;
}

/* Desktop très large */
@media (min-width: 1200px) {
  .image-externe:hover::after,
  .link-externe:hover .image-externe::after {
    width: 90px;
    height: 90px;
  }
}

/* --- MOBILE/Tactile : toujours visible --- */
@media (hover: none) and (pointer: coarse) {
  .image-externe::after {
    width: 110px;
    height: 110px;
    opacity: 0.4;
    transition: none;
  }
}

/* Accessibilité : limiter les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .image-externe::after {
    transition: none !important;
  }
}