/* =========================================================
   GOLDEN CONFLUENCE — navigation publique, barre pleine largeur
   =========================================================
   Chargée en dernier sur toutes les pages qui portent l'en-tête.
   Peau seulement : site.js (burger, menu Univers) ne change pas.
   #gate (z-index 200) reste au-dessus de la barre (z-index 50).

   STICKY, collée en haut, sans marge : elle occupe sa hauteur
   dans le flux, le héros commence dessous. Fond à 82 % : ce qui
   défile dessous est masqué, pas deviné (un fond à 48 % laissait
   voir le titre du héros à travers la barre).
   ========================================================= */
:root {
  --nav-or: #E8C56A;
  --nav-or-pale: #efdca3;
  --nav-fond: rgba(6, 10, 18, 0.82);
  --nav-fond-plein: rgb(6, 10, 18);          /* panneaux (menu, tiroir) : pleins, rien ne transparaît */
  --nav-filet: rgba(232, 197, 106, 0.35);
  --nav-h: 78px;
}

/* Ancres (#contact, #legende…) : sous la barre. */
html { scroll-padding-top: calc(var(--nav-h) + 18px); }

/* ---------- La barre ---------- */
.entete {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  border-radius: 0;
  background: var(--nav-fond);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0;
  border-bottom: 1px solid var(--nav-filet);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.entete[data-defile="true"] {
  background: var(--nav-fond);
  border-bottom-color: var(--nav-filet);
}
.entete__interieur {
  max-width: none;
  min-height: var(--nav-h);
  height: var(--nav-h);
  padding: 0 28px;
  align-items: center;
  gap: 24px;
}

/* ---------- La marque, à gauche ---------- */
.entete .marque { flex: none; gap: 13px; align-items: center; }
.marque__medaille {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(232, 197, 106, 0.3), 0 0 0 1px rgba(232, 197, 106, 0.22);
}
.marque__medaille::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 10px 14px -10px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.entete .marque__sceau {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 3px 10px rgba(232, 197, 106, 0.45));
}
.entete .marque__texte { gap: 3px; line-height: 1.05; }
.entete .marque__nom {
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(100deg, #fff6d6 0%, #f3dfa0 45%, #e8c56a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.entete .marque__sous {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--nav-or-pale);
  opacity: 0.85;
}

/* ---------- Onglets ---------- */
.entete .nav__liste { gap: 4px; }
.entete .nav__lien {
  min-height: 40px;
  padding: 0.6em 1.05em;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #dfe6ee;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.entete .nav__lien:hover,
.entete .nav__lien[aria-expanded="true"] {
  color: #fff6d6;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.entete .nav__lien[aria-current="page"],
.entete .nav__lien--actif {
  color: var(--nav-or);
  border-color: rgba(232, 197, 106, 0.35);
}
.entete .nav__lien:focus-visible { outline: 2px solid var(--nav-or); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.entete .nav__btn-membres,
.entete .nav__btn-rejoindre,
.entete .nav__btn-mobile {
  min-height: 42px;
  height: 42px;
  padding: 0 1.35em;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}
.entete .btn--fantome {
  color: #f4ecd6;
  border: 1px solid rgba(232, 197, 106, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.entete .btn--fantome:hover {
  color: #fff6d6;
  border-color: var(--nav-or);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(232, 197, 106, 0.06));
}
.entete .btn--or {
  color: #10131a;
  font-weight: 500;
  border: 1px solid #f3dc97;
  background: linear-gradient(180deg, #f7e7b0 0%, #d4af4a 100%);
  box-shadow: inset 0 1px 0 #fff6d0, 0 8px 22px -12px rgba(212, 175, 74, 0.7);
}
.entete .btn--or:hover {
  color: #10131a;
  filter: brightness(1.05);
}

/* ---------- Bureau : marque | onglets au centre | boutons ---------- */
@media (min-width: 1021px) {
  .entete .entete__nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }
  /* Centre optique : l'espace libre se partage des deux côtés. */
  .entete .nav { margin-inline: auto; }

  /* Menu Univers : accroché au bas de la barre, même fond, pas une bulle.
     Bouton de 40 px centré dans 78 px → 19 px jusqu'au filet. */
  .entete .menu {
    top: calc(100% + 19px);
    border: 1px solid var(--nav-filet);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: var(--nav-fond-plein);
    box-shadow: 0 18px 36px -18px rgba(3, 8, 20, 0.7);
  }
  .entete .menu::before { top: -20px; height: 20px; }
  .entete .menu__lien { border-radius: 10px; }
  .entete .menu__lien:hover { background: rgba(255, 255, 255, 0.06); }
}

/* ---------- Burger (peau) ---------- */
.entete .bascule {
  border-radius: 12px;
  border: 1px solid rgba(232, 197, 106, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

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

/* ---------- Mobile ---------- */
@media (max-width: 1020px) {
  :root { --nav-h: 64px; }
  .entete__interieur { padding: 0 14px 0 16px; gap: 12px; }

  .marque__medaille,
  .entete .marque__sceau { width: 48px; height: 48px; }
  .entete .marque { gap: 11px; min-width: 0; }
  .entete .marque__nom { font-size: 1.22rem; }
  .entete .marque__sous { font-size: 0.56rem; }

  /* Le tiroir : collé sous la barre, pleine largeur, même fond.
     La barre (backdrop-filter) est son bloc conteneur. */
  .entete .entete__nav {
    inset: 100% 0 auto 0;
    max-height: calc(100dvh - var(--nav-h));
    padding: 12px 16px 24px;
    background: var(--nav-fond-plein);
    border-bottom: 1px solid var(--nav-filet);
  }
  /* .nav est en flex : sans ça, la liste se tasse à la largeur du texte. */
  .entete .nav,
  .entete .nav__liste { display: flex; flex-direction: column; width: 100%; }
  .entete .nav__lien {
    min-height: 48px;
    border-radius: 12px;
    border-bottom-color: rgba(232, 197, 106, 0.12);
    padding: 0.8em 0.9em;
  }
  .entete .nav__btn-mobile { width: 100%; }
}

@media (max-width: 380px) {
  .entete .marque__nom { font-size: 1.08rem; }
  .entete .marque__sous { letter-spacing: 0.28em; }
}