.tooltip { position: relative; display: inline-flex; align-items: center; color: var(--ink-faint); cursor: help; }
.tooltip:hover, .tooltip:focus-visible { color: var(--brand); outline: none; }
.tooltip-bulle {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 260px;
    background: var(--ink); color: #fff;
    font-size: 12px; font-weight: 450; line-height: 1.45; text-align: left;
    padding: 8px 11px; border-radius: var(--r-sm);
    opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s;
    z-index: 60; white-space: pre-line; pointer-events: none;
}
.tooltip-bulle::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ink);
}
.tooltip:hover .tooltip-bulle, .tooltip:focus-visible .tooltip-bulle { opacity: 1; visibility: visible; }