Bloc HTML/CSS pur sur fond blanc utilisant la police système Apple (SF). Le texte affiche un dégradé fluide animé via background-clip, facilement personnalisable (couleurs, direction, vitesse) par variables CSS, responsive et respect de prefers-reduced-motion.

<!-- Texte Apple + dégradé animé (frozen-like) -->
<div class="ag-wrap">
  <h1 class="ag-text">Design épuré, performance maximale</h1>
</div>

<style>
  /* Fond blanc + stack "police d'Apple" */
  .ag-wrap{
    --ag-duration: 9s;             /* vitesse de l'animation */
    --ag-angle: 90deg;             /* direction du dégradé */
    --ag-colors: #0ea5e9, #8b5cf6, #ec4899, #0ea5e9; /* couleurs (boucle propre) */
    display:grid; place-items:center;
    min-height: 40vh; padding: 32px; background:#fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", Arial, system-ui, sans-serif;
  }

  .ag-text{
    margin:0;
    font-weight: 700;
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: .2px;
    line-height: 1.08;
    /* Dégradé animé appliqué au texte */
    background-image: linear-gradient(var(--ag-angle), var(--ag-colors));
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ag-shift var(--ag-duration) ease-in-out infinite;
    display: inline-block; /* garantit que l'animation suit le bloc texte */
  }

  @keyframes ag-shift{
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
  }

  /* Accessibilité : si l’utilisateur préfère moins d’animations */
  @media (prefers-reduced-motion: reduce){
    .ag-text{ animation: none; background-position: 50% 50%; }
  }

  /* Fallback si background-clip n'est pas supporté */
  @supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .ag-text{ color:#111; background:none; }
  }
</style>