/* === Image d'en-tête avec fond responsive === */

/* Application de l'image de fond à l'en-tête */
.site-header {
  background-image: url("https://blacklineevent.fr/wp-content/uploads/2023/01/logo-blackline-event-2023.jpg");
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  height: 500px;
	width: 100%;
  position: relative;
  z-index: 1; /* S'assurer que l'image est derrière le menu */
}

/* Cache l'image HTML si elle existe dans le header */
.site-header img {
  display: none !important;
}

/* Décalage du contenu sous l'en-tête */
.site-content,
.content-area {
  margin-top: 10px; /* Ajuste selon la hauteur du menu */
}

/* === Image de fond spécifique à la page d'accueil === */
.home {
  background-image: url("https://blacklineevent.fr/wp-content/uploads/2023/01/ble-.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed; /* Pour rendre l'image de fond fixe */
  height: 100vh; /* Hauteur de la page d'accueil à 100% de l'écran */
}

/* === Ajustement de l'image d'en-tête sur mobile === */
@media screen and (max-width: 768px) {
	.site-content,
	.content-area {
		margin-top: 30px;
	}
  .site-header {
    height: 50vh; /* Hauteur ajustée à 50% de l'écran sur mobile */
    background-size: contain; /* Change ici à 'contain' pour éviter toute coupure de l'image */
    background-position: top center; /* Garde le focus sur la partie supérieure de l'image */
    z-index: -1; /* Assure que l'image se trouve derrière le menu sur mobile */
  }

  /* Menu mobile */
  .main-navigation {
    position: relative !important;
    z-index: 10; /* Assure que le menu est devant l'image sur mobile */
    background-color: rgba(255, 255, 255, 0.8); /* Rendre le fond du menu semi-transparent pour voir l'image derrière */
  }

  /* Forcer la visibilité du contenu sous le menu */
  .site-content,
  .content-area {
    margin-top: 80px; /* Ajuste la marge pour le contenu sous l'en-tête */
  }

  /* Pour que l'image sur la page d'accueil soit visible sur mobile */
  .home {
    background-size: contain; /* Assure que l'image est bien contenue et visible */
    background-position: top center;
    height: 100vh; /* Hauteur de la page d'accueil à 100% de l'écran mobile */
  }
}

/* Cacher le menu principal sur mobile */
@media screen and (max-width: 768px) {
  .main-navigation,
  .menu-toggle,
  .menu-icon {
    display: none !important;
  }
@media screen and (min-width: 769px) {
  /* Forcer une marge entre le menu et l’image d’en-tête */
  header#masthead {
    margin-bottom: 10px !important;
  }

  .site-header {
    margin-top: 90px !important; /* décalage de l’image sous le menu */
  }

  /* S’assurer que le menu est bien en position fixe */
  .main-navigation {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff; /* couleur du fond du menu */
  }
}