/* Listing skeletons — placeholder tiles shown while projects / campaigns load.
   Purely additive: every rule below targets markup that only the listing JS
   injects (.listing-skel*), so no existing tile style is affected. */

/* the aria-live text stays for screen readers; the skeletons carry the visual */
.filter-list-status__loading {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- tile ---- */
/* .listing-skel also carries .projet_tile / .projet_box, so it inherits the
   real grid geometry (width, aspect-ratio, radius) and never shifts layout. */
.listing-skel {
  --skel-i:    0;
  --skel-base: var(--moba_grey, #E6E6E6);
  --skel-tint: var(--moba_light_grey, #EEEDED);
  --skel-deep: var(--moba_beige, #F5F5F5);
  --skel-glow: rgba(255, 255, 255, .92);

  pointer-events: none;
  user-select: none;
  animation: skel-in .6s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--skel-i) * 60ms);
}

/* ------------------------------------------------------------- surfaces --- */
.listing-skel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background-image: linear-gradient(115deg,
              var(--skel-base) 0%,
              var(--skel-tint) 38%,
              var(--skel-deep) 72%,
              var(--skel-base) 100%);
  background-size: 240% 100%;
  background-position: calc(var(--skel-i) * 12%) 50%;
}

/* mirrors the clip of the real tile: image on top, white caption strip below */
.nos_projets_page .listing-skel__media {
  clip-path: inset(0 0 20% 0 round var(--radius-md, 1.5625rem));
}

.listing-skel__info {
  position: absolute;
  inset: auto 0 0 0;
  height: 20%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  padding: 0.375rem 0.875rem;
  box-sizing: border-box;
  background: #fff;
}

/* campaign tiles have no visible caption strip at rest */
.nos_campagnes_page .listing-skel__info {
  display: none;
}

.listing-skel__line {
  display: block;
  position: relative;
  overflow: hidden;
  width: 72%;
  height: 0.625rem;
  border-radius: var(--radius-pill, 624.9375rem);
  background: var(--skel-base);
}

.listing-skel__line--short {
  width: 44%;
  height: 0.5rem;
  opacity: .7;
}

/* ---------------------------------------------------------------- sheen --- */
/* one diagonal highlight travelling across every surface, staggered per tile
   so the sweep cascades through the grid instead of blinking all at once */
.listing-skel__media::after,
.listing-skel__line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
              rgba(255, 255, 255, 0) 30%,
              var(--skel-glow) 50%,
              rgba(255, 255, 255, 0) 70%);
  transform: translate3d(-130%, 0, 0);
  animation: skel-sweep 1.9s cubic-bezier(.45, .05, .25, 1) infinite;
  animation-delay: calc(var(--skel-i) * 110ms);
}

.listing-skel__line::after {
  animation-duration: 1.6s;
  animation-delay: calc(var(--skel-i) * 110ms + 120ms);
}

/* ----------------------------------------------------------- keyframes ---- */
@keyframes skel-in {
  from { opacity: 0; transform: translateY(1.125rem) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes skel-sweep {
  0%        { transform: translate3d(-130%, 0, 0); }
  65%, 100% { transform: translate3d(130%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .listing-skel,
  .listing-skel__media,
  .listing-skel__media::after,
  .listing-skel__line::after {
    animation: none !important;
  }
  .listing-skel        { opacity: 1; }
  .listing-skel__media { background-image: none; background-color: var(--skel-base); }
  .listing-skel__media::after,
  .listing-skel__line::after { display: none; }
}