/* Floating Badges Section */
.floating-badges {
  position: relative;
  padding: 96px 0;
  background: #fafafa;
}
.floating-badges__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.floating-badges__header {
  text-align: center;
  margin-bottom: 32px;
}
.floating-badges__title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}
.floating-badges__highlight {
  display: inline-block;
  background: linear-gradient(90deg,#ef4444,#f59e0b,#8b5cf6,#06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.floating-badges__subtitle {
  max-width: 760px;
  margin: 16px auto 0;
  color: #334155;
  font-size: 18px;
  text-wrap: pretty;
  word-break: keep-all;
}
.floating-badges__downloads { 
  display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; color: #475569; 
}
.download-label { margin-right: 8px; }
.download-btn { 
  width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.download-btn:hover { background: #f8fafc; }

/* Stage */
.floating-badges__stage {
  position: relative;
  height: 420px;
  margin-top: 20px;
}
.assistant-bot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%);
}
.assistant-bot__svg { width: clamp(220px, 30vw, 320px); height: auto; display: block; }
.assistant-bot__svg * { vector-effect: non-scaling-stroke; }

/* Badge stacks */
.badge-stack { list-style: none; margin: 0; padding: 0; position: absolute; display: grid; gap: 12px; }

/* Positioning for each stack */
.badge-stack.top { 
  top: 8%; 
  left: 50%; 
  transform: translateX(-50%); 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px 20px; 
  width: 400px; 
}

.badge-stack.left { 
  left: 8%; 
  top: 25%; 
  max-width: 200px; 
}

.badge-stack.right { 
  right: 8%; 
  top: 25%; 
  max-width: 200px; 
}

.badge-stack.bottom { 
  bottom: 8%; 
  left: 50%; 
  transform: translateX(-50%); 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px 20px; 
  width: 400px; 
}

.badge-pill { 
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 9999px; background: #fff; color: #0f172a; font-weight: 600; box-shadow: 0 8px 32px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
  border: 1px solid rgba(226,232,240,.8);
  white-space: nowrap;
  font-size: 14px;
  transition: all 0.2s ease;
}

.badge-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(2,6,23,.12), 0 4px 12px rgba(2,6,23,.08);
}

/* Subtle offsets for natural look */
.badge-stack.top .badge-pill:nth-child(odd) { transform: translateY(-4px); }
.badge-stack.top .badge-pill:nth-child(even) { transform: translateY(4px); }

.badge-stack.left .badge-pill:nth-child(odd) { transform: translateX(-6px); }
.badge-stack.left .badge-pill:nth-child(even) { transform: translateX(8px); }

.badge-stack.right .badge-pill:nth-child(odd) { transform: translateX(8px); }
.badge-stack.right .badge-pill:nth-child(even) { transform: translateX(-6px); }

.badge-stack.bottom .badge-pill:nth-child(odd) { transform: translateY(4px); }
.badge-stack.bottom .badge-pill:nth-child(even) { transform: translateY(-4px); }

@media (max-width: 768px) {
  .badge-stack { position: relative; grid-template-columns: 1fr 1fr; }
}
.badge-pill .dot { width: 8px; height: 8px; border-radius: 9999px; background: #3B82F6; display: inline-block; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* Responsive */
@media (max-width: 1024px) {
  .assistant-bot__svg { width: 260px; height: 260px; }
  .badge-stack.top, .badge-stack.bottom { width: 350px; }
  .badge-stack.left { left: 6%; }
  .badge-stack.right { right: 6%; }
}

@media (max-width: 768px) {
  .floating-badges { padding: 30px 0 28px; }
  .floating-badges__container { padding: 0 10px; }
  .floating-badges__title { font-size: clamp(19px, 6.2vw, 26px); line-height: 1.12; }
  .floating-badges__subtitle { font-size: 14px; line-height: 1.5; margin: 6px auto 0; padding: 0 6px; }
  .floating-badges__stage { height: 300px; padding: 0; }
  .assistant-bot { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0; }
  .assistant-bot__svg { width: clamp(138px, 48vw, 186px); height: auto; }

  /* Mobile layout: circular ring retained */
  .badge-stack { 
    position: relative; 
    grid-template-columns: 1fr; 
    gap: 10px; 
    margin: 16px 0;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .badge-stack.top { order: 1; }
  .badge-stack.left { order: 2; }
  .badge-stack.right { order: 3; }
  .badge-stack.bottom { order: 4; }

  .badge-pill { 
    font-size: 12.5px; 
    padding: 8px 12px;
    justify-content: center;
  }

  /* Reset transforms on mobile */
  .badge-stack .badge-pill { transform: none !important; }

  /* Remove downloads styles */
  .floating-badges__downloads, .download-label, .download-btn { display: none; }
}
/* Variant: influencers at bottom */
.floating-badges--influencers { 
  background: #fff; 
  padding-bottom: 32px; /* réduit pour rapprocher de la section pricing */
}
.floating-badges--influencers .floating-badges__container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px; }
.floating-badges--influencers .floating-badges__header { text-align: left; margin: 0; }
.floating-badges--influencers .floating-badges__stage { height: 380px; margin-top: 0; }

@media (max-width: 1024px) {
  .floating-badges--influencers { padding-bottom: 28px; }
  .floating-badges--influencers .floating-badges__container { grid-template-columns: 1fr; }
  .floating-badges--influencers .floating-badges__header { text-align: center; }
  .floating-badges--influencers .floating-badges__stage { height: auto; margin-top: 20px; }
}

@media (max-width: 768px) {
  .floating-badges--influencers { padding-bottom: 20px; }
}

@media (max-width: 480px) {
  .floating-badges--influencers { padding-bottom: 16px; }
}
/* Gravity square for influencer variant */
.floating-badges--influencers .gravity-box {
  position: relative;
  width: 100%;
  max-width: 480px; /* slightly smaller to prevent overflow */
  max-height: 480px; /* prevents vertical overflow */
  aspect-ratio: 1 / 1; /* square */
  margin-left: auto;
  margin-right: 0;
  border-radius: 16px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,0.08), rgba(139,92,246,0.06) 35%, rgba(2,6,23,0.02) 100%);
  border: 1px solid rgba(226,232,240,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 30px 80px rgba(2,6,23,.12), 0 8px 20px rgba(2,6,23,.08);
  overflow: hidden;
}

.floating-badges--influencers .gravity-box::before {
  content: "";
  position: absolute; inset: -20% -20% auto auto; width: 60%; height: 60%;
  background: radial-gradient(circle at top right, rgba(59,130,246,.15), rgba(139,92,246,.08), transparent 60%);
  filter: blur(20px); pointer-events: none;
}

/* Float chips are positioned containers that handle the floating animation */
.floating-badges--influencers .gravity-box .float-chip {
  position: absolute;
  animation: floatY 6s ease-in-out infinite;
  cursor: grab;
  transition: transform 0.3s ease;
  will-change: transform;
  touch-action: none; /* enable smooth pointer interactions without scrolling */
  user-select: none;
}
.floating-badges--influencers .gravity-box .float-chip:active { cursor: grabbing; }

/* Physics mode: disable CSS animations and transforms that fight the engine */
.floating-badges--influencers .gravity-box.physics-mode .float-chip { 
  animation: none !important; 
  transition: none !important;
}
.floating-badges--influencers .gravity-box.physics-mode .float-chip .badge-pill { 
  transform: none !important; 
}

/* Badge pills float inside their containers */
.floating-badges--influencers .gravity-box .badge-pill {
  position: relative;
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 8px 32px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
  transition: all 0.25s ease;
  transform: rotate(0deg); /* override any inherited rotation */
}

/* Positioned seeds similar to screenshot - now on .float-chip */
.floating-badges--influencers .gravity-box .p1 { left: 56%; bottom: 18%; transform: rotate(-8deg); }
.floating-badges--influencers .gravity-box .p2 { left: 44%; bottom: 36%; transform: rotate(2deg); }
.floating-badges--influencers .gravity-box .p3 { left: 66%; bottom: 36%; transform: rotate(3deg); }
.floating-badges--influencers .gravity-box .p4 { left: 38%; bottom: 12%; transform: rotate(-4deg); }
.floating-badges--influencers .gravity-box .p5 { left: 20%; bottom: 24%; transform: rotate(-10deg); }
.floating-badges--influencers .gravity-box .ptop { left: 32%; bottom: 56%; transform: rotate(0deg); }
.floating-badges--influencers .gravity-box .ptop .badge-pill { background: #f4e8ff; }

/* Interactive effects */
.floating-badges--influencers .gravity-box .float-chip:hover .badge-pill,
.floating-badges--influencers .gravity-box .float-chip:active .badge-pill {
  transform: translate(8px, -12px) scale(1.05);
  box-shadow: 0 16px 48px rgba(2,6,23,.15), 0 6px 16px rgba(2,6,23,.1);
  z-index: 10;
}
/* In physics mode, keep hover neutral so engine controls the motion */
.floating-badges--influencers .gravity-box.physics-mode .float-chip:hover .badge-pill,
.floating-badges--influencers .gravity-box.physics-mode .float-chip:active .badge-pill {
  transform: none !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.10), 0 2px 8px rgba(2,6,23,.06);
}

/* Float animation now respects dynamic offsets via CSS variables */
@keyframes floatY {
  0%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }
  50% { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) - 8px)) rotate(calc(var(--rot, 0deg) + 2deg)); }
}

/* Give each chip a different phase for more natural motion */
.floating-badges--influencers .gravity-box .p1 { animation-delay: 0s; --rot: -8deg; }
.floating-badges--influencers .gravity-box .p2 { animation-delay: .4s; --rot: 2deg; }
.floating-badges--influencers .gravity-box .p3 { animation-delay: .8s; --rot: 3deg; }
.floating-badges--influencers .gravity-box .p4 { animation-delay: 1.2s; --rot: -4deg; }
.floating-badges--influencers .gravity-box .p5 { animation-delay: 1.6s; --rot: -10deg; }
.floating-badges--influencers .gravity-box .ptop { animation-delay: 2s; --rot: 0deg; }

@media (max-width: 1024px) {
  .floating-badges--influencers .gravity-box { max-width: 100%; }
}

/* Personas grid (influencers variant without gravity) */
.floating-badges--influencers .personas { margin-top: 8px; }
.floating-badges--influencers .personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 8px 0;
}
.floating-badges--influencers .personas-grid .badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 6px 18px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.floating-badges--influencers .personas-grid .badge-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,6,23,.10), 0 4px 12px rgba(2,6,23,.08);
  border-color: rgba(203,213,225,.9);
}
@media (max-width: 768px) {
  .floating-badges--influencers .personas-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
}

/* Badge ring layout around assistant bot */
.badge-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  pointer-events: none; /* container non interactif, badges interactifs */
}
.badge-ring .badge-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  --radius: 190px;
  pointer-events: auto;
  white-space: nowrap;
  z-index: 1; /* s'assurer d'un empilement de base */
}
/* mettre en avant les deux badges qui se chevauchent */
.badge-ring .badge-pill:nth-child(1),
.badge-ring .badge-pill:nth-child(7) {
  --radius: 205px; /* éloigne légèrement du centre pour plus d'espace d'arc */
  z-index: 3; /* passer au-dessus des voisins */
}
/* distribution circulaire */
.badge-ring .badge-pill:nth-child(1)  { transform: translate(-50%, -50%) rotate(-96deg) translate(var(--radius)) rotate(96deg); }
.badge-ring .badge-pill:nth-child(2)  { transform: translate(-50%, -50%) rotate(-66deg) translate(var(--radius)) rotate(66deg); }
.badge-ring .badge-pill:nth-child(3)  { transform: translate(-50%, -50%) rotate(-34deg) translate(var(--radius)) rotate(34deg); }
.badge-ring .badge-pill:nth-child(4)  { transform: translate(-50%, -50%) rotate(-2deg)  translate(var(--radius)) rotate(2deg); }
.badge-ring .badge-pill:nth-child(5)  { transform: translate(-50%, -50%) rotate(26deg)  translate(var(--radius)) rotate(-26deg); }
.badge-ring .badge-pill:nth-child(6)  { transform: translate(-50%, -50%) rotate(54deg)  translate(var(--radius)) rotate(-54deg); }
.badge-ring .badge-pill:nth-child(7)  { transform: translate(-50%, -50%) rotate(88deg)  translate(var(--radius)) rotate(-88deg); }
.badge-ring .badge-pill:nth-child(8)  { transform: translate(-50%, -50%) rotate(116deg) translate(var(--radius)) rotate(-116deg); }
.badge-ring .badge-pill:nth-child(9)  { transform: translate(-50%, -50%) rotate(144deg) translate(var(--radius)) rotate(-144deg); }
.badge-ring .badge-pill:nth-child(10) { transform: translate(-50%, -50%) rotate(172deg) translate(var(--radius)) rotate(-172deg); }
.badge-ring .badge-pill:nth-child(11) { transform: translate(-50%, -50%) rotate(200deg) translate(var(--radius)) rotate(-200deg); }
.badge-ring .badge-pill:nth-child(12) { transform: translate(-50%, -50%) rotate(228deg) translate(var(--radius)) rotate(-228deg); }
.badge-ring .badge-pill:nth-child(13) { transform: translate(-50%, -50%) rotate(246deg) translate(var(--radius)) rotate(-246deg); }

/* ajustements pour tablettes */
@media (max-width: 1024px) {
  .badge-ring { width: 420px; height: 420px; }
  .badge-ring .badge-pill { --radius: 160px; font-size: 13px; }
}

/* layout mobile: liste verticale pour lisibilité */
@media (max-width: 768px) {
  .badge-ring {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    margin-top: 0;
  }
  .badge-ring .badge-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    justify-content: initial;
    --radius: 115px;
    font-size: 12px;
    padding: 8px 12px;
    gap: 6px;
  }
  .badge-ring .badge-pill:nth-child(1),
  .badge-ring .badge-pill:nth-child(7) {
    --radius: 115px; /* même rayon que les autres pour ne pas s’éloigner */
    z-index: 2;
  }
}