/* ----------------------------------------
   Root tokens (monochrome only)
----------------------------------------- */
:root {
  --lux-black: #000;
  --lux-ink: #0b0b0b;
  --lux-coal: #121212;
  --lux-graphite: #1a1a1a;
  --lux-iron: #222;
  --lux-steel: #2a2a2a;
  --lux-zinc: #3a3a3a;
  --lux-smoke: #666;
  --lux-silver: #9a9a9a;
  --lux-pearl: #d9d9d9;
  --lux-ivory: #eee;
  --lux-white: #fff;

  --lux-radius-xs: .375rem;
  --lux-radius-sm: .5rem;
  --lux-radius-md: .75rem;
  --lux-radius-lg: 1rem;
  --lux-radius-pill: 999px;

  --lux-space-2: .25rem;
  --lux-space-4: .5rem;
  --lux-space-6: .75rem;
  --lux-space-8: 1rem;
  --lux-space-12: 1.5rem;
  --lux-space-16: 2rem;
  --lux-space-24: 3rem;
  --lux-space-32: 4rem;

  --lux-maxw: 1280px;

  --lux-shadow-1: 0 1px 0 rgba(255,255,255,.06), 0 1px 12px rgba(0,0,0,.35);
  --lux-shadow-2: 0 2px 0 rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.55);

  --lux-ease: cubic-bezier(.2,.8,.2,1);
  --lux-anim-fast: .18s var(--lux-ease);
  --lux-anim: .28s var(--lux-ease);
  --lux-anim-slow: .6s var(--lux-ease);
}

/* ----------------------------------------
   Global reset / base
----------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lux-black) !important;
  color: var(--lux-ivory) !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutralize upstream theme colors */
a { color: var(--lux-ivory) !important; text-decoration: none; transition: color var(--lux-anim-fast); }
a:hover { color: var(--lux-white) !important; }

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

/* Containers */
.container { width: 100%; max-width: var(--lux-maxw); margin: 0 auto; padding: 0 var(--lux-space-16); }

/* Headings */
h1, h2, h3, h4 { color: var(--lux-white) !important; margin: 0 0 var(--lux-space-12); font-weight: 300; letter-spacing: .02em; }
h1 { font-size: clamp(1.75rem, 2.2vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 1.6vw, 1.75rem); }
p, .text { color: var(--lux-pearl); }

/* Focus ring */
:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

/* ----------------------------------------
   Hero / intro
----------------------------------------- */
.search-hero {
  position: relative;
  padding: var(--lux-space-32) 0 var(--lux-space-24);
  background: linear-gradient(180deg, var(--lux-ink), var(--lux-black));
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.search-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60rem 60rem at 50% -10rem, rgba(255,255,255,.06), transparent 60%);
  pointer-events: none;
}
.hero-content { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-title { font-family: 'Didot', 'Playfair Display', serif; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
.hero-subtitle { color: var(--lux-silver); margin-top: var(--lux-space-6); }

/* Fade-in hooks used by your JS */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity var(--lux-anim-slow), transform var(--lux-anim-slow); }
.revealed, .fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* ----------------------------------------
   Search box & tabs
----------------------------------------- */
.search-container {
  margin: var(--lux-space-24) auto;
  background: linear-gradient(180deg, var(--lux-coal), var(--lux-graphite));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow-1);
  padding: var(--lux-space-16);
}

.search-tabs {
  display: flex; gap: var(--lux-space-8); flex-wrap: wrap;
  margin-bottom: var(--lux-space-12);
}
.search-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  font-size: .825rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lux-pearl) !important;
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-pill);
  transition: transform var(--lux-anim-fast), background var(--lux-anim-fast), border-color var(--lux-anim-fast);
}
.search-tab svg { width: 16px; height: 16px; stroke: currentColor; }
.search-tab:hover { transform: translateY(-1px); background: #2e2e2e; border-color: rgba(255,255,255,.16); color: var(--lux-white) !important; }
.search-tab.active { background: var(--lux-white); color: var(--lux-black) !important; border-color: var(--lux-white); }

.search-form { width: 100%; }
.search-input-wrapper {
  position: relative; display: flex; align-items: stretch; gap: var(--lux-space-8);
}
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  opacity: .6;
}
.search-input {
  width: 100%;
  padding: 1rem 1rem 1rem 44px;
  background: var(--lux-iron) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--lux-ivory) !important;
  border-radius: var(--lux-radius-sm);
  transition: border-color var(--lux-anim-fast), background var(--lux-anim-fast), box-shadow var(--lux-anim-fast);
}
.search-input::placeholder { color: #9a9a9a; }
.search-input:focus {
  outline: none;
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.search-button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0 1rem;
  background: var(--lux-white) !important; color: var(--lux-black) !important;
  border: 1px solid var(--lux-white);
  border-radius: var(--lux-radius-sm);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: transform var(--lux-anim-fast), box-shadow var(--lux-anim-fast), background var(--lux-anim-fast);
}
.search-button:hover { transform: translateY(-1px); box-shadow: var(--lux-shadow-2); background: #f6f6f6 !important; }

.search-suggestions {
  position: absolute; z-index: 40; width: 100%;
  margin-top: .5rem;
  background: var(--lux-graphite);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-sm);
  box-shadow: var(--lux-shadow-2);
  display: none;
}
.search-suggestions.open { display: block; }
.search-suggestions a {
  display: block; padding: .75rem 1rem; color: var(--lux-pearl) !important;
}
.search-suggestions a:hover { background: var(--lux-iron); color: var(--lux-white) !important; }

/* ----------------------------------------
   Layout: sidebar + content
----------------------------------------- */
.search-main-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--lux-space-16);
  align-items: start;
}

.search-sidebar .search-sidebar-sticky { position: sticky; top: 92px; }
.search-sidebar .btn { width: 100%; }

.search-content { min-height: 40vh; }

/* ----------------------------------------
   Filters
----------------------------------------- */
.filter-section {
  background: var(--lux-graphite);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-md);
  padding: var(--lux-space-12);
  margin-bottom: var(--lux-space-12);
  box-shadow: var(--lux-shadow-1);
}
.filter-section-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lux-ivory);
  margin: 0 0 var(--lux-space-8);
}
.filter-section-title svg { width: 18px; height: 18px; stroke: currentColor; opacity: .7; }

.filter-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0;
  cursor: pointer;
  color: var(--lux-pearl);
}
.filter-option:hover .filter-label { color: var(--lux-white); }

.filter-checkbox {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.24);
  background: transparent;
  position: relative;
  transition: background var(--lux-anim-fast), border-color var(--lux-anim-fast);
}
.filter-checkbox:checked {
  background: var(--lux-white);
  border-color: var(--lux-white);
}
.filter-checkbox:checked::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.filter-label { display: inline-flex; align-items: center; gap: .5rem; }
.filter-count {
  font-size: .75rem; color: var(--lux-silver);
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.08);
  padding: .15rem .45rem; border-radius: var(--lux-radius-pill);
}

.results-filters-active {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 var(--lux-space-12);
}
.filter-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem;
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--lux-pearl);
  border-radius: var(--lux-radius-pill);
}
.filter-tag button {
  background: transparent; border: none; color: var(--lux-pearl);
  cursor: pointer; padding: 0 .25rem; line-height: 1;
}
.filter-tag:hover { border-color: rgba(255,255,255,.28); color: var(--lux-white); }
.clear-filters {
  margin-left: auto;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: var(--lux-pearl); padding: .45rem .8rem; border-radius: var(--lux-radius-pill);
  cursor: pointer; transition: var(--lux-anim-fast);
}
.clear-filters:hover { color: var(--lux-white); border-color: var(--lux-white); }

/* ----------------------------------------
   Search meta / sorting / view toggle
----------------------------------------- */
.search-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--lux-space-8) 0 var(--lux-space-12);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: var(--lux-space-12);
}
.search-results-count { color: var(--lux-pearl); }
.search-results-count strong { color: var(--lux-white); }

.search-sort { display: flex; align-items: center; gap: .75rem; }
.sort-button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.1); color: var(--lux-pearl);
  border-radius: var(--lux-radius-pill); cursor: pointer; transition: var(--lux-anim-fast);
}
.sort-button:hover { color: var(--lux-white); border-color: rgba(255,255,255,.22); }

.view-toggle { display: inline-flex; gap: .4rem; }
.view-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--lux-radius-pill);
  background: var(--lux-iron); border: 1px solid rgba(255,255,255,.1);
  color: var(--lux-pearl); cursor: pointer; transition: var(--lux-anim-fast);
}
.view-toggle button:hover { color: var(--lux-white); border-color: rgba(255,255,255,.22); }
.view-toggle button.active { background: var(--lux-white); color: var(--lux-black); border-color: var(--lux-white); }

/* ----------------------------------------
   Cards (crypto + nft)
----------------------------------------- */
.crypto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--lux-space-12); }

.crypto-card {
  position: relative; display: flex; gap: var(--lux-space-8); align-items: center;
  padding: var(--lux-space-12);
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-iron));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-md);
  box-shadow: var(--lux-shadow-1);
  transition: transform var(--lux-anim), border-color var(--lux-anim), box-shadow var(--lux-anim);
  will-change: transform;
}
.crypto-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--lux-shadow-2);
}
.crypto-logo-wrapper { width: 56px; height: 56px; flex: 0 0 56px; }
.crypto-logo {
  width: 100%; height: 100%;
  border-radius: 10px; overflow: hidden;
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.12);
  display: grid; place-items: center;
}
.crypto-logo img { width: 100%; height: 100%; object-fit: contain; }

.crypto-info { min-width: 0; flex: 1; }
.crypto-name {
  color: var(--lux-white) !important;
  font-weight: 500; letter-spacing: .02em; margin-bottom: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crypto-meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.crypto-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--lux-pearl);
  background: #2c2c2c; border: 1px solid rgba(255,255,255,.12);
  padding: .25rem .5rem; border-radius: var(--lux-radius-pill);
}
.crypto-badge svg { width: 14px; height: 14px; stroke: currentColor; opacity: .8; }

.crypto-stats { display: flex; gap: .75rem; margin-top: .35rem; color: var(--lux-silver); font-size: .85rem; }
.crypto-stat { display: inline-flex; align-items: center; gap: .35rem; }
.crypto-stat svg { width: 16px; height: 16px; }

.nft-grid .crypto-card .crypto-logo { border-radius: .5rem; }

/* List view variant (toggled by JS) */
.grid-view .crypto-card { flex-direction: row; }
.list-view .crypto-card { flex-direction: row; }
.list-view .crypto-card { padding: var(--lux-space-12); }
.list-view .crypto-card .crypto-info { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; }

/* ----------------------------------------
   Empty state
----------------------------------------- */
.results-empty {
  text-align: center;
  padding: var(--lux-space-24);
  background: var(--lux-graphite);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lux-radius-lg);
}
.results-empty-icon svg { width: 40px; height: 40px; opacity: .7; }
.results-empty-title { font-weight: 400; margin: var(--lux-space-8) 0 var(--lux-space-4); }
.results-empty-text { color: var(--lux-silver); max-width: 680px; margin: 0 auto var(--lux-space-12); }
.results-empty .btn { margin: 0 .25rem; }

/* ----------------------------------------
   Buttons (monochrome)
----------------------------------------- */
.btn,
.btn-primary,
.btn-ghost,
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1rem;
  border-radius: var(--lux-radius-sm);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: transform var(--lux-anim-fast), box-shadow var(--lux-anim-fast), background var(--lux-anim-fast), color var(--lux-anim-fast), border-color var(--lux-anim-fast);
  cursor: pointer;
}
.btn-primary,
.btn { background: var(--lux-white) !important; color: var(--lux-black) !important; border: 1px solid var(--lux-white); }
.btn-primary:hover,
.btn:hover { transform: translateY(-1px); box-shadow: var(--lux-shadow-2); }

.btn-ghost { background: transparent !important; color: var(--lux-ivory) !important; border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color: var(--lux-white); color: var(--lux-white) !important; }

/* ----------------------------------------
   Alerts (flash)
----------------------------------------- */
.alert {
  display: flex; align-items: center; gap: .6rem;
  background: var(--lux-graphite);
  color: var(--lux-ivory);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lux-radius-sm);
  padding: .8rem 1rem; box-shadow: var(--lux-shadow-1);
}
.alert-icon { opacity: .8; }

/* ----------------------------------------
   Luxury cursor (optional, used by your JS)
----------------------------------------- */
.luxury-cursor {
  width: 20px; height: 20px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9999;
  transition: transform .2s, border-color .2s;
  mix-blend-mode: difference;
}
.luxury-cursor.hover { transform: scale(1.9); border-color: var(--lux-white); }

/* ----------------------------------------
   Scrollbar (subtle)
----------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--lux-ink); }
*::-webkit-scrollbar-thumb { background: var(--lux-steel); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #444; }

/* ----------------------------------------
   Responsive
----------------------------------------- */
@media (max-width: 1100px) {
  .search-main-container { grid-template-columns: 280px 1fr; }
}
@media (max-width: 992px) {
  .search-main-container { grid-template-columns: 1fr; }
  .search-sidebar .search-sidebar-sticky { position: static; }
}
@media (max-width: 680px) {
  .search-container { padding: var(--lux-space-12); }
  .search-tabs { gap: .5rem; }
  .crypto-grid { grid-template-columns: 1fr; }
  .crypto-card { padding: var(--lux-space-8); }
  .search-meta { flex-direction: column; gap: .75rem; align-items: flex-start; }
}

/* ----------------------------------------
   Motion preferences
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------
   Utility overrides for this page
----------------------------------------- */
.border-subtle { border: 1px solid rgba(255,255,255,.08); }
.text-muted { color: var(--lux-silver) !important; }
.hr {
  height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  border: 0; margin: var(--lux-space-16) 0;
}

/* ----------------------------------------
   Optional: page transition hooks
----------------------------------------- */
.page-transition { animation: luxFadeOut .4s ease forwards; }
@keyframes luxFadeOut { to { opacity: 0; transform: scale(.98); } }

/* ==== XCLU.VIP — Compact filters & immersive visuals (overrides) ==== */

/* 1) Sidebar plus compacte */
.search-main-container { grid-template-columns: 220px 1fr; }
@media (min-width: 1400px) {
  .search-main-container { grid-template-columns: 240px 1fr; }
}

.search-sidebar .search-sidebar-sticky { top: 80px; }
.filter-section { padding: 10px 12px; border-radius: var(--lux-radius-md); }
.filter-section-title {
  font-size: .72rem;
  letter-spacing: .14em;
  margin: 0 0 6px;
}
.filter-option { padding: 2px 0; font-size: .82rem; line-height: 1.2; }
.filter-checkbox { width: 14px; height: 14px; border-radius: 4px; }
.filter-label { gap: .4rem; }
.filter-count {
  font-size: .68rem;
  padding: 0 .35rem;
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lux-radius-pill);
}
.search-sidebar .btn {
  padding: .55rem .8rem;
  font-size: .72rem;
  letter-spacing: .1em;
  border-radius: var(--lux-radius-sm);
}

/* 2) Grille plus immersive + cartes agrandies */
.crypto-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

/* Cartes */
.crypto-card {
  padding: 1rem;
  gap: 1rem;
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-iron));
  border: 1px solid rgba(255,255,255,.10);
}

/* 3) Visuels beaucoup plus grands (crypto & NFT) */
.crypto-logo-wrapper {
  width: clamp(84px, 9vw, 120px);
  height: clamp(84px, 9vw, 120px);
  flex: 0 0 auto;
}
.crypto-logo {
  border-radius: .75rem;               /* rendu plus «card» pour NFTs aussi */
  border: 1px solid rgba(255,255,255,.14);
}
.crypto-logo img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s var(--lux-ease);
}
.crypto-card:hover .crypto-logo img { transform: scale(1.06); }

/* Typo un peu plus ample pour équilibrer l’image */
.crypto-name { font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 500; }
.crypto-meta .crypto-badge { font-size: .78rem; padding: .3rem .55rem; }
.crypto-stats { font-size: .9rem; }

/* 4) Variante liste : visuels légèrement réduits pour garder la densité */
.list-view .crypto-card { padding: .9rem 1rem; }
.list-view .crypto-logo-wrapper { width: 72px; height: 72px; }

/* ===== Immersive tall cards: title → image → meta → stats ===== */

/* La carte devient une grille verticale */
.crypto-card {
  display: grid;
  grid-template-areas:
    "title"
    "image"
    "meta"
    "stats";
  grid-template-rows: auto auto auto auto;
  align-items: start;
  gap: .75rem;
  padding: 1.1rem;
  min-height: clamp(360px, 38vw, 520px); /* carte plus haute */
}

/* On “aplatit” .crypto-info pour positionner ses enfants directement dans la grille */
.crypto-info { display: contents; }

/* Titre au-dessus du visuel */
.crypto-name {
  grid-area: title;
  margin: 0;
  font-family: 'Didot','Playfair Display',serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--lux-white) !important;
}

/* Visuel plus grand et immersif */
.crypto-logo-wrapper {
  grid-area: image;
  width: 100%;
  height: clamp(200px, 32vw, 360px);    /* image bien plus haute */
  border-radius: .9rem;
  overflow: hidden;
}
.crypto-logo {
  width: 100%; height: 100%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--lux-iron);
}
.crypto-logo img {
  width: 100%; height: 100%;
  object-fit: contain;                  /* logos crypto nets */
  transition: transform .35s var(--lux-ease);
}
/* Si tu veux un rendu “poster” pour les NFTs, active ce mode par classe (cf. JS facultatif en bas) */
.crypto-card.poster-mode .crypto-logo img { object-fit: cover; }
.crypto-card:hover .crypto-logo img { transform: scale(1.06); }

/* Badges en dessous du visuel */
.crypto-meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.crypto-badge { font-size: .78rem; padding: .3rem .55rem; }

/* Stats encore en dessous */
.crypto-stats {
  grid-area: stats;
  display: flex; gap: .9rem;
  font-size: .92rem; color: var(--lux-silver);
}

/* Variante “liste”: on recompacte pour garder la densité */
.list-view .crypto-card {
  grid-template-areas:
    "image title"
    "image meta"
    "image stats";
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto auto 1fr;
  min-height: unset;
}
.list-view .crypto-logo-wrapper { height: 140px; }
.list-view .crypto-name { font-size: 1.05rem; letter-spacing: .04em; }

/* Conteneur principal avec état “collapsed” */
body.filters-collapsed .search-main-container {
  grid-template-columns: 0 1fr !important;
}
body.filters-collapsed .search-sidebar {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-12px);
  transition: opacity .2s var(--lux-ease), transform .2s var(--lux-ease);
}

/* Bouton flottant pour ouvrir/fermer les filtres */
.filters-toggle {
  position: fixed;
  right: 20px; bottom: 22px;
  z-index: 1002;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  background: var(--lux-white); color: var(--lux-black);
  border: 1px solid var(--lux-white);
  border-radius: var(--lux-radius-pill);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--lux-shadow-2);
  transition: transform .18s var(--lux-ease), box-shadow .18s var(--lux-ease);
}
.filters-toggle:hover { transform: translateY(-2px); }

/* Icône minimaliste */
.filters-toggle svg { width: 18px; height: 18px; }

/* Quand les filtres sont ouverts, on inverse la palette pour contraster */
body:not(.filters-collapsed) .filters-toggle {
  background: var(--lux-iron); color: var(--lux-ivory);
  border-color: rgba(255,255,255,.16);
}
/* ===== XCLU.VIP — Cartes CRYPTO dédiées (picto rond ~100px) ===== */

/* Marqueur: .is-crypto sera ajouté par le JS */
.crypto-card.is-crypto {
  /* on conserve la structure “titre → image → meta → stats” */
  display: grid;
  grid-template-areas:
    "title"
    "image"
    "meta"
    "stats";
  grid-template-rows: auto auto auto auto;
  gap: .75rem;
  min-height: clamp(280px, 30vw, 380px);        /* plus compact qu’une carte NFT */
  padding: 1rem 1.1rem;
}

/* Titre */
.crypto-card.is-crypto .crypto-name {
  grid-area: title;
  margin: 0;
  font-family: 'Didot','Playfair Display',serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  color: var(--lux-white) !important;
}

/* Picto rond et plus petit, centré */
.crypto-card.is-crypto .crypto-logo-wrapper {
  grid-area: image;
  --crypto-picto-size: clamp(72px, 8vw, 100px);
  width: var(--crypto-picto-size);
  height: var(--crypto-picto-size);
  margin: .2rem auto .4rem;                     /* centrage */
  border-radius: 50%;
  overflow: hidden;
}

.crypto-card.is-crypto .crypto-logo {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--lux-iron);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  display: grid; place-items: center;
}

.crypto-card.is-crypto .crypto-logo img {
  width: 80%; height: 80%;
  object-fit: contain;
  transition: transform .32s var(--lux-ease), opacity .32s var(--lux-ease);
  opacity: .92;
}
.crypto-card.is-crypto:hover .crypto-logo img { transform: scale(1.04); opacity: 1; }

/* Meta sous le visuel */
.crypto-card.is-crypto .crypto-meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; gap: .35rem;
  justify-content: center;                      /* centré pour un rendu “badge set” */
}

.crypto-card.is-crypto .crypto-badge {
  font-size: .74rem;
  padding: .28rem .5rem;
  background: #2c2c2c;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--lux-pearl);
}

/* Stats en bas */
.crypto-card.is-crypto .crypto-stats {
  grid-area: stats;
  display: flex; gap: .8rem; justify-content: center;
  font-size: .9rem; color: var(--lux-silver);
}

/* Empêche le mode “poster” d’affecter les cryptos */
.crypto-card.is-crypto.poster-mode .crypto-logo img { object-fit: contain; }

/* Variante LIST VIEW: on garde le rond plus petit, disposition compacte gauche/droite */
.list-view .crypto-card.is-crypto {
  grid-template-areas:
    "image title"
    "image meta"
    "image stats";
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto 1fr;
  min-height: unset;
}

.list-view .crypto-card.is-crypto .crypto-logo-wrapper {
  --crypto-picto-size: 84px;                    /* un peu plus petit en liste */
  width: var(--crypto-picto-size);
  height: var(--crypto-picto-size);
  margin: 0;                                    /* aligné à gauche */
}

.list-view .crypto-card.is-crypto .crypto-name {
  align-self: center;
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.list-view .crypto-card.is-crypto .crypto-meta,
.list-view .crypto-card.is-crypto .crypto-stats {
  justify-content: flex-start;
}




/* ---------- Tokens (fallbacks) ---------- */
:root{
  --lux-black:#0b0b0c;
  --lux-graphite:#111214;
  --lux-iron:#17181b;
  --lux-ink:#1c1d21;
  --lux-white:#ffffff;
  --lux-ivory:#e9e9ec;
  --lux-silver:#b9bcc6;
  --lux-smoke:#9295a0;
  --lux-outline:rgba(255,255,255,.08);
  --lux-outline-2:rgba(255,255,255,.14);
  --lux-glow:0 10px 30px rgba(255,255,255,.06);
  --lux-space-4:.25rem; --lux-space-6:.375rem; --lux-space-8:.5rem; --lux-space-10:.625rem;
  --lux-space-12:.75rem; --lux-space-14:.875rem; --lux-space-16:1rem; --lux-space-20:1.25rem;
  --lux-space-24:1.5rem; --lux-space-28:1.75rem; --lux-space-32:2rem; --lux-space-40:2.5rem;
  --lux-radius-md:.75rem; --lux-radius-lg:1rem; --lux-radius-xl:1.25rem; --lux-radius-2xl:1.5rem;
  --lux-speed:220ms cubic-bezier(.2,.6,.2,1);
  --text-muted: var(--lux-smoke);
}

/* ---------- Base containers ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--lux-space-16); }
.section-title{
  display:flex; align-items:center; gap:.65rem;
  font: 300 clamp(1.1rem,2.2vw,1.45rem) 'Didot','Playfair Display',serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--lux-ivory);
  margin: var(--lux-space-24) 0 var(--lux-space-16);
}
.section-title svg{ width:20px; height:20px; opacity:.55 }

/* =======================================================================
   HERO — Crypto / Merchant / NFT
   ======================================================================= */
.hero-section{ padding: clamp(1.25rem,3vw,2rem) 0 var(--lux-space-16); }
.hero-content{
  display:grid; gap: var(--lux-space-24);
  grid-template-columns: minmax(260px, 360px) 1fr;
  align-items:center;
}
@media (max-width: 900px){ .hero-content{ grid-template-columns: 1fr; } }

/* ---- Logo wrappers (shared) ---- */
.crypto-logo-wrapper,.merchant-logo-wrapper,.nft-logo-wrapper{
  position:relative; display:grid; place-items:center;
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-iron));
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  padding: var(--lux-space-24); box-shadow: var(--lux-glow);
}
.crypto-logo-bg,.merchant-logo-bg,.nft-logo-bg{
  position:absolute; inset:-1px; border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}
.crypto-logo, .merchant-logo, .nft-logo { position:relative; z-index:1; }

/* ---- CRYPTO hero visual (round ≤100px) ---- */
.crypto-visual .crypto-logo img{
  width: clamp(72px, 8vw, 100px); height: clamp(72px, 8vw, 100px);
  object-fit: contain; border-radius: 999px; background:#0e0f12;
  border:1px solid var(--lux-outline-2); box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: var(--lux-space-8);
}
.crypto-visual svg{ width:64px; height:64px; opacity:.7 }

/* ---- MERCHANT hero visual (square, soft) ---- */
.merchant-visual .merchant-logo img{
  width: clamp(84px, 9vw, 120px); height: clamp(84px, 9vw, 120px);
  object-fit: contain; border-radius: 1rem; background:#0e0f12;
  border:1px solid var(--lux-outline-2); padding: var(--lux-space-10);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
}

/* ---- NFT hero visual (bigger immersive frame) ---- */
.nft-visual .nft-logo img{
  width: clamp(160px, 24vw, 260px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 1.25rem; border:1px solid var(--lux-outline-2);
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
}

/* ---- Hero info ---- */
.hero-info h1.crypto-name,
.hero-info h1.merchant-name,
.hero-info h1.nft-name{
  margin: 0 0 .35rem; color: var(--lux-white);
  font: 300 clamp(1.4rem, 3vw, 2rem) 'Didot','Playfair Display',serif;
  text-transform: uppercase; letter-spacing:.07em;
}
.crypto-meta,.merchant-meta,.nft-meta{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-top:.4rem;
}
.meta-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--lux-outline); color:var(--lux-ivory);
  background: linear-gradient(180deg, #0f1013, #0b0c0f);
  padding:.55rem .7rem; border-radius: 999px; font-size:.9rem;
}
.meta-badge svg{ width:16px; height:16px; opacity:.7 }
.meta-badge:hover{ border-color: var(--lux-outline-2); }

/* ---- NFT header stats ---- */
.hero-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.stat-item{
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-lg);
  padding: 1rem; text-align:center;
}
.stat-value{ color:var(--lux-white); font-weight:600; font-size:1.15rem; }
.stat-label{ color:var(--text-muted); font-size:.85rem; margin-top:.15rem; }

/* =======================================================================
   SEARCH + FILTER TAGS
   ======================================================================= */
.search-section{ padding: var(--lux-space-16) 0 var(--lux-space-8); }
.search-container{
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-iron));
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  padding: var(--lux-space-24); box-shadow: var(--lux-glow);
}
.search-header{ margin-bottom: var(--lux-space-16); }
.search-title{
  margin:0 0 .35rem; color:var(--lux-ivory);
  font: 300 clamp(1.1rem,2.2vw,1.45rem) 'Didot','Playfair Display',serif;
  text-transform: uppercase; letter-spacing:.06em;
}
.search-subtitle{ color:var(--text-muted); margin:0; }

.search-form{ margin-top: var(--lux-space-14); }
.search-input-wrapper{
  position:relative; display:flex; align-items:center;
  background:#0f1115; border:1px solid var(--lux-outline); border-radius:999px;
  padding:.65rem .9rem;
}
.search-input{
  appearance:none; border:0; outline:0; width:100%;
  background:transparent; color:var(--lux-ivory); font-size:.98rem;
  padding-left: 2rem;
}
.search-icon{ position:absolute; left:.8rem; opacity:.6 }

.filter-tags{
  margin-top: var(--lux-space-16);
  display:flex; gap:.5rem; overflow:auto; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.filter-tag{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--lux-outline); color:var(--lux-ivory);
  background: linear-gradient(180deg, #0f1013, #0b0c0f);
  padding:.55rem .8rem; border-radius:999px; font-size:.9rem;
  white-space:nowrap; transition:transform var(--lux-speed), border-color var(--lux-speed);
}
.filter-tag svg{ width:16px; height:16px; opacity:.7 }
.filter-tag:hover{ transform:translateY(-1px); border-color:var(--lux-outline-2); }
.filter-tag.active{ border-color:var(--lux-outline-2); box-shadow: inset 0 0 0 1px var(--lux-outline-2); }

/* Optional: collapsed state if tu ajoutes une classe via JS */
.filter-tags.is-collapsed{ max-height:0; padding:0; overflow:hidden; }

/* =======================================================================
   PROMOTION GRIDS & CARDS (shared)
   ======================================================================= */
.promotions-section{  padding: var(--lux-space-8) 0 var(--lux-space-24); }
.promotions-section.active, .promotions-section:first-of-type{ display:block; }

.promotions-grid{
  display:grid; gap: var(--lux-space-16);
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width:1200px){ .promotions-grid{ grid-template-columns: repeat(9, 1fr); } }
@media (max-width:900px){ .promotions-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width:640px){ .promotions-grid{ grid-template-columns: repeat(2, 1fr); } }

/* Card spans */
.promotions-grid .promotion-card{ grid-column: span 4; }
@media (max-width:900px){ .promotions-grid .promotion-card{ grid-column: span 3; } }
@media (max-width:640px){ .promotions-grid .promotion-card{ grid-column: span 2; } }

.promotion-card{
  display:flex; flex-direction:column; gap:.9rem;
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-2xl);
  padding: var(--lux-space-20); box-shadow: var(--lux-glow);
  transition: transform var(--lux-speed), border-color var(--lux-speed);
  min-height: 320px; /* hautes par défaut */
}
.promotion-card:hover{ transform: translateY(-3px); border-color: var(--lux-outline-2); }

/* Header with merchant + discount badge */
.promotion-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.merchant-info{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.merchant-logo{
  width: 44px; height:44px; border-radius:.9rem; background:#0e0f12;
  display:grid; place-items:center; border:1px solid var(--lux-outline);
  overflow:hidden; flex-shrink:0;
}
.merchant-logo img{ width:90%; height:90%; object-fit:contain; filter:grayscale(.1) }
.merchant-logo svg{ width:22px; height:22px; opacity:.65 }
.merchant-details h4{ margin:0; color:var(--lux-ivory); font-weight:600; font-size:.98rem; }
.merchant-category{ margin:.1rem 0 0; color:var(--text-muted); font-size:.82rem; }

.discount-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:.45rem .6rem; border-radius: .75rem;
  border:1px solid var(--lux-outline-2); color:var(--lux-white);
  background: linear-gradient(180deg, #141519, #0f1014);
  font-weight:700; letter-spacing:.03em;
}

/* Content area — title au-dessus, texte, infos en dessous */
.promotion-content{ display:flex; flex-direction:column; gap:.8rem; margin-top:.2rem; }
.promotion-title{
  margin:0; color:var(--lux-white);
  font: 400 1.05rem/1.25 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
.promotion-description{
  margin:0; color:var(--text-muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Requirements / eligible zone */
.promotion-requirements{ border-top:1px dashed var(--lux-outline); padding-top:.75rem; }
.requirements-title{
  display:flex; align-items:center; gap:.5rem; color:var(--lux-ivory); font-weight:600; font-size:.92rem;
}
.requirements-title svg{ width:16px; height:16px; opacity:.7 }
.asset-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.asset-tag{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .55rem;
  font-size:.82rem; border:1px solid var(--lux-outline); color:var(--lux-ivory);
  border-radius:999px; background:#0f1115;
}
.asset-tag svg{ width:14px; height:14px; opacity:.65 }
.asset-tag.crypto{ background:#0f1115; }
.asset-tag.nft{ background:#111217; }

/* Footer buttons */
.promotion-footer{
  margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap;
}
.btn-promotion, .btn-claim, .btn-discover{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem .95rem; border-radius:.9rem; border:1px solid var(--lux-outline);
  color:var(--lux-ivory); text-decoration:none; background: #0f1115;
  transition: transform var(--lux-speed), border-color var(--lux-speed), background var(--lux-speed);
}
.btn-promotion svg, .btn-claim svg, .btn-discover svg{ width:18px; height:18px; opacity:.75 }
.btn-view-detail{ background: linear-gradient(180deg, #14161b, #0f1114); }
.btn-claim{ border-color: var(--lux-outline-2); background: linear-gradient(180deg, #161820, #0f1115); }
.btn-promotion:hover, .btn-claim:hover, .btn-discover:hover{
  transform: translateY(-1px); border-color: var(--lux-outline-2);
}

/* =======================================================================
   ASSET GROUPS (Promotions by Crypto / NFT / Family)
   ======================================================================= */
.asset-group{ margin: var(--lux-space-24) 0; }
.asset-group-header{
  display:flex; align-items:center; gap:.9rem;
  padding: .9rem; border:1px solid var(--lux-outline);
  border-radius: var(--lux-radius-xl);
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  box-shadow: var(--lux-glow);
}
.asset-icon{
  width:56px; height:56px; display:grid; place-items:center; flex-shrink:0;
  border-radius: 1rem; background:#0f1115; border:1px solid var(--lux-outline);
  overflow:hidden;
}
.asset-icon img{ width:90%; height:90%; object-fit:contain; }
.asset-info h3{ margin:0; color:var(--lux-ivory); font-weight:600; }
.asset-info p{ margin:.1rem 0 0; color:var(--text-muted); font-size:.9rem; }

/* Crypto variation — picto rond plus petit */
#section-crypto .asset-icon, .promotions-section#section-crypto .asset-icon{
  width:64px; height:64px; border-radius: 999px; padding:.35rem;
  background:#0e0f12; border:1px solid var(--lux-outline-2);
}
#section-crypto .asset-icon img{ border-radius:999px; }

/* NFT variation — visuel plus haut */
#section-nft .asset-icon, .promotions-section#section-nft .asset-icon{
  width:88px; height:88px; border-radius: 1rem; overflow:hidden;
}
#section-nft .asset-icon img{ object-fit:cover; }

/* =======================================================================
   MERCHANT TABS (All / Crypto / NFT / Family)
   ======================================================================= */
.promotions-nav{
  display:flex; gap:.5rem; flex-wrap:wrap; margin: var(--lux-space-16) 0 var(--lux-space-8);
}
.nav-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--lux-outline); border-radius:999px;
  background: linear-gradient(180deg, #0f1013, #0b0c0f);
  color:var(--lux-ivory); padding:.55rem .9rem; cursor:pointer;
  transition: border-color var(--lux-speed), transform var(--lux-speed);
}
.nav-tab svg{ width:16px; height:16px; opacity:.7 }
.nav-tab:hover{ border-color: var(--lux-outline-2); transform:translateY(-1px); }
.nav-tab.active{ border-color:var(--lux-outline-2); box-shadow: inset 0 0 0 1px var(--lux-outline-2); }
.nav-tab-count{
  margin-left:.25rem; padding:.15rem .45rem; border-radius:999px;
  border:1px solid var(--lux-outline); font-size:.78rem; color:var(--text-muted);
}

/* =======================================================================
   EMPTY STATES
   ======================================================================= */
.empty-state{
  display:grid; place-items:center; text-align:center; gap:.5rem;
  border:1px dashed var(--lux-outline); border-radius: var(--lux-radius-xl);
  padding: var(--lux-space-24); background: linear-gradient(180deg, #101116, #0d0e12);
}
.empty-icon{ width:36px; height:36px; opacity:.6 }
.empty-title{ margin:.2rem 0 0; color:var(--lux-ivory); font-weight:600; }
.empty-text{ margin:0; color:var(--text-muted); }

/* =======================================================================
   RELATED: “Other promotions from merchant” (reuse card grid spacing)
   ======================================================================= */
.related-grid{
  display:grid; gap: var(--lux-space-12);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.related-card{
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none;
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  padding: var(--lux-space-16); background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  color:var(--lux-ivory); transition: transform var(--lux-speed), border-color var(--lux-speed);
}
.related-card:hover{ transform: translateY(-2px); border-color: var(--lux-outline-2); }
.related-discount{
  font-weight:800; letter-spacing:.02em;
  border:1px solid var(--lux-outline-2);
  background: linear-gradient(180deg, #161820, #0f1115);
  border-radius:.75rem; padding:.4rem .6rem; width:max-content;
}
.related-title{ margin:.25rem 0 0; }
.related-description{ margin:0; color:var(--text-muted); }

/* =======================================================================
   ELIGIBLE lists (in detail pages)
   ======================================================================= */
.eligible-grid{
  display:grid; gap: var(--lux-space-12);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.eligible-card{
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  padding: var(--lux-space-16);
}
.eligible-header{ display:flex; align-items:center; gap:.75rem; }
.asset-icon.nft{ border-radius:1rem; overflow:hidden; }
.asset-icon.nft img{ width:64px; height:64px; object-fit:cover; }
.eligible-card .asset-icon{ width:56px; height:56px; border-radius:999px; overflow:hidden; }
.eligible-card .asset-icon img{ width:100%; height:100%; object-fit:contain; background:#0e0f12; border:1px solid var(--lux-outline); border-radius:999px; }
.family-badge{
  display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem;
  font-size:.78rem; padding:.2rem .45rem; border-radius:999px; border:1px solid var(--lux-outline);
  color:var(--text-muted);
}
.eligible-details{ margin-top:.6rem; border-top:1px dashed var(--lux-outline); padding-top:.6rem; }
.detail-item{ display:flex; justify-content:space-between; color:var(--lux-ivory); }
.detail-label{ color:var(--text-muted); }

/* =======================================================================
   CONDITIONS + STATS (detail)
   ======================================================================= */
.conditions-grid{
  display:grid; gap: var(--lux-space-12);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.condition-item{
  display:flex; gap:.75rem; align-items:flex-start;
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  padding: var(--lux-space-16);
}
.condition-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:.8rem; background:#0f1115; border:1px solid var(--lux-outline); }
.condition-icon svg{ width:18px; height:18px; opacity:.7 }
.condition-text h4{ margin:.1rem 0; color:var(--lux-ivory); }
.condition-text p{ margin:0; color:var(--text-muted); }

.usage-stats .stats-grid{
  display:grid; gap: var(--lux-space-12);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.stat-card{
  border:1px solid var(--lux-outline); border-radius: var(--lux-radius-xl);
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  padding: var(--lux-space-16); text-align:center;
}
.stat-icon{ width:22px; height:22px; opacity:.7; margin-bottom:.35rem; }

/* =======================================================================
   BREADCRUMB (dup safe)
   ======================================================================= */
.breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  color:var(--lux-silver); padding: var(--lux-space-12) 0 var(--lux-space-8);
  font-size:.92rem;
}
.breadcrumb a{ color:var(--lux-ivory); }
.breadcrumb a:hover{ color:var(--lux-white); }
.breadcrumb svg{ width:16px; height:16px; opacity:.55 }

/* =======================================================================
   MODALS (Wallet / Customer) + TOAST  — reuse styles
   ======================================================================= */
.wallet-modal,.customer-modal{
  position: fixed; inset:0; display:none; place-items:center;
  backdrop-filter: blur(6px); background: rgba(0,0,0,.55); z-index:60;
}
.wallet-modal.active, .customer-modal.active{ display:grid; }
.modal-content{
  width:min(560px, calc(100% - 2rem));
  background: linear-gradient(180deg, var(--lux-graphite), var(--lux-ink));
  border:1px solid var(--lux-outline); border-radius: 1.25rem;
  padding: 1.25rem; box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.modal-close{
  appearance:none; border:0; background:#0f1115; border:1px solid var(--lux-outline);
  width:34px; height:34px; border-radius:.65rem; display:grid; place-items:center;
  color:var(--lux-ivory); float:right; cursor:pointer;
}
.modal-close:hover{ border-color:var(--lux-outline-2); }
.modal-header{ margin-top:.25rem; margin-bottom: .75rem; }
.modal-title{
  margin:.25rem 0 .25rem; color:var(--lux-white);
  font: 300 1.25rem 'Didot','Playfair Display',serif; text-transform:uppercase; letter-spacing:.06em;
}
.modal-subtitle{ margin:0; color:var(--text-muted); }
.wallet-options{ display:grid; gap:.6rem; margin-top:.9rem; }
.wallet-option{
  display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; border-radius:.9rem;
  border:1px solid var(--lux-outline); background:#0f1115; cursor:pointer;
}
.wallet-option:hover{ border-color:var(--lux-outline-2); }
.wallet-icon{ width:38px; height:38px; display:grid; place-items:center; background:#0e0f12; border-radius:.65rem; border:1px solid var(--lux-outline); overflow:hidden; }
.wallet-name{ color:var(--lux-ivory); font-weight:600; }
.wallet-status{ color:var(--text-muted); font-size:.88rem; }

.customer-form{ margin-top:.9rem; display:grid; gap:.75rem; }
.form-group{ display:grid; gap:.35rem; }
.form-label{ color:var(--lux-ivory); font-size:.9rem; }
.form-input{
  width:100%; background:#0f1115; color:var(--lux-ivory);
  border:1px solid var(--lux-outline); border-radius:.8rem; padding:.65rem .8rem;
}
.form-input:focus{ border-color:var(--lux-outline-2); outline:0; }
.form-error{ color:#ffb3b3; min-height:1.1rem; font-size:.85rem; }
.btn-continue{
  width:100%; appearance:none; border:1px solid var(--lux-outline-2);
  background: linear-gradient(180deg, #161820, #0f1115); color:var(--lux-ivory);
  border-radius:.9rem; padding:.75rem .95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-continue:hover{ border-color:var(--lux-outline-2); transform:translateY(-1px); }
.loading-spinner{
  width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,.25);
  border-top-color: var(--lux-ivory); display:inline-block; animation: lux-spin .9s linear infinite;
}
@keyframes lux-spin{ to{ transform: rotate(360deg); } }

.form-info{ display:flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.9rem; }

/* Toast */
.toast{
  position: fixed; left:50%; bottom: 24px; transform: translateX(-50%);
  display:flex; align-items:center; gap:.6rem;
  background: linear-gradient(180deg, #161820, #0f1115);
  border:1px solid var(--lux-outline); border-radius:.9rem;
  color:var(--lux-ivory); padding:.6rem .8rem; z-index:70; display:none;
}
.toast.show{ display:flex; }
.toast-icon{ width:18px; height:18px; opacity:.75 }

/* =======================================================================
   RESPONSIVE TWEAKS
   ======================================================================= */
@media (max-width:640px){
  .promotion-card{ min-height: 280px; padding: var(--lux-space-16); }
  .merchant-details h4{ font-size:.95rem; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); }
}

/* =======================================================================
   CONTEXTUAL POLISH
   - Crypto lists: picto rond 100px, cartes un peu plus compactes
   - NFT lists: visuels plus haut + cartes plus immersives
   ======================================================================= */

/* Contexte CRYPTO (page crypto + onglet crypto) */
.hero-section .crypto-visual + .hero-info .crypto-name{ letter-spacing:.08em; }
#section-crypto .promotion-card{ min-height: 300px; }
#section-crypto .merchant-logo{ border-radius:.8rem; }
#section-crypto .promotion-title{ font-weight:600; }

/* Contexte NFT (page NFT + onglet NFT) */
#section-nft .promotion-card{ min-height: 340px; }
#section-nft .promotion-title{ font-weight:700; letter-spacing:.01em; }


.search-hero{
    margin-top:40px;
}

img.checkmarks{
   width:30px;
   height:auto;
}

/* ==========================================================================
   XCLU.VIP — MERCHANT LUXURY DASHBOARD
   Version: 2.1 (Gold accents replaced by White)
   ========================================================================== */

:root {
  /* Monochrome Palette */
  --lux-black: #000000;
  --lux-ink: #0a0a0c;
  --lux-coal: #111114;
  --lux-graphite: #18181b;
  --lux-iron: #1f1f23;
  --lux-steel: #27272a;
  --lux-zinc: #3f3f46;
  --lux-smoke: #71717a;
  --lux-silver: #a1a1aa;
  --lux-pearl: #d4d4d8;
  --lux-ivory: #e4e4e7;
  --lux-white: #ffffff;
  
  /* Luxury Accents (gold → white) */
  --lux-gold: #ffffff;
  --lux-gold-light: #d4d4d8;
  --lux-emerald: #10b981;
  --lux-ruby: #ef4444;
  
  /* Shadows (adjust glow to white) */
  --lux-shadow-glow: 0 0 40px rgba(255, 255, 255, 0.15);
}

/* Exemple ajustements */

/* Nav active state */
.nav-link.active {
  color: var(--lux-white);
  background: rgba(255, 255, 255, 0.08);
}

/* Cards shimmer (white instead of gold) */
.lux-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* Cards hover (white glow) */
.lux-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Stat cards underline */
.stat-card::after {
  background: linear-gradient(90deg, var(--lux-white), var(--lux-pearl));
}

/* Stat icons */
.stat-icon {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--lux-white);
}

/* Promotion cards */
.promotion-card::before {
  background: linear-gradient(90deg, var(--lux-white), var(--lux-emerald));
}
.promotion-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 60px rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
.promotion-stat-value {
  color: var(--lux-white);
}

/* Buttons */
.btn-lux {
  background: linear-gradient(135deg, var(--lux-white) 0%, var(--lux-pearl) 100%);
  color: var(--lux-black);
  border: 1px solid var(--lux-white);
}
.btn-lux:hover {
  box-shadow: 0 10px 30px rgba(255,255,255,0.3);
}
.btn-lux-outline {
  color: var(--lux-white);
  border: 1px solid rgba(255,255,255,0.5);
}
.btn-lux-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--lux-white);
}

/* Badges */
.badge-lux-gold {
  background: rgba(255,255,255,0.1);
  color: var(--lux-white);
  border-color: rgba(255,255,255,0.3);
}

/* Hover glow → white */
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Utilities */
.text-gold { color: var(--lux-white); }
.bg-gold { background-color: var(--lux-white); }
.border-gold { border-color: var(--lux-white); }