* {
    /*font-family: "Permanent Marker", cursive;*/
    /* font-family: "Luckiest Guy", cursive; */
    font-family: "Fjalla One", sans-serif;
  }
  html,
  body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  }
  
  .landing {
    background-image: url(img/foulard.jpg);
  }
  
  .active-link::after {
  background-color: #FFF;
  }
  
  #mobile-menu {
  transition: max-height 0.3s ease-in-out;
  margin-top: 110px;
  }
  
  .title-nav {
  color: white;
  text-shadow: 
    3px 3px 0 #0000,
    -1px -1px 0 #0000,
    1px -1px 0 #0000,
    -1px 1px 0 #0000;
  }
  
  .title {
  color: white;
  text-shadow: 
    3px 3px 0 #FF0000,
    -1px -1px 0 #FF0000,
    1px -1px 0 #FF0000,
    -1px 1px 0 #FF0000;
  }
  
  /* Classe personnalisée pour le soulignement */
  .underline-custom {
  position: relative;
  }
  
  .underline-custom::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* Ajuster pour l'espacement sous le texte */
  width: 0;
  height: 3px; /* Épaisseur du soulignement */
  background-color: #FFF; /* Couleur du soulignement */
  transition: width .2s;
  border-radius: 4px;
  }
  
  .underline-custom:hover::after, .underline-custom.active-link::after {
  width: 100%;
  }

  .pin:after {
    content: '';
    position: absolute;
    width: 20px; /* Largeur du reflet */
    height: 20px; /* Hauteur du reflet */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%); /* Dégradé blanc pour effet de brillance */
    top: 5px; /* Ajustez la position du reflet */
    left: 70%; /* Déplacez le reflet légèrement vers la droite */
    transform: translateX(-50%); /* Ajustement pour centrer complètement */
    z-index: 21; /* Mettre le reflet au-dessus de l'épingle */
  }