/* Style: Avec flèche */
/* Align the arrow on the right for is-style-arrow, left for is-style-arrow-no-border */
.wp-block-button.is-style-arrow .wp-element-button,
.wp-block-button.is-style-arrow-no-border .wp-element-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Flèche à droite pour is-style-arrow (après le contenu) */
.wp-block-button.is-style-arrow .wp-element-button::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 17" fill="none"><path d="M11.3754 7.74966C11.7904 8.1647 11.7904 8.83872 11.3754 9.25376L5.00038 15.6288C4.58534 16.0438 3.91132 16.0438 3.49628 15.6288C3.08124 15.2137 3.08124 14.5397 3.49628 14.1247L9.12089 8.50005L3.4996 2.87544C3.08456 2.4604 3.08456 1.78638 3.4996 1.37134C3.91464 0.956299 4.58866 0.956299 5.0037 1.37134L11.3787 7.74634L11.3754 7.74966Z" fill="black"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 17" fill="none"><path d="M11.3754 7.74966C11.7904 8.1647 11.7904 8.83872 11.3754 9.25376L5.00038 15.6288C4.58534 16.0438 3.91132 16.0438 3.49628 15.6288C3.08124 15.2137 3.08124 14.5397 3.49628 14.1247L9.12089 8.50005L3.4996 2.87544C3.08456 2.4604 3.08456 1.78638 3.4996 1.37134C3.91464 0.956299 4.58866 0.956299 5.0037 1.37134L11.3787 7.74634L11.3754 7.74966Z" fill="black"/></svg>') no-repeat center / contain;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    margin-left: 0.25em;
}

.wp-block-button.is-style-arrow .wp-element-button:hover::after {
    transform: translateX(5px);
}

.wp-block-button.is-style-arrow-no-border .wp-element-button {
    padding-left: 12.8px;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button.is-style-arrow-no-border .wp-element-button:hover {
    background-color: transparent;
    transform: translateX(-20px);
    color: var(--wp--preset--color--secondary);
}

/* Flèches gauche (::before) et droite (::after) — toujours dans le flux flex,
   crossfade au hover pour éviter tout snap de position */
.wp-block-button.is-style-arrow-no-border .wp-element-button::before,
.wp-block-button.is-style-arrow-no-border .wp-element-button::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 17" fill="none"><path d="M11.3754 7.74966C11.7904 8.1647 11.7904 8.83872 11.3754 9.25376L5.00038 15.6288C4.58534 16.0438 3.91132 16.0438 3.49628 15.6288C3.08124 15.2137 3.08124 14.5397 3.49628 14.1247L9.12089 8.50005L3.4996 2.87544C3.08456 2.4604 3.08456 1.78638 3.4996 1.37134C3.91464 0.956299 4.58866 0.956299 5.0037 1.37134L11.3787 7.74634L11.3754 7.74966Z" fill="black"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 17" fill="none"><path d="M11.3754 7.74966C11.7904 8.1647 11.7904 8.83872 11.3754 9.25376L5.00038 15.6288C4.58534 16.0438 3.91132 16.0438 3.49628 15.6288C3.08124 15.2137 3.08124 14.5397 3.49628 14.1247L9.12089 8.50005L3.4996 2.87544C3.08456 2.4604 3.08456 1.78638 3.4996 1.37134C3.91464 0.956299 4.58866 0.956299 5.0037 1.37134L11.3787 7.74634L11.3754 7.74966Z" fill="black"/></svg>') no-repeat center / contain;
    vertical-align: middle;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Repos : gauche visible, droite invisible (prête à glisser vers la droite) */
.wp-block-button.is-style-arrow-no-border .wp-element-button::before {
    opacity: 1;
    transform: translateX(0);
}

.wp-block-button.is-style-arrow-no-border .wp-element-button::after {
    opacity: 0;
    transform: translateX(-8px);
}

/* Hover : gauche sort à gauche, droite entre depuis la gauche */
.wp-block-button.is-style-arrow-no-border .wp-element-button:hover::before {
    opacity: 0;
    transform: translateX(-8px);
}

.wp-block-button.is-style-arrow-no-border .wp-element-button:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* Style: Contour in Group purple */
.wp-block-group:is(.has-primary-background-color,
    .is-style-wave,
    .is-style-diagonal,
    .is-style-primary) .wp-block-button.is-style-transparent .wp-element-button {
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--base);
}


/* Boutons "Je suis" du hero accueil (< 640px) : tous visibles, sur une grille
   de 2 colonnes, le dernier en pleine largeur s'il est seul sur sa ligne.
   Double classe : l'emporte sur le display:flex de la mise en page du bloc. */
@media (width < 640px) {
    .wp-block-buttons.hero-accueil-boutons-suis {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-accueil-boutons-suis > .wp-block-button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Libellé centré, aussi sur deux lignes */
    .hero-accueil-boutons-suis .wp-block-button__link {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-right: var(--wp--preset--spacing--10);
        padding-left: var(--wp--preset--spacing--10);
    }
}