/* ============================================
   IAF Quote — citation centrée (H2 serif) + CTA optionnel
   ============================================ */

:root {
  /* Respiration verticale autour du bloc */
  --iaf-quote-padding-block: 160px;
  --iaf-quote-padding-inline: 32px;

  /* Largeur de ligne confortable pour la citation */
  --iaf-quote-max-width: 820px;

  /* Espace entre citation et CTA */
  --iaf-quote-gap: 40px;
}

.iaf-quote {
  width: 100%;
  box-sizing: border-box;
  padding: var(--iaf-quote-padding-block) var(--iaf-quote-padding-inline);
  display: flex;
  justify-content: center;
  background-color: transparent;
}

.iaf-quote__inner {
  width: 100%;
  max-width: var(--iaf-quote-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--iaf-quote-gap);
}

.iaf-quote__text {
  margin: 0;
  color: var(--iaf-canvas-heading);
  text-wrap: balance;
}

.iaf-quote__cta {
  /* Le composant global .iaf-cta fournit déjà le style (marker + underline).
     On annule seulement `align-self: flex-start` pour que le CTA reste centré. */
  align-self: auto;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  :root {
    --iaf-quote-padding-block: var(--iaf-layout-padding-block-tablet, 64px);
    --iaf-quote-padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-quote-gap: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --iaf-quote-padding-block: 96px;
    --iaf-quote-padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    --iaf-quote-gap: 32px;
  }
}