/* ===== Base & reset ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== Glassmorphism ===== */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-dark {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ===== Thème boutique (paramètres admin) ===== */
.bg-shop-primary { background-color: var(--shop-primary); }
.bg-shop-primary:hover,
.hover\:bg-shop-primary-hover:hover { background-color: var(--shop-primary-hover); }
.text-shop-accent { color: var(--shop-accent); }
.ring-shop-primary\/20 { --tw-ring-color: color-mix(in srgb, var(--shop-primary) 20%, transparent); }

.btn-shop {
  background-color: var(--shop-primary);
  color: #fff;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-shop:hover { background-color: var(--shop-primary-hover); }
.btn-shop:active { transform: scale(0.98); }

.shop-hero {
  background: linear-gradient(135deg, var(--shop-hero-from) 0%, var(--shop-hero-to) 100%);
}
.shop-hero-badge { color: var(--shop-accent); }
.shop-hero-glow {
  background-color: color-mix(in srgb, var(--shop-accent) 35%, transparent);
}

.border-shop-primary { border-color: var(--shop-primary); }
.zone-option--active {
  border-color: var(--shop-primary) !important;
  background: color-mix(in srgb, var(--shop-primary) 6%, white);
}

/* Checkout validation */
.checkout-field-error {
  border-color: #f87171 !important;
  background-color: #fef2f2 !important;
}
.checkout-field-error:focus {
  ring-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.checkout-zone-error {
  border-radius: 1rem;
  padding: 0.25rem;
  background: #fef2f2;
  outline: 2px solid #fecaca;
  outline-offset: 2px;
}
.checkout-alert-enter {
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hover\:bg-shop-primary:hover { background-color: var(--shop-primary); }
.hover\:text-shop-primary:hover { color: var(--shop-primary); }

/* ===== Product cards ===== */
.product-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  min-width: 0; /* évite le débordement en grille CSS */
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
}

/* ===== Quantity buttons ===== */
.qty-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #525252;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qty-btn:hover { background: #f5f5f5; border-color: #d4d4d4; }
.qty-btn:active { transform: scale(0.94); }

/* ===== Lazy images ===== */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.45s ease;
}

img[loading="lazy"].loaded,
img:not([loading="lazy"]) {
  opacity: 1;
}

/* ===== Scrollbar ===== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

.admin-scroll::-webkit-scrollbar { width: 6px; }
.admin-scroll::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 3px;
}

/* ===== Swiper ===== */
.swiper-pagination-bullet-active {
  background: #171717 !important;
}

/* ===== Populaires — défilement horizontal ===== */
.popular-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 1rem;
}

.popular-scroll__item {
  display: flex;
  flex-direction: column;
}

.popular-scroll__item .product-card--compact {
  width: 100%;
  flex: 1;
}

/* Pas de hover lift en scroll horizontal sur mobile */
@media (max-width: 639px) {
  .popular-scroll .product-card:hover {
    transform: none;
  }
}

/* ===== Mobile safe area ===== */
.pb-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* ===== Alpine cloak ===== */
[x-cloak] { display: none !important; }

/* ===== Hero accent glow ===== */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

/* ===== Focus visible ===== */
:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}

/* ===== Selection ===== */
::selection {
  background: #c9a227;
  color: #fff;
}