/* =========================================================
   RageBait Feed – Social / Viral (TOP)
   - moins "clone Reddit"
   - réactions bien visibles (+ glow si tendance)
   Classes: rbx-*
   ========================================================= */

.rbx-page{
  max-width: 980px;
  margin: 26px auto 70px;
  padding: 0 18px;
  box-sizing: border-box;
}

/* ---------------- HERO ---------------- */
.rbx-hero{
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-radius:22px;
  box-shadow:0 18px 55px rgba(0,0,0,.10);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.rbx-hero::before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width:340px;
  height:340px;
  background: radial-gradient(circle, rgba(214,40,40,0.16), rgba(214,40,40,0) 70%);
  pointer-events:none;
  opacity:.9;
}
.rbx-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap:16px;
  align-items:stretch;
}
@media(max-width: 900px){
  .rbx-hero__inner{ grid-template-columns:1fr; }
}

.rbx-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rbx-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  background: rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
}
.rbx-chip--hot{
  background: rgba(214,40,40,.10);
  border-color: rgba(214,40,40,.18);
}

.rbx-title{
  margin:12px 0 0;
  font-weight:950;
  letter-spacing:-.6px;
  line-height:1.05;
  font-size: clamp(1.7rem, 3.1vw, 2.25rem);
}
.rbx-lead{
  margin:10px 0 0;
  color:#333;
  line-height:1.6;
  font-size:1.03rem;
  max-width: 720px;
}

.rbx-active{
  margin-top:12px;
  font-weight:900;
  color:#333;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.rbx-clear{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none !important;
  background: rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
}

.rbx-sideCard{
  background: rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.rbx-sideCard__t{ font-weight:950; letter-spacing:-.3px; }
.rbx-sideCard__p{ margin-top:8px; color:#444; line-height:1.6; }
.rbx-sideCard__row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.rbx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none !important;
  font-weight:950;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.rbx-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(214,40,40,.20);
  background: rgba(214,40,40,.05);
  box-shadow:0 12px 26px rgba(0,0,0,.06);
}
.rbx-btn--primary{
  background: rgba(214,40,40,.12);
  border-color: rgba(214,40,40,.28);
  color:#b31212;
}

/* ---------------- FILTER BAR ---------------- */
.rbx-filter{ margin-top:14px; }
.rbx-filter__inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding: 12px 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.rbx-filter__label{
  font-weight:950;
  color:#111;
  letter-spacing:-.2px;
}
.rbx-filter__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.rbx-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:.82rem;
  text-decoration:none !important;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.rbx-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(214,40,40,.20);
  background: rgba(214,40,40,.08);
}
.rbx-pill.is-active{
  background: rgba(214,40,40,.14);
  border-color: rgba(214,40,40,.28);
}

/* ---------------- FEED HEAD ---------------- */
.rbx-feed{ margin-top:18px; }
.rbx-feed__head{
  margin: 0 0 12px;
  padding-bottom: 14px;
  position:relative;
}
.rbx-feed__head::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:1px;
  background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.06), rgba(0,0,0,0));
}
.rbx-h2{ margin:0; font-weight:950; letter-spacing:-.4px; }
.rbx-sub{ margin:10px 0 0; color:#444; line-height:1.6; }

/* ---------------- STREAM ---------------- */
.rbx-stream{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Card */
.rbx-post{
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-radius:18px;
  box-shadow:0 12px 34px rgba(0,0,0,.08);
  padding:14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rbx-post:hover{
  transform: translateY(-2px);
  border-color: rgba(214,40,40,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}

/* ✅ cache le look "reddit votes" */
.rbx-post__left{ display:none; }
.rbx-post__main{ width:100%; }

/* Meta row */
.rbx-post__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:#555;
  font-weight:850;
  font-size:.92rem;
}

.rbx-user{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  color:#111;
}
.rbx-user::before{
  content:"";
  width:26px;
  height:26px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(214,40,40,.18), rgba(0,0,0,.06));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  display:inline-block;
}
.rbx-dot{ opacity:.6; }

.rbx-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:.78rem;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
}

/* ---------- Réactions (super visible + viral) ---------- */
.rbx-react{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:.82rem;

  background: rgba(214,40,40,.10);
  border:1px solid rgba(214,40,40,.28);
  color:#b31212;
  box-shadow:0 10px 22px rgba(0,0,0,.05);

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
@media(max-width: 720px){
  .rbx-react{ margin-left:0; }
}
.rbx-react__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  border-radius:999px;

  background: rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.07);
  color:#111;
}

/* Glow only if trending */
.rbx-react--hot{
  background: rgba(214,40,40,.14);
  border-color: rgba(214,40,40,.34);
  box-shadow: 0 14px 30px rgba(214,40,40,.14);
}
.rbx-post:hover .rbx-react{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(214,40,40,.12);
}

/* Title */
.rbx-post__title{
  margin:10px 0 0;
  font-weight:950;
  letter-spacing:-.3px;
  line-height:1.15;
  font-size:1.12rem;
}
.rbx-post__title a{
  color:#111;
  text-decoration:none !important;
}
.rbx-post__title a:hover{
  text-decoration:underline !important;
}

/* Media */
.rbx-media{
  display:block;
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#111;
}
.rbx-media img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}
@media(max-width: 720px){
  .rbx-media img{ height:210px; }
} 

/* Text */
.rbx-post__text{
  margin:10px 0 0;
  color:#333;
  line-height:1.7;
  font-size:1rem;
}

/* Actions */
.rbx-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.rbx-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color:#111;
  font-weight:950;
  font-size:.84rem;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rbx-action:hover{
  transform: translateY(-1px);
  border-color: rgba(214,40,40,.22);
  background: rgba(214,40,40,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

/* Tags */
.rbx-tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.rbx-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:950;
  font-size:.82rem;
  background: rgba(214,40,40,.10);
  border:1px solid rgba(214,40,40,.28);
  color:#b31212;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.rbx-tag:hover{
  transform: translateY(-1px);
  background: rgba(214,40,40,.16);
  border-color: rgba(214,40,40,.42);
}

/* Pagination */
.rbx-pagination{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.rbx-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  height: 42px;
  padding: 0 12px;
  margin: 0 4px;
  border-radius: 12px;

  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  font-weight:950;
  text-decoration:none !important;
  color:#111;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.rbx-pagination .page-numbers:hover{
  transform: translateY(-1px);
  border-color: rgba(214,40,40,.22);
  background: rgba(214,40,40,.06);
}
.rbx-pagination .page-numbers.current{
  background: rgba(214,40,40,.16);
  border-color: rgba(214,40,40,.28);
}
.rbx-pagination .page-numbers.dots{
  box-shadow:none;
  background: transparent;
  border: 0;
  min-width:auto;
}

.rbx-empty{
  margin-top:12px;
  padding:14px 16px;
  background:#fffafa;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  font-weight:800;
  color:#333;
}

/* Focus */
.rbx-btn:focus,
.rbx-pill:focus,
.rbx-action:focus,
.rbx-tag:focus{
  outline: 3px solid rgba(214,40,40,.25);
  outline-offset: 2px;
}

/* Badge "Mis à jour" */
.rbx-badge--updated{
  background: linear-gradient(
    135deg,
    rgba(255, 193, 7, .18),
    rgba(255, 193, 7, .08)
  );
  border-color: rgba(255, 193, 7, .38);
  color: #8a6d00;
  box-shadow: 0 6px 16px rgba(255, 193, 7, .18);
}

.rbx-user{
  font-weight: 950;
  color: #111;
  letter-spacing: -.2px;
}

/* Badge "Ça fait réagir" */
.rbx-badge--react{
  background: linear-gradient(
    135deg,
    rgba(214,40,40,.22),
    rgba(255,120,120,.14)
  );
  border: 1px solid rgba(214,40,40,.45);
  color: #7a0c0c;
  font-weight: 950;
  letter-spacing: -.2px;
  box-shadow: 0 10px 26px rgba(214,40,40,.22);
}

/* Petit boost visuel si hover */
.rbx-post:hover .rbx-badge--react{
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(214,40,40,.32);
  transition: transform .12s ease, box-shadow .12s ease;
}

@keyframes rbxPulse{
  0%{ box-shadow:0 0 0 0 rgba(214,40,40,.35); }
  70%{ box-shadow:0 0 0 12px rgba(214,40,40,0); }
  100%{ box-shadow:0 0 0 0 rgba(214,40,40,0); }
}

.rbx-badge--pulse{
  animation: rbxPulse 2.2s ease-out infinite;
}