Accordéon / FAQ

<style>
.bn-accordion {
  max-width: 560px;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;

  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bn-accordion__item {
  border: 1px solid rgba(230, 228, 221, 0.1);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.bn-accordion__item summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  cursor: pointer;
  list-style: none;
  color: #E6E4DD;
  font-size: 0.9rem;
}

.bn-accordion__item summary::-webkit-details-marker {
  display: none;
}

.bn-accordion__num {
  color: #5C6160;
  font-weight: 600;
  flex-shrink: 0;
}

.bn-accordion__q {
  flex: 1;
}

.bn-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.bn-accordion__icon::before,
.bn-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #979793;
  transform: translate(-50%, -50%);
}

.bn-accordion__icon::before {
  width: 12px;
  height: 1px;
}

.bn-accordion__icon::after {
  width: 1px;
  height: 12px;
  transition: opacity 0.2s ease;
}

/* La croix devient un simple tiret ("−") une fois ouvert : on cache
   la barre verticale de l'icône */
.bn-accordion__item[open] .bn-accordion__icon::after {
  opacity: 0;
}

.bn-accordion__item p {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(230, 228, 221, 0.08);

  color: #979793;
  font-size: 0.85rem;
  line-height: 1.6;
}

</style>

<div class="bn-accordion">
  <details class="bn-accordion__item" open>
    <summary>
      <span class="bn-accordion__num">01.</span>
      <span class="bn-accordion__q">Qu'est-ce que Blaig Nova ?</span>
      <span class="bn-accordion__icon"></span>
    </summary>
    <p>Blaig Nova est un signal. Une invitation à explorer l'inconnu, à questionner l'essentiel et à créer autrement.</p>
  </details>

  <details class="bn-accordion__item">
    <summary>
      <span class="bn-accordion__num">02.</span>
      <span class="bn-accordion__q">D'où vient cette idée ?</span>
      <span class="bn-accordion__icon"></span>
    </summary>
    <p>D'un besoin de ralentir, de sortir du bruit constant pour se reconnecter à l'essentiel.</p>
  </details>

  <details class="bn-accordion__item">
    <summary>
      <span class="bn-accordion__num">03.</span>
      <span class="bn-accordion__q">Comment collaborer ?</span>
      <span class="bn-accordion__icon"></span>
    </summary>
    <p>Un simple message suffit pour démarrer une conversation et explorer ensemble.</p>
  </details>
</div>