/*
LCP Tooltips
Version améliorée
*/

:root {
    --lcp-tooltip-delay: 0.4s;
    --lcp-tooltip-transition: 0.2s;
}

.lcp-tooltip {

    position: relative;
    cursor: help;

}



/*
Bulle principale
*/

.lcp-tooltip::after {

    content: attr(data-tooltip);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 12px);

    transform: translateX(-50%);


    width: 280px;
    max-width: 80vw;


    padding: 12px 15px;


    background: rgba(35,35,35,0.96);

    color: #ffffff;


    font-size: 14px;

    line-height: 1.45;


    text-align: left;


    border-radius: 7px;


    box-shadow: 0 4px 18px rgba(0,0,0,0.30);



    opacity: 0;

    visibility: hidden;


    transition:
    opacity var(--lcp-tooltip-transition) ease,
    transform var(--lcp-tooltip-transition) ease;

	transition-delay:
    var(--lcp-tooltip-delay);


    transform:

        translateX(-50%)

        translateY(8px);



    z-index: 99999;


    pointer-events: none;

}



/*
Petite flèche
*/

.lcp-tooltip::before {


    content: "";


    position: absolute;


    left: 50%;

    bottom: calc(100% + 5px);


    transform: translateX(-50%);



    border-width: 8px 8px 0 8px;

    border-style: solid;


    border-color:

        rgba(35,35,35,0.96)

        transparent

        transparent

        transparent;



    opacity: 0;

    visibility: hidden;


    transition:
    opacity var(--lcp-tooltip-transition) ease;

	transition-delay:
    var(--lcp-tooltip-delay);


    z-index: 99999;

}



/*
Affichage au survol
*/

.lcp-tooltip:hover::after,

.lcp-tooltip:hover::before {


    opacity: 1;

    visibility: visible;


}



/*
Animation d'apparition
*/

.lcp-tooltip:hover::after {


    transform:

        translateX(-50%)

        translateY(0);


}



/*
Affichage sous le lien lorsque nécessaire
*/

.lcp-tooltip-bottom::after {


    top: calc(100% + 12px);

    bottom: auto;


    transform:

        translateX(-50%)

        translateY(-8px);

}


.lcp-tooltip-bottom::before {


    top: calc(100% + 5px);

    bottom: auto;


    border-width:

        0 8px 8px 8px;


    border-color:

        transparent

        transparent

        rgba(35,35,35,0.96)

        transparent;


}



/*
Téléphones et petites largeurs
*/

@media screen and (max-width:600px) {


    .lcp-tooltip::after {


        width:240px;

        max-width:90vw;


        font-size:13px;


    }

}