* {
  font-family: Century-Gothic, Verdana, Helvetica, sans-serif;
}
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15em 1em;          /* padding vertical minimal */
  background-color: #1e1e1e;     /* noir doux / anthracite */
  gap: 1em;
  flex-wrap: wrap;
  border-bottom: none;           /* pas de bordure */
}
body {
  margin: 0;
  padding: 0;
}
/* Titre */
.topnav p {
  margin: 0;
  font-size: 1.05em;             /* texte légèrement plus gros pour lisibilité */
  font-weight: 500;
  color: #e0e0e0;
  white-space: nowrap;
}

/* Conteneur des liens et du logo */
.topnav-right {
  display: flex;
  align-items: center;
  gap: 1em;                      /* espace suffisant entre boutons */
  flex-wrap: wrap;
}

/* Liens de navigation */
.topnav a {
  text-decoration: none;
  color: #9fe0b0;
  background-color: #2a2a2a;
  padding: 0.25em 1.8em;         /* très compact verticalement, large horizontalement */
  border: none;
  border-radius: 5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-size: 1em;                /* texte lisible */
  transition: all 0.2s ease;
}

.topnav a:hover {
  background-color: #3cb371;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 5px rgba(60, 179, 113, 0.5);
}

/* Lien actif */
.topnav a.active {
  background-color: #3cb371;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(60, 179, 113, 0.5);
}

/* Logo */
.topnav img {
  height: 32px;                  /* légèrement plus petit pour compacter */
  filter: brightness(0) invert(0.9);
}