/* liseuse pdf partagée : panneau fixe occupant toute la colonne libre à droite
   de la liste, avec repli en superposition quand cette colonne n'existe pas.
   Chargée avec /js/liseuse.js, qui construit le balisage. Reprend la légende
   et les pictogrammes du lecteur vidéo (/css/lecteur.css). */

:root {
  --liseuse-legende: #a8a091;
  --liseuse-legende-active: #3a3731;
  --liseuse-legende-sombre: #b8b0a0;
  --liseuse-legende-sombre-active: #f5f3ed;
}

#liseuse {
  position: fixed;
  z-index: 9999;
  display: none;
}

#liseuse.ouvert {
  display: block;
}

/* la liste occupe 454px (400 + 24 et 30 de padding) ; le panneau prend tout
   le reste, du haut au bas de la fenêtre */
#liseuse.panneau {
  top: 0;
  bottom: 0;
  left: 454px;
  right: 0;
  padding: 18px 28px 22px 28px;
}

#liseuse.superpose {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#liseuse.superpose::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.86);
  -webkit-backdrop-filter: blur(3.5px);
  backdrop-filter: blur(3.5px);
}

#liseuse-boite {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#liseuse.superpose #liseuse-boite {
  position: absolute;
  top: 4vh;
  left: 4vw;
  width: 92vw;
  height: 92vh;
}

#liseuse-page {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #ececec;
  border: 1px solid #e2e2e2;
}

/* visible le temps que le pdf arrive, puis recouvert par le cadre */
#liseuse-attente {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--liseuse-legende);
}

#liseuse-page iframe {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#liseuse-legende {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 7px;
  font-size: 13px;
  letter-spacing: 0.3px;
}

#liseuse.panneau #liseuse-legende {
  color: var(--liseuse-legende);
}

#liseuse.superpose #liseuse-legende {
  color: var(--liseuse-legende-sombre);
}

#liseuse-titre {
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#liseuse-legende a {
  display: inline-flex;
  flex: none;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

#liseuse.panneau #liseuse-legende a:hover {
  color: var(--liseuse-legende-active);
}

#liseuse.superpose #liseuse-legende a:hover {
  color: var(--liseuse-legende-sombre-active);
}

/* le document ouvert reste repérable dans la liste */
a.liseuse-actif {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Texte (.txt) : une feuille claire qui défile seule, en Garamond droit plutôt
   qu'en italique ; la colonne occupe le panneau, plafonnée à environ 90 signes
   sur les très grands écrans */
#liseuse.texte #liseuse-page {
  background: #fdfdfb;
  border-color: #ececec;
}

#liseuse-texte {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 36px 34px 56px 34px;
  background: #fdfdfb; /* recouvre « chargement… » une fois le texte arrivé */
  scrollbar-width: thin;
  scrollbar-color: #c6c6c6 transparent;
}

#liseuse-texte article {
  max-width: 46em;
  margin: 0 auto;
  font-family: GaramondPremrPro-Capt, serif;
  font-size: 17px;
  line-height: 1.62;
  color: #2f2f2f;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

#liseuse-texte p {
  margin: 0 0 0.9em 0;
}

#liseuse-texte hr {
  border: 0;
  border-top: 1px solid #e2e2e2;
  width: 3em;
  margin: 1.4em 0 1.6em 0;
}

#liseuse-texte sup {
  font-size: 0.62em;
  line-height: 0;
  color: #9a9aa6;
  margin-left: 1px;
}