/* ============================================================
   GRIMOIRE — assets/site.css
   Styles de navigation partagés (barre de langue, sommaire latéral,
   bouton d'impression). N'affecte jamais le CSS impérial intégré
   dans chaque page — vient uniquement ajouter la navigation autour.
   ============================================================ */

:root{
  --gr-gold:#d4af37;
  --gr-red:#8B0000;
  --gr-dark:#2b2b2b;
  --gr-bar-h:40px;
}

/* Espace réservé en haut de la page pour la barre de langue fixe */
body{
  margin:0;
  padding-top:var(--gr-bar-h);
  background:#e9e4d8;
}

/* ---------- Barre de langue (haut, fixe) — esprit impérial ---------- */
#gr-langbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--gr-bar-h);
  background:#fdfaf3;
  display:flex;
  align-items:center;
  gap:1px;
  padding:0 10px;
  z-index:1000;
  white-space:nowrap;
  font-family:'Cinzel', serif;
  box-shadow:0 3px 0 var(--gr-red), 0 4px 0 var(--gr-gold), 0 6px 10px rgba(0,0,0,0.12);
}
#gr-langbar .gr-brand,
#gr-langbar .gr-brand:link,
#gr-langbar .gr-brand:visited,
#gr-langbar .gr-brand:hover,
#gr-langbar .gr-brand:active{
  color:var(--gr-red);
  text-decoration:none;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.22em;
  margin-right:16px;
  flex-shrink:0;
}
#gr-langbar a{
  color:#6b5a3a;
  text-decoration:none;
  font-size:10.5px;
  letter-spacing:0.02em;
  padding:6px 10px;
  border-radius:2px;
  transition:background 0.15s, color 0.15s;
  flex-shrink:0;
}
#gr-langbar a:hover{
  background:rgba(139,0,0,0.08);
  color:var(--gr-red);
}
#gr-langbar a.gr-active{
  background:var(--gr-red);
  color:var(--gr-gold);
  font-weight:700;
}
#gr-langbar .gr-toc-toggle{
  margin-left:6px;
  flex-shrink:0;
  background:var(--gr-red);
  color:var(--gr-gold) !important;
  font-weight:700;
  letter-spacing:0.08em;
  border-radius:2px;
  padding:6px 12px !important;
}
#gr-lang-toggle-btn{
  margin-left:auto;
}

/* Bouton "langues" — toujours un bouton replié (desktop et mobile) */
#gr-lang-toggle-btn{
  display:flex;
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--gr-red);
  color:var(--gr-red);
  font-size:14px;
  line-height:1;
  border-radius:14px;
  padding:0 10px;
  height:28px;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  margin-right:0;
}
#gr-lang-toggle-btn.gr-active{
  background:var(--gr-red);
  color:var(--gr-gold);
}

/* Liste des langues : toujours un panneau déroulant (desktop et mobile) */
#gr-lang-list{
  display:none;
  position:fixed;
  top:var(--gr-bar-h);
  right:0;
  max-width:280px;
  max-height:70vh;
  overflow-y:auto;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:#fdfaf3;
  border:1px solid var(--gr-red);
  border-top:3px solid var(--gr-red);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  z-index:980;
  padding:6px 0;
}
#gr-lang-list.gr-lang-open{
  display:flex;
}
#gr-lang-list a{
  font-size:12.5px;
  padding:8px 16px;
  border-bottom:1px dotted rgba(139,0,0,0.15);
  border-radius:0;
  text-align:left;
  white-space:nowrap;
}
.gr-flag{
  width:14px;
  height:auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(212,175,55,0.7);
  vertical-align:middle;
  margin-right:5px;
  flex-shrink:0;
}
#gr-lang-toggle-btn .gr-flag{
  margin-right:0;
  width:16px;
}

#gr-lang-overlay{
  position:fixed;
  top:var(--gr-bar-h); left:0; right:0; bottom:0;
  background:rgba(43,30,10,0.25);
  z-index:970;
  display:none;
}
#gr-lang-overlay.gr-show{ display:block; }

/* ---------- Sélecteur de sections (Corpus / Volumes / Socle du Fer) ---------- */
/* Par défaut (mobile) : bouton replié + panneau déroulant */
#gr-sections-toggle-btn{
  display:flex;
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--gr-gold);
  color:#8B0000;
  font-size:13px;
  line-height:1;
  border-radius:50%;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-right:6px;
}
#gr-sections-toggle-btn.gr-active{
  background:var(--gr-red);
  color:var(--gr-gold);
  border-color:var(--gr-red);
}
#gr-sections-list{
  display:none;
  position:fixed;
  top:var(--gr-bar-h);
  left:0;
  max-width:280px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:#fdfaf3;
  border:1px solid var(--gr-gold);
  border-top:3px solid var(--gr-gold);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  z-index:980;
  padding:6px 0;
}
#gr-sections-list.gr-sections-open{
  display:flex;
}
#gr-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:#8B0000;
  text-decoration:none;
  white-space:nowrap;
  text-align:left;
}
#gr-sections-list a:hover{
  background:rgba(212,175,55,0.15);
}
#gr-sections-overlay{
  position:fixed;
  top:var(--gr-bar-h); left:0; right:0; bottom:0;
  background:rgba(43,30,10,0.25);
  z-index:970;
  display:none;
}
#gr-sections-overlay.gr-show{ display:block; }

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

/* ---------- Sommaire latéral ---------- */
#gr-sidebar{
  position:fixed;
  top:var(--gr-bar-h);
  right:0;
  width:280px;
  height:calc(100% - var(--gr-bar-h));
  background:#fdfaf3;
  border-left:3px solid var(--gr-red);
  box-shadow:-4px 0 0 var(--gr-gold), -5px 0 12px rgba(0,0,0,0.15);
  overflow-y:auto;
  z-index:900;
  transform:translateX(100%);
  transition:transform 0.25s ease;
  padding:14px 16px 40px 16px;
  box-sizing:border-box;
  font-family:'Lora', serif;
}
#gr-sidebar.gr-open{
  transform:translateX(0);
}
#gr-sidebar h2{
  font-family:'Cinzel', serif;
  font-size:13px;
  color:var(--gr-red);
  letter-spacing:0.06em;
  border-bottom:2px solid var(--gr-red);
  padding-bottom:6px;
  margin:0 0 10px 0;
}
#gr-sidebar .gr-book{
  font-family:'Cinzel', serif;
  font-size:10.5px;
  color:var(--gr-red);
  font-weight:700;
  letter-spacing:0.04em;
  margin:14px 0 4px 0;
  border-bottom:1px dotted rgba(139,0,0,0.3);
  padding-bottom:3px;
}
#gr-sidebar .gr-book:first-child{ margin-top:0; }
#gr-sidebar a.gr-sec{
  display:block;
  font-size:11.5px;
  color:var(--gr-dark);
  text-decoration:none;
  padding:4px 2px;
  border-radius:2px;
  line-height:1.35;
}
#gr-sidebar a.gr-sec:hover{
  background:rgba(139,0,0,0.06);
  color:var(--gr-red);
}
#gr-sidebar a.gr-sec .gr-num{
  color:var(--gr-red);
  font-weight:700;
  margin-right:5px;
  font-family:'Cinzel', serif;
  font-size:10px;
}
#gr-sidebar-overlay{
  position:fixed;
  top:var(--gr-bar-h); left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.25);
  z-index:850;
  display:none;
}
#gr-sidebar-overlay.gr-show{ display:block; }

/* ---------- Bouton d'impression (bas de chaque page A4) ---------- */
.gr-print-btn{
  position:absolute;
  left:2cm;
  bottom:3mm;
  z-index:50;
  background:var(--gr-red);
  color:#fff;
  border:1px solid var(--gr-gold);
  border-radius:14px;
  font-family:'Cinzel', serif;
  font-size:7pt;
  letter-spacing:0.05em;
  padding:3px 12px;
  cursor:pointer;
  opacity:0.55;
  transition:opacity 0.15s;
}
.gr-print-btn:hover{ opacity:1; }

/* Bouton d'impression global unique (remplace les boutons par page) */
#gr-global-print-btn{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:1000;
  background:var(--gr-red);
  color:#fff;
  border:1px solid var(--gr-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;
}
#gr-global-print-btn:hover{ opacity:1; }
@media (max-width:700px){
  #gr-global-print-btn{ font-size:8.5px; padding:6px 12px; left:10px; bottom:10px; }
}

/* ---------- Contrôle de zoom (desktop uniquement) — esprit impérial ---------- */
#gr-zoom-ctrl{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:2px;
  background:#fdfaf3;
  border:1px solid var(--gr-red);
  border-radius:20px;
  padding:4px 6px;
  box-shadow:0 0 0 1px var(--gr-gold) inset, 0 2px 10px rgba(0,0,0,0.25);
  font-family:'Cinzel', serif;
}
#gr-zoom-ctrl button{
  background:transparent;
  color:var(--gr-red);
  border:none;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s, color 0.15s;
}
#gr-zoom-ctrl button:hover{ background:rgba(139,0,0,0.1); color:var(--gr-red); }
#gr-zoom-level{
  color:#6b5a3a;
  font-size:10px;
  min-width:36px;
  text-align:center;
  padding:0 2px;
  user-select:none;
}

/* ---------- Impression : masquer toute la navigation ---------- */
@media print{
  #gr-langbar, #gr-sidebar, #gr-sidebar-overlay, .gr-print-btn, .gr-toc-toggle, #gr-zoom-ctrl, #gr-global-print-btn{
    display:none !important;
  }
  body{ padding-top:0 !important; background:#fff !important; }
  .gr-page-frame{ transform:none !important; height:auto !important; width:auto !important; }
  .gr-page-frame .page{ transform:none !important; }
}

/* ============================================================
   RESPONSIVE — mise à l'échelle des pages A4 fixes (mobile/tablette)
   Le contenu interne (police, boîtes) garde ses proportions exactes :
   on redimensionne la page entière via transform:scale, calculé en JS
   (assets/site.js), plutôt que de faire recalculer le texte.
   ============================================================ */
.gr-page-frame{
  width:210mm;
  margin:0 auto 20px auto;
  position:relative;
}
.gr-page-frame.gr-scaled{
  overflow:hidden;
  width:100%;
}
.gr-page-frame .page{
  margin:0 !important;
}
.gr-page-frame.gr-scaled .page{
  position:relative;
}

@media (max-width: 900px){
  #gr-langbar{
    font-size:10px;
    gap:4px;
  }
  #gr-langbar .gr-brand{
    font-size:10px;
    letter-spacing:0.14em;
    margin-right:6px;
  }
  #gr-langbar .gr-toc-toggle{
    font-size:10px;
    padding:6px 10px !important;
  }
  #gr-sidebar{
    width:82vw;
    max-width:320px;
  }
  #gr-zoom-ctrl{
    display:none;
  }
  #gr-global-print-btn{
    display:none;
  }
  #gr-lang-list{
    right:0;
    left:0;
    max-width:none;
  }
}

@media (max-width: 480px){
  #gr-langbar .gr-brand{
    font-size:9px;
    letter-spacing:0.08em;
  }
  #gr-langbar .gr-toc-toggle{
    font-size:9px;
    padding:5px 8px !important;
  }
  #gr-lang-list a{
    font-size:12px;
    padding:9px 16px;
  }
}

/* ---------- Correctifs de mise en page par langue (demande spécifique) ---------- */
/* TA : interlignage réduit pour le frontispice et toutes les boîtes */
html[data-lang="ta"] .body-text{ line-height:1; }
html[data-lang="ta"] .gr-frontispice p{ line-height:1 !important; }

/* TL : interlignage du frontispice */
html[data-lang="tl"] .gr-frontispice p{ line-height:1.5 !important; }

/* ID / NL / RU : interlignage du frontispice */
html[data-lang="id"] .gr-frontispice p,
html[data-lang="nl"] .gr-frontispice p,
html[data-lang="ru"] .gr-frontispice p{ line-height:1.7 !important; }

/* AR : le zoom desktop grandissait vers la droite au lieu d'être centré —
   la direction RTL du document décalait l'ancrage du défilement horizontal.
   On force le conteneur de défilement en LTR et on restaure le RTL sur le
   contenu réel de chaque page, qui gère déjà sa propre direction au besoin. */
html[dir="rtl"] body{ direction:ltr; }
html[dir="rtl"] .page{ direction:rtl; }