/* ══ KIKI FLOTTANTE ══ */
.kiki-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 42px;
  height: 42px;
  z-index: 160;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  opacity: 0.85;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kiki-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(167, 139, 250, 0.35));
  transition: filter 0.3s ease;
}

@media (hover: hover) {
  .kiki-float:hover {
    opacity: 1;
    transform: scale(1.15) rotate(6deg);
    animation-play-state: paused;
  }
  .kiki-float:hover img {
    filter: drop-shadow(0 3px 16px rgba(167, 139, 250, 0.5));
  }
}

/* ══ IDLE FLOAT — lemniscate doux (mouvement en 8) ══ */
.kiki-float.kiki-idle {
  animation: kiki-float 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes kiki-float {
  0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
  25%  { transform: translateY(-5px) translateX(2px) rotate(1deg); }
  50%  { transform: translateY(-1px) translateX(0) rotate(2deg); }
  75%  { transform: translateY(-6px) translateX(-2px) rotate(-1deg); }
  100% { transform: translateY(0) translateX(0) rotate(-2deg); }
}

/* ══ CLICK ANIMS (4 variantes aléatoires) ══ */

/* 1. Tournoiement — tour complet + scale */
.kiki-float.spin {
  animation: kiki-spin 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes kiki-spin {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(200deg) scale(1.15); }
  70%  { transform: rotate(330deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 2. Saut joyeux — monte ~25px + rebond + rotation */
.kiki-float.jump {
  animation: kiki-jump 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kiki-jump {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  35%  { transform: translateY(-25px) rotate(6deg) scale(1.08); }
  55%  { transform: translateY(-10px) rotate(-3deg) scale(1.02); }
  70%  { transform: translateY(-18px) rotate(2deg) scale(1.04); }
  85%  { transform: translateY(-4px) rotate(-1deg) scale(1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* 3. Tremblement excité — vibration gauche-droite qui s'atténue */
.kiki-float.shiver {
  animation: kiki-shiver 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes kiki-shiver {
  0%   { transform: translateX(0) scale(1.05); }
  10%  { transform: translateX(-4px) scale(1.06); }
  20%  { transform: translateX(4px) scale(1.05); }
  30%  { transform: translateX(-3px) scale(1.04); }
  40%  { transform: translateX(3px) scale(1.03); }
  50%  { transform: translateX(-2px) scale(1.02); }
  60%  { transform: translateX(2px) scale(1.01); }
  70%  { transform: translateX(-1px) scale(1); }
  80%  { transform: translateX(1px) scale(1); }
  100% { transform: translateX(0) scale(1); }
}

/* 4. Hop hop — 2 petits sauts rapides */
.kiki-float.hophop {
  animation: kiki-hophop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kiki-hophop {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(-15px) scale(1.05); }
  30%  { transform: translateY(0) scale(0.97); }
  35%  { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-15px) scale(1.05); }
  65%  { transform: translateY(0) scale(0.97); }
  75%  { transform: translateY(-4px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* ══ WIGGLE (idle/tips) ══ */
.kiki-float.wiggle {
  animation: kiki-wiggle 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes kiki-wiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-10deg); }
  30%  { transform: rotate(10deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* ══ WAVE (first visit) ══ */
.kiki-float.wave {
  animation: kiki-wave 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kiki-wave {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.12) translateY(-5px); }
  60%  { transform: scale(1.05) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* ══ AGACEMENT : tremblement avant la fuite ══ */
.kiki-float.angry {
  animation: kiki-angry 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes kiki-angry {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-3px) rotate(-4deg); }
  20%  { transform: translateX(3px) rotate(4deg); }
  30%  { transform: translateX(-3px) rotate(-3deg); }
  40%  { transform: translateX(3px) rotate(3deg); }
  50%  { transform: translateX(-2px) rotate(-2deg); }
  60%  { transform: translateX(2px) rotate(2deg); }
  70%  { transform: translateX(-2px) rotate(-1deg); }
  80%  { transform: translateX(1px) rotate(1deg); }
  90%  { transform: translateX(-1px) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ══ FUITE : spirale fluide ══ */
.kiki-float.flee {
  animation: kiki-flee 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes kiki-flee {
  0%   { transform: scale(1) rotate(0deg) translateY(0); opacity: 0.85; }
  20%  { transform: scale(1.2) rotate(120deg) translateY(-15px); opacity: 1; }
  40%  { transform: scale(0.9) rotate(360deg) translateY(-5px); opacity: 0.8; }
  60%  { transform: scale(0.5) rotate(600deg) translateY(15px); opacity: 0.5; }
  80%  { transform: scale(0.2) rotate(900deg) translateY(30px); opacity: 0.2; }
  100% { transform: scale(0) rotate(1080deg) translateY(50px); opacity: 0; }
}

/* ══ COMEBACK : bounce élastique ══ */
.kiki-float.comeback {
  animation: kiki-comeback 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes kiki-comeback {
  0%   { transform: scale(0) translateY(80px) rotate(-120deg); opacity: 0; }
  40%  { transform: scale(1.15) translateY(-8px) rotate(10deg); opacity: 0.9; }
  60%  { transform: scale(0.95) translateY(3px) rotate(-4deg); opacity: 0.85; }
  80%  { transform: scale(1.03) translateY(-1px) rotate(1deg); opacity: 0.85; }
  100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 0.85; }
}

/* ══ SPARKLE ENTRANCE (première visite) ══ */
.kiki-float.sparkle-entrance {
  animation: kiki-sparkle-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}
@keyframes kiki-sparkle-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(6deg); opacity: 1; }
  70%  { transform: scale(0.95) rotate(-2deg); opacity: 0.9; }
  85%  { transform: scale(1.03) rotate(1deg); opacity: 0.85; }
  100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
}

/* ══ Étoiles scintillantes ══ */
.kiki-sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  z-index: 102;
  will-change: transform, opacity;
  animation: sparkle-twinkle 1.2s ease-in-out both;
}
@keyframes sparkle-twinkle {
  0%   { transform: scale(0) rotate(0deg) translateY(0); opacity: 0; }
  20%  { transform: scale(1.1) rotate(30deg) translateY(-3px); opacity: 1; }
  50%  { transform: scale(0.9) rotate(70deg) translateY(-6px); opacity: 0.85; }
  70%  { transform: scale(0.5) rotate(100deg) translateY(-8px); opacity: 0.5; }
  100% { transform: scale(0) rotate(140deg) translateY(-12px); opacity: 0; }
}

/* Ambient sparkles (loop) */
.kiki-ambient-star {
  position: absolute;
  pointer-events: none;
  z-index: 102;
  will-change: transform, opacity;
  animation: ambient-twinkle var(--dur, 2s) ease-in-out both;
}
@keyframes ambient-twinkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  15%  { transform: scale(1) rotate(20deg); opacity: 0.9; }
  40%  { transform: scale(0.7) rotate(50deg); opacity: 0.7; }
  65%  { transform: scale(0.3) rotate(80deg); opacity: 0.4; }
  100% { transform: scale(0) rotate(120deg); opacity: 0; }
}

/* ══ Flash de lumière ══ */
.kiki-flash {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.12), transparent 70%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: kiki-flash-pulse 0.7s ease-out 0.5s both;
  z-index: 99;
}
@keyframes kiki-flash-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
  30%  { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(2); opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}

/* ══ BULLE DE TEXTE ══ */
.kiki-bubble {
  position: absolute;
  bottom: 100%;
  right: -4px;
  margin-bottom: 6px;
  z-index: 101;
  max-width: 220px;
  min-width: 100px;
  padding: 5px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  color: rgba(232, 232, 240, 0.8);
  background: #101e36;
  border: 1px solid rgba(42, 74, 110, 0.4);
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(240, 198, 116, 0.06), 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kiki-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Petit triangle en bas */
.kiki-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 20px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #101e36;
}

/* ══ POOF EXPLOSION (teleport) ══ */
.kiki-float.poof {
  animation: kiki-poof 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes kiki-poof {
  0%   { transform: scale(1) rotate(0deg); opacity: 0.85; }
  40%  { transform: scale(1.4) rotate(15deg); opacity: 1; }
  100% { transform: scale(0) rotate(-30deg); opacity: 0; }
}

.kiki-poof-star {
  position: fixed;
  pointer-events: none;
  z-index: 170;
  will-change: transform, opacity;
  animation: poof-burst var(--dur, 0.6s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes poof-burst {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 30px), var(--dy, -30px)) scale(0) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* ══ TELEPORT ARRIVE ══ */
.kiki-float.teleport-in {
  animation: kiki-teleport-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes kiki-teleport-in {
  0%   { transform: scale(0) rotate(180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(-10deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(3deg); opacity: 0.9; }
  100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  .kiki-float,
  .kiki-float.spin,
  .kiki-float.jump,
  .kiki-float.shiver,
  .kiki-float.hophop,
  .kiki-float.wiggle,
  .kiki-float.wave,
  .kiki-float.angry,
  .kiki-float.flee,
  .kiki-float.comeback,
  .kiki-float.sparkle-entrance,
  .kiki-float.poof,
  .kiki-float.teleport-in {
    animation: none !important;
  }
  .kiki-float { opacity: 0.85; }
  .kiki-float.flee { opacity: 0; transition: opacity 0.3s; }
  .kiki-float.comeback { opacity: 0.85; transition: opacity 0.3s; }
  .kiki-sparkle, .kiki-ambient-star, .kiki-flash, .kiki-poof-star { display: none; }
}