/* ==========================================================================
   Forum — page d'index (/forums)
   Feuille unique et scopée : remplace l'ancien CSS inline de forums.php et
   l'ancienne feuille forums-xenforo.css (refontes successives empilées).
   Toutes les mesures proviennent de la maquette de référence.
   ========================================================================== */

.brf-page {
  --brf-ink: #eef3ff;
  --brf-muted: #8ea0bf;
  --brf-dim: #6f81a3;
  --brf-card: #0d1526;
  --brf-card-2: #0a1120;
  --brf-border: #1b2740;
  --brf-sep: #182135;
  --brf-field: #101a2e;
  --brf-radius: 10px;

  padding-top: 0;
  margin-top: 0;
}

.brf-page .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ HERO -- */

.brf-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  --brf-visual: clamp(196px, 27%, 296px);
  height: auto;
  min-height: 163px;
  padding: 0 0 0 3.7%;
  overflow: hidden;
  border: 1px solid rgba(118, 99, 226, .55);
  border-radius: 14px;
  background:
    radial-gradient(58% 150% at 6% 45%, rgba(38, 44, 170, .55) 0%, rgba(38, 44, 170, 0) 62%),
    linear-gradient(90deg, #0d1360 0%, #090e38 32%, #0a1040 58%, #131a86 84%, #1c22b0 100%);
  box-shadow: 0 18px 46px rgba(6, 8, 30, .55);
}

.brf-hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--brf-visual);
  pointer-events: none;
}

.brf-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 26%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 26%);
}

.brf-hero-tagline {
  position: absolute;
  right: calc(var(--brf-visual) - 14px);
  bottom: 6px;
  width: clamp(168px, 22%, 226px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(150, 110, 255, .45));
}

.brf-hero-copy {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 14px 0 0;
}

.brf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #e9e6ff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brf-hero-badge svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.brf-hero-title {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.brf-hero-title .brf-accent { color: #c9b6ff; }

.brf-hero-sub {
  margin: 5px 0 0;
  color: #c6cbf2;
  font-size: 13.5px;
  line-height: 1.35;
}

.brf-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.brf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.brf-btn svg { width: 15px; height: 15px; fill: currentColor; }

.brf-btn-primary {
  background: linear-gradient(135deg, #7a53ff 0%, #5a31e8 100%);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: 0 8px 20px rgba(80, 45, 220, .45);
}

.brf-btn-primary:hover { color: #fff; filter: brightness(1.08); }

.brf-btn-ghost {
  background: rgba(10, 12, 44, .6);
  border-color: rgba(255, 255, 255, .22);
  color: #e6e9ff;
}

.brf-btn-ghost:hover { color: #fff; background: rgba(20, 24, 70, .8); }

.brf-hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  margin: 48px var(--brf-visual) 0 0;
  padding: 0;
  list-style: none;
}

.brf-stat {
  display: flex;
  align-items: center;
  gap: 9px;
  width: clamp(88px, 11%, 116px);
  height: 56px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}

.brf-stat-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.brf-stat-icon svg { width: 20px; height: 20px; }

.brf-stat--members .brf-stat-icon svg { fill: #56d98a; }
.brf-stat--topics .brf-stat-icon svg { fill: #b69bff; }
.brf-stat--posts .brf-stat-icon svg { fill: #59a4ff; }

.brf-stat-value {
  display: block;
  color: #fff;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.brf-stat-label {
  display: block;
  margin-top: 2px;
  color: #b9c0e6;
  font-size: 11px;
  line-height: 1;
}

/* --------------------------------------------------------------- TOOLBAR -- */

.brf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 11px 0 0;
}

.brf-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  height: 39px;
  padding: 0 14px;
  border: 1px solid var(--brf-border);
  border-radius: var(--brf-radius);
  background: var(--brf-field);
}

.brf-search:focus-within { border-color: rgba(122, 83, 255, .8); }
.brf-search svg { width: 16px; height: 16px; flex: none; fill: #7d8db0; }

.brf-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--brf-ink);
  font-size: 13.5px;
}

.brf-search input::placeholder { color: #75849f; }
.brf-search button { display: none; }

.brf-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 39px;
  border: 1px solid var(--brf-border);
  border-radius: var(--brf-radius);
  background: var(--brf-field);
}

.brf-select select {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  max-width: 200px;
  margin: 0;
  padding: 0 32px 0 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--brf-ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
}

.brf-select select option { background: #101a2e; color: #eef3ff; }

.brf-select::after {
  content: "";
  position: absolute;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #8494b6;
  border-bottom: 2px solid #8494b6;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* ---------------------------------------------------------------- LAYOUT -- */

.brf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.4%;
  gap: 2.8%;
  align-items: start;
}

/* La colonne principale porte le hero, la barre d'outils et les catégories :
   le rail droit démarre à la même hauteur que le hero (maquette). */
.brf-main > .brf-hero { margin-bottom: 11px; }
.brf-main > .brf-toolbar { margin-bottom: 11px; }

.brf-main { min-width: 0; }

/* ------------------------------------------------------------ CATEGORIES -- */

.brf-cat {
  --brf-accent: #4619fa;
  --brf-accent-2: #2720a2;
  margin-bottom: 7px;
  overflow: hidden;
  border-radius: var(--brf-radius);
  background: var(--brf-card);
  box-shadow: 0 10px 26px rgba(3, 6, 18, .35);
}

.brf-cat--1 { --brf-accent: #0150fb; --brf-accent-2: #013ca0; }
.brf-cat--2 { --brf-accent: #03bf52; --brf-accent-2: #03673f; }
.brf-cat--3 { --brf-accent: #e527d2; --brf-accent-2: #801285; }

.brf-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 39px;
  padding: 0 10px 0 14px;
  background: linear-gradient(90deg, var(--brf-accent) 0%, var(--brf-accent-2) 100%);
}

.brf-cat-head > a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.brf-cat-head > a:hover { color: #fff; opacity: .92; }

.brf-cat-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.brf-cat-icon svg { width: 22px; height: 22px; fill: #fff; }
.brf-cat-icon img { width: 22px; height: 22px; object-fit: contain; }

.brf-cat-head strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-cat-tail {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brf-cat-tail small {
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-collapse {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.brf-collapse:hover { background: rgba(0, 0, 0, .18); }
.brf-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.brf-cat.is-collapsed .brf-collapse svg { transform: rotate(180deg); }
.brf-cat.is-collapsed .brf-cat-body { display: none; }

/* ------------------------------------------------------------------ ROWS -- */

.brf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px 120px 385px;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  border-top: 1px solid var(--brf-sep);
}

.brf-cat-body > .brf-row:first-child { border-top: 0; }
.brf-row:hover { background: #101a2d; }

.brf-row-forum {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.brf-row-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 40px;
  flex: 0 0 46px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brf-accent) 30%, #0d1526);
}

.brf-row-icon svg { width: 22px; height: 22px; fill: #fff; }
.brf-row-icon img { width: 22px; height: 22px; object-fit: contain; }

.brf-row-body { min-width: 0; }

.brf-row-body h2 {
  margin: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-row-body h2 a { color: var(--brf-ink); text-decoration: none; }
.brf-row-body h2 a:hover { color: #fff; }

.brf-row-body p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--brf-muted);
  font-size: 12.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-count { text-align: center; }

.brf-count strong {
  display: block;
  color: var(--brf-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.brf-count span {
  display: block;
  margin-top: 1px;
  color: var(--brf-muted);
  font-size: 12px;
  line-height: 1.2;
}

.brf-last {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-left: 38px;
}

.brf-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #1a2540;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.brf-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.brf-last-body { min-width: 0; }

.brf-last-title {
  display: block;
  overflow: hidden;
  color: var(--brf-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-last-title:hover { color: #fff; }

.brf-last-meta {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--brf-dim);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-last-meta a { color: #9fb1d1; text-decoration: none; }
.brf-last-meta a:hover { color: #cfdaf1; }
.brf-last-meta .brf-sep { margin: 0 5px; color: #495b7c; }
.brf-no-activity { color: var(--brf-dim); font-size: 12.5px; }

.brf-empty {
  padding: 26px;
  border: 1px solid var(--brf-border);
  border-radius: var(--brf-radius);
  background: var(--brf-card);
  color: var(--brf-ink);
}

.brf-empty h2 { margin: 0 0 6px; font-size: 17px; }
.brf-empty p { margin: 0; color: var(--brf-muted); font-size: 13.5px; }

/* ------------------------------------------------------------------ RAIL -- */

.brf-rail {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 15px;
  min-width: 0;
}

.brf-card {
  padding: 16px;
  border: 1px solid var(--brf-border);
  border-radius: 12px;
  background: var(--brf-card-2);
}

.brf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.brf-card-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--brf-ink);
  font-size: 15px;
  font-weight: 700;
}

.brf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fdc74;
  box-shadow: 0 0 10px rgba(47, 220, 116, .8);
}

.brf-online-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2fdc74;
  font-size: 14px;
  font-weight: 700;
}

.brf-people {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.brf-people li { margin-right: -8px; }
.brf-people li:last-child { margin-right: 0; }

.brf-people a,
.brf-people .brf-people-more {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 2px solid var(--brf-card-2);
  border-radius: 50%;
  background: #1a2540;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.brf-people a img { width: 100%; height: 100%; object-fit: cover; }

.brf-people .brf-people-more {
  background: #141d33;
  border: 1px solid #263553;
  color: #a9b8d6;
  font-size: 11.5px;
}

.brf-card-line {
  margin: 0;
  color: #b7c4dd;
  font-size: 13px;
  line-height: 1.5;
}

.brf-card-names {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--brf-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-topics {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brf-topics li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}

.brf-topics li + li { border-top: 1px solid #141d30; }
.brf-topic-body { min-width: 0; flex: 1 1 auto; }

.brf-topic-body > a {
  display: block;
  overflow: hidden;
  color: var(--brf-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brf-topic-body > a:hover { color: #fff; }

.brf-topic-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  color: var(--brf-muted);
  font-size: 12px;
}

.brf-topic-meta i { font-style: normal; white-space: nowrap; }

.brf-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  margin-top: 12px;
  border: 1px solid #22304c;
  border-radius: 9px;
  background: #101a2c;
  color: #cbd6ee;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.brf-card-cta:hover { background: #16223a; color: #fff; }

/* Discord */
.brf-discord {
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(88, 101, 242, .30) 0%, rgba(88, 101, 242, 0) 60%),
    #0b1326;
}

.brf-discord-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brf-discord-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 14px;
  background: #5865f2;
}

.brf-discord-mark svg { width: 32px; height: 32px; fill: #fff; }

.brf-discord-top h2 {
  margin: 0 0 4px;
  color: var(--brf-ink);
  font-size: 15px;
  font-weight: 700;
}

.brf-discord-top p {
  margin: 0;
  color: var(--brf-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.brf-discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7159ff 0%, #4f46e5 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.brf-discord-btn:hover { color: #fff; filter: brightness(1.08); }
.brf-discord-btn svg { width: 15px; height: 15px; fill: currentColor; }

.brf-discord-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--brf-muted);
  font-size: 12.5px;
}

/* ------------------------------------------------------------ RESPONSIVE -- */

@media (max-width: 1500px) {
  .brf-row { grid-template-columns: minmax(0, 1fr) 90px 100px 300px; }
  .brf-last { padding-left: 20px; }
}

@media (max-width: 1200px) {
  .brf-hero { --brf-visual: clamp(168px, 22%, 240px); }
  .brf-hero-tagline { display: none; }
  .brf-hero-copy { padding-bottom: 14px; }
  .brf-stat { width: clamp(84px, 10.5%, 104px); }
  .brf-row { grid-template-columns: minmax(0, 1fr) 84px 94px 240px; }
  .brf-last { padding-left: 12px; }
}

@media (max-width: 1024px) {
  .brf-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .brf-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brf-hero { padding-left: 24px; }
  .brf-hero-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 860px) {
  .brf-hero { height: auto; padding: 18px 0 18px 20px; flex-wrap: wrap; }
  .brf-hero-copy { padding-top: 0; }
  .brf-hero-stats { margin: 16px var(--brf-visual) 0 0; }
  .brf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    height: auto;
    padding: 12px 14px;
  }
  .brf-row-forum { flex: 1 1 100%; }
  .brf-count { display: flex; align-items: baseline; gap: 5px; text-align: left; padding-left: 62px; }
  .brf-count strong, .brf-count span { display: inline; margin: 0; }
  .brf-last { flex: 1 1 100%; padding: 9px 0 0 62px; }
  .brf-rail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .brf-hero { height: auto; padding: 16px; }
  .brf-hero-visual { display: none; }
  .brf-hero-tagline { display: none; }
  .brf-hero-copy { width: 100%; padding: 0; }
  .brf-hero-title { font-size: 22px; white-space: normal; }
  .brf-hero-actions { flex-wrap: wrap; }
  .brf-hero-actions .brf-btn { flex: 1 1 140px; padding: 0 12px; }
  .brf-hero-stats { width: 100%; margin: 14px 0 0; gap: 8px; }
  .brf-stat { flex: 1 1 0; width: auto; min-width: 0; padding: 0 9px; gap: 7px; }
  .brf-stat-icon, .brf-stat-icon svg { width: 18px; height: 18px; flex-basis: 18px; }
  .brf-stat-value { font-size: 15px; }
  .brf-stat-label { font-size: 10.5px; }
  .brf-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .brf-toolbar::-webkit-scrollbar { display: none; }
  .brf-search { flex: 0 0 68%; }
  .brf-cat-tail small { display: none; }
  .brf-count { padding-left: 0; }
  .brf-last { padding-left: 0; }
}

.brf-status {
  margin: 12px 0 0;
  color: var(--brf-muted);
  font-size: 13px;
  line-height: 1.5;
}

.brf-status .highlighted { color: #c9b6ff; font-weight: 700; }

.brf-row[hidden],
.brf-cat[hidden],
.brf-status[hidden] { display: none !important; }

/* Le shell global applique padding-top:112px à .content-grid : sur la page
   d'index du forum, le contenu doit démarrer juste sous la topbar (maquette).
   Portée strictement limitée à cette page, le shell n'est pas modifié. */
.content-grid.brf-content-grid { padding-top: 6px; }

@media (max-width: 1024px) {
  .content-grid.brf-content-grid { padding-top: 12px; }
}