/* Hero vivant : relief discret, lisible et visible sur mobile. */
.visual {
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible;
}

.visual .main-img {
  transform-origin: 55% 50%;
  will-change: transform;
  animation: hero-depth 8s ease-in-out infinite;
}

.visual .stamp {
  z-index: 3;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  animation: stamp-3d 5.5s ease-in-out infinite;
}

.visual .stamp strong,
.visual .stamp small {
  position: relative;
  z-index: 2;
  transform: translateZ(22px);
}

.visual .stamp::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 1;
  border: 2px dashed var(--gold);
  border-radius: 50%;
  opacity: .85;
  pointer-events: none;
  animation: stamp-ring 9s linear infinite;
}

.visual .stamp::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.52), transparent 40%, rgba(197,160,92,.10));
  pointer-events: none;
}

@keyframes stamp-ring {
  to { transform: rotate(360deg); }
}

@keyframes stamp-3d {
  0%, 100% {
    transform: rotate(-7deg) rotateX(0deg) rotateY(-8deg) translateZ(0);
  }
  50% {
    transform: rotate(2deg) rotateX(7deg) rotateY(11deg) translateY(-7px) translateZ(18px);
  }
}

@keyframes hero-depth {
  0%, 100% { transform: rotateY(-1.2deg) translateY(0) translateZ(0); }
  50% { transform: rotateY(1.8deg) translateY(-8px) translateZ(12px); }
}

@media (max-width: 850px) {
  .visual { perspective: 850px; }

  .visual .main-img {
    animation-duration: 6s;
  }

  .visual .stamp {
    left: 4px;
    bottom: 28px;
    animation-duration: 4.8s;
    box-shadow: 0 20px 42px rgba(34,53,43,.25);
  }

  .visual .stamp::before {
    inset: -8px;
    border-width: 2px;
    animation-duration: 7s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual .main-img,
  .visual .stamp,
  .visual .stamp::before {
    animation: none !important;
  }

  .visual .stamp { transform: rotate(-7deg); }
}