/*
 * Boutons et remplissage animé
 * Styles de bloc ripple-* sélectionnables dans Gutenberg. buttons.js calcule l’origine et la taille du cercle de remplissage.
 * Chargement : functions.php ; règles conservées dans leur ordre de cascade.
 */
/* 01. Variantes : couleurs du remplissage et du texte au survol. */
.wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun),
.btn-ripple {
  --ripple-fill: #1E1E1E;
  --ripple-text: #E9DECE;
}
.wp-block-button.is-style-ripple-rose { --ripple-fill: #D95853; --ripple-text: #1E1E1E; }
.wp-block-button.is-style-ripple-vert { --ripple-fill: #AEC1A6; --ripple-text: #1E1E1E; }
.wp-block-button.is-style-ripple-brun { --ripple-fill: #FBC14A; --ripple-text: #1E1E1E; }


/* 02. Boutons produit : respecter les couleurs natives au repos et appliquer la variante au survol. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .wp-block-button.lgr-product-button > .wp-block-button__link:hover {
    color: var(--ripple-text) !important;
    border-color: var(--ripple-fill) !important;
  }
}
/* 03. Boutons produit : état de focus clavier. */
.wp-block-button.lgr-product-button > .wp-block-button__link:focus-visible {
  color: var(--ripple-text) !important;
  background: var(--ripple-fill) !important;
  border-color: var(--ripple-fill) !important;
}

/* 04. Socle visuel commun : boîte, bordure, alignement et transitions. */
.wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link,
.btn-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: 1px solid #1E1E1E;
  border-radius: 4px;
  background: #E9DECE;
  color: #1E1E1E;
  font-size: var(--wp--preset--font-size--base, 20px);
  line-height: 1.4;
  text-decoration: none;
  transition: color 420ms ease, border-color 420ms ease;
}

/* 05. Calque de remplissage : cercle placé sous le texte, animé depuis le pointeur. */
.wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link::before,
.btn-ripple::before,
.lgr-form-submit-ripple::before {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--ripple-size, 250%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ripple-fill);
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  pointer-events: none;
  transition: transform 1250ms cubic-bezier(.19, 1, .22, 1);
}

/* 06. Survol à la souris : agrandir le cercle et temporiser le changement de texte. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link:hover,
  .btn-ripple:hover,
  .lgr-form-submit-ripple:hover:not(:disabled) {
    color: var(--ripple-text);
    border-color: var(--ripple-fill);
    transition-delay: 320ms, 0ms;
  }
  .wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link:hover::before,
  .btn-ripple:hover::before,
  .lgr-form-submit-ripple:hover:not(:disabled)::before { transform: translate(-50%, -50%) scale(1); }
}

/* 07. Focus clavier : appliquer immédiatement le remplissage et le contraste. */
.wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link:focus-visible,
.btn-ripple:focus-visible,
.lgr-form-submit-ripple:focus-visible {
  color: var(--ripple-text);
  background: var(--ripple-fill);
  border-color: var(--ripple-fill);
  transition: none;
}

/* 08. Accessibilité : supprimer les transitions si les mouvements sont réduits. */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link,
  .wp-block-button:is(.is-style-ripple-charcoal, .is-style-ripple-rose, .is-style-ripple-vert, .is-style-ripple-brun) > .wp-block-button__link::before,
  .btn-ripple, .btn-ripple::before,
.lgr-form-submit-ripple::before { transition: none; }
}

/* Forminator retains its editable dimensions, fonts and colours; share motion only. */
.lgr-forminator-contact .forminator-ui .lgr-form-submit-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 420ms ease, border-color 420ms ease !important;
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .lgr-forminator-contact .forminator-ui .lgr-form-submit-ripple:hover:not(:disabled) {
    background: var(--ripple-rest) !important;
    color: var(--ripple-text) !important;
    box-shadow: none;
    transition-delay: 320ms, 0ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lgr-forminator-contact .forminator-ui .lgr-form-submit-ripple { transition: none !important; }
}
