.wp-element-button, .wpcf7-submit {
    position: relative;
    font-weight: bold;
    &::after {
        content: '';
        position: absolute;
        transform: rotate(-45deg);
        background-image: url("../images/arrow-black.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 1.65rem;
        height: 1.65rem;
        right: -0.6rem;
        bottom: -0.525rem;
        left: auto;
        top: auto;
    }

    &:where(:not(.has-background):not([disabled])):hover, &:where(:not(.has-background):not([disabled])):focus-visible {
        background-color: oklch(from var(--wp--preset--color--jaune) calc(l - .1) c h ) !important;
        color: var(--wp--preset--color--noir) !important;
        &::after {
            background-image: url("../images/arrow-black.svg") !important;
        }
    }
}

.rosee-xs-button {
    font-size: var(--wp--preset--font-size--x-small) !important;
    .wp-element-button {
        padding: 0.75rem 1.2rem 0.45rem;
        font-size: var(--wp--preset--font-size--x-small) !important;

        &::after {
            width: 1.2rem;
            height: 1.2rem;
            right: -0.45rem;
            bottom: -0.405rem;
        }
    }
}

.is-style-bouton-noir .wp-element-button::after {
    background-image: url("../images/arrow-white.svg");
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Bouton dont la couleur de fond vient de l'éditeur : la teinte choisie est
   conservée, assombrie au survol et au focus. */
:is(.wp-element-button, .wpcf7-submit).has-background:hover,
:is(.wp-element-button, .wpcf7-submit).has-background:focus-visible {
    background-color: oklch(from var(--wp--preset--color--jaune) calc(l - .1) c h ) !important;
    color: var(--wp--preset--color--noir);
}