.section__p {
    font-family: var(--font-3);
    font-size: clamp(28px, 2.3vw, 10000px);
    color: var(--text-color-4);
}

.section__span--letter {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow-wrap: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.section__span--letter:nth-child(1) {
    letter-spacing: -5px;
}

.section__span--letter.active {
    -webkit-animation: smoke 3s linear forwards;
    -moz-animation: smoke 3s linear forwards;
    -o-animation: smoke 3s linear forwards;
    animation: smoke 3s linear forwards;
    /*Par défaut l'origine de transform est center*/
    transform-origin: bottom;
}


@keyframes smoke {
    0% {
        opacity: 1;
        color: rgb(167, 167, 167);
        filter: blur(0);
        transform: translateX(0) translateY(0px) rotate(0deg) scale(1);
    }

    75% {
        opacity: 1;
        color: white;
        /*Lettres partent en fumée plus tard*/
        /* filter: blur(0); */
        pointer-events: none;
    }

    100% {
        opacity: 0;
        color: white;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
    }
}