/* =========================================================
   Boutons v4 — le survol demandé :
   au repos, pilule et cercle séparés de 8 px ;
   au survol, le FOND de la pilule s'étire vers la droite et
   passe SOUS le cercle (la flèche ne bouge pas d'un pixel).

   Géométrie : l'extension est un pseudo-élément à bout ARRONDI
   (rayon 24 = rayon du cercle) qui s'arrête PILE au centre du
   cercle → à l'arrivée, bout arrondi et cercle coïncident :
   capsule parfaite, et la forme reste propre PENDANT toute la
   transition (jamais de coin carré visible).
   Aucune propriété de layout ne change : zéro déplacement.
   ========================================================= */

.cq-btn .elementor-button-text{position:relative;z-index:1}
.cq-btn .elementor-button-icon{position:relative;z-index:2}

.cq-btn .elementor-button-text::after{
  content:""!important;display:block!important;
  position:absolute;top:0;bottom:0;left:0;width:100%;
  background:inherit;border-radius:999px;z-index:-1;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
/* extension jusqu'au centre du cercle : 8 (écart) + 24 (rayon) = +32,
   bout arrondi rayon 24 → il faut avancer de 32 + 24 = +56 au total */
.cq-btn:hover .elementor-button-text::after{width:calc(100% + 56px)}
.cq-btn--sm .elementor-button-text::after{transition-duration:.35s}
.cq-btn--sm:hover .elementor-button-text::after{width:calc(100% + 48px)}

/* la pilule elle-même ne change RIEN au survol */
.cq-btn:hover .elementor-button-text{
  padding-right:26px!important;margin-right:0!important;border-radius:999px!important;
  filter:none!important;
}
.cq-btn--sm:hover .elementor-button-text{padding-right:18px!important}
.cq-btn:hover .elementor-button-icon{filter:none!important}
.cq-btn:hover .elementor-button-icon svg{transform:none!important}

/* fantôme : aucune extension */
.cq-btn--ghost .elementor-button-text::after{content:none!important;display:none!important}
.cq-btn--ghost:hover .elementor-button-text{padding:0!important}

/* Bouton flottant : même mécanique */
.cq-flottant__t{position:relative;z-index:1}
.cq-flottant__i{position:relative;z-index:2}
.cq-flottant__t::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:100%;
  background:#E83E33;border-radius:999px;z-index:-1;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
.cq-flottant:hover .cq-flottant__t::after{width:calc(100% + 56px)}
.cq-flottant:hover .cq-flottant__t,.cq-flottant:hover .cq-flottant__i{filter:none!important}