/* ════════════════════════════════════════════════════════════════════════
   space.css — Theming complet par club pour space.bsf-skills.com
   ────────────────────────────────────────────────────────────────────────
   Date: 2026-05-06
   Loaded APRÈS la chaîne BSF (tokens + topbar + social.min) sur host=spaces.

   Architecture :
     • Tous les sélecteurs scopés via body[data-space="<slug>"] → zéro leak.
     • Couvre topbar, sidenav, widgets, posts, hero, mobile-nav, modals.
     • Chaque club = un bloc dédié avec ses 2 (ou 3) couleurs identitaires.

   ⚠️ Aucun "!important" sauf si vraiment nécessaire pour battre BSF chain.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   PARTIE 1 — Layout COMMUN (.space-hero, défauts) — partagé tous spaces
   ════════════════════════════════════════════════════════════════════════ */

.space-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #1A0A14;
  border: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
}
.space-hero-media { position: absolute; inset: 0; z-index: 0; }
.space-hero-media video,
.space-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.space-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 100%);
}
.space-hero-content {
  position: relative; z-index: 1;
  padding: 36px 24px 24px;
  display: flex; align-items: center; gap: 18px;
  min-height: 180px;
}
.space-hero-logo {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  border: 3px solid #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.space-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.space-hero-logo-fallback { font-size: 32px; font-weight: 900; color: #FFFFFF; }
.space-hero-info { flex: 1; min-width: 0; }
.space-hero-name {
  font-size: 22px; font-weight: 800; margin: 0 0 2px;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.space-hero-name .space-hero-verified {
  display: inline-block; vertical-align: 1px;
  font-size: 13px; margin-left: 4px;
}
.space-hero-tagline {
  font-size: 13px; color: rgba(255,255,255,.85);
  margin: 0 0 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.space-hero-meta {
  display: flex; gap: 14px; font-size: 12px;
  color: rgba(255,255,255,.7);
}
.space-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.space-hero-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.space-hero-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  border: none; cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.space-hero-btn-join { background: #FFFFFF; color: #000000; }
.space-hero-btn-join:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.space-hero-btn-leave {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.18);
}
.space-hero-btn-leave:hover { background: rgba(255,255,255,.16); }
@media (max-width: 700px) {
  .space-hero-content { flex-direction: column; align-items: flex-start; padding: 24px 16px; }
  .space-hero-logo { width: 64px; height: 64px; }
  .space-hero-name { font-size: 18px; }
  .space-hero-actions { width: 100%; }
  .space-hero-btn { flex: 1; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════════
   PARTIE 2 — THEME ESPÉRANCE SPORTIVE DE TUNIS
   Couleurs identitaires : rouge sang #C8102E + or #FFD700
   ════════════════════════════════════════════════════════════════════════ */

body[data-space="esperance-tunis"] {
  --est-red:        #C8102E;
  --est-red-dark:   #8A0B20;
  --est-red-deep:   #4A0511;
  --est-gold:       #FFD700;
  --est-gold-soft:  #F4C300;
  --est-bg:         #0F0205;
  --est-surface:    #1A0508;
  --est-elevated:   #260810;
  --est-text:       #FFFFFF;
  --est-text-muted: #D4A8B0;
  --est-border:     #3A0A14;

  background: var(--est-bg);
}

/* — Topbar — */
body[data-space="esperance-tunis"] .bsf-topbar {
  background: linear-gradient(180deg, var(--est-red) 0%, var(--est-red-dark) 100%);
  border-bottom: 2px solid var(--est-gold);
  color: var(--est-text);
}
body[data-space="esperance-tunis"] .bsf-topbar .bsf-brand,
body[data-space="esperance-tunis"] .bsf-topbar .bsf-brand * {
  color: var(--est-text);
}
body[data-space="esperance-tunis"] .bsf-logo-ring {
  background: #FFFFFF;
  border: 2px solid var(--est-gold);
  box-shadow: 0 0 0 1px var(--est-red-dark), 0 2px 8px rgba(0,0,0,.4);
}
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn,
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn-ghost {
  color: var(--est-text);
}
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn:hover,
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn-ghost:hover {
  background: rgba(255,215,0,.18);
  color: var(--est-gold);
}
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn-primary {
  background: var(--est-gold);
  color: var(--est-red-dark);
  font-weight: 800;
}
body[data-space="esperance-tunis"] .bsf-topbar .bsf-btn-primary:hover {
  background: var(--est-gold-soft);
  filter: none;
}
body[data-space="esperance-tunis"] .bsf-menu {
  background: var(--est-surface);
  border-color: var(--est-red-dark);
}
body[data-space="esperance-tunis"] .bsf-menu-item { color: var(--est-text); }
body[data-space="esperance-tunis"] .bsf-menu-item:hover { background: var(--est-elevated); color: var(--est-gold); }

/* — Body / page — */
body[data-space="esperance-tunis"] .bsf-social-layout { color: var(--est-text); }

/* — Cards / Widgets / Sidenav — */
body[data-space="esperance-tunis"] .bsf-card,
body[data-space="esperance-tunis"] .bsf-widget {
  background: var(--est-surface);
  border: 1px solid var(--est-border);
  border-top: 3px solid var(--est-red);
  color: var(--est-text);
}
body[data-space="esperance-tunis"] .bsf-widget-title {
  color: var(--est-gold);
  font-weight: 800;
  letter-spacing: .3px;
}

body[data-space="esperance-tunis"] .bsf-sidenav a {
  color: var(--est-text);
}
body[data-space="esperance-tunis"] .bsf-sidenav a i { color: var(--est-text-muted); }
body[data-space="esperance-tunis"] .bsf-sidenav a:hover {
  background: rgba(200,16,46,.20);
  color: var(--est-gold);
}
body[data-space="esperance-tunis"] .bsf-sidenav a:hover i { color: var(--est-gold); }
body[data-space="esperance-tunis"] .bsf-sidenav a.active {
  background: var(--est-red);
  color: var(--est-gold);
  font-weight: 800;
}
body[data-space="esperance-tunis"] .bsf-sidenav a.active i { color: var(--est-gold); }

body[data-space="esperance-tunis"] .bsf-profile-card strong { color: var(--est-text); }
body[data-space="esperance-tunis"] .bsf-profile-card small { color: var(--est-text-muted); }

/* — Buttons — */
body[data-space="esperance-tunis"] .bsf-sbtn-primary,
body[data-space="esperance-tunis"] .bsf-col-stack .bsf-btn-primary {
  background: var(--est-red);
  color: var(--est-gold);
  font-weight: 700;
  border: 1px solid var(--est-red-dark);
}
body[data-space="esperance-tunis"] .bsf-sbtn-primary:hover,
body[data-space="esperance-tunis"] .bsf-col-stack .bsf-btn-primary:hover {
  background: var(--est-gold);
  color: var(--est-red-dark);
  filter: none;
}
body[data-space="esperance-tunis"] .bsf-sbtn-ghost {
  background: transparent;
  color: var(--est-gold);
  border: 1px solid var(--est-gold);
}
body[data-space="esperance-tunis"] .bsf-sbtn-ghost:hover {
  background: rgba(255,215,0,.10);
}

/* — Posts (feed) — */
body[data-space="esperance-tunis"] .bsf-post {
  background: var(--est-surface);
  border: 1px solid var(--est-border);
  border-left: 3px solid var(--est-red);
}
body[data-space="esperance-tunis"] .bsf-post-author { color: var(--est-text); }
body[data-space="esperance-tunis"] .bsf-post-meta { color: var(--est-text-muted); }
body[data-space="esperance-tunis"] .bsf-post-action.is-active,
body[data-space="esperance-tunis"] .bsf-post-action.liked { color: var(--est-red); }

/* — Liens & mentions — */
body[data-space="esperance-tunis"] a:not(.bsf-btn):not(.bsf-menu-item):not(.bsf-sidenav a):not(.bsf-mobile-nav-item):not(.space-hero-btn):not(.bsf-brand) {
  color: var(--est-gold);
}
body[data-space="esperance-tunis"] .bsf-mention,
body[data-space="esperance-tunis"] .bsf-hashtag { color: var(--est-gold); font-weight: 600; }

/* — Hero — */
body[data-space="esperance-tunis"] .space-hero {
  background: linear-gradient(135deg, var(--est-red-deep) 0%, var(--est-red) 60%, var(--est-red-dark) 100%);
  border: 1px solid var(--est-gold);
}
body[data-space="esperance-tunis"] .space-hero-logo {
  background: #FFFFFF;
  border: 4px solid var(--est-gold);
  box-shadow: 0 0 0 2px var(--est-red-dark), 0 8px 24px rgba(0,0,0,.5);
}
body[data-space="esperance-tunis"] .space-hero-logo-fallback { color: var(--est-red); }
body[data-space="esperance-tunis"] .space-hero-name .space-hero-verified { color: var(--est-gold); }
body[data-space="esperance-tunis"] .space-hero-btn-join {
  background: var(--est-gold);
  color: var(--est-red-dark);
  font-weight: 800;
}
body[data-space="esperance-tunis"] .space-hero-btn-join:hover {
  background: var(--est-gold-soft);
}
body[data-space="esperance-tunis"] .space-hero-btn-leave {
  background: rgba(255,215,0,.10);
  color: var(--est-gold);
  border-color: rgba(255,215,0,.4);
}

/* — Mobile nav — */
body[data-space="esperance-tunis"] .bsf-mobile-nav {
  background: var(--est-red);
  border-top: 2px solid var(--est-gold);
}
body[data-space="esperance-tunis"] .bsf-mobile-nav-item { color: rgba(255,255,255,.85); }
body[data-space="esperance-tunis"] .bsf-mobile-nav-item.active { color: var(--est-gold); }

/* — Composer — */
body[data-space="esperance-tunis"] .bsf-composer,
body[data-space="esperance-tunis"] textarea,
body[data-space="esperance-tunis"] input[type="text"],
body[data-space="esperance-tunis"] input[type="email"] {
  background: var(--est-elevated);
  border-color: var(--est-border);
  color: var(--est-text);
}
body[data-space="esperance-tunis"] textarea:focus,
body[data-space="esperance-tunis"] input:focus { border-color: var(--est-gold); }


/* ════════════════════════════════════════════════════════════════════════
   PARTIE 3 — THEME CLUB AFRICAIN
   Couleurs identitaires : rouge #DA291C + blanc — fond BLANC dominant
   ════════════════════════════════════════════════════════════════════════ */

body[data-space="club-africain"] {
  --ca-red:         #DA291C;
  --ca-red-dark:    #9B1A12;
  --ca-red-deep:    #5A0D08;
  --ca-white:       #FFFFFF;
  --ca-cream:       #FAFAFA;
  --ca-text:        #18181B;
  --ca-text-muted:  #6B7280;
  --ca-bg:          #F5F5F5;
  --ca-surface:     #FFFFFF;
  --ca-elevated:    #F0F0F0;
  --ca-border:      #E0E0E0;

  background: var(--ca-bg);
  color: var(--ca-text);
}

/* — Topbar — */
body[data-space="club-africain"] .bsf-topbar {
  background: var(--ca-red);
  border-bottom: 3px solid var(--ca-white);
  color: var(--ca-white);
}
body[data-space="club-africain"] .bsf-topbar .bsf-brand,
body[data-space="club-africain"] .bsf-topbar .bsf-brand * { color: var(--ca-white); }
body[data-space="club-africain"] .bsf-logo-ring {
  background: var(--ca-white);
  border: 2px solid var(--ca-white);
  box-shadow: 0 0 0 1px var(--ca-red-dark);
}
body[data-space="club-africain"] .bsf-topbar .bsf-btn,
body[data-space="club-africain"] .bsf-topbar .bsf-btn-ghost { color: var(--ca-white); }
body[data-space="club-africain"] .bsf-topbar .bsf-btn:hover,
body[data-space="club-africain"] .bsf-topbar .bsf-btn-ghost:hover {
  background: rgba(255,255,255,.18);
  color: var(--ca-white);
}
body[data-space="club-africain"] .bsf-topbar .bsf-btn-primary {
  background: var(--ca-white);
  color: var(--ca-red);
  font-weight: 800;
}
body[data-space="club-africain"] .bsf-topbar .bsf-btn-primary:hover {
  background: var(--ca-cream);
  filter: none;
}
body[data-space="club-africain"] .bsf-menu {
  background: var(--ca-white);
  border-color: var(--ca-border);
}
body[data-space="club-africain"] .bsf-menu-item { color: var(--ca-text); }
body[data-space="club-africain"] .bsf-menu-item:hover { background: var(--ca-elevated); color: var(--ca-red); }

/* — Body / Layout — */
body[data-space="club-africain"] .bsf-social-layout { color: var(--ca-text); }

/* — Cards / Widgets / Sidenav — */
body[data-space="club-africain"] .bsf-card,
body[data-space="club-africain"] .bsf-widget {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-top: 3px solid var(--ca-red);
  color: var(--ca-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body[data-space="club-africain"] .bsf-widget-title {
  color: var(--ca-red);
  font-weight: 800;
}

body[data-space="club-africain"] .bsf-sidenav a { color: var(--ca-text); }
body[data-space="club-africain"] .bsf-sidenav a i { color: var(--ca-text-muted); }
body[data-space="club-africain"] .bsf-sidenav a:hover {
  background: rgba(218,41,28,.08);
  color: var(--ca-red);
}
body[data-space="club-africain"] .bsf-sidenav a:hover i { color: var(--ca-red); }
body[data-space="club-africain"] .bsf-sidenav a.active {
  background: var(--ca-red);
  color: var(--ca-white);
  font-weight: 800;
}
body[data-space="club-africain"] .bsf-sidenav a.active i { color: var(--ca-white); }

body[data-space="club-africain"] .bsf-profile-card strong { color: var(--ca-text); }
body[data-space="club-africain"] .bsf-profile-card small { color: var(--ca-text-muted); }

/* — Boutons — */
body[data-space="club-africain"] .bsf-sbtn-primary,
body[data-space="club-africain"] .bsf-col-stack .bsf-btn-primary {
  background: var(--ca-red);
  color: var(--ca-white);
  font-weight: 700;
  border: 1px solid var(--ca-red-dark);
}
body[data-space="club-africain"] .bsf-sbtn-primary:hover,
body[data-space="club-africain"] .bsf-col-stack .bsf-btn-primary:hover {
  background: var(--ca-red-dark);
  filter: none;
}
body[data-space="club-africain"] .bsf-sbtn-ghost {
  background: transparent;
  color: var(--ca-red);
  border: 1px solid var(--ca-red);
}
body[data-space="club-africain"] .bsf-sbtn-ghost:hover { background: rgba(218,41,28,.06); }

/* — Posts — */
body[data-space="club-africain"] .bsf-post {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-left: 3px solid var(--ca-red);
  color: var(--ca-text);
}
body[data-space="club-africain"] .bsf-post-author { color: var(--ca-text); }
body[data-space="club-africain"] .bsf-post-meta { color: var(--ca-text-muted); }
body[data-space="club-africain"] .bsf-post-action.is-active,
body[data-space="club-africain"] .bsf-post-action.liked { color: var(--ca-red); }

/* — Liens & mentions — */
body[data-space="club-africain"] a:not(.bsf-btn):not(.bsf-menu-item):not(.bsf-sidenav a):not(.bsf-mobile-nav-item):not(.space-hero-btn):not(.bsf-brand) {
  color: var(--ca-red);
}
body[data-space="club-africain"] .bsf-mention,
body[data-space="club-africain"] .bsf-hashtag { color: var(--ca-red); font-weight: 600; }

/* — Hero — */
body[data-space="club-africain"] .space-hero {
  background: linear-gradient(135deg, var(--ca-red-deep) 0%, var(--ca-red) 60%, var(--ca-red-dark) 100%);
  border: 1px solid var(--ca-white);
}
body[data-space="club-africain"] .space-hero-logo {
  background: var(--ca-white);
  border: 4px solid var(--ca-white);
  box-shadow: 0 0 0 3px var(--ca-red-dark), 0 8px 24px rgba(0,0,0,.5);
}
body[data-space="club-africain"] .space-hero-logo-fallback { color: var(--ca-red); }
body[data-space="club-africain"] .space-hero-name .space-hero-verified { color: var(--ca-white); }
body[data-space="club-africain"] .space-hero-btn-join {
  background: var(--ca-white);
  color: var(--ca-red);
  font-weight: 800;
}
body[data-space="club-africain"] .space-hero-btn-join:hover { background: var(--ca-cream); }
body[data-space="club-africain"] .space-hero-btn-leave {
  background: rgba(255,255,255,.10);
  color: var(--ca-white);
  border-color: rgba(255,255,255,.4);
}

/* — Mobile nav — */
body[data-space="club-africain"] .bsf-mobile-nav {
  background: var(--ca-red);
  border-top: 2px solid var(--ca-white);
}
body[data-space="club-africain"] .bsf-mobile-nav-item { color: rgba(255,255,255,.85); }
body[data-space="club-africain"] .bsf-mobile-nav-item.active { color: var(--ca-white); font-weight: 800; }

/* — Composer / inputs — */
body[data-space="club-africain"] .bsf-composer,
body[data-space="club-africain"] textarea,
body[data-space="club-africain"] input[type="text"],
body[data-space="club-africain"] input[type="email"] {
  background: var(--ca-cream);
  border-color: var(--ca-border);
  color: var(--ca-text);
}
body[data-space="club-africain"] textarea:focus,
body[data-space="club-africain"] input:focus { border-color: var(--ca-red); }

/* — Texte secondaire / muted sur fond clair — */
body[data-space="club-africain"] small,
body[data-space="club-africain"] .text-muted { color: var(--ca-text-muted); }