/* ==========================================================================
   XDCellar — barre de navigation unifiée (appnav).
   Un seul en-tête cohérent sur toutes les pages : Accueil · Docs · Marketplace
   · Gouvernance, + hamburger sur mobile. Le JS (appnav.js) construit la barre,
   déplace les contrôles existants (connect/thème/langue) dedans, et masque les
   anciens en-têtes. Ce fichier n'habille que la barre unifiée.
   ========================================================================== */
:root{
  --xdn-bg:#0b0b12; --xdn-line:#20202e; --xdn-text:#f4f4f6; --xdn-muted:#9a9aad;
  --xdn-accent:#8b5cf6; --xdn-accent2:#d946ef; --xdn-hover:#15151f;
  --xdn-accent-soft:rgba(139,92,246,.16);
}
html[data-theme="light"]{
  --xdn-bg:#ffffff; --xdn-line:#e3e5ef; --xdn-text:#1b1c26; --xdn-muted:#5c5f72;
  --xdn-accent:#7c3aed; --xdn-accent2:#c026d3; --xdn-hover:#eef0f6;
  --xdn-accent-soft:rgba(124,58,237,.12);
}

/* — Gras adoucis sur tout le site : titres et texte en évidence moins lourds.
   (chargé sur toutes les pages → agit aussi sur le thème de la home) */
strong, b{ font-weight:500 !important; }
h1, h2, h3, h4, h5, h6{ font-weight:500 !important; }

/* Masque les anciens en-têtes une fois la barre unifiée montée
   (descendant, pas enfant direct : certaines pages imbriquent header.top dans .wrap) */
body.xdn-replaced header.top,
body.xdn-replaced .top_panel{ display:none !important; }

.xdtop{
  display:flex; align-items:center; gap:14px; padding:10px 18px; flex-wrap:nowrap;
  background:var(--xdn-bg); border-bottom:1px solid var(--xdn-line);
  position:sticky; top:0; z-index:1000; min-height:56px;
  font-family:"roc-grotesk","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
/* Le bouton Connect (déplacé depuis la page) ne doit pas pousser la barre hors écran */
.xdt-ctrl #connectBtn{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xdtop *{box-sizing:border-box}
.xdt-logo{display:flex;align-items:center;flex:0 0 auto}
.xdt-logo img{height:24px;width:auto;display:block}
html[data-theme="light"] .xdt-logo img{filter:invert(1) hue-rotate(180deg)}

.xdnav{display:flex;align-items:center;gap:4px}
.xdnav a{
  color:var(--xdn-muted); text-decoration:none; font-size:13.5px; font-weight:400;
  padding:7px 12px; border-radius:9px; white-space:nowrap; line-height:1;
  transition:color .15s, background .15s;
}
.xdnav a:hover{color:var(--xdn-text); background:var(--xdn-hover)}
/* État « actif/sélectionné » : verre clair (proche du blanc) + reflet « shine »
   qui glisse en travers. Volontairement différent des boutons d'action (plein, opaque). */
.xdnav a.active,
.xdnav-panel a.active,
.xdt-lang button.active,
.xdtop .toggle button.active,
.r-header .lang-toggle button.active{
  color:#4c1d95; font-weight:500; position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(226,214,255,.66));
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 4px 16px rgba(0,0,0,.26),0 0 16px rgba(167,139,250,.28);
}
.xdnav a.active::after,
.xdnav-panel a.active::after,
.xdt-lang button.active::after,
.xdtop .toggle button.active::after,
.r-header .lang-toggle button.active::after{
  content:''; position:absolute; top:0; left:-160%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:skewX(-18deg); animation:xdShine 3.6s ease-in-out infinite;
}
@keyframes xdShine{0%{left:-160%}45%{left:160%}100%{left:160%}}
@media (prefers-reduced-motion:reduce){
  .xdnav a.active::after,.xdnav-panel a.active::after,.xdt-lang button.active::after,
  .xdtop .toggle button.active::after,.r-header .lang-toggle button.active::after{display:none}
}
/* Thème clair : verre blanc visible sur fond clair (liseré + halo accent) */
html[data-theme="light"] .xdnav a.active,
html[data-theme="light"] .xdnav-panel a.active,
html[data-theme="light"] .xdt-lang button.active,
html[data-theme="light"] .xdtop .toggle button.active,
html[data-theme="light"] .r-header .lang-toggle button.active{
  color:#6d28d9;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(233,226,252,.86));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(124,58,237,.4),0 4px 14px rgba(124,58,237,.2);
}

.xdt-sp{margin-left:auto}
/* Conteneur des contrôles déplacés (connect / thème / langue) */
.xdt-ctrl{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* -------- Pages profondes : retour (‹) + nom de la page, à gauche -------- */
.xdt-back{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:9px;color:var(--xdn-muted);
  text-decoration:none;transition:color .15s, background .15s;
}
.xdt-back:hover{color:var(--xdn-text);background:var(--xdn-hover)}
.xdt-back svg{width:18px;height:18px}
.xdt-page{
  color:var(--xdn-text);font-size:14px;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;
  border-left:1px solid var(--xdn-line);margin-left:2px;padding:0 0 0 12px;
}

/* -------- Sélecteur de langue unifié (home / app / reader) -------- */
/* Même hauteur (34px) et même arrondi (9px) que les boutons voisins (thème/connect). */
.xdt-lang,
.xdtop .toggle,
.r-header .lang-toggle{
  display:inline-flex;align-items:stretch;flex:0 0 auto;height:34px;
  border:1px solid var(--xdn-line);border-radius:9px;overflow:hidden;
  background:var(--xdn-hover);
}
.xdt-lang button,
.xdtop .toggle button,
.r-header .lang-toggle button{
  appearance:none;border:0;background:transparent;color:var(--xdn-muted);
  font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.03em;
  padding:0 13px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;
  transition:color .15s, background .15s;
}
.xdt-lang button:hover,
.xdtop .toggle button:hover,
.r-header .lang-toggle button:hover{color:var(--xdn-text)}
/* (l'état actif des bascules est défini plus haut avec le verre clair + shine) */

/* Bouton hamburger — caché sur desktop */
.xdt-burger{
  display:none; appearance:none; border:1px solid var(--xdn-line); background:transparent;
  color:var(--xdn-text); width:38px; height:38px; border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; padding:0;
}
.xdt-burger:hover{border-color:var(--xdn-accent)}
.xdt-burger svg{width:20px;height:20px}

/* Panneau mobile (déroulant) */
.xdnav-panel{
  display:none; position:sticky; top:56px; z-index:999;
  background:var(--xdn-bg); border-bottom:1px solid var(--xdn-line);
  padding:8px 12px 12px; flex-direction:column; gap:2px;
}
.xdnav-panel.open{display:flex}
.xdnav-panel a{
  color:var(--xdn-text); text-decoration:none; font-size:15px; font-weight:400;
  padding:12px 12px; border-radius:10px;
}
.xdnav-panel a:hover{background:var(--xdn-hover)}
/* (l'état actif du panneau mobile est défini plus haut : verre clair + shine) */
/* Bascule de langue relogée dans le panneau sur mobile */
.xdnav-panel .toggle{align-self:flex-start;margin:4px 0 8px}

/* -------- Bascule responsive : hamburger sous 760px -------- */
@media(max-width:760px){
  .xdtop{gap:10px;padding:9px 14px}
  .xdnav{display:none}          /* liens inline masqués */
  .xdt-burger{display:inline-flex}
  .xdt-ctrl{gap:6px}
}

/* -------- Mode « home » : transparent en overlay, reveal au scroll -------- */
.xdtop--home{
  position:fixed; top:0; left:0; right:0;
  background:transparent; border-bottom:1px solid transparent;
  transition:transform .32s cubic-bezier(.4,0,.2,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.xdtop--home.is-top{ background:transparent; border-bottom-color:transparent; box-shadow:none; }
.xdtop--home.is-solid{
  background:var(--xdn-bg); border-bottom-color:var(--xdn-line);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.xdtop--home.is-hidden{ transform:translateY(-100%); }
/* La barre home est en overlay (fixed) → elle ne doit pas réserver d'espace.
   Le panneau mobile se cale sous la barre. */
body.xdn-home .xdnav-panel{ position:fixed; top:56px; left:0; right:0; z-index:999; }

/* -------- Mode « enhance » (reader) : menu poussé à droite -------- */
.r-header .xdnav{margin-left:auto}
@media(max-width:900px){ .r-header .xdnav{display:none} }

/* Sur mobile, le nom de page (à côté du logo) laisse la place au menu ☰ */
@media(max-width:760px){
  .xdt-page{max-width:44vw;font-size:13px}
}