:root{
  --ch-bg: rgba(8,15,26,0.65);
  --ch-border: rgba(0,255,221,0.25);
  --ch-glow: rgba(0,255,221,0.20);
  --ch-text: #e9f7ff;
  --ch-muted: #98b0bd;
  --ch-accent: #00ffe0;      /* accent par défaut (ACHATS) */
  --ch-green: #3ee57a;
  --ch-yellow: #ffd84d;
  --ch-blue: #5cc8ff;

  /* Accents VENTES */
  --ch-accent-sell: #ff7a7a;
  --ch-border-sell: rgba(255,122,122,.35);
  --ch-glow-sell: rgba(255,122,122,.22);
  --ch-orange: #ffb347;
  --ch-red: #ff5c5c;
}

/* ===== Socle commun ===== */
.ch-tip{
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 16px auto;
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--ch-bg);
  color: var(--ch-text);
  border: 1px solid var(--ch-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 8px 40px var(--ch-glow);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.ch-tip::before{
  content:"";
  position:absolute; inset:-1px;
  background: conic-gradient(from 90deg, transparent 0 35%, rgba(0,255,221,.25) 45%, transparent 60% 100%);
  filter: blur(22px);
  opacity:.35; animation: chSweep 6s linear infinite; pointer-events:none;
}
@keyframes chSweep{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
.ch-tip__header{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.3rem; }
.ch-tip__eyebrow{
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ch-accent);
  background: rgba(0,255,221,.08);
  border:1px solid rgba(0,255,221,.25);
  padding:.25rem .5rem; border-radius:999px;
}
.ch-tip__title{ font-size: clamp(1rem, 1.2rem + .3vw, 1.35rem); margin:0; font-weight:700; }
.ch-tip__badge{
  position:absolute; top:10px; right:12px;
  background: linear-gradient(90deg,#ffd84d,#ffb347);
  color:#111; font-size:.7rem; font-weight:700;
  padding:.25rem .5rem; border-radius:999px;
  box-shadow:0 0 10px rgba(255,216,77,.4);
}
.pill{ display:inline-block; margin-left:.35rem; padding:.15rem .5rem;
  font-size:.78rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:#d7f5ff; background: rgba(255,255,255,.06);
}
.pill--green{ color:#052; background: rgba(62,229,122,.18); border-color: rgba(62,229,122,.35); }
.pill--yellow{ color:#4a3900; background: rgba(255,216,77,.2); border-color: rgba(255,216,77,.35); }
.pill--blue{ color:#06324a; background: rgba(92,200,255,.2); border-color: rgba(92,200,255,.35); }
.pill--warn{
  color:#3a2a00; background: linear-gradient(180deg, rgba(255,216,77,.28), rgba(255,216,77,.18));
  border-color: rgba(255,216,77,.55); font-weight:700; box-shadow: 0 0 8px rgba(255,216,77,.35);
}
.ch-tip__content{ margin-top:.3rem; }
.ch-tip__list{ list-style:none; padding:0; margin:.3rem 0 .7rem 0; display:grid; gap:.5rem; }
.ch-tip__list li{ display:flex; gap:.55rem; align-items:flex-start; line-height:1.35; font-size: clamp(.9rem, .95rem + .1vw, 1rem); }
.ch-tip__list b{ color:#fff; }
.ch-tip__pro{ margin-top:.6rem; padding:.75rem .8rem; border-radius:14px;
  background: linear-gradient(180deg, rgba(0,255,221,.08), rgba(0,0,0,.15));
  border:1px dashed rgba(0,255,221,.35);
}
.ch-tip__pro-head{ font-weight:700; margin-bottom:.25rem; color: var(--ch-accent); }
.ch-tip__hint{ margin:0; color: var(--ch-text); font-size:.95rem; }
.ch-tip__locked{
  margin-top:.6rem; padding:.85rem; border-radius:14px; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.15));
  border:1px dashed rgba(255,255,255,.22); color: var(--ch-muted);
}
.ch-tip__locked .lock{ font-size:1.1rem; }
.btn-upgrade{
  margin-left:auto; text-decoration:none; font-weight:700; color:#091215;
  background: linear-gradient(90deg, #00ffe0, #7cffd5, #ffd84d);
  padding:.5rem .8rem; border-radius:999px; border:0; box-shadow: 0 6px 24px rgba(0,255,221,.25);
}
.btn-upgrade:hover{ filter: brightness(1.05); }
.ch-tip__foot{ margin-top:.6rem; font-size:.78rem; color: var(--ch-muted); border-top:1px solid rgba(255,255,255,.06); padding-top:.5rem; }
@media (max-width: 768px){ .ch-tip{ padding:14px 12px; border-radius:16px; } .btn-upgrade{ width:100%; text-align:center; margin-left:0; } }
@media (prefers-color-scheme: light){
  :root{ --ch-text:#0b1b24; --ch-muted:#3b5b69; --ch-bg: rgba(255,255,255,.55); --ch-border: rgba(0,0,0,.12); --ch-glow: rgba(0,170,150,.15); }
  .ch-tip{ background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75)), var(--ch-bg); }
  .ch-tip__list b{ color:#0b1b24; }
}

/* ===== Modificateurs de thème ===== */
.ch-tip--sell{
  border-color: var(--ch-border-sell);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 8px 40px var(--ch-glow-sell);
}
.ch-tip--sell::before{
  background: conic-gradient(from 120deg, transparent 0 35%, rgba(255,92,92,.28) 48%, transparent 65% 100%);
}
.ch-tip--sell .ch-tip__eyebrow{
  color: var(--ch-accent-sell);
  background: rgba(255,92,92,.08);
  border-color: rgba(255,92,92,.35);
}
.ch-tip--sell .ch-tip__pro{
  background: linear-gradient(180deg, rgba(255,92,92,.08), rgba(0,0,0,.15));
  border-color: rgba(255,92,92,.35);
}
.ch-tip--sell .ch-tip__pro-head{ color: var(--ch-accent-sell); }

/* Badge "VENTES" orangé/rouge */
.ch-tip--sell .ch-tip__badge{
  background: linear-gradient(90deg, var(--ch-orange), var(--ch-red));
  box-shadow: 0 0 12px rgba(255,120,120,.45);
}

/* Pastilles VENTES à fort contraste */
.ch-tip--sell .pill--sell       { background:#ffe6ea; color:#7a0b0b; border-color:#ff9aa0; font-weight:700; }
.ch-tip--sell .pill--orange     { background:#fff1e0; color:#6a3b00; border-color:#ffc78a; font-weight:700; }
.ch-tip--sell .pill--sell-strong{ background:#fff7b3; color:#4d3f00; border-color:#ffd84d; font-weight:700; }