*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base: #08080e;
  --bg-1:    #0f0f18;
  --bg-2:    #16161f;
  --bg-3:    #1e1e2a;
  --bg-4:    #262635;
  --border:    rgba(255,255,255,0.06);
  --border-md: rgba(255,255,255,0.11);
  --border-lg: rgba(255,255,255,0.18);
  --text-1: #eeeef5;
  --text-2: #8888a4;
  --text-3: #52527a;
  --accent:      #7c6af0;
  --accent-2:    #a78bfa;
  --accent-dim:  rgba(124,106,240,0.14);
  --accent-glow: rgba(124,106,240,0.35);
  --green:     #34d399;
  --green-dim: rgba(52,211,153,0.11);
  --red:       #f87171;
  --red-dim:   rgba(248,113,113,0.11);
  --amber:     #fbbf24;
  --amber-dim: rgba(251,191,36,0.11);
  --blue:      #60a5fa;
  --font-head: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-num: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --sidebar-w: 230px;
  --nav-h: 64px; /* bottom nav height on mobile */
  --tr: 0.16s ease;
}

html { font-size: 15px; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-head); background: var(--bg-base); color: var(--text-1); min-height: 100vh; min-height: 100dvh; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 99px; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
body { display: flex; }

/* Desktop: sidebar + main */
.sidebar {
  width: var(--sidebar-w); min-height: 100vh; background: var(--bg-1);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; z-index: 100; padding: 1.5rem 0;
  transition: transform 0.25s ease;
}
.main {
  margin-left: var(--sidebar-w); flex: 1; padding: 2rem 2.5rem;
  max-width: calc(100vw - var(--sidebar-w)); min-height: 100vh;
}
/* Centre le contenu sur les très grands écrans (32"+) avec une largeur max raisonnable
   tout en gardant la sidebar à gauche. La grille interne s'adapte automatiquement. */
@media (min-width: 1920px) {
  .main {
    max-width: 1800px;
    margin-left: max(var(--sidebar-w), calc((100vw - 1800px) / 2));
    margin-right: auto;
  }
}

/* ── TOPBAR GLOBALE (page header) ──────────────────────────────────────────── */
/* Applied par défaut à toutes les pages qui utilisent .topbar.
   Les pages avec un style .topbar local (inventory, sales, etc.) override.  */
.topbar { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-title-block { flex: 1; min-width: 200px; }
.topbar-title { font-size: 1.4rem; font-weight: 800; font-family: var(--font-num, var(--font-head)); line-height: 1.15; }
.topbar-sub { font-size: 0.78rem; color: var(--text-3); font-family: var(--font-mono); margin-top: 0.25rem; }

/* ── SIDEBAR ────────────────────────────────────────────────────────────────── */
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0.5rem 1rem 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; }
.logo-icon svg { width: 100%; height: 100%; display: block; border-radius: 10px; box-shadow: 0 4px 14px rgba(124,106,240,.35); }
.logo-text { font-family: var(--font-head), -apple-system, system-ui, sans-serif !important; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.005em; line-height: 1.05; color: var(--text-1); flex: 1; min-width: 0; padding-right: 8px; overflow: visible; }
.logo-text small { font-family: var(--font-mono), "Courier New", monospace !important; font-size: 0.46rem; color: var(--text-3); letter-spacing: 0.13em; font-weight: 600; display: block; margin-top: 4px; white-space: nowrap; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 0.75rem; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--text-2); transition: background var(--tr), color var(--tr); letter-spacing: 0.02em; }
.nav-item:hover { background: var(--bg-2); color: var(--text-1); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 100%; height: 100%; }
.nav-section-label { font-size: 0.62rem; font-family: var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; padding: 1.1rem 0.9rem 0.4rem; font-weight: 700; }
.sidebar-footer { padding: 1rem 0.75rem 0.5rem; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 8px; padding: 0.5rem 0; margin-bottom: 0.5rem; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.user-name { font-size: 0.8rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 0.6rem; color: var(--text-3); font-family: var(--font-mono); }
.btn-logout { width: 100%; padding: 0.5rem; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-3); font-size: 0.78rem; transition: all var(--tr); margin-top: 0.4rem; }
.btn-logout:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.btn-export { width: 100%; padding: 0.55rem; background: transparent; border: 1px solid var(--border-md); border-radius: var(--radius-md); color: var(--text-2); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; transition: all var(--tr); margin-bottom: 0.4rem; }
.btn-export:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── MOBILE BOTTOM NAV ──────────────────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bg-1); border-top: 1px solid var(--border);
  height: var(--nav-h);
  padding: 0 0.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 4px; width: 100%; }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.4rem 0.6rem; border-radius: var(--radius-md); color: var(--text-3); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all var(--tr); flex: 1; }
.mobile-nav-item.active { color: var(--accent); background: var(--accent-dim); }
.mobile-nav-icon { font-size: 1.1rem; line-height: 1; }

/* Mobile header */
.mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
  height: 56px; align-items: center; padding: 0 1rem; gap: 12px;
}
.mobile-header-logo { font-size: 1rem; font-weight: 800; color: var(--accent); letter-spacing: 0.06em; }
.mobile-header-user { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── PAGE LAYOUT ────────────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 0.75rem; }
.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.page-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 3px; font-family: var(--font-mono); }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; font-family: var(--font-head); letter-spacing: 0.02em; transition: opacity var(--tr), transform var(--tr); white-space: nowrap; }
.btn-primary:hover { opacity: 0.87; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 1.2rem; background: transparent; color: var(--text-1); border: 1px solid var(--border-md); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; font-family: var(--font-head); transition: all var(--tr); white-space: nowrap; }
.btn-secondary:hover { background: var(--bg-2); }
.btn-secondary:active { transform: scale(0.97); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(248,113,113,0.28); border-radius: var(--radius-sm); padding: 0.3rem 0.65rem; font-size: 0.75rem; transition: all var(--tr); }
.btn-danger:hover { background: var(--red-dim); }
.btn-sm { padding: 0.3rem 0.7rem !important; font-size: 0.75rem !important; }

/* ── KPI GRID ───────────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; position: relative; overflow: hidden; transition: border-color var(--tr); }
.kpi-card:hover { border-color: var(--border-md); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--kpi-accent, var(--accent)); }
.kpi-label { font-size: 0.68rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; }
.kpi-value { font-family: var(--font-num); font-size: 1.35rem; font-weight: 600; color: var(--text-1); letter-spacing: -0.01em; }
.kpi-value.positive { color: var(--green); }
.kpi-value.negative { color: var(--red); }
.kpi-sub { font-size: 0.7rem; color: var(--text-3); margin-top: 0.35rem; font-family: var(--font-mono); }
.kpi-delta { font-size: 0.78rem; font-family: var(--font-mono); margin-top: 0.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.3rem; }
.kpi-delta.positive { color: var(--green); }
.kpi-delta.negative { color: var(--red); }

/* Period filter */
.period-filter-row { display: flex; justify-content: center; margin: 1.2rem 0; }
.period-filter { display: flex; gap: 0.3rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 99px; padding: 4px; }
.period-btn { padding: 0.4rem 1rem; border-radius: 99px; border: none; background: transparent; color: var(--text-3); font-size: 0.78rem; font-weight: 700; font-family: var(--font-head); cursor: pointer; transition: all var(--tr); }
.period-btn:hover { color: var(--text-1); }
.period-btn.active { background: var(--accent); color: #fff; }

/* Portfolio Hero — style Collectr */
.portfolio-hero { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem 2rem 1.25rem; margin: 1.5rem 0; position: relative; overflow: hidden; }
.ph-header { margin-bottom: 1rem; }
.ph-label { font-size: 0.78rem; color: var(--text-2); margin-bottom: 0.35rem; font-weight: 500; font-family: var(--font-num); }
.ph-value { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.45rem; font-family: var(--font-num); }
.ph-delta { font-size: 0.82rem; font-weight: 500; font-family: var(--font-num); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 99px; background: var(--bg-2); }
.ph-delta.positive { color: var(--green); background: var(--green-dim); }
.ph-delta.negative { color: var(--red); background: var(--red-dim); }
.ph-delta .ph-delta-label { color: inherit; opacity: 0.75; }

/* Hero period delta — montre la perf sur la période sélectionnée */
.hero-period-delta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .35rem .85rem; border-radius: 99px; font-size: .82rem; font-weight: 600; font-family: var(--font-num); background: var(--bg-2); transition: all .25s; }
.hero-period-delta.pos { background: rgba(52,211,153,.12); color: var(--green); border: 1px solid rgba(52,211,153,.3); }
.hero-period-delta.neg { background: rgba(248,113,113,.12); color: var(--red); border: 1px solid rgba(248,113,113,.3); }
.hero-period-delta .hpd-sign { font-size: .7rem; }
.hero-period-delta .hpd-pct { opacity: .85; font-weight: 500; }
.hero-period-delta .hpd-period { opacity: .55; font-size: .72rem; font-weight: 400; margin-left: .25rem; padding-left: .55rem; border-left: 1px solid currentColor; }
.ph-chart-wrap { height: 220px; margin: 0 -2rem 1.25rem -2rem; }
.portfolio-hero .period-filter { margin: 0 auto; width: fit-content; }
@media (max-width: 600px) {
  .portfolio-hero { padding: 1.5rem 1.1rem 1.1rem; }
  .ph-value { font-size: 1.65rem; }
  .ph-chart-wrap { margin: 0 -1.1rem 1rem -1.1rem; height: 180px; }
}

/* Card link */
.card-link { font-size: 0.72rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.card-link:hover { text-decoration: underline; }

/* Most Valuable */
.most-valuable-section { margin-bottom: 1.5rem; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
@media (max-width: 600px) { .mv-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; } }
.mv-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--tr); display: flex; flex-direction: column; }
.mv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,106,240,0.15); }
.mv-img { aspect-ratio: 4/3; background: var(--bg-3); display: flex; align-items: center; justify-content: center; padding: 0.6rem; overflow: hidden; }
.mv-img img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .2s; }
.mv-img img:hover { transform: scale(1.05); }
.mv-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-3); }
.mv-body { padding: 0.55rem 0.75rem 0.7rem; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.mv-name { font-size: 0.78rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-edition { font-size: 0.62rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.mv-value { font-size: 1rem; font-weight: 800; color: var(--text-1); margin-top: 0.2rem; }
.mv-profit { font-size: 0.7rem; font-family: var(--font-mono); font-weight: 600; }
.mv-profit.pos { color: var(--green); }
.mv-profit.neg { color: var(--red); }
.kpi-tag { display: inline-block; font-size: 0.65rem; font-family: var(--font-mono); padding: 2px 8px; border-radius: 99px; margin-top: 0.5rem; font-weight: 500; }
.kpi-tag.pos { background: var(--green-dim); color: var(--green); }
.kpi-tag.neg { background: var(--red-dim); color: var(--red); }

/* ── CHARTS — Layout pro responsive ─────────────────────────────────────────── */
/* Top row : Most Valuable + Top Movers côte-à-côte */
.dashboard-row{display:grid;gap:1rem;margin-bottom:1.25rem}
.dashboard-row.row-2col{grid-template-columns:2fr 1fr}
.dashboard-row.row-half{grid-template-columns:1fr 1fr}

@media(max-width:1100px){
  .dashboard-row.row-2col{grid-template-columns:1fr}
  .dashboard-row.row-half{grid-template-columns:1fr}
}

/* Charts (donut + ventes) — répartis équitablement */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.chart-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 8px; }
.card-title { font-size: 0.88rem; font-weight: 700; }
.card-badge { font-size: 0.68rem; font-family: var(--font-mono); color: var(--text-3); background: var(--bg-3); padding: 3px 10px; border-radius: 99px; }
.card-link { font-size: 0.72rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.card-link:hover { text-decoration: underline; }

/* Donut compact + légende sur le côté */
.donut-layout{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.donut-canvas-wrap{width:200px;height:200px;flex-shrink:0;position:relative}
.donut-canvas-wrap canvas{max-width:100%;max-height:100%}
.donut-legend{flex:1;min-width:160px;display:flex;flex-direction:column;gap:.4rem}
.donut-legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;padding:.35rem .55rem;border-radius:var(--radius-sm);transition:background .15s}
.donut-legend-item:hover{background:var(--bg-2)}
.donut-legend-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.donut-legend-label{font-weight:600;flex:1;color:var(--text-2)}
.donut-legend-value{font-family:var(--font-mono);color:var(--text-3);font-size:.72rem}

.chart-wrap { position: relative; height: 220px; }

.performers-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:768px){.performers-row { grid-template-columns: 1fr; }}
.perf-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; }
.perf-item { display: flex; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--border); gap: 8px; }
.perf-item:last-child { border-bottom: none; }
.perf-thumb { width: 32px; height: 44px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-3); flex-shrink: 0; }
.perf-name { font-size: 0.8rem; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-profit { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.perf-profit.pos { color: var(--green); }
.perf-profit.neg { color: var(--red); }
.perf-roi { font-size: 0.64rem; font-family: var(--font-mono); padding: 2px 6px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.perf-roi.pos { background: var(--green-dim); color: var(--green); }
.perf-roi.neg { background: var(--red-dim); color: var(--red); }
.empty-state { text-align: center; padding: 2rem 0; color: var(--text-3); font-size: 0.8rem; font-family: var(--font-mono); }

/* ── SKELETON ───────────────────────────────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; min-height: 100px; border-radius: var(--radius-lg); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── TABLE ──────────────────────────────────────────────────────────────────── */
.data-table-wrap { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.data-table th { background: var(--bg-2); color: var(--text-3); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-2); }
.data-table td.mono { font-family: var(--font-mono); font-size: 0.8rem; }
.data-table td.pos  { color: var(--green); font-family: var(--font-mono); font-weight: 500; }
.data-table td.neg  { color: var(--red); font-family: var(--font-mono); font-weight: 500; }
.data-table td.name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item thumbnails */
.item-thumb { width: 36px; height: 50px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-3); border: 1px solid var(--border); vertical-align: middle; cursor: zoom-in; }
.item-thumb-placeholder { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 0.7rem; vertical-align: middle; }

/* ── GRID VIEW ──────────────────────────────────────────────────────────────── */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.grid-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color var(--tr), transform var(--tr); cursor: pointer;
  position: relative;
}
.grid-card:hover { border-color: var(--border-md); transform: translateY(-2px); }
.grid-card-img { width: 100%; aspect-ratio: 0.714; object-fit: cover; background: var(--bg-3); display: block; }
.grid-card-img-ph { width: 100%; aspect-ratio: 0.714; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 2rem; }
.grid-card-body { padding: 0.65rem 0.75rem; }
.grid-card-name { font-size: 0.78rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.grid-card-num { font-size: 0.65rem; font-family: var(--font-mono); color: var(--accent-2); }
.grid-card-edition { font-size: 0.62rem; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-card-price { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.grid-card-val { font-size: 0.75rem; font-family: var(--font-mono); font-weight: 500; }
.grid-card-profit { font-size: 0.68rem; font-family: var(--font-mono); padding: 1px 6px; border-radius: 99px; }
.grid-card-profit.pos { background: var(--green-dim); color: var(--green); }
.grid-card-profit.neg { background: var(--red-dim); color: var(--red); }
.grid-card-sold-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }

/* View toggle */
.view-toggle { display: flex; gap: 4px; background: var(--bg-3); border-radius: var(--radius-md); padding: 3px; }
.view-btn { padding: 5px 10px; border-radius: 7px; border: none; background: transparent; color: var(--text-3); font-size: 0.8rem; cursor: pointer; transition: all .15s; }
.view-btn.active { background: var(--bg-1); color: var(--accent); border: 1px solid var(--border-md); }

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 0.62rem; font-family: var(--font-mono); font-weight: 500; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.04em; white-space: nowrap; }
.badge-carte      { background: rgba(124,106,240,0.14); color: #a59bf7; }
.badge-etb        { background: rgba(96,165,250,0.14);  color: #80b5fb; }
.badge-display    { background: rgba(251,191,36,0.14);  color: #fcd34d; }
.badge-upc        { background: rgba(52,211,153,0.14);  color: #6ee7b7; }
.badge-coffret    { background: rgba(248,113,113,0.14); color: #fca5a5; }
.badge-autres-tcg { background: rgba(144,144,168,0.12); color: #9090a8; }
.badge-sold       { background: rgba(248,113,113,0.14); color: var(--red); }
.badge-fr  { background: rgba(96,165,250,0.1);   color: var(--blue); }
.badge-eng { background: rgba(251,191,36,0.1);   color: var(--amber); }
.badge-jp  { background: rgba(248,113,113,0.1);  color: var(--red); }

/* ── FORMS ──────────────────────────────────────────────────────────────────── */
.form-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem 1rem; margin-bottom: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group.span2 { grid-column: span 2; }
.form-label { font-size: 0.67rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; }
.form-input, .form-select, .form-textarea {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-1); padding: 0.6rem 0.85rem; font-size: 0.875rem; transition: border-color var(--tr); width: 100%;
  -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-3); }
.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888a4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.form-textarea { min-height: 70px; resize: vertical; font-size: 0.82rem; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.section-title { font-size: 0.72rem; font-weight: 700; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* ── FILTERS BAR ────────────────────────────────────────────────────────────── */
.filters-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-pill { padding: 0.32rem 0.85rem; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 0.76rem; font-weight: 500; font-family: var(--font-head); transition: all var(--tr); cursor: pointer; white-space: nowrap; }
.filter-pill:hover { border-color: var(--border-md); color: var(--text-1); }
.filter-pill.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.search-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); padding: 0.4rem 0.85rem; font-size: 0.82rem; font-family: var(--font-mono); width: 200px; transition: border-color var(--tr); }
.search-box:focus { outline: none; border-color: var(--accent); }
.search-box::placeholder { color: var(--text-3); }

/* ── CONFIRM DIALOG ─────────────────────────────────────────────────────────── */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; pointer-events: none; }
.confirm-overlay.open { opacity: 1; pointer-events: all; }
.confirm-box { background: var(--bg-1); border: 1px solid var(--border-md); border-radius: var(--radius-xl); padding: 2rem; width: 100%; max-width: 400px; transform: scale(0.95) translateY(8px); transition: transform .2s; }
.confirm-overlay.open .confirm-box { transform: scale(1) translateY(0); }
.confirm-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.confirm-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.confirm-msg { font-size: 0.84rem; color: var(--text-2); margin-bottom: 1.5rem; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── MODAL ──────────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--bg-1); border: 1px solid var(--border-md); border-radius: var(--radius-xl); padding: 1.75rem; width: 100%; max-width: 560px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; transform: translateY(14px); transition: transform 0.2s; }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-lg { max-width: 700px; }
.modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.5rem; }

/* ── PRICE HISTORY ──────────────────────────────────────────────────────────── */
.price-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); margin-bottom: 0.5rem; background: var(--bg-2); border: 1px solid var(--border); flex-wrap: wrap; }
.price-row-name { font-size: 0.875rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-point { display: flex; align-items: center; gap: 10px; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-3); margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.8rem; }
.price-point-date { color: var(--text-3); font-size: 0.72rem; flex: 1; }
.price-point-val { font-weight: 500; }
.price-point-label { color: var(--text-3); font-size: 0.7rem; flex: 1; }
.price-point-del { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color var(--tr); min-width: 28px; min-height: 28px; }
.price-point-del:hover { color: var(--red); background: var(--red-dim); }

/* ── TOAST NOTIFICATIONS ────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: calc(var(--nav-h) + 1rem); right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(380px, calc(100vw - 2rem)); }
.toast { background: var(--bg-1); border: 1px solid var(--border-md); border-radius: var(--radius-lg); padding: 0.85rem 1.1rem; font-size: 0.84rem; color: var(--text-1); pointer-events: all; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transform: translateX(120%); opacity: 0; transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.22s; }
/* Toast utilisé en standalone (sans .toast-container parent) */
body > .toast, main > .toast { position: fixed; bottom: calc(var(--nav-h) + 1rem); right: 1rem; z-index: 9999; max-width: min(380px, calc(100vw - 2rem)); }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.error { border-color: var(--red); background: var(--bg-1); }
.toast.error::before { content: '⚠'; color: var(--red); margin-right: 4px; }
.toast.hide { transform: translateX(120%); opacity: 0; transition: transform 0.22s ease, opacity 0.18s; }
.toast-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.toast-body { flex: 1; }
.toast-title { font-weight: 600; font-size: 0.84rem; }
.toast-msg { font-size: 0.78rem; color: var(--text-2); margin-top: 1px; }
.toast-close { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1rem; padding: 2px 4px; flex-shrink: 0; transition: color .15s; }
.toast-close:hover { color: var(--text-1); }
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast.warning { border-left: 3px solid var(--amber); }
/* Keep .notif for compatibility */
.notif { display: none !important; }
@media (max-width: 768px) {
  .toast-container { right: 0.75rem; left: 0.75rem; max-width: none; bottom: calc(var(--nav-h) + 0.75rem); }
  .toast { transform: translateY(120%); }
  .toast.show { transform: translateY(0); }
  .toast.hide { transform: translateY(120%); }
}

/* ── LIGHTBOX ───────────────────────────────────────────────────────────────── */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:1000; align-items:center; justify-content:center; cursor:zoom-out; }
#lightbox.open { display:flex; }
#lightbox img { max-width:92vw; max-height:88vh; max-height:88dvh; object-fit:contain; border-radius:8px; }

/* ── IMAGE PICKER ───────────────────────────────────────────────────────────── */
.img-card-result { cursor:pointer; border:2px solid transparent; border-radius:10px; overflow:hidden; transition:all .15s; background:var(--bg-3); }
.img-card-result:hover { border-color:var(--accent); }
.img-preview { width:80px; height:110px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-3); border:1px solid var(--border); }
.img-preview-placeholder { width:80px; height:110px; border-radius:var(--radius-sm); background:var(--bg-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:0.65rem; text-align:center; font-family:var(--font-mono); padding:4px; }

/* ── STAT ROW ───────────────────────────────────────────────────────────────── */
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.stat-row:last-child { border-bottom: none; }
.stat-val { font-family: var(--font-mono); font-weight: 500; color: var(--accent-2); }

/* ── LOGIN ──────────────────────────────────────────────────────────────────── */
.login-page { min-height: 100vh; min-height: 100dvh; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-base); background-image: radial-gradient(ellipse at 20% 50%, rgba(124,106,240,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(96,165,250,0.04) 0%, transparent 50%); }
.login-card { background: var(--bg-1); border: 1px solid var(--border-md); border-radius: var(--radius-xl); padding: 2.5rem; width: 380px; max-width: calc(100vw - 2rem); }
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 1rem; }
.login-logo-icon svg { width: 100%; height: 100%; display: block; border-radius: 18px; box-shadow: 0 16px 40px rgba(124,106,240,.5); }
.login-logo-title { font-family: var(--font-head), -apple-system, system-ui, sans-serif !important; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.025em; }
.login-logo-sub { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.15em; font-family: var(--font-mono); }
.login-error { background: var(--red-dim); border: 1px solid rgba(248,113,113,0.2); border-radius: var(--radius-md); padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--red); margin-bottom: 1rem; display: none; }
.login-error.show { display: block; }

/* ── INSTALL BANNER ─────────────────────────────────────────────────────────── */
.install-banner { display: none; position: fixed; bottom: 1rem; left: 1rem; right: 1rem; background: var(--accent); color: #fff; border-radius: var(--radius-lg); padding: 0.85rem 1rem; z-index: 500; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(124,106,240,0.5); max-width: 480px; margin: 0 auto; }
.install-banner.show { display: flex; }
.install-banner-text { flex: 1; font-size: 0.82rem; font-weight: 500; line-height: 1.4; }
.install-banner-btn { background: rgba(255,255,255,0.25); border: none; color: #fff; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.install-banner-btn:hover { background: rgba(255,255,255,0.35); }
.install-banner-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 1.2rem; cursor: pointer; padding: 4px 6px; flex-shrink: 0; }
@media (max-width: 768px) {
  .install-banner { bottom: calc(var(--nav-h) + 0.75rem); left: 0.75rem; right: 0.75rem; max-width: none; }
}

/* ── DESKTOP RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .charts-row { grid-template-columns: 1fr; }
  .performers-row { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .performers-row { grid-template-columns: 1fr; }
}

/* ── MOBILE ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide desktop sidebar, show mobile nav */
  .sidebar { display: none !important; }
  .mobile-nav { display: flex; }
  .mobile-header { display: flex; }

  /* Main padding adjustments */
  .main {
    margin-left: 0 !important;
    max-width: 100vw !important;
    padding: 1rem;
    padding-top: calc(56px + 1rem); /* header height */
    padding-bottom: calc(var(--nav-h) + 1rem); /* bottom nav */
  }

  /* Page header stack */
  .page-header { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
  .page-title { font-size: 1.4rem; }
  .header-actions { width: 100%; }
  .header-actions .btn-primary,
  .header-actions .btn-secondary { flex: 1; justify-content: center; }

  /* KPI grid 2 cols */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .kpi-value { font-size: 1.2rem; }
  .kpi-card { padding: 1rem; }

  /* Charts full width */
  .charts-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .performers-row { grid-template-columns: 1fr; gap: 0.75rem; }

  /* Filters scroll */
  .filters-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .filters-bar::-webkit-scrollbar { display: none; }
  .search-box { min-width: 160px; }

  /* Table scroll */
  .data-table-wrap { border-radius: var(--radius-md); }
  .data-table { font-size: 0.78rem; }
  .data-table th, .data-table td { padding: 0.55rem 0.75rem; }

  /* Grid 2 cols on mobile */
  .inventory-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }

  /* Modal full screen on mobile */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; max-height: 92dvh; max-width: 100%; }
  .modal-lg { max-width: 100%; }

  /* Form grid single col */
  .form-grid { grid-template-columns: 1fr; }
  .form-group.span2 { grid-column: 1; }
  .form-actions { flex-direction: column; }
  .form-actions button { width: 100%; justify-content: center; }

  /* Price rows stack */
  .price-row { flex-direction: column; align-items: flex-start; }

  /* Notif above bottom nav */
  .notif { bottom: calc(var(--nav-h) + 0.75rem); left: 1rem; right: 1rem; }

  /* Login */
  .login-card { padding: 1.75rem 1.25rem; }

  /* Bigger touch targets */
  .filter-pill { padding: 0.45rem 1rem; font-size: 0.82rem; }
  .btn-primary, .btn-secondary { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
  input, select { min-height: 44px; font-size: 16px !important; } /* prevent zoom on iOS */
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .kpi-value { font-size: 1rem; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── CATEGORY SELECTOR ──────────────────────────────────────────────────────── */
.cat-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:1rem; background:var(--bg-2); border:2px solid var(--border); border-radius:var(--radius-lg); font-size:.88rem; font-weight:600; font-family:var(--font-head); color:var(--text-2); cursor:pointer; transition:all .15s; }
.cat-btn:hover { border-color:var(--border-md); color:var(--text-1); background:var(--bg-3); }
.cat-btn.active { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }

/* ── SEALED TYPE GRID ───────────────────────────────────────────────────────── */
.sealed-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.stype-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:.65rem .5rem; background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius-md); font-size:.8rem; font-weight:600; font-family:var(--font-head); color:var(--text-2); cursor:pointer; transition:all .15s; line-height:1.2; text-align:center; }
.stype-btn small { font-size:.65rem; font-weight:400; color:var(--text-3); font-family:var(--font-mono); }
.stype-btn:hover { border-color:var(--border-md); color:var(--text-1); }
.stype-btn.active { border-color:var(--blue); background:rgba(96,165,250,.12); color:var(--blue); }

/* ── SEALED PHOTO GRID ──────────────────────────────────────────────────────── */
.sealed-photo-item { position:relative; cursor:pointer; border:2px solid transparent; border-radius:var(--radius-md); overflow:hidden; transition:all .15s; background:var(--bg-3); aspect-ratio:.714; }
.sealed-photo-item:hover { border-color:var(--accent); transform:scale(1.02); }
.sealed-photo-item.selected { border-color:var(--accent); }
.sealed-photo-item img { width:100%; height:100%; object-fit:cover; display:block; }
.sealed-photo-check { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:var(--accent); display:none; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; }
.sealed-photo-item.selected .sealed-photo-check { display:flex; }
.sealed-photo-name { position:absolute; bottom:0; left:0; right:0; padding:3px 5px; background:rgba(0,0,0,.65); font-size:.6rem; font-family:var(--font-mono); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:768px) {
  .sealed-type-grid { grid-template-columns:repeat(2,1fr); }
  .cat-btn { padding:.75rem; }
}

/* ── SEALED GALLERY MODAL ───────────────────────────────────────────────────── */
.sg-card { background:var(--bg-1); border:2px solid var(--border); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; transition:all .15s; }
.sg-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 16px rgba(124,106,240,.2); }
.sg-card.sg-selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.sg-check { display:none; }
.sg-card.sg-selected .sg-check { display:flex !important; }

/* Set browser mobile — liste plein écran, cartes en dessous */
@media (max-width: 768px) {
  /* Corps en colonne */
  #set-browser-modal > div:last-child {
    flex-direction: column !important;
  }
  /* Liste des sets : pleine largeur, hauteur auto scrollable */
  #sb-set-panel {
    width: 100% !important;
    max-height: 42vh;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Chaque item de set : pleine largeur, texte visible */
  #sb-set-panel > div > div > div {
    white-space: normal !important;
    word-break: break-word;
  }
  #sb-set-panel span { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; }
  /* Cards area : pleine largeur */
  #sb-set-panel + div {
    width: 100% !important;
    flex: 1;
    min-height: 0;
  }
  /* Grille cartes : 2 colonnes */
  #sb-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE UX — Amélioration complète (max-width: 768px)
   NE TOUCHE PAS AU DESKTOP
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Header actions : boutons en ligne scrollable ──────────────────────── */
  .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .header-actions .btn-primary,
  .header-actions .btn-secondary {
    flex: 0 0 auto;
    font-size: .8rem;
    padding: .55rem .9rem;
  }
  .view-toggle { flex-shrink: 0; }

  /* ── Tableau : scroll horizontal + colonnes essentielles ───────────────── */
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
  .data-table { min-width: 600px; font-size: .74rem; }
  .data-table th, .data-table td { padding: .45rem .6rem; white-space: nowrap; }

  /* ── Grille inventaire : 2 colonnes ────────────────────────────────────── */
  .inventory-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .55rem; }
  .grid-card-name { font-size: .76rem; }
  .grid-card-val  { font-size: .8rem; }

  /* ── KPIs : 2 par ligne bien carrés ────────────────────────────────────── */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .55rem; }
  .kpi-card { padding: .85rem .75rem; }
  .kpi-label { font-size: .68rem; }
  .kpi-value { font-size: 1.1rem; }
  .kpi-sub   { font-size: .65rem; }

  /* ── Filtres pills : scroll horizontal ─────────────────────────────────── */
  [style*="flex-wrap:wrap"][style*="filter-pill"],
  .filters-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filter-pill { flex-shrink: 0; font-size: .76rem; padding: .35rem .85rem; }

  /* ── Formulaire add item : champs pleine largeur ───────────────────────── */
  .form-card { padding: 1rem; border-radius: var(--radius-lg); }
  .form-grid  { grid-template-columns: 1fr !important; }
  .form-group.span2, .form-group.full { grid-column: 1 !important; }
  .form-label { font-size: .78rem; }

  /* ── Set browser : colonne sets réduite, cards en grille 2 col ─────────── */
  #sb-set-panel {
    width: 100px !important;
    font-size: .7rem;
  }
  #sb-set-panel .set-id-badge { display: none; }
  /* Cards du set : 2 colonnes sur mobile */
  #sb-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ── Modals : plein écran sur mobile ───────────────────────────────────── */
  #inv-wizard-modal > div,
  #bulk-sale-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 95vh !important;
    max-height: 95vh !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    margin-top: auto;
  }
  #inv-wizard-modal,
  #bulk-sale-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* ── Galerie scellé : 2 colonnes ───────────────────────────────────────── */
  #sg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* ── Modal edit : bottom sheet ─────────────────────────────────────────── */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal, .modal-lg {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto;
  }

  /* ── Page prix : items en liste compacte ───────────────────────────────── */
  #prices-list .price-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Pagination : boutons bien espacés ─────────────────────────────────── */
  #inv-pagination, #inv-pagination-top,
  #prices-pagination-top, #prices-pagination-bot,
  #sales-pagination-top, #sales-pagination-bot {
    gap: 12px;
    padding: .6rem 0;
  }
  #inv-pagination button, #inv-pagination-top button,
  #prices-pagination-top button, #prices-pagination-bot button,
  #sales-pagination-top button, #sales-pagination-bot button {
    min-height: 40px;
    padding: .4rem 1rem;
    font-size: .82rem;
  }

  /* ── Vente rapide : grille 2 colonnes sur mobile ───────────────────────── */
  #bs-grid[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Suppression barre bulk : texte court ──────────────────────────────── */
  #bulk-bar, #sales-bulk-bar { flex-wrap: wrap; gap: 8px; }

  /* ── Section titre ─────────────────────────────────────────────────────── */
  .section-title { font-size: .9rem; }

  /* ── Inputs : taille min 44px pour le touch ─────────────────────────────── */
  .form-input, .form-select, .form-textarea { min-height: 44px !important; font-size: 16px !important; }
  .btn-primary, .btn-secondary, .btn-danger { min-height: 44px; }
  .btn-sm { min-height: 36px !important; font-size: .78rem !important; }

  /* ── Scroll bar cachées ─────────────────────────────────────────────────── */
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* ── Très petits écrans (≤ 390px) ──────────────────────────────────────── */
@media (max-width: 390px) {
  .inventory-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .header-actions .btn-primary,
  .header-actions .btn-secondary { font-size: .72rem; padding: .5rem .7rem; }
  #sb-set-panel { width: 80px !important; }
  .page-title { font-size: 1.2rem; }
}

/* ── Prix mobile : 2 colonnes ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #prices-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .price-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    padding: .75rem;
    border-radius: var(--radius-md);
    background: var(--bg-2);
    border: 1px solid var(--border);
  }
  .price-row img, .price-row > div:first-child {
    align-self: center;
  }
  .price-row input[type="number"] {
    width: 100% !important;
  }
  .price-row > div[style*="min-width:90px"],
  .price-row > div[style*="min-width:110px"] {
    min-width: unset !important;
    text-align: left !important;
  }
  .price-row button { width: 100%; justify-content: center; }
  .price-row-name { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   FIXES MOBILE SUPPLÉMENTAIRES
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Homogénéité largeur toutes les pages ──────────────────── */
@media (max-width: 768px) {
  .main {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: calc(56px + .75rem) .75rem calc(var(--nav-h) + .75rem) !important;
  }
  /* Empêcher tout débordement horizontal */
  body { overflow-x: hidden !important; }
  * { max-width: 100%; box-sizing: border-box; }

  /* ── 2. Vue grille ventes : 2 colonnes ───────────────────────── */
  #sales-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .55rem !important;
  }

  /* ── 3. Set browser : dropdown select au lieu de liste latérale ─ */
  /* On cache le panel et on affiche un select natif mobile */
  #sb-set-panel { display: none !important; }
  #sb-mobile-select-wrap { display: block !important; }

  /* Stats : forcer width correcte */
  .charts-row > *, .performers-row > * { min-width: 0; overflow: hidden; }
}

/* Select mobile pour sets — caché sur desktop */
#sb-mobile-select-wrap {
  display: none;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}
#sb-mobile-select {
  width: 100%;
  padding: .6rem .75rem;
  background: var(--bg-2);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-size: 1rem;
  font-family: var(--font-head);
}

/* ═══════════════════════════════════════════════════════════════
   FIXES MOBILE — PRIX + STATS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Prix vue grille : 2 colonnes ───────────────────────── */
  #prices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── 2. Prix vue liste : 1 colonne, pas de débordement ─────── */
  #prices-list {
    grid-template-columns: 1fr !important;
  }
  .price-row {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .price-row input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #prices-list > * { min-width: 0; overflow: hidden; }

  /* ── 3. Stats : Répartition + Distribution en colonne ──────── */
  /* La grille 1fr 1fr devient 1 colonne sur mobile */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Tableau répartition : scroll horizontal */
  #type-tbody, .chart-card .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-card { overflow: hidden; max-width: 100%; }
  .chart-wrap { overflow: hidden; max-width: 100%; }
  .chart-wrap canvas { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX — Vue tableau cachée, grille forcée, modal adapté
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Cacher le toggle vue tableau/grille sur mobile ─────── */
  .view-toggle { display: none !important; }

  /* ── 2. Cacher vue tableau, forcer vue grille ──────────────── */
  #view-table       { display: none !important; }
  #sales-view-table { display: none !important; }

  /* ── 3. Toujours afficher la vue grille/liste ──────────────── */
  #view-grid       { display: block !important; }
  #sales-view-grid { display: block !important; }

  /* ── 4. Modal modifier article — bottom sheet adapté ───────── */
  /* Grille 1fr 90px → colonne unique, aperçu en haut */
  .modal-lg .form-grid-with-preview {
    display: flex;
    flex-direction: column-reverse; /* aperçu en bas sur desktop, en haut sur mobile */
  }

  /* Réécriture de la grille du modal edit */
  #edit-modal .modal {
    padding: 1rem !important;
  }
  #edit-modal .modal > div[style*="grid-template-columns:1fr 90px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  /* Aperçu image : centré en haut */
  #edit-modal .modal > div > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    order: -1 !important;
  }
  #edit-modal .modal > div > div:last-child .img-preview,
  #edit-modal .modal > div > div:last-child .img-preview-placeholder {
    width: 100px !important;
    height: 140px !important;
  }
  /* Formulaire : pleine largeur */
  #edit-modal .modal > div > div:first-child {
    width: 100% !important;
  }
  #edit-modal .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 5. Pagination : haut seulement (pas doublon en bas) ───── */
  #inv-pagination,
  #prices-pagination-bot,
  #sales-pagination-bot {
    display: none !important;
  }
  #inv-pagination-top,
  #prices-pagination-top,
  #sales-pagination-top {
    display: flex !important;
  }

  /* ── 6. Grille inventaire mobile : cartes plus grandes ─────── */
  .grid-card { border-radius: var(--radius-lg); }
  .grid-card-body { padding: .55rem .6rem; }
  .grid-card-name { font-size: .75rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── 7. Prix vue liste : 1 seule colonne propre ────────────── */
  #prices-list { grid-template-columns: 1fr !important; }

  /* ── 8. Bulk bar mobile : compact ─────────────────────────── */
  #bulk-bar .btn-danger { font-size: .78rem; padding: .5rem .8rem; }
  #sales-bulk-bar .btn-danger { font-size: .78rem; padding: .5rem .8rem; }
}

/* ── Grid card actions (modifier + supprimer) ──────────────────────────────── */
.grid-card-actions {
  display: none;
  gap: 4px;
  padding: 4px 6px 6px;
}
.grid-card:hover .grid-card-actions { display: flex; }
.grid-card-actions .btn-sm { flex: 1; font-size: .72rem; padding: .35rem .4rem; min-height: 34px; }

@media (max-width: 768px) {
  /* Toujours visible sur mobile */
  .grid-card-actions { display: flex; }

  /* ── Modal modifier : compact sur mobile ─────────────────────── */
  .modal-lg {
    max-height: 95dvh !important;
    overflow-y: auto;
    padding: .9rem 1rem !important;
  }
  .modal-title { font-size: 1rem; margin-bottom: .75rem; }

  /* Grille 1fr 90px → colonne, aperçu en haut */
  #edit-modal .modal > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: .75rem !important;
  }
  /* Aperçu : en haut, centré, image petite */
  #edit-modal .modal > div > div:last-child {
    order: -1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  #edit-modal .modal > div > div:last-child .img-preview,
  #edit-modal .modal > div > div:last-child .img-preview-placeholder {
    width: 80px !important;
    height: 112px !important;
  }
  /* Formulaire : pleine largeur, champs 2 par ligne */
  #edit-modal .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }
  #edit-modal .form-grid .form-group.span2,
  #edit-modal .form-grid .form-group.full { grid-column: 1 / -1 !important; }
  #edit-modal .form-label { font-size: .72rem; }
  /* Notes : textarea moins haute */
  #e-notes { min-height: 48px !important; height: 48px; }
  /* Cacher bouton importer sur mobile */
  .import-label-btn { display: none !important; }
  /* Input image pleine largeur */
  #e-image { width: 100% !important; }
}

@media (max-width: 768px) {
  /* Cacher le champ Image complet dans le modal modifier */
  #edit-modal .form-group:has(#e-image) { display: none !important; }
  #edit-modal #e-upload-progress { display: none !important; }
}

@media (max-width: 768px) {
  /* Modal modifier : centré verticalement, pas collé en bas */
  #edit-modal {
    align-items: center !important;
    padding: 1rem !important;
  }
  #edit-modal .modal {
    border-radius: var(--radius-xl) !important;
    max-height: 88dvh !important;
    margin: 0 !important;
  }

  /* Cacher Notes dans le modal modifier sur mobile */
  #edit-modal .form-group:has(#e-notes) { display: none !important; }
}

@media (max-width: 768px) {
  /* Réglages : 1 colonne sur mobile */
  #settings-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  /* Stats mobile-header logo */
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Nav réglages + Form ventes + CSV/Import cachés
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Export CSV et Import : cachés sur mobile ────────────── */
  /* Inventory */
  .header-actions button[onclick*="doExportCsv"],
  .header-actions button[onclick*="toggleImport"],
  /* Sales */
  .header-actions button[onclick*="exportSalesCsv"],
  /* Generic */
  button[onclick*="ExportCsv"],
  button[onclick*="exportCsv"],
  button[onclick*="Export CSV"],
  button[title*="CSV"],
  button[title*="csv"] { display: none !important; }

  /* Bloc import complet */
  #import-form { display: none !important; }

  /* ── 2. Formulaire "Enregistrer une vente" sur mobile ───────── */

  /* Article vendu : pleine largeur, pas de margin 25% */
  #sale-form > div[style*="margin:0 25%"] {
    margin: 0 0 .85rem 0 !important;
    text-align: left !important;
  }
  #sale-form > div[style*="margin:0 25%"] label {
    text-align: left !important;
  }
  /* Filtres : scroll horizontal compact */
  #sale-form > div[style*="margin:0 25%"] > div:first-of-type {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 4px;
  }
  #sale-form .filter-pill {
    flex-shrink: 0;
    font-size: .76rem !important;
    padding: 4px 10px !important;
  }

  /* Champs vente : 2 colonnes sur mobile au lieu de 3 */
  #sale-form > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }
  /* Réf. achat : cachée sur mobile (lecture seule, peu utile) */
  #sale-form .form-group:has(#s-buy-ref) { display: none !important; }
  /* Notes : cachée sur mobile */
  #sale-form .form-group:has(#s-notes) { display: none !important; }
  /* Prix vente : pleine largeur et mis en avant */
  #sale-form .form-group:has(#s-price) { grid-column: 1 / -1 !important; }
  #s-price { font-size: 1.1rem !important; font-weight: 700 !important; }

  /* Preview profit : compact */
  #sale-preview > div { gap: .75rem !important; font-size: .78rem !important; }

  /* Boutons form : pleine largeur */
  #sale-form .form-actions { flex-direction: column; gap: 8px; }
  #sale-form .form-actions button { width: 100%; }
}

@media (max-width: 768px) {
  /* Tous les textes des cartes grille : tronqués avec ... */
  .grid-card-name,
  .grid-card-edition,
  .grid-card-num,
  .grid-card-val,
  .grid-card-profit,
  .grid-card-body > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block;
    max-width: 100%;
  }
  /* Prix page grille : même chose */
  .grid-card-body { overflow: hidden; }
}

@media (max-width: 768px) {
  /* Modal historique prix : centré au milieu */
  #history-modal {
    align-items: center !important;
    padding: 1rem !important;
  }
  #history-modal .modal {
    border-radius: var(--radius-xl) !important;
    max-height: 80dvh !important;
    overflow-y: auto;
  }

  /* Cacher Import prix sur mobile */
  button[onclick*="togglePriceImport"],
  button[onclick*="doPriceImport"],
  #price-import-form { display: none !important; }
}

@media (max-width: 768px) {
  /* 5 onglets : répartition dynamique */
  .mobile-nav-item {
    padding: 0.4rem 0.3rem !important;
    font-size: 0.58rem !important;
    letter-spacing: 0 !important;
  }
  .mobile-nav-icon { font-size: 1.05rem !important; }
}


@media (max-width: 768px) {
  /* Filtres : recherche pleine largeur en haut, pills en dessous */
  .filters-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filters-row .search-box {
    width: 100% !important;
    flex: none !important;
    min-width: unset !important;
  }
  .filters-row-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── PAGINATION universelle (utilisée partout) ─────────────────────────────── */
.pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:1.5rem auto;flex-wrap:wrap;padding:0 1rem}
.pagination .pg-arrow,.pagination .pg-num{min-width:38px;height:38px;padding:0 .5rem;border-radius:var(--radius-md);background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);font-size:.85rem;font-weight:700;font-family:var(--font-num);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.pagination .pg-arrow:hover:not(:disabled),.pagination .pg-num:hover:not(.active){border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateY(-1px)}
.pagination .pg-arrow:disabled{opacity:.35;cursor:default;transform:none}
.pagination .pg-num.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(124,106,240,.35);cursor:default}
.pagination .pg-ellipsis{color:var(--text-3);padding:0 .3rem;font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;align-self:center}
.pagination .pg-info{margin-left:.85rem;padding-left:.85rem;border-left:1px solid var(--border);color:var(--text-3);font-size:.75rem;font-family:var(--font-mono)}
@media(max-width:600px){.pagination{gap:.3rem}.pagination .pg-arrow,.pagination .pg-num{min-width:34px;height:34px;font-size:.78rem}.pagination .pg-info{display:none}}

/* ── Toggle réorganisation moderne ─────────────────────────────────────────── */
.btn-reorder-toggle{position:relative;padding:.55rem .9rem .55rem 2.6rem;border-radius:99px;background:var(--bg-2);border:1px solid var(--border-md);color:var(--text-2);cursor:pointer;font-size:.82rem;font-weight:700;font-family:var(--font-num);display:inline-flex;align-items:center;gap:.5rem;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden}
.btn-reorder-toggle::before{content:'';position:absolute;left:.45rem;top:50%;transform:translateY(-50%);width:30px;height:18px;background:var(--bg-4);border:1px solid var(--border);border-radius:99px;transition:all .25s cubic-bezier(.4,0,.2,1)}
.btn-reorder-toggle::after{content:'';position:absolute;left:.6rem;top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--text-3);border-radius:50%;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.btn-reorder-toggle:hover{border-color:var(--accent);color:var(--accent)}
.btn-reorder-toggle:hover::before{border-color:var(--accent)}
.btn-reorder-toggle.active{background:linear-gradient(135deg,var(--accent),#9580ff);border-color:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(124,106,240,.45)}
.btn-reorder-toggle.active::before{background:rgba(255,255,255,.25);border-color:transparent}
.btn-reorder-toggle.active::after{left:1.7rem;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.btn-reorder-toggle .reorder-icon{width:14px;height:14px;flex-shrink:0;transition:transform .25s}
.btn-reorder-toggle.active .reorder-icon{transform:rotate(90deg)}

/* ── MODE PRIVÉ — Bouton sidebar ──────────────────────────────────────────── */
.privacy-btn{position:relative;width:32px;height:32px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-left:auto}
.privacy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.privacy-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(124,106,240,.4)}
.privacy-btn svg{width:14px;height:14px;position:absolute;transition:opacity .2s,transform .2s}
.privacy-btn .privacy-icon-eyeoff{opacity:0;transform:scale(.7)}
.privacy-btn.active .privacy-icon-eye{opacity:0;transform:scale(.7)}
.privacy-btn.active .privacy-icon-eyeoff{opacity:1;transform:scale(1)}

/* ── MODE PRIVÉ — Masquage des valeurs ────────────────────────────────────── */
/* Le JS scanne automatiquement les éléments contenant € et leur ajoute la classe .privacy-blur */
/* En backup, on liste aussi des classes connues pour garantir le masquage */
body.privacy-mode .privacy-blur,
body.privacy-mode [data-privacy="hide"],
body.privacy-mode .kpi-value,
body.privacy-mode .kpi-sub,
body.privacy-mode .ph-value,
body.privacy-mode .ap-price,
body.privacy-mode .ap-kpi-value,
body.privacy-mode .perf-profit,
body.privacy-mode .perf-roi,
body.privacy-mode .grid-card-val,
body.privacy-mode .grid-card-profit,
body.privacy-mode .stat-card-value,
body.privacy-mode .activity-amount,
body.privacy-mode .ph-stat-value,
body.privacy-mode .hero-period-delta strong,
body.privacy-mode .ph-delta,
body.privacy-mode .item-card-price,
body.privacy-mode .mv-value,
body.privacy-mode .donut-legend-value,
body.privacy-mode .cat-value,
body.privacy-mode .cat-roi,
body.privacy-mode .stat-value,
body.privacy-mode .month-best-amount,
body.privacy-mode .activity-amount,
body.privacy-mode .pf-value,
body.privacy-mode .pf-stat-value,
body.privacy-mode .pf-revenue,
body.privacy-mode .stat-num,
body.privacy-mode .admin-kpi-value,
body.privacy-mode td.mono.pos,
body.privacy-mode td.mono.neg,
body.privacy-mode td.pos,
body.privacy-mode td.neg {
  filter: blur(8px);
  cursor: pointer;
  transition: filter .25s;
  user-select: none;
}

body.privacy-mode .privacy-blur:hover,
body.privacy-mode [data-privacy="hide"]:hover,
body.privacy-mode .kpi-value:hover,
body.privacy-mode .kpi-sub:hover,
body.privacy-mode .ph-value:hover,
body.privacy-mode .ap-price:hover,
body.privacy-mode .ap-kpi-value:hover,
body.privacy-mode .perf-profit:hover,
body.privacy-mode .perf-roi:hover,
body.privacy-mode .grid-card-val:hover,
body.privacy-mode .grid-card-profit:hover,
body.privacy-mode .stat-card-value:hover,
body.privacy-mode .activity-amount:hover,
body.privacy-mode .ph-stat-value:hover,
body.privacy-mode .hero-period-delta:hover strong,
body.privacy-mode .ph-delta:hover,
body.privacy-mode .item-card-price:hover,
body.privacy-mode .mv-value:hover,
body.privacy-mode .donut-legend-value:hover,
body.privacy-mode .cat-value:hover,
body.privacy-mode .cat-roi:hover,
body.privacy-mode .stat-value:hover,
body.privacy-mode .month-best-amount:hover,
body.privacy-mode .pf-value:hover,
body.privacy-mode .pf-stat-value:hover,
body.privacy-mode .pf-revenue:hover,
body.privacy-mode .stat-num:hover,
body.privacy-mode .admin-kpi-value:hover,
body.privacy-mode td.mono.pos:hover,
body.privacy-mode td.mono.neg:hover,
body.privacy-mode td.pos:hover,
body.privacy-mode td.neg:hover {
  filter: blur(0);
}

/* Cacher complètement les graphiques en mode privé */
body.privacy-mode canvas {
  filter: blur(12px);
  transition: filter .3s;
}
body.privacy-mode canvas:hover {
  filter: blur(0);
}

/* Opt-out : éléments qui ne doivent JAMAIS être masqués */
body.privacy-mode [data-privacy="never"],
body.privacy-mode .privacy-never,
body.privacy-mode .nav-item,
body.privacy-mode .nav-icon,
body.privacy-mode .topbar-title,
body.privacy-mode .topbar-sub,
body.privacy-mode .filter-pill,
body.privacy-mode .ap-pill,
body.privacy-mode .pg-num,
body.privacy-mode .pg-arrow,
body.privacy-mode .ap-pill-count,
body.privacy-mode .privacy-btn,
body.privacy-mode .privacy-btn *,
body.privacy-mode #privacy-toast,
body.privacy-mode #privacy-toast * {
  filter: none !important;
  user-select: auto;
}

/* Indicateur visuel : ajout d'un cadenas en haut quand mode actif */
body.privacy-mode::before {
  content: '🔒 Mode privé';
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--accent);
  color: #fff;
  padding: .35rem .85rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--font-num);
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(124,106,240,.4);
  pointer-events: none;
  letter-spacing: .02em;
  animation: privacyBadgeIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes privacyBadgeIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 768px) {
  body.privacy-mode::before {
    top: auto;
    bottom: calc(var(--nav-h) + 1rem);
    right: 1rem;
  }
}

/* Sidebar user — ajustement pour le bouton privacy */
.sidebar-user { gap: .5rem; align-items: center; }

/* ── CLOCHE NOTIFICATIONS ─────────────────────────────────────────────────── */
.notif-bell{position:relative;width:32px;height:32px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-left:auto}
.notif-bell svg{width:14px;height:14px}
.notif-bell:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.notif-bell.has-unread{color:var(--accent);border-color:var(--accent)}
.notif-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:.58rem;font-weight:800;font-family:var(--font-num);padding:1px 4px;border-radius:99px;border:2px solid var(--bg-1);min-width:14px;text-align:center;line-height:1.1}

/* ── DROPDOWN NOTIFICATIONS ───────────────────────────────────────────────── */
.notif-panel{position:fixed;left:calc(var(--sidebar-w) - 4px);bottom:1.2rem;width:340px;max-height:60vh;background:var(--bg-1);border:1px solid var(--border-md);border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;z-index:9000;animation:notifSlide .25s cubic-bezier(.34,1.56,.64,1)}
.notif-panel.open{display:flex}
@keyframes notifSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1024px){.notif-panel{left:1rem;right:1rem;bottom:calc(var(--nav-h) + 1rem);width:auto;max-width:none}}
.notif-panel-header{padding:.85rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-2);flex-shrink:0}
.notif-read-all{background:none;border:none;color:var(--accent);font-size:.7rem;font-weight:700;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm)}
.notif-read-all:hover{background:var(--accent-dim)}
.notif-panel-body{flex:1;overflow-y:auto;max-height:calc(60vh - 60px)}
.notif-empty{padding:2rem 1rem;text-align:center;color:var(--text-3);font-size:.85rem}
.notif-item{display:flex;gap:.7rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;align-items:flex-start;position:relative}
.notif-item:hover{background:var(--bg-2)}
.notif-item.unread{background:rgba(124,106,240,.06);border-left:3px solid var(--accent)}
.notif-item.unread:hover{background:rgba(124,106,240,.10)}
.notif-item-img{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg-3);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.notif-item-img img{width:100%;height:100%;object-fit:contain;padding:2px}
.notif-icon-fallback{font-size:1.2rem}
.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:.82rem;font-weight:700;line-height:1.25;color:var(--text-1)}
.notif-item-msg{font-size:.72rem;color:var(--text-2);margin-top:.15rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-item-time{font-size:.62rem;color:var(--text-3);font-family:var(--font-mono);margin-top:.3rem}
.notif-item-del{opacity:0;background:none;border:none;color:var(--text-3);cursor:pointer;font-size:.85rem;padding:.2rem .35rem;border-radius:var(--radius-sm);transition:all .15s;flex-shrink:0}
.notif-item:hover .notif-item-del{opacity:1}
.notif-item-del:hover{background:var(--red-dim);color:var(--red)}

/* ── BOUTON ÉTOILE WISHLIST (sur les cartes du catalogue) ─────────────────── */
.btn-wish{position:absolute;top:6px;left:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:5;opacity:0;transform:scale(.85)}
.btn-wish svg{width:12px;height:12px}
.card-tile:hover .btn-wish,.card-tile .btn-wish.active{opacity:1;transform:scale(1)}
.btn-wish:hover{transform:scale(1.12);color:#fbbf24;border-color:#fbbf24;background:rgba(0,0,0,.85)}
.btn-wish.active{background:#fbbf24;color:#000;border-color:#fbbf24;box-shadow:0 2px 8px rgba(251,191,36,.5)}
.btn-wish.active:hover{background:#f59e0b}
/* Bump animation when toggling on */
.btn-wish.bump{animation:wishBump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes wishBump{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ── PAGE WISHLIST ─────────────────────────────────────────────────────────── */
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
@media(max-width:600px){.wish-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}}
.wish-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:all .2s;position:relative}
.wish-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px rgba(124,106,240,.18)}
.wish-card.good-deal{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.wish-card.good-deal::before{content:'🔥 BON PRIX';position:absolute;top:.5rem;left:.5rem;background:var(--green);color:#000;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:99px;z-index:3;letter-spacing:.03em}
.wish-card-img{width:100%;aspect-ratio:1/1.4;object-fit:contain;background:var(--bg-3);padding:.85rem}
.wish-card-img-ph{width:100%;aspect-ratio:1/1.4;background:var(--bg-3);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:2.5rem}
.wish-card-body{padding:.7rem .85rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.wish-card-name{font-size:.82rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2rem}
.wish-card-edition{font-size:.65rem;color:var(--text-3);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wish-card-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.4rem;margin-top:.4rem}
.wish-card-price{font-size:.95rem;font-weight:800;font-family:var(--font-num)}
.wish-card-price.empty{color:var(--text-3);font-style:italic;font-weight:500;font-size:.78rem}
.wish-card-trend{font-size:.62rem;font-family:var(--font-mono);font-weight:700;padding:1px 6px;border-radius:99px}
.wish-card-trend.up{color:var(--red);background:var(--red-dim)}
.wish-card-trend.down{color:var(--green);background:var(--green-dim)}
.wish-card-trend.stable{color:var(--text-3);background:var(--bg-3)}
.wish-card-target{font-size:.65rem;color:var(--text-3);font-family:var(--font-mono)}
.wish-card-actions{display:flex;gap:.3rem;padding:.5rem .85rem .8rem;border-top:1px solid var(--border)}
.wish-card-action{flex:1;padding:.4rem;font-size:.7rem;font-weight:700;background:var(--bg-3);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;font-family:inherit}
.wish-card-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.wish-card-action.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-dim)}

/* ── ALERTES de prix : badge sur item card ────────────────────────────────── */
.alert-badge-on-item{position:absolute;top:.4rem;left:.4rem;background:var(--accent);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;z-index:3;box-shadow:0 4px 10px rgba(124,106,240,.45)}

/* ── COMPARAISON COMMUNAUTÉ (stats) ───────────────────────────────────────── */
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
@media(max-width:768px){.community-grid{grid-template-columns:1fr}}
.community-card{background:linear-gradient(135deg, var(--bg-1), var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;position:relative;overflow:hidden}
.community-card-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-family:var(--font-mono);font-weight:700;margin-bottom:.5rem}
.community-card-value{font-size:1.6rem;font-weight:800;font-family:var(--font-num);line-height:1}
.community-card-sub{font-size:.72rem;color:var(--text-3);margin-top:.4rem;font-family:var(--font-mono)}
.community-percentile{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.7rem;font-weight:700;font-family:var(--font-mono);margin-top:.4rem}
.community-percentile.top{background:var(--green-dim);color:var(--green)}
.community-percentile.mid{background:var(--accent-dim);color:var(--accent)}
.community-percentile.low{background:var(--red-dim);color:var(--red)}

.community-bar{margin-top:.6rem}
.community-bar-track{height:6px;background:var(--bg-3);border-radius:99px;overflow:hidden;position:relative}
.community-bar-fill{height:100%;background:linear-gradient(90deg, var(--accent), #9580ff);border-radius:99px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.community-bar-marker{position:absolute;top:-3px;width:12px;height:12px;background:#fff;border-radius:50%;border:2px solid var(--accent);transform:translateX(-50%);transition:left .8s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px rgba(0,0,0,.4)}

.top-items-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85rem;margin-top:.75rem}
.top-item{display:flex;align-items:center;gap:.8rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:.85rem;transition:all .15s;position:relative}
.top-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,106,240,.18)}
.top-item-img{width:54px;height:74px;background:var(--bg-3);border-radius:6px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:1.4rem}
.top-item-img img{width:100%;height:100%;object-fit:contain}
.top-item-info{flex:1;min-width:0}
.top-item-name{font-size:.85rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-1)}
.top-item-stat{font-size:.7rem;color:var(--text-3);font-family:var(--font-mono);margin-top:.35rem;line-height:1.3}
.top-item-badge{position:absolute;top:.4rem;right:.4rem;background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:99px;font-family:var(--font-mono);letter-spacing:.02em;box-shadow:0 2px 6px rgba(124,106,240,.4)}

/* ── MODAL CRÉATION ALERTE ────────────────────────────────────────────────── */
.alert-modal{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);padding:1rem;align-items:center;justify-content:center}
.alert-modal.open{display:flex}
.alert-inner{background:var(--bg-1);border:1px solid var(--border-md);border-radius:var(--radius-xl);width:100%;max-width:480px;overflow:hidden;animation:notifSlide .25s cubic-bezier(.34,1.56,.64,1)}
.alert-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg-2)}
.alert-title{font-size:1.05rem;font-weight:800;font-family:var(--font-num)}
.alert-sub{font-size:.75rem;color:var(--text-3);margin-top:.25rem}
.alert-body{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.85rem}
.alert-types{display:grid;grid-template-columns:repeat(3, 1fr);gap:.5rem}
.alert-type-btn{padding:.7rem .5rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:center;font-size:.7rem;font-weight:700;color:var(--text-2);transition:all .15s}
.alert-type-btn:hover{border-color:var(--accent);color:var(--accent)}
.alert-type-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(124,106,240,.35)}
.alert-type-btn .alert-type-icon{font-size:1.3rem;display:block;margin-bottom:.25rem}
.alert-actions{display:flex;gap:.5rem;justify-content:flex-end;padding:1rem 1.5rem;background:var(--bg-2);border-top:1px solid var(--border)}