/* =============================================
   signature.css — Identité visuelle Slystore
   Effets signature : grille circuit, glow, scan-line
   ============================================= */

/* Fond circuit subtil sur le hero */
.hero {
  position: relative;
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}
.hero::before {
  background: radial-gradient(circle, rgba(0,229,255,.10) 0%, transparent 65%) !important;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: .5;
}

/* Logo nav avec glow subtil */
.nav-logo {
  text-shadow: 0 0 18px rgba(0,229,255,.25);
}
.nav-logo span { color: var(--orange); }

/* Eyebrow — style "signal actif" */
.hero-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  background: rgba(0,229,255,.08) !important;
  border-color: rgba(0,229,255,.3) !important;
}
.hero-eyebrow::before {
  content: '●';
  color: var(--green);
  margin-right: 2px;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* Cartes produit — glow circuit au survol */
.product-card {
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, var(--orange) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.product-card:hover::before { opacity: 1; }

/* Rank badge — style "node" circuit */
.card-rank {
  font-family: var(--font-mono);
  box-shadow: 0 0 0 3px var(--black), 0 0 0 4px rgba(0,229,255,.2);
}
.card-rank.top3 {
  background: var(--orange) !important;
  color: var(--black) !important;
  box-shadow: var(--glow);
}

/* Prix — accent mono pour feel "specs techniques" */
.price-current {
  font-family: var(--font-display);
  letter-spacing: -.5px;
}

/* Filtres actifs avec glow */
.filter-btn.active {
  box-shadow: var(--glow);
}

/* Bouton Amazon — micro glow au hover */
.btn-amazon:hover {
  box-shadow: 0 0 16px rgba(0,229,255,.5);
}

/* Stats hero — feel "dashboard" */
.hero-stat-num {
  font-family: var(--font-mono);
  text-shadow: 0 0 12px rgba(0,229,255,.3);
}

/* Scrollbar custom (webkit) — signature subtile */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-dk); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow::before { animation: none; }
  .product-card, .product-card::before { transition: none; }
}