/* =============================================================
   Socle · Infobulle (.sc-tooltip)
   Pur CSS, aucun script. La bulle apparaît au survol et au focus
   clavier du déclencheur (:hover / :focus-within sur le wrapper)
   et se simule pour la doc avec [data-state="open"] sur le
   wrapper. Anatomie : .sc-tooltip > déclencheur + __bubble.
   Placements : --top (défaut), --bottom, --start, --end.
   ============================================================= */

.sc-tooltip {
  /* Tokens de composant : les placements ne font que réassigner ceci. */
  --_tooltip-max-width: 16rem;         /* dimension structurelle */
  --_tooltip-gap: var(--gap-2xs);      /* distance bulle / déclencheur */
  --_tooltip-shift: var(--space-4);    /* micro-décalage d'apparition */
  /* Aucun rôle sémantique n'existe pour un délai seul : les tokens
     --motion-* sont des paires durée + easing. Primitive assumée,
     signalée comme token manquant. */
  --_tooltip-delay: var(--motion-duration-slow);

  /* Ancrage du placement --top (défaut). */
  --_tooltip-block-start: auto;
  --_tooltip-block-end: calc(100% + var(--_tooltip-gap));
  --_tooltip-inline-start: 50%;
  --_tooltip-inline-end: auto;
  --_tooltip-hidden: -50% var(--_tooltip-shift);
  --_tooltip-shown: -50% 0;

  position: relative;
  display: inline-flex;
}

.sc-tooltip__bubble {
  position: absolute;
  inset-block-start: var(--_tooltip-block-start);
  inset-block-end: var(--_tooltip-block-end);
  inset-inline-start: var(--_tooltip-inline-start);
  inset-inline-end: var(--_tooltip-inline-end);
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: var(--_tooltip-max-width);
  padding: var(--padding-2xs) var(--padding-s);
  border-radius: var(--radius-control);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--elevation-floating);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
  text-align: start;
  text-wrap: balance;
  translate: var(--_tooltip-hidden);
  opacity: 0;
  /* La bulle n'intercepte jamais la souris : elle décrit, elle n'agit pas. */
  pointer-events: none;
  transition:
    opacity var(--motion-fast),
    translate var(--motion-fast);
}

/* Ouverture : survol, focus clavier du déclencheur, ou simulation
   pour la doc via [data-state="open"]. Le délai ne joue qu'à
   l'apparition, la disparition repart sans attendre. */
.sc-tooltip:hover .sc-tooltip__bubble,
.sc-tooltip:focus-within .sc-tooltip__bubble,
.sc-tooltip[data-state="open"] .sc-tooltip__bubble {
  opacity: 1;
  translate: var(--_tooltip-shown);
  transition-delay: var(--_tooltip-delay);
}

/* ---- Placements ---- */

.sc-tooltip--top {
  --_tooltip-block-start: auto;
  --_tooltip-block-end: calc(100% + var(--_tooltip-gap));
  --_tooltip-inline-start: 50%;
  --_tooltip-inline-end: auto;
  --_tooltip-hidden: -50% var(--_tooltip-shift);
  --_tooltip-shown: -50% 0;
}

.sc-tooltip--bottom {
  --_tooltip-block-start: calc(100% + var(--_tooltip-gap));
  --_tooltip-block-end: auto;
  --_tooltip-inline-start: 50%;
  --_tooltip-inline-end: auto;
  --_tooltip-hidden: -50% calc(-1 * var(--_tooltip-shift));
  --_tooltip-shown: -50% 0;
}

.sc-tooltip--start {
  --_tooltip-block-start: 50%;
  --_tooltip-block-end: auto;
  --_tooltip-inline-start: auto;
  --_tooltip-inline-end: calc(100% + var(--_tooltip-gap));
  --_tooltip-hidden: var(--_tooltip-shift) -50%;
  --_tooltip-shown: 0 -50%;
}

.sc-tooltip--end {
  --_tooltip-block-start: 50%;
  --_tooltip-block-end: auto;
  --_tooltip-inline-start: calc(100% + var(--_tooltip-gap));
  --_tooltip-inline-end: auto;
  --_tooltip-hidden: calc(-1 * var(--_tooltip-shift)) -50%;
  --_tooltip-shown: 0 -50%;
}