/* ═══════════════════════════════════════════════════════════════════
   SAVANNA SELECT V135 — animations.css
   Micro-interactions, skeleton loaders, transitions panels,
   empty states, count-up, hover cards
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   1. SKELETON LOADERS (shimmer effect)
   ──────────────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-card {
  background: #f0f7f2;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 2px 8px rgba(26,77,46,.06);
  animation: none;
}
[data-theme="dark"] .skeleton-card {
  background: #1A3320;
}

.skeleton-shimmer {
  background: linear-gradient(90deg,
    rgba(26,77,46,.08) 25%,
    rgba(26,77,46,.16) 50%,
    rgba(26,77,46,.08) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .skeleton-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.1)  50%,
    rgba(255,255,255,.04) 75%);
  background-size: 800px 100%;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px 12px 0 0;
}
.skeleton-body {
  padding: 14px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.skeleton-line-sm  { width: 60%; }
.skeleton-line-md  { width: 80%; }
.skeleton-line-lg  { width: 95%; }
.skeleton-line-xl  { width: 100%; }
.skeleton-btn {
  height: 36px;
  border-radius: 10px;
  width: 100%;
  margin-top: 12px;
}

/* ────────────────────────────────────────────────────────────────────
   2. MICRO-INTERACTIONS — Boutons
   ──────────────────────────────────────────────────────────────────── */

/* Bounce add-to-cart */
@keyframes btn-bounce {
  0%    { transform: scale(1); }
  30%   { transform: scale(0.92); }
  60%   { transform: scale(1.08); }
  80%   { transform: scale(0.97); }
  100%  { transform: scale(1); }
}
@keyframes btn-success-flash {
  0%   { background: #1A4D2E; }
  40%  { background: #2E7D4F; box-shadow: 0 0 0 6px rgba(46,125,79,.25); }
  100% { background: #1A4D2E; }
}

.btn-bounce-anim {
  animation: btn-bounce .35s ease;
}
.btn-cart-success {
  animation: btn-success-flash .5s ease;
}

/* Badge panier — pulse quand incrémenté */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); background: #D9A441; color: #1A4D2E; }
  100% { transform: scale(1); }
}
.cart-badge-pop {
  animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* Coeur wishlist — remplissage */
@keyframes heart-fill {
  0%   { transform: scale(1);    fill-opacity: 0; stroke: currentColor; }
  30%  { transform: scale(1.25); fill-opacity: 0.5; }
  60%  { transform: scale(0.9);  fill-opacity: 1;   fill: #e74c3c; }
  100% { transform: scale(1);    fill-opacity: 1;   fill: #e74c3c; }
}
@keyframes heart-unfill {
  0%   { transform: scale(1.1); fill: #e74c3c; fill-opacity: 1; }
  50%  { transform: scale(0.85); fill: #e74c3c; fill-opacity: 0.3; }
  100% { transform: scale(1);    fill: none;    fill-opacity: 0; }
}
.wishlist-heart-fill path   { animation: heart-fill   .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.wishlist-heart-unfill path { animation: heart-unfill .3s ease forwards; }

/* Ripple effect sur bouton primaire */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  pointer-events: none;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  margin: -20px;
}
.btn-ripple.rippling::after {
  animation: ripple .5s linear;
}

/* ────────────────────────────────────────────────────────────────────
   3. CARDS PRODUIT — Hover lift
   ──────────────────────────────────────────────────────────────────── */
.product-card {
  transition:
    transform      .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow     .22s ease,
    border-color   .22s ease !important;
  will-change: transform;
}
.product-card:hover,
.product-card:focus-within {
  transform:  translateY(-6px);
  box-shadow: 0 12px 32px rgba(26,77,46,.18), 0 2px 8px rgba(26,77,46,.08);
  border-color: rgba(26,77,46,.2);
}
[data-theme="dark"] .product-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  border-color: #2E5038;
}
/* Désactiver lift si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .product-card { transition: box-shadow .2s ease !important; }
  .product-card:hover { transform: none; }
}

/* ────────────────────────────────────────────────────────────────────
   4. TRANSITIONS PANELS SPA (fade-in)
   ──────────────────────────────────────────────────────────────────── */
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel.active {
  animation: panel-fade-in 0.18s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .panel.active { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────
   5. EMPTY STATES ILLUSTRÉS
   ──────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  min-height: 300px;
}
.empty-state-svg {
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
  opacity: 0.85;
}
.empty-state-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1A4D2E;
  margin: 0 0 10px;
}
[data-theme="dark"] .empty-state-title { color: #7EC8A0; }
.empty-state-desc {
  font-size: .92rem;
  color: #5A4A38;
  line-height: 1.65;
  max-width: 380px;
  margin: 0 auto 20px;
}
[data-theme="dark"] .empty-state-desc { color: #A5C9A8; }
.empty-state-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Animation d'apparition empty state */
@keyframes empty-state-in {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.empty-state {
  animation: empty-state-in .3s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .empty-state { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────
   6. SECTION CHIFFRES CLÉS (stats / count-up)
   ──────────────────────────────────────────────────────────────────── */
.stats-section {
  padding: 32px 0;
  background: linear-gradient(135deg, #1A4D2E 0%, #2E7D4F 50%, #1A4D2E 100%);
  border-top:    1px solid rgba(217,164,65,.2);
  border-bottom: 1px solid rgba(217,164,65,.2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.stat-item {
  text-align: center;
  padding: 16px 8px;
  border-right: 1px solid rgba(255,255,255,.15);
  position: relative;
}
.stat-item:last-child { border-right: none; }
.stat-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  display: block;
  line-height: 1;
}
.stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #D9A441;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.stat-label {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  display: block;
}
.stat-sublabel {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  display: block;
}

/* Count-up animation */
@keyframes stat-count-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-item.is-animated {
  animation: stat-count-in .5s ease both;
  contain: layout style;
}
.stat-item:nth-child(2) { animation-delay: .1s; }
.stat-item:nth-child(3) { animation-delay: .2s; }
.stat-item:nth-child(4) { animation-delay: .3s; }

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
  .stat-value { font-size: 1.8rem; }
}
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.6rem; }
}

/* ────────────────────────────────────────────────────────────────────
   7. SUGGEST PRODUCTS GRID (after empty search)
   ──────────────────────────────────────────────────────────────────── */
.suggest-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
  max-width: 480px;
  width: 100%;
}
.suggest-card {
  background: #f0f7f2;
  border: 1px solid rgba(26,77,46,.12);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.suggest-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(26,77,46,.15); }
[data-theme="dark"] .suggest-card { background: #223D2A; border-color: #2E5038; }
.suggest-card img  { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.suggest-card-name { font-size: .78rem; font-weight: 700; color: #1A4D2E; line-height: 1.3; }
[data-theme="dark"] .suggest-card-name { color: #7EC8A0; }
.suggest-card-price { font-size: .8rem; font-weight: 900; color: #D9A441; margin-top: 3px; }

/* ────────────────────────────────────────────────────────────────────
   8. THEME TOGGLE BUTTON (lune/soleil)
   ──────────────────────────────────────────────────────────────────── */
#theme-toggle-btn .icon-sun  { display: inline; }
#theme-toggle-btn .icon-moon { display: none;   }
[data-theme="dark"] #theme-toggle-btn .icon-sun  { display: none;   }
[data-theme="dark"] #theme-toggle-btn .icon-moon { display: inline; }

@keyframes rotate-sun {
  from { transform: rotate(0deg); }
  to   { transform: rotate(45deg); }
}
@keyframes rotate-moon {
  from { transform: rotate(45deg); }
  to   { transform: rotate(0deg); }
}
[data-theme="dark"] #theme-toggle-btn .icon-moon {
  display: inline-block;
  animation: rotate-moon .3s ease;
}
#theme-toggle-btn .icon-sun {
  display: inline-block;
  animation: rotate-sun .3s ease;
}

/* ────────────────────────────────────────────────────────────────────
   9. GENERAL FADE-IN à l'entrée dans le viewport
   ──────────────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* V301 CLS fix : opacity:0 initial remplacé par will-change pour éviter layout shift */
.fade-up-on-scroll {
  will-change: opacity, transform;
}
.fade-up-on-scroll.is-visible {
  animation: fade-up .4s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up-on-scroll,
  .fade-up-on-scroll.is-visible { animation: none; opacity: 1; }
}