/* ════════════════════════════════════════════════════════════════════════
   space.css — Theming SPACE.bsf-skills.com
   ────────────────────────────────────────────────────────────────────────
   Architecture clean : 3 variables propres au domaine space (zéro override
   de tokens BSF canoniques, zéro shield, zéro double-cascade).

     --space-bg   : fond du site (universel, fixé)
     --space-c1   : fond topbar / cards / widgets / hero  (couleur 1 club, SQL-driven)
     --space-c2   : texte sur c1 / fond boutons / fond avatars (couleur 2 club, SQL-driven)

   --space-c1 et --space-c2 sont injectés dans <style id="space-club-vars">
   sur body[data-space="<slug>"] depuis bsf_spaces.theme_overrides JSON.

   `!important` utilisé UNIQUEMENT pour battre les règles canoniques
   `!important` (impossible à contourner sans !important — règle CSS).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Body : fond fixé + texte default = c3 sur fond sombre ──────────── */
body[data-space] {
  --space-bg: rgb(11, 20, 32);
  --space-c1-solid: var(--space-c1);
  /* Alias pour les inline styles canoniques qui utilisent var(--s-accent, #1E70B8) */
  --s-accent: var(--space-c2);
  background: var(--space-bg);
  color: var(--space-c3, var(--space-c2));
}

/* ─── 2. Layout : sidenav canon caché (left-col custom + mobile bottom custom) ── */
body[data-space] .bsf-sidenav { display: none; }
body[data-space] .bsf-mobile-nav { display: none !important; }
/* Note : .bsf-left-col reste visible — elle contient maintenant .space-cross-sites */

/* ─── 3. Topbar : fond = c1, texte/icônes/buttons = c2 ──────────────────── */
body[data-space] .bsf-topbar-inner {
  background: var(--space-c1);
  color: var(--space-c2);
  border-bottom: 2px solid var(--space-c2);
}

/* Logo BSF — ring contour C2 (override l'accent canonique) */
body[data-space] .bsf-logo-ring {
  box-shadow: 0 0 0 2px var(--space-c2), 0 4px 14px rgba(0, 0, 0, .25);
}
body[data-space] .bsf-topbar .bsf-brand,
body[data-space] .bsf-topbar .bsf-brand *,
body[data-space] .bsf-topbar .bsf-btn,
body[data-space] .bsf-topbar .bsf-btn-ghost,
body[data-space] .bsf-topbar .bsf-stats-badge {
  color: var(--space-c2) !important; /* canonique a !important sur ces éléments */
}
body[data-space] .bsf-topbar .bsf-btn-primary {
  background: var(--space-c2) !important; /* canonique a !important */
  color: var(--space-c1-solid, var(--space-c1)) !important;
  border-color: var(--space-c2) !important;
}

/* Céréalis teste un C1 en gradient : on garde une vraie couleur pour le texte. */
body[data-space="cerealis-snacks"] .bsf-topbar .bsf-btn-primary,
body[data-space="cerealis-snacks"] .bsf-topbar .bsf-btn-primary * {
  color: #7A1026 !important;
}

/* ─── 4. Right col widget (cards) : fond = c1, texte = c2 ───────────────── */
body[data-space] .bsf-right-col .bsf-card {
  background: var(--space-c1) !important; /* canonique a !important */
  border: 0.5px solid var(--space-c2) !important;
  border-top: 0.5px solid var(--space-c2) !important;
  color: var(--space-c2);
}
body[data-space] .bsf-right-col .bsf-widget-title,
body[data-space] .bsf-right-col .bsf-sug-name,
body[data-space] .bsf-right-col .bsf-sug-more-link {
  color: var(--space-c2);
}

/* ─── 5. Avatar (initials) : bg = c2 / texte = c1 ───────────────────────── */
body[data-space] .bsf-right-col .bsf-sug-avatar-init {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}

/* ─── 6. Bouton ghost ("Connecter") : bordure + texte = c2 ──────────────── */
body[data-space] .bsf-right-col .bsf-sbtn-ghost {
  border-color: var(--space-c2);
  color: var(--space-c2);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — bandeau identitaire en haut du feed
   ════════════════════════════════════════════════════════════════════════ */

.space-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--space-c1);
  border: 1px solid var(--space-c2);
}
/* Pas de média en fond, pas de gradient — fond MAT couleur c1 */
.space-hero-media { display: none; }
.space-hero-content {
  position: relative;
  padding: 28px 24px;
  display: flex; align-items: center; gap: 18px;
  min-height: 140px;
}
.space-hero-logo {
  flex: 0 0 auto;
  width: 100px; height: 100px;
  border-radius: 12px;                /* rectangulaire arrondi, pas cercle */
  background: var(--space-logo-bg, #fff);  /* SQL-driven, fallback blanc */
  border: 2px solid var(--space-c2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 8px;                       /* respiration autour du logo */
}
.space-hero-logo img {
  width: 100%; height: 100%;
  object-fit: contain;                /* logo entier visible, pas coupé */
}
.space-hero-logo-fallback {
  font-size: 32px; font-weight: 900; color: var(--space-c2);
}
.space-hero-info { flex: 1; min-width: 0; }
.space-hero-name {
  font-size: 22px; font-weight: 800; margin: 0 0 2px;
  color: var(--space-c2);
}
.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: var(--space-c2);
  opacity: .85;
  margin: 0 0 8px;
}
.space-hero-meta {
  display: flex; gap: 14px; font-size: 12px;
  color: var(--space-c2);
  opacity: .9;
}
.space-hero-meta span {
  display: inline-flex; align-items: center; gap: 4px;
}
.space-hero-actions {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
.space-hero-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--space-c2);
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  transition: opacity .15s;
}
.space-hero-btn:hover { opacity: .85; }
.space-hero-btn-leave {
  background: transparent;
  color: var(--space-c2);
}

/* Hero custom depuis bsf_spaces.hero_html : HTML SQL sanitizé, styles inline autonomes */
.space-hero--custom {
  background: transparent;
  border: 0;
}
.space-hero-custom-html {
  min-height: 140px;
}
.space-hero-custom-html > *:first-child { margin-top: 0; }
.space-hero-custom-html > *:last-child { margin-bottom: 0; }
.space-hero-actions--custom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}
.space-hero-actions--inline {
  position: static;
  flex-direction: row;
  justify-content: center;
  width: auto;
}

/* Mobile (≤720px) — empile logo / info / actions, sinon le titre wrappe mot-par-mot */
@media (max-width: 720px) {
  .space-hero-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 20px 16px;
    gap: 12px;
    min-height: 0;
  }
  .space-hero-logo {
    align-self: center;
    width: 84px; height: 84px;
  }
  .space-hero-info { width: 100%; }
  .space-hero-name { font-size: 20px; }
  .space-hero-meta { justify-content: center; }
  .space-hero-actions {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .space-hero-actions--custom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: auto;
    padding: 0;
  }
}

/* Responsive scoped pour le hero SQL Jadida, sans <style> injecté depuis SQL */
@media (max-width: 900px) {
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-media {
    order: -1 !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-video {
    max-width: 360px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero {
    border-radius: 18px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-title {
    font-size: 20px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-logo {
    width: 90px !important;
    height: 90px !important;
  }
  body[data-space="jadida"] .space-hero--custom .jadida-custom-hero-video {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL Group CHO */
@media (max-width: 900px) {
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-media {
    order: -1 !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-visual {
    max-width: 420px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero {
    border-radius: 18px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-title {
    font-size: 21px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-logo {
    width: 96px !important;
    height: 96px !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-space="group-cho"] .space-hero--custom .group-cho-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL Club Sfaxien */
@media (max-width: 900px) {
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-media {
    order: -1 !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-visual {
    max-width: 420px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero {
    border-radius: 18px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-title {
    font-size: 22px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-logo {
    width: 96px !important;
    height: 96px !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-space="club-sfaxien"] .space-hero--custom .club-sfaxien-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL SNBG */
body[data-space="snbg"] .space-hero--custom .space-hero-btn {
  background: #7A0F0B !important;
  border-color: #7A0F0B !important;
  color: #FFFFFF !important;
}

@media (max-width: 900px) {
  body[data-space="snbg"] .space-hero--custom .snbg-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-media {
    order: -1 !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-visual {
    max-width: 420px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="snbg"] .space-hero--custom .snbg-hero {
    border-radius: 18px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-title {
    font-size: 23px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-logo {
    width: 124px !important;
    height: 72px !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-space="snbg"] .space-hero--custom .snbg-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL Céréalis Snacks */
body[data-space="cerealis-snacks"] .space-hero--custom .space-hero-btn {
  background: #FFD447 !important;
  border-color: #FFD447 !important;
  color: #7A1026 !important;
}

@media (max-width: 900px) {
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-media {
    order: -1 !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-visual {
    max-width: 430px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero {
    border-radius: 18px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-title {
    font-size: 23px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-logo {
    width: 136px !important;
    height: 84px !important;
  }
  body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
body[data-space="cerealis-snacks"] .space-hero--custom .cerealis-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL Eau Fourat */
body[data-space="eau-fourat"] .space-hero--custom .space-hero-btn {
  background: #04127D !important;
  border-color: #04127D !important;
  color: #FFFFFF !important;
}

@media (max-width: 900px) {
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-media {
    order: -1 !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-visual {
    max-width: 430px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero {
    border-radius: 18px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-title {
    font-size: 23px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-logo {
    width: 118px !important;
    height: 94px !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-space="eau-fourat"] .space-hero--custom .fourat-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Responsive scoped pour le hero SQL SICAM */
body[data-space="sicam"] .space-hero--custom .space-hero-btn {
  background: #FFF33E !important;
  border-color: #FFF33E !important;
  color: #C61653 !important;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55) !important;
}

@media (max-width: 900px) {
  body[data-space="sicam"] .space-hero--custom .sicam-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 22px 24px 26px !important;
    gap: 18px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-media {
    order: -1 !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-visual {
    max-width: 430px !important;
  }
}

@media (max-width: 560px) {
  body[data-space="sicam"] .space-hero--custom .sicam-hero {
    border-radius: 18px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-band {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-band > span:nth-child(n+4) {
    display: none !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-inner {
    padding: 18px 18px 22px !important;
    gap: 16px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-title {
    font-size: 24px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-logo {
    width: 128px !important;
    height: 78px !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-space="sicam"] .space-hero--custom .sicam-hero-visual {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CHAT WIDGET — theming en C1/C2 (HTML/JS canoniques inchangés)
   Spec body[data-space] .chat-* (0,2,1) bat les rules canoniques (0,1,0).
   ════════════════════════════════════════════════════════════════════════ */

/* Panel (popup flottant) — fond = bg page (C0) */
body[data-space] .chat-panel {
  background: var(--space-bg);
  border-color: var(--space-c2);
  color: var(--space-c2);
}

/* Header */
body[data-space] .chat-header {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .chat-close {
  background: rgba(0,0,0,.10);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .chat-close:hover {
  background: rgba(0,0,0,.20);
}
body[data-space] .chat-sub {
  color: var(--space-c1-solid, var(--space-c1));
  opacity: .85;
}

/* Bubbles */
body[data-space] .chat-bubble.bot,
body[data-space] .chat-bubble.admin {
  background: rgba(0,0,0,.06);
  border-color: var(--space-c2);
  color: var(--space-c2);
}
body[data-space] .chat-bubble.user {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}

/* Form / input — fond aligné sur le panel (C0) */
body[data-space] .chat-form {
  background: var(--space-bg);
  border-top-color: var(--space-c2);
}
body[data-space] .chat-input {
  background: var(--space-bg);
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .chat-input::placeholder {
  color: var(--space-c2);
  opacity: .6;
}
body[data-space] .chat-input:focus {
  border-color: var(--space-c2);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}

/* Send button */
body[data-space] .chat-send-btn {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}

/* Actions guests */
body[data-space] .chat-actions {
  border-top-color: var(--space-c2);
}
body[data-space] .chat-action-btn.primary {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .chat-action-btn.ghost {
  background: transparent;
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .chat-action-btn.ghost:hover {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}

/* Liens sociaux */
body[data-space] .chat-links {
  border-top-color: var(--space-c2);
}
body[data-space] .chat-link {
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .chat-link:hover {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}

/* ════════════════════════════════════════════════════════════════════════
   PEER CHAT WIDGET (.pc-*) — chat user-à-user, theming en C1/C2.
   HTML/JS canoniques inchangés (peer_chat_widget.php non forké).
   ════════════════════════════════════════════════════════════════════════ */

/* Panel principal — fond = bg page (C0) */
body[data-space] .pc-panel {
  background: var(--space-bg);
  color: var(--space-c2);
}

/* Header */
body[data-space] .pc-header {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-header::after { display: none; }
body[data-space] .pc-header-title { color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-header-sub   { color: var(--space-c1-solid, var(--space-c1)); opacity: .7; }
body[data-space] .pc-header-icon {
  background: rgba(0,0,0,.1);
  border-color: rgba(0,0,0,.15);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-close {
  background: rgba(0,0,0,.1);
  border-color: rgba(0,0,0,.15);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-close:hover { background: rgba(0,0,0,.2); }

/* Auth message (guests) */
body[data-space] .pc-auth-msg {
  background: var(--space-bg);
  color: var(--space-c2);
}
body[data-space] .pc-auth-msg h3,
body[data-space] .pc-auth-msg p { color: var(--space-c2); }
body[data-space] .pc-auth-icon-wrap {
  background: rgba(0,0,0,.06);
  color: var(--space-c2);
}
body[data-space] .pc-auth-cta {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  box-shadow: none;
}

/* Contacts sidebar */
body[data-space] .pc-contacts-panel {
  background: var(--space-bg);
  border-right-color: var(--space-c2);
}
body[data-space] .pc-contacts-label { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-search-inner {
  background: var(--space-bg);
  border-color: var(--space-c2);
}
body[data-space] .pc-search-inner:focus-within {
  border-color: var(--space-c2);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}
body[data-space] .pc-search { color: var(--space-c2); }
body[data-space] .pc-search::placeholder { color: var(--space-c2); opacity: .5; }
body[data-space] .pc-search-icon { color: var(--space-c2); }

/* Contact items */
body[data-space] .pc-contact-item:hover { background: rgba(0,0,0,.05); }
body[data-space] .pc-contact-item.active {
  background: var(--space-c2);
}
body[data-space] .pc-contact-item.active::before { background: var(--space-c1); }
body[data-space] .pc-contact-item.active .pc-contact-name,
body[data-space] .pc-contact-item.active .pc-contact-preview {
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-contact-name { color: var(--space-c2); }
body[data-space] .pc-contact-preview { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-contact-avatar { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-contact-avatar[data-ci] { background: var(--space-c2); }
body[data-space] .pc-presence-dot { border-color: var(--space-c1-solid, var(--space-c1)); }

/* Thread / messages — fonds = bg page (C0) */
body[data-space] .pc-thread-header { background: var(--space-bg); border-bottom-color: var(--space-c2); }
body[data-space] .pc-messages-body { background: var(--space-bg); }

/* Compose / input — fonds = bg page (C0) */
body[data-space] .pc-compose,
body[data-space] .pc-compose-toolbar {
  background: var(--space-bg);
  border-top-color: var(--space-c2);
}
body[data-space] .pc-compose-input {
  background: var(--space-bg);
  color: var(--space-c3);
  border-color: var(--space-c3);
}
body[data-space] .pc-compose-input::placeholder { color: var(--space-c3); opacity: .85; }
body[data-space] .pc-compose-input:focus {
  border-color: var(--space-c3);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05);
  background: var(--space-bg);
}
body[data-space] .pc-compose-send {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  box-shadow: none;
}

/* Thread avatar — inversé : fond C1, initiales C2.
   `!important` justifié : peer_chat_widget.js pose un inline
   `style.background = linear-gradient(...)` (spec 1,0,0,0). */
body[data-space] .pc-thread-avatar {
  background: var(--space-c1) !important;
  color: var(--space-c2);
  box-shadow: 0 0 0 2px var(--space-c2), 0 0 0 3.5px var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-empty-icon {
  background: var(--space-c1);
  color: var(--space-c2);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Mes messages (msg.mine = bulle envoyée par moi) — fond C1, contenu C2 */
body[data-space] .pc-msg.mine {
  background: var(--space-c1);
  color: var(--space-c2);
  box-shadow: none;
}

/* Thread header — nom destinataire en C3 (status/back conservés en C2) */
body[data-space] .pc-thread-name { color: var(--space-c3); }
body[data-space] .pc-thread-status { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-thread-back { color: var(--space-c2); }

/* Call buttons (audio + video) — icônes en C3 */
body[data-space] .pc-call-btn {
  background: rgba(0,0,0,.08);
  color: var(--space-c3);
}
body[data-space] .pc-call-btn:hover {
  background: rgba(0,0,0,.18);
  color: var(--space-c3);
}
body[data-space] .pc-call-btn-video {
  background: rgba(0,0,0,.08);
  color: var(--space-c3);
}
body[data-space] .pc-call-btn-video:hover {
  background: rgba(0,0,0,.18);
  color: var(--space-c3);
}

/* Toolbar (emoji, gif, attach) — CTA en C3 */
body[data-space] .pc-tool-btn {
  color: var(--space-c3);
  opacity: .9;
}
body[data-space] .pc-tool-btn:hover {
  background: rgba(0,0,0,.06);
  color: var(--space-c3);
  opacity: 1;
}
body[data-space] .pc-tool-btn.active {
  color: var(--space-c1-solid, var(--space-c1));
  background: var(--space-c2);
}

/* Emoji picker popup */
body[data-space] .pc-emoji-popup {
  background: var(--space-bg);
  border-color: var(--space-c2);
}
body[data-space] .pc-emoji-cats {
  background: var(--space-bg);
  border-bottom-color: var(--space-c2);
}
body[data-space] .pc-emoji-cat-btn {
  color: var(--space-c2);
}
body[data-space] .pc-emoji-cat-btn:hover { background: rgba(0,0,0,.06); }
body[data-space] .pc-emoji-cat-btn.active {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-emoji-grid { background: var(--space-bg); }
body[data-space] .pc-emoji-btn { color: var(--space-c2); }
body[data-space] .pc-emoji-btn:hover { background: rgba(0,0,0,.06); }

/* ════════════════════════════════════════════════════════════════════════
   RÉACTIONS (like / love / wow / etc.) — bsf-react-bar + bsf-react-btn
   ════════════════════════════════════════════════════════════════════════ */

body[data-space] .bsf-react-btn {
  color: var(--space-c3);
  border-color: var(--space-c3);
  opacity: .8;
  background: transparent;
}
body[data-space] .bsf-react-btn:hover {
  background: rgba(0,0,0,.06);
  color: var(--space-c3);
  opacity: 1;
}
body[data-space] .bsf-react-btn.active {
  background: var(--space-c2);
  border-color: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  opacity: 1;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
   PEER CHAT — modal appel vidéo (.pc-rtc-*)
   ════════════════════════════════════════════════════════════════════════ */

body[data-space] .pc-rtc-inner {
  background: var(--space-bg);
  border-color: var(--space-c2);
}
body[data-space] .pc-rtc-status { color: var(--space-c2); }
body[data-space] .pc-rtc-partner { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-rtc-btn {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .pc-rtc-hangup {
  /* hangup garde le rouge urgent canonique */
}

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATES + SPINNERS + MOBILE NAV (défensif).
   ════════════════════════════════════════════════════════════════════════ */

body[data-space] .bsf-empty-state {
  color: var(--space-c2);
  opacity: .8;
}
body[data-space] .bsf-empty-state h3 { color: var(--space-c2); opacity: 1; }

body[data-space] .bsf-spinner {
  color: var(--space-c2);
  opacity: .7;
}
body[data-space] .bsf-spinner::before {
  border-color: rgba(0,0,0,.1);
  border-top-color: var(--space-c2);
}

/* Mobile nav (visibility:hidden mais defensif si future re-affichage) */
body[data-space] .bsf-mobile-nav-item {
  color: var(--space-c2);
  opacity: .65;
}
body[data-space] .bsf-mobile-nav-item.active {
  color: var(--space-c2);
  opacity: 1;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
   POSTS DU FEED — cards, body, actions, comments.
   ════════════════════════════════════════════════════════════════════════ */

/* Post card — bordure C2 1px + coins arrondis (margin assuré par social.css :
   global 14px en mobile/tablet, gap parent 14px en desktop ≥1200). */
body[data-space] #bsf-feed .bsf-post-card {
  border: 1px solid var(--space-c2);
  border-radius: 12px;
}

/* Post header (author, meta) — C3 */
body[data-space] .bsf-post-author strong { color: var(--space-c3); }
body[data-space] .bsf-post-meta { color: var(--space-c3); opacity: .7; }
body[data-space] .bsf-post-cat {
  color: var(--space-c2);
  border-color: var(--space-c2);
}

/* Post content */
body[data-space] .bsf-post-title { color: var(--space-c3); }
body[data-space] .bsf-post-body  { color: var(--space-c3); }
body[data-space] .bsf-mention {
  color: var(--space-c3);
  font-weight: 700;
  text-decoration: underline;
}

/* Post media wrapper */
body[data-space] .bsf-post-media { background: rgba(0,0,0,.05); }

/* Post actions (like, comment, share) — C3 (icones suivent via currentColor) */
body[data-space] .bsf-post-footer { border-top-color: var(--space-c2); }
body[data-space] .bsf-post-action {
  color: var(--space-c3);
  opacity: .75;
}
body[data-space] .bsf-post-action:hover {
  background: rgba(0,0,0,.06);
  color: var(--space-c3);
  opacity: 1;
}
body[data-space] .bsf-post-action.is-active,
body[data-space] .bsf-post-action.liked {
  color: var(--space-c2);
  opacity: 1;
  font-weight: 700;
}

/* Comments zone */
body[data-space] .bsf-comments-zone { border-top-color: var(--space-c2); }
body[data-space] .bsf-comments-empty { color: var(--space-c3); opacity: .65; }
body[data-space] .bsf-comment-body {
  background: rgba(0,0,0,.05);
  color: var(--space-c3);
}
body[data-space] .bsf-comment-body strong { color: var(--space-c3); }
body[data-space] .bsf-comment-meta small { color: var(--space-c3); opacity: .65; }
body[data-space] .bsf-comment-action { color: var(--space-c3); }
body[data-space] .bsf-comment-action.danger { color: var(--space-c3); opacity: .8; }
body[data-space] .bsf-comment-input {
  background: var(--space-c1);
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .bsf-comment-input:focus { border-color: var(--space-c2); }
body[data-space] .bsf-comment-input::placeholder { color: var(--space-c2); opacity: .55; }

/* Post edit form */
body[data-space] .bsf-post-edit {
  background: rgba(0,0,0,.04);
  border-color: var(--space-c2);
}

/* Avatars du feed unifiés en C1/C2 (post + comments).
   `!important` justifié : bsf_avatar_html() pose un inline style="background:{COLOR}"
   par-utilisateur (spec 1,0,0,0), inchangeable sans toucher shared_bsf. */
body[data-space] .bsf-post-card .bsf-avatar,
body[data-space] .bsf-comments-zone .bsf-avatar {
  background: var(--space-c1) !important;
  color: var(--space-c2) !important;
  border: 1.5px solid var(--space-c2);
}

/* ════════════════════════════════════════════════════════════════════════
   DROPDOWNS — menus topbar (profil, lang, notifications). Canon a !important.
   ════════════════════════════════════════════════════════════════════════ */

body[data-space] .bsf-menu {
  background: var(--space-c1) !important;
  border-color: var(--space-c2) !important;
}
body[data-space] .bsf-menu-item {
  color: var(--space-c2) !important;
  background: transparent;
}
body[data-space] .bsf-menu-item:hover {
  background: rgba(0,0,0,.06) !important;
  color: var(--space-c2) !important;
}
body[data-space] .bsf-menu-item.is-active {
  background: var(--space-c2) !important;
  color: var(--space-c1-solid, var(--space-c1)) !important;
}
body[data-space="cerealis-snacks"] .bsf-menu-item.is-active {
  color: #7A1026 !important;
}

/* Notifications */
body[data-space] .bsf-notif-header {
  color: var(--space-c2);
  border-bottom-color: var(--space-c2);
}
body[data-space] .bsf-notif-clear-btn {
  color: var(--space-c2);
  opacity: .85;
}
body[data-space] .bsf-notif-clear-btn:hover { opacity: 1; }
body[data-space] .bsf-notif-item {
  color: var(--space-c2) !important;
}
body[data-space] .bsf-notif-item:hover {
  background: rgba(0,0,0,.06);
}
body[data-space] .bsf-notif-item.unread {
  background: rgba(0,0,0,.04);
}
body[data-space] .bsf-notif-empty {
  color: var(--space-c2);
  opacity: .65;
}
body[data-space] .bsf-notif-badge {
  /* badge garde le rouge canonique #ff3b30 (universel pour signal urgent) */
  box-shadow: 0 0 0 2px var(--space-c1-solid, var(--space-c1));
}

/* ════════════════════════════════════════════════════════════════════════
   SEARCH PAGE (search.php) — theming en C1/C2.
   Couvre la barre de recherche, onglets, headers, badges, boutons.
   ════════════════════════════════════════════════════════════════════════ */

/* Barre de recherche */
body[data-space] .bsf-search-bar input {
  background: var(--space-c1);
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .bsf-search-bar input:focus {
  border-color: var(--space-c2);
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
body[data-space] .bsf-search-bar input::placeholder {
  color: var(--space-c2);
  opacity: .55;
}

/* Onglets filtre */
body[data-space] .bsf-search-tabs { border-bottom-color: var(--space-c2); }
body[data-space] .bsf-tab {
  color: var(--space-c2);
  border-color: var(--space-c2);
  background: transparent;
}
body[data-space] .bsf-tab:hover {
  background: rgba(0,0,0,.06);
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .bsf-tab.active {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  border-color: var(--space-c2);
}

/* Page header */
body[data-space] .bsf-page-header {
  border-bottom-color: var(--space-c2);
}
body[data-space] .bsf-page-header h2 {
  color: var(--space-c2);
}

/* Group cards (titre + badge + meta) */
body[data-space] .bsf-group-card h4 { color: var(--space-c2); }
body[data-space] .bsf-group-badge {
  color: var(--space-c1-solid, var(--space-c1));
  background: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .bsf-group-meta {
  color: var(--space-c2);
  opacity: .7;
}

/* People items */
body[data-space] .bsf-people-item {
  border-bottom-color: var(--space-c2);
}

/* Boutons connect / primary */
body[data-space] .bsf-connect-btn {
  background: transparent;
  border-color: var(--space-c2);
  color: var(--space-c2);
}
body[data-space] .bsf-connect-btn:hover {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .bsf-sbtn-primary {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  box-shadow: none;
}
body[data-space] .bsf-sbtn-primary:hover {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  filter: brightness(.92);
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "VIDÉOS DU CLUB" — latest YouTube posts scoped to the space.
   ════════════════════════════════════════════════════════════════════════ */

.space-club-videos .scv-list {
  display: grid;
  gap: 10px;
}
.space-club-videos .scv-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--space-c2);
  text-decoration: none;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--space-c2) 40%, transparent);
  border-radius: 10px;
  background: rgba(0, 0, 0, .08);
}
.space-club-videos .scv-row:hover {
  background: rgba(0, 0, 0, .14);
}
.space-club-videos .scv-thumb {
  width: 76px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(0, 0, 0, .18);
  border: 1px solid color-mix(in srgb, var(--space-c2) 35%, transparent);
}
.space-club-videos .scv-thumb-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.space-club-videos .scv-thumb-fallback i {
  width: 18px;
  height: 18px;
}
.space-club-videos .scv-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.space-club-videos .scv-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--space-c2);
}
.space-club-videos .scv-date {
  font-size: 10px;
  color: var(--space-c2);
  opacity: .7;
}

/* Day separator + message meta (timestamp) */
body[data-space] .pc-day-sep {
  color: var(--space-c2);
  opacity: .7;
}
body[data-space] .pc-day-sep::before,
body[data-space] .pc-day-sep::after {
  background: var(--space-c2);
  opacity: .3;
}
body[data-space] .pc-msg.mine .pc-msg-meta { color: var(--space-c3); }
body[data-space] .pc-msg.theirs .pc-msg-meta { color: inherit; }

/* GIF picker popup */
body[data-space] .pc-gif-popup {
  background: var(--space-bg);
  border-color: var(--space-c2);
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "PROCHAIN MATCH" (right col)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-next-match .snm-body {
  padding: 8px 14px 14px;
  text-align: center;
}
body[data-space] .space-next-match .snm-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--space-c2);
  opacity: .85;
  margin-bottom: 8px;
  text-transform: capitalize;
}
body[data-space] .space-next-match .snm-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--space-c2);
  margin-bottom: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}
body[data-space] .space-next-match .snm-vs {
  font-weight: 600;
  font-size: 11px;
  opacity: .6;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body[data-space] .space-next-match .snm-league {
  font-size: 11px;
  color: var(--space-c2);
  opacity: .65;
  margin-top: 4px;
}
body[data-space] .space-next-match .snm-derby-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  vertical-align: 1px;
}
body[data-space] .space-next-match.is-derby {
  border-width: 2px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "DERNIERS RÉSULTATS" (right col)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-last-results .slr-list {
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-space] .space-last-results .slr-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--space-c2);
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
body[data-space] .space-last-results .slr-date {
  font-weight: 600;
  opacity: .7;
  font-size: 11px;
}
body[data-space] .space-last-results .slr-opp {
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-space] .space-last-results .slr-score {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
}
body[data-space] .space-last-results .slr-win {
  border-left-color: #22c55e;
}
body[data-space] .space-last-results .slr-loss {
  border-left-color: #ef4444;
}
body[data-space] .space-last-results .slr-draw {
  border-left-color: #94a3b8;
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "TOP CHAMPIONNATS" (right col) — football-data.org via cron 10min
   Layout vertical : date/heure, compétition, équipe1+score, équipe2+score.
   Tout le texte en C2 (lisibilité sur fond C1 du widget).
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-world-matches .swm-list {
  padding: 8px 14px 14px;
  display: flex;
  flex-direction: column;
}
body[data-space] .space-world-matches .swm-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--space-c2);
  color: var(--space-c2);
}
body[data-space] .space-world-matches .swm-row:last-child {
  border-bottom: none;
}
body[data-space] .space-world-matches .swm-when {
  font-size: 11px;
  font-weight: 700;
  color: var(--space-c2);
  opacity: .8;
  letter-spacing: .3px;
  margin-bottom: 2px;
}
body[data-space] .space-world-matches .swm-comp {
  font-size: 11px;
  font-style: italic;
  color: var(--space-c2);
  opacity: .75;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-space] .space-world-matches .swm-team-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--space-c2);
  padding: 2px 0;
}
body[data-space] .space-world-matches .swm-team {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
body[data-space] .space-world-matches .swm-score {
  font-weight: 800;
  font-size: 14px;
  color: var(--space-c2);
  letter-spacing: .5px;
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR GAUCHE : CARTES CROSS-SITES (PC) + BOTTOM NAV (MOBILE)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-cross-sites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-space] .space-cross-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--space-c2);
  opacity: .7;
  margin: 4px 4px 6px;
}
body[data-space] .space-cross-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 16px;
  border-radius: 12px;
  background: var(--space-c1);
  border: 0.5px solid var(--space-c2);
  text-decoration: none;
  color: var(--space-c2);
  transition: transform .15s, background .15s;
}
body[data-space] .space-cross-card:hover {
  transform: translateX(2px);
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .space-cross-card:hover .space-cross-icon i {
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .space-cross-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0,0,0,.15);
  display: inline-flex; align-items: center; justify-content: center;
}
body[data-space] .space-cross-icon i {
  width: 22px; height: 22px;
  color: var(--space-c2);
}
body[data-space] .space-cross-card:hover .space-cross-icon {
  background: rgba(255,255,255,.15);
}
body[data-space] .space-products-card {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
body[data-space] .space-products-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
body[data-space] .space-products-count {
  margin-left: auto;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.16);
  color: var(--space-c2);
  font-size: 12px;
  font-weight: 800;
}
body[data-space] .space-cross-card:hover .space-products-count {
  background: rgba(255,255,255,.16);
  color: var(--space-c1-solid, var(--space-c1));
}
body[data-space] .space-products-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-space] .space-product-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(0,0,0,.10);
}
body[data-space] .space-cross-card:hover .space-product-mini {
  background: rgba(255,255,255,.14);
}
body[data-space] .space-product-mini img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: contain;
  background: rgba(255,255,255,.85);
  flex-shrink: 0;
}
body[data-space] .space-product-mini span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  opacity: .9;
}
body[data-space] .space-cross-text {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 2px;
}
body[data-space] .space-cross-text strong {
  font-size: 16px; font-weight: 700;
}
body[data-space] .space-cross-text small {
  font-size: 12px; opacity: .7;
}

/* Mobile bottom nav (≤720px) */
body[data-space] .space-mobile-bottom {
  display: none;
}
@media (max-width: 720px) {
  body[data-space] .space-mobile-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 950;
    display: flex;
    justify-content: space-around;
    background: var(--space-c1);
    border-top: 1px solid var(--space-c2);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 14px rgba(0,0,0,.25);
  }
  body[data-space] .space-mb-item {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; min-width: 0;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--space-c2);
    font-size: 10px; font-weight: 600;
    transition: opacity .15s;
  }
  body[data-space] .space-mb-item i {
    width: 18px; height: 18px;
    margin-bottom: 2px;
  }
  body[data-space] .space-mb-item:hover {
    opacity: .75;
  }
  /* Pousser le contenu pour que le bottom nav ne couvre pas le footer */
  body[data-space] {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  /* Cacher les cartes desktop sur mobile */
  body[data-space] .space-cross-sites { display: none; }
}
body[data-space] .pc-gif-search-bar { border-bottom-color: var(--space-c2); }
body[data-space] .pc-gif-search-bar input {
  background: rgba(0,0,0,.04);
  color: var(--space-c2);
  border-color: var(--space-c2);
}
body[data-space] .pc-gif-search-bar input::placeholder {
  color: var(--space-c2);
  opacity: .5;
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "L1 TUNISIE · DERNIERS RÉSULTATS" (right col) — Sofascore via cron 30min
   Layout vertical (cohérent avec _space_world_matches) :
   ligne 1 : date · J<round> | ligne 2 : home + score | ligne 3 : away + score
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-l1tn-results .l1r-list {
  padding: 8px 14px 14px;
  display: flex;
  flex-direction: column;
}
body[data-space] .space-l1tn-results .l1r-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--space-c2);
  color: var(--space-c2);
}
body[data-space] .space-l1tn-results .l1r-row:last-child {
  border-bottom: none;
}
body[data-space] .space-l1tn-results .l1r-when {
  font-size: 11px;
  font-weight: 700;
  color: var(--space-c2);
  opacity: .8;
  letter-spacing: .3px;
  margin-bottom: 4px;
}
body[data-space] .space-l1tn-results .l1r-team-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--space-c2);
  padding: 2px 0;
}
body[data-space] .space-l1tn-results .l1r-team {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
body[data-space] .space-l1tn-results .l1r-score {
  font-weight: 800;
  font-size: 14px;
  color: var(--space-c2);
  letter-spacing: .5px;
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
}
body[data-space] .space-l1tn-results .l1r-home-win .l1r-team-away,
body[data-space] .space-l1tn-results .l1r-away-win .l1r-team-home {
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET "L1 TUNISIE · CLASSEMENT" (right col) — Sofascore via cron 30min
   Table compact 5 colonnes : Pos · Équipe · J · +/- · Pts
   La ligne du club courant (fuzzy match name) est mise en évidence (.l1s-self).
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .space-l1tn-standings .l1s-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  color: var(--space-c2);
  font-size: 12px;
}
body[data-space] .space-l1tn-standings .l1s-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .7;
  padding: 6px 4px 4px;
  text-align: center;
  border-bottom: 1px solid var(--space-c2);
}
body[data-space] .space-l1tn-standings .l1s-table th.l1s-team {
  text-align: left;
  padding-left: 12px;
}
body[data-space] .space-l1tn-standings .l1s-table th.l1s-pos {
  width: 24px;
  padding-left: 12px;
}
body[data-space] .space-l1tn-standings .l1s-table td {
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px dashed var(--space-c2);
}
body[data-space] .space-l1tn-standings .l1s-table tr:last-child td {
  border-bottom: none;
}
body[data-space] .space-l1tn-standings .l1s-pos {
  font-weight: 800;
  opacity: .8;
  padding-left: 12px !important;
  text-align: left !important;
  width: 24px;
}
body[data-space] .space-l1tn-standings .l1s-team {
  text-align: left !important;
  padding-left: 12px !important;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
body[data-space] .space-l1tn-standings .l1s-stat {
  font-variant-numeric: tabular-nums;
}
body[data-space] .space-l1tn-standings .l1s-pts {
  font-weight: 800;
  padding-right: 12px !important;
}
body[data-space] .space-l1tn-standings .l1s-pts-h {
  padding-right: 12px !important;
}
body[data-space] .space-l1tn-standings .l1s-self td {
  background: rgba(0, 0, 0, .12);
}
body[data-space] .space-l1tn-standings .l1s-self .l1s-pos,
body[data-space] .space-l1tn-standings .l1s-self .l1s-team,
body[data-space] .space-l1tn-standings .l1s-self .l1s-pts {
  font-weight: 900;
  opacity: 1;
}
body[data-space] .space-l1tn-standings .l1s-self .l1s-team {
  position: relative;
}
body[data-space] .space-l1tn-standings .l1s-self .l1s-team::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--space-c2);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE INLINE WIDGETS — carrousels horizontaux injectés dans le feed
   Source DOM : #space-mobile-widgets-pool (rendu par
   _space_mobile_inline_widgets.php). Cloné en JS par space_mobile_inline.js.
   ════════════════════════════════════════════════════════════════════════ */

#space-mobile-widgets-pool { display: none !important; }

.space-miw-injected {
  display: none; /* invisible en desktop */
  margin: 8px 0;
  padding: 8px 0 10px;
  border-radius: 10px;
  border: 0.5px solid var(--space-c2);
  border-top: 0.5px solid var(--space-c2);
  background: var(--space-c1);
  overflow: hidden;
}

@media (max-width: 720px) {
  .space-miw-injected { display: block; }
}

.space-miw-title {
  margin: 0 12px 6px;
  padding: 0;
  font-size: 11.5px; font-weight: 700;
  color: var(--space-c2);
  display: flex; align-items: center; gap: 5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.space-miw-title i {
  width: 13px; height: 13px;
  flex-shrink: 0;
}

.space-miw-scroll {
  display: flex;
  gap: 7px;
  padding: 2px 12px 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.space-miw-scroll::-webkit-scrollbar { display: none; }

.space-miw-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: rgba(0, 0, 0, .04);
  border-radius: 8px;
  padding: 7px 6px;
  color: var(--space-c2);
}

/* ── Card "personne" — 4 visibles par viewport (~85px) ──────────────── */
.space-miw-card--person {
  width: calc((100vw - 24px - 21px) / 4); /* viewport - 2*padding(12) - 3*gap(7) */
  max-width: 96px;
  min-width: 78px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.space-miw-card--person .space-miw-avatar-wrap {
  display: block; line-height: 0;
}
.space-miw-card--person .space-miw-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.space-miw-card--person .space-miw-avatar--init {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
}
.space-miw-card--person .space-miw-name {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--space-c2);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
.space-miw-card--person .space-miw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--space-c2);
  background: transparent;
  color: var(--space-c2);
  cursor: pointer;
}
.space-miw-card--person .space-miw-btn i {
  width: 11px; height: 11px;
}
.space-miw-card--person .space-miw-btn span { display: none; } /* icone seule en compact */

/* ── Card "standing" — 4 visibles ───────────────────────────────────── */
.space-miw-card--standing {
  width: calc((100vw - 24px - 21px) / 4);
  max-width: 96px;
  min-width: 78px;
  display: flex; flex-direction: column; gap: 2px;
}
.space-miw-card--standing.is-self {
  background: var(--space-c2);
  color: var(--space-c1-solid, var(--space-c1));
  font-weight: 600;
}
.space-miw-card--standing .space-miw-pos {
  font-size: 10px; opacity: .7;
}
.space-miw-card--standing .space-miw-team-name {
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.space-miw-card--standing .space-miw-team-stats {
  display: flex; justify-content: space-between;
  font-size: 10px;
}
.space-miw-card--standing .space-miw-pts {
  font-weight: 700;
}

/* ── Card "match" — 2 visibles (info trop dense pour 4) ─────────────── */
.space-miw-card--match {
  width: calc((100vw - 24px - 7px) / 2);
  max-width: 188px;
  min-width: 150px;
  display: flex; flex-direction: column; gap: 3px;
}
.space-miw-card--match .space-miw-when {
  font-size: 10px; opacity: .7;
}
.space-miw-card--match .space-miw-comp {
  font-size: 10.5px; font-weight: 600; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.space-miw-card--match .space-miw-team-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px;
}
.space-miw-card--match .space-miw-team {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
.space-miw-card--match .space-miw-score {
  font-weight: 700; font-size: 12.5px;
  margin-left: 6px;
}
.space-miw-card--match[data-out="home-win"] .space-miw-team-line:nth-of-type(2) { opacity: .55; }
.space-miw-card--match[data-out="away-win"] .space-miw-team-line:nth-of-type(1) { opacity: .55; }

/* ════════════════════════════════════════════════════════════════════════
   Carrousel injecté HORS space — social.bsf-go.com en mode 'bsf'.
   ────────────────────────────────────────────────────────────────────────
   --space-c1/c2/c1-solid ne sont injectées que sur body[data-space] (palette
   club). En mode BSF elles sont ABSENTES → les var() ci-dessus tombaient sans
   fallback : fond transparent, `border` shorthand invalide → border-style:none
   (plus de bordure), avatars-initiales sans cercle. On fournit ici la palette
   sombre BSF canonique. `body:not([data-space])` ne matche jamais un space →
   zéro régression sur les spaces. Seul le widget "connexions" est injecté ici. */
body:not([data-space]) .space-miw-injected {
  background: var(--bsf-bg-surface);
  /* border complet (pas seulement -color) : le shorthand d'origine
     `border: 0.5px solid var(--space-c2)` est invalidé en mode bsf (var absente)
     → width/style retombent à 0/none. On redéclare donc les 3 composantes. */
  border: 0.5px solid var(--bsf-border-strong);
}
body:not([data-space]) .space-miw-title { color: var(--bsf-text-muted); }
body:not([data-space]) .space-miw-card {
  background: var(--bsf-bg-elevated);
  color: var(--bsf-text-secondary);
}
body:not([data-space]) .space-miw-card--person .space-miw-name { color: var(--bsf-text-primary); }
body:not([data-space]) .space-miw-card--person .space-miw-avatar--init {
  background: var(--bsf-shared-brand-accent);
  color: #fff;
}
body:not([data-space]) .space-miw-card--person .space-miw-btn {
  /* idem conteneur : border shorthand d'origine invalidé en bsf → redéclarer */
  border: 1px solid var(--bsf-shared-brand-accent);
  color: var(--bsf-shared-brand-accent);
}