/* ==========================================================
   331 V4 — CSS JM24 CHIRURGICAL + ANIMATIONS
   Basé sur l'HTML réel du site. Zéro conflit avec theme685.
   
   Règles d'or :
   - Ne JAMAIS toucher body/html/nav/header/footer/boutons natifs
   - Sélecteurs EXACTS du HTML live
   - Uniquement AJOUTER des styles, pas REMPLACER
   - Animations subtiles (0.3s ease)
   ========================================================== */

/* ----------------------------------------------------------
   1. BANNER "8 ANS" — intégré au design existant + pluie d'emojis
   ---------------------------------------------------------- */
.jm24-banner-8ans {
  background: linear-gradient(90deg, #FFC107, #FF8C00);
  color: #1a1a1a;
  text-align: center;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  animation: jm24-banner-fade 0.6s ease;
  position: relative;
  overflow: visible;
}

/* Pluie d'emojis anniversaire — chute limitée au banner */
.jm24-emoji-rain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px !important;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden !important;
}

.jm24-emoji-rain span {
  position: absolute;
  top: 0;
  display: inline-block;
  font-size: 16px !important;
  line-height: 1;
  opacity: 0;
  animation: jm24-fall-emoji 3s ease-out infinite;
}

/* Positions staggered — limité à 5 emojis */
.jm24-emoji-rain span:nth-child(1)  { left: 10%; animation-delay: 0.0s; }
.jm24-emoji-rain span:nth-child(2)  { left: 30%; animation-delay: 0.5s; }
.jm24-emoji-rain span:nth-child(3)  { left: 50%; animation-delay: 1.0s; }
.jm24-emoji-rain span:nth-child(4)  { left: 70%; animation-delay: 0.3s; }
.jm24-emoji-rain span:nth-child(5)  { left: 90%; animation-delay: 0.8s; }
.jm24-emoji-rain span:nth-child(n+6) { display: none !important; }

@keyframes jm24-fall-emoji {
  0%   { transform: translateY(-10px) rotate(0deg) scale(0.5); opacity: 0; }
  20%  { transform: translateY(5px) rotate(30deg) scale(1.1); opacity: 1; }
  60%  { transform: translateY(30px) rotate(90deg) scale(1); opacity: 0.7; }
  100% { transform: translateY(50px) rotate(180deg) scale(0.5); opacity: 0; }
}

@keyframes jm24-banner-fade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   2. IMAGES CATÉGORIES — N&B + hover couleur (demande client)
   Cible exacte : .category-view .category .spacer img
   ---------------------------------------------------------- */
.category-view .category .spacer img {
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.4s ease, transform 0.4s ease;
  border-radius: 6px;
}

.category-view .category:hover .spacer img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.02);
}

/* ----------------------------------------------------------
   3. IMAGES PRODUITS (home) — COULEUR + hover zoom subtil
   Cible exacte : .vm-product-media-container img
   ---------------------------------------------------------- */
.vm-product-media-container img {
  transition: transform 0.35s ease;
  border-radius: 4px;
}

.vm-product-media-container:hover img {
  transform: scale(1.03);
}

/* ----------------------------------------------------------
   4. PRIX — barré gris + actuel rouge (moderne)
   Cibles exactes du HTML : .PricediscountedPriceWithoutTax span
   ---------------------------------------------------------- */

/* Prix discount (barré implicite ou non) */
.PricediscountedPriceWithoutTax,
span.PricediscountedPriceWithoutTax {
  color: #999;
  font-size: 13px;
  text-decoration: line-through;
}

/* Prix actuel / vente */
.PricesalesPrice,
span.PricesalesPrice,
.PricepriceWithoutTax,
span.PricepriceWithoutTax {
  color: #E74C3C;
  font-weight: 700;
  font-size: 16px;
  transition: color 0.3s ease;
}

/* ----------------------------------------------------------
   5. CARDS PRODUIT — ombre hover subtile
   Cible exacte : .prod-box.with_discount_col.spacer.product-container
   ---------------------------------------------------------- */
.prod-box.with_discount_col.spacer.product-container {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 8px;
}

.prod-box.with_discount_col.spacer.product-container:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

/* ----------------------------------------------------------
   6. BOUTON "Voir Plus" — hover subtil uniquement
   Cible exacte : span.btn-more (déjà jaune natif du template)
   On ne change PAS la couleur, on ajoute juste un hover
   ---------------------------------------------------------- */
.vm-product-media-container .btn-more {
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.vm-product-media-container:hover .btn-more {
  background: #FF8C00;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,140,0,0.3);
}

/* ----------------------------------------------------------
   7. TITRES PRODUIT — hover couleur uniquement
   Cible exacte : .vm-product-descr-container-1 h2 a
   ---------------------------------------------------------- */
.vm-product-descr-container-1 h2 a {
  transition: color 0.25s ease;
}

.vm-product-descr-container-1 h2 a:hover {
  color: #FF8C00;
}

/* ----------------------------------------------------------
   8. EXCLUSIONS — jamais toucher logos/badges de confiance
   ---------------------------------------------------------- */
img[src*="logo"],
img[src*="Logo"],
img[src*="icon"],
img[src*="payment"],
img[src*="badge"],
img[src*="trust"],
img[src*="livraison"],
img[src*="garantie"],
img[src*="qualite"],
img[src*="serenite"] {
  filter: none !important;
  transform: none !important;
}

/* ----------------------------------------------------------
   9. RESPONSIVE MOBILE — réduire animations
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .category-view .category .spacer img {
    filter: none;
  }
  
  .prod-box.with_discount_col.spacer.product-container:hover {
    transform: none;
  }
}