/* Uto’Pistes — le titre grandit, puis son trait se dessine une seule fois.
   Le titre reste éditable dans l’administration. Seule sa partie en italique
   reçoit l’effet ; les dimensions du texte ne sont jamais animées. */

/* Le titre a sa propre apparition, indépendante du script de défilement.
   Il reste également lisible lorsque JavaScript est désactivé. */
.home-page .hero .hero-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.home-page #hero-title em {
  position: relative;
  display: inline-block;
  max-width: 100%;
  transform-origin: left bottom;
}

/* Un trait courbe, sans espace ajouté au texte ni à la grille de la page. */
.home-page #hero-title em::after {
  content: "";
  position: absolute;
  right: .04em;
  bottom: -.09em;
  left: .02em;
  height: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C72 5 158 6 295 11' fill='none' stroke='%23efad3f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Pas de boucle, pas de relance au défilement ou au survol.
   Sans autorisation de mouvement, le titre et son trait sont déjà en place. */
@media (prefers-reduced-motion: no-preference) {
  .home-page #hero-title {
    animation: uto-title-appear .65s ease-out .05s 1 backwards;
  }

  .home-page #hero-title em {
    animation: uto-title-grow 1s cubic-bezier(.22,.7,.3,1) .2s 1 backwards;
  }

  .home-page #hero-title em::after {
    animation: uto-title-underline .8s ease-in-out 1.2s 1 backwards;
  }
}

@keyframes uto-title-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes uto-title-grow {
  0% { transform: scale(.94); }
  75% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes uto-title-underline {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}