/* 3D tilt card for LOYUM */
.tilt-surface {
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform 200ms ease, box-shadow 200ms ease;
  perspective: 1000px;
}
.tilt-surface.is-animating { transition: transform 120ms ease; }

/* optional scale on hover */
.tilt-surface:hover { }

/* Inner for depth */
.tilt-inner {
  transform-style: preserve-3d;
  position: relative;
  display: inline-block;
}

/* Child image depth */
.tilt-inner img {
  display: block;
  transform: translateZ(30px);
  will-change: transform;
}

/* Glare effect */
.tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%);
  opacity: 0;
  transform: translateZ(60px);
  transition: opacity 150ms ease;
  border-radius: inherit;
}

/* Card-like shadow */
.tilt-elevate {
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.tilt-surface.is-hover .tilt-elevate {
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* For the existing section */
#cartes .card-hero {
  display: inline-block;
  border-radius: 16px;
}
#cartes .card-hero img {
  border-radius: 16px;
}

#cartes .card-hero .tilt-elevate { border-radius: 16px; }

/* Only the PNG moves: container wrap */
.tilt-wrap {
  display: inline-block;
  border-radius: 16px;
}
.tilt-wrap > .tilt-inner img {
  border-radius: 16px;
}

/* Mask any background bleed while tilting */
.tilt-wrap,
.tilt-inner {
  background: transparent;
}

.tilt-wrap {
  border-radius: 16px;
            /* important: clip glare and scaled edges */
  will-change: transform;
}

.tilt-inner img {
  display: block;
}

/* Ensure the figure itself stays transparent */
#cartes .card-hero {
  background: transparent;
}

.tilt-wrap { overflow: visible; background: transparent; }

.tilt-inner { background: transparent; backface-visibility: hidden; transform-style: preserve-3d; }

#cartes .card-hero .tilt-inner { box-shadow: none !important; }