/* ============================================================
   TALENTUM — Section 6 : Pourquoi Talentum (Step 2.6)
   data-theme="dark" — fond continu avec Section 5, piloté par bg-layer.
   ============================================================ */

#section-pourquoi {
  padding: calc(var(--space-xl) - 60px) clamp(1rem, 4vw, 4rem) var(--space-2xl);
}

.section-pourquoi__inner {
  max-width: 1600px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   Override titre pilier — gold, cohérent avec les numéros
   components.css (Step 2.0) intouchable, surcharge scopée ici
   ---------------------------------------------------------------- */

#section-pourquoi .pillar-card__title {
  color: var(--color-accent-gold);
}

/* ----------------------------------------------------------------
   Grille des 3 piliers
   ---------------------------------------------------------------- */

.section-pourquoi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  align-items: start;
}

/* Tablet — 2 colonnes, 3e pilier centré sous les deux premiers */
@media (max-width: 1023px) {
  .section-pourquoi__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .section-pourquoi__grid .pillar-card:nth-child(3) {
    grid-column: 1 / span 2;
    justify-self: center;
    max-width: 480px;
    width: 100%;
  }
}

/* Mobile — 1 colonne, toutes les cards centrées identiques */
@media (max-width: 767px) {
  .section-pourquoi__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .section-pourquoi__grid .pillar-card {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-pourquoi__grid .pillar-card:nth-child(3) {
    grid-column: auto;
    justify-self: auto;
    max-width: 380px;
  }

  /* Bloc image (parens + photo) descendu de 10px sur mobile */
  #section-pourquoi .section-title .ornament-group {
    transform: translateY(-10px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
}