/**
 * Stabilité perf / CLS — heroes, skeletons catalogue, reduced-motion.
 */
/* Heroes : hauteur réservée, jamais rectangle vide */
.rs-hero {
  min-height: min(82vh, 760px);
}

.rs-hero__bg,
.rs-boutique-hero__bg,
.acc-hero__bg {
  background-color: #0a0c14 !important;
  transition: opacity 0.2s ease;
}

.rs-hero__bg:not(.is-hero-ready),
.rs-boutique-hero__bg:not(.is-hero-ready),
.acc-hero__bg:not(.is-hero-ready) {
  /* garde le fond CSS par défaut jusqu’à image admin prête */
}

.rs-boutique-hero,
.rs-free-hero {
  min-height: clamp(200px, 28vw, 280px);
}

.acc-hero {
  min-height: clamp(180px, 24vw, 260px);
}

/* Cartes catalogue : ratio média stable */
.rs-card__media {
  aspect-ratio: 16 / 9;
  background: #0c0e16;
  overflow: hidden;
}

.rs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Skeletons catalogue (même grille que les vraies cartes) */
.rs-catalog__grid .rs-card-skel {
  display: flex;
  flex-direction: column;
  border-radius: 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 18, 28, 0.9);
  overflow: hidden;
  min-height: 22rem;
  pointer-events: none;
}

.rs-card-skel__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: rsCardSkel 1.15s ease-in-out infinite;
}

.rs-card-skel__body {
  padding: 1rem 1rem 1.15rem;
  display: grid;
  gap: 0.55rem;
}

.rs-card-skel__line {
  height: 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  animation: rsCardSkel 1.15s ease-in-out infinite;
}

.rs-card-skel__line--title {
  height: 1rem;
  width: 70%;
}

.rs-card-skel__line--desc {
  width: 100%;
}

.rs-card-skel__line--price {
  width: 35%;
  height: 1.35rem;
  margin-top: 0.35rem;
}

.rs-card-skel__line--btn {
  height: 3rem;
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 12px;
}

@keyframes rsCardSkel {
  0% { background-position: 100% 0; opacity: 0.85; }
  100% { background-position: -100% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-card-skel__media,
  .rs-card-skel__line {
    animation: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* View transitions courtes */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s !important;
}