/* ============================================================
   La Dragonnerie — Navbar v2 (menus par catégories)
   Chargée EN DERNIER dans layout.php : gagne par l'ordre de
   cascade sur parchemin.css / mobile.css (spécificité égale).
   Réutilise .bandeau / .bandeau-nav / .bandeau-actions existants ;
   n'ajoute que la structure « catégories + sous-menus » et son
   repli mobile dans le tiroir <details.nav-burger>.
   Aucun JS (CSP enforce) : ouverture au :hover et :focus-within.
   ============================================================ */

/* ---- Barre ---- */
.bandeau{
  min-height:52px; gap:14px; padding:0 22px; flex-wrap:nowrap;
  background:linear-gradient(180deg,#e4c069 0%,#cca954 48%,#bc9e58 100%);
  border-bottom:1px solid #7a5f28; box-shadow:0 3px 14px rgba(0,0,0,.5);
}
.bandeau .brand{ margin-right:4px; gap:9px; }
.bandeau .brand .brand-med{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  background:radial-gradient(circle at 32% 28%,#6a4a1e,#3a2610); border:2px solid #f0dca0; flex:none;
}

/* ---- Groupe central « catégories » ---- */
.navcats{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:12px;
  background:rgba(42,29,14,.07); box-shadow:inset 0 1px 3px rgba(0,0,0,.14); flex-wrap:nowrap; }
.navcats .nav-onglet{
  display:inline-flex; align-items:center; gap:6px; font:600 13.5px/1 var(--sans);
  color:#4a3413; text-decoration:none; padding:6px 13px; border-radius:8px;
  border:0; background:none; cursor:pointer; white-space:nowrap;
}
.navcats .nav-onglet::after{ display:none; }      /* neutralise le soulignement animé de .bandeau-nav a */
.navcats .nav-onglet:hover{ opacity:1; background:rgba(42,29,14,.12); }
.navcats .nav-onglet.actif{ opacity:1; color:#f0dca0;
  background:linear-gradient(180deg,#2f2010,#1f1509); box-shadow:inset 0 1px 3px rgba(0,0,0,.55); }
.navcats .nav-caret{ font-size:9px; opacity:.55; transition:transform .18s; }
.navcats .nav-groupe{ position:relative; }
.navcats .nav-groupe:hover .nav-caret,
.navcats .nav-groupe:focus-within .nav-caret{ transform:rotate(180deg); }

/* ---- Sous-menu ---- */
.navcats .nav-sous{
  position:absolute; top:calc(100% + 11px); left:0; min-width:212px; padding:7px;
  background:linear-gradient(180deg,#33240f,#1e1409); border:1px solid #604324; border-radius:13px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-7px); pointer-events:none;
  transition:opacity .16s, transform .16s; z-index:120;
}
.navcats .nav-sous::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* zone-tampon */
.navcats .nav-groupe:hover .nav-sous,
.navcats .nav-groupe:focus-within .nav-sous{ opacity:1; transform:translateY(0); pointer-events:auto; }
.navcats .nav-sous a{ display:flex; gap:12px; align-items:center; padding:9px 11px; border-radius:9px; text-decoration:none; }
.navcats .nav-sous a::after{ display:none; }
.navcats .nav-sous a:hover{ background:rgba(227,183,104,.10); }
.navcats .nav-sous .ns-ic{ width:22px; text-align:center; font-size:18px; flex:none; }
.navcats .nav-sous .ns-tx b{ display:block; font:600 13.5px/1.2 var(--sans); color:var(--creme,#e8d6ad); }
.navcats .nav-sous .ns-tx small{ display:block; font-size:11px; color:#9c8552; margin-top:1px; }
/* Entrée de sous-menu verrouillée (déverrouillage progressif par niveau) — teaser « 🔒 niv. N », non cliquable. */
.navcats .nav-sous .nav-sous-item{ display:flex; gap:12px; align-items:center; padding:9px 11px; border-radius:9px; }
.navcats .nav-sous .nav-sous-item.est-lock{ opacity:.5; cursor:default; }
.navcats .nav-sous .nav-sous-item.est-lock .ns-tx small{ color:var(--or,#bc9e58); font-style:italic; }

/* ---- Cluster de droite : pastille « en ligne » qui pulse ---- */
.bandeau .nav-enligne{
  display:inline-flex; align-items:center; gap:6px; font:600 13px/1 var(--sans);
  color:#37260f; text-decoration:none; opacity:1; background:none; padding:0;
}
.bandeau .nav-enligne::after{ display:none; }
.bandeau .nav-enligne::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#2e9c3e;
  box-shadow:0 0 0 0 rgba(46,156,62,.5); animation:navPulseDot 2.4s infinite;
}
@keyframes navPulseDot{
  0%{ box-shadow:0 0 0 0 rgba(46,156,62,.5); }
  70%{ box-shadow:0 0 0 7px rgba(46,156,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,156,62,0); }
}
@media (prefers-reduced-motion: reduce){ .bandeau .nav-enligne::before{ animation:none; } }

/* ---- Cluster droit : pastille d'énergie (tokens handoff) ---- */
.bandeau .energie-badge{
  background:rgba(42,29,14,.14); border:1px solid rgba(42,29,14,.4); box-shadow:none;
  border-radius:20px; padding:4px 12px; color:#2a1d0e; font-size:13px; font-weight:600; gap:4px;
}
.bandeau .energie-badge:hover{ background:rgba(42,29,14,.2); }
.bandeau .energie-badge .eb-max{ color:#6b5124; }
.bandeau .energie-badge.est-vide{ background:#f6dccd; border-color:#c0795a; color:#7a2e1a; }

/* ---- Cloche (tokens handoff) ---- */
.bandeau .cloche-btn{ font-size:16px; padding:5px; color:#37260f; }
.bandeau .cloche-btn:hover{ background:rgba(42,29,14,.10); }
.bandeau .cloche-badge{
  background:#b23a2a; border:1.5px solid #cca954; color:#fff;
  font-size:9px; font-weight:700; min-width:16px; height:16px; top:-4px; right:-4px;
}

/* ---- Bloc profil (tokens handoff) ---- */
.bandeau .nav-profil > summary{ border-radius:22px; padding:3px 10px 3px 4px; }
.bandeau .nav-profil > summary:hover{ background:rgba(42,29,14,.12); box-shadow:none; }
.bandeau .np-ava{ width:34px; height:34px; border:2px solid #f3e6c2; }
.bandeau .np-nom{ font-size:14px; color:#2a1d0e; }
.bandeau .np-id small{ color:#5a3d12; font-weight:600; font-size:11px; }
.bandeau .np-caret{ color:#5a431f; }

/* ---- Boutons état DÉCONNECTÉ (tokens handoff) ---- */
.bandeau .nav-auth-ghost{ color:#37260f; font-size:13px; font-weight:700; text-decoration:none; padding:6px 6px; }
.bandeau .nav-auth-ghost:hover{ text-decoration:underline; }
.bandeau .nav-auth-dark{ color:#f0dca0; font-size:13px; font-weight:700; text-decoration:none;
  background:linear-gradient(180deg,#3a2a12,#241809); border:1px solid #7a5f28; border-radius:9px; padding:7px 15px;
  transition:filter .12s, transform .12s; }
.bandeau .nav-auth-dark:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* ============================================================
   TIROIR MOBILE (<=820px) — le groupe .navcats devient un tiroir
   plein écran déroulé par <details.nav-burger>. On bat mobile.css
   (chargé avant) : sous-menus dépliés à plat, catégories en
   sections à filet, entrées en « lignes-pastille » denses.
   Forum est promu en tête du tiroir (order:-2) : c'est le cœur
   communautaire du jeu, on ne le cherche pas en bas de liste.
   ============================================================ */
@media (max-width:820px){
  /* La nav est repliée dans le burger. Sélecteur composé (.bandeau-nav.navcats,
     spécificité 0,2,0) OBLIGATOIRE : la règle de base .navcats{display:flex} de ce
     fichier (chargé après mobile.css) écrasait sinon le .bandeau-nav{display:none}
     de mobile.css → nav + burger affichés ensemble et débordement horizontal. */
  .bandeau-nav.navcats{ display:none; }
  .navcats{ background:none; box-shadow:none; padding:0; }

  /* ---- Le tiroir lui-même : nappe plein écran sous la barre ---- */
  .nav-burger[open] + .bandeau-nav.navcats{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    /* justify-content OBLIGATOIRE : parchemin.css centre .bandeau-nav sous 780px ;
       en colonne, « center » fait déborder le haut du tiroir hors du scroll (Forum
       devenait inatteignable, y négatif). */
    justify-content:flex-start;
    position:fixed; left:0; right:0; top:54px; bottom:0; z-index:130;
    margin:0; padding:12px 12px calc(28px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#f4e8c8 0%,#ecdcb0 45%,#e3cf99 100%);
    border-top:1px solid rgba(255,255,255,.5);
    box-shadow:inset 0 14px 24px -16px rgba(58,40,14,.45);
    overflow-y:auto; overscroll-behavior:contain;
    animation:navTiroirIn .18s ease-out;
  }
  @keyframes navTiroirIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    .nav-burger[open] + .bandeau-nav.navcats{ animation:none; }
  }
  /* Voile sur la page derrière le tiroir (le tiroir est au-dessus). */
  .nav-burger[open] > summary::after{
    content:""; position:fixed; left:0; right:0; top:54px; bottom:0;
    background:rgba(30,20,8,.45); z-index:100;
  }
  body.nav-tiroir-ouvert{ overflow:hidden; }

  /* ---- Entrées de 1er niveau (Accueil, Forum) : ligne à pastille ---- */
  .nav-burger[open] + .navcats > .nav-onglet{
    display:flex; align-items:center; gap:12px; width:100%; justify-content:flex-start;
    font:600 15.5px/1.25 var(--sans); color:var(--encre);
    padding:11px 12px; border-radius:13px; border:1px solid transparent; background:none;
  }
  .nav-burger[open] + .navcats > .nav-onglet::before{
    content:attr(data-ic); flex:none; width:36px; height:36px;
    display:grid; place-items:center; font-size:18px;
    background:#fbf3dc; border:1px solid #e0c98e; border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  }
  .nav-burger[open] + .navcats > .nav-onglet::after{
    display:block; content:attr(data-sub); position:static; transform:none;
    margin-left:auto; padding-left:10px; text-align:right;
    font:400 11px/1.3 var(--sans); color:#8a6d2f; background:none; border-radius:0; height:auto;
  }
  .nav-burger[open] + .navcats > .nav-onglet.actif{
    color:#f0dca0; background:linear-gradient(180deg,#3a2a12,#241809); border-color:#7a5f28;
  }
  .nav-burger[open] + .navcats > .nav-onglet.actif::before{
    background:rgba(240,220,160,.12); border-color:#8a6d2f;
  }
  .nav-burger[open] + .navcats > .nav-onglet.actif::after{ color:#bfa669; }

  /* Forum en tout premier, mis en avant (bandeau doré) ; Accueil juste après. */
  .nav-burger[open] + .navcats > .nav-forum{
    order:-2; margin-bottom:4px; padding:13px 12px;
    background:linear-gradient(180deg,#f7e5b2,#e9cd86); border-color:#c9a95e;
    box-shadow:0 4px 12px rgba(80,58,18,.18);
  }
  .nav-burger[open] + .navcats > .nav-forum::before{ background:#fffaea; border-color:#c9a95e; }
  .nav-burger[open] + .navcats > .nav-accueil{ order:-1; }

  /* ---- Catégories : le bouton devient un intertitre à filet ---- */
  .nav-burger[open] + .navcats .nav-groupe{ position:static; width:100%; }
  .nav-burger[open] + .navcats .nav-groupe > .nav-onglet{
    display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-start;
    padding:16px 4px 7px; margin:0; pointer-events:none; border-radius:0;
    /* box-shadow:none obligatoire : sinon l'ombre creusée de .nav-onglet.actif
       survit au fond neutralisé et dessine un cadre parasite autour de l'intertitre. */
    background:none; box-shadow:none;
    font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#8a6d2f;
  }
  .nav-burger[open] + .navcats .nav-groupe > .nav-onglet::after{
    display:block; content:""; position:static; transform:none; flex:1; height:1px; border-radius:0;
    background:linear-gradient(90deg,rgba(138,109,47,.42),rgba(138,109,47,0));
  }
  .nav-burger[open] + .navcats .nav-groupe > .nav-onglet .nav-caret{ display:none; }

  /* ---- Sous-menu déplié à plat, dans le flux ---- */
  .nav-burger[open] + .navcats .nav-sous{
    position:static; opacity:1; transform:none; pointer-events:auto;
    display:flex; flex-direction:column; gap:2px;
    min-width:0; padding:0; background:none; border:0; box-shadow:none;
  }
  .nav-burger[open] + .navcats .nav-sous a{
    align-items:center; gap:12px; padding:9px 12px; border-radius:13px;
    border:1px solid transparent;
  }
  .nav-burger[open] + .navcats .nav-sous a:active{
    background:rgba(42,29,14,.07); border-color:rgba(138,109,47,.35);
  }
  /* Chevron de fin de ligne. Le ::after de .bandeau-nav a est le soulignement animé
     (absolute / height:2px / scaleX(0)) : il faut TOUT remettre à plat, pas seulement
     display+content, sinon le glyphe reste invisible. */
  .nav-burger[open] + .navcats .nav-sous a::after{
    display:block; content:"›"; flex:none; margin-left:auto; padding-left:8px;
    position:static; transform:none; height:auto; width:auto; background:none; border-radius:0;
    font-size:19px; line-height:1; color:#bfa669;
  }
  .nav-burger[open] + .navcats .nav-sous .ns-ic{
    width:36px; height:36px; display:grid; place-items:center; font-size:18px;
    background:#fbf3dc; border:1px solid #e0c98e; border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  }
  .nav-burger[open] + .navcats .nav-sous .ns-tx b{ color:var(--encre); font-size:15px; }
  .nav-burger[open] + .navcats .nav-sous .ns-tx small{ color:#8a6d2f; font-size:11.5px; }
}

/* Barre du haut sur petit écran : le compteur « N en ligne » passait à la ligne et
   faisait grossir la barre (le tiroir, ancré à 54px, se décalait). Il est déjà sur
   l'accueil (#en-ligne) : on le retire de la barre pour laisser respirer
   énergie + cloche + avatar + burger. */
@media (max-width:620px){
  .bandeau .nav-enligne{ display:none; }
  .bandeau{ flex-wrap:nowrap; }
  /* Le nom du site se faisait tronquer (« La D… ») : sur mobile, le médaillon
     du dragon suffit comme retour à l'accueil. */
  .bandeau .brand{ font-size:0; gap:0; }
  .bandeau .brand .brand-med{ font-size:18px; }
}