a.link {
    color: $elementum-text-primary;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.02em;
    position: relative;
    cursor: pointer;
    transition: color 0.15s ease;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: rgba($elementum-text-primary, 0.35);
        /* secondary en discret */
        transition: transform 0.2s ease, opacity 0.2s ease;
        transform: scaleX(0.4);
        transform-origin: left;
        opacity: 0.6;
    }

    &:hover {
        color: $elementum-text-primary;

        &::after {
            transform: scaleX(1);
            opacity: 1;
        }
    }

    &:focus-visible {
        outline: 2px solid rgba($elementum-text-primary, 0.7);
        outline-offset: 3px;
    }

    &.secondary {
        color: $elementum-primary;

        &::after {
            background: rgba($elementum-primary, 0.35);
        }

        &:hover {
            color: $elementum-primary;
        }

        &:focus-visible {
            outline: 2px solid rgba($elementum-primary, 0.7);
            outline-offset: 3px;
        }
    }

    &.tertiary {
        color: $elementum-tertiary;

        &::after {
            background: rgba($elementum-tertiary, 0.35);
        }

        &:hover {
            color: $elementum-tertiary;
        }

        &:focus-visible {
            outline: 2px solid rgba($elementum-tertiary, 0.7);
            outline-offset: 3px;
        }
    }
}