/* ==========================================================================
   HEADER PRINCIPAL - STYLE FRANC, STRUCTURÉ ET THÉÂTRAL
   ========================================================================== */
.header-nav a:hover {
  color: #e63946; /* Rouge Théâtre à la place de l'Or */
}
.main-header {
  height: 70px;
  position: relative;
  z-index: 100;
  font-family: Arial, sans-serif;
  /* L'overflow:hidden a été retiré d'ici pour laisser le menu mobile s'afficher en dessous */
}

/* Le fond et l'animation encapsulés pour ne pas déborder */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(167deg, rgb(1, 0, 14) 0%, rgb(3, 57, 117) 100%);
  overflow: hidden; /* Coupe uniquement les étoiles, pas la navigation */
  z-index: 1;
}

#shooting-stars, .stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Étoiles légères en arrière-plan */
.stars {
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="10" cy="30" r="1" fill="%23fff" opacity="0.8"/><circle cx="75" cy="15" r="1" fill="%23fff" opacity="0.5"/><circle cx="120" cy="80" r="1.5" fill="%23fff" opacity="0.9"/><circle cx="180" cy="45" r="1" fill="%23fff" opacity="0.6"/><circle cx="40" cy="140" r="1" fill="%23fff" opacity="0.7"/><circle cx="150" cy="160" r="1.2" fill="%23fff" opacity="0.4"/></svg>') repeat;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 40px;
  position: relative;
  z-index: 2; /* Passe au-dessus du background */
}

.site-title {
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
}

.header-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 25px;
}

.header-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: color 0.2s ease-in-out;
}

.header-nav a:hover {
  color: #f1c40f; /* Or de la direction artistique */
}

.header-right {
  display: flex;
  gap: 15px;
  align-items: center;
}

.social-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.burger-menu {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

/* ==========================================================================
   RESPONSIVE & AFFICHAGE MENU MOBILE DYNAMIQUE (.active)
   ========================================================================== */

@media (max-width: 950px) {
  .header-content {
    padding: 0 20px;
  }

  /* Réduction de la taille du titre pour éviter de casser le flux */
  .site-title {
    font-size: 16px;
    max-width: 80%;
  }

  .burger-menu {
    display: block;
  }

  /* Masque le menu de base sur mobile */
  .header-nav, 
  .header-right {
    display: none;
  }

  /* Activation du Menu Mobile au clic */
  .header-nav.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: linear-gradient(167deg, rgb(1, 0, 14) 0%, rgb(3, 57, 117) 100%);
    padding: 30px 0;
    align-items: center;
    border-bottom: 2px solid #000000; /* Cadre strict imposé par la DA */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5); /* Optionnel : détache le menu du corps de la page */
    z-index: 99;
  }
  
  .header-nav.active ul {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .header-right.active {
    display: flex;
    position: absolute;
    top: 310px; /* Aligné proprement sous les liens de navigation */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
}