/**
 * Onify Spotlight - styles du guide "tuto" (cf. public/assets/js/shared/spotlight.js).
 * Fond assombri avec un "trou" sur l'element, anneau qui pulse, faux curseur qui
 * tape, bulle "Cliquez ici". z-index tres eleve = au-dessus de tout (modales incluses).
 * Couleur d'accent : var(--accent) si dispo (theme Onify), sinon repli #6e88a8.
 */

.onify-spot-ring {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none; /* n'empeche pas de cliquer la cible ni la page */
  border-radius: 8px;    /* remplace en JS par le border-radius reel de la cible */
  /* Pas de fond assombri : juste un halo doux qui epouse la forme du bouton. */
  transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease;
}
.onify-spot-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit; /* -> suit le bouton (arrondi), pas un cadre carre */
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #6e88a8) 55%, transparent),
    0 0 16px 4px color-mix(in srgb, var(--accent, #6e88a8) 40%, transparent);
  animation: onifySpotPulse 1.15s ease-in-out infinite;
}
@keyframes onifySpotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.5; }
}

/* Faux curseur de souris (fleche) qui "tape" + onde. */
.onify-spot-cursor {
  position: fixed;
  z-index: 2147483001;
  pointer-events: none;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transform-origin: 12% 12%;
  animation: onifySpotTap 1.15s ease-in-out infinite;
}
.onify-spot-cursor svg { display: block; }
.onify-spot-ripple {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent, #6e88a8);
  opacity: 0;
  animation: onifySpotRipple 1.15s ease-out infinite;
}
@keyframes onifySpotTap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(-3px, -3px) scale(0.9); }
  62% { transform: translate(0, 0) scale(1); }
}
@keyframes onifySpotRipple {
  0% { transform: scale(0.4); opacity: 0.7; }
  70%, 100% { transform: scale(2.3); opacity: 0; }
}

/* Bulle "Cliquez ici" au-dessus de la cible. */
.onify-spot-tip {
  position: fixed;
  z-index: 2147483002;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: #1f2330;
  color: #fff;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.onify-spot-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 9px;
  height: 9px;
  background: #1f2330;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

/* La cible mise en avant (repere JS ; le "trou" la laisse deja en pleine lumiere). */
.onify-spot-on { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .onify-spot-ring::after,
  .onify-spot-cursor,
  .onify-spot-ripple { animation: none !important; }
}