.holo-card {
  position: relative;
  width: 70%;
  margin:0 15%;
  overflow: hidden;
  perspective: 1000px;
  --x: 50%;
  --y: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.1s ease-out;
	display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;     /* Centre verticalement */
}

/* L'image de base */
.card-image {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* Le calque holographique irisé */
.holo-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  
  /* Dégradé irisé simulant la décomposition de la lumière */
  background: 
    radial-gradient(
      circle at var(--x) var(--y),
      rgba(255, 255, 255, 0.8) 0%,
      transparent 25%
    ),
	url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(
      calc(var(--x-deg, 0deg)),
      #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000
    );
	  /* Fusion des calques internes (Bruit + Dégradé) */
	  background-blend-mode: screen, color-dodge, normal;
	  background-size: auto, 400px 400px, auto;
	  
  /* Clé de l'effet : fusionne les couleurs irisées avec les détails de l'image */
  mix-blend-mode: soft-light;
  filter: brightness(0.9) contrast(1.5);
  
  /* 3. Masquage selon la couche alpha du PNG */
  -webkit-mask-image: url('../images/ingreV4.png');
  mask-image: url('../images/ingreV4.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.holo-card:hover .holo-overlay {
  opacity: 0.75;
}