/* ============================================================
   TALENTUM — Section 2 : Talents (Step 2.1)
   Layout, subtext, grille 8 cards, stagger reveal.
   ============================================================ */

#section-talents {
  width: 100%;
  background: var(--color-bg-primary);
  padding: 4px 0 var(--space-2xl);
  overflow-x: hidden;
}

.section-talents__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem);
}

/* ----------------------------------------------------------------
   Subtext — italique, centré, delay après la cascade du titre
   ---------------------------------------------------------------- */

.section-talents__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 600px;
  margin: var(--space-lg) auto 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
  transition-delay: 0.4s;
}

#section-talents.is-revealed .section-talents__subtext {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   Grille 8 talent cards
   ---------------------------------------------------------------- */

.section-talents__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (max-width: 1023px) {
  .section-talents__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .section-talents__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  /* Bloc image (parens + photo) aligné avec les mots sur mobile */
  #section-talents .section-title .ornament-group {
    transform: translateY(-10px);
  }
}

/* ----------------------------------------------------------------
   Stagger reveal des cards — un seul observer sur la grille
   ---------------------------------------------------------------- */

.section-talents__grid .talent-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s var(--ease-expo-out), transform 1s var(--ease-expo-out);
}

.section-talents__grid.is-revealed .talent-card { opacity: 1; transform: translateY(0); }
.section-talents__grid.is-revealed .talent-card:nth-child(1) { transition-delay: 0s;     }
.section-talents__grid.is-revealed .talent-card:nth-child(2) { transition-delay: 0.08s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(3) { transition-delay: 0.16s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(4) { transition-delay: 0.24s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(5) { transition-delay: 0.32s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(6) { transition-delay: 0.40s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(7) { transition-delay: 0.48s;  }
.section-talents__grid.is-revealed .talent-card:nth-child(8) { transition-delay: 0.56s;  }

/* ----------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .section-talents__subtext {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .section-talents__grid .talent-card {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .section-talents__grid.is-revealed .talent-card {
    transition-delay: 0s;
  }
}