FAQ

<div class="wtl-faq" data-faq>
  <div class="wtl-faq__item">
    <button class="wtl-faq__q" data-faq-q aria-expanded="false">
      <span>Quels services proposez-vous ?</span>
      <svg class="wtl-faq__icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line class="wtl-faq__bar wtl-faq__bar--h" x1="5" y1="12" x2="19" y2="12" />
        <line class="wtl-faq__bar wtl-faq__bar--v" x1="12" y1="5" x2="12" y2="19" />
      </svg>
    </button>
    <div class="wtl-faq__panel"><div class="wtl-faq__answer"><p>Ingénierie, construction et négoce, avec une exigence technique constante sur chaque projet.</p></div></div>
  </div>
  <div class="wtl-faq__item">
    <button class="wtl-faq__q" data-faq-q aria-expanded="false">
      <span>Dans quelles régions intervenez-vous ?</span>
      <svg class="wtl-faq__icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line class="wtl-faq__bar wtl-faq__bar--h" x1="5" y1="12" x2="19" y2="12" />
        <line class="wtl-faq__bar wtl-faq__bar--v" x1="12" y1="5" x2="12" y2="19" />
      </svg>
    </button>
    <div class="wtl-faq__panel"><div class="wtl-faq__answer"><p>Principalement en Afrique de l'Ouest, avec des partenaires sur plusieurs filières.</p></div></div>
  </div>
  <div class="wtl-faq__item">
    <button class="wtl-faq__q" data-faq-q aria-expanded="false">
      <span>Comment démarrer un projet avec vous ?</span>
      <svg class="wtl-faq__icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line class="wtl-faq__bar wtl-faq__bar--h" x1="5" y1="12" x2="19" y2="12" />
        <line class="wtl-faq__bar wtl-faq__bar--v" x1="12" y1="5" x2="12" y2="19" />
      </svg>
    </button>
    <div class="wtl-faq__panel"><div class="wtl-faq__answer"><p>Contactez-nous pour échanger sur votre besoin : nous revenons vers vous rapidement.</p></div></div>
  </div>
</div>

/* FAQ - variante Minimal : lignes fines, icône +/- élastique. Police Geist. */
.wtl-faq {
  --faq-line: rgba(244, 244, 244, 0.14);
  --faq-fg: #f4f4f4;
  --faq-muted: #817f7f;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  font-family: "Geist", system-ui, sans-serif;
}
.wtl-faq__item {
  border-bottom: 1px solid var(--faq-line);
}
.wtl-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--faq-fg);
}
.wtl-faq__icon {
  flex: none;
  color: var(--faq-muted);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.3s ease;
}
.wtl-faq__bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wtl-faq__q[aria-expanded="true"] .wtl-faq__icon {
  transform: rotate(180deg);
  color: var(--faq-fg);
}
.wtl-faq__q[aria-expanded="true"] .wtl-faq__bar--v {
  transform: scaleY(0);
}
.wtl-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.wtl-faq__q[aria-expanded="true"] + .wtl-faq__panel {
  grid-template-rows: 1fr;
}
.wtl-faq__answer {
  overflow: hidden;
  color: var(--faq-muted);
  font-size: 16px;
  line-height: 1.6;
}
.wtl-faq__answer > * {
  margin: 0 4px 22px;
}

// FAQ - accordéon : un seul panneau ouvert à la fois.
(function () {
  document.querySelectorAll("[data-faq]").forEach(function (faq) {
    var qs = faq.querySelectorAll("[data-faq-q]");
    qs.forEach(function (btn) {
      btn.addEventListener("click", function () {
        var open = btn.getAttribute("aria-expanded") === "true";
        qs.forEach(function (b) {
          b.setAttribute("aria-expanded", "false");
        });
        btn.setAttribute("aria-expanded", open ? "false" : "true");
      });
    });
  });
})();