.popup-campaignPopup {
  width: min(500px, calc(100% - 50px));
  border-radius: 8px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--red);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index : 9999999;
  overflow: visible; /* Cela permet au bouton de fermeture de déborder */
}


.popup-close-campaignPopup {
  position: absolute; /* Positionnement par rapport au conteneur de la popup */
  top: 0;
  right: 0;
  transform: translate(50%, -50%); 
  background-color: white; /* Fond blanc pour le bouton de fermeture */
  color: black; /* Couleur de la croix */
  height: 30px; /* Hauteur du bouton de fermeture */
  width: 30px; /* Largeur du bouton de fermeture */
  border-radius: 50%; /* Rend le bouton circulaire */
  text-align: center; /* Centre la croix horizontalement */
  line-height: 30px; /* Centre la croix verticalement */
  cursor: pointer; /* Affiche un curseur de pointeur pour indiquer la fonctionnalité cliquable */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optionnel : ajoute une ombre pour un effet de profondeur */
  z-index : 99999999;
  font-size: 20px; /* Taille de la police pour la croix */
  font-weight: bold; /* Rend la croix plus épaisse */
  user-select: none; /* Empêche la sélection de la croix lors du clic */
}


.popup-header-campaignPopup {
  background-color: var(--red);
  color: white;
  padding: 40px 0; /* Ajoutez un peu de padding pour de l'espace autour du texte */
  text-align: center;
  font-size: 24px;
  font-family: 'Oswald', sans-serif; /* Utilisation de la police Oswald */
  position: relative; 
}

.popup-header-campaignPopup::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), var(--red) 70%);
  pointer-events: none; /* Permet aux clics de passer à travers */
}

.header-title {
  position: relative; /* Pour positionner le texte du bas par rapport à ce conteneur */
  display: inline-block; /* Centre le conteneur '.header-title' dans '.popup-header' */

}

.header-title .title-outline {
  font-family: 'Oswald', sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px white; /* Contours en blanc */
  font-size: 60px; /* Taille de la police pour 'Grande' */
  line-height: 1; /* Empêche les espaces supplémentaires au-dessus et en dessous du texte */
  white-space: nowrap; /* S'assure que le texte ne passe pas à la ligne */
  font-weight: bold;
}

.header-title .title-fill {
  font-family: 'Oswald', sans-serif;
  color: white;
  font-size: 60px; /* Taille de la police pour 'Campagne' */
  line-height: 1;
  white-space: nowrap; /* S'assure que le texte ne passe pas à la ligne */
  display: block; /* Affiche 'Campagne' sur une nouvelle ligne en dessous de 'Grande' */
  padding-top: 5px; /* Ajustez selon l'espacement désiré entre 'Grande' et 'Campagne' */
  font-weight: bold;
}

.popup-body-campaignPopup {
  padding: 20px;
  text-align: center;
  background: linear-gradient(30deg, #bcdbd5, var(--blue-very-light));
}

.objective-campaignPopup, .objective-target-campaignPopup {
  margin-bottom: 15px;
  font-size: 20px;
}

.objective-campaignPopup {
  font-family: 'Oswald', sans-serif;
  font-size: 60px;
  font-weight: bold;
  color: #2D3D62;
}

.timer-campaignPopup {
  color: black;
  padding: 20px;
  justify-content: space-around;
  align-items: center;
  display: flex;
  justify-content: center;
}


.time-container-campaignPopup {
  text-align: center;
  margin: 0 10px;
}

.time-campaignPopup {
  font-size: 32px;
  font-weight: bold;
  line-height: 1; /* Empêche les espaces supplémentaires au-dessus et en dessous du texte */
}

.unit-campaignPopup {
  font-size: 16px;
}

.objective-target-campaignPopup {
  background-color: var(--blue);
  padding: 15px;
  color: white;
  font-size: 35px;
  border-radius : 10px;
  width: auto;
  display: inline-block; /* Cela permet à l'élément de n'occuper que la largeur nécessaire */
  margin: 0 auto; /* Cela centre l'élément s'il est dans un conteneur de bloc */
  text-align: center; 
  position: relative;
  z-index: 0;
}

.objective-target-campaignPopup .text-container-campaignPopup  {
  position: relative; /* Positionnez le conteneur de texte relativement pour utiliser z-index */
  z-index: 1; /* Plus haut que le pseudo-élément ::before */
  color: white; /* Ou toute autre propriété de style de texte nécessaire */
  font-size: 45px; /* Taille de la police */
  /* Aucun besoin de background ou de padding ici, ils sont déjà définis sur le parent */
  font-weight: bold;
}

.objective-target-campaignPopup::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    #2D3D62 3px,
    #3d5387 4px
  );
  background-size: 8px 8px;
  pointer-events: none; /* Assurez-vous que les clics passent à travers cette couche */
  z-index: 0;
  border-radius: 10px;
}


.overlay-campaignPopup {
  position: fixed; /* Fixe l'overlay par rapport à la fenêtre du navigateur */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Couleur de fond grisé avec une transparence */
  z-index : 9999998;
  display: none; /* Cache l'overlay par défaut */
}

/* Ajoutez cette classe à votre balise <body> via JavaScript pour désactiver le défilement */
.no-scroll {
  overflow: hidden;
  height: 100%;
}