/* Variables pour l'animation de soulignement */
:root {
  --speed: .24s;
  --easing: ease-in-out;
  --offset: -2; /* Ajuste la position verticale du trait. Négatif = sous le texte. */
}

/* --- Styles pour l'effet de soulignement --- */

/* Rendre les liens du menu "relatifs" pour positionner le SVG */
.menu-link {
  position: relative;
  transition: color var(--speed) ease; /* Ajout de la transition de couleur */
}

/* Changement de couleur au survol pour le texte et le trait */
.menu-link:not(.active):hover {
  color: #e55050;
}

/* Bibliothèque de symboles SVG (cachée) */
.symbol-library {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Conteneur pour le SVG de soulignement */
.underline-svg {
  --path-distance: var(--offset, 10);
  position: absolute;
  bottom: calc(var(--path-distance) * 1px);
  left: 0;
  width: 100%;
  height: 12px;
  pointer-events: none;
  opacity: 0;
}

.underline-svg svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.underline-svg path {
  stroke: currentColor; /* Le trait prend la couleur du texte (donc #e55050 au survol) */
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
  --path-length: 1000; /* Valeur par défaut, sera calculée par JS */
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
}

/* Animations d'entrée et de sortie */
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}
@keyframes drawOut {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: calc(var(--path-length) * -1); }
}

/* Déclenchement des animations au survol */
.menu-link:hover .underline-svg { 
  opacity: 1; 
}
.menu-link:hover .underline-svg path { 
  animation: drawIn calc(var(--speed) * 2) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}
.menu-link:not(:hover) .underline-svg path { 
  animation: drawOut 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: 0.1s; 
}