/* core/header.css

   Deux en-têtes, deux logiques.

   Le site public (avant connexion) garde son en-tête horizontal historique :
   une rangée qui se replie en trois modes (plein, compact, serré) selon ce
   qui tient, mesuré par core/header.js. Il n'est pas concerné par les
   maquettes de tableaux de bord, donc pas touché par ce changement.

   L'application connectée (après login) prend la barre latérale des
   maquettes (need-academy-dashboards.html) à la place de son ancien en-tête
   horizontal. Sous 960 px elle devient un tiroir : cachée par défaut, ouverte
   par le bouton menu de la barre du haut, refermée par le fond assombri, la
   touche Échap, ou un clic sur un lien.

   Les deux partagent la bascule de thème, le menu de profil et les boutons
   icône génériques, qui n'ont pas changé de forme.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-2) var(--gutter);
}

/* Le site public partage sa largeur avec la page : sa rangée reste bornée et
   centrée, comme le contenu en dessous. */
.site-header-inner--public {
  gap: var(--s-5);
  min-height: 64px;
  max-width: var(--w-content);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text);
}

/* Logo : l'écusson, à la place de l'ancien monogramme « NA ». Fond transparent
   et intérieur blanc, donc lisible sur les deux thèmes sans variante. La
   hauteur est fixée et la largeur suit, pour garder les proportions. */
.logo-mark {
  display: block;
  height: 44px;
  width: auto;
  flex: 0 0 auto;
}

.brand-name { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  margin-left: auto;
}

.site-actions .btn { white-space: nowrap; }

/* ---------- bascule de thème, boutons icône, menu profil : communs ---------- */

.theme-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--r-sm);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: var(--fs-4);
  padding: 0;
  flex: 0 0 auto;
}

.theme-btn:hover { color: var(--text); border-color: var(--primary); }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-4);
  padding: 0;
  flex: 0 0 auto;
}

.icon-btn:hover { color: var(--text); background: var(--surface-2); }

.profile { position: relative; }

.profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 4px 8px 4px 4px;
  font: inherit;
  font-size: var(--fs-3);
  color: var(--muted);
  cursor: pointer;
  min-height: 40px;
}

.profile-btn:hover { background: var(--surface-2); color: var(--text); }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: var(--fs-1); font-weight: 600;
  color: var(--text);
}

.profile-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 4px;
  box-shadow: var(--shadow-card);
  z-index: 40;
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-3);
  color: var(--text);
  cursor: pointer;
}

.menu-item:hover { background: var(--surface-2); }

.profile-caret .icon { width: 1em; height: 1em; color: var(--muted); }

/* =========================================================
   Site public : navigation horizontale, pliable en trois modes
   ========================================================= */

.site-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.site-nav button {
  background: none;
  border: none;
  border-radius: var(--r-sm);
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-3);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.site-nav button:hover { color: var(--text); background: var(--surface-2); }

.site-nav button.on { color: var(--text); background: var(--surface-2); font-weight: 500; }

:root[data-theme="light"] .site-nav button.on { color: var(--primary); font-weight: 600; }

.menu-toggle,
.site-nav-extra { display: none; }

.menu-toggle {
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

/* Modes compact et serré : la navigation devient un panneau sous l'en-tête.
   Il se place par rapport à l'en-tête lui-même (top: 100%), pas par rapport à
   une hauteur écrite à la main. */

.site-header:not([data-mode="full"]) .menu-toggle { display: inline-flex; }

.site-header:not([data-mode="full"]) .profile-name { display: none; }

.site-header:not([data-mode="full"]) .site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-menu);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-2) var(--gutter) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header:not([data-mode="full"]) .site-nav.open { display: flex; }

.site-header:not([data-mode="full"]) .site-nav button {
  text-align: left;
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--fs-4);
}

.site-header[data-mode="tight"] .hide-when-tight,
.site-header[data-mode="tight"] .brand-name { display: none; }

.site-header[data-mode="tight"] .site-nav-extra { display: block; }

.site-header[data-mode="tight"] .site-nav-extra:not(.site-nav-extra + .site-nav-extra) {
  margin-top: var(--s-2);
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.menu-toggle-icon, .profile-caret { display: inline-flex; }

/* =========================================================
   Application connectée : barre latérale
   ========================================================= */

.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100dvh;
}

.sidebar {
  grid-column: 1;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s-5) var(--s-3);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  z-index: var(--z-menu);
}

.shell-content { grid-column: 2; min-width: 0; }

.sidebar .brand { padding: 0 var(--s-2) var(--s-5); }

.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  min-height: 40px;
  padding: 9px 10px;
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.side-nav button:hover { color: var(--text); background: var(--surface-2); }

.side-nav button.on { background: var(--primary-tint); color: var(--primary-strong); font-weight: 600; }

:root:not([data-theme="light"]) .side-nav button.on { color: var(--primary-strong); }

.brand-name-mobile { display: none; align-items: center; gap: 8px; font-size: var(--fs-4); font-weight: 700; }

.brand-name-mobile .logo-mark { height: 34px; }

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 10, 22, .55);
  border: none;
  padding: 0;
  z-index: calc(var(--z-menu) - 1);
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-card);
  }

  .sidebar.open { transform: translateX(0); }

  .shell-content { grid-column: 1; }

  .sidebar-toggle { display: inline-flex; }

  .brand-name-mobile { display: inline-flex; }

  body.nav-open .sidebar-backdrop { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---------- cloche de notifications ---------- */

.bell { position: relative; }
.bell-btn { position: relative; }
.bell-btn .icon { width: 22px; height: 22px; }

.bell-count {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.bell-panel {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, 75vh);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  z-index: 45;
}

.bell-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.bell-title { font-weight: 650; font-size: var(--fs-4); }
.bell-head .btn-text { font-size: var(--fs-2); }

.bell-empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-size: var(--fs-3); }

.bell-list { list-style: none; margin: 0; padding: 4px; }

.bell-item {
  display: flex; gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0; border-radius: var(--r-sm);
  background: none;
  font: inherit; color: var(--text);
  text-align: left;
  cursor: pointer;
}
.bell-item:hover { background: var(--surface-2); }
.bell-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.bell-dot { width: 8px; height: 8px; margin-top: 7px; flex: none; border-radius: 50%; background: transparent; }
.bell-item.is-unread .bell-dot { background: var(--primary); }

.bell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-item-title { font-size: var(--fs-3); font-weight: 500; line-height: 1.35; }
.bell-item.is-unread .bell-item-title { font-weight: 650; }
.bell-item-body { font-size: var(--fs-2); color: var(--muted); line-height: 1.4; }
.bell-item-time { font-size: var(--fs-1); color: var(--muted); }

.bell-foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-2);
  color: var(--muted);
  cursor: pointer;
}
.bell-foot input { width: auto; accent-color: var(--primary); }

/* Petit écran : le panneau prend la largeur de l'écran, sous l'en-tête. */
@media (max-width: 640px) {
  .bell-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .brand-name-mobile { white-space: nowrap; }
}