/* ==========================================================================
   104 — Tooltip Pop
   Tooltip intelligent : apparition spring (scale 0.9 + translate depuis le
   déclencheur, origin côté flèche), délai ~350 ms à froid mais bascule
   instantanée entre déclencheurs voisins (glissement de la bulle), placement
   auto (retourne en bas si pas de place en haut dans la zone), sortie rapide
   en fade. Un déclencheur ouvre un popover riche qui reste ouvert au clic.
   Racine : .tooltip-pop — la bulle est créée par anim.js, positionnée en
   absolute DANS la zone (jamais fixed).
   ========================================================================== */

.tooltip-pop {
  --tp-accent: var(--ml-accent, #7c8cff);
  --tp-bubble: color-mix(in srgb, var(--ml-surface, #151a24) 72%, white);

  position: relative;
  width: 320px;
  max-width: 100%;
  height: 244px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ml-surface, #151a24);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ml-fg, #e8eaf2);
}

/* --- Barre d'outils (déclencheurs près du bord haut → flip en bas) -------- */

.tooltip-pop__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ml-bg, #0d1017) 55%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-self: flex-start;
}

.tooltip-pop__tool {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ml-muted, #8b91a3);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.tooltip-pop__tool:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ml-fg, #e8eaf2);
}

.tooltip-pop__tool:active { transform: scale(0.92); }

.tooltip-pop__tool:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

.tooltip-pop__tool svg {
  display: block;
  width: 15px;
  height: 15px;
}

.tooltip-pop__toolsep {
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.09);
}

/* --- Texte + lien déclencheur ---------------------------------------------- */

.tooltip-pop__copy {
  margin: 14px 2px 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ml-muted, #8b91a3);
}

.tooltip-pop__link {
  color: var(--tp-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tp-accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease;
}

.tooltip-pop__link:hover {
  text-decoration-color: var(--tp-accent);
}

.tooltip-pop__link:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Pied : statut + déclencheur du popover -------------------------------- */

.tooltip-pop__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-pop__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ml-muted, #8b91a3);
  border-radius: 6px;
  cursor: default;
}

.tooltip-pop__status:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 3px;
}

.tooltip-pop__status svg {
  display: block;
  width: 13px;
  height: 13px;
  color: var(--ml-accent-2, #2dd4bf);
}

.tooltip-pop__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ml-surface, #151a24) 88%, white);
  color: var(--ml-fg, #e8eaf2);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.tooltip-pop__more:hover {
  border-color: color-mix(in srgb, var(--tp-accent) 45%, transparent);
}

.tooltip-pop__more:active { transform: scale(0.97); }

.tooltip-pop__more:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

.tooltip-pop__more svg {
  display: block;
  width: 14px;
  height: 14px;
  color: var(--tp-accent);
}

/* --- Bulle tooltip (créée par anim.js) -------------------------------------
   Positionnée en inline style (left/top) relativement à la racine.
   --tp-from : distance de départ vers le déclencheur (+ = vient du bas,
   − = vient du haut) ; transform-origin posée par le JS côté flèche. */

.tooltip-pop__bubble {
  position: absolute;
  z-index: 3;
  max-width: 210px;
  padding: 6px 10px 7px;
  border-radius: 8px;
  background: var(--tp-bubble);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.65);
  color: var(--ml-fg, #e8eaf2);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.tooltip-pop__bubble.is-visible {
  animation: tooltip-pop-in 0.32s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes tooltip-pop-in {
  from {
    opacity: 0;
    transform: translateY(var(--tp-from, 6px)) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bascule entre déclencheurs voisins : la bulle GLISSE, sans re-pop */
.tooltip-pop__bubble.is-moving {
  transition:
    left 0.19s cubic-bezier(0.3, 1.2, 0.4, 1),
    top 0.19s cubic-bezier(0.3, 1.2, 0.4, 1);
}

/* Sortie : fade rapide, léger recul vers le déclencheur */
.tooltip-pop__bubble.is-hiding {
  animation: tooltip-pop-out 0.13s ease forwards;
}

@keyframes tooltip-pop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(calc(var(--tp-from, 6px) * 0.5)) scale(0.96); }
}

/* Flèche : carré tourné, côté posé par le JS (haut ou bas de la bulle) */
.tooltip-pop__bubble-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--tp-bubble);
  transform: rotate(45deg);
}

.tooltip-pop__bubble--top .tooltip-pop__bubble-arrow {
  bottom: -4px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-pop__bubble--bottom .tooltip-pop__bubble-arrow {
  top: -4px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Popover riche (reste ouvert, fermeture Escape / clic extérieur) ------- */

.tooltip-pop__popover {
  position: absolute;
  right: 14px;
  bottom: 58px;
  z-index: 4;
  width: 196px;
  padding: 12px 13px 13px;
  border-radius: 12px;
  background: var(--tp-bubble);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.7);
  transform-origin: 82% 100%; /* côté flèche, au-dessus du déclencheur */
  opacity: 0;
}

.tooltip-pop__popover[hidden] { display: none; }

.tooltip-pop__popover.is-open {
  animation: tooltip-pop-in 0.38s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

.tooltip-pop__popover.is-closing {
  animation: tooltip-pop-out 0.15s ease forwards;
}

.tooltip-pop__popover-title {
  margin: 0 0 5px;
  font-size: 0.78rem;
  font-weight: 650;
}

.tooltip-pop__popover-text {
  margin: 0 0 10px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ml-muted, #8b91a3);
}

.tooltip-pop__popover-btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--tp-accent);
  color: var(--ml-bg, #0d1017);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease;
}

.tooltip-pop__popover-btn:hover  { transform: translateY(-1px); filter: brightness(1.08); }
.tooltip-pop__popover-btn:active { transform: translateY(0) scale(0.96); }

.tooltip-pop__popover-btn:focus-visible {
  outline: 2px solid var(--ml-fg, #e8eaf2);
  outline-offset: 2px;
}

.tooltip-pop__popover-arrow {
  position: absolute;
  right: 26px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: var(--tp-bubble);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tooltip-pop__tool,
  .tooltip-pop__more,
  .tooltip-pop__popover-btn {
    transition: none;
  }

  .tooltip-pop__tool:active,
  .tooltip-pop__more:active,
  .tooltip-pop__popover-btn:hover,
  .tooltip-pop__popover-btn:active {
    transform: none;
  }

  .tooltip-pop__bubble.is-visible,
  .tooltip-pop__bubble.is-hiding,
  .tooltip-pop__popover.is-open,
  .tooltip-pop__popover.is-closing {
    animation-duration: 0.01s;
  }

  .tooltip-pop__bubble.is-moving {
    transition: none;
  }
}