.visuel {
    position: relative;
    transform-style: preserve-3d;
}

.visuel img {
    width: 90% !important;
    margin-left: 5%;
}

.visuel::before {
    content: '';
    background-image: url('../../dist/images/triangle-yellow.png'), url('../../dist/images/dot-rectangle.svg');
    background-position: left top, 100% top;
    background-size: 65% auto, 22%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateZ(-1px);
}

.visuel.yellow::before {
    background-image: url('../../dist/images/triangle-yellow.png'), url('../../dist/images/dot-rectangle.svg');
}

.visuel.black::before {
    background-image: url('../../dist/images/triangle-black.png'), url('../../dist/images/dot-rectangle.svg');
}

.visuel.white::before {
    background-image: url('../../dist/images/triangle-white.png'), url('../../dist/images/dot-rectangle.svg');
}