.etape-triangles {
  padding: 17px 4px;
  background-color: var(--couleur-secondaire-3);
  display: flex;
  list-style: none;
}

.etape-triangles li {
  flex: 1;
}

.etape-triangles li:not(:first-of-type) {
  margin-left: -14px;
}

.etape-triangles span {
  display: inline-flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  color: var(--couleur-noir);
  cursor: pointer;
  background-color: var(--couleur-secondaire-4);
  height: 32px;
  width: 100%;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  user-select: none;
}

.etape-triangles li.active span {
  background-color: var(--couleur-blanc);
  color: var(--couleur-secondaire-9);
  cursor: default;
}

.etape-triangles li.disabled span {
  color: var(--couleur-blanc);
  cursor: default;
}

.etape-triangles li span a {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}