.b2l-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.b2l-badges--inline{
  margin-top: 10px;
}
.b2l-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background: rgba(255,255,255,0.7);
}
.b2l-badge__icon{
  width:50px;
  height:50px;
  object-fit:contain;
}
.b2l-badge__dashicon{
  font-size:18px;
  width:18px;
  height:18px;
  color:#111;
}
.b2l-badge__label{
  font-size:13px;
  line-height:1;
  color:#111;
  white-space:nowrap;
}
.b2l-badge{ position:relative; }

/* Tooltip (fond + lisibilité) */
.b2l-badge::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;

  background: #85e682;
  color: #334b49;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;

  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 999999;
}

/* flèche */
.b2l-badge::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 15, 15, 0.95);

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 999999;
}

.b2l-badge:hover::after,
.b2l-badge:hover::before{
  opacity: 1;
}