/* =======================================================================
   Neuromotrix Button – module personnalisé
   - Effet diagonal masqué par un sous-conteneur
   - Petit rond cliquable qui dépasse
   - Couleurs via variables Neuromotrix
   - Compatible Beaver Builder + shortcode
   ======================================================================= */

/* --------- Conteneur principal du bouton --------- */
/* Fonctionne autant dans Beaver que via shortcode */
.nm-button {
  position: relative;
  display: block;     /* pour que text-align sur le wrapper fonctionne */
  width: 100%;
}

/* --------- Variantes couleur --------- */
.nm-button.btn--primaire   { --btn-bg: var(--nm-global-500-bleu-neuromotrix---primaire); }
.nm-button.btn--cyan       { --btn-bg: var(--nm-global-cyan-neuromotrix); }
.nm-button.btn--rose       { --btn-bg: var(--nm-global-rose-neuromotrix); }
.nm-button.btn--orange     { --btn-bg: var(--nm-global-orange-neuromotrix); }
.nm-button.btn--vert       { --btn-bg: var(--nm-global-vert-neuromotrix); }
.nm-button.btn--gris       { --btn-bg: var(--nm-global-gris-neuromotrix); }

/* --------- Lien principal --------- */
.nm-button .fl-button,
.nm-button .fl-button:visited {
  position: relative;
  display: inline-block; /* pour que text-align du parent aligne le bouton */
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  text-decoration: none;
  overflow: visible;
  isolation: isolate;
  z-index: 1;

  /* iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.nm-button .fl-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* --------- Zone clip (fond du bouton) --------- */
.nm-button .nm-button__clip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-y, 12px) var(--pad-x, 24px);
  border-radius: var(--btn-radius, 15px);
  background-color: var(--btn-bg) !important;
  overflow: hidden;
  z-index: 1;
}

/* --------- Effet diagonal --------- */
.nm-button.btn--effect-light .nm-button__clip::before {
  content: "";
  position: absolute;
  top: -2.5%;
  left: -10%;
  width: 120%;
  height: 110%;
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  transform: translateX(-90%);
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Survol : la forme glisse sur le bouton */
.nm-button.btn--effect-light .fl-button:hover .nm-button__clip::before {
  transform: translateX(5%);
}

/* --------- Petit rond décoratif --------- */
.nm-button .nm-button-dot {
  position: absolute;
  bottom: 3px;
  right: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--btn-bg);
  z-index: 2;
  pointer-events: auto;
}

/* --------- Texte --------- */
.nm-button .fl-button-text {
  position: relative;
  z-index: 1;
}

/* --------- Neutralisation du padding Beaver sur ce module uniquement --------- */
.fl-module-nm-button a.fl-button,
.fl-module-nm-button a.fl-button:visited {
  padding: 0 24px 12px 0 !important;
}

/* --------- Mode édition Beaver : zone clic un peu plus large --------- */
body.fl-builder-edit .fl-module-nm-button .fl-module-content {
  padding-top: 10px; /* espace tampon pour capturer les clics Beaver */
}

/* =======================================================================
   DEBUG (manuel – décommenter pour vérifier les zones)
   ======================================================================= */
/*
.nm-button .nm-button__clip {
  overflow: visible !important;
}
.nm-button.btn--effect-light .nm-button__clip::before {
  background: rgba(0, 200, 255, 0.4) !important;
  border: 2px solid red !important;
  z-index: 2 !important;
}
.nm-button .fl-button {
  background: rgba(0,255,0,0.15) !important;
}
*/