Tooltip

<style>
.bn-tooltip-demo {
  position: relative;
  display: inline-block;

  padding: 5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-tooltip-trigger {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.3);
  background: none;
  color: #E6E4DD;
  font-size: 0.85rem;
  cursor: help;
}

.bn-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);

  width: 200px;
  padding: 0.9rem 1rem;

  background: #050808;
  border: 1px solid rgba(230, 228, 221, 0.15);
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bn-tooltip strong {
  display: block;
  color: #E6E4DD;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

.bn-tooltip span {
  color: #979793;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Le déclencheur du survol ET du focus clavier — accessible sans
   une ligne de JS */
.bn-tooltip-trigger:hover ~ .bn-tooltip,
.bn-tooltip-trigger:focus-visible ~ .bn-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

</style>

<div class="bn-tooltip-demo">
  <button type="button" class="bn-tooltip-trigger" aria-describedby="bn-tooltip-1">?</button>

  <div id="bn-tooltip-1" class="bn-tooltip" role="tooltip">
    <strong>Exploration</strong>
    <span>Chaque projet est une exploration de l'inconnu et de l'essentiel.</span>
  </div>
</div>