/* site/assets/css/reader.css
   Task 12 — CSS partagé du Lecteur (transposé de Lecteur.dc.html).
   Extrait depuis site/templates/ang.js (Task 10) pour être réutilisé par les pages
   Ang ET les pages Bani. Les variables --l-* sont des ALIAS des tokens globaux
   (tokens.css) : le thème jour/nuit est GLOBAL (html[data-theme="jour"]), le
   bouton ☀/☾ du lecteur et celui de la nav pilotent le même thème. */

.lecteur { --l-bg:var(--bg); --l-ink:var(--fg); --l-ink-2:var(--fg-2); --l-hover:var(--surface);
  background:var(--l-bg); color:var(--l-ink); font-family:'Albert Sans',sans-serif;
  transition:background .4s; }

@keyframes pageIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes riseIn { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }

/* BARRE DE LECTURE */
.lecteur .barre-lecture { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:12px 40px; background:var(--bar-bg);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.lecteur .barre-left,.lecteur .barre-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lecteur .ctrl { height:40px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0 16px; font-size:13px; font-weight:500; color:var(--l-ink-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  font-family:'Albert Sans',sans-serif; transition:all .25s cubic-bezier(.4,0,.2,1); text-decoration:none; }
.lecteur .ctrl:hover { border-color:var(--accent); color:var(--accent); }
.lecteur .ctrl.prev,.lecteur .ctrl.next { width:40px; font-size:18px; color:var(--l-ink); }
.lecteur .ctrl.disabled { opacity:.3; cursor:default; }
.lecteur .ctrl.disabled:hover { border-color:var(--border); color:var(--l-ink-2); }
.lecteur .ang-pill { display:flex; align-items:baseline; gap:8px; padding:8px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); }
.lecteur .ang-label { font-size:13px; color:var(--muted); }
.lecteur .ang-num { font-family:'Marcellus',serif; font-size:20px; color:var(--accent); }
.lecteur .ang-total { font-size:13px; color:var(--muted); }
.lecteur .toggle { border-radius:9999px; padding:9px 16px; }
.lecteur .toggle.is-on { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.lecteur .font-ctrl { display:flex; align-items:center; gap:4px; padding:4px; background:var(--surface);
  border:1px solid var(--border); border-radius:9999px; }
.lecteur .font-ctrl .ctrl { width:32px; height:32px; padding:0; border:none; background:none; border-radius:50%; }
.lecteur .font-ctrl .font-down { font-size:13px; } .lecteur .font-ctrl .font-up { font-size:16px; }
.lecteur .favs-link { color:var(--accent); background:var(--accent-soft); border-color:rgba(201,154,62,.35); }
.lecteur .favs-link:hover { background:rgba(201,154,62,.2); }

/* CONTENU */
.lecteur .lecteur-main { animation:pageIn .6s cubic-bezier(.2,.7,.3,1) both; flex:1;
  max-width:860px; width:100%; margin:0 auto; padding:30px 24px 80px; box-sizing:border-box; }
.lecteur .lecteur-header { display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-bottom:40px; text-align:center; }
.lecteur .raag-label { font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.lecteur .lecteur-title { margin:0; font-family:'Marcellus',serif; font-size:28px;
  font-weight:400; color:var(--l-ink); }
.lecteur .title-rule { width:56px; height:1px; margin-top:10px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); }

/* VERSETS */
.lecteur .versets { display:flex; flex-direction:column; gap:8px; }
.lecteur .verset { position:relative; display:flex; flex-direction:column; gap:8px;
  /* 144px à droite : les trois boutons (fav, partage, signalement) occupent
     138px depuis le bord. Avec les 56px d'avant, un vers long leur passait
     dessous — 12 chevauchements dès la taille normale, 29 en police agrandie,
     jusqu'à 82px de recouvrement. */
  padding:22px 144px 22px 24px; border-radius:var(--radius); background:transparent;
  transition:background .25s cubic-bezier(.4,0,.2,1); animation:riseIn linear;
  animation-timeline:view(); animation-range:entry 0% entry 55%; }
.lecteur .verset:hover { background:var(--l-hover); }
.lecteur .verset .gurmukhi { margin:0; font-family:'Mukta Mahee',sans-serif;
  font-size:calc(26px * var(--font-scale,1)); line-height:1.8; color:var(--l-ink); }
.lecteur .verset .translit { margin:0; font-style:italic; font-size:calc(14px * var(--font-scale,1));
  line-height:1.5; color:var(--muted); }
.lecteur .verset .fr { margin:0; font-size:calc(16px * var(--font-scale,1)); line-height:1.6;
  color:var(--l-ink-2); }
.lecteur .verset .note-fr { margin-top:6px; padding:12px 16px; font-size:14px; line-height:1.6;
  color:var(--l-ink-2); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); }
.lecteur .verset-actions { position:absolute; top:18px; right:16px; display:flex; gap:2px; }
.lecteur .verset .share { position:absolute; top:18px; right:52px; width:34px; height:34px;
  padding:0; font-size:14px; color:var(--muted); background:none; border:none; border-radius:50%;
  cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); }
.lecteur .verset .share:hover { color:var(--accent); background:var(--accent-soft); }
.lecteur .verset .fav { position:absolute; top:18px; right:16px; width:34px; height:34px;
  padding:0; font-size:16px; color:var(--muted); background:none; border:none; border-radius:50%;
  cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); }
.lecteur .verset .fav:hover { color:var(--accent-hover); background:var(--accent-soft); }
.lecteur .verset .fav.is-fav { color:var(--accent); }
.lecteur .verset .report { position:absolute; top:18px; right:88px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted);
  opacity:.55; text-decoration:none; border-radius:50%; transition:all .25s cubic-bezier(.4,0,.2,1); }
.lecteur .verset .report:hover { opacity:1; color:var(--accent); background:var(--accent-soft); }
/* Traduction incomplète : signalé sobrement, sans dramatiser — c'est un état
   du corpus, pas une erreur du lecteur. */
.lecteur .trad-partielle { margin:4px 24px 18px; padding:12px 16px; font-size:13px;
  line-height:1.6; color:var(--muted); background:var(--surface);
  border:1px dashed var(--border); border-radius:8px; }
/* ─── MENU « AFFICHAGE » ──────────────────────────────────────────────────────
   Les réglages occasionnels (taille du texte, apprentissage, thème, zen,
   favoris) vivent sous un bouton plutôt qu'étalés dans la barre : douze
   commandes sur deux lignes repoussaient le premier vers à la moitié de
   l'écran. */
.lecteur .menu-affichage { position:relative; }
.lecteur .menu-liste { position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  display:flex; flex-direction:column; gap:6px; min-width:210px; padding:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.lecteur .menu-liste[hidden] { display:none; }
.lecteur .menu-liste .ctrl { width:100%; justify-content:flex-start; text-align:left; }
.lecteur .menu-groupe { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:2px 4px 8px; border-bottom:1px solid var(--border); }
.lecteur .menu-titre { font-size:12px; color:var(--muted); }
.lecteur .menu-btn[aria-expanded="true"] { color:var(--accent); border-color:var(--accent); }
.lecteur .menu-fleche { font-size:10px; opacity:.7; }

.lecteur .note-toggle { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:6px 12px; font-size:12px; color:var(--muted);
  background:none; border:1px solid var(--border); border-radius:9999px; cursor:pointer; }
.lecteur .note-toggle:hover { color:var(--accent); border-color:var(--accent); }
/* La note commente le shabad entier : son bouton vit au niveau du groupe, pas
   du verset — d'où un sélecteur non préfixé, plus une marge propre à ce cas. */
.lecteur .groupe-section > .note-toggle { margin:4px 24px 18px; }
.lecteur .groupe-section > .note-fr { margin:0 24px 22px; padding:16px 20px;
  font-size:14px; line-height:1.7; color:var(--fg-2);
  background:var(--accent-soft); border-left:2px solid var(--accent); border-radius:0 8px 8px 0; }
.lecteur .verset .reveal-btn { align-self:flex-start; padding:7px 16px; font-size:12px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px dashed rgba(201,154,62,.5);
  border-radius:9999px; cursor:pointer; transition:all .25s; }
.lecteur .verset .reveal-btn:hover { background:rgba(201,154,62,.2); }

/* Groupes / sections */
.lecteur .groupe-section { display:flex; flex-direction:column; gap:8px; }
.lecteur .groupe-section + .groupe-section { margin-top:16px; }
.lecteur .group-title { margin:8px 0 4px; font-family:'Marcellus',serif; font-size:16px;
  font-weight:400; color:var(--l-ink-2); letter-spacing:.04em; }
.lecteur .intro-notes { margin:4px 0 8px; }
.lecteur .intro-notes summary { cursor:pointer; font-size:12px; color:var(--muted); }
.lecteur .intro-notes[open] summary { color:var(--accent); margin-bottom:8px; }
.lecteur .intro-notes { font-size:14px; line-height:1.6; color:var(--l-ink-2); }

/* Carte Traduction (entries_json) */
.lecteur .traduction-card { margin:8px 0 16px; padding:18px 20px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); }
.lecteur .card-label { display:block; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.lecteur .entry { padding:10px 0; border-top:1px solid var(--border); }
.lecteur .entry:first-of-type { border-top:none; padding-top:0; }
.lecteur .entry-g { margin:0 0 4px; font-family:'Mukta Mahee',sans-serif; font-size:18px;
  line-height:1.6; color:var(--l-ink); }
.lecteur .entry-tr { margin:0 0 6px; font-style:italic; font-size:13px; color:var(--muted); }
.lecteur .entry .fr { margin:0; font-size:15px; line-height:1.6; color:var(--l-ink-2); }
.lecteur .entry .note-fr { margin-top:6px; }

/* États globaux du lecteur (reader.js ajoute des classes sur .lecteur) */
.lecteur.hide-translit .verset .translit { display:none; }
.lecteur.hide-fr .verset .fr,.lecteur.hide-fr .entry .fr { display:none; }
.lecteur.hide-fr .traduction-card { display:none; }
.lecteur.learn .verset .fr,.lecteur.learn .entry .fr { display:none; }
.lecteur.learn .verset .note-fr { display:none; }
/* Révélation en mode apprentissage : spécificité supérieure pour surcharger la règle
   qui masque .fr/.note-fr. reader.js ajoute la classe .revealed au clic. */
.lecteur.learn .verset .fr.revealed { display:block; }
.lecteur.learn .verset .note-fr.revealed { display:block; }
.lecteur.learn .verset .reveal-btn { display:inline-flex; }
.lecteur:not(.learn) .verset .reveal-btn { display:none; }
.lecteur.learn .traduction-card { display:none; }
/* MODE ZEN — reader.js pose .zen sur .lecteur ET .zen-mode sur <body>.
   Lecture sans distraction : nav du site, tabbar mobile et footer masqués ;
   dans la barre il ne reste que prev/pill/next + Jour/Nuit + Mode zen. */
body.zen-mode #site-nav, body.zen-mode .mobile-tabs, body.zen-mode .site-footer { display:none; }
.lecteur.zen .barre-lecture .barre-right .ctrl:not(.zen-toggle):not(.day-toggle) { display:none; }
.lecteur.zen .barre-lecture .barre-right .font-ctrl { display:none; } /* conteneur des A−/A+ */
.lecteur.zen .barre-left .index-btn, .lecteur.zen .barre-left .random-btn { display:none; }

/* Navigation bas de page */
.lecteur .lecteur-footnav { display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:48px; padding-top:28px; border-top:1px solid var(--border); }
.lecteur .page-nav { padding:12px 24px; font-size:14px; font-weight:500; color:var(--l-ink-2);
  background:var(--surface); border:1px solid var(--border); border-radius:9999px;
  text-decoration:none; transition:all .25s; }
.lecteur .page-nav:hover { color:var(--accent); border-color:var(--accent); }
.lecteur .page-nav.disabled { opacity:.3; pointer-events:none; }
.lecteur .footnav-mid { font-size:13px; color:var(--muted); }

/* INDEX LATÉRAL */
.lecteur .index-overlay { position:fixed; inset:0; z-index:180; background:var(--overlay);
  backdrop-filter:blur(4px); }
.lecteur .index-panel { position:fixed; top:0; bottom:0; left:0; z-index:190; width:320px;
  max-width:85vw; display:flex; flex-direction:column; background:var(--surface);
  border-right:1px solid var(--border); box-shadow:24px 0 80px rgba(0,0,0,.5); }
.lecteur .index-head { display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--border); }
.lecteur .index-title { font-family:'Marcellus',serif; font-size:18px; color:var(--l-ink); }
.lecteur .index-close { width:32px; height:32px; font-size:15px; color:var(--muted); background:none;
  border:1px solid var(--border); border-radius:50%; cursor:pointer; }
.lecteur .index-close:hover { color:var(--accent); border-color:var(--accent); }
.lecteur .index-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:10px; }
.lecteur .sommaire-item { display:flex; align-items:baseline; gap:10px; padding:13px 14px;
  border-radius:var(--radius-sm); text-decoration:none; color:var(--l-ink); transition:background .15s; }
.lecteur .sommaire-item:hover { background:var(--surface-2); }
.lecteur .sommaire-item.active { background:var(--accent-soft); }
.lecteur .sommaire-ang { font-size:12px; color:var(--muted); flex-shrink:0; }
.lecteur .sommaire-raag { font-size:14px; font-weight:500; font-family:'Mukta Mahee',sans-serif; }

/* MODAL PARTAGE */
.share-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:24px; background:var(--overlay); backdrop-filter:blur(8px); }
.share-modal-inner { display:flex; flex-direction:column; gap:20px; max-width:480px; width:100%; }
.share-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
  padding:48px 36px; background:linear-gradient(160deg,#12121c,#0a0a10);
  border:1px solid rgba(201,154,62,.5); border-radius:var(--radius-lg); }
.share-ek { font-family:'Mukta Mahee',sans-serif; font-size:34px; line-height:1.4; color:var(--accent); }
.share-gurmukhi { margin:0; font-family:'Mukta Mahee',sans-serif; font-size:24px; line-height:1.8; color:var(--fg); }
.share-rule { width:48px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.share-fr { margin:0; font-size:15px; line-height:1.7; color:var(--fg-2); }
.share-translit { margin:-6px 0 0; font-size:13px; font-style:italic; color:var(--muted); }
.share-source { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.share-brand { margin-top:-10px; font-family:'Marcellus',serif; font-size:15px; color:var(--accent); }
.share-brand-dot { opacity:.75; }
.share-actions { display:flex; justify-content:center; gap:10px; }
.share-actions button { padding:12px 26px; border-radius:9999px; font-family:'Albert Sans',sans-serif;
  font-size:14px; cursor:pointer; transition:all .25s; }
.share-download { background:var(--accent); color:#08080c; border:none; font-weight:600; }
.share-download:hover { background:var(--accent-hover); }
.share-close { background:none; color:var(--fg-2); border:1px solid var(--border); font-weight:500; }
.share-close:hover { color:var(--fg); border-color:var(--border-light); }

/* En-tête de page resserré : il annonçait le raag et l'auteur sur trois blocs
   avant le texte, redoublés par le titre de groupe juste dessous. */
.lecteur .lecteur-header { margin-bottom:18px; }

@media (max-width:760px) {
  .lecteur .barre-lecture { padding:10px 16px; }
  /* Les libellés des boutons de navigation cèdent la place à leur seule icône. */
  .lecteur .ctrl-texte { display:none; }
  .lecteur .menu-liste { right:auto; left:0; }
  .lecteur .lecteur-main { padding:28px 14px 70px; }
  /* L'ancienne règle masquait ici l'icône ☰ pour ne garder que le mot « Index ».
     Depuis que .ctrl-texte masque les libellés sur mobile, la garder vidait le
     bouton des deux côtés — il ne restait qu'un carré. C'est l'icône qu'on
     garde, le libellé reste accessible via aria-label. */
  .lecteur .index-btn .ctrl-texte { display:none; }
  .lecteur .index-btn span[aria-hidden] { display:inline; }

  /* Densité de lecture. Un verset mesurait 120 px pour 47 px de texte : 73 px
     de blanc, multipliés par les 11 vers d'un shabad. Le Gurmukhi garde de
     l'air (line-height 1.65, ses diacritiques se superposent au-dessus et
     au-dessous de la ligne) ; on reprend l'espace sur les marges. */
  /* Réserver 144px à droite mangerait 38 % d'un écran de 380px. Les boutons
     repassent donc dans le flux, alignés à droite sous le vers : plus aucun
     risque de recouvrement, et toute la largeur revient au texte. */
  .lecteur .verset { padding:12px 14px; gap:5px; }
  .lecteur .verset .gurmukhi { line-height:1.65; }
  .lecteur .verset-actions { position:static; align-self:flex-end; margin-top:2px; gap:4px; }
  .lecteur .verset .fav,
  .lecteur .verset .share,
  .lecteur .verset .report { position:static; width:30px; height:30px; }
  .lecteur .traduction-card { margin:8px 14px 16px; padding:14px 16px; }
  .lecteur .groupe-section > .note-toggle { margin:2px 14px 12px; }
  .lecteur .trad-partielle { margin:4px 14px 12px; }
  .lecteur .groupe-section > .note-fr { margin:0 14px 16px; padding:13px 16px; }
  .lecteur .group-title { margin:14px 14px 8px; }
}
/* ===== MOUVEMENT RÉDUIT =====
   Les vers et les cartes apparaissent au scroll (animation riseIn pilotée par
   animation-timeline). Pour qui a réglé son système sur « mouvement réduit »
   — vertiges, migraines vestibulaires — ce défilement animé est pénible et
   n'apportait aucun repli. Le contenu s'affiche alors directement, à son état
   final : rien ne disparaît, seule l'animation est neutralisée. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .lecteur .verset, .lecteur .traduction-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}