:root {
     --cdp-trapeze:     polygon(0 10%, 100% 0, 100% 100%, 0 85%);
}


/* Styles de base pour les boutons */
.wp-block-button__link {
    padding: .35rem 1rem;
    border-radius: 0;
    white-space: nowrap;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: bold;
    clip-path: var(--cdp-trapeze);
      transition: all ease-in 250ms;
}


.is-style-primary .wp-element-button {
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
}
.is-style-primary:hover .wp-element-button{
    background-color: var(--wp--preset--color--violet);
 color: var(--wp--preset--color--white);
}


.is-style-secondary .wp-element-button{
    background-color: var(--wp--preset--color--orange);
     color: var(--wp--preset--color--white);
    
}

.is-style-secondary:hover  .wp-element-button{
    background-color: var(--wp--preset--color--white);
     color: var(--wp--preset--color--violet);
}


.is-style-tertiary .wp-element-button{
    background-color: var(--wp--preset--color--violet);
     color: var(--wp--preset--color--white);

}
.is-style-tertiary:hover .wp-element-button{
background-color: var(--wp--preset--color--vert);
 color: var(--wp--preset--color--white);
}

.is-style-quaternary .wp-element-button{
    background-color: var(--wp--preset--color--vert);
    color: var(--wp--preset--color--white);

}
.is-style-quaternary:hover .wp-element-button{
 background-color: var(--wp--preset--color--violet);
 color: var(--wp--preset--color--white);
}





.is-style-download-white .wp-element-button,
.is-style-download-orange .wp-element-button{
    display: inline-flex;
    align-items: center;
    white-space: normal;
    justify-content: center;
    gap: 10px;
       padding: .5rem 1.35rem;
}

.is-style-download-white .wp-element-button::after,
.is-style-download-orange .wp-element-button::after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M12.6667 19.2771L5.02708 11.6375L6.72917 9.93542L11.4792 14.6854V0H13.8542V14.6854L18.6042 9.93542L20.3062 11.6375L12.6667 19.2771ZM2.375 25.3333C1.74167 25.3333 1.1875 25.0958 0.7125 24.6208C0.2375 24.1458 0 23.5917 0 22.9583V17.2979H2.375V22.9583H22.9583V17.2979H25.3333V22.9583C25.3333 23.5917 25.0958 24.1458 24.6208 24.6208C24.1458 25.0958 23.5917 25.3333 22.9583 25.3333H2.375Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M12.6667 19.2771L5.02708 11.6375L6.72917 9.93542L11.4792 14.6854V0H13.8542V14.6854L18.6042 9.93542L20.3062 11.6375L12.6667 19.2771ZM2.375 25.3333C1.74167 25.3333 1.1875 25.0958 0.7125 24.6208C0.2375 24.1458 0 23.5917 0 22.9583V17.2979H2.375V22.9583H22.9583V17.2979H25.3333V22.9583C25.3333 23.5917 25.0958 24.1458 24.6208 24.6208C24.1458 25.0958 23.5917 25.3333 22.9583 25.3333H2.375Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}


.is-style-download-white .wp-element-button{
    clip-path: none;
    background-color: transparent;
    color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--white);
    border-radius:20px ;
    font-weight: bold;

}
.is-style-download-white:hover .wp-element-button{
    border: 1px solid var(--wp--preset--color--orange);
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
}



.is-style-download-orange .wp-element-button{
    clip-path: none;
    background-color: transparent;
    color: var(--wp--preset--color--orange);
    border: 1px solid var(--wp--preset--color--orange);
    border-radius:20px ;
    font-weight: bold;

}
.is-style-download-orange:hover .wp-element-button{
    border: 1px solid var(--wp--preset--color--orange);
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
}


/**********************/


.is-style-large-button .wp-element-button{
    clip-path: none;
     white-space: pre-wrap;
      padding: 1rem 1rem;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    border: 1px solid var(--wp--preset--color--white);
    border-radius:20px ;
    font-weight: bold;

}
.is-style-large-button:hover .wp-element-button{
    border: 1px solid var(--wp--preset--color--orange);
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
}