  h2 {
	top: 10px;  /* Positionné à 1rem du haut de la popup */
  font-size: 1.4rem;
  color: #00ffff;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 5px #00ffffcc;
  font-family: 'Press Start 2P', cursive;

  text-align: center;
}

/* Popup et popup-liens masquées par défaut */
  .popup, .popup-liens {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;              /* caché par défaut */
    background: rgba(0,0,0,0.7);
    align-items: center;        /* centrer verticalement */
    justify-content: center;    /* centrer horizontalement */
    z-index: 1000;
  }

  /* Quand on ajoute .open, on affiche en flex (centré) */
  .popup.open, .popup-liens.open {
    display: flex;
  }

  /* Style intérieur identique pour les deux */
  .popup-inner, .popup-liens-inner {
   background: #1e1a35;
  padding: 1.5rem;
  border-radius: 8px;
  max-height: 95vh; /* plus haut */
  max-width: 98vw;  /* plus large */
  min-width:25vw;
  overflow-y: auto;
  }


.card-system {
  min-height: 80px;
    display: flex;
  align-items: center;        /* centrage vertical */
  justify-content: center;   /* centrage horizontal */
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}
.card-system:hover{
	 cursor: pointer;
}

.card-platform {
	  min-height: 80px;
    display: flex;
  align-items: center;        /* centrage vertical */
  justify-content: center;   /* centrage horizontal */
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  background-color: #1a1a2e;    /* ou ta couleur principale */
  border: 1px solid #e94560;    /* ou ta couleur secondaire */
  border-radius: 0.75rem;       /* coins arrondis */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-platform:hover {
	 cursor: pointer;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

  /* Responsive spécifique */
@media (max-width: 576px) {
  .popup-inner, .popup-liens-inner {
    width: 95vw;
    padding: 1rem 0.75rem;
  }

  .card-system {
    font-size: 0.9rem;
    padding: 1rem 0.5rem;
  }

  .bloc-li {
    font-size: 0.9rem;
  }

  .dl_button {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
  }

  .reveal-key {
    margin-left: 0.5rem;
  }
}


#toast.show {
  display: block;
  animation: fadeInOut 2.5s;
}
