/* ============================================================
   TÉMOIGNAGE
   Pleine hauteur : en descendant on ne voit que lui. Le texte
   passe du gris au noir, caractère par caractère, au scroll.
   Fond : grille de points très pâle, comme la référence Attio.
   ============================================================ */

  .quote { position: relative; }

  /* Piste : sa hauteur est la course du scroll pendant laquelle le texte se révèle. */
  .quote__track { height: 230vh; }

  /* Scène : épinglée le temps de la course, elle occupe tout l'écran. */
  .quote__stage {
    position: sticky; top: 0;
    min-height: 100svh;
    display: grid; place-items: center;
    background-color: var(--surface-page);
    /* Grille de points : 1px, très pâle, sans masque — elle couvre tout. */
    background-image: radial-gradient(rgba(74, 58, 92, 0.16) 1px, transparent 1.1px);
    background-size: 26px 26px;
  }

  .quote__fig { margin: 0; text-align: center; }

  .quote__text {
    margin: 0 auto; max-width: 27ch; quotes: none;
    text-wrap: balance;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.625rem, 1rem + 2.6vw, 2.875rem);
    line-height: var(--lh-title);
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }

  /* Une fois découpé par le script : tout part en gris, chaque caractère
     passe au noir quand le scroll l'atteint. */
  .quote__text.is-split { color: #B9B1C2; }
  .quote__w { white-space: nowrap; }
  .quote__c { transition: color 0.25s ease; }
  .quote__c.is-on { color: var(--text-primary); }

  .quote__by {
    margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.8125rem; line-height: 1.5;
  }
  .quote__name { font-weight: 500; color: var(--text-primary); font-style: normal; }
  .quote__role { color: var(--text-muted); }

  @media (max-width: 620px) {
    .quote__text { max-width: 100%; }
    .quote__track { height: 200vh; }
  }

  /* Mouvement réduit : pas d'épinglage, pas de course, le texte est simplement là. */
  @media (prefers-reduced-motion: reduce) {
    .quote__track { height: auto; }
    .quote__stage { position: static; min-height: 0; padding-block: var(--section-gap); }
  }