/* ═══════════════════════════════════════════════════════════════════════════
   Assets/CSS/nexion-quick.css — Recherche du site et cloche de notifications.

   Fichier séparé de style.css parce que ces deux widgets sont montés dans
   TROIS gabarits distincts (site public, panel client, panel staff) qui ne
   chargent pas tous la même feuille. Les y écrire trois fois garantirait qu'ils
   finissent par diverger.

   Tout passe par les variables de thème : les widgets suivent Nexion, Clair et
   Sombre sans une seule couleur en dur — à l'exception du flou de la modale,
   dont l'opacité doit s'adapter au fond, traité plus bas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   L'ATTRIBUT `hidden` DOIT L'EMPORTER.

   C'est le défaut le plus coûteux de ce fichier, et il mérite d'être expliqué :
   `hidden` ne fait rien de plus que poser `display: none` dans la feuille de
   style DU NAVIGATEUR, dont la spécificité est nulle. La moindre règle d'auteur
   qui déclare un `display` la bat.

   Or `.nx-qs-overlay` et `.nx-nb-panel` déclarent tous deux `display: flex`
   pour leur mise en page. Résultat : le script mettait bien `hidden` à vrai —
   la propriété était correcte — mais les panneaux restaient AFFICHÉS. La
   recherche ne pouvait plus être fermée, et la boîte de notifications restait
   ouverte en permanence.

   Ces deux règles rétablissent l'ordre attendu. Elles sont placées EN TÊTE du
   fichier pour être lues avant tout le reste : la prochaine personne qui
   ajoutera un `display` à l'un de ces éléments verra d'abord pourquoi il ne
   faut pas s'en inquiéter.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-qs-overlay[hidden],
.nx-nb-panel[hidden] { display: none !important; }

/* ── Bouton de recherche dans une barre ─────────────────────────────────── */
.nx-qs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-strong);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.nx-qs-trigger:hover,
.nx-qs-trigger:focus-visible {
  border-color: var(--accent);
  color: var(--text-color);
  outline: none;
}
.nx-qs-trigger svg { flex-shrink: 0; }
.nx-qs-trigger kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  line-height: 1.3;
  opacity: 0.75;
}
/* Dans une barre de navigation étroite, seul l'icône reste. */
@media (max-width: 1100px) {
  .nx-qs-trigger .nx-qs-trigger-label,
  .nx-qs-trigger kbd { display: none; }
  .nx-qs-trigger { padding: 0.42rem 0.55rem; }
}

/* ── Modale ─────────────────────────────────────────────────────────────── */
.nx-qs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 12vh, 9rem) 1rem 2rem;
  /* Verre dépoli : le fond du site reste lisible derrière, atténué. Le
     `background` est indispensable — un `backdrop-filter` seul ne suffit pas à
     détacher le panneau sur un fond clair. */
  background: color-mix(in srgb, var(--bg-color, #0b0f14) 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  animation: nx-qs-fade 160ms ease both;
}
@keyframes nx-qs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Le fond de page ne défile plus derrière la modale : sans cela, la molette
   fait glisser la page sous le panneau, ce qui donne l'impression que la
   modale bouge. */
body.nx-qs-open { overflow: hidden; }

.nx-qs-panel {
  width: min(640px, 100%);
  max-height: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 16px;
  /* Le panneau est lui-même translucide : c'est ce qui fait le verre. Une
     surface opaque au-dessus d'un flou donne un simple carré posé sur une
     photo floue, pas du verre. */
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.65),
              inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  animation: nx-qs-rise 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nx-qs-rise {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.nx-qs-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.nx-qs-field svg { color: var(--text-muted); flex-shrink: 0; }
.nx-qs-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: var(--text-color);
  font: inherit;
  font-size: 1rem;
}
.nx-qs-field input::-webkit-search-cancel-button { display: none; }
.nx-qs-field kbd {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.1rem 0.38rem;
}

.nx-qs-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem 0;
}
.nx-qs-group {
  position: sticky;
  top: 0;
  padding: 0.45rem 1.1rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nx-qs-item {
  display: block;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  color: var(--text-color);
  border-left: 2px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nx-qs-item:hover,
.nx-qs-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-left-color: var(--accent);
}
.nx-qs-item-title { display: block; font-size: 0.92rem; font-weight: 600; }
.nx-qs-item-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-qs-note {
  padding: 0.5rem 1.1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.nx-qs-foot {
  display: flex;
  gap: 1.1rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.nx-qs-foot kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.02rem 0.3rem;
  margin-right: 0.15rem;
}
@media (max-width: 620px) { .nx-qs-foot { display: none; } }

/* ── Cloche ─────────────────────────────────────────────────────────────── */
.nx-nb { position: relative; display: inline-flex; }

.nx-nb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.nx-nb-btn:hover,
.nx-nb-btn:focus-visible { border-color: var(--accent); color: var(--text-color); outline: none; }

/* Le point ne dit pas COMBIEN, seulement QU'IL Y EN A : c'est ce qui a été
   demandé, et c'est aussi ce qui reste lisible à cette taille. Le compte exact
   est dans le panneau. */
.nx-nb-dot {
  position: absolute;
  top: 0.3rem;
  right: 0.32rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #ef4444;
  /* Anneau de la couleur du fond : détache le point du tracé de la cloche. */
  box-shadow: 0 0 0 2px var(--surface-strong);
}

/* Le panneau est DÉPLACÉ DANS `document.body` à la première ouverture, puis
   positionné en coordonnées d'écran par le script (voir placer()). Laissé dans
   la barre latérale, il restait prisonnier du contexte d'empilement de
   celle-ci : il débordait au-dessus de la barre mais passait sous le contenu
   de la page, quel que soit son z-index.

   `position: fixed` est donc posé ici comme valeur de départ, et le script
   fournit `top` / `left` / `max-height`. */
.nx-nb-panel {
  position: fixed;
  top: 0;
  left: 0;
  /* Au-dessus de tout : barres latérales (100-200), voile du chargeur (9000),
     modales du site (10000). En dessous de la seule alerte de développement
     (999999), qui doit rester visible par-dessus quoi que ce soit. */
  z-index: 99995;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(60vh, 26rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}
/* Le recalage horizontal est fait par le script, qui connaît la position réelle
   du bouton à l'écran : une règle CSS ne peut pas savoir si la barre est à
   gauche ou à droite, ni si le panneau tiendrait dans la fenêtre. */

.nx-nb-head {
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}
.nx-nb-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.nx-nb-empty { padding: 1.5rem 1rem; text-align: center; font-size: 0.83rem; color: var(--text-muted); }

.nx-nb-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 130ms ease, opacity 130ms ease;
}
.nx-nb-item:last-child { border-bottom: none; }
.nx-nb-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Marque la ligne pendant l'aller-retour serveur : sans ce retour visuel, un
   clic sur une connexion lente semble n'avoir rien fait, et on reclique. */
.nx-nb-item.is-going { opacity: 0.45; pointer-events: none; }

.nx-nb-icon { font-size: 1rem; line-height: 1.35; flex-shrink: 0; }
.nx-nb-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nx-nb-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  overflow-wrap: anywhere;
}
.nx-nb-open:hover .nx-nb-title { color: var(--accent); }
.nx-nb-date { display: block; margin-top: 0.15rem; font-size: 0.73rem; color: var(--text-muted); }

.nx-nb-del {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease, background-color 130ms ease;
}
.nx-nb-del:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.09);
}

.nx-nb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border-color);
}
.nx-nb-all {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}
.nx-nb-all:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
.nx-nb-more { font-size: 0.76rem; color: var(--accent); text-decoration: none; }
.nx-nb-more:hover { text-decoration: underline; }

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nx-qs-overlay, .nx-qs-panel { animation: none; }
  .nx-qs-item, .nx-nb-item, .nx-nb-btn, .nx-qs-trigger { transition: none; }
}