/* ============================================================
   TOOLTIP
   ------------------------------------------------------------
       <button class="ice-icon-btn ice-tooltip"
               data-tooltip="Conserver" data-tooltip-at="left">…</button>

       <span class="ice-chip ice-tooltip" tabindex="0"
             data-tooltip="Tendance émergente">Signal faible</span>

   Works on ANY element, not just buttons — anything that can take
   `position: relative` can carry one.

   CSS only — the label lives in the attribute, so there is nothing
   to initialise and nothing to keep in sync.

   `data-tooltip` is the label; `data-tooltip-at` picks the side
   (top by default, plus left / right / bottom).

   Accessibility: this is a visual affordance only — a pseudo-element,
   so screen readers do not announce it.
     · on a control, keep the `aria-label`; the tooltip does not
       replace the accessible name
     · on a non-interactive element, add `tabindex="0"`, otherwise the
       information is mouse-only
     · never put essential information in one
   Shown on hover AND on keyboard focus.
   ============================================================ */

.ice-tooltip { position: relative; }

.ice-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--z-overlay);

  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-9);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-fg);

  font-size: var(--type-body-s-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--type-body-s-track);
  line-height: var(--type-body-s-leading);
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);

  /* default placement: above, centred */
  inset-block-end: calc(100% + var(--space-8));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
}

.ice-tooltip:hover::after,
.ice-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Placements ------------------------------------------- */
.ice-tooltip[data-tooltip-at="left"]::after {
  inset-block-end: auto;
  inset-block-start: 50%;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--space-8));
  transform: translateY(-50%) translateX(4px);
}
.ice-tooltip[data-tooltip-at="left"]:hover::after,
.ice-tooltip[data-tooltip-at="left"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.ice-tooltip[data-tooltip-at="right"]::after {
  inset-block-end: auto;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--space-8));
  transform: translateY(-50%) translateX(-4px);
}
.ice-tooltip[data-tooltip-at="right"]:hover::after,
.ice-tooltip[data-tooltip-at="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.ice-tooltip[data-tooltip-at="bottom"]::after {
  inset-block-end: auto;
  inset-block-start: calc(100% + var(--space-8));
  transform: translateX(-50%) translateY(-4px);
}
.ice-tooltip[data-tooltip-at="bottom"]:hover::after,
.ice-tooltip[data-tooltip-at="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}