/**
 * Accueil — #ressources-it-ia : trois fiches C2C. Perf : ::before statique ; une seule animation (::after).
 * contain: paint sur la carte ; transform+opacity uniquement sur le trait ; pause hors viewport / onglet.
 */
#ressources-it-ia .ext-card.ext-card--fx-c2c-warlight {
  --wl-x-pct: 50%;
  --wl-violet-pct: 18%;
  --wl-orange-hot: 72%;
  --wl-pool-opacity: 0.12;
  --wl-blade-period: 5.5s;
  --wl-delay-blade: 0s;
  --wl-angle: 102deg;
  --wl-sx: 18%;
  --wl-sy: 40%;
  --wl-mx: 50%;
  --wl-my: 48%;
  --wl-ex: 82%;
  --wl-ey: 55%;
  --wl-peak: 0.22;
  --wl-peak-mid: 0.12;
  overflow: hidden;
  contain: paint;
}

#ressources-it-ia .ext-card.ext-card--fx-c2c-warlight > * {
  position: relative;
  z-index: 1;
}

/* Halo bas : statique (pas d’@keyframes = moins de travail composite par frame). */
#ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -14%;
  height: 62%;
  pointer-events: none;
  border-radius: 55% 55% 0 0 / 42% 42% 0 0;
  transform-origin: var(--wl-x-pct, 50%) 100%;
  background: radial-gradient(
    86% 70% at var(--wl-x-pct, 50%) 100%,
    color-mix(in srgb, #6d28d9 var(--wl-violet-pct, 18%), #ea580c) 0%,
    color-mix(in srgb, #f97316 var(--wl-orange-hot, 72%), transparent) 42%,
    transparent 72%
  );
  opacity: var(--wl-pool-opacity, 0.12);
}

/* Seul calque animé : trait léger (translate3d + opacity). */
#ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    var(--wl-angle, 102deg),
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, #7c3aed 22%, rgba(249, 115, 22, 0.42)) 50%,
    transparent 66%,
    transparent 100%
  );
  opacity: 0;
  animation: c2cWarBlade var(--wl-blade-period, 5.5s) ease-out var(--wl-delay-blade, 0s) infinite;
}

#ressources-it-ia.c2c-warlight--active .ext-card.ext-card--fx-c2c-warlight::after {
  animation-play-state: running;
}

#ressources-it-ia:not(.c2c-warlight--active) .ext-card.ext-card--fx-c2c-warlight::after {
  animation-play-state: paused;
}

html.dp-anim-paused #ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::after {
  animation-play-state: paused;
}

#ressources-it-ia .ext-card.ext-card--fx-c2c-warlight.ext-card--fx-c2c-warlight--reset-anim::after {
  animation: none !important;
}

@keyframes c2cWarBlade {
  0%,
  70%,
  100% {
    opacity: 0;
    transform: translate3d(var(--wl-sx), var(--wl-sy), 0);
  }

  78% {
    opacity: var(--wl-peak, 0.22);
    transform: translate3d(var(--wl-mx), var(--wl-my), 0);
  }

  88% {
    opacity: var(--wl-peak-mid, 0.12);
    transform: translate3d(var(--wl-ex), var(--wl-ey), 0);
  }

  94% {
    opacity: 0;
    transform: translate3d(var(--wl-ex), var(--wl-ey), 0);
  }
}

html[data-theme="light"] #ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::before {
  background: radial-gradient(
    86% 70% at var(--wl-x-pct, 50%) 100%,
    color-mix(in srgb, #5b21b6 var(--wl-violet-pct, 18%), #ea580c) 0%,
    color-mix(in srgb, #fb923c var(--wl-orange-hot, 72%), transparent) 44%,
    transparent 74%
  );
}

html[data-theme="light"] #ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::after {
  background: linear-gradient(
    var(--wl-angle, 102deg),
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, #6d28d9 18%, rgba(234, 88, 12, 0.36)) 50%,
    transparent 66%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  #ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::after {
    animation: none !important;
  }

  #ressources-it-ia .ext-card.ext-card--fx-c2c-warlight::after {
    opacity: 0;
    transform: none;
  }
}