/* Définition de la police */
@font-face {
  font-family: 'MyCustomFont';
  src: 
       url('fonts/DESIGNERRegular.woff2') format('woff2'),
       url('fonts/DESIGNER.otf') format('otf'),
       url('fonts/DESIGNERRegular.ttf') format('ttf'),
       url('fonts/DESIGNERRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Mise à jour des styles */
.writing-effect, .custom-font {
  font-family: 'MyCustomFont', sans-serif;
}


/* Styles généraux pour les classes utilisant la police DESIGNER */
.writing-effect, .custom-font {
  font-family: 'DESIGNER', sans-serif;
}

/* Effet d'écriture pour le texte */
.writing-effect {
  font-size: 5rem; /* Texte plus grand */
  font-weight: bold; /* Texte en gras */
  color: white; /* Couleur du texte */
  overflow: hidden; /* Cache le texte au départ */
  white-space: nowrap; /* Empêche le retour à la ligne */
  margin: 0 auto; /* Centrer horizontalement */
  text-align: center; /* Assure le centrage du texte */
  padding: 0; /* Pas de padding qui pourrait perturber la mise en page */
  line-height: 1.1; /* Ajuste la hauteur de ligne pour éviter de couper le texte */
  animation: typing 8s steps(30, end) forwards; /* Animation d'écriture progressive avec 'forwards' pour garder l'état final */
}

/* Animation de l'effet de frappe (écriture manuelle) */
@keyframes typing {
  from {
    width: 0; /* Texte caché au départ */
  }
  to {
    width: 100%; /* Longueur totale du texte ajustée automatiquement */
  }
}

/* Styles spécifiques pour les mobiles */
@media screen and (max-width: 768px) {
  .writing-effect {
    font-size: 3rem; /* Taille plus petite pour s'adapter à l'écran */
    font-family: 'DESIGNER', sans-serif; /* Ajoutez cette ligne pour la police sur mobile */
    color: white; /* Texte blanc sur mobile */
    position: relative; /* Permet un ajustement vertical */
    top: -50px; /* Remonte le texte vers le haut si nécessaire */
    line-height: 1.2; /* Ajuste la hauteur de ligne sur mobile pour éviter la coupure */
    width: 100%; /* Assure que le texte reste centré sur mobile */
    animation: typing 5s steps(20, end) forwards; /* Animation plus rapide pour mobile */
  }
}


/* Texte défilant en bas de la page */
.scrolling-text {
  font-size: 3rem; /* Ajustez la taille selon vos besoins */
  color: white; /* Texte en blanc */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Légère ombre */
  overflow: hidden;
  height: 40px; /* Hauteur de la zone de texte défilant */
  width: 100%;
  position: absolute;
  bottom: 0; /* Positionne le texte en bas de la section */
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour améliorer la lisibilité */
}

.scrolling-text p {
  margin: 0;
  padding: 0 10px; /* Espacement intérieur */
  white-space: nowrap; /* Empêche le retour à la ligne */
  animation: scrollText 20s linear infinite; /* Réduction de la durée de l'animation à 20 secondes */
}

/* Animation du texte défilant */
@keyframes scrollText {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Ajustement pour les mobiles */
@media screen and (max-width: 768px) {
  .scrolling-text {
    font-size: 1.5rem; /* Réduction de la taille du texte pour les écrans plus petits */
    height: 30px; /* Réduction de la hauteur pour s'adapter à la nouvelle taille du texte */
  }
}