/* ============================================================
   tooltip.css — Système de tooltip personnalisé
   Usage : <element data-tooltip="Mon message">
   Options via data-tooltip-pos : top (défaut) | bottom | left | right
   ============================================================ */

:root {
    --tt-bg:          #1a1a2e;
    --tt-border:      #4f8ef7;
    --tt-text:        #e8eaf6;
    --tt-shadow:      rgba(79, 142, 247, 0.35);
    --tt-radius:      6px;
    --tt-font:        'Segoe UI', system-ui, sans-serif;
    --tt-font-size:   0.82rem;
    --tt-padding:     0.45em 0.85em;
    --tt-arrow-size:  7px;
    --tt-gap:         10px;          /* distance entre l'élément et la bulle */
    --tt-max-width:   280px;
    --tt-z:           9999999999;
    --tt-duration:    180ms;
}

/* ----- Bulles ----- */
.tt-bubble {
    position: fixed;
    z-index: var(--tt-z);
    max-width: var(--tt-max-width);
    padding: var(--tt-padding);
    background: var(--tt-bg);
    color: var(--tt-text);
    font-family: var(--tt-font);
    font-size: var(--tt-font-size);
    line-height: 1.45;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    box-shadow: 0 4px 18px var(--tt-shadow);
    pointer-events: none;
    white-space: pre-wrap;         /* respecte les \n dans le message */
    word-break: break-word;

    /* État initial : invisible */
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    transition:
        opacity    var(--tt-duration) ease,
        transform  var(--tt-duration) ease;
}

.tt-bubble.tt-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ----- Flèche (pseudo-élément) ----- */
.tt-bubble::before,
.tt-bubble::after {
    content: '';
    position: absolute;
    border: var(--tt-arrow-size) solid transparent;
    pointer-events: none;
}

/* ---- Position : top (bulle au-dessus, flèche vers le bas) ---- */
.tt-bubble.tt-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--tt-border);
}
.tt-bubble.tt-top::after {
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--tt-bg);
}

/* ---- Position : bottom (bulle en dessous, flèche vers le haut) ---- */
.tt-bubble.tt-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--tt-border);
}
.tt-bubble.tt-bottom::after {
    bottom: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--tt-bg);
}

/* ---- Position : left (bulle à gauche, flèche vers la droite) ---- */
.tt-bubble.tt-left::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--tt-border);
}
.tt-bubble.tt-left::after {
    left: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--tt-bg);
}

/* ---- Position : right (bulle à droite, flèche vers la gauche) ---- */
.tt-bubble.tt-right::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--tt-border);
}
.tt-bubble.tt-right::after {
    right: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--tt-bg);
}