.header_page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #d1d1d1;
  text-align: center; /* Centre le texte et les éléments */
  font-family: 'Barlow Semi Condensed', sans-serif;

}

.header_page img {
  width: 250px; /* Taille par défaut pour les logos */
  margin-top: -150px;
  margin-bottom: 50px;
  transition: width 0.3s ease; /* Transition fluide pour les changements de taille */
}
  
.header_page hr {
  width: 25%;
  height: 4px;
  border: none;
  background-color: rgba(209, 209, 209, 0.24);
  margin-top: 80px;
  margin-bottom: 25px;
  transition: width 0.3s ease;
}

.header_page h1 {
  margin-top: -20px;
  font-size: 4em; /* Taille par défaut */
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  transition: font-size 0.3s ease;
}

.header_page span {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-size: 2em; /* Taille par défaut */
  transition: font-size 0.3s ease;
}


@media (max-width: 425px) {
  .header_page img {
    width: 100px; /* Réduit la taille du logo */
  }
  
  .header_page h1 {
    font-size: 2.5em; /* Réduit la taille du titre */
  }

  .header_page span {
    font-size: 1.5em; /* Réduit la taille du sous-titre */
  }

  .header_page hr {
    width: 50%; /* Augmente la longueur de la ligne pour correspondre à la taille réduite */
  }
}

@media (max-width: 768px) {
  .header_page img {
    width: 120px; /* Taille intermédiaire pour les logos */
  }

  .header_page h1 {
    font-size: 3em; /* Taille intermédiaire pour le titre */
  }

  .header_page span {
    font-size: 1.75em; /* Taille intermédiaire pour le sous-titre */
  }

  .header_page hr {
    width: 40%; /* Ajuste la taille de la ligne */
  }
}

@media (max-width: 1024px) {
  .header_page img {
    width: 130px; /* Logo légèrement plus grand */
  }

  .header_page h1 {
    font-size: 3.5em; /* Taille ajustée pour les petits ordinateurs */
  }

  .header_page span {
    font-size: 1.8em; /* Taille ajustée pour les sous-titres */
  }

  .header_page hr {
    width: 35%; /* Ajuste la ligne */
  }
}

@media (max-width: 1440px) {
  .header_page img {
    width: 140px; /* Taille du logo légèrement ajustée */
  }

  .header_page h1 {
    font-size: 2.4em; /* Taille du titre légèrement réduite */
  }

  .header_page span {
    font-size: 1.9em; /* Taille du sous-titre ajustée */
  }

  .header_page hr {
    width: 30%; /* Ajustement de la ligne */
  }
}

@media (min-width: 2560px) {
  .header_page img {
    width: 200px; /* Augmente la taille du logo pour les très grands écrans */
  }

  .header_page h1 {
    font-size: 5em; /* Augmente la taille du titre */
  }

  .header_page span {
    font-size: 2.5em; /* Augmente la taille du sous-titre */
  }

  .header_page hr {
    width: 20%; /* Réduit légèrement la longueur de la ligne */
  }
}