/* Assure que le header passe toujours au-dessus */
header,
.site-header,
.elementor-location-header {
  position: relative !important;
  z-index: 2000 !important;
}

/* Les pièces restent dans leur section et ne débordent pas sur le header */
.coins-hero {
  position: relative;
  z-index: 0;
  overflow: hidden; /* coupe ce qui dépasse vers le haut */
}

/* ========= Pièces "wow" responsive ========= */
.coins-hero {
  position: relative;
  overflow: visible;
  --coin-left: url("/wp-content/uploads/2025/08/piece-.png");
  --coin-right: url("/wp-content/uploads/2025/08/piece-2.png");
  --coin-size: clamp(180px, 20vw, 360px); /* taille responsive */
}

/* contenu au-dessus des pièces */
.coins-hero > .elementor-container,
.coins-hero > .e-con {
  position: relative;
  z-index: 3;
}

/* Styles communs aux pièces */
.coins-hero::before,
.coins-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--coin-size);
  aspect-ratio: 603 / 850;
  height: calc(var(--coin-size) * 850 / 603); /* fallback */
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0; /* cachées avant hover */
  transform: translateY(-50%) scale(0.85);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1), filter 0.8s ease;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
  pointer-events: none;
  z-index: 2;
  animation: coin-float 6s ease-in-out infinite;
  animation-play-state: paused; /* démarre au hover */
}

/* Pièce gauche */
.coins-hero::before {
  left: 2%;
  top: 60%; 
  background-image: var(--coin-left);
}

/* Pièce droite */
.coins-hero::after {
  right: 2%;
  top: 60%; 
  background-image: var(--coin-right);
}

/* Effet "wahou" au survol */
.coins-hero:hover::before,
.coins-hero:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  animation-play-state: running;
  filter: drop-shadow(0 35px 60px rgba(0,0,0,.5)) brightness(1.05);
}

/* Flottement doux */
@keyframes coin-float {
  0%   { transform: translateY(-50%) scale(1); }
  50%  { transform: translateY(calc(-50% - 12px)) scale(1.02); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Mobile : masquer */
@media (max-width: 767px) {
  .coins-hero::before,
  .coins-hero::after { display: none; }
}