:root {
  --rouge: #7a1f1f; --encre: #1e2a33; --gris: #6b7280; --fond: #faf8f4; --carte: #fff; --ligne: #e5e1d8;
  --surligne: #fdf0c4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Noto Serif", "DejaVu Serif", Georgia, serif; color: var(--encre); background: var(--fond);
         display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
header, .barre-passage { flex-shrink: 0; }
header { position: sticky; top: 0; z-index: 5; display: flex; gap: 14px; align-items: center;
         padding: 10px 18px; padding-top: calc(10px + env(safe-area-inset-top));
         background: var(--rouge); color: #fff; flex-wrap: wrap; }
.titre { color: #fff; text-decoration: none; font-size: 20px; font-weight: bold; white-space: nowrap; }
#formulaire { display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; flex-wrap: wrap; }
#formulaire input { flex: 1 1 260px; min-width: 0; font-size: 16px; padding: 7px 10px; border: 0; border-radius: 4px; font-family: inherit; }
select, button { font-family: inherit; font-size: 14px; padding: 6px 8px; border-radius: 4px; border: 0; }
button { background: #f3d58a; color: #3b2a00; font-weight: bold; cursor: pointer; }
.option { font-size: 14px; white-space: nowrap; }
html { height: 100%; overflow: hidden; }
html, body { overflow-x: hidden; }
html.entete-cache header, html.entete-cache .barre-passage { display: none; }
.barre-passage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                 padding: 8px 18px; background: var(--rouge); color: #fff;
                 border-bottom: 1px solid #5c1414; }
.barre-passage .libelle { font-weight: bold; color: #fff; font-size: 20px; white-space: nowrap; }
.barre-passage select { min-width: 0; max-width: 100%; background: #fff; color: var(--encre); opacity: 1; }
.barre-passage select:disabled { opacity: 1; background: #fff; color: var(--encre); }
#sel-livre { flex: 0 0 auto; width: auto; max-width: 100%; }
#sel-ch, #sel-v { flex: 0 1 110px; }
main { display: grid; grid-template-columns: minmax(260px, 32%) minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
#fiche, #resultats { min-width: 0; overflow-wrap: anywhere; }
#resultats { overflow-y: auto; padding: 14px; border-right: 1px solid var(--ligne); -webkit-overflow-scrolling: touch; }
#fiche { overflow-y: auto; padding: 18px 26px 60px; -webkit-overflow-scrolling: touch; }
#fiche.lecteur { display: flex; flex-direction: column; overflow: hidden; padding: 10px 16px 12px; gap: 6px; }
.lecteur-entete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.lecteur-entete h1 { font-size: 22px; margin: 0; }
.fenetre-titre { font-size: 13px; color: var(--rouge); font-weight: bold; flex: 0 0 auto; margin-top: 2px; }
.fenetre { flex: 1 1 0; min-height: 120px; overflow-y: auto; background: var(--carte);
           border: 1px solid var(--ligne); border-radius: 6px; padding: 8px 12px; }
.verset.ancre { outline: 2px solid var(--rouge); background: #fff8e8; }
.aide { color: #444; line-height: 1.5; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#fiche:empty { display: none; }
.pied { display: none; flex: 0 0 auto; text-align: center; font-size: 12px; padding: 4px 12px 0;
        color: var(--gris); border-top: 1px solid var(--ligne); }
body:has(.aide:not(.masquee):not([hidden])) .pied { display: block; }
.pied a { color: inherit; text-decoration: underline; }
.pied p { margin: 0; }
.pied .bloc-install { display: none; }
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  body:has(.aide:not(.masquee):not([hidden])) .pied .bloc-install { display: block; }
}
html.apk .pied .bloc-install { display: none !important; }
.pied .btn-apk {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 0 auto 2px; padding: 0; min-height: 0; background: none; border: 0;
  text-decoration: none; color: inherit; cursor: pointer;
}
.pied .btn-apk .icone-apk {
  width: 52px; height: 52px; border-radius: 12px; display: block;
}
.pied .install-dl { display: inline-flex; align-items: center; gap: 4px;
                    font-size: 12px; line-height: 1.2; font-weight: bold; }
.pied .dl-symbole { width: 14px; height: 14px; display: block; }
.pied .btn-apk:hover { color: var(--encre); }
.pied .install-aide { margin: 0 0 2px; font-size: 12px; line-height: 1.35; }
.pied p:last-child { padding-bottom: 0; line-height: 1.2; }


.aide[hidden], .aide.masquee { display: none !important; }
.compte { color: var(--gris); font-size: 14px; margin: 0 0 10px; }
.groupe { background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 9px 12px; margin-bottom: 8px;
          cursor: pointer; }
.groupe:hover { border-color: var(--rouge); }
.groupe.actif { border-color: var(--rouge); box-shadow: 0 0 0 2px #7a1f1f22; }
.groupe .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lemme { font-size: 22px; }
.lemme.H, .orig.H { font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "DejaVu Sans", serif; }
.translit { color: var(--gris); font-style: italic; }
.code { font-family: "DejaVu Sans Mono", monospace; font-size: 12px; background: #eee; padding: 1px 5px; border-radius: 3px; color: #333; }
.code.lien { cursor: pointer; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: #e8eef5; color: #234; }
.badge.H { background: #f3ece0; color: #5a3b00; }
.glose { margin: 3px 0; }
.petit { font-size: 13px; color: var(--gris); }
h1 { margin: 0 0 4px; font-size: 34px; font-weight: normal; }
h2 { font-size: 18px; color: var(--rouge); border-bottom: 1px solid var(--ligne); padding-bottom: 3px; margin: 22px 0 8px; }
.entete .sous { font-size: 16px; }
.bloc { background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 10px 14px; margin: 8px 0; line-height: 1.5; }
.racines { list-style: none; padding-left: 0; margin: 4px 0; }
.racines ul { list-style: none; padding-left: 22px; border-left: 2px solid var(--ligne); margin: 4px 0 4px 6px; }
.racines li { margin: 4px 0; }
.racine-lemme { font-size: 19px; }
details summary { cursor: pointer; color: var(--gris); font-size: 14px; }
.puces span { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; background: #f1ede4; border-radius: 10px; font-size: 14px; }
.puces span b { color: var(--gris); font-weight: normal; font-size: 12px; }
.famille { display: flex; flex-wrap: wrap; gap: 6px; }
.famille div { background: var(--carte); border: 1px solid var(--ligne); border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 14px; }
.famille div:hover { border-color: var(--rouge); }
.filtre { display: flex; gap: 14px; align-items: center; font-size: 14px; margin: 6px 0 10px; flex-wrap: wrap; }
.verset { background: var(--carte); border: 1px solid var(--ligne); border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.verset .ref { font-weight: bold; color: var(--rouge); text-decoration: none; }
.interlin { display: flex; flex-wrap: wrap; gap: 2px 9px; margin: 6px 0; padding: 4px 0; }
.interlin.H { direction: rtl; }
.m { display: inline-flex; flex-direction: column; align-items: center; padding: 1px 3px; border-radius: 4px; cursor: pointer; }
.m:hover { background: #f0ece3; }
.m.cible { background: var(--surligne); outline: 1px solid #e3c25b; }
.m .orig { font-size: calc(17px + var(--delta-texte, 0px)); }
.m .gl { font-size: calc(13px + var(--delta-texte, 0px)); font-style: italic; direction: ltr; }
.m.ponct { cursor: default; }
.trad { margin: 4px 0 0; line-height: 1.45; font-size: calc(16px + var(--delta-texte, 0px)); }
.trad .src { font-size: 11px; color: var(--gris); text-transform: uppercase; margin-right: 6px; }
.trad.darby { }
.trad.crampon { color: #374151; }
.trad.liturgique { color: #1a3a2a; }
.sans-crampon .trad.crampon { display: none; }
#fenetre-fr.sans-darby .trad.darby { display: none; }
#fenetre-fr.sans-crampon .trad.crampon { display: none; }
#fenetre-fr.sans-liturgique .trad.liturgique { display: none; }
.options-trad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plus { display: block; margin: 14px auto; }
.attente { color: var(--gris); font-style: italic; }
.erreur { color: #a00; }
.repartition { font-size: 13px; color: var(--gris); line-height: 1.6; }
#chargement { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 14px; background: #7a1f1f; color: #faf8f4; }
#chargement[hidden] { display: none; }
#chargement img { border-radius: 18px; }
.piste { width: min(70vw, 280px); height: 8px; background: #5c1414; border-radius: 4px; overflow: hidden; }
#barre { width: 0; height: 100%; background: #f3d58a; }
button, select, input { min-height: 40px; }
@media (max-width: 860px) {
  main { grid-template-columns: 1fr; height: auto; min-height: 0; }
  #resultats { border-right: 0; border-bottom: 1px solid var(--ligne); }
  main:has(#fiche:not(:empty)) #resultats { max-height: 38dvh; }
  #fiche { padding: 12px 14px 80px; }
  #fiche.lecteur { height: auto; overflow: visible; padding-bottom: 24px; }
  #fiche.lecteur .fenetre { min-height: 38dvh; max-height: 52dvh; flex: none; }
  h1 { font-size: 28px; }
  .titre { font-size: 17px; }
  #formulaire input { flex-basis: 100%; }
  .barre-passage { padding: 8px 12px; }
  .barre-passage .libelle { flex: 1 1 100%; }
}
.outils-haut { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.mode-nuit { background: transparent; color: #fff; font-size: 22px;
             width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0;
             display: inline-flex; align-items: center; justify-content: center;
             line-height: 1; border: 1px solid #f3d58a88; }
.mode-nuit:hover { background: #5c1414; }
.taille-texte { font-size: inherit; }
.aa { position: relative; display: block; width: 20px; height: 20px; }
.aa-petit { position: absolute; left: 0; bottom: 0; font-size: 11px; font-weight: 700;
            line-height: 1; z-index: 1; font-family: Georgia, "Noto Serif", serif; }
.aa-grand { position: absolute; right: -2px; top: -2px; font-size: 17px; font-weight: 700;
            line-height: 1; z-index: 0; font-family: Georgia, "Noto Serif", serif; }
.taille-texte[aria-pressed="true"] { background: #5c1414; color: #fff; }
body.texte-grand { --delta-texte: 2px; }
body.nuit {
  --encre: #fff; --fond: #06121f; --carte: #0b1c30; --gris: #b8b8b8; --ligne: #123048; --surligne: #3a2e08;
  color-scheme: dark;
}
body.nuit header, body.nuit .barre-passage { color: #000; }
body.nuit .titre, body.nuit .barre-passage .libelle, body.nuit .option, body.nuit .mode-nuit { color: #000; }
body.nuit .mode-nuit { border-color: #0006; }
body.nuit .mode-nuit:hover { background: #5c1414; color: #fff; }
body.nuit header select, body.nuit header input, body.nuit #formulaire input,
body.nuit .barre-passage select, body.nuit .barre-passage select:disabled {
  background: var(--fond); color: #fff;
}
body.nuit .aide { color: #fff; }
body.nuit .code { background: #081828; color: #fff; }
body.nuit .badge, body.nuit .badge.H { background: #081828; color: #fff; }
body.nuit .puces span { background: #081828; color: #ddd; }
body.nuit .m:hover { background: #12263f; }
body.nuit .verset.ancre { background: #1a1400; }
body.nuit .trad.crampon, body.nuit .trad.liturgique { color: #fff; }
body.nuit .ref, body.nuit .verset .ref, body.nuit a.ref { color: #fff; }
body.nuit .pied, body.nuit .pied a { color: #fff; }
body.nuit .erreur { color: #f88; }
@media (min-width: 861px) and (max-width: 1100px) {
  main { grid-template-columns: minmax(220px, 38%) 1fr; }
}