/* ==========================================================================
   SECTION — NOS CHIFFRES CLÉS (Figma node 4:986)
   Dark teal gradient bg, white title + 3 white stat cards centered
   ========================================================================== */

.cap-ncc {
  background: linear-gradient(160deg, #003348 0%, #005c81 60%, #004a6e 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cap-ncc__inner {
  max-width: 1216px;
  margin: 0 auto;
  padding-left: var(--cap-site-gutter-x, 24px);
  padding-right: var(--cap-site-gutter-x, 24px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Header ───────────────────────────────────────────────── */

.cap-ncc__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cap-ncc__title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
}

.cap-ncc__subtitle {
  font-size: 16px;
  color: #61c8f0;
  margin: 0;
  line-height: 1.5;
}

/* ── Cards row ────────────────────────────────────────────── */

.cap-ncc__cards {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.cap-ncc__card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
  flex: 0 0 256px;
}

/* Distinct reveal style for chiffres clés cards (pop-in with tiny tilt). */
.cap-ncc--motion-ready .cap-ncc__card {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.92) rotateX(8deg);
  transform-origin: center bottom;
  will-change: opacity, transform;
}

.cap-ncc--motion-ready .cap-ncc__card.is-inview {
  animation: cap-ncc-card-pop 780ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--cap-ncc-delay, 0ms);
}

@keyframes cap-ncc-card-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.92) rotateX(8deg);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.03) rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  }
}

/* ── Icon badge ───────────────────────────────────────────── */

.cap-ncc__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
}

.cap-ncc__card-icon--yellow {
  background-color: #ffd500;
  color: #003348;
}

.cap-ncc__card-icon--blue {
  background-color: #61c8f0;
  color: #003348;
}

.cap-ncc__card-icon--yellow-light {
  background-color: #ffeb85;
  color: #003348;
}

/* ── Number ───────────────────────────────────────────────── */

.cap-ncc__card-number {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: #003348;
  line-height: 1;
}

/* ── Label ────────────────────────────────────────────────── */

.cap-ncc__card-label {
  display: block;
  font-size: 14px;
  color: #6a7282;
  line-height: 1.4;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 991px) {
  .cap-ncc {
    padding: 64px 0;
  }

  .cap-ncc__inner {
    gap: 40px;
    padding-left: var(--cap-site-gutter-mobile-x, 16px);
    padding-right: var(--cap-site-gutter-mobile-x, 16px);
  }

  .cap-ncc__cards {
    flex-wrap: wrap;
    gap: 16px;
  }

  .cap-ncc__card {
    flex: 1 1 200px;
  }
}

@media screen and (max-width: 576px) {
  .cap-ncc__cards {
    flex-direction: column;
  }

  .cap-ncc__card {
    flex: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-ncc--motion-ready .cap-ncc__card,
  .cap-ncc--motion-ready .cap-ncc__card.is-inview {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}