/*---------------------------------------------------------------------------------
Pure CSS animated text rotator - Credit: jerome@vadon.fr
---------------------------------------------------------------------------------*/

.rotatingPainpoints {
  --per: 2.5s;   /* durée par mot */
  --n: 16;       /* nombre total */
  position: relative;          /* IMPORTANT pour le positionnement des spans */
  text-align: center;
  min-height: 1.6em;           /* anti-CLS */
  line-height: 1.2;
  font-family: var(--gvid-wnvkr7ir2q), sans-serif;
  color: var(--gcid-53054839-b83d-4ef0-8659-8a010e6148fd);
}
.rotatingPainpoints span {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0;
  opacity: 0;
  font-size: 26px;
  animation: rotate-text calc(var(--n) * var(--per)) ease-in-out infinite both;
  animation-delay: calc((var(--i) - 1) * var(--per));
  will-change: opacity, transform;
}
@keyframes rotate-text {
  0%     { opacity: 0; transform: translate3d(0, 0.8em, 0); }
  0.8%   { opacity: 1; transform: translate3d(0, 0, 0); }
  5.7%   { opacity: 1; transform: translate3d(0, 0, 0); }
  6.25%  { opacity: 0; transform: translate3d(0, -0.35em, 0); }
  100%   { opacity: 0; transform: translate3d(0, -0.35em, 0); }
}
@media (min-width: 768px) {
  .rotatingPainpoints span { /* font-size: 40px; si tu veux plus grand */ }
}