/*
 * /acheter — cinematic premium polish.
 * Charge sur pages/acheter.php (mode LT26).
 * 100% scopé à .lt26-acheter ou .acheter-page-edition.
 *
 * Effets livrés :
 *   1. Cascade d'entrée (hero / toolbar / category-rail / layout)
 *   2. Count-up sur les 2 compteurs dynamiques (ae-hero-count, ae-results-count-value)
 *   3. Spotlight souris dans le hero
 *   4. Hover doré sur les sort pills + category chips
 *   5. Active sort pill : underline doré glissant (segmented control)
 *   6. Listing cards : hover lift + glow doré + image scale
 *   7. Filter chips actifs : slide-in animation
 *   8. Favori heart pulse au click
 *   9. Skeleton shimmer enhanced
 */

.acheter-page-edition {
  --ach-cin-mx: 50%;
  --ach-cin-my: 50%;
}

/* ============================================================
 * 1. Cascade d'entrée
 * ============================================================ */
.acheter-page-edition .ae-hero,
.acheter-page-edition .ae-toolbar,
.acheter-page-edition .ae-category-rail,
.acheter-page-edition .acheter-layout-flex {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ach-cin-i, 0) * 90ms),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ach-cin-i, 0) * 90ms),
    filter 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ach-cin-i, 0) * 90ms);
}
.acheter-page-edition.is-cin-mounted .ae-hero,
.acheter-page-edition.is-cin-mounted .ae-toolbar,
.acheter-page-edition.is-cin-mounted .ae-category-rail,
.acheter-page-edition.is-cin-mounted .acheter-layout-flex {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============================================================
 * 3. Spotlight souris dans le hero
 * ============================================================ */
.acheter-page-edition .ae-hero {
  position: relative;
}
.acheter-page-edition .ae-hero .ae-hero-inner {
  position: relative;
  z-index: 2;
}
.acheter-page-edition .ae-hero .ae-cin-spotlight-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    540px circle at var(--ach-cin-mx) var(--ach-cin-my),
    rgba(212, 160, 23, 0.12),
    rgba(212, 160, 23, 0.04) 32%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 420ms ease;
}
.acheter-page-edition .ae-hero.is-cin-spotlight .ae-cin-spotlight-layer {
  opacity: 1;
}
@media (pointer: coarse) {
  .acheter-page-edition .ae-cin-spotlight-layer { display: none; }
}

/* ============================================================
 * 4. Sort pills + category chips : hover doré
 * ============================================================ */
.acheter-page-edition .ae-sort-pill,
.acheter-page-edition .ae-category-rail .lt-chip {
  transition:
    border-color 240ms ease,
    background 240ms ease,
    color 240ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}
.acheter-page-edition .ae-sort-pill:hover:not(.is-active),
.acheter-page-edition .ae-category-rail .lt-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(212, 160, 23, 0.32);
}

/* ============================================================
 * 5. Active sort pill : underline doré glissant
 * ============================================================ */
.acheter-page-edition .ae-sort {
  position: relative;
}
.acheter-page-edition .ae-sort::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: var(--ach-cin-sort-w, 0);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 160, 23, 0.85) 20%,
    rgba(212, 160, 23, 0.85) 80%,
    transparent
  );
  transform: translateX(var(--ach-cin-sort-x, 0));
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    width 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
  pointer-events: none;
  opacity: 0;
  border-radius: 2px;
}
.acheter-page-edition .ae-sort.is-cin-ready::after {
  opacity: 1;
}

/* ============================================================
 * 6. Listing cards : hover lift + glow doré + image scale
 * ============================================================ */
.acheter-page-edition .listing-card-acheter,
.acheter-page-edition .listing-card-acheter-wrap {
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms ease,
    border-color 360ms ease;
  position: relative;
  overflow: hidden;
}
.acheter-page-edition .listing-card-acheter:hover,
.acheter-page-edition .listing-card-acheter-wrap:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px -16px rgba(0, 0, 0, 0.45),
    0 12px 28px -12px rgba(212, 160, 23, 0.28);
  border-color: rgba(212, 160, 23, 0.42);
}

/* Image scale subtil + glow doré au survol */
.acheter-page-edition .listing-card-acheter-image,
.acheter-page-edition .listing-card-acheter .lt-card__media {
  overflow: hidden;
  position: relative;
}
.acheter-page-edition .listing-card-acheter-image img,
.acheter-page-edition .listing-card-acheter .lt-card__media img {
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1), filter 540ms ease;
}
.acheter-page-edition .listing-card-acheter:hover .listing-card-acheter-image img,
.acheter-page-edition .listing-card-acheter:hover .lt-card__media img,
.acheter-page-edition .listing-card-acheter-wrap:hover .listing-card-acheter-image img,
.acheter-page-edition .listing-card-acheter-wrap:hover .lt-card__media img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Badge "À la une" : pulse subtil */
.acheter-page-edition .listing-badge-featured {
  animation: ach-cin-featured-pulse 3s ease-in-out infinite;
}
@keyframes ach-cin-featured-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0);
  }
  50% {
    box-shadow: 0 0 12px 1px rgba(212, 160, 23, 0.45);
  }
}

/* ============================================================
 * 7. Filter chips actifs : slide-in animation
 * ============================================================ */
.acheter-page-edition .acheter-filters-chips .acheter-filter-chip {
  animation: ach-cin-chip-in 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes ach-cin-chip-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.acheter-page-edition .acheter-filter-chip-remove {
  transition: background 200ms ease, transform 200ms ease;
}
.acheter-page-edition .acheter-filter-chip-remove:hover {
  background: rgba(238, 92, 110, 0.18);
  color: #ee5c6e;
  transform: rotate(90deg);
}

/* ============================================================
 * 8. Favori heart : pulse au click + hover scale
 * ============================================================ */
.acheter-page-edition .listing-card-favori {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.acheter-page-edition .listing-card-favori:hover {
  transform: scale(1.15);
}
.acheter-page-edition .listing-card-favori.is-cin-popped {
  animation: ach-cin-heart-pop 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ach-cin-heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ============================================================
 * 9. Skeleton shimmer enhanced
 * ============================================================ */
.acheter-page-edition .listing-card-skeleton__image,
.acheter-page-edition .listing-card-skeleton__line {
  position: relative;
  overflow: hidden;
}
.acheter-page-edition .listing-card-skeleton__image::after,
.acheter-page-edition .listing-card-skeleton__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 160, 23, 0.12),
    transparent
  );
  animation: ach-cin-shimmer 1.6s linear infinite;
}
@keyframes ach-cin-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ============================================================
 * Reduced motion : tout figé
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .acheter-page-edition .ae-hero,
  .acheter-page-edition .ae-toolbar,
  .acheter-page-edition .ae-category-rail,
  .acheter-page-edition .acheter-layout-flex {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .acheter-page-edition .ae-cin-spotlight-layer { display: none; }
  .acheter-page-edition .listing-badge-featured,
  .acheter-page-edition .listing-card-skeleton__image::after,
  .acheter-page-edition .listing-card-skeleton__line::after,
  .acheter-page-edition .acheter-filters-chips .acheter-filter-chip,
  .acheter-page-edition .listing-card-favori.is-cin-popped {
    animation: none;
  }
  .acheter-page-edition .ae-sort::after { display: none; }
  .acheter-page-edition .listing-card-acheter:hover,
  .acheter-page-edition .listing-card-acheter-wrap:hover {
    transform: none;
  }
}