/* Yoji Su - styles complementaires (Tailwind fait le gros) */

html { scroll-behavior: smooth; }

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

body > * { position: relative; z-index: 2; }

/* Reveals staggeres au chargement */
.reveal { opacity: 0; transform: translateY(18px); animation: reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.32s; }
.reveal-4 { animation-delay: 0.46s; }
.reveal-5 { animation-delay: 0.6s; }
.reveal-6 { animation-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Lignes fines decoratives */
.hairline { height: 1px; background: currentColor; opacity: 0.2; }
.hairline-v { width: 1px; background: currentColor; opacity: 0.2; }

/* Typo */
.font-display { font-feature-settings: 'ss01' on, 'liga' on; }

/* Cartes produit */
.product-card { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.product-card:hover { transform: translateY(-4px); }
.product-card .img-wrap { overflow: hidden; background: #efe9dc; }
.product-card img { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.product-card:hover img { transform: scale(1.04); }

/* Boutons */
.btn-ink {
  background: #1a1a18; color: #f5f1e8;
  padding: 0.9rem 1.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem;
  transition: background 0.3s, transform 0.2s;
  display: inline-block;
}
.btn-ink:hover { background: #3d2f24; }
.btn-ink:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  border: 1px solid currentColor;
  padding: 0.9rem 1.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem;
  transition: background 0.3s, color 0.3s;
  display: inline-block;
}
.btn-ghost:hover { background: rgba(26,26,24,0.06); }

/* Panier badge */
.cart-badge {
  position: absolute; top: -6px; right: -10px;
  background: #b8503a; color: #f5f1e8;
  min-width: 18px; height: 18px; border-radius: 9999px;
  font-size: 10px; line-height: 18px; text-align: center;
  font-weight: 500;
}

/* Focus visible */
a:focus-visible, button:focus-visible {
  outline: 2px solid #b8503a; outline-offset: 3px;
}

/* Selection */
::selection { background: #b8503a; color: #f5f1e8; }