/*
 * BuddyPress Minimal UI — Feuille de style principale
 * Palette : noir / blanc / une couleur d'accent
 * Typographie : Bricolage Grotesque (display) + Instrument Sans (corps)
 * ──────────────────────────────────────────────────────────────────────
 */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  --bpm-accent:     #E8521A;
  --bpm-accent-rgb: 232,82,26;
  --bpm-pale:       rgba(232,82,26,.08);
  --bpm-mid:        rgba(232,82,26,.18);

  /* Light */
  --bpm-bg:       #FAFAFA;
  --bpm-bg-alt:   #F3F3F3;
  --bpm-surface:  #FFFFFF;
  --bpm-line:     #E8E8E8;
  --bpm-line2:    #D0D0D0;
  --bpm-ink:      #111111;
  --bpm-ink-2:    #555555;
  --bpm-ink-3:    #999999;

  --bpm-radius:    14px;
  --bpm-radius-sm: 8px;
  --bpm-pill:      999px;

  --bpm-shadow-lift: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --bpm-shadow-up:   0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);

  --bpm-dur: .18s;
  --bpm-ease: cubic-bezier(.4,0,.2,1);
}

/* ── 2. DARK MODE ──────────────────────────────────────────── */
[data-bpm-theme="dark"] {
  --bpm-bg:       #0C0C0C;
  --bpm-bg-alt:   #161616;
  --bpm-surface:  #1C1C1C;
  --bpm-line:     #2A2A2A;
  --bpm-line2:    #3A3A3A;
  --bpm-ink:      #F0F0F0;
  --bpm-ink-2:    #A0A0A0;
  --bpm-ink-3:    #666666;
  --bpm-shadow-lift: 0 2px 12px rgba(0,0,0,.4);
  --bpm-shadow-up:   0 8px 28px rgba(0,0,0,.55);
}

/* ── 3. BASE ───────────────────────────────────────────────── */
body {
  font-family: 'Instrument Sans', sans-serif !important;
  background: var(--bpm-bg) !important;
  color: var(--bpm-ink) !important;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--bpm-ease), color .3s var(--bpm-ease);
}

#buddypress h1, #buddypress h2,
#buddypress h3, #buddypress h4 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  letter-spacing: -.03em !important;
  color: var(--bpm-ink) !important;
}

#buddypress, #buddypress * { box-sizing: border-box; }

/* ── 4. NAVIGATION TABS ────────────────────────────────────── */
#buddypress div.item-list-tabs,
#buddypress div#subnav {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--bpm-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  box-shadow: none !important;
}

#buddypress div.item-list-tabs ul,
#buddypress div#subnav ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  list-style: none !important;
  scrollbar-width: none !important;
}
#buddypress div.item-list-tabs ul::-webkit-scrollbar,
#buddypress div#subnav ul::-webkit-scrollbar { display: none; }

#buddypress div.item-list-tabs ul li,
#buddypress div#subnav ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  float: none !important;
}

#buddypress div.item-list-tabs ul li a,
#buddypress div#subnav ul li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
  color: var(--bpm-ink-3) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  background: none !important;
  transition: color var(--bpm-dur) var(--bpm-ease),
              border-color var(--bpm-dur) var(--bpm-ease) !important;
  white-space: nowrap;
}

#buddypress div.item-list-tabs ul li a:hover,
#buddypress div#subnav ul li a:hover {
  color: var(--bpm-ink) !important;
  background: none !important;
}

#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a,
#buddypress div#subnav ul li.current a {
  color: var(--bpm-accent) !important;
  border-bottom-color: var(--bpm-accent) !important;
  font-weight: 600 !important;
  background: none !important;
  box-shadow: none !important;
}

#buddypress div.item-list-tabs ul li span,
#buddypress div#subnav ul li span {
  font-size: .7rem !important;
  font-weight: 700 !important;
  background: var(--bpm-bg-alt) !important;
  color: var(--bpm-ink-3) !important;
  border-radius: var(--bpm-pill) !important;
  padding: 1px 6px !important;
  min-width: auto !important;
  height: auto !important;
}

#buddypress div.item-list-tabs ul li.current span {
  background: var(--bpm-pale) !important;
  color: var(--bpm-accent) !important;
}

/* ── 5. MEMBER / ITEM CARDS ────────────────────────────────── */
#buddypress ul.item-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

#buddypress ul.item-list li {
  background: var(--bpm-surface) !important;
  border: 1px solid var(--bpm-line) !important;
  border-radius: var(--bpm-radius) !important;
  padding: 22px 18px 16px !important;
  box-shadow: none !important;
  transition: border-color var(--bpm-dur) var(--bpm-ease),
              box-shadow var(--bpm-dur) var(--bpm-ease),
              transform var(--bpm-dur) var(--bpm-ease) !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  float: none !important;
  width: auto !important;
}

#buddypress ul.item-list li:hover {
  border-color: var(--bpm-ink) !important;
  box-shadow: var(--bpm-shadow-up) !important;
  transform: translateY(-3px) !important;
}

/* Accent top line on hover */
#buddypress ul.item-list li::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--bpm-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--bpm-ease);
}
#buddypress ul.item-list li:hover::after { transform: scaleX(1); }

/* Avatar */
#buddypress ul.item-list li div.item-avatar {
  float: none !important;
  width: auto !important;
  margin: 0 0 2px !important;
}

#buddypress ul.item-list li div.item-avatar img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--bpm-line) !important;
  transition: border-color var(--bpm-dur) var(--bpm-ease) !important;
  box-shadow: none !important;
}

#buddypress ul.item-list li:hover div.item-avatar img {
  border-color: var(--bpm-accent) !important;
}

/* Names */
#buddypress ul.item-list li div.item { float: none !important; width: auto !important; margin: 0 !important; }

#buddypress ul.item-list li div.item h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 2px !important;
  color: var(--bpm-ink) !important;
}

#buddypress ul.item-list li div.item h3 a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color var(--bpm-dur) var(--bpm-ease) !important;
}
#buddypress ul.item-list li div.item h3 a:hover { color: var(--bpm-accent) !important; }

#buddypress ul.item-list li div.item p.meta,
#buddypress ul.item-list li div.item p.activity {
  font-size: .75rem !important;
  color: var(--bpm-ink-3) !important;
  margin: 0 !important;
}

/* Actions */
#buddypress ul.item-list li div.action {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin-top: auto !important;
  padding: 0 !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--bpm-line) !important;
}

/* ── 6. BUTTONS ────────────────────────────────────────────── */
#buddypress a.button,
#buddypress button,
#buddypress input[type="submit"],
#buddypress .generic-button a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 16px !important;
  border-radius: var(--bpm-pill) !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  cursor: pointer !important;
  border: 1.5px solid var(--bpm-line) !important;
  background: var(--bpm-surface) !important;
  color: var(--bpm-ink-2) !important;
  text-decoration: none !important;
  transition: all var(--bpm-dur) var(--bpm-ease) !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

#buddypress a.button:hover,
#buddypress button:hover,
#buddypress .generic-button a:hover {
  border-color: var(--bpm-ink) !important;
  color: var(--bpm-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--bpm-shadow-lift) !important;
  background: var(--bpm-surface) !important;
}

/* Primary / accent */
#buddypress input[type="submit"],
#buddypress a.add-friend,
#buddypress a.follow,
#buddypress a.button.bp-primary-action {
  background: var(--bpm-accent) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(var(--bpm-accent-rgb),.25) !important;
}

#buddypress input[type="submit"]:hover,
#buddypress a.add-friend:hover,
#buddypress a.button.bp-primary-action:hover {
  opacity: .88 !important;
  color: white !important;
  background: var(--bpm-accent) !important;
  box-shadow: 0 6px 20px rgba(var(--bpm-accent-rgb),.35) !important;
}

/* ── 7. FORMS ──────────────────────────────────────────────── */
#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress input[type="search"],
#buddypress textarea,
#buddypress select {
  border: 1.5px solid var(--bpm-line) !important;
  border-radius: var(--bpm-radius-sm) !important;
  padding: 10px 13px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: .875rem !important;
  background: var(--bpm-bg-alt) !important;
  color: var(--bpm-ink) !important;
  transition: border-color var(--bpm-dur) var(--bpm-ease),
              box-shadow var(--bpm-dur) var(--bpm-ease) !important;
}
#buddypress input:focus, #buddypress textarea:focus, #buddypress select:focus {
  outline: none !important;
  border-color: var(--bpm-accent) !important;
  box-shadow: 0 0 0 3px var(--bpm-pale) !important;
  background: var(--bpm-surface) !important;
}

/* Search pill */
#buddypress input[type="search"] {
  border-radius: var(--bpm-pill) !important;
}

/* Whats-new form */
#buddypress form#whats-new-form {
  background: var(--bpm-surface) !important;
  border: 1px solid var(--bpm-line) !important;
  border-radius: var(--bpm-radius) !important;
  padding: 18px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* ── 8. ACTIVITY FEED ──────────────────────────────────────── */
#buddypress ul#activity-stream {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#buddypress ul#activity-stream li.activity-item {
  background: var(--bpm-surface) !important;
  border: 1px solid var(--bpm-line) !important;
  border-radius: var(--bpm-radius) !important;
  padding: 20px !important;
  box-shadow: none !important;
  transition: border-color var(--bpm-dur) var(--bpm-ease) !important;
  overflow: visible !important;
}
#buddypress ul#activity-stream li.activity-item:hover {
  border-color: var(--bpm-line2) !important;
}

#buddypress ul#activity-stream li .activity-avatar img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--bpm-line) !important;
}

#buddypress ul#activity-stream li .activity-header p a {
  font-weight: 600 !important;
  color: var(--bpm-accent) !important;
}

#buddypress ul#activity-stream li .activity-content .activity-inner {
  background: var(--bpm-bg-alt) !important;
  border-radius: var(--bpm-radius-sm) !important;
  border-left: 2px solid var(--bpm-line) !important;
  padding: 12px 14px !important;
  font-size: .875rem !important;
  line-height: 1.65 !important;
  color: var(--bpm-ink-2) !important;
}

/* Reaction buttons */
#buddypress ul#activity-stream li .activity-meta a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  color: var(--bpm-ink-3) !important;
  padding: 4px 9px !important;
  border-radius: var(--bpm-radius-sm) !important;
  border: none !important;
  background: none !important;
  transition: color var(--bpm-dur) var(--bpm-ease),
              background var(--bpm-dur) var(--bpm-ease) !important;
}
#buddypress ul#activity-stream li .activity-meta a:hover {
  color: var(--bpm-accent) !important;
  background: var(--bpm-pale) !important;
}

/* ── 9. PROFILE ────────────────────────────────────────────── */
#buddypress div#item-header {
  background: var(--bpm-surface) !important;
  border: 1px solid var(--bpm-line) !important;
  border-radius: var(--bpm-radius) !important;
  box-shadow: var(--bpm-shadow-lift) !important;
  overflow: hidden;
  margin-bottom: 22px !important;
  padding: 0 !important;
}

#buddypress div#cover-image-container {
  border-radius: var(--bpm-radius) var(--bpm-radius) 0 0 !important;
  overflow: hidden !important;
  height: var(--bpm-cover-h, 180px) !important;
  background: var(--bpm-bg-alt) !important;
}

#buddypress div#item-header-avatar img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid var(--bpm-surface) !important;
  box-shadow: 0 0 0 2px var(--bpm-accent) !important;
}

#buddypress div#item-header-user-stats h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

/* ── 10. PAGINATION ────────────────────────────────────────── */
#buddypress div.pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 28px 0 !important;
}

#buddypress div.pagination a,
#buddypress div.pagination span {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bpm-radius-sm) !important;
  border: 1.5px solid var(--bpm-line) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--bpm-ink-2) !important;
  text-decoration: none !important;
  background: var(--bpm-surface) !important;
  transition: all var(--bpm-dur) var(--bpm-ease) !important;
}

#buddypress div.pagination a:hover {
  border-color: var(--bpm-ink) !important;
  color: var(--bpm-ink) !important;
}

#buddypress div.pagination span.current {
  background: var(--bpm-accent) !important;
  color: white !important;
  border-color: transparent !important;
}

/* ── 11. NOTICES ───────────────────────────────────────────── */
#buddypress div.bp-feedback {
  border-radius: var(--bpm-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: .875rem !important;
  border: 1px solid var(--bpm-line) !important;
  background: var(--bpm-surface) !important;
  color: var(--bpm-ink) !important;
}

#buddypress div.bp-feedback.success {
  border-left: 3px solid #22C55E !important;
}
#buddypress div.bp-feedback.error {
  border-left: 3px solid #EF4444 !important;
}
#buddypress div.bp-feedback.info {
  border-left: 3px solid var(--bpm-accent) !important;
}

/* ── 12. MESSAGES ──────────────────────────────────────────── */
#buddypress ul.message-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#buddypress ul.message-list li {
  display: flex !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--bpm-line) !important;
  align-items: center !important;
  transition: background var(--bpm-dur) var(--bpm-ease) !important;
  cursor: pointer;
}
#buddypress ul.message-list li:hover {
  background: var(--bpm-bg-alt) !important;
}
#buddypress ul.message-list li.unread {
  border-left: 2px solid var(--bpm-accent) !important;
  background: var(--bpm-pale) !important;
}

/* ── 13. THEME TOGGLE FLOATING BUTTON ──────────────────────── */
#bpm-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bpm-line);
  background: var(--bpm-surface);
  color: var(--bpm-ink-2);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--bpm-shadow-up);
  transition: all var(--bpm-dur) var(--bpm-ease);
  z-index: 999;
}
#bpm-theme-toggle:hover {
  border-color: var(--bpm-ink);
  transform: scale(1.08);
}

/* ── 14. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bpm-line2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--bpm-ink-3); }

/* ── 15. SELECTION ─────────────────────────────────────────── */
::selection {
  background: var(--bpm-mid);
  color: var(--bpm-accent);
}

/* ── 16. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
  #buddypress ul.item-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  #buddypress ul.item-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── 17. ANIMATIONS ────────────────────────────────────────── */
@keyframes bpm-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bpm-anim #buddypress ul.item-list li,
.bpm-anim #buddypress ul#activity-stream li.activity-item {
  animation: bpm-up .32s cubic-bezier(.4,0,.2,1) both;
}
.bpm-anim #buddypress ul.item-list li:nth-child(1) { animation-delay: .04s; }
.bpm-anim #buddypress ul.item-list li:nth-child(2) { animation-delay: .08s; }
.bpm-anim #buddypress ul.item-list li:nth-child(3) { animation-delay: .12s; }
.bpm-anim #buddypress ul.item-list li:nth-child(4) { animation-delay: .16s; }
.bpm-anim #buddypress ul.item-list li:nth-child(5) { animation-delay: .20s; }
.bpm-anim #buddypress ul.item-list li:nth-child(n+6) { animation-delay: .24s; }