@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');


.hauteurMarge{

margin-top:0px;
}



.section-title2 {
	margin-top: 40px;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #34495e;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  opacity: 0; /* On garde le texte invisible au début */
  animation: fadeInTitle 1s ease forwards, changeColor 2s ease-in-out forwards; /* Ajouter l'animation de couleur */
}

.section-title2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%; /* Commence avec une largeur de 0% */
  height: 2px;
  background-color: #3573619E;  /* Couleur de la sous-ligne */
  border-radius: 5px;
  animation: underlineAnimation 1.5s ease forwards 0.5s; /* Déclenche l'animation de la sous-ligne après un délai */
}

@keyframes fadeInTitle {
  100% {
	 
    opacity: 1; /* Rendre le texte visible */
  }
}



@keyframes changeColor {
  0% {
    color: #35736152; /* Couleur initiale du titre */
  }
  50% {
    color: #35736182; /* Couleur intermédiaire (orange) */
  }
  100% {
    color: #357361C4; /* Couleur finale du titre (bleu) */
  }
}




@keyframes underlineAnimation {
  0% {
    width: 0%; /* Commence avec une largeur de 0% */
  }
  100% {
    width: 100%; /* S'étend jusqu'à 100% de la largeur du titre */
  }