/* Barre de navigation commune du wiki skyh (ajoutée par nginx sur chaque partie du site).
   Couleurs : celles de Quartz quand elles existent (thème clair/sombre du wiki), sinon sombre. */
.wn, .wn * { box-sizing: border-box; }
.wn {
  --wn-fond: var(--light, #121212);
  --wn-texte: var(--darkgray, #d4d4d4);
  --wn-fort: var(--dark, #ececec);
  --wn-bord: var(--lightgray, #2e2a2a);
  --wn-accent: var(--secondary, #ff5a4e);
  --wn-accent-fond: var(--highlight, rgba(255, 90, 78, 0.12));
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(12px, 3vw, 32px);
  background: var(--wn-fond);
  border-bottom: 1px solid var(--wn-bord);
  font: 500 15px/1.2 "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  backdrop-filter: saturate(1.2) blur(6px);
}
@media (prefers-color-scheme: light) {
  .wn:not(.wn-sombre) {
    --wn-fond: var(--light, #faf8f8); --wn-texte: var(--darkgray, #4e4e4e); --wn-fort: var(--dark, #2b2b2b);
    --wn-bord: var(--lightgray, #e5e5e5); --wn-accent: var(--secondary, #b3261e); --wn-accent-fond: var(--highlight, rgba(179, 38, 30, 0.10));
  }
}
.wn a { text-decoration: none; background: none; }
.wn-logo {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--wn-fort) !important; font-weight: 700; font-size: 16px; letter-spacing: 0.2px;
}
.wn-logo b { color: var(--wn-accent); font-weight: 700; }
.wn-liens { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wn-liens::-webkit-scrollbar { display: none; }
.wn-liens a {
  color: var(--wn-texte) !important; padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.wn-liens a:hover { background: var(--wn-accent-fond); color: var(--wn-fort) !important; }
.wn-liens a.actif { color: var(--wn-accent) !important; background: var(--wn-accent-fond); font-weight: 600; }
.wn-bouton {
  flex: none; color: var(--wn-accent) !important; border: 1px solid var(--wn-accent);
  padding: 6px 14px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.wn-bouton:hover { background: var(--wn-accent); color: var(--wn-fond) !important; }

/* La page commence sous la barre */
body:has(> nav.wn) { padding-top: 52px !important; }
html:has(body > nav.wn) { scroll-padding-top: 64px; }
/* Quartz : barres latérales collées sous la barre (grand écran) */
@media (min-width: 800px) {
  body:has(> nav.wn) #quartz-body .sidebar { top: 52px !important; height: calc(100vh - 52px) !important; }
}
/* Authelia : centre le formulaire dans l'espace restant */
body:has(> nav.wn) > #root { min-height: calc(100vh - 52px); }

/* Petits écrans : textes courts, défilement horizontal des liens */
@media (max-width: 640px) {
  .wn { gap: 10px; height: 48px; font-size: 14px; }
  body:has(> nav.wn) { padding-top: 48px !important; }
  .wn-logo span { display: none; }
  .wn-liens a { padding: 6px 9px; }
  .wn-liens a i, .wn-bouton i { display: none; }
  .wn-bouton { padding: 5px 11px; }
}
.wn i { font-style: normal; }

/* Coffre (Obsidian en plein écran) : petit menu flottant qui ne cache pas Obsidian */
.wn-flottant {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2147483000;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wn-flottant summary {
  list-style: none; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  background: rgba(18, 18, 18, 0.82); color: #ececec; border: 1px solid rgba(255, 90, 78, 0.6);
  opacity: 0.55; transition: opacity 0.15s;
}
.wn-flottant summary::-webkit-details-marker { display: none; }
.wn-flottant:hover summary, .wn-flottant[open] summary { opacity: 1; }
.wn-flottant nav {
  margin-top: 6px; display: flex; flex-direction: column; min-width: 190px; padding: 6px;
  background: #1b1b1b; border: 1px solid #2e2a2a; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.wn-flottant nav a { color: #d4d4d4; padding: 8px 10px; border-radius: 6px; text-decoration: none; }
.wn-flottant nav a:hover { background: rgba(255, 90, 78, 0.14); color: #fff; }