/* =========================================================
   GLOBALE ESTHETIQUE — ANIMATIONS CLIENT (10/10/2026)
   Micro-animations déclenchées uniquement par un geste de la
   cliente (ajout panier, favori, recherche, catégories, toast,
   copie du code promo). Voir assets/js/animations-client.js.
   ========================================================= */

/* 1. Ajout au panier : le sac se secoue, le bouton de la carte confirme */
.ac-shake{ animation:acBagShake .6s cubic-bezier(.36,.07,.19,.97); transform-origin:50% 20%; }
@keyframes acBagShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.ac-pop{ animation:acBadgePop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes acBadgePop{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}
.add-cart-btn.ac-ajoute{ background:#2f7a4b !important; border-color:#2f7a4b !important; color:#fff !important; }
.add-cart-btn.ac-ajoute svg{ animation:acChk .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes acChk{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}

/* 2. Favori : éclat de paillettes */
.fav-btn{ overflow:visible !important; }
.ac-spark{ position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; pointer-events:none; z-index:1000; }

/* 3. Recherche mobile : la barre se soulève, la loupe pivote, suggestions en cascade */
@media (max-width:900px){
  .mobile-search{ transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease !important; }
  .mobile-search:focus-within{
    border-color:#6E1B2C !important;
    box-shadow:0 0 0 4px rgba(110,27,44,.12), 0 10px 24px rgba(110,27,44,.12) !important;
    transform:translateY(-2px);
  }
  .mobile-search > svg{ transition:transform .35s ease, stroke .3s ease; }
  .mobile-search:focus-within > svg{ transform:rotate(-15deg) scale(1.1); stroke:#6E1B2C !important; }
  #suggestionsMobile > *{ animation:acSugIn .35s ease both; }
  #suggestionsMobile > *:nth-child(2){ animation-delay:.06s; }
  #suggestionsMobile > *:nth-child(3){ animation-delay:.12s; }
  #suggestionsMobile > *:nth-child(4){ animation-delay:.18s; }
  #suggestionsMobile > *:nth-child(n+5){ animation-delay:.24s; }
}
@keyframes acSugIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* 4. Icônes de catégories : onde + rebond à l'appui */
.mobile-cat .circle{ position:relative; overflow:hidden; }
.ac-ripple{ position:absolute; border-radius:50%; background:rgba(110,27,44,.25); transform:scale(0); animation:acRipple .6s ease-out forwards; pointer-events:none; }
@keyframes acRipple{to{transform:scale(2.6);opacity:0}}
.ac-bounce svg{ animation:acIcoBounce .5s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes acIcoBounce{0%{transform:translateY(0)}40%{transform:translateY(-6px) scale(1.12)}100%{transform:none}}

/* 5. Message de confirmation d'ajout */
.ac-toast{
  position:fixed; left:50%; bottom:22px; z-index:1001;
  width:min(420px, calc(100vw - 24px));
  display:flex; align-items:center; gap:12px;
  background:#241712; color:#fff; border-radius:14px; padding:10px 12px;
  box-shadow:0 14px 34px rgba(36,23,18,.28);
  font-family:'DM Sans', sans-serif; font-size:13px; line-height:1.3;
  transform:translate(-50%, 160%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.ac-toast.visible{ transform:translate(-50%, 0); }
.ac-toast img{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:#FBEFF1; flex:none; }
.ac-toast .ac-t-txt{ min-width:0; }
.ac-toast b{ display:block; font-size:13px; }
.ac-toast .ac-t-nom{ display:block; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-toast a{ margin-left:auto; flex:none; color:#E8C48E; font-weight:700; font-size:11px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; padding:8px 4px; }
@media (max-width:900px){ .ac-toast{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); } } /* au-dessus de la barre du bas */

/* 6. Code promo copié : confettis */
.ac-conf{ position:fixed; width:7px; height:10px; border-radius:2px; pointer-events:none; z-index:1000; }

/* 7. Nouveautés (mobile) : les cartes entrent une à une depuis la droite */
@keyframes acNvIn{ from{ opacity:0; transform:translateX(48px); } to{ opacity:1; transform:none; } }
.mobile-new-card-wrap.ac-nv-in{ animation:acNvIn .9s cubic-bezier(.22,.7,.3,1) both; }
#nouveautes-mobile .mobile-new-row{ scroll-behavior:smooth; }

/* 8. Cartes produits : montée douce + zoom photo, à chaque apparition (haut ET bas)
   « backwards » : après l'animation, la carte reprend ses styles normaux (survol, etc.) */
.product-card.ac-pc:not(.ac-pc-vu){ opacity:0; }
.product-card.ac-pc.ac-pc-vu{ animation:acPcBas .75s cubic-bezier(.22,.7,.3,1) backwards; }
.product-card.ac-pc.ac-pc-vu.ac-pc-haut{ animation-name:acPcHaut; }
.product-card.ac-pc.ac-pc-vu .img-principale,
.product-card.ac-pc.ac-pc-vu .img-secondaire{ animation:acPcZoom 1.1s cubic-bezier(.22,.7,.3,1) backwards; }
@keyframes acPcBas { from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
@keyframes acPcHaut{ from{ opacity:0; transform:translateY(-40px); } to{ opacity:1; transform:none; } }
@keyframes acPcZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  .ac-shake, .ac-pop, .ac-bounce svg, #suggestionsMobile > *, .add-cart-btn.ac-ajoute svg, .mobile-new-card-wrap.ac-nv-in{ animation:none !important; }
  .ac-toast{ transition:none; }
  .mobile-search, .mobile-search > svg{ transition:none !important; transform:none !important; }
}