/* ============================================================================
   shared_bsf/static/css/chrome.css — PROPRIÉTAIRE UNIQUE du chrome réseau BSF
   Posé le 2026-09-17 (GO Walid) — audit : /home/ubuntu/AUDIT_CHROME_2026_09_17.md

   POURQUOI CE FICHIER
   Avant lui, les composants du chrome (.bsf-eco-*, .adm-rc-*) n'appartenaient à
   AUCUNE feuille : ils étaient stylés par des <style> inline dans les gabarits PHP,
   qui lisaient les jetons --s-card / --s-text / --s-muted. Or ces jetons appartiennent
   au SITE HÔTE et sont redéfinis par 4 feuilles concurrentes : la carte de navigation
   prenait donc 4 couleurs différentes selon le site (jusqu'au blanc sur bsf-tunisie).

   RÈGLE (R-102, et ce fichier en est l'application au chrome)
   Le chrome ne lit QUE ses invariants --s-nav-* (eux-mêmes dérivés de --bsf-shared-*,
   définis une seule fois dans tokens.css). JAMAIS --s-card / --s-text / --s-muted,
   qui varient d'un site à l'autre. Toute règle ajoutée ici doit respecter cela.

   CHARGEMENT : en DERNIER, après la feuille de chrome du site (social.css ou
   portal_social_shell.css), afin de gagner la cascade à spécificité égale.
   ============================================================================ */

/* ── Invariants du chrome ───────────────────────────────────────────────────
   Repli défensif : si aucune feuille hôte n'a défini --s-nav-*, le chrome garde
   malgré tout sa palette. Les valeurs sont celles de tokens.css (--bsf-shared-*). */
:root {
  --bsf-chrome-bg:     var(--s-nav-bg,     var(--bsf-shared-bg, #1E3A5F));
  --bsf-chrome-border: var(--s-nav-border, transparent);
  --bsf-chrome-text:   var(--bsf-shared-text, #FFFFFF);
  --bsf-chrome-muted:  var(--s-nav-muted,  var(--bsf-shared-text-muted, rgba(255,255,255,.75)));
  --bsf-chrome-accent: var(--s-nav-accent, var(--bsf-shared-mandarine, #E8762F));
  --bsf-chrome-hover:  var(--s-nav-hover,  rgba(255,255,255,.08));
  --bsf-chrome-hr:     var(--s-nav-hr,     rgba(255,255,255,.12));
}

/* ── Colonne gauche : cartes de navigation (ex-inline ecosystem_sidenav.php) ── */
.bsf-eco-side { display: flex; flex-direction: column; gap: 10px; }

.bsf-eco-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 13px;
  background: var(--bsf-chrome-bg);
  border: 1px solid var(--bsf-chrome-border);
  color: var(--bsf-chrome-text);
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bsf-eco-card:hover { transform: translateX(2px); border-color: var(--bsf-chrome-accent); }
.bsf-eco-card.is-current {
  border-color: var(--bsf-chrome-accent);
  box-shadow: inset 3px 0 0 var(--bsf-chrome-accent);
}

/* L'icône garde la couleur de marque de la destination (--eco-c, posée en inline
   par le gabarit) : c'est une identité de destination, pas une couleur d'hôte. */
.bsf-eco-icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--eco-c, var(--bsf-chrome-accent)) 14%, transparent);
  color: var(--eco-c, var(--bsf-chrome-accent));
}
.bsf-eco-icon i, .bsf-eco-icon svg { width: 18px; height: 18px; }

.bsf-eco-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bsf-eco-text strong {
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
  color: var(--bsf-chrome-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsf-eco-text small {
  font-size: 11.5px; line-height: 1.3;
  color: var(--bsf-chrome-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Colonne droite : lignes des widgets (ex-inline widgets/right/*.php) ──────
   Le FOND de .bsf-card était déjà un invariant ; le TEXTE ne l'était pas : les noms
   lisaient --s-text et devenaient illisibles sur les hôtes à palette claire. */
.bsf-right-col .adm-rc-name,
.bsf-right-col .adm-rc-row { color: var(--bsf-chrome-text); }
.bsf-right-col .adm-rc-sub { color: var(--bsf-chrome-muted); }
.bsf-right-col .adm-rc-row + .adm-rc-row { border-top-color: var(--bsf-chrome-hr); }
.bsf-right-col .adm-rc-row:hover { background: var(--bsf-chrome-hover); }

/* ── Composants émis par le chrome mais absents de portal_social_shell.css ──── */
.bsf-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700;
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .5px;
  user-select: none; cursor: default;
}
.bsf-right-col .bsf-widget h3,
.bsf-right-col .bsf-widget-title {
  font-size: 11px; font-weight: 700; margin-bottom: 14px;
  color: var(--bsf-chrome-accent);
  text-transform: uppercase; letter-spacing: .7px;
}
.bsf-right-col .adm-rc-card .bsf-widget-title { font-size: 13px; margin: 0 0 10px; }

@media (max-width: 767px) {
  .bsf-right-col .bsf-widget h3 { margin-bottom: 10px; }
}