/* circular-button - assets/lib/css/circular-button.css */
/* Conteneur principal */
.circular-button {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton central avec flèche Unicode */
.center-btn {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: transparent;
  color: #000;
  font-size: 50px;
  font-weight: bold;
  border-radius: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.btn-light { color: #dfd8cf !important; }
.btn-white { color: #fff !important; }

.circular-button:hover .center-btn {
  transform: translateX(var(--cb-shift, 10px));
}

/* Texte circulaire */
.circular-text {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  animation: rotateText 20s linear infinite;
}

.circular-text text {
  font-size: 16px;
  letter-spacing: 0.2rem;
  font-weight: bold;
  text-transform: uppercase;
  fill: currentColor;
}

.text-light text { fill: #dfd8cf !important; }
.text-white text { fill: #fff !important; }

/* Animation de rotation */
@keyframes rotateText {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}