/* Police d'identité, hébergée par le site (licence OFL : rajdhani-OFL.txt). */
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/site/rajdhani-600.woff2") format("woff2");
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/rajdhani-700.woff2") format("woff2");
}

/* Texte courant et titres des univers Forge et Bohême, hébergés par le site (licences OFL : barlow-OFL.txt,
   cinzel-OFL.txt, alegreya-sc-OFL.txt). Jeu « latin » : accents français, œ, €, apostrophe courbe. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/barlow-400.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/site/barlow-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/site/barlow-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/cinzel-700.woff2") format("woff2");
}

@font-face {
  font-family: "Alegreya SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/alegreya-sc-700.woff2") format("woff2");
}

:root {
  --dz-bar-height: 56px;
  --dz-night: #070d15;
  --dz-surface: #0f1a28;
  --dz-surface-2: #16253a;
  --dz-line: #22364f;
  --dz-text: #f4f7fb;
  --dz-muted: #9fb1c6;
  --dz-warden: #2c5f8d;
  --dz-warden-bright: #4f8fd1;
  --dz-sky: #a9cdf5;
  --dz-live: #3ba55d;
  --dz-discord: #5865f2;
  --dz-radius: 12px;
  --dz-display: "Rajdhani", "Bahnschrift Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --dz-body: "Barlow", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dz-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  box-sizing: border-box;
  height: var(--dz-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: rgb(7 13 21 / 88%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dz-line);
  color: var(--dz-text);
  font: 600 16px/1 var(--dz-display);
  letter-spacing: 0;
}

.dz-bar a {
  color: var(--dz-text);
  text-decoration: none;
}

.dz-bar a:focus-visible,
.dz-bar summary:focus-visible {
  outline: 2px solid var(--dz-sky);
  outline-offset: 2px;
}

.dz-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-family: var(--dz-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.dz-brand img {
  display: block;
  width: 32px;
  height: 32px;
}

.dz-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.dz-bar .dz-menu {
  position: relative;
  padding: 0;
  border: 0;
}

.dz-menu summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.dz-menu summary::-webkit-details-marker {
  display: none;
}

.dz-menu summary::after {
  content: "▾";
  margin-left: 6px;
  color: var(--dz-sky);
}

.dz-menu summary:hover,
.dz-menu[open] summary {
  background: var(--dz-surface);
}

.dz-menu ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}

.dz-menu li {
  margin: 0;
  padding: 0;
}

.dz-menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.dz-menu li a:hover {
  background: var(--dz-warden);
}

.dz-bar .dz-discord {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--dz-discord);
  color: #fff;
  font-weight: 700;
}

.dz-bar .dz-discord:hover {
  background: #4752c4;
}

.dz-bar .dz-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.dz-bar .dz-link:hover {
  background: var(--dz-surface);
}

/* FR / EN : la même page dans l'autre langue, visible à toutes les tailles. */
.dz-bar .dz-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--dz-line);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dz-bar .dz-lang:hover {
  background: var(--dz-surface);
}

/* Page active : un trait sous le lien de la barre, un fond dans les menus. */
.dz-bar .dz-link[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--dz-warden-bright);
  border-radius: 6px 6px 0 0;
}

.dz-menu li a[aria-current="page"] {
  background: var(--dz-surface-2);
  box-shadow: inset 3px 0 0 var(--dz-warden-bright);
}


.dz-account-slot {
  display: contents;
}

.dz-bar .dz-login {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dz-line);
  border-radius: 6px;
  white-space: nowrap;
}

.dz-bar .dz-login:hover {
  background: var(--dz-surface);
}

/* Un pseudo long se termine par des points de suspension. */
.dz-account-name {
  display: block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-menu .dz-menu-heading {
  padding: 12px 12px 4px;
  color: var(--dz-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.dz-bar .dz-mobile-menu {
  display: none;
}

.dz-mobile-menu ul {
  width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - var(--dz-bar-height) - 16px);
  overflow-y: auto;
}

.dz-mobile-menu li a {
  white-space: normal;
  overflow-wrap: anywhere;
}

.dz-menu form {
  margin: 0;
}

.dz-menu button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dz-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dz-menu button:hover {
  background: var(--dz-warden);
}

.dz-menu button:focus-visible {
  outline: 2px solid var(--dz-sky);
  outline-offset: 2px;
}

.dz-page-links {
  display: contents;
}

.dz-bar .dz-link-page {
  display: block;
  flex-shrink: 1;
  min-width: 3rem;
  max-width: 9rem;
  overflow: hidden;
  line-height: 44px;
  text-overflow: ellipsis;
}

/* Grand écran encore chargé (deux pages, pseudo long) : le nom du site cède la place, le logo reste. */
@media (max-width: 1260px) {
  .dz-brand-name {
    display: none;
  }
}

/* Tablette et téléphone : les liens et les jeux passent dans le menu « Menu ». */
@media (max-width: 1100px) {
  .dz-bar .dz-link,
  .dz-bar .dz-games {
    display: none;
  }

  .dz-bar .dz-mobile-menu {
    display: block;
  }
}

/* Téléphone : le logo, le compte et « Menu » ; le Discord passe dans le menu. */
@media (max-width: 560px) {
  .dz-bar .dz-discord {
    display: none;
  }

  .dz-account-name {
    max-width: 7rem;
  }
}

/* Dans le guide : la barre latérale fixe commence sous la barre Dog'z. */
@media (min-width: 721px) {
  body.dz-has-bar .sidebar {
    top: var(--dz-bar-height);
  }
}

/* Dans le guide : les panneaux collants et les ancres restent sous la barre Dog'z. */
html:has(body.dz-has-bar) {
  scroll-padding-top: var(--dz-bar-height);
}

body.dz-has-bar .toc {
  top: calc(var(--dz-bar-height) + 25px);
}

body.dz-has-bar .catalog-detail {
  top: calc(var(--dz-bar-height) + 20px);
  scroll-margin-top: calc(var(--dz-bar-height) + 20px);
}

@media print {
  .dz-bar {
    display: none !important;
  }
}

/* La barre prend la teinte de l'ambiance du jeu (header.js pose body.dz-amb-<ambiance>), Compagnon compris. */
body.dz-amb-front .dz-bar {
  background: rgb(12 18 15 / 88%);
  border-bottom-color: rgb(143 180 217 / 35%);
}

body.dz-amb-forge .dz-bar {
  background: rgb(17 10 6 / 88%);
  border-bottom-color: rgb(240 160 75 / 35%);
}

body.dz-amb-boheme .dz-bar {
  background: rgb(15 20 12 / 88%);
  border-bottom-color: rgb(201 162 74 / 35%);
}