/*^ ------------------------------ Tooltip ------------------------------ */
    [data-tooltip],
    [data-tooltiptop],
    [data-tooltipright],
    [data-tooltipleft] {
        display: inline-block;
        position: relative;
    }
    [data-tooltip]:after,
    [data-tooltiptop]:after,
    [data-tooltipright]:after,
    [data-tooltipleft]:after {
        pointer-events: none;
        font-size: 1rem;
        font-weight: normal;
        white-space: nowrap;
        position: absolute;
        background: var(--gris);
        color: var(--ecriture);
        padding: 5px 10px;
        opacity: 0;
        z-index: 99999;
        border-radius: var(--radius);
        transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0), transform 0s 0.5s;
    }

    [data-tooltip]:hover:after,
    [data-tooltiptop]:hover:after,
    [data-tooltipright]:hover:after,
    [data-tooltipleft]:hover:after {
        opacity: 1;
        transition: opacity 0.5s 100ms cubic-bezier(0.77,0.2,0.05,1.0), transform 0s 0s;
    }

    /*^ ------------------------------ En dessous ------------------------------ */
        [data-tooltip]:after {
            content: attr(data-tooltip);
            top: calc(100% + 5px);
            left: 50%;
            transform: translateX(-50%) scale(0);
        }
        [data-tooltip]:hover:after {
            transform: translateX(-50%) scale(1);
        }
    /*^ ------------------------------ Au dessus ------------------------------- */
        [data-tooltiptop]:after {
            content: attr(data-tooltiptop);
            bottom: calc(100% + 5px);
            left: 50%;
            transform: translateX(-50%) scale(0);
        }
        [data-tooltiptop]:hover:after {
            transform: translateX(-50%) scale(1);
        }
    /*^ ------------------------------ A gauche ------------------------------ */
        [data-tooltipleft]:after {
            content: attr(data-tooltipleft);
            top: 50%;
            right: calc(100% + 5px);
            transform: translateY(-50%) scaleY(0);
        }
        [data-tooltipleft]:hover:after {
            transform: translateY(-50%) scaleY(1);
        }
    /*^ ------------------------------ A droite ------------------------------ */
        [data-tooltipright]:after {
            content: attr(data-tooltipright);
            top: 50%;
            left: calc(100% + 5px);
            transform: translateY(-50%) scaleY(0);
        }
        [data-tooltipright]:hover:after {
            transform: translateY(-50%) scaleY(1);
        }