/* ============================================
   SIDEBAR + TOPBAR ÉDITORIAL — Phase 2 design refonte
   Surcharge progressive du sidebar/topbar existants via les classes en place.
   La structure HTML actuelle reste intacte → zéro risque de régression.

   Stratégie:
   - On utilise un sélecteur :root[data-theme] pour cibler uniquement quand
     le thème éditorial est actif (rétro-compat parfaite avant Phase 0).
   - On exploite ::before pour la barre verticale d'active state.
   - Sidebar adaptative light/dark selon le thème actif.
   ============================================ */

/* ---- Sidebar dimensions & base ─────────────────────────── */
:root { --sidebar-width: 248px; }

.sidebar {
  background: var(--sidebar) !important;
  color: var(--sidebar-ink) !important;
  border-right: 1px solid color-mix(in srgb, var(--sidebar-ink) 8%, transparent);
  padding: 0 !important; /* nous-mêmes la padding interne */
  display: flex;
  flex-direction: column;
}

/* Detect "dark sidebar" via the sidebar-ink luminance.
   For our 3 themes: hotel = light sidebar, noir + salon = dark sidebar. */
:root[data-theme="noir"] .sidebar,
:root[data-theme="salon"] .sidebar {
  border-right-color: rgba(0, 0, 0, 0.3);
}

/* ---- Header (logo + brand) ──────────────────────────────── */
.sidebar-header {
  padding: 32px 28px 24px !important;
  border-bottom: none !important;
  min-height: auto !important;
  justify-content: flex-start !important;
}

/* Affiche le logo officiel Nelysio (SVG) dans la sidebar.
   Le ::before "W" historique est désactivé — on utilise le vrai monogramme.
   Pour conserver le rendu ancien type "monogramme cerclé", remplacer
   nelysio-logo.svg par un SVG circulaire. */
.sidebar .logo-container {
  gap: 14px;
  position: relative;
}
.sidebar .logo-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Brand name : aligné sur la charte Nelysio — caps en serif, large spacing.
   Reprend l'esprit du logo officiel (NELYSIO en capitales spacées). */
.sidebar .brand-name {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sidebar-ink) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  position: relative;
}
/* Colonne texte : nom + baseline empilés à droite du logo. */
.sidebar .brand-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Baseline personnalisable (#brand-tagline), pilotée depuis l'admin.
   Vide → l'attribut [hidden] la masque. Reprend le style spaced-caps fin. */
.sidebar .brand-tagline {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sidebar-ink) 55%, transparent);
  line-height: 1.3;
  max-width: 168px;
}
.sidebar .brand-tagline[hidden] { display: none; }

/* ---- Search box (Ctrl+K style) ──────────────────────────── */
.sidebar .nav-search-btn,
.sidebar .nav-search {
  margin: 0 20px 18px !important;
  padding: 10px 12px !important;
  background: color-mix(in srgb, var(--sidebar-ink) 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sidebar-ink) 10%, transparent) !important;
  border-radius: 2px !important;
  color: color-mix(in srgb, var(--sidebar-ink) 60%, transparent) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.sidebar .nav-search-btn:hover {
  border-color: color-mix(in srgb, var(--sidebar-ink) 20%, transparent) !important;
}
.sidebar .nav-search-btn kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--sidebar-ink) 10%, transparent);
  border-radius: 2px;
  background: transparent;
  color: inherit;
}

/* ---- Nav list (active state with vertical bar) ─────────── */
.sidebar .nav-list {
  list-style: none;
  padding: 0 12px !important;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sidebar .nav-link {
  padding: 10px 16px !important;
  margin: 0 0 2px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: color-mix(in srgb, var(--sidebar-ink) 75%, transparent) !important;
  border-radius: 2px !important;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent !important;
}

.sidebar .nav-link:hover {
  background: color-mix(in srgb, var(--sidebar-ink) 6%, transparent) !important;
  color: var(--sidebar-ink) !important;
}

.sidebar .nav-link.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--sidebar-ink) !important;
  font-weight: 500 !important;
}

/* Barre verticale 2×18px accent à gauche de l'item actif */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--accent);
}

.sidebar .nav-link.active .nav-icon {
  color: var(--accent) !important;
}

.sidebar .nav-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--sidebar-ink) 55%, transparent);
  stroke-width: 1.4 !important;
}

/* ---- Sidebar footer (user account block) ───────────────── */
.sidebar-footer {
  margin: 0 20px !important;
  padding: 14px 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--sidebar-ink) 10%, transparent) !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hide the existing account/logout buttons if they collide
   (the new compact view lives entirely in #sidebar-account innerHTML) */
.sidebar-footer .btn-logout {
  width: 28px;
  height: 28px;
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
  color: color-mix(in srgb, var(--sidebar-ink) 55%, transparent) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-footer .btn-logout span { display: none; }
.sidebar-footer .btn-logout:hover {
  color: var(--sidebar-ink) !important;
  background: color-mix(in srgb, var(--sidebar-ink) 6%, transparent) !important;
}
.sidebar-footer .btn-logout svg { width: 14px; height: 14px; }

/* ─── TOPBAR (mobile + page header) ────────────────────────────────── */

.mobile-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
}

.mobile-header .page-title {
  font-family: var(--serif) !important;
  font-size: var(--text-lg) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}

.menu-toggle, .notif-toggle {
  color: var(--ink-soft) !important;
}
.menu-toggle:hover, .notif-toggle:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

/* ─── Section header pattern (titre éditorial "split") ─────────────── */
/* Applied automatically to existing .section-header / .section-title in
   modules. Override is purely visual — markup stays. */
.section-header { padding-bottom: var(--space-2); }
.section-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.625rem, 3.5vw, 2.5rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.section-subtitle {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: var(--text-base) !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}

/* ─── Buttons in editorial style (subtle promotion) ────────────────── */
:root[data-theme] .btn-primary {
  border-radius: 2px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600;
}
:root[data-theme] .btn-secondary {
  border-radius: 2px !important;
}

/* ─── Mobile drawer support ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }
  .sidebar.open { transform: translateX(0); }
}