/* ============================================================
   ÉTUDES & VOLUMES & FORMATION — barre de navigation partagée
   Même logique et CSS que la barre du Grimoire (assets/site.css) :
   - toutes les classes/ID sont préfixés "etnv-" pour ne jamais entrer
     en conflit avec les classes internes des documents (sep, badge,
     title-main, etc. utilisées par le template impérial d'origine).
   - Sections (Grimoire/Corpus/Volumes/Socle du Fer) : déployées en
     ligne sur desktop, repliées en panneau sur mobile.
   - Langue : toujours un bouton replié + panneau, desktop et mobile
     (comme le sélecteur de langue du Grimoire).
   - Les panneaux repliés (position:fixed) sont directement enfants du
     conteneur de la barre, qui ne doit JAMAIS recevoir de overflow
     non-visible (piège déjà rencontré : ça clippe les enfants fixed
     hors de leur propre boîte, même si visuellement dessinés ailleurs).
   ============================================================ */

:root{
  --etnv-gold:#d4af37;
  --etnv-red:#8B0000;
  --etnv-bar-h:40px;
}

body{
  margin:0 !important;
  padding-top:var(--etnv-bar-h) !important;
}

#etnv-bar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--etnv-bar-h);
  background:#fdfaf3;
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 12px;
  z-index:1000;
  white-space:nowrap;
  font-family:'Cinzel', serif;
  box-shadow:0 3px 0 var(--etnv-red), 0 4px 0 var(--etnv-gold), 0 6px 10px rgba(0,0,0,0.12);
}
#etnv-bar a{
  text-decoration:none;
  flex-shrink:0;
}
.etnv-brand{
  color:var(--etnv-red);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:0.16em;
  margin-right:8px;
  flex-shrink:0;
}
.etnv-sep{
  color:var(--etnv-gold);
  font-size:11px;
  margin:0 2px;
  flex-shrink:0;
}

/* ---------- Sélecteur de sections (Grimoire / Corpus / Volumes / Socle du Fer) ---------- */
/* Par défaut (mobile) : bouton replié + panneau déroulant */
#etnv-sections-toggle-btn{
  display:flex;
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--etnv-gold);
  color:var(--etnv-red);
  font-size:13px;
  line-height:1;
  border-radius:50%;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-right:6px;
}
#etnv-sections-toggle-btn.etnv-active{
  background:var(--etnv-red);
  color:var(--etnv-gold);
  border-color:var(--etnv-red);
}
#etnv-sections-list{
  display:none;
  position:fixed;
  top:var(--etnv-bar-h);
  left:0;
  max-width:280px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:#fdfaf3;
  border:1px solid var(--etnv-gold);
  border-top:3px solid var(--etnv-gold);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  z-index:980;
  padding:6px 0;
  margin-right:8px;
}
#etnv-sections-list.etnv-open{
  display:flex;
}
#etnv-sections-list a{
  font-family:'Cinzel', serif;
  font-size:12.5px;
  font-weight:700;
  padding:8px 16px;
  border-radius:0;
  border:none;
  border-bottom:1px dotted rgba(139,0,0,0.15);
  color:var(--etnv-red);
  text-decoration:none;
  white-space:nowrap;
  text-align:left;
}
#etnv-sections-list a.etnv-current{
  background:var(--etnv-red);
  color:var(--etnv-gold);
}
#etnv-sections-list a:hover:not(.etnv-current){
  background:rgba(139,0,0,0.08);
}
#etnv-sections-overlay{
  position:fixed;
  top:var(--etnv-bar-h); left:0; right:0; bottom:0;
  background:rgba(43,30,10,0.25);
  z-index:970;
  display:none;
}
#etnv-sections-overlay.etnv-show{ display:block; }

/* À partir de 700px : sections déployées en ligne, alignées à gauche */
@media (min-width:700px){
  #etnv-sections-toggle-btn{
    display:none;
  }
  #etnv-sections-list{
    display:flex;
    position:static;
    flex-direction:row;
    align-items:center;
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    max-width:none;
    gap:4px;
  }
  #etnv-sections-list a{
    font-size:9.5px;
    padding:5px 9px;
    border:1px solid rgba(139,0,0,0.35);
    border-radius:2px;
  }
  #etnv-sections-list a.etnv-current{
    border-color:var(--etnv-red);
  }
}

/* ---------- Sélecteur de langue : toujours un bouton replié (desktop et mobile) ---------- */
#etnv-lang-toggle-btn{
  margin-left:auto;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:4px;
  background:transparent;
  border:1px solid var(--etnv-red);
  color:var(--etnv-red);
  font-family:'Cinzel', serif;
  font-size:10px;
  font-weight:700;
  border-radius:14px;
  padding:0 10px;
  height:24px;
  cursor:pointer;
}
#etnv-lang-toggle-btn.etnv-active{
  background:var(--etnv-red);
  color:var(--etnv-gold);
}
#etnv-lang-toggle-btn img{
  width:14px;
  height:auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(212,175,55,0.7);
}
#etnv-lang-list{
  display:none;
  position:fixed;
  top:var(--etnv-bar-h);
  right:0;
  max-width:220px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:#fdfaf3;
  border:1px solid var(--etnv-red);
  border-top:3px solid var(--etnv-red);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  z-index:980;
  padding:6px 0;
}
#etnv-lang-list.etnv-open{
  display:flex;
}
#etnv-lang-list a, #etnv-lang-list span.etnv-disabled{
  color:#6b5a3a;
  font-size:12.5px;
  padding:8px 16px;
  border-radius:0;
  border-bottom:1px dotted rgba(139,0,0,0.15);
  text-align:left;
  display:block;
}
#etnv-lang-list a.etnv-active{
  background:var(--etnv-red);
  color:var(--etnv-gold);
  font-weight:700;
}
#etnv-lang-list a:not(.etnv-active):hover{
  background:rgba(139,0,0,0.08);
}
#etnv-lang-overlay{
  position:fixed;
  top:var(--etnv-bar-h); left:0; right:0; bottom:0;
  background:rgba(43,30,10,0.25);
  z-index:970;
  display:none;
}
#etnv-lang-overlay.etnv-show{ display:block; }

@media print{
  #etnv-bar{ display:none !important; }
  body{ padding-top:0 !important; }
}

@media (max-width:700px){
  #etnv-bar{ padding:0 8px; }
  .etnv-brand{ font-size:9.5px; letter-spacing:0.1em; margin-right:6px; }
  #etnv-sections-list{ right:0; max-width:none; }
}

/* ============================================================
   Éléments hors barre (inchangés, déjà scopés sans risque de conflit)
   ============================================================ */

/* Sélecteur de langue à drapeaux (pages d'index) */
.et-flagbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
}
.et-flagbar a, .et-flagbar span{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:'Cinzel', serif;
  font-size:9.5px;
  padding:5px 10px;
  border-radius:3px;
  border:1px solid rgba(139,0,0,0.25);
  color:#6b5a3a;
  text-decoration:none;
}
.et-flagbar a:hover{
  background:rgba(139,0,0,0.08);
  color:var(--etnv-red);
}
.et-flagbar a.et-active{
  background:var(--etnv-red);
  color:var(--etnv-gold);
  border-color:var(--etnv-red);
  font-weight:700;
}
.et-flagbar img{
  width:16px;
  height:auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(212,175,55,0.7);
  vertical-align:middle;
}

/* Info-bulle (résumé de l'étude/volume) */
.et-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(139,0,0,0.12);
  color:var(--etnv-red);
  font-family:'Cinzel', serif;
  font-size:9px;
  font-weight:700;
  cursor:help;
  flex-shrink:0;
  margin-left:4px;
}
.et-info .et-tooltip{
  visibility:hidden;
  opacity:0;
  position:absolute;
  bottom:135%;
  left:50%;
  transform:translateX(-50%);
  width:240px;
  background:#2b2b2b;
  color:#f2ead9;
  font-family:'Lora', serif;
  font-size:9.5px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  padding:8px 10px;
  border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
  transition:opacity 0.15s;
  z-index:50;
  white-space:normal;
}
.et-info .et-tooltip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:#2b2b2b;
}
.et-info:hover .et-tooltip, .et-info:focus .et-tooltip{
  visibility:visible;
  opacity:1;
}
@media (max-width:700px){
  .et-info .et-tooltip{ width:180px; font-size:9px; }
}

/* Bouton d'impression flottant harmonisé (identique sur toutes les études/volumes) */
#et-print-btn{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:1000;
  background:var(--etnv-red);
  color:#fff;
  border:1px solid var(--etnv-gold);
  border-radius:16px;
  font-family:'Cinzel', serif;
  font-size:9.5px;
  letter-spacing:0.05em;
  padding:7px 16px;
  cursor:pointer;
  opacity:0.7;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  transition:opacity 0.15s;
}
#et-print-btn:hover{ opacity:1; }

/* Contrôle de zoom flottant, identique à celui du Grimoire */
#et-zoom-ctrl{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:2px;
  background:#fdfaf3;
  border:1px solid var(--etnv-red);
  border-radius:20px;
  padding:4px 6px;
  box-shadow:0 0 0 1px var(--etnv-gold) inset, 0 2px 10px rgba(0,0,0,0.25);
  font-family:'Cinzel', serif;
}
#et-zoom-ctrl button{
  background:transparent;
  color:var(--etnv-red);
  border:none;
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s, color 0.15s;
}
#et-zoom-ctrl button:hover{ background:rgba(139,0,0,0.1); }
#et-zoom-level{
  color:#6b5a3a;
  font-size:9px;
  min-width:30px;
  text-align:center;
}

@media print{
  #et-print-btn, #et-zoom-ctrl{ display:none !important; }
  .page{ transform:none !important; margin-bottom:0 !important; }
}

@media (max-width:700px){
  #et-print-btn{ font-size:8.5px; padding:6px 12px; left:10px; bottom:10px; }
  #et-zoom-ctrl{ right:10px; bottom:10px; }
  #et-zoom-ctrl button{ width:20px; height:20px; font-size:11px; }
}

/* Liens internes automatiques (mentions d'autres études/volumes) */
.et-inline-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:#8B0000;
  text-underline-offset:2px;
}
.et-inline-link:hover{
  color:#8B0000;
}

/* AR : le zoom/scale mobile grandissait vers la droite au lieu d'être centré —
   la direction RTL du document décalait l'ancrage du défilement horizontal
   et le calcul de translateX en JS. On force le conteneur en LTR et on
   restaure le RTL sur le contenu réel de chaque page. */
html[dir="rtl"] body{ direction:ltr; }
html[dir="rtl"] .page{ direction:rtl; }