/* ── Nom de l'espace dans l'en-tête (Sprint 1) ────────────────────────────
   Le libellé en haut à gauche porte le nom du compte utilisé (voir renderHeaderEspace,
   espaces.js). Sur mobile, pour les forfaits multi-espaces, il devient le sélecteur de compte ;
   sur desktop il reste un simple libellé, la sidebar ayant déjà son propre sélecteur. */

.header > div:first-child { min-width: 0; flex: 1 1 auto; }
.header-logo {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: 0.01em;
  font-size: 18px;
}
.header-date { white-space: nowrap; }
.header-espace-wrap { position: relative; overflow: visible; }
.header-espace-btn {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  background: none; border: 0; padding: 2px 6px 2px 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.header-espace-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-espace-chev { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.6; }

/* Menu : les styles .espace-menu de layout-desktop.css ne s'appliquent qu'au-dessus de 1024px. */
.header-espace-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 200px; max-width: min(280px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid rgba(var(--text-rgb),0.12);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  padding: 4px; z-index: 200;
  font-family: var(--font-body, inherit); letter-spacing: normal;
}
.header-espace-menu.hidden { display: none; }
.header-espace-menu .espace-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  padding: 10px 10px; border-radius: 7px; text-align: left;
}
.header-espace-menu .espace-menu-item.active { font-weight: 700; }
.header-espace-menu .espace-menu-check { width: 12px; flex: 0 0 auto; color: var(--accent); font-size: 12px; }
.header-espace-menu .espace-menu-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-espace-menu .espace-menu-new {
  border-top: 1px solid rgba(var(--text-rgb),0.1);
  margin-top: 4px; padding-top: 12px;
  color: rgba(var(--text-rgb),0.6);
}

@media (min-width: 1024px) {
  .header > div:first-child { flex: 0 1 auto; }
  .header-espace-btn { pointer-events: none; cursor: default; }
  .header-espace-chev, .header-espace-menu { display: none; }
}