/* ============================================================
   Zen Tooltip
   ============================================================ */

.zen-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 320px;
    padding: 6px 10px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #c4cbd3;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    font-family: var(--zen-ctrl-font-family, "Segoe UI", Arial, sans-serif);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.08s ease, transform 0.08s ease;
}

    .zen-tooltip.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .zen-tooltip::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: #ffffff;
    }

    /* Tooltip sous l’élément : flèche en haut */
    .zen-tooltip.tooltip-bottom::after {
        top: -5px;
        left: var(--tooltip-arrow-left, 50%);
        margin-left: -4px;
        border-left: 1px solid #c4cbd3;
        border-top: 1px solid #c4cbd3;
        transform: rotate(45deg);
    }

    /* Tooltip au-dessus de l’élément : flèche en bas */
    .zen-tooltip.tooltip-top::after {
        bottom: -5px;
        left: var(--tooltip-arrow-left, 50%);
        margin-left: -4px;
        border-right: 1px solid #c4cbd3;
        border-bottom: 1px solid #c4cbd3;
        transform: rotate(45deg);
    }
    /* États de placement horizontal.
   Pour l’instant, on ne change rien visuellement,
   mais ces classes permettent d’ajuster plus tard si besoin. */

    .zen-tooltip.tooltip-centered {
    }

    .zen-tooltip.tooltip-edge-left {
    }

    .zen-tooltip.tooltip-edge-right {
    }

    .zen-tooltip.tooltip-edge-left,
    .zen-tooltip.tooltip-edge-right {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }