/* =========================
 * Tooltip façon Twitter (sobre)
 * — garde .has-tooltip + ::before/::after
 * ========================= */
:root{
  --tt-bg: #2f3336;                 /* gris foncé type Twitter */
  --tt-text: #ffffff;
  --tt-border: rgba(255,255,255,.08); /* quasi invisible */
}

@media (prefers-color-scheme: light){
  :root{
    --tt-bg: #f1f2f3;               /* gris clair en light */
    --tt-text: #0b0f12;
    --tt-border: rgba(0,0,0,.08);
  }
}

/* Cible du tooltip */
.has-tooltip{ position: relative; }

/* Bulle */
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    font: 600 13px / 1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color: var(--tt-text);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: none;
    background: #1f2020;
    border: 1px solid var(--tt-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: opacity .12s ease, transform .12s ease;
}

/* Affichage au survol / focus clavier / ouverture forcée */
.has-tooltip:hover::after,
.has-tooltip:focus-visible::after,
.has-tooltip.tt-open::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.has-tooltip:hover::before,
.has-tooltip:focus-visible::before,
.has-tooltip.tt-open::before{
  opacity: 1;
}

/* Variante position bas (tooltip dessous) */
.has-tooltip[data-tt-pos="bottom"]::after{
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.has-tooltip[data-tt-pos="bottom"]::before{
  bottom: auto; top: calc(100% + 3px);
  border-left: none; border-top: none;
  border-right: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
}
.has-tooltip[data-tt-pos="bottom"]:hover::after,
.has-tooltip[data-tt-pos="bottom"]:focus-visible::after,
.has-tooltip[data-tt-pos="bottom"].tt-open::after{
  transform: translateX(-50%) translateY(0);
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce){
  .has-tooltip::after, .has-tooltip::before{ transition: none !important; }
}

.has-tooltip::before,
.has-tooltip::after{ z-index:1000; }