/* =========================================================================
   CYBERGEAR - Luxury Override Stylesheet
   Palette: Navy deep + Gold amber (charte logo) + Cream + Pearl white
   Objectifs: feel premium, lisibilite, micro-interactions, mise en avant offres
   Ne change pas la structure: surcharge uniquement les styles visuels.
   ========================================================================= */

:root {
  --lx-navy-900: #0a1628;
  --lx-navy-800: #10233e;
  --lx-navy-700: #1a3458;
  --lx-navy-600: #24477a;
  --lx-blue-500: #2b6cb0;
  --lx-cyan-400: #38b6d6;
  --lx-gold-600: #c8922a;
  --lx-gold-500: #e0a63e;
  --lx-gold-400: #f0c060;
  --lx-cream: #faf6ee;
  --lx-pearl: #ffffff;
  --lx-ink: #1c2433;
  --lx-ink-soft: #4a556b;
  --lx-line: rgba(10, 22, 40, 0.08);

  --lx-shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.06);
  --lx-shadow-md: 0 6px 20px rgba(10, 22, 40, 0.08);
  --lx-shadow-lg: 0 18px 40px rgba(10, 22, 40, 0.12);
  --lx-shadow-gold: 0 8px 24px rgba(224, 166, 62, 0.25);

  --lx-radius-sm: 8px;
  --lx-radius-md: 14px;
  --lx-radius-lg: 20px;

  --lx-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --lx-dur: 280ms;

  --lx-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --lx-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local("Inter");
}

/* ---------- Base typography ---------- */
body, #app {
  font-family: var(--lx-sans) !important;
  color: var(--lx-ink) !important;
  background: var(--lx-cream) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4,
.hero-title, .section-title, .product-title,
[class*="titre"], [class*="title-"] {
  font-family: var(--lx-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--lx-navy-900);
}

h1, .hero-title { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }

a { transition: color var(--lx-dur) var(--lx-ease); }
a:hover { color: var(--lx-gold-600); }

/* ---------- Header / Navbar ---------- */
header, .navbar, nav.navbar, .header-main, .top-bar {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,246,238,0.88) 100%) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lx-line);
  box-shadow: var(--lx-shadow-sm);
}

.navbar .nav-link, .navbar a, header a {
  color: var(--lx-navy-800) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color var(--lx-dur) var(--lx-ease);
}

.navbar .nav-link::after, header a.nav-link::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4px;
  height: 2px;
  background: var(--lx-gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--lx-dur) var(--lx-ease);
}
.navbar .nav-link:hover::after, header a.nav-link:hover::after { transform: scaleX(1); }
.navbar .nav-link:hover { color: var(--lx-gold-600) !important; }

/* ---------- Buttons ---------- */
.btn,
button.btn-primary,
button.btn-success,
button.btn-danger,
.btn-outline-primary,
.btn-outline-success {
  border-radius: var(--lx-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.4rem !important;
  transition: all var(--lx-dur) var(--lx-ease);
  border-width: 1.5px !important;
}

.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, var(--lx-navy-800), var(--lx-navy-600)) !important;
  border-color: var(--lx-navy-800) !important;
  color: var(--lx-pearl) !important;
  box-shadow: var(--lx-shadow-sm);
}
.btn-primary:hover, button.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--lx-shadow-md);
  background: linear-gradient(135deg, var(--lx-navy-900), var(--lx-navy-700)) !important;
}

.btn-success, button.btn-success {
  background: linear-gradient(135deg, var(--lx-gold-600), var(--lx-gold-400)) !important;
  border-color: var(--lx-gold-600) !important;
  color: var(--lx-navy-900) !important;
  font-weight: 700 !important;
  box-shadow: var(--lx-shadow-sm);
}
.btn-success:hover, button.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: var(--lx-shadow-gold);
  filter: brightness(1.05);
}

.btn-outline-primary {
  background: transparent !important;
  color: var(--lx-navy-800) !important;
  border-color: var(--lx-navy-800) !important;
}
.btn-outline-primary:hover {
  background: var(--lx-navy-800) !important;
  color: var(--lx-pearl) !important;
}

/* ---------- Product cards ---------- */
.card,
.product-card,
[class*="product-item"],
.item-card {
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-radius-md) !important;
  background: var(--lx-pearl) !important;
  box-shadow: var(--lx-shadow-sm);
  overflow: hidden;
  transition: transform var(--lx-dur) var(--lx-ease),
              box-shadow var(--lx-dur) var(--lx-ease);
  position: relative;
}

.card:hover,
.product-card:hover,
[class*="product-item"]:hover,
.item-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lx-shadow-lg);
  border-color: rgba(200, 146, 42, 0.25);
}

.card img, .product-card img, [class*="product-item"] img {
  transition: transform 600ms var(--lx-ease);
}
.card:hover img, .product-card:hover img, [class*="product-item"]:hover img {
  transform: scale(1.04);
}

.card-body, .product-body {
  padding: 1.1rem 1.25rem !important;
}

.card-title, .product-title {
  font-family: var(--lx-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--lx-navy-900) !important;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price: make it feel important + luxe */
.price, .product-price, [class*="prix"], .amount {
  font-family: var(--lx-sans);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--lx-navy-900);
  letter-spacing: -0.01em;
}
.price-old, [class*="old-price"], .text-decoration-line-through {
  color: var(--lx-ink-soft) !important;
  font-weight: 400 !important;
  font-size: 0.9em !important;
}

/* Promo / discount badge - golden emphasis */
.badge-promo, .promo-badge, .discount-badge, [class*="-promo"], .badge-danger, .badge.bg-danger {
  background: linear-gradient(135deg, var(--lx-gold-600), var(--lx-gold-400)) !important;
  color: var(--lx-navy-900) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  padding: 0.35em 0.7em !important;
  border-radius: 999px !important;
  box-shadow: var(--lx-shadow-sm);
  text-transform: uppercase;
  font-size: 0.72rem !important;
}

/* ---------- Hero / Banner ---------- */
.hero, .banner, .main-banner, .carousel-item, [class*="Banner"] {
  position: relative;
  overflow: hidden;
}

.hero::before, .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10, 22, 40, 0.35) 0%,
    rgba(10, 22, 40, 0.1) 40%,
    rgba(224, 166, 62, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero > *, .banner > * { position: relative; z-index: 2; }

/* ---------- Sections ---------- */
section, .section {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.section-heading, .section-title {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
}
.section-heading::after, .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--lx-gold-600), var(--lx-gold-400));
  border-radius: 2px;
}
.section-heading.text-center::after, .section-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Inputs ---------- */
input.form-control, select.form-select, textarea.form-control, .input-group input {
  border-radius: var(--lx-radius-sm) !important;
  border: 1px solid var(--lx-line) !important;
  padding: 0.65rem 0.9rem !important;
  background: var(--lx-pearl) !important;
  transition: border-color var(--lx-dur) var(--lx-ease),
              box-shadow var(--lx-dur) var(--lx-ease);
}
input.form-control:focus, select.form-select:focus, textarea.form-control:focus {
  border-color: var(--lx-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(224, 166, 62, 0.18) !important;
  outline: 0;
}

/* ---------- Footer ---------- */
footer, .footer {
  background: var(--lx-navy-900) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lx-gold-500), transparent);
}
footer a, .footer a {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color var(--lx-dur) var(--lx-ease);
}
footer a:hover, .footer a:hover { color: var(--lx-gold-400) !important; }
footer h4, footer h5, footer .footer-title {
  color: var(--lx-pearl) !important;
  font-family: var(--lx-serif) !important;
  font-weight: 600 !important;
}

/* ---------- Cart / Badges ---------- */
.cart-badge, .badge-cart, .notification-badge {
  background: var(--lx-gold-500) !important;
  color: var(--lx-navy-900) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px var(--lx-pearl);
}

/* ---------- Loader / skeleton feel ---------- */
.spinner-border { color: var(--lx-gold-500) !important; }

/* ---------- Selection ---------- */
::selection { background: var(--lx-gold-400); color: var(--lx-navy-900); }

/* ---------- Scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lx-cream); }
::-webkit-scrollbar-thumb { background: var(--lx-navy-700); border-radius: 6px; border: 2px solid var(--lx-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--lx-gold-600); }

/* ---------- Images on product listing: lazy + elegant load ---------- */
img { image-rendering: -webkit-optimize-contrast; }
.card img, .product-card img { display: block; width: 100%; height: auto; }

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--lx-radius-lg) !important;
  border: 1px solid var(--lx-line) !important;
  box-shadow: var(--lx-shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--lx-line) !important; }
.modal-title { font-family: var(--lx-serif) !important; color: var(--lx-navy-900); }

/* ---------- Table (admin-side if visible) ---------- */
table.table th { color: var(--lx-navy-900); font-weight: 600; }
table.table tbody tr { transition: background-color var(--lx-dur) var(--lx-ease); }
table.table tbody tr:hover { background: rgba(224, 166, 62, 0.06); }

/* ---------- Micro-interactions: reveal on scroll (css only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card, .product-card, [class*="product-item"], .banner, .hero {
    animation: lxFadeIn 600ms var(--lx-ease) both;
  }
}

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

/* ---------- Featured / "best offer" highlight ---------- */
.featured, .highlight-offer, [class*="featured"], [class*="best-"] {
  position: relative;
  border: 1px solid rgba(224, 166, 62, 0.4) !important;
  box-shadow: 0 8px 24px rgba(200, 146, 42, 0.15);
}
.featured::before, .highlight-offer::before {
  content: "OFFRE EXCLUSIVE";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: linear-gradient(135deg, var(--lx-navy-900), var(--lx-navy-700));
  color: var(--lx-gold-400);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  box-shadow: var(--lx-shadow-sm);
}

/* ---------- Print a luxe focus ring ---------- */
:focus-visible {
  outline: 2px solid var(--lx-gold-500) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ---------- Category chips ---------- */
.chip, .category-chip, .filter-chip, .tag {
  border: 1px solid var(--lx-line) !important;
  background: var(--lx-pearl) !important;
  color: var(--lx-navy-800) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  font-weight: 500;
  transition: all var(--lx-dur) var(--lx-ease);
}
.chip:hover, .category-chip:hover, .filter-chip:hover {
  background: var(--lx-navy-900) !important;
  color: var(--lx-gold-400) !important;
  border-color: var(--lx-navy-900) !important;
  transform: translateY(-1px);
}
.chip.active, .chip.selected, .filter-chip.active {
  background: var(--lx-navy-900) !important;
  color: var(--lx-gold-400) !important;
  border-color: var(--lx-navy-900) !important;
}

/* ---------- Notification toast ---------- */
.toast, .alert {
  border-radius: var(--lx-radius-md) !important;
  border-left: 4px solid var(--lx-gold-500) !important;
  box-shadow: var(--lx-shadow-md) !important;
}

/* ---------- Responsive touch targets ---------- */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  body { font-size: 15px; }
}