/* ==========================================================================
   ElectroPlace — Micro-interactions & animations (v1)
   Objectif : attirer l'œil et guider vers l'action, sans ralentir la page.
   Tout est en CSS (GPU : transform / opacity uniquement), aucune image.
   Désactivé automatiquement si l'utilisateur a réduit les animations.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. Apparition au défilement (classe ajoutée par ep-animations.js)
   ---------------------------------------------------------------------- */
.ep-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.ep-reveal.ep-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------
   2. Bouton WhatsApp flottant — anneau pulsé + petite oscillation
   ---------------------------------------------------------------------- */
a[href*="wa.me"].ep-float,
.whatsapp-float,
.ep-whatsapp-button {
  position: relative;
  animation: ep-float-bob 3.2s ease-in-out infinite;
}
a[href*="wa.me"].ep-float::after,
.whatsapp-float::after,
.ep-whatsapp-button::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: ep-ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ep-ring {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes ep-float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ----------------------------------------------------------------------
   3. Boutons d'action — reflet qui balaie + relief au survol
   ---------------------------------------------------------------------- */
.yc-btn,
.add-to-cart-button,
.express-checkout-button,
.slide-content-box-button,
.express-checkout-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.yc-btn::before,
.add-to-cart-button::before,
.express-checkout-button::before,
.slide-content-box-button::before,
.express-checkout-form button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.yc-btn:hover::before,
.add-to-cart-button:hover::before,
.express-checkout-button:hover::before,
.slide-content-box-button:hover::before,
.express-checkout-form button[type="submit"]:hover::before {
  animation: ep-shine .75s ease;
}
@keyframes ep-shine { to { left: 130%; } }

.add-to-cart-button:active,
.express-checkout-button:active { transform: scale(.98); }

/* Bouton principal de la fiche produit : léger battement pour attirer l'œil,
   il s'arrête dès que l'utilisateur le survole. */
.yc-single-product .express-checkout-button,
.express-checkout-form button[type="submit"] {
  animation: ep-cta-beat 3.4s ease-in-out infinite;
}
.yc-single-product .express-checkout-button:hover,
.express-checkout-form button[type="submit"]:hover { animation: none; }
@keyframes ep-cta-beat {
  0%, 88%, 100% { box-shadow: 0 6px 18px rgba(226, 97, 10, .22); transform: none; }
  92%           { box-shadow: 0 10px 26px rgba(226, 97, 10, .40); transform: translateY(-2px); }
}

/* ----------------------------------------------------------------------
   4. Badges & étiquettes promo — pastille vivante
   ---------------------------------------------------------------------- */
.product-tag,
.price-tag-banner,
.yc-badge,
[class*="product-tag"] {
  animation: ep-pop .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes ep-pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.price-tag-banner::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: ep-blink 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes ep-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ----------------------------------------------------------------------
   5. Cartes produit — image qui respire, ombre qui répond
   ---------------------------------------------------------------------- */
.product-card, .yc-product-card, .product-item, .product-block, .product-holder {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card .product-thumbnail,
.yc-product-card .product-thumbnail,
.product-block .product-thumbnail,
.product-holder .product-thumbnail { overflow: hidden; }

.product-card .product-thumbnail img,
.yc-product-card .product-thumbnail img,
.product-block .product-thumbnail img,
.product-holder .product-thumbnail img {
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.product-card:hover .product-thumbnail img,
.yc-product-card:hover .product-thumbnail img,
.product-block:hover .product-thumbnail img,
.product-holder:hover .product-thumbnail img { transform: scale(1.07); }

/* Bouton secondaire (WhatsApp / détails) qui se révèle au survol sur desktop */
@media (min-width: 900px) and (hover: hover) {
  .product-card .yc-btn-secondary,
  .yc-product-card .yc-btn-secondary { transition: transform .25s ease, background .2s ease; }
  .product-card:hover .yc-btn-secondary,
  .yc-product-card:hover .yc-btn-secondary { transform: translateY(-2px); }
}

/* ----------------------------------------------------------------------
   6. Panier — la pastille réagit quand le compteur change (.ep-bump via JS)
   ---------------------------------------------------------------------- */
#cart-items-badge { transition: transform .2s ease; }
#cart-items-badge.ep-bump { animation: ep-bump .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ep-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------
   7. Bandeau annonce & bandeau confiance — icônes qui bougent légèrement
   ---------------------------------------------------------------------- */
.ep-retailer-strip-inner span { transition: transform .2s ease; }
.ep-retailer-strip-inner span:hover { transform: translateY(-2px); }

.yc-notice-bar p, .notice-bar p { animation: ep-fade-in .6s ease both; }
@keyframes ep-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------------------------------------------------
   8. Compte à rebours — les secondes battent la mesure
   ---------------------------------------------------------------------- */
.countdown-container .number:last-child,
.countdown .number:last-child { animation: ep-tick 1s steps(2, end) infinite; }
@keyframes ep-tick { 0%, 60% { opacity: 1; } 80% { opacity: .72; } 100% { opacity: 1; } }

/* ----------------------------------------------------------------------
   9. Liens de navigation — soulignement qui se déploie
   ---------------------------------------------------------------------- */
.yc-header .yc-navbar .menu-item > a::after {
  transition: width .25s ease, background .2s ease;
}
.yc-header .yc-navbar .menu-item > a { transition: color .2s ease, transform .2s ease; }
.yc-header .yc-navbar .menu-item > a:hover { transform: translateY(-1px); }

/* ----------------------------------------------------------------------
   10. Chargement des images produit — fondu propre
   ---------------------------------------------------------------------- */
.product-thumbnail img { animation: ep-fade-in .4s ease both; }

/* ----------------------------------------------------------------------
   Accessibilité : on coupe tout si l'utilisateur préfère moins d'animation
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ep-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}