/* ===========================================================================
 * En-tête de site — briques que le prototype n'avait pas
 *
 * L'en-tête livré ne connaît qu'un visiteur ANONYME : la homepage redirige les
 * connectés, il n'y avait donc ni loupe, ni cloche, ni menu utilisateur. Le
 * reste du site sert trois visiteurs. Ce fichier ajoute ces briques dans le
 * langage de l'en-tête (mêmes variables `--d-*`, même typographie, mêmes
 * panneaux `.e-nav-dropdown`), sans toucher aux règles livrées.
 *
 * PORTÉE : toutes les pages qui rendent l'en-tête, HOMEPAGE COMPRISE — d'où le
 * chargement hors du block `site_header_stylesheet` dans base.html. Sur `/`,
 * `site_header.css` n'est pas servie (les feuilles du prototype font foi),
 * mais ces briques-ci n'existent nulle part ailleurs.
 *
 * ⚠️ RÈGLE DE SPÉCIFICITÉ. Tout sélecteur s'écrit `.vc-header <cible>`, jamais
 * `.vc-header__x` seul. Deux raisons :
 *   • sur `/`, cette feuille est chargée AVANT les feuilles du prototype
 *     (head vs `extra_css`). Une règle à (0,1,0) sur un élément qui porte
 *     aussi `.e-nav-dropdown` perdrait l'égalité de spécificité par l'ordre
 *     source, et les panneaux du menu utilisateur se caleraient à gauche ;
 *   • le test `test_tous_les_selecteurs_sont_scopes` l'exige de toute façon.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Actions — socle commun à la loupe, à la cloche et au menu utilisateur.
 * Aligné sur `.e-hybrid-nav > a` : même hauteur de cible, même graisse, même
 * couleur de survol. C'est ce qui les fait lire comme des voisins des entrées
 * de navigation et non comme des boutons rapportés.
 * ------------------------------------------------------------------------ */
.vc-header .vc-header__action {
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--d-slate);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 780;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease;
}

.vc-header .vc-header__action::-webkit-details-marker { display: none; }

.vc-header .vc-header__action:hover,
.vc-header .vc-header__menu[open] > .vc-header__action {
  color: var(--d-blue-deep);
}

/* Le focus clavier doit rester visible : ces cibles n'ont ni fond ni bordure
 * au repos, un `outline: none` les rendrait introuvables au clavier. */
.vc-header .vc-header__action:focus-visible {
  outline: 2px solid var(--d-blue-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
 * Loupe — traitée comme un champ, pas comme une icône nue : c'est ce qui
 * annonce qu'il y a une recherche derrière. Reprend la boîte du burger
 * (`.e-mobile-menu > summary`) : même bordure, même fond, même rayon.
 * ------------------------------------------------------------------------ */
/* ⚠️ PICTOGRAMME SEUL, À TOUTES LES LARGEURS — ne pas y remettre de libellé.
 *
 * La carte de l'en-tête est PLAFONNÉE à 1280 px : la place disponible ne
 * grandit plus au-delà d'un viewport de ~1320 px. Un libellé « Rechercher » +
 * la pastille ⌘K élargissent la colonne des actions de ~124 px, que la nav paie
 * — mesuré à 1512 px avec libellé : elle réclame 540 px pour 513 px alloués et
 * « Promoteurs » vient buter contre le champ. Une media query `min-width` ne
 * résout rien puisque la largeur utile, elle, est constante.
 *
 * Le sens est porté par l'`aria-label` et par la loupe, universellement lue.
 * Le raccourci ⌘K reste actif (navbar.js) et rappelé dans le pied de l'overlay. */
.vc-header .vc-header__search {
  width: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--d-border);
  border-radius: 10px;
  background: var(--vefa-bg-soft);
  color: var(--d-muted);
}

.vc-header .vc-header__search:hover {
  border-color: var(--d-subtle);
  color: var(--d-slate);
}


/* ---------------------------------------------------------------------------
 * Cloche + pastille de compteur
 * ------------------------------------------------------------------------ */
.vc-header .vc-header__notifs > .vc-header__action {
  position: relative;
  width: 40px;
  min-height: 40px;
  justify-content: center;
  border-radius: 10px;
  font-size: 15px;
}

.vc-header .vc-header__notifs > .vc-header__action:hover {
  background: rgba(52, 152, 219, .08);
}

.vc-header .vc-header__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  padding: 0 4px;
  display: inline-block;
  border-radius: 999px;
  background: var(--d-orange);
  color: var(--vefa-text-on-primary);
  font-size: 10px;
  font-weight: 850;
  line-height: 17px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Menu utilisateur
 * ------------------------------------------------------------------------ */
.vc-header .vc-header__menu {
  position: relative;
}

.vc-header .vc-header__avatar-trigger {
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  background: var(--vefa-bg-soft);
  border: 1px solid var(--d-border);
}

.vc-header .vc-header__avatar {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.vc-header .vc-header__username {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-header .vc-header__caret {
  color: var(--d-subtle);
  font-size: 14px;
  transition: transform 150ms ease;
}

.vc-header .vc-header__menu[open] .vc-header__caret {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Panneaux — reprennent `.e-nav-dropdown` (livré) et ne corrigent que
 * l'ancrage : les menus de navigation s'ouvrent depuis la gauche, ceux des
 * actions depuis la droite, sinon ils sortent de l'écran.
 * ------------------------------------------------------------------------ */
.vc-header .vc-header__panel {
  left: auto;
  right: -6px;
  width: 292px;
}

.vc-header .vc-header__panel--notifs {
  width: 340px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 0;
}

/* Le formulaire de déconnexion doit se lire comme les liens voisins : c'est un
 * `<form>` uniquement parce qu'une déconnexion en GET serait déclenchable par
 * un préchargement de lien. */
.vc-header .vc-header__logout {
  margin: 5px 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--d-border);
}

.vc-header .vc-header__logout button {
  width: 100%;
  padding: 11px 12px;
  display: block;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--d-slate);
  font-family: var(--ui);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.vc-header .vc-header__logout button:hover {
  background: rgba(52, 152, 219, .08);
}

.vc-header .vc-header__logout b {
  font-size: 13px;
}

/* Badge DM (alimenté par `dm_badge.js`, qui ne pose que le texte). */
.vc-header .dm-unread-badge {
  margin-left: 6px;
  padding: 0 6px;
  display: inline-block;
  border-radius: 999px;
  background: var(--d-orange);
  color: var(--vefa-text-on-primary);
  font-size: 10px;
  font-weight: 850;
  line-height: 16px;
}

/* ---------------------------------------------------------------------------
 * Contenu du panneau de notifications
 *
 * Rendu par `partials/notifications_dropdown_content.html`, inchangé : ses
 * classes `.notifications-*` étaient stylées par `navbar.css`. On les reprend
 * ICI, scopées à l'en-tête — c'est ce qui permet à `navbar.css` de mourir sans
 * emporter le panneau avec elle.
 * ------------------------------------------------------------------------ */
.vc-header .notifications-loading {
  padding: 26px;
  color: var(--d-subtle);
  text-align: center;
}

.vc-header .notifications-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--d-border);
  color: var(--d-slate);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.vc-header .notifications-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vc-header .notifications-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--d-border-subtle, #f1f5f9);
}

.vc-header .notifications-item:last-child { border-bottom: 0; }

.vc-header .notifications-item--unread { background: rgba(255, 64, 0, .045); }

.vc-header .notifications-item--link { padding: 0; }

.vc-header .notifications-item-link {
  padding: 11px 14px;
  display: block;
  transition: background 150ms ease;
}

.vc-header .notifications-item-link:hover { background: rgba(52, 152, 219, .08); }

.vc-header .notifications-item-title {
  color: var(--d-slate);
  font-size: 13px;
  font-weight: 800;
}

.vc-header .notifications-item-message {
  margin-top: 2px;
  color: var(--d-muted);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.35;
}

.vc-header .notifications-item-meta {
  margin-top: 3px;
  color: var(--d-subtle);
  font-size: 10px;
  font-weight: 600;
}

.vc-header .notifications-empty {
  padding: 26px 14px;
  color: var(--d-muted);
  font-size: 12px;
  text-align: center;
}

.vc-header .notifications-footer {
  padding: 9px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--d-border);
}

.vc-header .notifications-mark-all,
.vc-header .notifications-preferences {
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--d-blue-deep);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.vc-header .notifications-mark-all:hover,
.vc-header .notifications-preferences:hover {
  background: rgba(52, 152, 219, .08);
}

/* ---------------------------------------------------------------------------
 * Responsive — mêmes paliers que l'en-tête livré (1180 px, 560 px).
 *
 * À 1180 px la nav bascule dans le burger : les actions doivent se réduire au
 * pictogramme, sinon marque + loupe libellée + nom d'utilisateur + burger ne
 * tiennent plus sur la ligne.
 * ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  /* La nav bascule dans le burger à ce palier : le nom d'utilisateur cède la
   * place, l'avatar suffit à identifier le compte. */
  .vc-header .vc-header__username,
  .vc-header .vc-header__caret { display: none; }

  .vc-header .vc-header__avatar-trigger { padding: 3px; }
}

@media (max-width: 560px) {
  /* ⚠️ La loupe RESTE visible sous 560 px POUR UN ANONYME. Elle y a été masquée
   * un temps, au motif que la recherche restait atteignable depuis le burger :
   * le résultat était une barre mobile réduite à la marque et au burger, alors
   * que l'ancienne navbar y offrait trois actions directes. Un point d'entrée
   * rangé dans un menu n'en est plus un.
   *
   * Elle disparaît en revanche pour un CONNECTÉ : il a une action de plus
   * (cloche + avatar), et loupe + cloche + avatar + burger débordent la carte
   * de 5 px à 390 px — mesuré. Ce n'est pas une perte pour lui : la barre de
   * navigation du bas (`mobile_bottom_nav.html`, connectés uniquement) porte
   * déjà une entrée « Rechercher », et le burger aussi. L'anonyme, lui, n'a ni
   * l'une ni l'autre. */
  .vc-header.vc-header--auth .vc-header__search { display: none; }

  .vc-header .vc-header__panel {
    right: -1px;
    width: min(340px, calc(100vw - 28px));
  }

  .vc-header .vc-header__panel--notifs {
    width: min(340px, calc(100vw - 28px));
  }
}