/* ==========================================================================
   Fichier CSS : Réplique EXACTE et 100% FONCTIONNELLE de "silly-cat-86"
   Conçu spécialement pour un texte brut dans <a class="button">
   ========================================================================== */

.button {
  --btn-bg: #da605f;         /* Couleur principale */
  --btn-bg-hover: #597231;    /* Couleur au survol */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  color: #252525 !important;  /* Le texte reste TOUJOURS au-dessus */
  background-color: transparent; /* On rend le fond transparent pour voir l'animation derrière */
  border-radius: 10rem;
  padding: 12px 24px;
  padding-right: 3.8rem;      /* Espace pour accueillir la bulle blanche */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Effets de survol sur le conteneur global */
.button:hover {
  box-shadow: 0 6px 4px rgb(0 0 0 / 18%);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px);
}

/* LE FOND : Placé en arrière-plan pour ne pas bloquer le texte */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--btn-bg);
  z-index: -2; /* Tout au fond */
  transition: background-color 0.3s ease;
}

/* LA BULLE BLANCHE + FLÈCHE SVG (UIVERSE) */
.button::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 34px;
  height: 34px;
  background-color: #ffffff;
  border-radius: 50%;
  z-index: -1; /* Derrière le texte, mais devant le fond initial */
  
  /* Flèche droite horizontale exacte d'Uiverse avec la couleur #da605f */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z' fill='%23da605f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  
  /* Effet de transition d'expansion original d'Uiverse */
  transition: transform 0.5s cubic-bezier(0.3, 1, 0.4, 1), background-color 0.4s ease, background-image 0.3s ease;
}

/* L'ANIMATION EXACTE AU SURVOL */
.button:hover::after {
  background-color: var(--btn-bg-hover); /* La bulle devient la couleur de fond au survol */
  transform: translateY(-50%) scale(2);  /* Ajusté à 5 ou 7 pour recouvrir l'intégralité du bouton */
  
  /* La flèche passe en blanc pour rester visible sur le fond coloré */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z' fill='%23ffffff'/%3E%3C/svg%3E");
}