/* =============================================================
   Shortcode CTA — [cta_powesco] / [cta_enerlis]
   Style identique au bouton primaire vert du hero (page d'accueil)
   ============================================================= */

.cta-powesco-wrap {
  display: flex;
  justify-content: center;
}

.cta-powesco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  /* Couleurs — vert accent Powesco */
  background-color: #21b593;
  color: #ffffff !important;
  border: 2px solid transparent;

  /* Dimensions — hauteur fixe, largeur au contenu */
  height: 60px;
  padding: 0 10px 0 45px;

  transition:
    background-color 0.3s ease,
    color            0.3s ease,
    border-color     0.3s ease,
    padding          0.3s ease;
}

/* Label */
.cta-powesco-btn__label {
  line-height: 1;
  transition: margin-right 0.3s ease;
}

/* Wrapper icône (espace entre label et cercle) */
.cta-powesco-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Cercle portant la flèche diagonale */
.cta-powesco-btn__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  40px;
  height: 40px;
  border-radius: 30px;
  background-color: transparent;
  color: #d4f7a5; /* flèche vert clair au repos */
  transition:
    background-color 0.3s ease,
    color            0.3s ease,
    transform        0.3s ease;
}

/* Hover / focus : décalage du label, cercle vert foncé, flèche pivotée */
.cta-powesco-btn:hover,
.cta-powesco-btn:focus-visible {
  padding-left: 25px;
}

.cta-powesco-btn:hover .cta-powesco-btn__label,
.cta-powesco-btn:focus-visible .cta-powesco-btn__label {
  margin-right: 20px;
}

.cta-powesco-btn:hover .cta-powesco-btn__circle,
.cta-powesco-btn:focus-visible .cta-powesco-btn__circle {
  background-color: #025253;
  color: #d4f7a5;
  transform: rotate(45deg);
}