/* === BACKGROUND PATTERN === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(249,115,22,0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(194,65,12,0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(253,186,116,0.04) 0%, transparent 60%);
}

/* === BANNER PERSISTANT === */
.clic-reflexe-banner {
  position: relative;
  text-align: center;
  padding: 14px 20px 10px;
  background: linear-gradient(135deg, rgba(194,65,12,0.15), rgba(249,115,22,0.08));
  border-bottom: 1px solid rgba(249,115,22,0.18);
  overflow: hidden;
}

/* Cibles décoratives dans le banner */
.banner-targets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
}
.target-deco {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  opacity: 0.25;
  animation: target-banner-float 3.5s ease-in-out infinite;
  will-change: transform;
}
.target-deco.target-orange {
  background: radial-gradient(circle, #fdba74, #f97316);
  animation-delay: 0s;
}
.target-deco.target-rouge {
  background: radial-gradient(circle, #fb923c, #c2410c);
  animation-delay: 0.8s;
  width: 34px;
  height: 34px;
}
@keyframes target-banner-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.1); }
}

/* Titre du banner */
.banner-title {
  position: relative;
  z-index: 1;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, #fdba74, #f97316, #ea580c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.banner-title:hover {
  opacity: 0.85;
}