/* ============================================================
   CODE COULEUR TROV - NON NÉGOCIABLE (2026-07-22)
   Une couleur = un rôle. Jamais de 8e teinte : si un besoin
   n'est pas couvert, réutilise une de ces couleurs à une autre
   opacité (rgba .10 / .35), pas une nouvelle.

   VIOLET  --role-action   Actions, nav active, liens, focus. "Trov te parle"
   OR      --role-premium  Pro, Académie, cadenas, Top 3. RARE (< 5 % de l'écran)
   VERT    --role-money    L'ARGENT : marges, "Se revend", verdict ACHETER
   AMBRE   --role-caution  Prudence : badge authenticité, NÉGOCIER, concurrence moyenne
   ROUGE   --role-alert    Alertes, concurrence élevée (jamais de verdict rouge)
   BLEU    --role-data     Data neutre : 2e tuile stat, noms du chat. Rien d'autre

   Dosage 60/30/10 : 60 % neutres, 30 % gris/texte (UNE seule famille
   de gris), 10 % d'accents max par écran.
   Un seul dégradé de marque : violet -> or (titres em, bandeau upgrade).
   ============================================================ */
:root{
    --role-action:#7c6cf6;
    --role-premium:#f0c060;
    --role-money:#3ce8a8;
    --role-caution:#f5b544;
    --role-alert:#f56a7f;
    --role-data:#5aa7ff;
    --bg:#05060a;
    --surface:rgba(255,255,255,.028);
    --surface-2:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.07);
    --border-strong:rgba(255,255,255,.13);
    --text:#eef1f8;
    --muted:#7d8598;
    --muted-2:#565e70;
    --accent:#7c6cf6;
    --accent-2:#a89bff;
    --accent-glow:rgba(124,108,246,.35);
    --gold:#f0c060;
    --green:#3ce8a8;
    --green-dim:rgba(60,232,168,.12);
    --amber:#f5b544;
    --amber-dim:rgba(245,181,68,.12);
    --red:#f56a7f;
    --red-dim:rgba(245,106,127,.12);
    --ali:#ff5030;
    --alb:#ff8a00;
    --etsy:#f1641e;
    --wa:#25d366;
    --r-lg:20px;
    --r-md:14px;
    --r-sm:10px;
    --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    --display:'Space Grotesk','Plus Jakarta Sans',sans-serif;
    --grid:rgba(255,255,255,.015);
    --modal-1:#12141d;
    --modal-2:#0b0d14;
    --sb:rgba(255,255,255,.1);
    --bar:rgba(255,255,255,.12);
  }
  body.light{
    /* Mêmes rôles, versions assombries pour rester lisibles sur blanc (WCAG AA) */
    --role-action:#6a58e8;
    --role-premium:#a8741a;
    --role-money:#0a7a54;
    --role-caution:#c05621;
    --role-alert:#dc3d55;
    --role-data:#1565c0;
    --bg:#f4f5fa;
    --surface:#ffffff;
    --surface-2:#eef0f6;
    --border:rgba(13,18,30,.09);
    --border-strong:rgba(13,18,30,.18);
    --text:#0e1320;
    --muted:#5c6472;
    --muted-2:#98a0ae;
    --accent-2:#6a58e8;
    --accent-glow:rgba(124,108,246,.25);
    --gold:#a8741a;
    --green:#0aa971;
    --green-dim:rgba(10,169,113,.1);
    --amber:#c47f0e;
    --amber-dim:rgba(196,127,14,.1);
    --red:#dc3d55;
    --red-dim:rgba(220,61,85,.09);
    --grid:rgba(13,18,30,.035);
    --modal-1:#ffffff;
    --modal-2:#f4f5fa;
    --sb:rgba(13,18,30,.2);
    --bar:rgba(13,18,30,.16);
  }
  /* Renforts de contraste en mode clair */
  body.light .spark{filter:saturate(1.1) brightness(.68)}
  body.light .stat-ico svg{filter:brightness(.68)}
  body.light .card,body.light .stat,body.light .list-row,body.light .t3-card{box-shadow:0 1px 3px rgba(13,18,30,.06)}
  body.light .seg,body.light .plan-switch,body.light .searchbox,body.light .select-wrap select{background:#fff}
  body.light .upgrade-banner{background:linear-gradient(90deg,rgba(124,108,246,.14),rgba(168,116,26,.1));border-color:rgba(106,88,232,.4)}
  body.light .side-card{background:linear-gradient(145deg,rgba(124,108,246,.16),rgba(168,116,26,.1));border-color:rgba(106,88,232,.4)}
  body.light .t3-card{background:linear-gradient(135deg,rgba(168,116,26,.09),#fff);border-color:rgba(168,116,26,.4)}
  body.light .agent-box{background:linear-gradient(135deg,rgba(124,108,246,.08),#fff)}
  body.light .live-dot{box-shadow:none}
  body.light .nav-count{box-shadow:none}
  body.light .badge.cat{background:rgba(5,6,10,.55)}
  *{margin:0;padding:0;box-sizing:border-box}
  ::selection{background:rgba(124,108,246,.35)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb);border-radius:10px;border:3px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;min-height:100dvh; /* dvh : évite le saut de layout iOS Safari */
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 500px at 20% -10%, rgba(124,108,246,.13), transparent 60%),
      radial-gradient(800px 500px at 105% 15%, rgba(240,192,96,.05), transparent 55%),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto,auto,48px 48px,48px 48px;
  }
  .app{position:relative;z-index:1;display:flex;min-height:100vh;min-height:100dvh}
  button{font-family:inherit}
  svg.ic{width:16px;height:16px;flex-shrink:0}

  /* ============ SIDEBAR ============ */
  .sidebar{
    width:250px;flex-shrink:0;
    height:100vh;height:100dvh;position:sticky;top:0;
    display:flex;flex-direction:column;
    padding:18px 16px 14px;
    border-right:1px solid var(--border);
    background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 30%);
    backdrop-filter:blur(20px);
    overflow-y:auto;
  }
  .logo{display:flex;align-items:center;gap:12px;padding:0 8px;margin-bottom:16px}
  .logo-mark{
    width:42px;height:42px;border-radius:12px;position:relative;overflow:hidden;
    background:transparent;
    display:grid;place-items:center;
    filter:drop-shadow(0 4px 14px var(--accent-glow));
  }
  /* SVG vectoriel : plus de recadrage (le scale(1.55) servait à rogner le PNG) */
  .logo-mark img{width:100%;height:100%;object-fit:contain;transform:none}
  .logo-row{display:flex;align-items:center;gap:7px}
  .logo-name{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.5px}
  .ai-chip{
    font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.8px;
    padding:2.5px 7px;border-radius:6px;
    background:linear-gradient(135deg,rgba(240,192,96,.2),rgba(240,192,96,.08));
    border:1px solid rgba(240,192,96,.4);
    color:var(--gold);
  }
  .logo-tag{font-size:9.5px;color:var(--muted-2);letter-spacing:1.8px;text-transform:uppercase;margin-top:2px}
  .nav-section{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-2);padding:0 12px;margin:11px 0 5px}
  .nav-item{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:8px 12px;border-radius:var(--r-sm);border:1px solid transparent;
    background:none;color:var(--muted);text-align:left;
    font-size:13.5px;font-weight:500;cursor:pointer;transition:.18s;
    text-decoration:none;
  }
  .nav-item:hover{color:var(--text);background:var(--surface-2)}
  .nav-item.active{
    color:#fff;background:linear-gradient(90deg,rgba(124,108,246,.18),rgba(124,108,246,.04));
    border-color:rgba(124,108,246,.35);
    box-shadow:0 0 20px rgba(124,108,246,.12) inset;
  }
  .nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
  .nav-count{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--accent);color:#fff;padding:2px 8px;border-radius:20px;box-shadow:0 2px 10px var(--accent-glow)}
  .nav-lock{margin-left:auto;display:inline-flex;color:var(--gold);opacity:.8}
  .nav-lock svg{width:12px;height:12px}
  .vip-badge{
    margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.5px;
    background:linear-gradient(135deg,rgba(240,192,96,.22),rgba(240,192,96,.08));
    border:1px solid rgba(240,192,96,.45);color:var(--gold);
    padding:2.5px 8px;border-radius:20px;white-space:nowrap;
  }
  .side-card{
    margin-top:auto;padding:13px 14px;border-radius:var(--r-md);
    background:linear-gradient(145deg,rgba(124,108,246,.16),rgba(240,192,96,.06));
    border:1px solid rgba(124,108,246,.3);
    position:relative;overflow:hidden;
  }
  .side-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(124,108,246,.35),transparent 70%)}
  .side-card h4{font-family:var(--display);font-size:13.5px;margin-bottom:4px;display:flex;align-items:center;gap:7px}
  .side-card p{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:10px}
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:10px 16px;border:none;border-radius:var(--r-sm);
    background:linear-gradient(135deg,#8f7ff8,#5b46e8);
    box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 20px var(--accent-glow);
    color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;
    text-decoration:none;
  }
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 10px 28px var(--accent-glow)}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:9px 16px;border-radius:var(--r-sm);
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s;
    text-decoration:none;
  }
  .btn-ghost:hover{border-color:var(--border-strong);background:var(--surface-2)}

  /* ============ MAIN ============ */
  .main{flex:1;min-width:0;padding:0 36px 60px}
  .topbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;gap:14px;
    padding:18px 0 16px;margin-bottom:20px;
    background:linear-gradient(180deg,var(--bg) 75%,transparent);
  }
  .page-title{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.4px}
  .page-sub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:7px}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(60,232,168,.5);animation:pulse 2s infinite;flex-shrink:0}
  @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(60,232,168,0)}100%{box-shadow:0 0 0 0 rgba(60,232,168,0)}}
  .searchbox{
    margin-left:auto;display:flex;align-items:center;gap:10px;
    width:280px;padding:10px 15px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    transition:.2s;backdrop-filter:blur(10px);
  }
  .searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,246,.18)}
  .searchbox svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
  .searchbox input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13.5px;font-family:inherit;min-width:0}
  .searchbox input::placeholder{color:var(--muted-2)}
  .searchbox kbd{font-size:10px;color:var(--muted-2);border:1px solid var(--border);border-radius:5px;padding:2px 6px;font-family:inherit}
  .plan-switch{
    display:flex;align-items:center;gap:8px;
    padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  }
  .plan-switch .ps-label{font-size:10px;color:var(--muted-2);font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding-left:8px}
  .plan-switch button{
    padding:7px 14px;border:none;border-radius:9px;background:none;
    color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:.18s;
  }
  .plan-switch button.active-free{background:var(--surface-2);color:var(--text)}
  .plan-switch button.active-pro{background:linear-gradient(135deg,#f0c060,#d99b2b);color:#1a1205;box-shadow:0 4px 14px rgba(240,192,96,.3)}
  .avatar{
    width:38px;height:38px;border-radius:12px;cursor:pointer;flex-shrink:0;
    background:linear-gradient(135deg,#f5b544,#f56a7f);
    display:grid;place-items:center;font-weight:700;font-size:13px;color:#1a1205;
    box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
    text-decoration:none;transition:.2s;
  }
  .avatar:hover{transform:translateY(-1px)}
  .icon-btn{
    width:38px;height:38px;border-radius:12px;flex-shrink:0;
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);cursor:pointer;font-size:16px;
    display:grid;place-items:center;transition:.2s;
  }
  .icon-btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}
  .icon-btn svg{width:17px;height:17px}
  .hamburger{display:none}
  .sidebar-close{
    display:none;position:absolute;top:14px;right:14px;z-index:5;
    width:34px;height:34px;border-radius:10px;
    background:var(--surface-2);border:1px solid var(--border);
    color:var(--text);font-size:15px;cursor:pointer;
  }
  .nav-backdrop{
    position:fixed;inset:0;z-index:140;
    background:rgba(3,4,7,.6);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:.3s;
  }
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

  .upgrade-banner{
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;margin-bottom:22px;
    background:linear-gradient(90deg,rgba(124,108,246,.14),rgba(240,192,96,.08));
    border:1px solid rgba(124,108,246,.3);
    border-radius:var(--r-md);
  }
  .upgrade-banner .ub-ico{
    width:36px;height:36px;border-radius:11px;flex-shrink:0;
    background:rgba(240,192,96,.12);border:1px solid rgba(240,192,96,.35);
    display:grid;place-items:center;color:var(--gold);
  }
  .upgrade-banner .ub-text{font-size:13px;color:var(--text)}
  .upgrade-banner .ub-text small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
  .upgrade-banner .btn-primary{width:auto;margin-left:auto;flex-shrink:0}

  /* ============ STATS ============ */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
  .stat{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:20px 20px 14px;transition:.25s;
  }
  .stat:hover{border-color:var(--border-strong);transform:translateY(-2px)}
  .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .stat-label{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
  .stat-ico{
    width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
    background:var(--surface-2);border:1px solid var(--border);
  }
  .stat-ico svg{width:15px;height:15px}
  .stat-value{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}
  .stat-value small{font-size:16px;color:var(--muted);font-weight:600}
  .stat-trend{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;margin-top:8px}
  .stat-trend.up{color:var(--green)}
  .stat-trend.down{color:var(--red)}
  .stat-trend span{color:var(--muted-2);font-weight:500}
  .spark{position:absolute;right:14px;bottom:10px;opacity:.9}

  /* ============ TOOLBAR ============ */
  .toolbar{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
  .seg{
    display:flex;gap:4px;padding:4px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
  }
  .seg button{
    padding:8px 16px;border:none;border-radius:9px;background:none;
    color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s;
  }
  .seg button:hover{color:var(--text)}
  .seg button.active{background:linear-gradient(135deg,#8f7ff8,#5b46e8);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}
  .toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .result-count{font-size:12.5px;color:var(--muted)}
  .result-count b{color:var(--text)}
  .select-wrap{position:relative}
  .select-wrap select{
    appearance:none;padding:9px 34px 9px 14px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
    color:var(--text);font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer;outline:none;
    transition:.2s;
  }
  .select-wrap select:hover{border-color:var(--border-strong)}
  /* Menu déroulant NATIF (Windows) : sans ça, options blanches sur fond blanc en thème sombre */
  .select-wrap select{color-scheme:dark}
  body.light .select-wrap select{color-scheme:light}
  .select-wrap select option{background:var(--bg);color:var(--text)}
  .select-wrap::after{
    content:'';position:absolute;right:13px;top:50%;transform:translateY(-70%) rotate(45deg);
    width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    pointer-events:none;
  }

  /* ============ GRID / CARDS ============ */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
  .card{
    position:relative;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    overflow:hidden;cursor:pointer;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    animation:rise .45s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(124,108,246,.45);
    box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(124,108,246,.08);
  }
  .card-media{height:172px;position:relative;overflow:hidden;background:var(--surface-2)}
  .card-media .ph{
    position:absolute;inset:0;display:grid;place-items:center;
    font-family:var(--display);font-size:52px;font-weight:700;color:var(--muted-2);
  }
  .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  .card:hover .card-media img{transform:scale(1.07)}
  .card-media::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,6,10,.45),transparent 35%,transparent 70%,rgba(5,6,10,.6));
  }
  .badge{
    position:absolute;z-index:2;top:12px;
    display:inline-flex;align-items:center;gap:6px;
    font-size:10.5px;font-weight:700;letter-spacing:.3px;
    padding:5px 11px;border-radius:30px;
    backdrop-filter:blur(12px);
  }
  .badge .b-dot{width:6px;height:6px;border-radius:50%}
  .badge.hot{left:12px;background:rgba(10,40,30,.55);color:var(--green);border:1px solid rgba(60,232,168,.4)}
  .badge.hot .b-dot{background:var(--green)}
  .badge.mid{left:12px;background:rgba(45,33,8,.55);color:var(--amber);border:1px solid rgba(245,181,68,.4)}
  .badge.mid .b-dot{background:var(--amber)}
  .badge.low{left:12px;background:rgba(48,14,20,.55);color:var(--red);border:1px solid rgba(245,106,127,.4)}
  .badge.low .b-dot{background:var(--red)}
  .badge.cat{right:12px;left:auto;background:rgba(5,6,10,.5);color:#dfe3ee;border:1px solid rgba(255,255,255,.14)}
  .fav-btn{
    position:absolute;z-index:3;bottom:10px;right:10px;
    width:32px;height:32px;border-radius:10px;
    background:rgba(5,6,10,.55);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.16);
    display:grid;place-items:center;cursor:pointer;transition:.18s;
    color:#cfd4e2;
  }
  .fav-btn:hover{transform:scale(1.1);color:#fff}
  .fav-btn.on{color:var(--gold);border-color:rgba(240,192,96,.5);background:rgba(45,33,8,.6)}
  .fav-btn svg{width:15px;height:15px}
  /* Top 3 du jour */
  .top3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
  .t3-card{
    display:flex;align-items:center;gap:12px;
    background:linear-gradient(135deg,rgba(240,192,96,.1),var(--surface));
    border:1px solid rgba(240,192,96,.3);border-radius:var(--r-md);
    padding:11px 14px;cursor:pointer;transition:.2s;
  }
  .t3-card:hover{transform:translateY(-2px);border-color:rgba(240,192,96,.55)}
  .t3-medal{font-size:18px;flex-shrink:0}
  .t3-thumb{width:40px;height:40px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface-2)}
  .t3-thumb img{width:100%;height:100%;object-fit:cover}
  .t3-info{min-width:0;flex:1}
  .t3-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .t3-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
  .t3-mult{font-family:var(--display);font-size:13px;font-weight:700;color:var(--green);flex-shrink:0}
  /* Analyse agent + contrefaçon */
  .risk-box{
    display:flex;gap:10px;align-items:flex-start;
    background:var(--amber-dim);border:1px solid rgba(245,181,68,.35);
    border-radius:var(--r-md);padding:12px 14px;margin-bottom:18px;
    font-size:12px;color:var(--muted);line-height:1.6;
  }
  .risk-box b{color:var(--amber)}
  .agent-box{
    background:linear-gradient(135deg,rgba(124,108,246,.08),var(--surface));
    border:1px solid rgba(124,108,246,.3);border-radius:var(--r-md);
    padding:14px 16px;margin-bottom:18px;
  }
  /* Flux de texte naturel : en flex, "Achète-le chez :" se coupait en morceaux
     quand la valeur était longue (retours à la ligne disgracieux) */
  .agent-row{display:block;font-size:12.5px;color:var(--muted);padding:5px 0;line-height:1.6}
  .agent-row b{color:var(--text);font-family:var(--display)}
  .agent-row svg{float:right;margin-top:2px}
  .agent-advice{
    font-size:12.5px;color:var(--text);line-height:1.65;
    border-top:1px solid var(--border);margin-top:9px;padding-top:11px;
  }
  .verdict{
    display:flex;align-items:center;gap:9px;
    font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.3px;
    padding:10px 14px;border-radius:var(--r-sm);margin-bottom:10px;
  }
  .verdict.v-buy{background:var(--green-dim);color:var(--green);border:1px solid rgba(60,232,168,.35)}
  .verdict.v-wait{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,181,68,.35)}
  .verdict.v-avoid{background:var(--red-dim);color:var(--red);border:1px solid rgba(245,106,127,.35)}
  @media(max-width:900px){.top3{grid-template-columns:1fr}}
  .card-body{padding:16px 18px 18px}
  .card-title{font-size:14.5px;font-weight:600;letter-spacing:-.1px;margin-bottom:13px;line-height:1.4}
  .risk-flag{position:absolute;z-index:2;bottom:10px;left:10px;font-size:15px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));cursor:help}
  .p-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
  .p-row{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px}
  .p-row .k{color:var(--muted);display:flex;align-items:center;gap:7px}
  .p-row .k i{width:7px;height:7px;border-radius:2.5px;display:inline-block}
  .p-row .v{font-family:var(--display);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
  .split{
    height:7px;border-radius:6px;overflow:hidden;display:flex;
    background:var(--surface-2);margin-bottom:13px;
  }
  .split .cost{background:linear-gradient(90deg,#5a637a,#7d8598)}
  .split .gain{background:linear-gradient(90deg,#2bbd87,var(--green))}
  .margin-strip{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;border-radius:var(--r-md);
  }
  .margin-strip.hot{background:var(--green-dim);border:1px solid rgba(60,232,168,.25)}
  .margin-strip.mid{background:var(--amber-dim);border:1px solid rgba(245,181,68,.25)}
  .margin-strip.low{background:var(--red-dim);border:1px solid rgba(245,106,127,.25)}
  .margin-strip .lbl{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
  .margin-strip .amt{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.5px;margin-top:2px}
  .margin-strip.hot .amt{color:var(--green)}
  .margin-strip.mid .amt{color:var(--amber)}
  .margin-strip.low .amt{color:var(--red)}
  .roi-pill{font-family:var(--display);font-size:12px;font-weight:700;padding:6px 11px;border-radius:9px}
  .margin-strip.hot .roi-pill{background:rgba(60,232,168,.16);color:var(--green)}
  .margin-strip.mid .roi-pill{background:rgba(245,181,68,.16);color:var(--amber)}
  .margin-strip.low .roi-pill{background:rgba(245,106,127,.16);color:var(--red)}
  .card-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;border-top:1px solid var(--border);
    font-size:11.5px;color:var(--muted);
  }
  .demand{display:flex;align-items:center;gap:8px}
  .bars{display:flex;gap:2.5px;align-items:flex-end;height:13px}
  .bars i{width:3.5px;border-radius:2px;background:var(--bar)}
  .bars i.on{background:var(--accent-2)}
  .sat-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600}
  .sat-tag .sd{width:6px;height:6px;border-radius:50%}
  .sat-1{color:var(--green)} .sat-1 .sd{background:var(--green)}
  .sat-2{color:var(--amber)} .sat-2 .sd{background:var(--amber)}
  .sat-3{color:var(--red)} .sat-3 .sd{background:var(--red)}
  .empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted)}
  .empty .e-ico{
    width:52px;height:52px;border-radius:16px;margin:0 auto 16px;font-size:22px;
    background:var(--surface-2);border:1px solid var(--border);
    display:grid;place-items:center;color:var(--muted);
  }
  .empty h3{font-family:var(--display);font-size:16px;color:var(--text);margin-bottom:6px}
  .empty p{font-size:13px;max-width:380px;margin:0 auto}

  .card.locked .card-media img{filter:blur(14px) saturate(.7);transform:scale(1.1)}
  .card.locked .card-title,
  .card.locked .p-row .v,
  .card.locked .margin-strip .amt,
  .card.locked .roi-pill{filter:blur(6px);user-select:none}
  .card.locked:hover{border-color:rgba(240,192,96,.5);box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(240,192,96,.08)}
  .lock-overlay{
    position:absolute;inset:0;z-index:5;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(180deg,rgba(5,6,10,.25),rgba(5,6,10,.55));
  }
  .lock-overlay .lock-ico{
    width:44px;height:44px;border-radius:14px;font-size:18px;
    background:rgba(5,6,10,.6);backdrop-filter:blur(10px);
    border:1px solid rgba(240,192,96,.4);
    display:grid;place-items:center;color:var(--gold);
    box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  .lock-overlay .lock-txt{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.3px;text-shadow:0 2px 8px rgba(0,0,0,.8)}
  .blur-val{filter:blur(6px);user-select:none;pointer-events:none}

  /* ============ VUES LISTE (Tendances / Alertes / Saturation) ============ */
  .list-panel{display:flex;flex-direction:column;gap:10px}
  .list-row{
    display:flex;align-items:center;gap:16px;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-md);
    padding:12px 18px;cursor:pointer;transition:.2s;
    animation:rise .4s ease both;
  }
  .list-row:hover{border-color:rgba(124,108,246,.4);transform:translateX(3px)}
  .list-rank{
    font-family:var(--display);font-size:15px;font-weight:700;color:var(--muted-2);
    width:28px;text-align:center;flex-shrink:0;
  }
  .list-row.top .list-rank{color:var(--gold)}
  .list-thumb{
    width:46px;height:46px;border-radius:11px;overflow:hidden;flex-shrink:0;
    background:var(--surface-2);border:1px solid var(--border);
  }
  .list-thumb img{width:100%;height:100%;object-fit:cover}
  .list-info{min-width:0;flex:1}
  .list-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .list-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
  .trend-pill{
    font-family:var(--display);font-size:12.5px;font-weight:700;
    padding:6px 12px;border-radius:9px;flex-shrink:0;
    background:var(--green-dim);color:var(--green);border:1px solid rgba(60,232,168,.25);
  }
  .trend-pill.down{background:var(--red-dim);color:var(--red);border-color:rgba(245,106,127,.25)}
  .list-margin{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--green);flex-shrink:0;width:90px;text-align:right}
  .sat-bar{width:130px;flex-shrink:0;display:flex;align-items:center;gap:9px}
  .sat-bar .sb{flex:1;height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}
  .sat-bar .sb i{display:block;height:100%;border-radius:4px}
  .list-row.locked .list-name,
  .list-row.locked .list-margin,
  .list-row.locked .trend-pill,
  .list-row.locked .list-thumb img{filter:blur(6px);user-select:none}
  .list-row.locked:hover{border-color:rgba(240,192,96,.5)}
  .lock-pill{
    font-size:11.5px;font-weight:700;color:var(--gold);flex-shrink:0;
    background:rgba(240,192,96,.1);border:1px solid rgba(240,192,96,.35);
    padding:6px 12px;border-radius:9px;white-space:nowrap;
  }
  .alert-del{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    background:var(--surface);border:1px solid var(--border);
    color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.18s;
  }
  .alert-del:hover{color:var(--red);border-color:rgba(245,106,127,.4)}
  .alert-del svg{width:13px;height:13px}
  /* ===== COMMUNAUTÉ ===== */
  .commu-banner{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;margin-bottom:16px;
    background:linear-gradient(90deg,rgba(124,108,246,.12),var(--surface));
    border:1px solid rgba(124,108,246,.3);border-radius:var(--r-md);
    font-size:12.5px;color:var(--muted);
  }
  .commu-banner b{color:var(--text)}
  .commu-banner a{color:var(--gold);font-weight:700;text-decoration:none;margin-left:auto;white-space:nowrap}
  .composer{
    display:flex;gap:12px;align-items:center;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:13px 15px;margin-bottom:14px;cursor:pointer;transition:.2s;
  }
  .composer:hover{border-color:var(--border-strong)}
  .composer .fake-input{
    flex:1;font-size:13px;color:var(--muted-2);
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:10px 15px;
  }
  .composer .mini-av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#1a1205;background:linear-gradient(135deg,#f5b544,#f56a7f);flex-shrink:0}
  .post{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:16px 18px;margin-bottom:13px;
    animation:rise .4s ease both;transition:.2s;
  }
  .post:hover{border-color:var(--border-strong)}
  .post-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .post-av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
  .post-who{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
  .post-when{font-size:11px;color:var(--muted-2);margin-top:2px}
  .post h4{font-size:14px;font-weight:700;margin-bottom:6px}
  .post p{font-size:12.5px;color:var(--muted);line-height:1.6}
  .post-foot{display:flex;align-items:center;gap:16px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
  .post-act{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.18s;padding:0}
  .post-act:hover{color:var(--text)}
  .post-act.liked{color:var(--red)}
  .pro-wall{
    text-align:center;padding:70px 20px;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid rgba(240,192,96,.25);border-radius:var(--r-lg);
  }
  .pro-wall .e-ico{
    width:56px;height:56px;border-radius:17px;margin:0 auto 18px;font-size:24px;
    background:rgba(240,192,96,.1);border:1px solid rgba(240,192,96,.35);
    display:grid;place-items:center;color:var(--gold);
  }
  .pro-wall h3{font-family:var(--display);font-size:18px;margin-bottom:8px}
  .pro-wall p{font-size:13px;color:var(--muted);max-width:420px;margin:0 auto 20px;line-height:1.6}
  .pro-wall .btn-primary{width:auto;padding:11px 26px}

  /* ============ MODALS ============ */
  .overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(3,4,7,.7);backdrop-filter:blur(10px);
    display:none;place-items:center;padding:24px;
  }
  .overlay.open{display:grid}
  .modal{
    width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
    background:linear-gradient(180deg,var(--modal-1),var(--modal-2));
    border:1px solid var(--border-strong);border-radius:24px;
    padding:0 0 26px;position:relative;
    animation:pop .28s cubic-bezier(.2,.8,.3,1.1);
    box-shadow:0 40px 100px rgba(0,0,0,.7);
  }
  @keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
  .m-close{
    position:absolute;top:16px;right:16px;z-index:3;
    width:34px;height:34px;border-radius:10px;
    background:rgba(5,6,10,.6);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;cursor:pointer;font-size:15px;transition:.2s;
  }
  .m-close:hover{background:rgba(255,255,255,.12)}
  .m-hero{height:220px;position:relative;overflow:hidden;border-radius:24px 24px 0 0}
  .m-hero img{width:100%;height:100%;object-fit:cover}
  .m-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--modal-1))}
  .m-body{padding:20px 26px 0}
  .m-title{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.4px}
  .m-sub{font-size:12.5px;color:var(--muted);margin:5px 0 18px}
  .m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
  .m-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px}
  .m-kpi .k{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .m-kpi .v{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.3px}
  .m-section{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .m-row{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:11px 14px;margin-bottom:8px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
    font-size:13px;
  }
  .m-row .n{display:flex;align-items:center;gap:10px;color:var(--muted);min-width:0}
  .m-row .n .logo-chip{
    width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
    font-size:10px;font-weight:800;color:#fff;flex-shrink:0;
  }
  .m-row .n .logo-chip svg{width:13px;height:13px}
  .m-row b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:13.5px}
  .m-row .right{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .m-row.wa-row{background:rgba(37,211,102,.05);border-color:rgba(37,211,102,.2)}
  /* Nom sur 2 lignes dans les listes revente/fournisseurs : nom en haut, détail en dessous */
  .m-row .n2l{display:flex;flex-direction:column;gap:1px;min-width:0}
  .m-row .n2l > span{white-space:nowrap}
  .m-row .n2l small{opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:400}
  .supplier-link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11.5px;font-weight:700;text-decoration:none;
    padding:6px 12px;border-radius:8px;transition:.18s;white-space:nowrap;
    border:none;cursor:pointer;font-family:inherit;
  }
  .supplier-link svg{width:12px;height:12px}
  .supplier-link.ali{color:#ff8672;background:rgba(255,80,48,.12);border:1px solid rgba(255,80,48,.35)}
  .supplier-link.ali:hover{background:rgba(255,80,48,.22);transform:translateY(-1px)}
  .supplier-link.alb{color:#ffb066;background:rgba(255,138,0,.12);border:1px solid rgba(255,138,0,.35)}
  .supplier-link.alb:hover{background:rgba(255,138,0,.22);transform:translateY(-1px)}
  .supplier-link.wa{color:#4be381;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35)}
  .supplier-link.wa:hover{background:rgba(37,211,102,.22);transform:translateY(-1px)}
  .supplier-link.locked{color:var(--gold);background:rgba(240,192,96,.1);border:1px solid rgba(240,192,96,.35)}
  .supplier-link.locked:hover{background:rgba(240,192,96,.2)}
  .m-actions{display:flex;gap:10px;margin:16px 26px 0}
  .m-actions .btn-primary{flex:1}
  .m-actions .btn-ghost{flex:1}
  .m-actions svg{width:15px;height:15px;flex-shrink:0}
  .m-note{font-size:10.5px;color:var(--muted-2);text-align:center;margin-top:12px;padding:0 26px}
  .m-spacer{height:14px}

  /* Modal pricing */
  .pricing-modal{
    width:100%;max-width:880px;max-height:92vh;overflow-y:auto;
    background:linear-gradient(180deg,var(--modal-1),var(--modal-2));
    border:1px solid var(--border-strong);border-radius:24px;
    padding:36px 32px 30px;position:relative;
    animation:pop .28s cubic-bezier(.2,.8,.3,1.1);
    box-shadow:0 40px 100px rgba(0,0,0,.7);
  }
  .pr-head{text-align:center;margin-bottom:28px}
  .pr-head h2{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.6px}
  .pr-head h2 em{font-style:normal;background:linear-gradient(90deg,var(--accent-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .pr-head p{font-size:13.5px;color:var(--muted);margin-top:8px}
  .pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .pr-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:24px 20px;display:flex;flex-direction:column;position:relative;
    transition:.25s;
  }
  .pr-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
  .pr-card.featured{
    background:linear-gradient(180deg,rgba(124,108,246,.14),rgba(124,108,246,.03));
    border-color:rgba(124,108,246,.45);
    box-shadow:0 0 40px rgba(124,108,246,.12);
  }
  .pr-card.gold{
    background:linear-gradient(180deg,rgba(240,192,96,.1),rgba(240,192,96,.02));
    border-color:rgba(240,192,96,.35);
  }
  .pr-pop{
    position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    background:linear-gradient(135deg,#8f7ff8,#5b46e8);color:#fff;
    padding:5px 14px;border-radius:20px;white-space:nowrap;
    box-shadow:0 4px 14px var(--accent-glow);
  }
  .pr-name{font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:4px}
  .pr-desc{font-size:11.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
  .pr-price{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-1.5px;margin-bottom:2px}
  .pr-price small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
  .pr-per{font-size:11px;color:var(--muted-2);margin-bottom:18px}
  .pr-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}
  .pr-feats li{font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
  .pr-feats li b{color:var(--text);font-weight:600}
  .pr-feats .ok{color:var(--green);flex-shrink:0;font-weight:700}
  .pr-feats .no{color:var(--muted-2);flex-shrink:0}
  .pr-feats li.off{opacity:.45}
  .btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:11px 16px;border:none;border-radius:var(--r-sm);
    background:linear-gradient(135deg,#f0c060,#d99b2b);
    box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 20px rgba(240,192,96,.3);
    color:#1a1205;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;
  }
  .btn-gold:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 28px rgba(240,192,96,.4)}
  .pr-note{text-align:center;font-size:11px;color:var(--muted-2);margin-top:20px}

  /* ===== MODAL AUTH (style Minea) ===== */
  .auth-modal{
    width:100%;max-width:430px;
    background:linear-gradient(180deg,var(--modal-1),var(--modal-2));
    border:1px solid var(--border-strong);border-radius:24px;
    padding:26px 28px 24px;position:relative;
    animation:pop .28s cubic-bezier(.2,.8,.3,1.1);
    box-shadow:0 40px 100px rgba(0,0,0,.7);
  }
  .auth-tabs{
    display:flex;gap:4px;padding:4px;margin-bottom:22px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
  }
  .auth-tabs button{
    flex:1;padding:10px;border:none;border-radius:9px;background:none;
    color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:.18s;
  }
  .auth-tabs button.active{background:linear-gradient(135deg,#8f7ff8,#5b46e8);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}
  .auth-title{font-family:var(--display);font-size:21px;font-weight:700;text-align:center;letter-spacing:-.4px;margin-bottom:20px}
  .btn-google{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:12px;border-radius:var(--r-sm);
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;transition:.2s;
  }
  .btn-google:hover{border-color:var(--border-strong);background:var(--surface-2)}
  .btn-google svg{width:17px;height:17px}
  .auth-sep{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--muted-2);font-size:11px;letter-spacing:.5px}
  .auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--border)}
  .a-field{margin-bottom:12px}
  .a-field input{
    width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
    padding:12px 15px;color:var(--text);font-size:13.5px;font-family:inherit;outline:none;transition:.2s;
  }
  .a-field input::placeholder{color:var(--muted-2)}
  .a-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,246,.15)}
  .auth-forgot{display:block;text-align:right;font-size:12px;color:var(--accent-2);text-decoration:none;font-weight:600;margin:-4px 0 14px}
  .auth-forgot:hover{text-decoration:underline}
  .auth-legal{font-size:10.5px;color:var(--muted-2);text-align:center;margin-top:14px;line-height:1.6}
  .auth-legal a{color:var(--muted)}

  .toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
    z-index:200;opacity:0;pointer-events:none;
    display:flex;align-items:center;gap:10px;
    padding:13px 20px;border-radius:14px;
    background:var(--modal-1);border:1px solid var(--border-strong);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    font-size:13.5px;font-weight:600;
    transition:.35s cubic-bezier(.2,.8,.3,1.1);
  }
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  .toast .t-ico{display:grid;place-items:center;color:var(--green)}
  .toast .t-ico svg{width:16px;height:16px}

  @media(max-width:1180px){.stats{grid-template-columns:repeat(2,1fr)}.m-kpis{grid-template-columns:repeat(2,1fr)}.pr-grid{grid-template-columns:1fr}}
  @media(max-width:900px){
    .sidebar{
      position:fixed;left:0;top:0;bottom:0;height:auto;width:282px;z-index:150;
      background:var(--bg);border-right:1px solid var(--border-strong);
      transform:translateX(-105%);
      transition:transform .3s cubic-bezier(.2,.8,.3,1);
      display:flex;
      overflow-y:auto;
      padding-bottom:max(28px, env(safe-area-inset-bottom, 28px));
    }
    .sidebar > *{flex-shrink:0}
    .sidebar .side-card{margin-top:16px}
    body.nav-open .sidebar{transform:translateX(0);box-shadow:30px 0 80px rgba(0,0,0,.5)}
    .hamburger{display:grid}
    .sidebar-close{display:grid;place-items:center}
    .main{padding:0 16px 40px}
    .searchbox{width:100%;order:5}
    .topbar{flex-wrap:wrap}
    .upgrade-banner{flex-wrap:wrap}
    .sat-bar{display:none}
  }
  /* ============================================================
     POLISH PREMIUM (2026-07) - couche d'affinage par-dessus l'existant.
     Chiffres tabulaires, ombres teintées violet (jamais noir pur),
     états hover/active/focus, micro-animations GPU (transform/opacity).
     ============================================================ */

  html{scroll-behavior:smooth}
  ::selection{background:rgba(124,108,246,.35);color:var(--text)}

  /* Typo : chiffres alignés (interface de données) + titres équilibrés */
  .stat-value,.m-kpi .v,.p-row .v,.m-row .right b,.t3-mult,.result-count b{
    font-variant-numeric:tabular-nums;
  }
  .card-title,.m-title{text-wrap:balance;letter-spacing:-.015em}
  .page-title{letter-spacing:-.02em}

  /* Lumière unique : ombres teintées de l'encre du fond + liseré haut */
  .card,.stat,.t3-card{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px -14px rgba(10,7,30,.6);
  }

  /* Cartes vivantes au survol - GPU uniquement */
  .card{transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .25s}
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--border-strong);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),
      0 22px 44px -18px rgba(124,108,246,.28),
      0 14px 30px -16px rgba(10,7,30,.65);
  }
  .t3-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s}
  .t3-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}

  /* Boutons : survol qui respire, clic physique */
  .btn-primary,.btn-ghost,.btn-gold,.supplier-link{
    transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,border-color .18s;
  }
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px var(--accent-glow)}
  .btn-gold:hover{transform:translateY(-1px)}
  .btn-primary:active,.btn-ghost:active,.btn-gold:active,.supplier-link:active{transform:scale(.97)}

  /* Clavier : anneau de focus visible (accessibilité) - l'outline suit tout
     seul le rayon de l'élément, on ne déforme pas les boutons au focus */
  :is(button,a,input,select,summary):focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;
  }

  /* Entrée en cascade : l'animation "rise" existante + délais échelonnés */
  .grid .card:nth-child(1){animation-delay:.03s}.grid .card:nth-child(2){animation-delay:.08s}
  .grid .card:nth-child(3){animation-delay:.13s}.grid .card:nth-child(4){animation-delay:.18s}
  .grid .card:nth-child(5){animation-delay:.23s}.grid .card:nth-child(6){animation-delay:.28s}
  .grid .card:nth-child(n+7){animation-delay:.32s}

  /* Grain subtil (thème sombre) : casse la platitude numérique */
  body:not(.light)::after{
    content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Scrollbar discrète assortie */
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:rgba(124,108,246,.25);border-radius:8px;border:2px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(124,108,246,.45);border:2px solid transparent;background-clip:content-box}

  /* Respect des préférences de mouvement */
  @media (prefers-reduced-motion: reduce){
    .grid .card{animation:none}
    .card,.t3-card,.btn-primary,.btn-ghost,.btn-gold,.supplier-link{transition:none}
    html{scroll-behavior:auto}
  }

  /* ============================================================
     PREMIUM V2 (2026-07-22) - dashboard. Topbar en verre (sombre),
     liserés dégradés sur stats et modal, balayage lumineux du CTA.
     Le mode clair garde ses fonds : tweaks sombres sous body:not(.light).
     ============================================================ */

  /* Topbar : verre saturé au scroll (thème sombre uniquement) */
  body:not(.light) .topbar{
    background:linear-gradient(180deg,rgba(5,6,10,.82) 55%,transparent);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
  }

  /* Stats : liseré lumineux en tête de carte */
  .stat::after{
    content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,108,246,.55),transparent);
    pointer-events:none;
  }
  body.light .stat::after{background:linear-gradient(90deg,transparent,rgba(124,108,246,.3),transparent)}

  /* Fiche produit : anneau dégradé (sombre uniquement, le clair garde son fond) */
  body:not(.light) .modal{
    border:1px solid transparent;
    background:
      linear-gradient(180deg,var(--modal-1),var(--modal-2)) padding-box,
      linear-gradient(165deg,rgba(124,108,246,.6),rgba(255,255,255,.08) 45%,rgba(240,192,96,.25)) border-box;
  }

  /* CTA : balayage lumineux au survol */
  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%);
    transform:translateX(-130%);transition:transform .55s ease;
  }
  .btn-primary:hover::after{transform:translateX(130%)}

  /* Sidebar : liseré dégradé sur l'onglet actif */
  .nav-item.active{position:relative}
  .nav-item.active::before{
    content:"";position:absolute;left:-1px;top:18%;bottom:18%;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    box-shadow:0 0 10px var(--accent-glow);
  }

  @media (prefers-reduced-motion: reduce){
    .btn-primary::after{display:none}
  }

  /* ============================================================
     FINITIONS AUDIT (2026-07-22) - application d'AUDIT-DESIGN.md :
     skeleton de chargement, mode clair réparé, modal scrollable
     (croix + CTA accessibles), ombres teintées, motion complétée.
     ============================================================ */

  /* 1. Skeleton pendant la synchro Supabase : 2 cartes fantômes balayées,
     calées sur la forme réelle (média 172px + corps). Elles n'apparaissent
     que sur l'état "Catalogue en construction" (.empty.loading, posé avant
     la 1re synchro) et disparaissent dès que liveSync remplit la grille. */
  #top3:empty{display:none}
  .grid:has(.empty.loading)::before,.grid:has(.empty.loading)::after{
    content:"";order:-1;height:348px;border-radius:var(--r-lg);
    border:1px solid var(--border);
    background:
      linear-gradient(100deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%) 0 0/200% 100% no-repeat,
      linear-gradient(var(--surface-2) 172px,transparent 172px) 0 0/100% 172px no-repeat,
      linear-gradient(var(--surface-2),var(--surface));
    animation:skSweep 1.3s linear infinite;
  }
  body.light .grid:has(.empty.loading)::before,body.light .grid:has(.empty.loading)::after{
    background:
      linear-gradient(100deg,transparent 40%,rgba(13,18,30,.05) 50%,transparent 60%) 0 0/200% 100% no-repeat,
      linear-gradient(var(--surface-2) 172px,transparent 172px) 0 0/100% 172px no-repeat,
      linear-gradient(var(--surface-2),var(--surface));
  }
  @keyframes skSweep{to{background-position:200% 0,0 0,0 0}}

  /* 2. Mode clair : onglet actif lisible (le blanc codé en dur était illisible) */
  body.light .nav-item.active{color:var(--accent-2);box-shadow:none}

  /* 4. Mode clair : le survol des cartes projette une vraie ombre teintée */
  body.light .card:hover{
    border-color:rgba(106,88,232,.45);
    box-shadow:0 18px 40px -16px rgba(106,88,232,.25),0 8px 20px -12px rgba(13,18,30,.14);
  }

  /* 5. Fiches qui scrollent : la croix reste visible (sticky au lieu d'absolute) */
  .modal .m-close,.pricing-modal .m-close{
    position:sticky;top:14px;right:auto;float:none;display:block;
    margin:14px 14px -48px auto;z-index:6;
  }

  /* 6. Les CTA de la fiche restent accessibles pendant la lecture */
  .modal .m-actions{
    position:sticky;bottom:-26px;margin:16px 0 0;padding:14px 26px 22px;
    background:linear-gradient(180deg,transparent,var(--modal-2) 45%);
  }

  /* 7. Le voile des modals a lui aussi une entrée (plus d'apparition sèche) */
  .overlay.open{animation:ovIn .25s ease}
  @keyframes ovIn{from{opacity:0}}

  /* 8. Mode clair : le topbar a son verre aussi (fini le ghosting au scroll) */
  body.light .topbar{
    background:linear-gradient(180deg,rgba(244,245,250,.85) 60%,transparent);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }

  /* 9. Ombres des modals et toasts : teintées, jamais de noir pur */
  body:not(.light) :is(.modal,.pricing-modal,.auth-modal){box-shadow:0 40px 100px rgba(10,7,30,.75)}
  body:not(.light) .toast{box-shadow:0 20px 60px rgba(10,7,30,.65)}
  body.light :is(.modal,.pricing-modal,.auth-modal){box-shadow:0 30px 80px rgba(13,18,30,.25)}
  body.light .toast{box-shadow:0 12px 40px rgba(13,18,30,.18)}

  /* 10. Compteurs Concurrence : empilés sur mobile (!important : contre un style
     inline généré par le JS, pas éditable en CSS autrement) */
  @media (max-width:640px){#satContent .stats{grid-template-columns:1fr !important}}

  /* 11. Cartes verrouillées : ombre hover teintée OR (narratif premium) */
  body:not(.light) .card.locked:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),
      0 22px 44px -18px rgba(240,192,96,.25),
      0 14px 30px -16px rgba(10,7,30,.6);
  }

  /* 13. Recherche : le conteneur porte déjà l'anneau de focus, pas de double anneau */
  .searchbox input:focus-visible,.a-field input:focus-visible{outline:none}

  /* Skip-link clavier : invisible jusqu'au focus (accessibilité) */
  .skip-link{
    position:fixed;top:-48px;left:16px;z-index:2147483001;
    padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;
    background:var(--accent);color:#fff;text-decoration:none;transition:top .2s;
  }
  .skip-link:focus{top:12px}

  /* Avatar : icône de compte (déconnecté) / initiales (connecté) */
  .avatar svg{width:17px;height:17px}

  /* ============================================================
     MENU DE COMPTE + ABONNEMENT + FORUM (2026-07-23)
     ============================================================ */

  /* Menu déroulant sous l'avatar */
  .acct-menu{
    position:absolute;top:calc(100% + 10px);right:0;z-index:300;width:230px;
    display:none;flex-direction:column;padding:8px;
    background:var(--modal-1);border:1px solid var(--border-strong);border-radius:16px;
    box-shadow:0 24px 60px rgba(10,7,30,.6);
  }
  body.light .acct-menu{background:#fff;box-shadow:0 18px 50px rgba(13,18,30,.25)}
  .acct-menu.open{display:flex}
  .acct-menu .am-head{
    display:flex;flex-direction:column;gap:2px;
    padding:10px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--border);
  }
  .acct-menu .am-head b{font-size:13.5px}
  .acct-menu .am-head small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .am-plan{
    margin-top:6px;align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.6px;
    padding:3px 9px;border-radius:999px;
    background:rgba(124,108,246,.14);border:1px solid rgba(124,108,246,.4);color:var(--accent-2);
  }
  .acct-menu > button{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border:none;border-radius:10px;background:none;
    color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
    text-align:left;transition:background .15s;
  }
  .acct-menu > button:hover{background:var(--surface-2)}
  .acct-menu > button svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
  .acct-menu .am-out{color:var(--red)}
  .acct-menu .am-out svg{color:var(--red)}

  /* Modal abonnement */
  .sub-plan{
    padding:16px;border-radius:14px;margin-bottom:14px;
    background:var(--surface-2);border:1px solid var(--border);
  }
  .sub-plan.sub-pro{border-color:rgba(124,108,246,.45);background:rgba(124,108,246,.08)}
  .sp-name{font-family:var(--display);font-size:16px;margin-bottom:4px}
  .sp-desc{font-size:12.5px;color:var(--muted);margin-top:2px}

  /* Badges de rôle du forum */
  .rb{font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}
  .rb-admin{background:linear-gradient(135deg,rgba(240,192,96,.2),rgba(245,106,127,.15));border:1px solid rgba(240,192,96,.5);color:var(--gold)}
  .rb-modo{background:rgba(60,232,168,.13);border:1px solid rgba(60,232,168,.45);color:var(--green)}
  .rb-academy{background:rgba(240,192,96,.12);border:1px solid rgba(240,192,96,.4);color:var(--gold)}
  .rb-pro{background:rgba(124,108,246,.14);border:1px solid rgba(124,108,246,.4);color:var(--accent-2)}
  .rb-member{background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}

  /* Bouton "Écrire un sujet" (déroule le composer) */
  .forum-open-btn{
    display:flex;align-items:center;gap:9px;width:100%;
    padding:14px 18px;margin-bottom:14px;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    color:var(--text);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
    transition:.18s;
  }
  .forum-open-btn:hover{border-color:var(--accent);color:var(--accent-2)}
  .forum-open-btn svg{width:18px;height:18px;color:var(--accent-2)}

  /* Composer du forum : replié par défaut, se déroule au clic */
  .forum-new{
    display:none;
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:16px;margin-bottom:16px;
  }
  .forum-new.open{display:block;animation:fnIn .2s ease}
  @keyframes fnIn{from{opacity:0;transform:translateY(-6px)}}
  .forum-new input[type=text],.forum-new textarea,.forum-new select{
    width:100%;padding:11px 14px;margin-bottom:10px;border-radius:12px;
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    font-family:inherit;font-size:13.5px;outline:none;transition:.2s;
  }
  .forum-new textarea{min-height:80px;resize:vertical}
  .forum-new :is(input,textarea,select):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,246,.15)}
  .forum-new select{color-scheme:dark;width:auto}
  body.light .forum-new select{color-scheme:light}
  /* Options des listes déroulantes lisibles (Windows : sinon blanc sur blanc) */
  .forum-new select option{background:var(--bg);color:var(--text)}
  .forum-new-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .forum-new-foot .btn-primary,.forum-new-foot .btn-ghost{padding:9px 18px;font-size:13px}
  .forum-new-foot .btn-primary{margin-left:auto}
  .forum-admin-opt{font-size:12px;color:var(--gold);display:flex;align-items:center;gap:6px}

  /* Fil de réponses */
  .thread{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
  .reply{display:flex;gap:10px;padding:8px 0}
  .reply .post-av{width:28px;height:28px;font-size:10px;flex-shrink:0}
  .reply-body{flex:1;min-width:0}
  .reply-who{font-size:12px;font-weight:700}
  .reply-txt{font-size:13px;color:var(--muted);line-height:1.6;margin-top:2px;overflow-wrap:break-word}
  .reply-box{display:flex;gap:8px;margin-top:10px;align-items:center}
  .reply-box input{
    flex:1 1 auto;min-width:0;width:auto;padding:11px 16px;border-radius:999px;
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    font-family:inherit;font-size:13px;outline:none;transition:.2s;
  }
  .reply-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,246,.15)}
  .reply-box .btn-primary{flex:0 0 auto;width:auto;padding:11px 20px;font-size:13px;white-space:nowrap}

  /* Barre de modération produit (admin) dans le modal */
  .m-admin{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    margin:16px 26px 0;padding:12px 14px;border-radius:14px;
    background:rgba(240,192,96,.06);border:1px solid rgba(240,192,96,.28);
  }
  .m-admin-t{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--gold);margin-right:4px}

  /* Outils de modération (admin) */
  .mod-tools{display:flex;gap:6px;margin-left:auto}
  .mod-btn{
    font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px;cursor:pointer;
    background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
    font-family:inherit;transition:.15s;
  }
  .mod-btn:hover{color:var(--text);border-color:var(--border-strong)}
  .mod-btn.danger{color:var(--red);border-color:rgba(245,106,127,.3)}
  .mod-btn.danger:hover{background:rgba(245,106,127,.1)}

  /* ============================================================
     COUCHE UI-UX-PRO-MAX (2026-07-22) - règles tactiles/curseur
     de la checklist du skill (touch, cursor, réactivité mobile).
     ============================================================ */
  /* Tout ce qui s'ouvre au clic a un curseur de main */
  .card:not(.locked),.t3-card,.list-row,.fav-row{cursor:pointer}
  /* Supprime le délai de 300 ms au tap + évite le double-zoom mobile */
  button,a,.card,.t3-card,.list-row,.nav-item,.cat-pill,.seg button{touch-action:manipulation}
  /* Retour visuel au tap sur les cartes cliquables (mobile n'a pas de hover) */
  .card:not(.locked):active,.t3-card:active,.list-row:active{transform:scale(.99)}

  /* ============================================================
     SIGNATURE TROV (2026-07-22 soir) - dashboard "poste de pilotage
     de l'agent". Sidebar en panneau flottant (desktop), boutons et
     contrôles en pilule, zoom doux des photos produits. GPU only.
     ============================================================ */

  /* --- Sidebar : panneau flottant détaché du bord (façon Linear/Arc) --- */
  @media (min-width:901px){
    .sidebar{
      height:calc(100vh - 24px);height:calc(100dvh - 24px);
      top:12px;margin:12px 10px 12px 12px;
      border:1px solid var(--border);border-radius:22px;
      background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 40%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -34px rgba(10,7,30,.9);
    }
    body.light .sidebar{
      background:#fff;
      box-shadow:0 12px 40px -24px rgba(13,18,30,.22);
    }
  }

  /* --- Système de formes : boutons et contrôles = pilule
     (cartes 16-24px, champs 8-12px : la règle est unique) --- */
  .btn-primary,.btn-gold{border-radius:999px}
  .btn-ghost{border-radius:999px}
  .seg,.plan-switch,.searchbox{border-radius:999px}
  .seg button,.plan-switch button{border-radius:999px}

  /* --- Photos produits : zoom doux au survol (la carte vit) --- */
  .card-media{overflow:hidden}
  .card-media img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .card:not(.locked):hover .card-media img{transform:scale(1.05)}

  /* --- Onglet actif de la sidebar : la pilule signature --- */
  .nav-item{border-radius:12px}

  @media (prefers-reduced-motion: reduce){
    .card-media img{transition:none}
  }

  /* 12. Motion réduite : couverture complète (listes, posts, modals, live-dot) */
  @media (prefers-reduced-motion: reduce){
    .list-row,.post,.t3-card,.modal,.pricing-modal,.auth-modal{animation:none}
    .live-dot{animation:none;box-shadow:none}
    .overlay.open{animation:none}
    .grid:has(.empty.loading)::before,.grid:has(.empty.loading)::after{animation:none}
  }

  /* ============================================================
     V3 LOOK (2026-07-22 nuit) - le relooking VISIBLE du dashboard.
     Fond aurora profond, stats en tuiles identitaires à gros
     chiffres, photos produits en passe-partout, onglet actif plein.
     Tout est statique ou GPU : zéro animation en boucle.
     ============================================================ */

  /* --- Fond : nappe aurora violet/or + vignette (fini le noir plat) --- */
  body:not(.light){
    background:
      radial-gradient(1100px 640px at -8% -12%, rgba(124,108,246,.16), transparent 60%),
      radial-gradient(900px 560px at 108% 8%, rgba(240,192,96,.07), transparent 55%),
      radial-gradient(1200px 900px at 50% 118%, rgba(91,70,232,.10), transparent 60%),
      var(--bg);
  }

  /* --- Stats : gros chiffres + identité couleur par tuile --- */
  .stat{padding:22px 20px 16px;border-radius:20px}
  .stat-value{font-size:38px;letter-spacing:-1.6px}
  .stat-value small{font-size:17px}
  .stat-label{font-size:10px;letter-spacing:1.4px}
  .stats .stat:nth-child(1) .stat-ico{background:rgba(124,108,246,.14);border-color:rgba(124,108,246,.4);color:var(--accent-2)}
  .stats .stat:nth-child(2) .stat-ico{background:rgba(90,167,255,.12);border-color:rgba(90,167,255,.38);color:#5aa7ff}
  .stats .stat:nth-child(3) .stat-ico{background:rgba(60,232,168,.1);border-color:rgba(60,232,168,.35);color:var(--green)}
  .stats .stat:nth-child(4) .stat-ico{background:rgba(240,192,96,.12);border-color:rgba(240,192,96,.4);color:var(--gold)}
  .stats .stat:nth-child(1)::after{background:linear-gradient(90deg,transparent,rgba(124,108,246,.65),transparent)}
  .stats .stat:nth-child(2)::after{background:linear-gradient(90deg,transparent,rgba(90,167,255,.55),transparent)}
  .stats .stat:nth-child(3)::after{background:linear-gradient(90deg,transparent,rgba(60,232,168,.5),transparent)}
  .stats .stat:nth-child(4)::after{background:linear-gradient(90deg,transparent,rgba(240,192,96,.55),transparent)}
  /* La 1re stat (marge moyenne = LE chiffre du produit) porte le dégradé de marque */
  .stats .stat:nth-child(1) .stat-value{
    background:linear-gradient(92deg,#eef1f8,var(--accent-2) 85%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.light .stats .stat:nth-child(1) .stat-value{
    background:linear-gradient(92deg,#0d121e,#6a58e8 85%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* --- Cartes produits : photo en passe-partout (cadre interne), rayon 24 --- */
  .card{border-radius:24px}
  .card-media{
    height:180px;margin:10px 10px 0;border-radius:16px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }
  body.light .card-media{box-shadow:inset 0 0 0 1px rgba(13,18,30,.06)}

  /* --- Sidebar : l'onglet actif devient une vraie pilule pleine --- */
  .nav-item.active,body.light .nav-item.active{
    background:linear-gradient(135deg,#8f7ff8,#5b46e8);
    color:#fff;border-color:transparent;
    box-shadow:0 8px 22px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.22);
  }
  .nav-item.active::before{display:none} /* le liseré latéral ne sert plus */
  .nav-item.active .nav-count{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}

  /* --- Topbar : le titre respire --- */
  .page-title{font-size:26px;letter-spacing:-.03em}

  /* --- Bandeau upgrade : anneau dégradé violet -> or --- */
  .upgrade-banner{
    border:1px solid transparent;border-radius:18px;
    background:
      linear-gradient(90deg,rgba(30,26,58,.92),rgba(26,21,12,.9)) padding-box,
      linear-gradient(100deg,rgba(124,108,246,.65),rgba(240,192,96,.55)) border-box;
  }
  body.light .upgrade-banner{
    background:
      linear-gradient(90deg,rgba(244,242,255,.95),rgba(252,247,236,.95)) padding-box,
      linear-gradient(100deg,rgba(106,88,232,.5),rgba(200,150,50,.5)) border-box;
  }

  /* --- Titre de section : le mot en <em> porte le dégradé de marque --- */
  h2 em{
    background:linear-gradient(92deg,var(--accent-2),#f0c060 130%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.light h2 em{
    background:linear-gradient(92deg,#6a58e8,#b07d1e 130%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ============================================================
     V3 LOOK - MODE CLAIR (2026-07-22 nuit, retour utilisateur :
     « la version blanche est moins efficace »). Cause : cartes
     blanches sur fond blanc + ombres à .06 + aurora réservée au
     sombre. Principe du clair premium (Linear/Stripe) : le fond
     n'est PAS blanc, les cartes le sont, et elles FLOTTENT.
     ============================================================ */

  /* 1. Le fond descend d'un cran et prend la teinte de marque :
        les cartes blanches ressortent enfin. */
  body.light{
    --bg:#eef0f7;
    --surface-2:#f7f8fc;
  }
  body.light{
    background:
      radial-gradient(1100px 640px at -8% -12%, rgba(124,108,246,.16), transparent 60%),
      radial-gradient(900px 560px at 108% 6%, rgba(217,155,43,.10), transparent 55%),
      radial-gradient(1200px 900px at 50% 118%, rgba(106,88,232,.09), transparent 60%),
      var(--bg);
  }

  /* 2. Les cartes flottent : blanc franc + ombre teintée à 2 étages
        (le 0 1px 3px .06 d'origine était invisible). */
  body.light :is(.card,.stat,.list-row,.post,.panel){
    background:#fff;
    box-shadow:0 1px 2px rgba(13,18,30,.05),0 10px 28px -14px rgba(13,18,30,.16);
  }
  body.light .card-media{background:#eef0f7}

  /* 3. Icônes des stats : teintes assez soutenues pour se voir sur blanc,
        et on retire le brightness(.68) qui grisait tout. */
  body.light .stat-ico svg{filter:none}
  body.light .stats .stat:nth-child(1) .stat-ico{background:rgba(106,88,232,.13);border-color:rgba(106,88,232,.34);color:#5b46e8}
  body.light .stats .stat:nth-child(2) .stat-ico{background:rgba(21,101,192,.11);border-color:rgba(21,101,192,.3);color:#1565c0}
  body.light .stats .stat:nth-child(3) .stat-ico{background:rgba(10,169,113,.12);border-color:rgba(10,169,113,.32);color:#0a7a54}
  body.light .stats .stat:nth-child(4) .stat-ico{background:rgba(168,116,26,.14);border-color:rgba(168,116,26,.36);color:#a8741a}

  /* 4. Les liserés de tuile restent lisibles sur blanc */
  body.light .stats .stat:nth-child(1)::after{background:linear-gradient(90deg,transparent,rgba(106,88,232,.55),transparent)}
  body.light .stats .stat:nth-child(2)::after{background:linear-gradient(90deg,transparent,rgba(21,101,192,.45),transparent)}
  body.light .stats .stat:nth-child(3)::after{background:linear-gradient(90deg,transparent,rgba(10,169,113,.45),transparent)}
  body.light .stats .stat:nth-child(4)::after{background:linear-gradient(90deg,transparent,rgba(168,116,26,.5),transparent)}

  /* 5. Barre d'outils et champs : blancs sur fond teinté, avec un vrai bord */
  body.light :is(.seg,.plan-switch,.searchbox,.select-wrap select,.topbar-btn){
    background:#fff;border-color:rgba(13,18,30,.12);
    box-shadow:0 1px 2px rgba(13,18,30,.04);
  }

  /* 6. Sidebar : panneau blanc franc, détaché du fond teinté */
  @media (min-width:901px){
    body.light .sidebar{
      background:#fff;
      border-color:rgba(13,18,30,.08);
      box-shadow:0 1px 2px rgba(13,18,30,.04),0 18px 44px -26px rgba(13,18,30,.25);
    }
  }

  /* 7. Le survol des cartes se voit vraiment (l'ombre monte d'un étage) */
  body.light .card:hover{
    border-color:rgba(106,88,232,.4);
    box-shadow:0 2px 4px rgba(13,18,30,.06),0 22px 44px -18px rgba(106,88,232,.3);
  }